:root{--bg:#e9e8e1;--ink:#26382f;--muted:#7b8175;--accent:#c75c38;--line:#cbd0c4;--panel:#f7f7f0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif;transition:background .8s,color .8s}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:6px}button{border:0}a{color:inherit;text-decoration:none}.grain{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E")}header{height:110px;display:flex;align-items:center;justify-content:space-between;margin:0 5%;border-bottom:1px solid var(--line);position:relative;z-index:4}.wordmark{font-size:16px;font-weight:650;display:flex;align-items:center;gap:13px;letter-spacing:1px}.brand-icon{font-size:34px}.beta{font-size:8px;font-weight:400;letter-spacing:1.7px;margin-left:24px;color:var(--muted)}.pill{background:transparent;border:1px solid var(--line);border-radius:30px;padding:10px 16px;font-size:13px;display:flex;gap:8px;align-items:center}#room-view{position:relative;min-height:calc(100svh - 110px);overflow:hidden}.intro{position:absolute;left:7%;top:21%;z-index:3;pointer-events:none}.intro>*{pointer-events:auto}.eyebrow{font-size:10px;letter-spacing:2.4px;display:flex;align-items:center;gap:9px}.status-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px #c75c3812}h1{font-size:clamp(36px,3.7vw,62px);line-height:1.35;font-weight:500;letter-spacing:-2.5px;margin:26px 0 22px}h1 span{font-family:Georgia,"Songti SC",serif;font-style:italic;color:var(--accent)}.intro p{font-size:13px;line-height:1.9;letter-spacing:1px;color:var(--muted)}.enter{background:var(--ink);color:var(--bg);padding:17px 21px;margin-top:25px;min-width:187px;border-radius:3px;font-size:12px;display:flex;justify-content:space-between;gap:35px;transition:transform .2s,background .2s}.enter:hover{transform:translateY(-3px);background:var(--accent)}.enter span{font-size:19px;line-height:13px}.intro-note{font-size:9px;color:var(--muted);margin-top:19px;letter-spacing:.5px}.room-stage{position:absolute;left:29%;right:-2%;top:0;bottom:45px}canvas{display:block;width:100%;height:100%;touch-action:pan-y}.hotspot{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;white-space:nowrap;background:rgba(247,247,240,.91);backdrop-filter:blur(10px);box-shadow:0 5px 20px #25382d15;padding:11px 14px;border:1px solid #fff9;border-radius:30px;font-size:10px;color:#26382f;transition:transform .2s;z-index:2}.hotspot:hover{transform:translate(-50%,-50%) scale(1.08)}.hotspot-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px #c75c381c}.room-caption{position:absolute;left:37%;bottom:4%;display:flex;flex-direction:column;gap:8px;text-align:center;font-size:9px;color:var(--muted);letter-spacing:1px}.room-caption span:first-child{font-size:8px;letter-spacing:2px}.bottom-note{position:absolute;bottom:25px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.8px;color:var(--muted)}.bottom-note span:first-child{font-size:10px}.night{--bg:#242e34;--ink:#e3e5d8;--muted:#a4b4b4;--line:#435258;--panel:#2d3c40}body.in-computer header,body.in-computer #room-view{visibility:hidden}.transition-cover{position:fixed;inset:0;background:#20372e;opacity:0;pointer-events:none;z-index:20;transition:opacity .32s}.transition-cover.flash{opacity:1}#desktop{position:fixed;inset:20px;border-radius:10px;background:var(--panel);z-index:8;box-shadow:0 25px 100px #14251e55;overflow:hidden}#desktop[hidden]{display:none}.os-topbar{height:49px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:0 24px;font-size:9px;letter-spacing:1px}.os-topbar button{background:none;font-size:10px}.os-topbar kbd{font-size:8px;border:1px solid var(--line);padding:3px 4px;margin-left:10px;border-radius:3px}.os-topbar i{font-style:normal;color:var(--accent);margin:0 10px}.os-layout{height:calc(100% - 83px);display:grid;grid-template-columns:235px 1fr}aside{padding:42px 28px;border-right:1px solid var(--line);display:flex;flex-direction:column}.os-brand{font-size:36px;letter-spacing:-2px;line-height:1.15;position:relative}.os-brand span{font-size:56px;position:absolute;right:0;bottom:0;color:var(--accent)}aside p{font-size:10px;line-height:1.9;color:var(--muted);margin:23px 0 35px}nav{display:flex;flex-direction:column;gap:4px}nav button{display:flex;align-items:center;gap:17px;padding:14px 12px;font-size:9px;background:none;text-align:left;border-radius:4px}nav button span{flex:1;font-size:12px}nav button.active{background:var(--ink);color:var(--panel)}aside small{font-size:8px;line-height:2;letter-spacing:1px;color:var(--muted);margin-top:auto}.os-content{padding:42px 4%;overflow-y:auto;outline:none}.section-eyebrow{font-size:9px;letter-spacing:2px;color:var(--accent)}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:30px}.section-head h2{font-size:42px;letter-spacing:-1.5px;font-weight:500;margin:15px 0 0}.section-head p{font-size:10px;color:var(--muted);line-height:1.8;margin:0}.cards{display:grid;grid-template-columns:1fr 1fr;gap:25px}.card{background:transparent;text-align:left;padding:0;min-width:0}.card-art{height:220px;border-radius:4px;position:relative;overflow:hidden;display:grid;place-items:center;transition:transform .3s}.card:hover .card-art{transform:translateY(-5px)}.card h3{font-size:15px;font-weight:500;margin:15px 0 7px;display:flex;justify-content:space-between}.card p{font-size:9px;color:var(--muted);letter-spacing:.5px;margin:0}.tag{position:absolute;top:14px;left:14px;font-size:8px;letter-spacing:1px;background:#ffffff30;border:1px solid #ffffff50;padding:5px 7px;border-radius:3px;z-index:2}.sculpture{background:#d8dfd1;color:#304c37}.sculpture .orb{width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 28% 23%,#f0f4ce 0,#b4c98e 25%,#5b7953 55%,#263f34 83%);box-shadow:25px 40px 22px -15px #34483366;position:relative}.sculpture .orb:after{content:'';position:absolute;inset:-20px;border:8px solid #e4e4c4;border-radius:50%;transform:rotate(-35deg) scaleY(.34);box-shadow:0 6px 0 #829474}.type-art{background:#c96845;color:#fae6cd;font-family:Georgia,serif;line-height:.73;font-size:90px;letter-spacing:-7px;font-style:italic;align-content:center}.type-art .tag{font-style:normal;letter-spacing:1px;font-family:Arial;font-size:8px}.type-art em{font-size:66px}.grid-art{background:#243932;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:20px 20px;color:#c4d78c}.grid-art .loop{width:140px;height:140px;border:1px solid #c4d78c;position:relative;transform:rotate(35deg);border-radius:30%}.loop:before,.loop:after{content:'';position:absolute;inset:10px;border:1px solid #c4d78c;border-radius:30%;transform:rotate(25deg)}.loop:after{inset:-10px;transform:rotate(-25deg)}.blue-art{background:#bac9cf;color:#233b51;position:relative}.blue-art b{font-size:90px;font-family:Georgia;font-weight:400;font-style:italic}.blue-art:after{content:'';position:absolute;inset:70% -10% -20%;background:#e9ebe4;transform:rotate(-13deg)}.example-note{padding:17px 0;margin-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:9px;line-height:1.8}.os-bottom{height:34px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 23px;font-size:8px;color:var(--muted);letter-spacing:.7px}.os-bottom i{display:inline-block;width:5px;height:5px;background:#829366;border-radius:50%;margin-right:6px}.journal-row{padding:26px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:65px 1fr 20px;gap:15px}.journal-row time{font-size:9px;color:var(--muted);padding-top:7px}.journal-row h3{font-size:20px;font-weight:400;margin:0 0 10px}.journal-row p{font-size:11px;color:var(--muted);line-height:1.9;max-width:500px}.journal-row .label{font-size:8px;color:var(--accent);letter-spacing:1px}.about-copy{max-width:650px;font-size:18px;line-height:2;font-weight:400}.about-copy small{font-size:12px;color:var(--muted)}dialog{border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);padding:42px;max-width:650px;width:calc(100% - 40px);max-height:85svh;box-shadow:0 20px 100px #0005}dialog::backdrop{background:#14231ed0;backdrop-filter:blur(8px)}#close-detail{position:absolute;right:17px;top:15px;background:none;font-size:16px}dialog h2{font-size:30px;font-weight:400}dialog p{font-size:13px;line-height:2;color:var(--muted)}dialog .card-art{height:260px}.mobile-hint{display:none}@media(min-width:1600px){.room-stage{left:31%;right:1%}.intro{top:24%}}@media(max-width:850px){header{height:80px}.beta{display:none}.intro{left:6%;top:6%}h1{font-size:34px;letter-spacing:-1px;margin:19px 0 14px}.intro p{font-size:11px}.intro-note{display:none}.enter{margin-top:16px;padding:14px 17px;min-width:160px}.eyebrow{font-size:8px}.room-stage{left:10%;right:-14%;top:15%;bottom:20px}.room-caption{left:35%;bottom:4%}#room-view{min-height:calc(100svh - 80px)}.bottom-note .hint{display:none}.os-layout{grid-template-columns:170px 1fr}aside{padding:30px 18px}.os-brand{font-size:29px}.os-brand span{font-size:40px}.cards{gap:18px}.card-art{height:180px}.section-head h2{font-size:33px}.section-head p{display:none}}@media(max-width:580px){header{margin:0 6%;height:75px}.wordmark{font-size:13px}.brand-icon{font-size:27px}.pill{font-size:11px;padding:8px 12px}.intro{top:6%;left:7%}h1{font-size:37px;line-height:1.24;margin-bottom:12px}.intro p{font-size:11px;line-height:1.7}.eyebrow{font-size:7px;letter-spacing:1.7px}.enter{padding:12px 15px;font-size:10px;min-width:150px;margin-top:12px}.room-stage{left:-26%;right:-32%;top:29%;bottom:5%}.room-caption{left:34%;bottom:3%;font-size:8px}.hotspot{font-size:8px;padding:9px 12px}.bottom-note{bottom:17px;left:7%;right:7%;font-size:6px}.bottom-note span:first-child{font-size:8px}.bottom-note span:last-child{max-width:110px;text-align:right;line-height:1.8}#desktop{inset:0;border-radius:0}.os-topbar{padding:0 17px;height:48px}.os-topbar>span{font-size:7px}.os-topbar kbd{display:none}.os-layout{display:block;height:calc(100% - 89px)}aside{padding:18px 18px 0;border-right:0;border-bottom:1px solid var(--line)}.os-brand,aside p,aside small{display:none}nav{flex-direction:row;gap:4px;margin-bottom:15px}nav button{flex:1;gap:5px;padding:10px 8px;font-size:7px}nav button span{font-size:10px}.os-content{padding:28px 22px;height:calc(100% - 66px)}.section-head{margin-bottom:25px}.section-head h2{font-size:34px}.cards{grid-template-columns:1fr;gap:27px}.card-art{height:230px}.os-bottom{height:41px;padding:0 16px;font-size:6px;gap:25px}.os-bottom>span:last-child{max-width:130px;text-align:right;line-height:1.7}.about-copy{font-size:16px}.journal-row{grid-template-columns:40px 1fr 12px;gap:9px}.journal-row h3{font-size:17px}dialog{padding:32px 22px}dialog .card-art{height:200px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.notebook{font-size:8px;padding:8px 11px;background:#f1e5ceee}.notebook .hotspot-dot{background:#738769;box-shadow:0 0 0 3px #73876918}@media(max-width:580px){.notebook{font-size:7px;padding:7px 9px}}
#webgl-scene{position:absolute;inset:0;z-index:1}.room-caption{z-index:2;pointer-events:none}
.token{background:#2c4037ee;color:#edf2dc;font-size:8px;padding:8px 11px}.token .hotspot-dot{background:#c6d992;box-shadow:0 0 0 3px #c6d99222}.token-stats{display:grid;grid-template-columns:1fr 1fr;gap:23px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0;margin:25px 0}.token-stats b{display:block;font-size:21px;font-weight:500}.token-stats span{display:block;font-size:9px;color:var(--muted);margin-top:7px}@media(max-width:580px){.token{font-size:7px;padding:7px 9px}.token-stats b{font-size:18px}}
/* V2: one continuous room. The desktop stays on the same physical monitor plane. */
:root{--bg:#cbd1cc;--ink:#293b32;--muted:#78847a;--panel:#f5f3e9}html,body{width:100%;height:100%;overflow:hidden}body{background:radial-gradient(ellipse at 48% 35%,#e2e5db 0,#cdd4cd 55%,#b8c4bd 100%)}body.night{background:radial-gradient(ellipse at 45% 35%,#374b54,#1b2c35 72%)}#room-view{position:fixed;inset:0;min-height:0;overflow:hidden}.room-stage{position:absolute;inset:0;left:0;right:0;top:0;bottom:0}.room-stage>canvas{position:absolute;inset:0;width:100%;height:100%}#scene{z-index:1}#webgl-scene{z-index:2;pointer-events:none}#screen-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}#desktop{position:absolute;left:0;top:0;right:auto;bottom:auto;inset:0 auto auto 0;width:1200px;height:700px;margin:0;border-radius:1px;border:0;transform-origin:0 0;will-change:transform;backface-visibility:hidden;overflow:hidden;box-shadow:none;pointer-events:none;visibility:hidden;background:var(--panel)}#desktop[hidden]{display:block}body.in-computer header,body.in-computer #room-view{visibility:visible}header{position:fixed;inset:0 0 auto;height:82px;margin:0;padding:0 32px;border:0;z-index:10;pointer-events:none}.wordmark{font-size:13px;letter-spacing:.6px;gap:10px;pointer-events:auto}.wordmark:first-letter{font-size:27px}.room-tools{display:flex;align-items:center;gap:10px;pointer-events:auto}.pill{background:#eef2e866;border-color:#6f82733d;font-size:10px;padding:9px 12px}#renderer-status{font-size:8px;color:var(--muted);letter-spacing:.5px;margin-right:8px}footer{position:fixed;left:32px;right:32px;bottom:24px;display:flex;align-items:center;justify-content:space-between;z-index:10;color:var(--muted);font-size:9px;letter-spacing:1px;pointer-events:none}footer button{pointer-events:auto;background:#263e33;color:#f5f3e9;border-radius:30px;padding:11px 18px;font-size:10px}#journey-label{font-size:8px;letter-spacing:2px}#room-hint{letter-spacing:.5px}.hotspot{z-index:5;transition:opacity .2s,background .2s;transform:translate(-50%,-50%);font-size:9px;background:#f4f5e6e6}.hotspot.token{background:#2c4037eb}.hotspot.notebook{background:#ece7d5ee}#return-room[hidden],footer button[hidden]{display:none}.os-topbar{height:44px;padding:0 22px;font-size:10px}.os-topbar button{font-size:11px}.os-layout{height:calc(100% - 74px);grid-template-columns:215px 1fr}aside{padding:32px 24px}.os-content{padding:30px 35px}.os-bottom{height:30px}.section-head h2{font-size:38px}.section-head{margin-bottom:22px}.journal-row{padding:20px 0}.journal-row h3{font-size:20px}.journal-row p{font-size:13px;line-height:1.8}.journal-row time{font-size:11px}.journal-row .label{font-size:10px}.section-head p{font-size:11px}.card-art{height:180px}#detail{position:absolute;inset:10px;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:32px 45px;overflow:auto;z-index:5;box-shadow:0 0 0 50px #15261de0}#detail[hidden]{display:none}#detail h2{font-size:31px;font-weight:450}#detail p{font-size:13px;line-height:1.9;color:var(--muted)}#detail .card-art{height:220px}#close-detail{right:18px;top:16px}body[data-view=screen] .wordmark{opacity:.45}body[data-view=screen] #renderer-status{opacity:.4}#screen-layer::after{display:none}
/* The display keeps its physical 12:7 ratio; narrow devices get a compact real DOM layout. */
#desktop.small-screen .os-topbar{height:27px;padding:0 9px;font-size:7px}#desktop.small-screen .os-topbar button{font-size:9px}#desktop.small-screen .os-topbar>span{font-size:6px}#desktop.small-screen .os-topbar kbd{display:none}#desktop.small-screen .os-layout{height:calc(100% - 27px);display:block}#desktop.small-screen aside{height:35px;padding:4px 6px 0;border-right:0;border-bottom:1px solid var(--line)}#desktop.small-screen .os-brand,#desktop.small-screen aside p,#desktop.small-screen aside small{display:none}#desktop.small-screen nav{display:flex;flex-direction:row;gap:4px;margin:0}#desktop.small-screen nav button{padding:6px;flex:1;font-size:6px;gap:4px}#desktop.small-screen nav button span{font-size:9px}#desktop.small-screen .os-content{height:calc(100% - 35px);padding:14px 18px;overflow:auto}#desktop.small-screen .os-bottom{display:none}#desktop.small-screen .section-head{margin-bottom:13px}#desktop.small-screen .section-head h2{font-size:25px;margin-top:7px}#desktop.small-screen .section-head p{display:none}#desktop.small-screen .section-eyebrow{font-size:7px}#desktop.small-screen .journal-row{grid-template-columns:35px 1fr 12px;gap:8px;padding:14px 0}#desktop.small-screen .journal-row h3{font-size:16px}#desktop.small-screen .journal-row p{font-size:12px;line-height:1.65}#desktop.small-screen .journal-row .label{font-size:7px}#desktop.small-screen .journal-row time{font-size:9px}#desktop.small-screen .cards{grid-template-columns:1fr;gap:20px}#desktop.small-screen .card-art{height:150px}#desktop.small-screen #detail{inset:5px;padding:20px 16px}#desktop.small-screen #detail h2{font-size:25px!important}#desktop.small-screen #detail p{font-size:11px}#desktop.small-screen .token-stats{gap:14px;padding:14px 0;margin:14px 0}#desktop.small-screen .token-stats b{font-size:17px}#desktop.small-screen .token-stats span{font-size:8px}
@media(max-width:580px){header{height:65px;padding:0 17px}.wordmark{font-size:11px}#renderer-status{position:fixed;top:65px;left:17px;font-size:7px}.pill{padding:8px 9px;font-size:9px}.room-tools{gap:5px}footer{left:17px;right:17px;bottom:18px;gap:10px;font-size:8px}#journey-label{font-size:7px;letter-spacing:.6px}#room-hint{max-width:145px;text-align:center;line-height:1.6}footer button{font-size:8px;padding:10px 12px}.hotspot{font-size:8px;padding:9px 11px}}
@media(prefers-reduced-motion:reduce){#desktop{will-change:auto}.hotspot{transition:none}}

/* Scroll chapters keep the same full-bleed room; only brief annotations accompany it. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
html{background:#cbd1cc}html:has(body.night){background:#1b2c35}
body{position:fixed;inset:0}
#room-view{background:inherit}
#scroll-track{display:none}
#desktop .app-reading,#desktop .finder-main,#desktop .usage-main,#detail{overscroll-behavior:contain}
#story-notes{position:fixed;left:5vw;bottom:14vh;z-index:6;pointer-events:none}.story-note{position:absolute;bottom:0;left:0;width:310px;opacity:0;transition:opacity .45s,transform .55s}.story-note small{font-size:8px;letter-spacing:2px;color:var(--muted)}.story-note p{font-size:clamp(20px,2.1vw,34px);letter-spacing:-1px;font-weight:400;margin:13px 0 8px}.story-note span{font-size:11px;color:var(--muted)}#story-navigation{position:fixed;right:28px;top:45%;z-index:11;gap:9px;display:flex;flex-direction:column}#story-navigation button{font-size:8px;padding:8px;border-radius:50%;border:1px solid transparent;background:#edf0e13d;color:var(--muted)}#story-navigation button[aria-current=step]{border-color:var(--accent);color:var(--accent)}#skip-intro{position:fixed;bottom:75px;right:32px;z-index:12;padding:9px 12px;border-radius:25px;background:#f2f0e7cc;font-size:10px}#skip-intro[hidden]{display:none}.assembling .hotspot{visibility:hidden}.assembling #enter{visibility:hidden}@media(max-width:580px){#story-notes{left:20px;bottom:16vh}.story-note p{font-size:23px}.story-note small{font-size:7px}#story-navigation{right:12px;top:42%}.story-note{width:240px}}

html:has(body[data-view=approaching]),html:has(body[data-view=screen]),html:has(body[data-view=returning]){overflow-y:hidden}