@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#101415;--panel:#171d1e;--line:#303d3e;--text:#e1e9e8;--muted:#92a3a3;--accent:#8fc9c3;--mono:'Space Grotesk',monospace;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}body{margin:0}button,input,a{ -webkit-tap-highlight-color:transparent}button,a,input{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button{border:1px solid var(--line);background:transparent}button:hover{border-color:#71938f;color:var(--accent)}button:disabled{opacity:.35;cursor:not-allowed}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible,#viewport:focus-visible{outline:2px solid var(--accent);outline-offset:4px}input:focus-visible{outline:2px solid var(--accent)}.topbar{height:87px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;border-bottom:1px solid var(--line)}.back{font:11px var(--mono);letter-spacing:1.5px;display:flex;gap:12px;align-items:center}.back:first-letter{font-size:20px}.brand{font-size:24px;letter-spacing:-1.2px;font-weight:600;display:flex;align-items:center}.brand>span:not(.brand-mark){color:var(--muted);font-weight:400}.brand-mark{width:31px;height:31px;object-fit:contain;margin-right:10px;flex-shrink:0}.brand sup{font:10px var(--mono);color:var(--muted);align-self:flex-start;margin:7px 0 0 8px;letter-spacing:1px}.outline{border-radius:5px;font-size:12px;padding:11px 16px;display:flex;gap:16px}main{display:grid;grid-template-columns:minmax(0,1fr) 330px;max-width:1920px;margin:auto}.stage{min-height:790px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 62%,#253638 0%,#182325 38%,#101415 75%)}#viewport{position:absolute;inset:0;cursor:grab;touch-action:none}#viewport:active{cursor:grabbing}canvas{display:block;width:100%;height:100%}.intro{position:absolute;left:46px;top:43px;z-index:1;pointer-events:none}.eyebrow{font:10px var(--mono);letter-spacing:1.6px;color:var(--muted);display:flex;align-items:center;gap:8px}.dot{display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px #8fc9c340}h1{font-size:clamp(38px,4.6vw,72px);line-height:1.04;letter-spacing:-3.5px;font-weight:400;margin:30px 0 18px}h1 span{color:#8da5a3}.intro>p:last-child{font-size:13px;color:var(--muted);line-height:1.7}.stage-meta{position:absolute;right:32px;top:49px;display:flex;flex-direction:column;align-items:flex-end;gap:14px;font:9px var(--mono);letter-spacing:1.5px;color:var(--muted);pointer-events:none}.live{display:flex;align-items:center;gap:7px;font-size:9px}.stage-bottom{position:absolute;bottom:65px;left:46px;right:32px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.stage-bottom p{font-size:11px;color:var(--muted);margin-bottom:0}.icon-btn{pointer-events:auto;border-radius:50%;width:38px;height:38px;font-size:21px}.gesture{position:absolute;bottom:25px;left:0;right:0;text-align:center;font:10px var(--mono);color:var(--muted);pointer-events:none}.gesture span{margin:0 12px;color:#4d6866}.inspector{background:var(--panel);border-left:1px solid var(--line);padding:32px 27px 22px}.product-head{padding-bottom:25px}.product-head h2{font-weight:500;font-size:32px;letter-spacing:-1.2px;margin:13px 0 12px}.product-head h2 span{font-size:14px;vertical-align:super;margin-left:4px;color:var(--muted)}.product-head p{font-size:12px;color:var(--muted);line-height:1.8;margin:0}.tags{display:flex;gap:6px;margin-top:16px}.tags span{font:8px var(--mono);letter-spacing:1px;border:1px solid var(--line);padding:5px 7px;border-radius:3px;color:#afc0be}fieldset{border:0;border-top:1px solid var(--line);padding:20px 0 22px;margin:0;min-width:0}legend{float:left;width:100%;font:10px var(--mono);letter-spacing:1.2px;margin-bottom:19px;color:#9cadaa}legend span{float:right;color:var(--text);font-size:10px;letter-spacing:0}.swatches{clear:both;display:flex;gap:13px;margin:0 0 21px 4px}.swatch{border-radius:50%;width:28px;height:28px;background:var(--swatch);border:3px solid var(--panel);outline:1px solid #465c5b;box-shadow:inset 0 2px 3px #ffffff1a}.swatch.active{outline:2px solid var(--accent);outline-offset:2px}.range-label{font-size:11px;display:flex;justify-content:space-between;color:var(--muted);clear:both}.range-label output{font:10px var(--mono);color:var(--text)}input[type=range]{width:100%;height:3px;margin:18px 0 2px;accent-color:var(--accent);cursor:pointer}.segmented{display:flex;clear:both;background:#101718;border:1px solid var(--line);border-radius:5px;padding:3px;margin-bottom:19px}.segmented button{flex:1;border:0;font-size:11px;padding:9px 2px;border-radius:3px;color:var(--muted)}.segmented button.active{background:#294341;color:var(--accent)}.toggle-row{clear:both;display:flex;justify-content:space-between;align-items:center;margin:0 0 13px;font-size:12px}.toggle-row:last-child{margin:0}input[role=switch]{appearance:none;cursor:pointer;width:28px;height:16px;border-radius:20px;background:#354544;position:relative;margin:0;transition:background .2s}input[role=switch]:before{content:'';width:10px;height:10px;position:absolute;top:3px;left:3px;background:#90a5a2;border-radius:50%;transition:transform .2s}input[role=switch]:checked{background:var(--accent)}input[role=switch]:checked:before{background:#203a37;transform:translateX(12px)}input:disabled{opacity:.35;cursor:not-allowed}.activity{border-top:1px solid var(--line);padding-top:20px}.activity>p{font-size:13px;margin:12px 0 10px}#wave{height:24px;display:flex;align-items:center;gap:3px}#wave i{display:block;width:2px;background:#5e9690;transform-origin:center;transition:height .15s}#wave.playing i{animation:wave .4s alternate infinite;animation-delay:var(--delay)}@keyframes wave{to{transform:scaleY(.25);background:var(--accent)}}details{margin-top:10px}summary{font-size:10px;color:var(--muted);cursor:pointer;list-style:none}summary span{float:right}#key-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding-top:10px}#key-buttons button{font-size:9px;padding:7px 1px;border-radius:3px}.bring-own{margin-top:23px}.import-btn{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 10px;border-radius:4px;font-size:11px;background:#1c2d2d;border-color:#3b615d;color:var(--accent)}.bring-own p{font:8px var(--mono);color:var(--muted);text-align:center;line-height:1.7}#demo{font-size:11px;padding:8px;width:100%;border-radius:4px;margin-top:6px}footer{border-top:1px solid var(--line);padding:19px 42px;display:flex;align-items:center;justify-content:space-between;font:9px var(--mono);letter-spacing:1px;color:#b0c1be}footer .muted{color:#6b8581;margin-left:14px}footer>span:last-child{font-family:'DM Sans',sans-serif;letter-spacing:0;color:var(--muted)}.footer-star{font-size:20px;color:var(--accent);margin-left:20px}#loading{position:absolute;top:59%;left:50%;transform:translate(-50%,-50%);font-size:13px;background:#172526e8;padding:20px;border:1px solid var(--line);border-radius:5px;max-width:80%;text-align:center}#loading[hidden]{display:none}#drop-hint{position:absolute;inset:15px;border:2px dashed var(--accent);background:#1a2e2ee8;z-index:5;display:none;place-items:center;font-size:25px;pointer-events:none}.stage.drag-over #drop-hint{display:grid}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,15px);max-width:90vw;opacity:0;pointer-events:none;background:#8fc9c3;color:#162e2b;padding:13px 22px;border-radius:5px;font-size:12px;transition:.2s;z-index:10}#toast.visible{opacity:1;transform:translate(-50%,0)}.no-script{position:fixed;top:50%;left:20%;background:#171d1e;padding:30px}
@media(min-width:1500px){.stage{min-height:860px}main{grid-template-columns:minmax(0,1fr) 360px}.inspector{padding:35px}.intro{top:55px;left:60px}}
@media(max-width:1000px){.topbar{padding:0 24px}.back span{display:none}.intro{left:28px;top:30px}h1{font-size:46px}.stage-meta{top:280px;right:22px}.stage-bottom{left:28px}.stage-bottom p{max-width:210px;line-height:1.5}main{grid-template-columns:minmax(0,1fr) 290px}.inspector{padding:28px 22px}.gesture{font-size:8px}.gesture span{margin:0 5px}}
@media(max-width:700px){.topbar{height:70px;padding:0 20px}.brand{font-size:22px}.outline{padding:9px 10px;font-size:10px;gap:6px}main{display:block}.stage{min-height:650px;height:78svh;max-height:830px}.intro{top:24px;left:24px}h1{font-size:45px;margin:22px 0 12px;letter-spacing:-2.5px}.intro>p:last-child{font-size:11px}.eyebrow{font-size:8px}.stage-meta{top:35px;right:20px}.stage-meta>span:first-child{display:none}.stage-bottom{left:24px;bottom:61px}.stage-bottom p{max-width:260px}.gesture{font-size:9px}.inspector{border-left:0;border-top:1px solid var(--line);padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.product-head,.bring-own{grid-column:1/-1}.product-head{padding-bottom:25px}fieldset{padding-top:20px}.activity{padding-top:20px}legend{font-size:9px;letter-spacing:.7px}footer{padding:18px 24px}footer>span:last-child{display:none}.swatches{gap:12px}.range-label{font-size:10px}#key-buttons{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.inspector{display:block}.brand sup{display:none}.gesture{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}
@media(min-width:701px){.stage{position:sticky;top:0;height:calc(100svh - 87px);min-height:620px;max-height:1100px}.intro{top:28px}h1{font-size:clamp(38px,4.3vw,66px);margin:23px 0 14px}.stage-meta{top:39px}}
.product-head h2{overflow-wrap:anywhere}.activity{min-width:0}#wave{overflow:hidden}#wave i{flex-shrink:0}
[hidden]{display:none!important}
.mobile-jump{display:none}
@media(max-width:700px){html{scroll-behavior:smooth}body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}#configuration,#product-preview{scroll-margin-top:16px}.mobile-jump{display:flex;align-items:center;justify-content:center;position:fixed;z-index:8;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);min-height:48px;padding:0 24px;border:1px solid #acdcd6;border-radius:999px;background:var(--accent);color:#152d2b;font-size:14px;font-weight:700;white-space:nowrap;box-shadow:0 6px 28px #0009}.mobile-jump:hover{background:#b2dcd6}#toast{bottom:calc(82px + env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.swatches{flex-wrap:wrap}.retro-swatch{background:linear-gradient(135deg,#e0e4edcc,#74808c99 48%,#b7bececc 52%,#58616f99),repeating-conic-gradient(#334748 0% 25%,#172627 0% 50%) 0/8px 8px}.retro-swatch:after{content:'';display:block;width:8px;height:8px;border:1px solid #d1f3e9;border-radius:2px;margin:auto}
@media(max-width:700px){.inspector{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.swatches{gap:9px}.swatch{width:25px;height:25px;flex-shrink:0}.inspector legend{line-height:1.7}legend span{float:none;display:block}.range-label{gap:8px}.range-label output{flex-shrink:0}}