.workroom { margin-top:72px; margin-bottom:76px; }
.workroom-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:26px; }
.workroom h2 { margin:0; font:600 42px/1.1 var(--display); letter-spacing:-.025em; }
.workroom-heading p { margin:0; max-width:43ch; color:var(--muted); font:400 15px/1.6 var(--sans); }
.room-stage { position:relative; height:530px; overflow:hidden; isolation:isolate; border-block:1px solid var(--keyline); background:var(--chassis); }
.room-stage::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(var(--keyline-soft) .8px,transparent .8px); background-size:24px 24px; opacity:.55; }
.room-viewport { position:absolute; inset:32px 0 58px; touch-action:pan-y pinch-zoom; cursor:grab; outline-offset:-4px; }
.room-viewport:active { cursor:grabbing; }
.room-viewport:focus-visible { outline:2px solid var(--amber); }
.room-viewport canvas,.room-poster { position:absolute; inset:0; display:block; width:100%; height:100%; }
.room-poster { object-fit:contain; pointer-events:none; }
.room-stage[data-state="ready"] .room-poster { visibility:hidden; }
.room-stage:not([data-state="ready"]) canvas { visibility:hidden; }
.room-mark { position:absolute; top:20px; left:24px; display:flex; align-items:center; gap:10px; font:400 10px/1.3 var(--mono); color:var(--muted); pointer-events:none; }
.room-mark::before { content:""; width:7px; height:7px; border:1px solid var(--amber); transform:rotate(45deg); }
.room-open { position:absolute; top:10px; right:16px; min-height:44px; display:flex; align-items:center; gap:12px; font:400 12px/1.4 var(--sans); text-decoration:none; color:var(--paper); }
.room-open:hover { color:var(--amber); }
.room-open svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4; }
.room-toolbar { position:absolute; bottom:16px; left:20px; right:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.room-views,.room-zoom { display:flex; gap:4px; }
.workroom button { min-height:44px; padding:0 16px; border:1px solid transparent; border-radius:2px; background:var(--canvas); color:var(--muted); cursor:pointer; font:400 12px/1.2 var(--sans); }
.workroom button:hover { border-color:var(--keyline); color:var(--paper); }
.workroom button[aria-pressed="true"] { background:var(--paper); color:var(--canvas); }
.workroom button:focus-visible,.room-open:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
.room-zoom button { min-width:44px; padding:0; border-color:var(--keyline-soft); font:400 21px/1 var(--sans); }
.room-toolbar[hidden],.room-notice[hidden],.room-activate[hidden] { display:none; }
.room-activate { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); white-space:nowrap; }
.room-notice { position:absolute; bottom:80px; left:24px; right:24px; margin:0; text-align:center; color:var(--muted); font:400 12px/1.5 var(--sans); }
.room-foot { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px 24px; margin-top:13px; color:var(--muted); font:400 11px/1.5 var(--mono); }
.room-foot p { margin:0; }
@media(max-width:760px) {
 .workroom { margin-top:48px; margin-bottom:52px; }
 .workroom-heading { display:block; margin-bottom:22px; }
 .workroom h2 { font-size:34px; }
 .workroom-heading p { margin-top:14px; max-width:42ch; font-size:14px; }
 .room-stage { height:410px; }
 .room-viewport { inset:43px 0 102px; }
 .room-mark { top:22px; left:14px; font-size:9px; }
 .room-open { right:12px; font-size:11px; gap:5px; }
 .room-toolbar { left:12px; right:12px; bottom:12px; align-items:flex-end; flex-wrap:wrap; gap:8px; }
 .room-views { width:100%; gap:3px; }
 .room-views button { padding:0 8px; flex:1; font-size:11px; }
 .room-zoom { margin-left:auto; }
 .room-zoom button { min-height:44px; min-width:44px; }
 .room-notice { bottom:110px; }
 .room-foot { font-size:10px; }
}