:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#f3f2ef;background:#11120f;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}#scene{display:block;width:100vw;height:100vh;touch-action:none}header{position:fixed;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:25px 30px;background:linear-gradient(#101410b0,transparent);pointer-events:none}header>*{pointer-events:auto}.eyebrow{font-size:10px;letter-spacing:.22em;color:#d3dfcb;font-weight:600}h1{font-size:24px;letter-spacing:-.04em;margin:5px 0;font-weight:550}h1 span{font-size:15px;font-weight:400;color:#dee5d3b5;letter-spacing:0}button,select{font:inherit;color:inherit;background:#172017c9;border:1px solid #c4d3b738;border-radius:9px;padding:10px 15px;cursor:pointer;backdrop-filter:blur(18px)}button:hover{background:#35432fe0}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #e2f2b8;outline-offset:3px}button:disabled,select:disabled{opacity:.45;cursor:wait}.primary{background:#e3efc6;color:#203118;border-color:#e3efc6;font-weight:600;min-width:168px}.primary:hover{background:#effbd2}footer{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:min(920px,calc(100% - 40px));padding:14px 18px;background:#111910e8;border:1px solid #c4d3b72c;border-radius:18px;backdrop-filter:blur(20px);box-shadow:0 15px 70px #0004}.tour-row,.status-row{display:flex;align-items:center;gap:12px}.status-row{font-size:11px;color:#c4cfbd;padding-top:12px;justify-content:space-between;flex-wrap:wrap}.status-row select{font-size:11px;padding:5px 7px;background:#24311f}.status-row label{display:flex;align-items:center;gap:8px}.status-dot{display:inline-block;background:#c8e293;width:5px;height:5px;border-radius:50%;margin-right:7px}#timeline{flex:1;min-width:30px;accent-color:#d6eab0;cursor:pointer}#tour-time{font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}#settings{position:fixed;right:25px;top:98px;width:350px;max-height:calc(100vh - 265px);overflow:auto;background:#101a11f5;border:1px solid #c4d3b72d;border-radius:16px;padding:22px;backdrop-filter:blur(22px)}#settings h2{font-size:24px;letter-spacing:-.04em;margin:8px 0 12px}#settings p,#settings details{font-size:12px;line-height:1.65;color:#bcc9b5}#settings label{display:flex;justify-content:space-between;font-size:12px;margin-top:18px}#settings input[type=range]{width:100%;accent-color:#d6eab0}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.button-grid button{font-size:12px;padding:10px}#pose-readout{font:10px/1.5 ui-monospace,monospace;overflow-wrap:anywhere;display:block;color:#9aaa91}details{margin-top:16px}summary{cursor:pointer}a{color:#def0b9}#toast{position:fixed;bottom:150px;left:50%;transform:translateX(-50%);font-size:12px;border-radius:8px;background:#152210ed;padding:10px 15px;opacity:0;transition:opacity .25s;pointer-events:none;max-width:90vw}#toast.visible{opacity:1}#loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#263020,#111610 70%);transition:opacity .6s}#loading.done{opacity:0;pointer-events:none}#loading h2{font-size:48px;font-weight:450;letter-spacing:-.05em;margin:24px 0 6px}#loading p{font-size:12px;color:#b4c1a9;max-width:80vw;text-align:center}.loader-mark{font-size:44px;border:1px solid #9fae862f;width:76px;height:76px;display:grid;place-items:center;border-radius:22px;color:#deedc2}progress{width:230px;height:3px;accent-color:#d0e9a6;margin-top:22px}#fps,#count{font-variant-numeric:tabular-nums}@media(max-width:600px){header{padding:18px}h1{font-size:20px}h1 span{display:none}header button{font-size:11px}footer{bottom:10px;width:calc(100% - 20px);padding:12px}.primary{min-width:0;font-size:12px}.tour-row{gap:7px}#tour-time{display:none}#settings{left:10px;right:10px;top:90px;width:auto;max-height:calc(100vh - 245px)}.status-row{gap:8px;font-size:10px}}

