*{box-sizing:border-box}
body{margin:0;background:#f3f3ed;color:#28493a;font:15px/1.65 system-ui,-apple-system,sans-serif}
main{max-width:1160px;margin:auto;padding:24px 28px 34px}
a{color:#446d53;text-underline-offset:4px}
nav{display:flex;gap:24px;font-size:13px;margin-bottom:22px;flex-wrap:wrap}
header{display:flex;justify-content:space-between;align-items:center;gap:20px}
h1{font-size:31px;line-height:1.35;margin:0;letter-spacing:-.02em}
.eyebrow{font-size:11px;letter-spacing:.16em;color:#85917a;margin:0 0 7px}
.badge{background:#e5ecdf;border:1px solid #d5dfce;padding:6px 13px;border-radius:99px;font-size:12px;white-space:nowrap}
.intro{color:#7a8774;margin:10px 0 23px}
.layout{display:grid;grid-template-columns:minmax(0,620px) minmax(310px,1fr);gap:32px;align-items:start}
.stage{position:relative;width:100%;max-width:min(620px,calc(100svh - 320px));aspect-ratio:1;overflow:hidden;isolation:isolate;border-radius:16px;box-shadow:0 8px 28px #263b2610;background-color:#edf0e7;background-image:conic-gradient(#cbd2c7 25%,transparent 0 50%,#cbd2c7 0 75%,transparent 0);background-size:32px 32px}
.stage.small{max-width:240px}
#scene{display:block;width:100%;height:100%;background:transparent}
.wall{position:absolute;inset:0 0 0 58.3%;background:linear-gradient(100deg,#d6ded5,#c6d2c8 60%,#b9c7bf);border-left:4px solid #6f857c;box-shadow:-1px 0 3px #24382c33}
.wall:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#e9eee7}
.no-wall .wall{display:none}
body[data-bg=forest] .stage,body[data-bg=forest] #detail{background:#172e25}
body[data-bg=sky] .stage,body[data-bg=sky] #detail{background:linear-gradient(160deg,#2c4a72,#6d7fa8 70%,#c2a6b8)}
body[data-bg=white] .stage,body[data-bg=white] #detail{background:#fff}
body[data-bg=black] .stage,body[data-bg=black] #detail{background:#050605}
.toolbar,.frame-tools,.moments,.backgrounds{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toolbar{margin:16px 0 10px}
.backgrounds{margin:10px 0}
.frame-tools{margin:12px 0 0}
.moments{margin:10px 0 0}
button{font:inherit;font-size:13px;border:1px solid #cdd8c6;border-radius:8px;padding:8px 12px;background:#fbfcf6;color:#42664d;cursor:pointer}
button:hover{background:#e9efdf}
button:disabled,input:disabled{opacity:.4;cursor:wait}
.backgrounds [aria-pressed=true],button[aria-pressed=true]{background:#e1ead8;border-color:#90a382}
.moments button{font-size:12px;padding:6px 10px}
select{border:1px solid #cdd8c6;padding:6px 8px;border-radius:7px;background:#fffefa;color:#42664d}
.timeline{display:flex;align-items:center;gap:15px;margin-top:12px}
.timeline input{flex:1;min-width:0}
input{accent-color:#456f55}
output{font-size:12px;color:#7d8875;font-variant-numeric:tabular-nums;min-width:150px}
.frame-tools label{margin-left:auto;font-size:12px;color:#71806a;display:flex;gap:6px;align-items:center}
.quiet{font-size:12px;color:#8a947f;margin:10px 0 0}
.zoom-card{border-radius:16px;border:1px solid #dce3d5;background:#fffefa;overflow:hidden;margin-bottom:18px}
.zoom-heading{display:flex;justify-content:space-between;padding:10px 16px;font-size:12px;color:#7d8875}
#detail{display:block;width:100%;height:auto;max-height:300px;object-fit:contain;background:#edf0e7;background-image:conic-gradient(#cbd2c7 25%,transparent 0 50%,#cbd2c7 0 75%,transparent 0);background-size:32px 32px}
.zoom-targets{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 14px}
.zoom-targets button{font-size:12px;padding:5px 9px}
.note{padding:22px;border:1px solid #dce3d5;border-radius:16px;background:#fffefa}
.note h2{font-size:19px;margin:0 0 10px}
.note p{color:#7b8873;margin:8px 0}
.links{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0 0;font-size:13px}
details{font-size:12px;color:#8a937d;margin:16px 4px 0}
summary{cursor:pointer}
details p{margin:9px 0}
details code{font-size:11px;color:#6f7d6b}
@media(max-width:900px){main{padding:20px}.layout{grid-template-columns:1fr}.stage{max-width:620px}aside{max-width:620px}h1{font-size:26px}}