:root{color-scheme:dark;--bg:#080d15;--panel:#111b29;--panel2:#172536;--ink:#eaf6fa;--muted:#91a6b7;--line:#26384c;--cyan:#72eadf;--amber:#ffcc86;--purple:#b8a0ff;--red:#f7a0a0;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--sans:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 80% -20%,#1b344b 0,transparent 54%),var(--bg);color:var(--ink);font:14px/1.5 var(--sans);min-width:320px}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,select{cursor:pointer}button{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}h1,h2,h3,p{margin-top:0}.shell{width:min(1500px,calc(100% - 40px));margin:auto}.topbar{border-bottom:1px solid var(--line);background:#09121ccc;backdrop-filter:blur(15px)}.top-inner{min-height:65px;display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{display:inline-flex;align-items:center;gap:13px;font-weight:800;letter-spacing:-.04em;font-size:22px}.brand-mark{height:36px;width:36px;display:grid;place-items:center;background:var(--cyan);color:#0a171a;border-radius:10px;font-weight:900}.brand small{display:block;font:10px var(--mono);color:var(--muted);letter-spacing:.12em}.toplinks{display:flex;gap:22px;color:#b6c8d0;font:11px var(--mono)}.toplinks a:hover{color:var(--cyan)}.hero{padding:34px 0 24px;display:flex;justify-content:space-between;gap:22px;align-items:end}.eyebrow{color:var(--cyan);text-transform:uppercase;letter-spacing:.17em;font:11px var(--mono)}h1{font-size:clamp(40px,7.5vw,92px);letter-spacing:-.085em;line-height:.99;margin:8px 0 12px}h1 span{color:var(--cyan)}.hero p{max-width:740px;color:#aec2d0;margin:0;font-size:clamp(13px,1.4vw,16px)}.hero-meta{flex-shrink:0;text-align:right;font:11px/2 var(--mono);color:var(--muted)}.hero-meta b{color:var(--ink)}.dot{width:7px;height:7px;display:inline-block;background:var(--cyan);border-radius:100%;box-shadow:0 0 12px var(--cyan);margin-right:6px}.tabs{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}.tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:12px 17px;font:12px var(--mono);white-space:nowrap}.tab[aria-selected=true]{border-color:var(--cyan);color:var(--ink)}.tab:hover{color:var(--cyan)}[hidden]{display:none!important}
.studio{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:14px;align-items:start}.workspace{min-width:0}.canvas-shell{position:relative;overflow:hidden;border:1px solid #315268;border-radius:16px;background:#070d17;box-shadow:0 24px 65px #0004}.canvas-shell canvas{width:100%;height:clamp(380px,54vw,650px);display:block;touch-action:none;cursor:crosshair}.canvas-shell canvas[data-tool=select]{cursor:grab}.canvas-shell canvas.dragging{cursor:grabbing}.canvas-top{position:absolute;pointer-events:none;top:15px;left:16px;right:16px;display:flex;justify-content:space-between;gap:6px}.floating{background:#0a1426c9;border:1px solid #305069;padding:7px 10px;border-radius:7px;font:10px var(--mono);color:#c6ebed;backdrop-filter:blur(7px)}.canvas-bottom{position:absolute;pointer-events:none;bottom:14px;left:14px;right:14px;display:flex;justify-content:space-between;color:#a6becb;font:10px var(--mono);gap:12px}.canvas-bottom span{background:#081423b8;padding:6px 8px;border-radius:6px}.toolstrip{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0 0 10px}.toolstrip button,.actions button,.minor-btn,.btn{border:1px solid #375064;background:#132333;color:var(--ink);border-radius:8px;padding:9px 12px;font:11px var(--mono);transition:.12s}.toolstrip button:hover,.actions button:hover,.minor-btn:hover,.btn:hover{border-color:var(--cyan);background:#1b3742}.toolstrip button[aria-pressed=true]{background:#22565c;border-color:var(--cyan);color:#c4fff8}.toolstrip .separator{width:1px;height:27px;background:var(--line);margin:0 3px}.toolstrip .primary{background:#8af2df;color:#0b2427;font-weight:800;border-color:transparent}.panel{background:linear-gradient(160deg,#142337,#0d1723);border:1px solid var(--line);border-radius:13px;padding:17px;margin-bottom:12px}.panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin:0 0 16px;color:#f6fbff}.panel h2 small{float:right;color:var(--muted);font:10px var(--mono);text-transform:none;letter-spacing:0}.form-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0}.form-row label{font-size:12px;color:#bdd1dd}.form-row output{font:11px var(--mono);color:var(--cyan);text-align:right;white-space:nowrap}.form-row select,.form-row input[type=text]{width:140px;padding:8px;border:1px solid #375064;border-radius:6px;background:#091522;color:var(--ink);min-width:0}.range{display:grid;grid-template-columns:1fr 46px;gap:10px;align-items:center;margin:8px 0 16px}.range input{width:100%;accent-color:var(--cyan)}.range output{font:11px var(--mono);color:var(--cyan);text-align:right}.range-label{display:flex;justify-content:space-between;font-size:12px;color:#bdd1dd}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.actions button{padding:9px 6px}.actions .wide{grid-column:1/-1}.btn-danger{color:#ffbdbd!important;border-color:#86515c!important}.quiet{font-size:11px;color:var(--muted);margin:10px 0 0}.status{color:var(--cyan);font:11px var(--mono);min-height:16px;padding:5px 0}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}.stat{background:#121d2c;border:1px solid var(--line);border-radius:9px;padding:10px 13px}.stat b{font-size:18px;font-family:var(--mono);display:block}.stat span{color:var(--muted);font:10px var(--mono)}.empty-inspect{font-size:12px;color:var(--muted)}.inspector-head{display:flex;gap:10px;align-items:center;margin-bottom:10px}.inspector-head .glyph{width:37px;height:37px;display:grid;place-items:center;background:#284656;color:var(--cyan);border-radius:9px;font-size:22px}.inspector-head strong{display:block;font-size:13px}.inspector-head small{color:var(--muted);font:10px var(--mono)}.helpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.helpgrid article,.log-entry{padding:19px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.helpgrid h3{font-size:15px}.helpgrid p{color:var(--muted);font-size:13px;margin-bottom:0}.guide-note{font-size:12px;color:#b8cbd5;margin:22px 0 30px}.log-entry{display:grid;grid-template-columns:132px 1fr;gap:16px;margin:0 0 10px}.log-entry time{color:var(--cyan);font:11px var(--mono)}.log-entry h3{margin:0 0 5px;font-size:17px}.log-entry p{color:#b8cad5;margin:0;font-size:13px}.footer{margin-top:35px;border-top:1px solid var(--line);padding:20px 0 35px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:var(--muted);font:11px var(--mono)}.footer a{color:var(--cyan)}
@media(max-width:1080px){.studio{grid-template-columns:minmax(0,1fr) 255px}.panel{padding:13px}.canvas-shell canvas{height:540px}}@media(max-width:820px){.studio{grid-template-columns:1fr}.side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.panel{margin-bottom:0}.canvas-shell canvas{height:52vh;min-height:380px}.helpgrid{grid-template-columns:1fr 1fr}.hero{align-items:start;flex-direction:column}.hero-meta{text-align:left}}@media(max-width:570px){.shell{width:calc(100% - 24px)}.toplinks{gap:10px;font-size:10px}.brand{font-size:17px;gap:8px}.brand-mark{width:31px;height:31px}.hero{padding:26px 0 18px}.hero-meta{display:none}.side{display:block}.panel{margin-bottom:10px}.canvas-shell canvas{height:48vh;min-height:350px}.stats{grid-template-columns:repeat(2,1fr)}.helpgrid{grid-template-columns:1fr}.log-entry{grid-template-columns:1fr;gap:5px}.canvas-bottom span:nth-child(2){display:none}.toolstrip{gap:5px}.toolstrip button{padding:9px}.floating{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Build 002 — field diagnostics */
.check-row{display:flex;align-items:center;gap:10px;margin:9px 0;color:#bdd1dd;font-size:12px;cursor:pointer}
.check-row input{accent-color:var(--cyan);width:16px;height:16px;flex:none}
.probe-state{border:1px solid #35566b;background:#091a29;color:var(--cyan);border-radius:7px;padding:9px 10px;font:11px var(--mono);margin:13px 0}
.readout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:11px 0 14px}
.readout-grid>div{background:#0b1926;border:1px solid #2b4559;border-radius:8px;padding:10px;min-width:0}
.readout-grid span{display:block;color:var(--muted);font:9px/1.4 var(--mono);letter-spacing:.02em}
.readout-grid strong{display:block;font:13px/1.8 var(--mono);color:#d5f9f4;white-space:nowrap}
#diagnostics-panel .actions{margin-top:10px}
@media(max-width:1080px){.readout-grid{grid-template-columns:1fr}}
@media(max-width:820px){.readout-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:370px){.readout-grid{grid-template-columns:1fr}}

/* Build 003 — named scene vault */
.vault-list{display:grid;gap:8px;margin-top:14px}.vault-empty{margin:0;padding:16px;border:1px dashed #35516a;border-radius:8px;color:var(--muted);font-size:12px}.vault-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;background:#0b1926;border:1px solid #2b4559;border-radius:9px}.vault-item-head{min-width:0;overflow-wrap:anywhere}.vault-item-head strong{display:block;font-size:12px;color:#e2f8f4}.vault-item-head small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.vault-actions{display:flex;gap:5px;flex-wrap:wrap}.vault-actions button{font-size:10px;padding:8px 10px}.vault-delete{color:#ffb1a3}@media(max-width:1080px){.vault-item{align-items:flex-start;flex-direction:column}.vault-actions{width:100%}}@media(min-width:1081px) and (max-width:1250px){.vault-actions button{padding:7px 6px}}

/* Build 005 — canvas motion recorder */
.capture-meter{display:flex;align-items:center;gap:12px;margin:13px 0 9px;color:var(--cyan);font:11px ui-monospace,monospace}
.capture-meter span{flex:none}.capture-meter progress{width:100%;min-width:0;height:9px;accent-color:#ff9e86}
#capture-start[aria-pressed="true"]{color:#ffb6a6;border-color:#c96d6d}
#capture-preview{display:block;width:100%;margin-top:12px;border-radius:8px;border:1px solid #35516a;background:#080d17}
#capture-preview[hidden]{display:none}

/* Build 006: multitrack motion sequencer */
.sequencer-panel{border:1px solid #31596a;background:linear-gradient(152deg,#182b3d,#0b1827 82%);border-radius:15px;padding:20px;margin:16px 0 0;box-shadow:0 18px 45px #0002}
.seq-head{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:15px}.seq-head h2{font-size:clamp(20px,3vw,30px);margin:4px 0 5px;letter-spacing:-.055em}.seq-head p{font-size:12px;color:#adc2cf;max-width:580px;margin:0}.seq-head>span{font:10px var(--mono);color:var(--cyan);white-space:nowrap}
.seq-toolbar{display:flex;flex-wrap:wrap;gap:7px}.seq-toolbar button,.seq-demo button{background:#152d40;border:1px solid #3c6275;border-radius:7px;color:#dbf4f5;padding:9px 12px;font:11px var(--mono)}.seq-toolbar button:hover,.seq-demo button:hover{border-color:var(--cyan);background:#20445a}.seq-toolbar .seq-primary{background:var(--cyan);border-color:var(--cyan);color:#08232a;font-weight:750}.seq-toolbar .seq-primary:hover{color:#fff}
.seq-transport{margin:20px 0 14px}.seq-transport>label{display:flex;justify-content:space-between;gap:15px;color:#c3d4df;font:11px var(--mono)}.seq-transport>label strong{color:var(--cyan);font-weight:550}
#seq-scrub{display:block;width:100%;accent-color:var(--cyan);height:26px;margin:7px 0 0;touch-action:pan-y}
.seq-markers{height:22px;position:relative;margin:0 9px;border-top:1px solid #375467;background:linear-gradient(90deg,transparent calc(25% - .5px),#315064 calc(25% - .5px),#315064 25%,transparent 25%,transparent calc(50% - .5px),#315064 calc(50% - .5px),#315064 50%,transparent 50%,transparent calc(75% - .5px),#315064 calc(75% - .5px),#315064 75%,transparent 75%)}.seq-marker{position:absolute;z-index:2;top:2px;transform:translateX(-50%) rotate(45deg);width:11px;height:11px;background:#ffc884;border:1px solid #ffe5b1;border-radius:2px;padding:0;cursor:pointer}.seq-marker.active{background:#fff;box-shadow:0 0 0 4px #ffc67d4b}.seq-playhead{position:absolute;top:-5px;bottom:0;width:2px;background:var(--cyan);z-index:1;pointer-events:none}
.seq-tracks-wrap{margin:0 0 15px;border:1px solid #305062;border-radius:9px;overflow:hidden;background:#0a1725}.seq-axes{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #305062;padding:8px 13px;font:10px var(--mono);color:var(--muted)}.seq-axes span:first-child{margin-right:auto}.seq-tracks{max-height:225px;overflow:auto;scrollbar-width:thin}.seq-empty{padding:16px;margin:0;color:var(--muted);font-size:12px}.seq-track{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:34px;align-items:stretch;border-bottom:1px solid #243b4e}.seq-track:last-child{border-bottom:0}.seq-track-label{padding:8px 12px;background:#102131;font:11px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seq-lane{position:relative;margin:0 15px;background:linear-gradient(90deg,#40647b40,#284c5640);border-radius:4px;align-self:center;height:14px}.seq-key{position:absolute;left:0;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:10px;height:10px;padding:0;border:1px solid #ffe5b1;background:#ffcf8c;border-radius:1px}.seq-key:hover,.seq-marker:hover{background:#fff}.seq-key.active{background:#fff;box-shadow:0 0 0 4px #ffc67d4b}
.seq-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:12px}.seq-options label{font:10px var(--mono);color:var(--muted)}.seq-options select,.seq-demo select{display:block;width:100%;padding:8px;border:1px solid #3c566b;border-radius:7px;background:#0a1827;color:#e4f7f9;font:12px var(--mono);margin-top:5px}
.seq-demo{border-top:1px solid #2b4559;padding-top:12px;display:flex;flex-wrap:wrap;align-items:end;gap:10px}.seq-demo label{color:var(--muted);font:11px var(--mono)}.seq-demo select{width:170px}.seq-demo button{margin-bottom:0}
#seq-status{margin-top:13px}
@media(max-width:820px){.seq-options{grid-template-columns:repeat(2,minmax(0,1fr))}.seq-track{grid-template-columns:115px minmax(0,1fr)}.seq-track-label{font-size:10px;padding:8px}.sequencer-panel{padding:14px}}
@media(max-width:520px){.seq-head{display:block}.seq-head>span{display:block;margin-top:10px}.seq-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.seq-toolbar button{padding:9px 7px;font-size:10px}.seq-toolbar button:first-child{grid-column:1/-1}.seq-track{grid-template-columns:90px minmax(0,1fr)}.seq-lane{margin:0 9px}.seq-axes{padding:7px;font-size:9px}.seq-options{gap:7px}}

/* Fluid EVOLVE launch keeps all neighboring destinations reachable on narrow screens. */
@media(max-width:570px){.top-inner{flex-wrap:wrap;padding:8px 0}.toplinks{width:100%;justify-content:space-between;flex-wrap:wrap}}