:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;--shell:#0d0e11;--panel:#15161a;--panel-raised:#1b1c21;--line:#ffffff17;--line-strong:#ffffff29;--ink:#f1f0eb;--ink-soft:#b8bac2;--ink-muted:#81838d;--signal:#d8ff63;--signal-ink:#10120b;--iris:#7a62ff;--danger:#ff806f;--mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;font-family:Avenir Next,Avenir,Helvetica Neue,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{background:var(--shell);min-height:100dvh;color:var(--ink);overflow:hidden}button,input{font:inherit}button{color:inherit}button,input[type=range]{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:2px solid var(--signal);outline-offset:3px}.app-shell{grid-template-columns:minmax(0,1fr) 356px;height:100dvh;display:grid;overflow:hidden}.workspace{cursor:grab;touch-action:none;background:radial-gradient(circle at 74% 4%,#7a62ff1a,#0000 36%),radial-gradient(circle at 8% 96%,#d8ff630a,#0000 32%),#0d0e11;place-items:center;min-width:0;display:grid;position:relative;overflow:hidden}.workspace:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 220px #0000007a}.workspace[data-dragging=true]{cursor:grabbing}.workspace-hint{z-index:5;color:var(--ink-muted);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:8px;font-size:10px;display:flex;position:absolute;top:22px;left:24px}.drag-glyph{border:1px solid var(--line);width:22px;height:22px;color:var(--ink-soft);border-radius:50%;place-items:center;font-size:13px;display:grid}.stage{aspect-ratio:4/5;border-radius:38px;place-items:center;width:min(66%,540px);transition:background .2s;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 2px 1px #ffffff29,0 28px 90px #0000005c}.stage:before{content:"";pointer-events:none;background:linear-gradient(145deg,#ffffff1a,#0000 35%),radial-gradient(circle at 60% 90%,#0000001f,#0000 42%);position:absolute;inset:0}.scene{perspective:1400px;position:relative}.phone{--phone-width:248px;--phone-height:537px;--phone-radius:52px;--screen-x:7px;--screen-y:15px;--screen-width:234px;--screen-height:507px;--screen-radius:40px;z-index:2;width:var(--phone-width);height:var(--phone-height);transform:rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(var(--rotate-z)) scale(var(--mockup-scale));transform-style:preserve-3d;transition:width .18s,height .18s,transform 40ms linear;position:relative}.phone-back,.phone-front{border-radius:var(--phone-radius);position:absolute;inset:0}.phone-back{background:linear-gradient(140deg,#1a1b1f,#060607);transform:translateZ(-15px)}.phone-front{background:linear-gradient(140deg,#3b3d43 0%,#1c1d21 32%,#0e0f11 72%,#292b30 100%);transform:translateZ(0);box-shadow:inset 0 0 0 1px #ffffff1c,inset 0 1.2px 1.5px #ffffff38,inset 0 -1.2px 1.5px #0009,0 0 0 1px #0000008c,0 3px 8px #00000073}.phone--iphone-17-pro .phone-front{background:linear-gradient(138deg,#5f7892 0%,#31475d 16%,#102337 51%,#08131f 77%,#4b647e 100%)}.phone--iphone-17-pro .phone-back{background:linear-gradient(140deg,#23384d,#07111d)}.phone--pixel-9 .phone-front{background:linear-gradient(138deg,#707176 0%,#404145 18%,#1b1c1f 52%,#0d0e10 77%,#55565b 100%)}.phone--pixel-9 .phone-back{background:linear-gradient(140deg,#343538,#0d0e10)}.phone--silver .phone-front{background:linear-gradient(140deg,#f1f2f5 0%,#c6c9d0 32%,#a8acb5 72%,#eef0f3 100%);box-shadow:inset 0 0 0 1px #ffffff80,inset 0 1.2px 1.5px #ffffffb3,0 0 0 1px #0000004d,0 3px 8px #0006}.phone--pixel-9.phone--silver .phone-front{background:linear-gradient(138deg,#f1eee7 0%,#d2cec5 25%,#a9a69f 70%,#f4f1ea 100%)}.phone--pixel-9.phone--silver .phone-back{background:linear-gradient(140deg,#dedad2,#96938d)}.phone--silver .phone-back{background:linear-gradient(140deg,#c7c9d0,#7d808a)}.bezel{border-radius:calc(var(--phone-radius) - 3px);background:#050506;width:100%;height:100%;position:relative;box-shadow:inset 0 0 0 1px #000000e6}.screen{top:var(--screen-y);left:var(--screen-x);width:var(--screen-width);height:var(--screen-height);border-radius:var(--screen-radius);background:#050506;position:absolute;overflow:hidden}.screen img{object-fit:cover;width:100%;height:100%;display:block}.screen-placeholder{color:#a5a7af;cursor:pointer;background:repeating-linear-gradient(135deg,#111218,#111218 14px,#15161d 14px 28px);border:0;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;height:100%;padding:24px;font-size:13px;line-height:1.45;display:flex}.screen-placeholder strong{color:var(--ink);font-weight:600}.screen-placeholder small{color:#71737d;font-size:10px}.add-mark{width:30px;height:30px;color:var(--signal);border:1px solid #ffffff2b;border-radius:50%;place-items:center;margin-bottom:4px;font-size:20px;font-weight:300;display:grid}.dynamic-island{z-index:3;pointer-events:none;background:#000;border-radius:999px;position:absolute;left:50%;transform:translate(-50%)}.dynamic-island span{background:radial-gradient(circle at 35% 35%,#2a3a66 0%,#0a0c14 60%);border-radius:50%;width:7px;height:7px;position:absolute;top:50%;right:11px;transform:translateY(-50%);box-shadow:inset 0 0 0 1px #000c}.camera-hole{z-index:4;pointer-events:none;background:radial-gradient(circle at 38% 34%,#26375e 0%,#080a11 48%,#000 72%);border-radius:50%;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #ffffff0f,inset 0 0 0 1px #000}.screen-glare{z-index:2;border-radius:var(--screen-radius);opacity:.9;mix-blend-mode:screen;pointer-events:none;background:linear-gradient(125deg,#fff3 0%,#ffffff0a 18%,#0000 38%);transition:opacity .16s;position:absolute;inset:0}.screen-glare--off{opacity:0}.side-button{z-index:4;background:linear-gradient(90deg,#070708,#2c2e33);border-radius:2px;width:3px;position:absolute}.side-button--action{height:22px;top:142px;left:-2px}.side-button--volume-up{height:44px;top:190px;left:-2px}.side-button--volume-down{height:44px;top:242px;left:-2px}.side-button--power{height:74px;top:205px;right:-2px}.side-button--pixel-power,.side-button--pixel-volume{background:linear-gradient(270deg,#070708,#2c2e33);right:-2px}.side-button--pixel-power{height:54px;top:145px}.side-button--pixel-volume{height:76px;top:213px}.phone--silver .side-button{background:linear-gradient(90deg,#8d909a,#e7e9ed)}.phone--frameless .phone-front,.phone--frameless .bezel{box-shadow:none;background:0 0;border-radius:18px}.phone--frameless .screen,.phone--frameless .screen-glare{border-radius:18px;width:100%;height:100%;inset:0}.phone--frameless .phone-back,.phone--frameless .dynamic-island,.phone--frameless .camera-hole,.phone--frameless .side-button{display:none}.phone-shadow{z-index:0;filter:blur(34px);background:#0000008c;border-radius:50%;width:62%;height:14%;position:absolute;top:62%;left:50%}.control-panel{z-index:10;border-left:1px solid var(--line);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);background:#15161af0;flex-direction:column;min-width:0;display:flex;position:relative;overflow:hidden;box-shadow:-24px 0 80px #00000029}.panel-header{border-bottom:1px solid var(--line);flex:none;justify-content:space-between;align-items:center;gap:16px;min-height:76px;padding:16px 18px;display:flex}.brand{align-items:center;gap:11px;min-width:0;display:flex}.brand-mark{width:34px;height:34px;color:var(--signal);font-family:var(--mono);background:#d8ff630f;border:1px solid #d8ff6347;border-radius:10px;flex:none;place-items:center;font-size:12px;font-weight:700;display:grid}.brand h1,.brand p{text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.brand h1{letter-spacing:-.01em;font-size:14px;font-weight:650}.brand p{color:var(--ink-muted);margin-top:2px;font-size:10px}.reset-button{border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:8px;flex:none;padding:7px 9px;font-size:10px}.reset-button:hover{border-color:var(--line-strong);background:#ffffff0a}.panel-scroll{scrollbar-color:#ffffff29 transparent;flex:1;min-height:0;overflow-y:auto}.panel-section{border-bottom:1px solid var(--line);padding:20px 18px 22px}.panel-section--output{border-bottom:0;border-top:1px solid var(--line);background:#15161afa;flex:none;padding-bottom:26px}.section-heading{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:15px;display:flex}.section-heading h2{color:var(--ink);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:11px;font-weight:650}.section-heading span{color:var(--ink-muted);text-align:right;text-overflow:ellipsis;white-space:nowrap;font-size:9px;overflow:hidden}.device-grid{grid-template-columns:1fr 1fr;gap:7px;display:grid}.device-grid button{border:1px solid var(--line);cursor:pointer;text-align:left;background:#ffffff06;border-radius:10px;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:9px;min-width:0;min-height:66px;padding:10px;display:grid;position:relative}.device-grid button:hover{border-color:var(--line-strong);background:#ffffff0d}.device-grid button[aria-pressed=true]{background:#d8ff6313;border-color:#d8ff6359}.device-glyph{width:19px;height:39px;color:var(--ink-muted);border:1px solid;border-radius:5px;justify-self:center;display:block;position:relative}.device-grid button[aria-pressed=true] .device-glyph{color:var(--signal)}.device-glyph:after{content:"";background:currentColor;position:absolute;top:3px;left:50%;transform:translate(-50%)}.device-glyph--island:after{border-radius:3px;width:8px;height:3px}.device-glyph--hole:after{border-radius:50%;width:3px;height:3px}.device-copy{min-width:0;display:block}.device-copy strong,.device-copy small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.device-copy strong{color:var(--ink);font-size:10px;font-weight:600}.device-copy small{color:var(--ink-muted);font-family:var(--mono);margin-top:5px;font-size:7px}.device-platform{color:var(--ink-muted);font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase;font-size:6px;position:absolute;top:7px;right:7px}.pose-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.pose-grid button{border:1px solid var(--line);cursor:pointer;text-align:left;background:#ffffff06;border-radius:9px;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:9px;display:flex}.pose-grid button:hover{border-color:var(--line-strong);background:#ffffff0d}.pose-grid button[aria-pressed=true]{color:var(--signal);background:#d8ff6314;border-color:#d8ff6359}.pose-grid span{text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:10px;overflow:hidden}.pose-grid small{color:var(--ink-muted);font-family:var(--mono);font-size:8px}.range-stack{gap:15px;margin-top:20px;display:grid}.range-control{min-width:0}.control-label{color:var(--ink-soft);justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:10px;display:flex}.control-label output{color:var(--ink);font-family:var(--mono);font-size:9px}input[type=range]{appearance:none;background:linear-gradient(to right, var(--signal) 0, var(--signal) var(--range-progress), #ffffff1c var(--range-progress), #ffffff1c 100%);border-radius:3px;width:100%;height:3px;margin:0}input[type=range]::-webkit-slider-thumb{appearance:none;border:2px solid var(--panel);background:var(--signal);cursor:pointer;border-radius:50%;width:14px;height:14px;box-shadow:0 0 0 1px #d8ff6370}input[type=range]::-moz-range-thumb{border:2px solid var(--panel);background:var(--signal);cursor:pointer;border-radius:50%;width:10px;height:10px;box-shadow:0 0 0 1px #d8ff6370}.control-fieldset{border:0;min-width:0;margin:0;padding:0}.control-fieldset legend{width:100%;color:var(--ink-soft);margin-bottom:8px;font-size:10px}.stage-swatches{gap:9px;margin-bottom:18px;display:flex}.stage-swatches button{width:30px;height:30px;box-shadow:0 0 0 1px var(--line);cursor:pointer;border:2px solid #0000;border-radius:9px;padding:0}.stage-swatches button[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 2px var(--panel), 0 0 0 3px #ffffff61}.segment-stack{gap:14px;margin-top:18px;display:grid}.segmented-control{background:#ffffff0e;border:1px solid #ffffff09;border-radius:9px;gap:3px;padding:3px;display:flex}.segmented-control button{min-height:28px;color:var(--ink-muted);cursor:pointer;background:0 0;border:0;border-radius:6px;flex:1;font-size:10px}.segmented-control button[aria-pressed=true]{color:var(--ink);background:#ffffff1c;box-shadow:0 1px 3px #00000047}.angle-readout{border:1px solid var(--line);color:var(--ink-soft);font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap;background:#101115;border-radius:9px;padding:11px 12px;font-size:8px;display:block;overflow:hidden}.secondary-actions{grid-template-columns:1fr 1fr;gap:7px;margin-top:10px;display:grid}.button{cursor:pointer;border-radius:9px;min-height:38px;padding:0 12px;font-size:10px;font-weight:600;transition:transform .12s,background .12s,border-color .12s}.button:active:not(:disabled){transform:translateY(1px)}.button--quiet{border:1px solid var(--line);color:var(--ink-soft);background:#ffffff09}.button--quiet:hover{border-color:var(--line-strong);color:var(--ink);background:#ffffff0f}.button--primary{border:1px solid var(--signal);background:var(--signal);width:100%;color:var(--signal-ink);margin-top:8px}.button--primary:hover:not(:disabled){background:#e4ff8c}.button--primary:disabled{border-color:var(--line);color:var(--ink-muted);cursor:not-allowed;background:#ffffff0f}.toast{z-index:30;opacity:0;background:var(--ink);color:var(--signal-ink);pointer-events:none;border:1px solid #d8ff634d;border-radius:9px;padding:9px 14px;font-size:11px;transition:opacity .16s,transform .16s;position:fixed;bottom:18px;left:calc(50% - 178px);transform:translate(-50%,12px);box-shadow:0 14px 40px #0000004d}.toast--visible{opacity:1;transform:translate(-50%)}.toast--error{color:#ffd6d0;background:#2a1717;border-color:#ff806f73}.visually-hidden{clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}@media (width<=900px){body{overflow:auto}.app-shell{height:auto;min-height:100dvh;display:block;overflow:visible}.workspace{height:62dvh;min-height:480px}.stage{width:min(70%,460px);max-height:calc(62dvh - 64px)}.control-panel{border-top:1px solid var(--line);border-left:0;min-height:38dvh}.panel-scroll{overflow:visible}.toast{left:50%}}@media (width<=560px){.workspace{height:56dvh;min-height:420px}.workspace-hint{top:14px;left:14px}.stage{border-radius:28px;width:min(86%,400px);max-height:calc(56dvh - 52px)}.scene{transform:scale(.78)}.panel-header,.panel-section{padding-left:16px;padding-right:16px}.section-heading span{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}