:root{color-scheme:dark;--ivory:#f5eedf;--muted:#d4c9b6;--ink:#302e27;--line:rgba(246,238,218,.22);--accent:#d9ac69}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#29251f;color:var(--ivory);font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit;background:none;border:0;padding:10px 12px;touch-action:manipulation}button:hover{color:#fff;background:rgba(255,255,255,.09)}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:disabled{opacity:.35;cursor:wait}[hidden]{display:none!important}#scene,canvas{position:absolute;inset:0;width:100%;height:100%;display:block}canvas{touch-action:none}header{position:absolute;z-index:10;top:0;left:0;width:100%;display:flex;align-items:flex-start;justify-content:space-between;padding:25px 35px;background:linear-gradient(#19180f66,transparent);pointer-events:none}header>*{pointer-events:auto}.wordmark{font:18px Georgia,serif;letter-spacing:2px;text-align:left;padding:5px}.wordmark span{display:block;font:8px Arial;letter-spacing:3px;margin-top:9px;opacity:.6}nav{display:flex;gap:12px;font-size:13px;letter-spacing:.03em}nav button{border-radius:3px}#sound{border:1px solid var(--line);border-radius:30px;padding:9px 14px;margin-left:8px}.eyebrow{font-size:9px;letter-spacing:2.1px;font-weight:600;line-height:1.7;margin:0 0 11px}#identity{position:absolute;left:28%;top:18%;color:#29271f;pointer-events:none;text-shadow:0 1px 10px #eee4d12b}#identity h1{font:clamp(27px,3vw,49px) Georgia,serif;font-weight:400;margin:0 0 19px;letter-spacing:-1px}#identity>p:last-child{font:italic 19px/1.5 Georgia,serif;margin:0;opacity:.82}#loading{position:absolute;inset:0;background:#28261f;z-index:25;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}#loading h2{font:32px Georgia;font-weight:400}#loading p{font-size:13px;color:var(--muted)}.loader-disc{height:75px;width:75px;border-radius:50%;background:repeating-radial-gradient(circle,#262622 0px,#262622 2px,#37372f 3px,#272720 4px);border:1px solid #5d5b4c;position:relative;animation:spin 5s linear infinite}.loader-disc:after{content:'';position:absolute;inset:26px;border-radius:50%;background:#ba7853;border:8px solid #c88960}@keyframes spin{to{transform:rotate(360deg)}}.glass{border:1px solid var(--line);background:#252720d9;backdrop-filter:blur(20px);box-shadow:0 10px 50px #0002;border-radius:8px}footer{position:absolute;z-index:11;bottom:23px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;pointer-events:none}footer>*{pointer-events:auto}.room-tools{display:flex;padding:5px;font-size:11px;letter-spacing:.03em}.room-tools button{border-radius:4px}.room-tools button[aria-pressed=true]{color:#e1bd7b}.transport{display:flex;align-items:center;padding:7px 13px 7px 5px;min-height:53px;gap:2px}.transport button{font-size:22px;padding:6px 9px}#play{font-size:13px}.track-info{display:flex;flex-direction:column;gap:5px;padding:0 20px 0 9px;min-width:180px}.track-info strong{font-size:11px;font-weight:400}.track-info span{font-size:8px;color:var(--muted);letter-spacing:.5px}.volume{font-size:8px;color:var(--muted);display:flex;flex-direction:column;gap:3px;width:64px}.volume input{width:64px;accent-color:var(--accent)}.hotspot{position:absolute;transform:translate(-50%,-50%);border-radius:20px;border:1px solid #fff5;background:#27271ac9;padding:7px 10px;font-size:9px;letter-spacing:1px;white-space:nowrap;box-shadow:0 1px 8px #0002;transition:background .15s}.hotspot:before{content:'+';margin-right:6px;color:#dfbe8a}.hotspot:hover{background:#403928;transform:translate(-50%,-50%) scale(1.04)}#hotspots{position:absolute;inset:0;pointer-events:none;z-index:4}#hotspots button{pointer-events:auto}#view-caption{position:absolute;left:35px;top:122px;pointer-events:none;text-shadow:0 1px 14px #000b}#view-caption h2{font:36px Georgia;margin:0 0 12px}#view-caption>p:last-child{font-size:12px;max-width:260px;line-height:1.7;color:#eee5d6}.back{position:absolute;z-index:12;left:35px;top:90px;font-size:11px;padding:10px 14px}.back kbd{font:8px Arial;color:#ccc;margin-left:24px}.paper{color:var(--ink);background:#eee6d5;box-shadow:0 25px 90px #0004;position:absolute;right:35px;top:115px;width:340px;max-height:calc(100% - 225px);overflow:auto;padding:29px 28px;z-index:9;border-radius:2px;background-image:repeating-linear-gradient(0deg,transparent 0px,#88735506 1px,transparent 3px)}.sleeve-meta{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.5px;color:#726d60;border-bottom:1px solid #90867566;padding-bottom:17px}.paper h2{font:37px Georgia;margin:24px 0 8px}.paper li{font-size:12px;line-height:1.8;margin:0 0 12px}.paper ul{padding-left:15px;margin-top:22px}.note{background:#e4cd8e;padding:22px 21px 15px;position:relative;transform:rotate(-2deg);box-shadow:1px 3px 5px #0001;margin:27px 0}.note p{font:italic 18px/1.45 Georgia;margin:0}.note small{display:block;font:11px Arial;margin-top:14px}.tape{position:absolute;width:83px;height:23px;background:#f6edcba8;top:-11px;left:calc(50% - 41px);transform:rotate(6deg);box-shadow:0 0 1px #8e764755}.draft{font-size:10px;line-height:1.6;opacity:.65}.record-actions{display:flex;justify-content:space-between;border-top:1px solid #90867544;margin-top:18px;padding-top:10px;font-size:10px}.paper button:hover{background:#0001;color:#181911}#synth-panel{position:absolute;z-index:10;left:50%;bottom:100px;transform:translateX(-50%);width:min(650px,calc(100% - 36px));padding:20px 23px}.synth-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.synth-top h2{font:25px Georgia;margin:0 0 18px}.synth-top label{font-size:10px;display:flex;flex-direction:column;gap:7px}select{background:#343a30;color:var(--ivory);border:1px solid var(--line);padding:7px;border-radius:3px}#keyboard{height:102px;display:flex;position:relative;touch-action:none}.piano-key{height:100%;flex:1;background:#e8e4d8;color:#4e5147;border:1px solid #bbb7a9;border-radius:0 0 4px 4px;padding:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-size:9px}.piano-key.black{position:absolute;top:0;height:62%;width:5.6%;z-index:1;background:#242a26;border:1px solid #141914;color:#c6c8b7}.piano-key:hover{background:#eee7c8;color:#333}.piano-key.black:hover{background:#3a4135;color:white}.piano-key.active{background:#cda966;box-shadow:inset 0 3px 6px #0005;transform:translateY(3px);height:calc(100% - 3px)}.piano-key.black.active{height:60%}.synth-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;margin-top:9px}.synth-bottom p{font-size:9px;color:var(--muted)}#collection{position:absolute;z-index:16;left:50%;top:50%;transform:translate(-50%,-50%);width:min(850px,calc(100% - 40px));padding:27px;max-height:80%;overflow:auto}.section-heading{display:flex;align-items:flex-start;justify-content:space-between}.section-heading h2{font:31px Georgia;margin:0 0 22px}#record-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.record-tile{text-align:left;border-radius:3px;padding:0;overflow:hidden}.record-tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.record-tile strong{font:17px Georgia;display:block;padding:13px 10px 6px}.record-tile span{font-size:9px;display:block;padding:0 10px 14px;color:var(--muted)}#toast{position:absolute;bottom:94px;left:50%;transform:translateX(-50%);font-size:11px;line-height:1.5;padding:9px 14px;background:#20261be8;border-radius:4px;pointer-events:none;z-index:18;max-width:80%;text-align:center}#toast:empty{display:none}dialog{color:var(--ink);background:#eee6d5;border:0;border-radius:3px;width:min(510px,calc(100% - 30px));max-height:83vh;overflow:auto;padding:38px;box-shadow:0 20px 100px #0007}dialog::backdrop{background:#171b16ac;backdrop-filter:blur(7px)}dialog h2{font:36px Georgia;margin:13px 0 22px}dialog p{font-size:13px;line-height:1.75}.large{font:20px/1.5 Georgia!important}.dialog-close{position:absolute;top:9px;right:10px}.dialog-close:hover{color:#000;background:#0001}.setting{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-top:27px}.setting+p{font-size:11px;opacity:.7}.skip{position:absolute;top:-60px;left:20px;z-index:100;color:#222;background:#eee;padding:15px}.skip:focus{top:10px}.nojs{position:absolute;inset:0;z-index:100;background:#272a23;padding:40px}body.fallback #scene{background:url('/assets/room-preview-v6.jpg') center/cover}body.fallback #identity{display:none}body[data-view=record] #identity,body[data-view=synth] #identity,body[data-view=window] #identity,body[data-view=explore] #identity{display:none}@media(max-width:850px){header{padding:18px}nav{gap:0;font-size:11px}nav button{padding:8px}.wordmark{font-size:14px}.wordmark span{font-size:7px;letter-spacing:1.4px}footer{left:15px;right:15px;bottom:15px;gap:8px;flex-wrap:wrap}.room-tools{width:100%;justify-content:space-around;order:2}.transport{width:100%;justify-content:center;min-height:45px;order:1}.track-info{flex:1}.volume{width:62px}.paper{top:100px;right:20px;width:300px;max-height:calc(100% - 245px);padding:22px}.back{left:18px;top:78px}#view-caption{top:126px;left:20px}#identity{top:19%;left:27%}#synth-panel{bottom:133px}.synth-bottom p{display:none}#toast{bottom:145px}#record-list{grid-template-columns:repeat(2,1fr)}}@media(max-width:540px){header{padding:15px 12px}.wordmark{font-size:12px;letter-spacing:1px}.wordmark span{font-size:6px;letter-spacing:1px}nav{font-size:10px}#settings{display:block;font-size:0;padding:7px}#settings:after{content:"⚙";font-size:14px}#sound{margin-left:3px;padding:7px 8px}#identity{left:23%;top:22%;color:#eee7d9;text-shadow:0 1px 12px #000}#identity h1{font-size:30px}#identity>p:last-child{font-size:16px}.paper{top:auto;bottom:130px;left:15px;right:15px;width:auto;max-height:38vh;padding:19px 22px}.paper h2{font-size:26px;margin:12px 0}.paper li{font-size:11px;margin-bottom:6px}.paper ul{margin-top:12px}.note{margin:19px 0}.note p{font-size:16px}#record-detail .sleeve-meta{padding-bottom:9px}#record-detail .draft{margin-bottom:0}.hotspot{font-size:8px;padding:6px}#view-caption h2{font-size:28px}.room-tools{font-size:10px}.room-tools button{padding:9px 7px}#collection{top:47%;padding:22px}.section-heading h2{font-size:27px}#synth-panel{padding:17px;bottom:132px}.synth-top h2{font-size:21px}dialog{padding:30px}#view-instructions{max-width:200px!important}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Keep exterior controls legible against the bright sky. */
body[data-view=window] header{background:linear-gradient(#18241fd9,transparent);min-height:110px}body[data-view=window] #view-caption{background:#25312ce8;padding:20px 22px;border:1px solid #e8dfc12e;border-radius:5px;top:143px;max-width:320px}body[data-view=window] #view-caption h2{font-size:29px}#identity{top:16%}#identity h1{margin-bottom:14px}
@media(max-width:540px){body[data-view=window] #view-caption{top:123px;max-width:245px;padding:14px 16px}body[data-view=window] #view-caption h2{font-size:24px}#identity{top:22%}}

/* The room stays unobstructed. Explicit disclosures provide keyboard/touch
   controls without ghosted toolbars across the furniture. */
footer{bottom:22px;left:28px;right:28px;display:block;opacity:1}
.control-reveal{font-size:10px;letter-spacing:.08em;padding:10px 13px;min-height:40px;border:1px solid #eee4d144;border-radius:20px;background:#20231dc9;backdrop-filter:blur(12px);box-shadow:0 2px 12px #0002}
.control-reveal span{display:inline-block;margin-left:10px;transition:transform .2s}
.control-reveal[aria-expanded=true] span{transform:rotate(180deg)}
#room-tools-panel{position:absolute;left:0;right:0;bottom:53px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;pointer-events:none}
#room-tools-panel>*{pointer-events:auto}
#record-controls{position:absolute;z-index:12;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;white-space:nowrap;border:1px solid #eee4d130;border-radius:22px;padding:2px 5px;background:#20231de0;backdrop-filter:blur(12px);box-shadow:0 3px 18px #0002}
#record-controls button{font-size:10px;padding:10px 13px;min-height:36px;border-radius:18px}
#read-sleeve{color:#f1d3a3}
.control-divider{height:13px;width:1px;background:#f1e9d82a}
#record-detail{top:100px;max-height:calc(100% - 180px);padding-top:38px}
.sleeve-close{position:absolute;right:10px;top:7px;font-size:15px;padding:9px 11px}
#record-title:focus{outline:none}
@media(hover:hover) and (min-width:851px){#identity{opacity:.86}}
@media(max-width:850px){
 footer{left:15px;right:15px;bottom:16px}
 #room-tools-panel{flex-wrap:wrap;gap:8px;bottom:53px}
 #record-controls{bottom:16px;left:auto;right:15px;transform:none}
 #record-controls button{padding:10px;font-size:10px}
 #record-detail{right:20px;top:100px;max-height:calc(100% - 180px)}
}
@media(max-width:540px){
 footer{left:12px;right:12px;bottom:14px}
 .control-reveal{min-height:42px;padding:10px 12px;font-size:9px}
 .control-reveal span{margin-left:5px}
 #record-controls{bottom:14px;right:12px;padding:0 3px}
 #record-controls button{padding:10px 8px;min-height:42px;font-size:9px}
 #record-detail{left:12px;right:12px;top:auto;bottom:76px;width:auto;max-height:calc(100% - 175px);padding:34px 22px 22px}
 #record-detail .sleeve-meta{padding-right:12px}
 #synth-panel{bottom:79px}
 #toast{bottom:78px}
}


@media(max-width:380px){#record-controls{bottom:68px}#record-detail{bottom:123px;max-height:calc(100% - 220px)}body:has(#room-tools-toggle[aria-expanded=true]) #record-controls{visibility:hidden}}
/* Keep the exterior framing visible while retaining concise keyboard/touch guidance. */
body[data-view=window] #view-caption{top:144px;max-width:255px;padding:16px 18px;background:#25312cdb}
body[data-view=window] #view-caption h2{font-size:24px}
body[data-view=window] #view-instructions{font-size:11px;line-height:1.6}

/* The physical instrument is primary; reveal the accessible keyboard on request. */
#synth-controls-toggle{position:absolute;z-index:12;left:50%;bottom:22px;transform:translateX(-50%);white-space:nowrap}
body:not([data-view=synth]) #synth-controls-toggle{display:none!important}
#synth-panel{padding-top:33px;bottom:79px}
#synth-panel-close{position:absolute;right:8px;top:5px;padding:8px 10px;font-size:13px;border-radius:4px}
@media(max-width:850px){#synth-controls-toggle{bottom:16px}}
@media(max-width:540px){#synth-controls-toggle{bottom:14px;font-size:9px}#synth-panel{padding-top:33px;bottom:79px}}
/* Preserve the authored room frame in a tall desktop preview pane. */
#app{position:absolute;inset:0}
@media(min-width:851px) and (max-aspect-ratio:5/4){
 #app{inset:auto 0;top:50%;height:66.666667vw;transform:translateY(-50%)}
 body{background:#1b1c18}
}
/* Room look is direct; identity fades once the reader turns away from its wall. */
#identity{transition:opacity .25s ease}
.room-tools{flex-wrap:wrap;max-width:650px}
body[data-view=window] #view-caption{top:auto;bottom:84px;left:28px;max-width:270px;padding:12px 16px;opacity:.82}
body[data-view=window] #view-caption h2{font-size:21px}
body[data-view=window] #view-caption .eyebrow{margin-bottom:4px}
@media(max-width:850px){.room-tools{max-width:none}body[data-view=window] #view-caption{bottom:79px;left:15px;max-width:240px}}

/* Concise action labels follow the pointer; the optional Controls panel holds help. */
#object-cursor{position:absolute;z-index:24;pointer-events:none;padding:7px 10px;border:1px solid #fff3;border-radius:4px;background:#18201de8;color:#f6f0df;font:11px/1.25 Arial,Helvetica,sans-serif;letter-spacing:.025em;box-shadow:0 2px 12px #0002;white-space:nowrap;backdrop-filter:blur(8px)}
#view-caption{display:none!important}
body[data-view=meena] #identity{display:none}
@media(hover:none){#object-cursor{display:none!important}}

/* A portrait pane keeps the complete authored room and panorama, without
   widening the lens until the finite photographic horizon is exposed. */
@media(max-aspect-ratio:3/2){#app{inset:auto 0;top:50%;height:66.666667vw;transform:translateY(-50%)}body{background:#1b1c18}}
#settings-dialog a{color:#555d49;text-underline-offset:3px}
/* Context loss reveals the still-room fallback underneath the collection. */
body.fallback #scene canvas{display:none}

/* A discovered camera leaves one optional print; it never triggers a download. */
#room-photo{position:absolute;z-index:13;right:26px;bottom:88px;width:160px;padding:9px 9px 10px;margin:0;transform:rotate(2deg);background:#eee7d8;color:#403d34;box-shadow:0 7px 25px #0005}
#room-photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:contain;background:#252820}
#room-photo figcaption{text-align:center;padding-top:8px;font:italic 12px Georgia,serif}
#room-photo a{color:inherit;text-underline-offset:3px}
#room-photo-close{position:absolute;right:-11px;top:-12px;border-radius:50%;padding:4px 9px;background:#eee7d8;color:#403d34;box-shadow:0 2px 5px #0003}
body[data-view=library] #identity{display:none}
@media(max-width:540px){#room-photo{width:135px;right:15px;bottom:74px}}