:root { color-scheme: dark; --ink:#f7f3ed; --muted:#c9c1b7; --panel:#141217; --pink:#f291b5; --blue:#61c8e8; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:#09080b; }
body { color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
.room-viewer { max-width:1440px; margin:0 auto; padding:clamp(12px,2vw,28px); }
.viewer-header { display:flex; gap:24px; align-items:end; justify-content:space-between; margin-bottom:14px; }
.eyebrow { margin:0 0 4px; color:var(--pink); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(1.35rem,3vw,2.25rem); }
.instructions { margin:0; color:var(--muted); font-size:.95rem; }
.viewer-shell { position:relative; overflow:hidden; min-height:340px; height:min(72vh,800px); border:1px solid #38323c; border-radius:12px; background:#111 center/cover no-repeat; }
#panorama { width:100%; height:100%; }
.load-viewer { position:absolute; inset:0; display:grid; place-content:center; gap:8px; width:100%; border:0; color:white; background:rgba(5,4,7,.58); cursor:pointer; font:inherit; text-align:center; }
.load-viewer span { padding:12px 18px; border:1px solid rgba(255,255,255,.7); border-radius:999px; background:rgba(12,10,15,.76); font-size:clamp(1rem,2.5vw,1.3rem); font-weight:700; }
.load-viewer small { color:#eee; font-size:.83rem; }
.load-viewer:hover span,.load-viewer:focus-visible span { border-color:var(--pink); box-shadow:0 0 0 3px rgba(242,145,181,.24); }
.load-viewer[hidden] { display:none; }
.viewer-controls { display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; }
.viewer-controls button { min-height:44px; padding:9px 15px; border:1px solid #48414e; border-radius:999px; color:var(--ink); background:var(--panel); font:inherit; font-weight:700; cursor:pointer; }
.viewer-controls button:hover:not(:disabled),.viewer-controls button:focus-visible { border-color:var(--blue); }
.viewer-controls button.is-active { border-color:var(--pink); background:#35202a; }
.viewer-controls button:disabled { cursor:default; opacity:.48; }
.fullscreen-button { margin-left:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.directory { max-width:760px; margin:0 auto; padding:clamp(28px,6vw,72px) 22px; }
.directory a { color:#9de2f6; }
.directory li { margin:12px 0; }
.prototype-note { color:var(--pink); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }
@media (max-width:680px) { .viewer-header{display:block}.instructions{margin-top:7px}.viewer-shell{height:62vh;min-height:360px;border-radius:8px}.viewer-controls{display:grid;grid-template-columns:1fr 1fr}.viewer-controls button{padding-inline:9px}.fullscreen-button{margin-left:0} }