:root{color:#e9efeb;font-synthesis:none;background:#0d1110;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}#root{place-items:center;min-height:100vh;padding:32px;display:grid}main{background:linear-gradient(145deg,#ffffff12,#0000 50%),#121816;border:1px solid #e9efeb24;border-radius:28px;width:min(920px,100%);padding:clamp(28px,5vw,56px);box-shadow:0 32px 90px #00000057}.eyebrow{color:#83d6aa;letter-spacing:.14em;text-transform:uppercase;margin:0 0 20px;font-size:.75rem;font-weight:700}h1{letter-spacing:-.065em;margin:0;font-size:clamp(3.5rem,11vw,7rem);font-weight:600;line-height:.88}.lede{color:#aab7b0;max-width:34rem;margin:24px 0 32px;font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.55}.scene-controls{justify-content:space-between;align-items:end;gap:24px;margin-bottom:18px;display:flex}.motion-lab{gap:7px;display:grid}.control-label,.motion-description{color:#75837c;letter-spacing:.08em;text-transform:uppercase;font-size:.66rem}.motion-description{color:#91a198;letter-spacing:.03em;text-transform:none;min-height:1em}.camera-mode,.motion-profile{background:#0e1311;border:1px solid #e9efeb29;border-radius:9px;display:grid}.camera-mode{grid-template-columns:repeat(2,minmax(0,1fr));width:min(240px,100%)}.motion-profile{grid-template-columns:repeat(2,minmax(0,1fr))}.camera-mode button,.motion-profile button{color:#89958f;min-height:38px;font:inherit;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;border-radius:8px;padding:0 14px;font-size:.74rem;font-weight:700}.camera-mode button[aria-pressed=true],.motion-profile button[aria-pressed=true]{color:#b7eccf;background:#17251f;box-shadow:inset 0 0 0 1px #83d6aa6b}.camera-mode button:focus-visible,.motion-profile button:focus-visible{outline-offset:3px;outline:2px solid #e9efeb}.scene{background:#111816;border:1px solid #e9efeb1a;border-radius:18px;width:100%;height:clamp(280px,42vw,440px);overflow:hidden}.scene-stage{margin-bottom:24px;position:relative}.app--graph{background:#0d1311;border-radius:20px;grid-template-rows:auto minmax(0,1fr) auto;width:min(1600px,100%);min-height:calc(100vh - 32px);padding:16px;display:grid}.app--graph .scene-stage{grid-template-rows:auto minmax(0,1fr) auto;height:clamp(520px,100vh - 190px,780px);min-height:0;margin:0;display:grid}.app--graph .scene{border-radius:14px;height:100%}.app--graph .scene canvas{cursor:grab;touch-action:none}.app--graph .scene canvas:active{cursor:grabbing}.editor-controls{justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:8px 4px 0;display:flex}.editor-selection{color:#93a19a;align-items:baseline;gap:10px;min-width:0;margin:0;font-size:.72rem;display:flex}.editor-selection strong{color:#d9e5df;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;overflow:hidden}.editor-selection .placement-state{color:#d5a88d}.editor-actions{align-items:center;gap:6px;display:flex}.editor-actions>button,.snap-options button{color:#95a39c;min-height:30px;font:inherit;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;background:#0b100e;border:1px solid #e9efeb1f;border-radius:7px;padding:0 11px;font-size:.66rem;font-weight:700}.editor-actions>button:disabled{opacity:.35;cursor:default}.snap-options{margin-right:6px;display:flex}.snap-options button{border-radius:0}.snap-options button:first-child{border-radius:7px 0 0 7px}.snap-options button:last-child{border-radius:0 7px 7px 0}.snap-options button[aria-pressed=true]{color:#b7eccf;background:#17251f;border-color:#83d6aa5c}.editor-actions button:focus-visible,.snap-options button:focus-visible{outline-offset:2px;outline:2px solid #e9efeb}.view-switch{align-items:center;gap:12px;min-height:42px;padding:0 4px 8px;display:flex}.lifecycle-controls{color:#75837c;justify-content:flex-end;align-items:center;gap:12px;min-height:38px;padding:0 4px 8px;font-size:.7rem;display:flex}.lifecycle-controls button{color:#b7eccf;min-height:30px;font:inherit;cursor:pointer;background:#17251f;border:1px solid #e9efeb29;border-radius:7px;padding:0 12px}.view-options{background:#0b100e;border:1px solid #e9efeb1f;border-radius:8px;grid-template-columns:repeat(2,minmax(0,1fr));width:min(300px,100%);display:grid}.view-options button{color:#95a39c;min-width:0;min-height:32px;font:inherit;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:7px;padding:0 11px}.view-options button>span{letter-spacing:.04em;text-transform:uppercase;font-size:.68rem;font-weight:700}.view-options button[aria-pressed=true]{color:#b7eccf;background:#17251f;border-color:#83d6aa5c}.view-options button:focus-visible{outline-offset:3px;outline:2px solid #e9efeb}.app--graph .app-header{justify-content:space-between;align-items:center;gap:32px;padding:8px 4px 16px;display:flex}.app--graph .app-title{grid-template-columns:auto auto;align-items:baseline;gap:4px 16px;display:grid}.app--graph .eyebrow{grid-column:1;margin:0;font-size:.66rem}.app--graph h1{letter-spacing:-.035em;grid-column:2;margin:0;font-size:clamp(1.35rem,2.4vw,2rem);font-weight:600;line-height:1}.app--graph .lede{grid-column:2;max-width:none;margin:4px 0 0;font-size:.78rem;line-height:1.3}.app--graph .scene-controls{align-items:center;gap:clamp(24px,3vw,48px);margin:0}.app--graph .motion-lab{grid-template-columns:minmax(218px,auto) minmax(128px,auto);align-items:center;column-gap:12px}.app--graph .control-label{grid-column:1/-1}.app--graph .motion-description{max-width:13rem}.app--graph .motion-profile button{min-width:108px}.app--graph .scene-meta{padding-top:12px}.app--graph dl{border:1px solid #e9efeb14;border-radius:9px;grid-template-columns:repeat(10,minmax(0,1fr));gap:0;overflow:hidden}.app--graph dl div{background:0 0;border:0;border-right:1px solid #e9efeb12;border-radius:0;padding:8px 11px}.app--graph dl div:last-child{border-right:0}.app--graph dt{margin-bottom:3px;font-size:.58rem}.app--graph dd{text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;overflow:hidden}dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;display:grid}dl div{background:#0000001f;border:1px solid #e9efeb1a;border-radius:14px;padding:16px}dt{color:#75837c;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;font-size:.72rem}dd{margin:0;font-size:.9rem}ul[aria-label=Renderer\ diagnostics]{color:#f0a693;background:#53181140;border:1px solid #ec775f59;border-radius:14px;margin:20px 0 0;padding:16px 16px 16px 36px}ul[aria-label=Renderer\ diagnostics] li{gap:6px;display:grid}ul[aria-label=Renderer\ diagnostics] code{font-size:.78rem;font-weight:700}@media (width<=560px){.scene-controls{flex-direction:column;align-items:stretch}.camera-mode{width:100%}dl{grid-template-columns:1fr}.app--graph{border-radius:0;min-height:100vh}.app--graph .app-header,.app--graph .scene-controls{flex-direction:column;align-items:stretch}.app--graph .app-title{grid-template-columns:1fr}.app--graph .app-title>*{grid-column:1}.app--graph .scene-stage{height:max(520px,100vh - 260px)}.view-switch{flex-direction:column;align-items:stretch;gap:6px}.view-options{width:100%}.editor-controls{flex-direction:column;align-items:stretch}.editor-actions{justify-content:space-between}.app--graph dl{grid-template-columns:repeat(2,minmax(0,1fr))}}