/* Room first: no landing page, career modal, or portfolio grid. */ html,body{height:100%;overflow:hidden;background:#1b1c18} body.portfolio #app{position:fixed;inset:0;top:0;transform:none;width:100%;height:100dvh;min-height:0;overflow:hidden;background:#292b23} /* Opening shot (intro.js): a still of the live room, framed like the live camera, warming and sharpening as it loads (--load 0 -> 1), with the house record spinning up in front of it until the needle drops. */ #app{--load:0} #room-intro{--blur:0px;position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;isolation:isolate;background:#1d1c17;transition:background-color 1.1s cubic-bezier(.4,0,.2,1)} #room-intro .frame{position:absolute;left:50%;top:50%;width:var(--still-w,100%);height:var(--still-h,100%);opacity:0;transform:translate(-50%,-50%);transition:opacity .8s ease} #room-intro.placed .frame{opacity:1} #room-intro .still{position:absolute;inset:0;background:center/100% 100% no-repeat;filter:brightness(calc(.5 + .5 * var(--load))) saturate(calc(.55 + .45 * var(--load))) blur(var(--blur));transition:filter 1.6s cubic-bezier(.2,.6,.2,1)} #room-intro img{display:block;width:100%;height:100%;opacity:0;transition:opacity .6s ease} #room-intro.loaded img{opacity:1} /* The house record (Dapree's needle-drop concept), drawn on a canvas over the still; the step and percentage sit under it. */ #room-intro .needle{position:absolute;inset:0;z-index:1;transition:opacity .7s ease,transform .7s ease} #room-intro .needle canvas{position:absolute;inset:0;width:100%;height:100%;display:block} #room-intro .hud{position:absolute;left:0;right:0;top:var(--hud-top,78%);margin:0;display:flex;justify-content:center;align-items:baseline;gap:14px;font:500 12px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#f2efe9b3;text-shadow:0 1px 8px #000a;white-space:nowrap} #room-intro .hud .sep{color:#f2efe940}#room-intro .hud .pct{color:#e0a458;font-size:13px;font-variant-numeric:tabular-nums} #room-intro .enter{position:absolute;left:50%;top:calc(var(--hud-top,78%) - 14px);transform:translateX(-50%);min-height:44px;padding:12px 28px;border:1px solid #f2efe955;border-radius:999px;background:#14120f66;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#f2efe9;font:500 13px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;animation:enter-in .6s ease both;transition:border-color .25s,background .25s} #room-intro .enter:hover{border-color:#e0a458;background:#14120f88}#room-intro .enter:focus-visible{outline:2px solid #e0a458;outline-offset:3px} @keyframes enter-in{from{opacity:0;transform:translate(-50%,6px)}} #room-intro.ready{pointer-events:auto;cursor:pointer}#room-intro.ready .hud{opacity:0} #room-intro.dropped .needle{opacity:0;transform:scale(1.03)}#room-intro.unplayed .needle{display:none} body[data-reduced=true] #room-intro.dropped .needle{transform:none} /* post.js applies its vignette to the screen, so the still (captured without it) gets the same one here: black at 1 - the multiply factor, which darkens the same and still fades cleanly over the live room. */ #room-intro:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.004) 70%,rgba(0,0,0,0.012) 80%,rgba(0,0,0,0.035) 90%,rgba(0,0,0,0.063) 100%,rgba(0,0,0,0.102) 110%,rgba(0,0,0,0.145) 120%,rgba(0,0,0,0.184) 130%,rgba(0,0,0,0.216) 142%)} /* The hand-off (intro.js handoff): the still, the backdrop and the vignette dissolve into the live room around the drawn record, which then fades over the 3D record in the same spot; that one flies on to the turntable. */ #room-intro.revealed{background-color:transparent} #room-intro.revealed .frame{opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1)} #room-intro:after{transition:opacity 1.1s cubic-bezier(.4,0,.2,1)}#room-intro.revealed:after{opacity:0} #room-intro.handoff .frame,#room-intro.handoff:after{transition-duration:.7s} #room-intro.handoff .needle{opacity:0;transition:opacity .3s ease .55s} #room-intro.handoff .hud{opacity:0;transition:opacity .3s ease} body[data-reduced=true] #room-intro .still{filter:none} /* If the 3D room cannot open (or loses its graphics context later), the still stays as the backdrop. */ body.fallback #room-intro{display:block!important;opacity:1} /* The load status is shown under the loading record; the words stay here for screen readers. */ #loading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;margin:0;background:none;border:0} #loading .loader-disc{display:none} body.fallback #loading{inset:auto auto 80px 24px;height:auto;width:auto;overflow:visible;clip-path:none;padding:12px 18px;display:flex;gap:12px;align-items:center;background:#24271eeb;border:1px solid #ffffff20;border-radius:6px;pointer-events:auto} body.fallback #loading p{position:static;width:auto;height:auto;clip-path:none;white-space:normal;max-width:300px;font-size:12px} #collection{position:absolute;inset:82px 24px auto auto;transform:none;width:auto;max-width:calc(100% - 48px);padding:5px 8px;display:flex;gap:3px;align-items:center;background:#252a22ee;border:1px solid #eee4d130;border-radius:24px;box-shadow:0 3px 20px #0002;z-index:20} #record-list{display:flex;flex-wrap:wrap;gap:2px}#record-list button,#collection-close{min-height:44px;padding:9px 14px;border-radius:20px;font-size:12px}#record-list [aria-current=true]{text-decoration:underline;text-underline-offset:5px} #record-controls{bottom:22px;left:50%;right:auto;transform:translateX(-50%);gap:0}#record-controls button{min-height:44px;font-size:11px;padding:10px 13px} #record-detail{position:fixed;inset:0 0 0 auto;box-sizing:border-box;width:370px;height:100dvh;max-height:none;padding:30px;overflow:auto;background:#eee8dc;color:#30352c;z-index:30;font:15px/1.65 system-ui,sans-serif;border:0;box-shadow:none} #record-detail #sleeve-close{position:static;display:block;margin:0 0 26px auto;padding:10px;color:inherit;border:1px solid #30352c40;border-radius:4px;min-height:44px} #record-detail h2{font:30px/1.12 Georgia,serif;margin:12px 0 22px}#record-kind{font-size:13px;color:#596052}#record-facts section{border-top:1px solid #30352c30;padding:14px 0 4px}#record-facts h3{font:600 11px/1.4 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;margin:0 0 6px}#record-facts ul{list-style:none;padding:0;margin:0}#record-facts li{font:17px/1.35 Georgia,serif;margin:0;padding:5px 0}#record-facts li a{display:inline;margin:0}#record-facts li button{padding:0;text-align:left;text-decoration:underline;text-underline-offset:4px;color:#364d39}#record-note{font:17px/1.55 Georgia,serif;margin:0 0 18px}#record-disclaimer{font-size:11px;color:#626857}#record-detail a{display:block;color:#364d39;margin:12px 0;text-underline-offset:4px} body.reading #app{width:calc(100% - 370px)} :focus-visible{outline:2px solid #f4deb1;outline-offset:4px}#record-detail :focus-visible{outline-color:#52654b} body.fallback #scene{background:none} @media(max-width:700px){ header{padding:14px 12px;align-items:center}.wordmark{font-size:13px}.wordmark span{font-size:7px}nav{gap:0}header nav button{padding:8px;font-size:11px;min-height:44px}#identity{display:none} #collection{inset:78px 12px auto 12px;max-width:none;padding:3px 4px;border-radius:6px;justify-content:space-between}#record-list{gap:0}#record-list button{padding:8px 10px;font-size:11px}#collection-close{padding:8px} #record-controls{bottom:76px;left:50%;right:auto;transform:translateX(-50%);max-width:calc(100% - 16px)}#record-controls button{padding:8px 10px;font-size:10px;min-height:44px} body.fallback #loading{left:12px;bottom:80px;right:12px;padding:12px}body.fallback #loading p{font-size:11px} body.reading #app{width:100%;height:48dvh}#record-detail{inset:48dvh 0 0;width:100%;height:52dvh;padding:20px 24px}body.reading #record-controls{bottom:8px}body.reading footer{display:none}#record-detail #sleeve-close{margin-bottom:12px} } @media(prefers-reduced-motion:reduce){.loader-disc{animation:none}} /* About and preferences also occupy a dock; the room stays visible and usable. */ .room-panel{position:fixed;inset:0 0 0 auto;box-sizing:border-box;width:370px;height:100dvh;padding:30px;overflow:auto;background:#eee8dc;color:#30352c;z-index:30;font:14px/1.65 system-ui,sans-serif} .room-panel h2{font:32px/1.15 Georgia,serif;margin:22px 0}.room-panel .dialog-close{position:static;display:block;margin-left:auto;color:inherit;min-width:44px;min-height:44px}.room-panel .large{font:22px/1.4 Georgia,serif}.room-panel a{color:#364d39}.room-panel .setting{display:flex;justify-content:space-between;gap:20px;margin:25px 0 10px}.room-panel select{color:#30352c;background:#f5f0e5;padding:7px}.room-panel :focus-visible{outline-color:#52654b}.room-panel .draft{font-size:11px;color:#626857}.room-panel .credits{margin-top:28px;padding-top:14px;border-top:1px solid #30352c26;font-size:12px;line-height:1.5;color:#626857}.room-panel .credits p{margin:0 0 8px}.room-panel .credits .eyebrow{margin-bottom:8px} @media(max-width:700px){.room-panel{inset:48dvh 0 0;width:100%;height:52dvh;padding:20px 24px}} /* interactive personal props (props.js) */ .prop-panel .prop-cover{display:block;width:100%;max-width:300px;margin:18px 0;border-radius:3px;box-shadow:0 10px 30px #0003} .prop-panel .prop-cover.book{max-width:190px} .prop-panel .prop-placeholder{margin:14px 0;padding:10px 12px;border:1px dashed #9a9a86;border-radius:6px;color:#6d705f;font-size:13px;font-style:italic} .prop-panel .prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .prop-panel .prop-grid img,.prop-panel .prop-list img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px} .prop-panel figure{margin:0}.prop-panel figcaption{font-size:12px;color:#5b5f50;margin-top:4px} .prop-panel .prop-list{display:grid;gap:14px;margin-top:14px} .prop-panel .prop-button{display:inline-block;margin:10px 0 4px;padding:9px 14px;border-radius:999px;background:#30352c;color:#f3eee3;font:600 13px system-ui,sans-serif;text-decoration:none;min-height:40px} .prop-panel .prop-small{font-size:11px;color:#7a7d6c;margin:2px 0} .prop-panel h2:focus{outline:none} /* judging r2: nav links, back pill, contact card, labels pulse, shortcuts, reduced-motion cut, phone identity */ header nav .navlink{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:inherit;text-decoration:none;font:inherit;letter-spacing:inherit} header nav button,header nav .navlink{font-size:13px} header nav,#identity{text-shadow:0 1px 8px #0006} #return{position:absolute;top:84px;right:24px;left:auto!important;width:auto;max-width:max-content;z-index:25;min-height:44px;padding:0 18px;border-radius:22px;font-size:14px;display:flex;gap:8px;align-items:center} #return[hidden]{display:none} .contact-card{margin:26px 0 10px;padding:18px 18px 12px;border-radius:10px;background:#e3dac8}.contact-card h3{font:22px/1.2 Georgia,serif;margin:6px 0 10px} .contact-card ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}.contact-card a{font-weight:600}.contact-card a[aria-disabled=true]{opacity:.55;pointer-events:none;text-decoration:none} .contact-card:focus-visible{outline:2px solid #52654b;outline-offset:4px} .hotspot{animation:label-pulse 1.5s ease-out 1}.hotspot:nth-child(2){animation-delay:.4s}.hotspot:nth-child(3){animation-delay:.8s}.hotspot:nth-child(4){animation-delay:1.2s} @keyframes label-pulse{0%{box-shadow:0 0 0 0 #ffcf8a99}60%{box-shadow:0 0 0 12px #ffcf8a00}100%{box-shadow:none}} .shortcuts{width:100%;border-collapse:collapse;margin:18px 0;font-size:13px}.shortcuts caption{text-align:left;font-weight:600;margin-bottom:6px} .shortcuts th,.shortcuts td{text-align:left;padding:7px 0;border-top:1px solid #30352c22;vertical-align:top}.shortcuts th{font-weight:500;width:44%} body.cut #scene{animation:cut-fade .15s ease-out}@keyframes cut-fade{from{opacity:.25}to{opacity:1}} @media(prefers-reduced-motion:reduce){.hotspot{animation:none;box-shadow:0 0 0 2px #ffcf8a66}} @media(max-width:700px){ #identity{display:block;position:absolute;top:70px;left:12px;right:12px;padding:0;pointer-events:none}#identity .eyebrow{display:none} #identity h1{font-size:16px;margin:0}#identity p{font-size:13px;margin:2px 0 0;max-width:30ch} header nav button,header nav .navlink{font-size:14px;padding:0 7px} #sound .nav-text{display:none}#sound{font-size:0!important}#sound::before{content:'♪';font-size:18px}.wordmark span{display:none} #return{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));left:50%!important;right:auto;transform:translateX(-50%)} body:has(#return:not([hidden])) #room-tools-toggle{bottom:calc(76px + env(safe-area-inset-bottom))} #sound,#settings{min-width:44px;min-height:44px}#sound[data-on=false]::before{content:'🔇'} } .cue-chip{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);z-index:24;padding:8px 14px;border-radius:16px;font-size:13px;pointer-events:none}.cue-chip[hidden]{display:none} #identity>p:last-child{max-width:30ch} #identity>p:last-child{max-width:22ch} .contact-soon{font-size:12px;color:#6d705f;margin:10px 0 0} .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media(max-width:700px){body[data-view]:not([data-view=home]):not([data-view=explore]) #room-tools-toggle{display:none}body.reading #return,body.reading #record-controls{display:none}} /* pass 2026-10-01b: round-1 judge fixes */ #identity>p:last-child{max-width:27ch} @media(min-width:701px){#identity{top:13%}} #object-cursor{z-index:27} #record-controls,#return,.cue-chip,#view-caption,.hotspot{transition:opacity .16s ease-out,translate .16s ease-out,background .15s} @starting-style{#record-controls,#return,.cue-chip,#view-caption{opacity:0;translate:0 6px}} body #view-caption:not([hidden]){display:block!important;position:absolute;left:30px;top:auto;bottom:84px;z-index:12;max-width:330px;padding:14px 18px;border-radius:14px;background:#20231dd9;border:1px solid #eee4d126;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none;text-shadow:none} body #view-caption .eyebrow{margin:0 0 4px;font-size:10px;letter-spacing:.16em;color:#dfbe8a}body #view-caption h2{font:400 20px/1.2 Georgia,serif;margin:0 0 6px}body #view-caption>p:last-child{font-size:12.5px;line-height:1.5;margin:0;max-width:none;color:#eee5d6} .hotspot{font-size:11px;padding:8px 12px}.control-reveal{font-size:12px}#record-controls button{font-size:12.5px}.back kbd{font-size:10px} @media(hover:none){.back kbd{display:none}} @media(max-width:700px){.hotspot{min-height:40px;font-size:11px;padding:0 13px}#identity{padding:8px 10px 14px!important;background:linear-gradient(#0008,#0000);left:0!important;right:0!important;top:62px!important}body #view-caption:not([hidden]){left:12px;right:12px;bottom:76px;max-width:none;padding:10px 14px}#record-controls button{font-size:11.5px}} @media(prefers-reduced-motion:reduce){body.cut #scene{animation:cut-fade .15s ease-out!important}} @media(max-width:700px){.hotspot{min-height:32px;font-size:10px;padding:0 10px;letter-spacing:.5px}} /* round-2 judge fixes */ @media(max-width:700px){.hotspot{min-height:36px;font-size:11.5px}.hotspot::after{content:'';position:absolute;inset:-6px}#identity{top:0!important;padding:70px 12px 26px!important;background:linear-gradient(#0000,#0006 70px,#0000)}} .track-info span,.volume{font-size:11px}.eyebrow{font-size:10.5px}.back kbd{font-size:11px} #read-text{font-size:11px;opacity:.8}#read-text[hidden]{display:none} body.pulsed .hotspot{animation:none} @media(max-width:700px){#identity .eyebrow{display:block;font-size:9.5px;margin:0 0 2px;opacity:.85}#identity h1{font-size:22px}} /* round-3 polish */ #record-controls,#return,.cue-chip,#view-caption{transition:opacity .16s ease-out,translate .16s ease-out,background .15s,display .16s allow-discrete} #record-controls[hidden],#return[hidden],.cue-chip[hidden],#view-caption[hidden]{opacity:0;translate:0 6px;pointer-events:none} @starting-style{.hotspot{opacity:0}} #read-text{font-size:12.5px;opacity:1} body[data-view=ipadReview] #view-caption:not([hidden]){left:50%;translate:-50% 0;bottom:10px;padding:8px 14px;max-width:none}body[data-view=ipadReview] #view-caption .eyebrow,body[data-view=ipadReview] #view-caption h2{display:none} @media(max-width:700px){.hotspot{min-height:44px}.hotspot::after{inset:-2px 0}#identity{background:linear-gradient(#0007,#0000 88%)!important;padding-bottom:64px!important}} @media(max-width:700px){#identity{background:linear-gradient(#0007,#0003 60%,#0000)!important;padding-bottom:90px!important}} /* Plain-text version (tools/build-plain-html.mjs). Always in the page for screen readers and search engines, visually hidden while the room runs; shown as a reading page when opened from the skip link, when Tab reaches one of its links, without WebGL (body.plain-mode), when the room fails (body.fallback), and without JavaScript (