.scene-select { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13px; }
.scene-select select { max-width:155px; }
@media(max-width:640px) { header { flex-wrap:wrap; gap:10px; } header h1 { font-size:20px; } .scene-select { margin-left:0; } }

#lab { position:fixed; left:25px; top:98px; width:300px; max-height:calc(100vh - 250px); overflow:auto; background:#101a11ed; border:1px solid #c4d3b72d; border-radius:16px; backdrop-filter:blur(22px); }
.lab-head { width:100%; display:flex; justify-content:space-between; align-items:center; background:none; border:0; border-radius:16px; padding:16px 18px 6px; }
.lab-head:hover { background:none; }
.chev { font-size:12px; color:#c4cfbd; transition:transform .2s; }
#lab.collapsed .chev { transform:rotate(-90deg); }
#lab.collapsed #lab-body { display:none; }
#lab.collapsed .lab-head { padding-bottom:16px; }
#lab-body { padding:0 18px 16px; }
.lab-section { padding-top:12px; }
.lab-section + .lab-section { border-top:1px solid #c4d3b71f; margin-top:14px; }
.lab-title { display:flex; justify-content:space-between; align-items:center; }
.lab-title h3 { font-size:15px; font-weight:550; letter-spacing:-.02em; margin:0; }
.lab-copy { font-size:11.5px; line-height:1.55; color:#bcc9b5; margin:8px 0; }
.lab-stat { font-size:11px; color:#c4cfbd; margin:6px 0 0; min-height:1.4em; font-variant-numeric:tabular-nums; }
kbd { font:10px ui-monospace,monospace; border:1px solid #c4d3b74a; border-radius:4px; padding:1px 4px; }
#lab label { display:flex; justify-content:space-between; font-size:12px; margin-top:12px; }
#lab input[type=range] { width:100%; accent-color:#d6eab0; }
.switch { position:relative; width:44px; height:24px; padding:0; border-radius:12px; background:#2a3527; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#dfe8d6; transition:transform .2s; }
.switch[aria-checked=true] { background:#8fc7a6; border-color:#8fc7a6; }
.switch[aria-checked=true]::after { transform:translateX(20px); background:#10200f; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.legend { display:flex; align-items:center; gap:8px; font-size:10.5px; color:#c4cfbd; }
.ramp { flex:1; height:8px; border-radius:4px; background:linear-gradient(90deg,#e0445c,#f08a4b 30%,#f2d15c 55%,#58c6a2 80%,#3aa6d9); }
.ticks { display:flex; justify-content:space-between; font-size:9.5px; color:#9aaa91; padding:0 2px; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:12px 0 4px; }
.metrics div { background:#1a241a; border-radius:9px; padding:8px; }
.metrics dt { font-size:9.5px; color:#9aaa91; letter-spacing:.04em; }
.metrics dd { margin:3px 0 0; font-size:13px; font-weight:550; font-variant-numeric:tabular-nums; }
@media(max-width:900px) { #lab { top:auto; bottom:128px; left:10px; width:min(300px,calc(100% - 20px)); max-height:calc(100vh - 250px); } }
@media(max-width:600px) { #lab { bottom:146px; max-height:calc(100vh - 290px); } }

#create { max-width:440px; text-align:center; margin-top:18px; }
#create p { font-size:13px; line-height:1.6; color:#c4cfbd; }
.create-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:16px 0 4px; }
.file-button { display:inline-flex; align-items:center; border-radius:9px; padding:10px 15px; cursor:pointer; }
.file-button input { position:absolute; width:1px; height:1px; opacity:0; }
.file-button:focus-within { outline:2px solid #e2f2b8; outline-offset:3px; }
#create .create-hint { font-size:11px; color:#9aaa91; }
@media(max-width:600px) { #toast { bottom:auto; top:118px; width:calc(100% - 32px); text-align:center; } }