.device-studio{position:relative;isolation:isolate;width:100%;min-width:0;border:1px solid #e1e6da;border-radius:28px;padding:20px;background:radial-gradient(ellipse at 50% 38%,#fff 0%,#edf1e6 56%,#e3e9da 100%);overflow:hidden;color:#20281d}.device-studio-top{position:absolute;left:22px;right:22px;top:19px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px}.device-live-badge{font-size:10px;font-weight:800;letter-spacing:.12em;border:1px solid #bdc7b4;border-radius:100px;padding:7px 10px;background:#ffffff9c;white-space:nowrap}.device-live-badge:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#6d963b;margin-right:6px;vertical-align:2px}.device-drag-hint{color:#65715d;font-size:11px}.device-stage{height:430px;position:relative;display:flex;align-items:center;justify-content:center;min-width:0}.device-canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;outline:none}.device-stage.dragging .device-canvas{cursor:grabbing;touch-action:none}.device-loading{text-align:center;padding:40px;max-width:380px;font-size:13px;line-height:1.7;color:#64705c}.device-toolbar{display:flex;justify-content:center;gap:8px;margin-top:-15px;position:relative;z-index:3}.device-control{width:36px;height:36px;display:grid;place-items:center;border:1px solid #d4ddca;border-radius:50%;background:#ffffffc9;color:#34412b;font-size:19px;cursor:pointer;box-shadow:0 3px 12px #24351208}.device-control:hover{background:#d8ff62;border-color:#bddc61}.device-views{display:flex;gap:12px;justify-content:center;margin:12px 0}.device-view-button{font-size:11px;background:transparent;border:0;color:#64745b;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.device-swatches{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:17px 0 11px}.device-swatch{width:26px;height:26px;border-radius:50%;background:var(--swatch);border:3px solid #f4f6ee;box-shadow:0 0 0 1px #c4cabb;cursor:pointer;transition:box-shadow .2s,transform .2s}.device-swatch.selected{box-shadow:0 0 0 2px #1b2817;transform:scale(1.08)}.device-swatch:focus-visible{outline:3px solid #9db547;outline-offset:4px}.device-color-name{text-align:center;font-size:12px;font-weight:650;min-height:19px}.device-note{font-size:10px!important;line-height:1.5!important;color:#7a8273!important;text-align:center;max-width:390px;margin:8px auto 0!important}.hero .device-studio{border:0;background:radial-gradient(ellipse,#e8efdd66,transparent 72%);overflow:visible;padding:20px 10px 12px}.hero .device-stage{height:410px}.hero .device-note{font-size:10px!important}.hero .device-studio-top{left:20px;right:20px}.detail-3d .device-stage{height:450px}.device-unavailable .device-toolbar,.device-unavailable .device-views{display:none}@media(max-width:600px){.device-studio{padding:12px;border-radius:20px}.device-stage,.hero .device-stage{height:360px}.device-studio-top{left:15px;right:15px;top:14px}.device-drag-hint{font-size:11px;max-width:130px;text-align:right}.device-note{font-size:11px!important}.device-control{width:38px;height:38px}.device-color-name{font-size:12px}.device-view-button{font-size:12px}.detail-3d .device-stage{height:365px}}@media(prefers-reduced-motion:reduce){.device-swatch{transition:none}}