:root{--wine:#531517;--deep:#240707;--gold:#e6a00c;--text:#f9f7f2;--muted:#d2c1bf;--line:#713a3b}*{box-sizing:border-box}body{margin:0;background:var(--deep);color:var(--text);font:16px/1.5 Figtree,sans-serif}header{height:80px;display:flex;align-items:center;gap:24px;padding:16px 24px;border-bottom:1px solid var(--line)}header img{width:128px}header>span{font-size:12px;letter-spacing:.12em;color:var(--muted)}button,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:transparent;color:inherit;border-radius:8px;padding:8px 16px;min-height:48px;transition:background .18s,transform .18s}button:hover{background:#713a3b}button:active{transform:scale(.97)}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button:disabled{opacity:.4;cursor:not-allowed}header button{margin-left:auto;font-size:14px}main{display:flex;flex-direction:column}aside{padding:24px}.eyebrow{color:var(--gold);font-size:12px;letter-spacing:.08em;margin:0 0 16px}h1{font:32px/1.1 'Archivo Black',sans-serif;letter-spacing:-.03em;margin:0 0 16px}.intro{color:var(--muted);margin:0 0 24px;max-width:32ch}.models{display:grid;gap:8px}.models button{text-align:left;padding:16px}.models b,.models span{display:block}.models span{font-size:12px;color:var(--muted);margin-top:8px}button[aria-pressed=true]{background:var(--gold);color:var(--deep);border-color:var(--gold)}button[aria-pressed=true] span{color:var(--deep)}h2{font-size:14px;font-weight:600;margin:24px 0 8px}.views{display:flex;gap:8px}.views button{padding:8px;font-size:14px;flex:1}.toggle{display:flex;gap:8px;margin:24px 0;align-items:center;font-size:14px}.toggle input{accent-color:var(--gold);width:16px;height:16px}.note{font-size:12px;color:var(--muted);max-width:40ch;margin:0}#stops{margin-top:16px}#stops label{font-size:12px;display:block;margin-bottom:8px}select{width:100%;padding:8px;background:var(--deep);color:var(--text);border:1px solid var(--line);border-radius:8px;min-height:48px}.steps{display:flex;gap:8px;margin-top:8px}.steps button{font-size:12px;flex:1}.stage{position:relative;min-height:520px;background:#e8e4de;overflow:hidden;color:var(--deep)}#viewport{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}.badge{position:absolute;left:24px;top:24px;font-size:12px;font-weight:700;letter-spacing:.04em;background:#fffffff0;border-radius:8px;padding:8px 16px;display:flex;gap:8px;align-items:center;pointer-events:none}.dot{width:8px;height:8px;border-radius:9999px;background:var(--gold)}.zoom{position:absolute;right:24px;bottom:80px;display:grid;gap:8px}.zoom button{background:#fff;width:48px;padding:8px;font-size:24px;border-color:#c2b5ad}.zoom button:hover{background:var(--gold)}.hint{position:absolute;left:24px;bottom:24px;right:24px;text-align:center;font-size:12px;background:#ffffffeb;padding:8px 16px;border-radius:8px;pointer-events:none}#status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:16px 24px;border-radius:8px;max-width:80%;text-align:center}#status:empty{display:none}@media(min-width:1024px){main{height:calc(100dvh - 80px);flex-direction:row}aside{width:352px;flex-shrink:0;padding:32px;overflow:auto}.stage{flex:1;min-height:0}}@media(max-width:767px){header>span{display:none}header button{font-size:12px;padding:8px}main{flex-direction:column-reverse}.stage{min-height:56dvh}aside h1,aside .intro{display:none}.note{max-width:65ch}.models{grid-template-columns:1fr 1fr}.badge{left:16px;top:16px}.hint{left:16px;right:16px;bottom:16px}.zoom{right:16px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}