.scene{gap:clamp(20px,3vw,36px);margin-top:clamp(28px,4vw,48px);display:grid}@media (min-width:961px){.scene{grid-template-columns:minmax(0,1fr) 330px;align-items:start}}.scene ::selection{background:var(--color-lime);color:var(--color-graphite)}.scene-visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.scene-note{font-family:var(--font-mono);letter-spacing:.04em;color:var(--color-graphite-3);max-width:52ch;margin:10px 0 0;font-size:12px;line-height:1.5}.scene-note--tight{margin-top:8px}.scene-btn{border-radius:var(--radius-pill);border:1px solid var(--color-graphite);background:var(--color-graphite);color:var(--color-white);font-family:var(--font-body);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:13px 22px;font-size:15px;font-weight:600;line-height:1;transition:transform .15s,background .15s,color .15s,border-color .15s;display:inline-flex}.scene-btn:hover:not(:disabled){transform:translateY(-1px)}.scene-btn:disabled{opacity:.4;cursor:not-allowed}.scene-btn--green{background:var(--color-lime);border-color:var(--color-lime);color:var(--color-graphite)}.scene-btn--green:hover:not(:disabled){background:var(--color-lime-deep);border-color:var(--color-lime-deep)}.scene-btn--ghost{color:var(--color-graphite);border-color:var(--color-line);background:0 0}.scene-btn--ghost:hover:not(:disabled){border-color:var(--color-graphite)}.scene__frame{border:1px solid var(--color-line);border-radius:var(--radius-card);background:var(--color-paper);aspect-ratio:16/10;flex-direction:column;min-height:280px;display:flex;position:relative;overflow:hidden}@media (max-width:640px){.scene__frame{aspect-ratio:4/3}}.scene__drawing{background:var(--color-white);flex:1;place-items:center;min-height:0;padding:54px clamp(10px,2vw,22px) 30px;transition:opacity .5s;display:grid}.scene__drawing>div{place-items:center;width:100%;height:100%;min-height:0;display:grid}.scene__drawing[data-hidden=true]{opacity:0;pointer-events:none}.scene__canvas{z-index:1;opacity:0;pointer-events:none;touch-action:pan-y;width:100%;height:100%;transition:opacity .6s;display:block;position:absolute;inset:0}.scene__canvas[data-live=true]{opacity:1;pointer-events:auto;cursor:grab}.scene__canvas[data-live=true]:active{cursor:grabbing}.scene__gate{background:var(--color-white);border-top:1px solid var(--color-line);text-align:center;justify-items:center;gap:2px;padding:14px 16px 16px;display:grid}.scene__gate .scene-note{margin-top:6px}.scene__status{z-index:2;text-align:center;font-family:var(--font-mono);letter-spacing:.06em;color:var(--color-graphite-2);background:var(--color-white);border:1px solid var(--color-line);border-radius:var(--radius-pill);width:auto;max-width:calc(100% - 32px);margin:0;padding:9px 16px;font-size:12px;position:absolute;top:clamp(12px,2.5vw,20px);left:50%;transform:translate(-50%)}.scene__status--fail{border-color:var(--color-graphite)}.scene__concept{z-index:2;font-family:var(--font-mono);letter-spacing:.06em;color:var(--color-graphite-3-dark);background:var(--color-graphite);text-align:center;margin:0;padding:7px clamp(10px,2vw,18px);font-size:11px;line-height:1.4;position:absolute;bottom:0;left:0;right:0}.scene-elevation{width:100%;height:100%;max-height:100%}.scene-elevation .wall{fill:var(--color-white);stroke:var(--color-graphite);stroke-width:1.4px}.scene-elevation .roof{fill:var(--color-paper);stroke:var(--color-graphite);stroke-width:1.4px}.scene-elevation .foundation{fill:var(--color-mist);stroke:var(--color-graphite);stroke-width:1.4px}.scene-elevation .courses line{stroke:var(--color-line);stroke-width:.7px}.scene-elevation .trim{fill:var(--color-white);stroke:var(--color-graphite);stroke-width:1.1px}.scene-elevation .glass{fill:#dde5e8;stroke:var(--color-graphite);stroke-width:1.1px}.scene-elevation .sash{stroke:var(--color-graphite);stroke-width:1px}.scene-elevation .door{fill:var(--color-lime);stroke:var(--color-graphite);stroke-width:1.2px}.scene-elevation .door-panel{fill:none;stroke:var(--color-graphite);stroke-width:.9px;opacity:.55}.scene-elevation .hardware{fill:var(--color-graphite)}.scene-elevation .hardware-bar{stroke:var(--color-graphite);stroke-width:2px;stroke-linecap:round}.scene-elevation .rake{fill:none;stroke:var(--color-graphite);stroke-width:2.4px;stroke-linejoin:round}.scene-elevation .heavy{stroke:var(--color-graphite);stroke-width:2.2px}.scene-elevation .grade{stroke:var(--color-graphite);stroke-width:2.4px}.scene-elevation .hatch line{stroke:var(--color-graphite-3);stroke-width:1px}.scene-elevation .dim line{stroke:var(--color-graphite-3);stroke-width:.9px}.scene-elevation .dim text,.scene-elevation .level text,.scene-elevation .tb,.scene-elevation .tb-strong,.scene-elevation .tb-warn{font-family:var(--font-mono);fill:var(--color-graphite-3);letter-spacing:.08em;font-size:11px}.scene-elevation .level line{stroke:var(--color-graphite-3);stroke-width:.7px;stroke-dasharray:5 4}.scene-elevation .tb-strong{fill:var(--color-graphite);letter-spacing:.1em;font-size:13px}.scene-elevation .tb-warn{fill:var(--color-green-ink);letter-spacing:.12em}.scene-rail__legend{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-graphite-3);margin:0 0 10px;padding:0;font-size:12px}.scene-rail__variants{border:0;margin:0 0 22px;padding:0}.scene-rail__switch{border:1px solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-paper);grid-template-columns:1fr 1fr;gap:2px;padding:2px;display:grid}.scene-rail__variant{border-radius:var(--radius-pill);cursor:pointer;place-items:center;padding:9px 10px;font-size:14px;font-weight:600;transition:background .15s,color .15s;display:grid;position:relative}.scene-rail__variant input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.scene-rail__variant[data-active=true]{background:var(--color-graphite);color:var(--color-white)}.scene-rail__variant:not([data-active=true]):hover{background:var(--color-mist)}.scene-rail__variant:has(input:focus-visible){outline:3px solid var(--color-graphite);outline-offset:2px}.scene-rail__list{border-top:1px solid var(--color-line);margin:0;padding:0;list-style:none}.scene-rail__item{border-bottom:1px solid var(--color-line);position:relative}.scene-rail__item[data-active=true]:before{content:"";inset-block:0;background:var(--color-green-ink);width:3px;position:absolute;left:0}.scene-rail__button{text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;grid-template-columns:auto 1fr;gap:2px 12px;padding:14px 8px 14px 14px;display:grid}.scene-rail__button--inert{cursor:default}.scene-rail__button:hover:not(.scene-rail__button--inert){background:var(--color-paper)}.scene-rail__number{font-family:var(--font-mono);letter-spacing:.1em;color:var(--color-graphite-3);padding-top:3px;font-size:12px}.scene-rail__item[data-active=true] .scene-rail__number{color:var(--color-green-ink)}.scene-rail__name{font-family:var(--font-display);letter-spacing:-.02em;font-size:22px;line-height:1.05}.scene-rail__caption{color:var(--color-graphite-3);grid-column:2;font-size:14px;line-height:1.45}.scene-rail__controls{gap:10px;margin-top:16px;display:flex}@media (prefers-reduced-motion:reduce){.scene__drawing,.scene__canvas,.scene-btn{transition:none}}