:root{color-scheme:dark;--ink:#152b36;--paper:#fff8eb;--gold:#efc17c;--muted:#dddcd3;font-family:Arial,Helvetica,sans-serif;font-size:16px}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#10222b}body{display:grid;place-items:center}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;min-height:46px;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:4px}button:disabled{opacity:.55;cursor:default}button:active{transform:translateY(1px)}[hidden]{display:none!important}#experience{position:relative;isolation:isolate;width:100%;max-width:500px;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;color:var(--paper);background:#284d62}.world,.world img,.shade{position:absolute;inset:0;width:100%;height:100%}.world{z-index:-2;overflow:hidden}.world img{object-fit:cover;object-position:center;user-select:none;transition:opacity 1.1s ease,transform 1.4s ease}#past-art{opacity:0;clip-path:inset(0 100% 0 0);transition:opacity .9s,clip-path 1.4s ease}.world .shade{background:linear-gradient(180deg,rgba(13,35,49,.9) 0%,rgba(13,35,49,.48) 26%,transparent 51%,rgba(13,24,28,.25) 68%,rgba(13,24,28,.97) 100%)}header{padding:22px 22px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}.eyebrow{font-size:.75rem;letter-spacing:.13em;line-height:1.5;font-weight:700}header>.eyebrow{max-width:210px;font-size:.68rem}#top{padding:24px 24px 0;pointer-events:none}#chapter{margin:0 0 12px;color:var(--gold)}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.035em}h1{font-size:clamp(2.1rem,8.5vw,3.4rem);line-height:1.04;margin:0 0 18px}#intro{font-family:Georgia,serif;font-size:1.12rem;line-height:1.45;margin:0;max-width:340px}#scene-controls{flex:1;position:relative;min-height:85px;margin:0 22px}#panel{padding:18px 24px 12px;flex:none;position:relative;background:linear-gradient(0deg,rgba(16,32,39,.98),rgba(16,32,39,.83) 80%,transparent);max-height:57%;overflow-y:auto;scrollbar-width:thin}#panel p{font-size:1.025rem;line-height:1.5;margin:0 0 15px}#panel .eyebrow{font-size:.75rem;color:var(--gold);margin-bottom:8px}#panel h2{font-size:1.65rem;margin:0 0 10px}button.primary{background:var(--gold);color:#15242b;padding:15px 18px;width:100%;border-radius:8px;font-weight:700;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px}.primary::after{content:'→';font-size:1.25rem}.quiet{background:rgba(19,37,47,.86);color:var(--paper);padding:10px 13px;border:1px solid #ffffff40;border-radius:30px;font-size:.875rem}.textbutton{background:none;color:var(--paper);text-decoration:underline;text-underline-offset:4px;display:block;margin:4px auto 0;padding:10px}.hint{font-size:.8rem!important;line-height:1.4!important;color:var(--muted);margin:10px 0 0!important}.pin{position:absolute;bottom:22%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#132c39e8;color:var(--paper);border:1px solid var(--gold);border-radius:40px;padding:12px 18px;box-shadow:0 0 0 8px #efc17c26;font-size:.95rem}.pin:before{content:'+';color:var(--gold);font-size:1.3rem;margin-right:12px}.pin:active{transform:translateX(-50%) translateY(1px)}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button{flex:1;min-width:130px;padding:13px 12px;background:#ffffff10;border:1px solid #ffffff55;border-radius:8px;color:white;text-align:left;font-size:.98rem;line-height:1.4}.actions button[aria-pressed=true]{background:var(--gold);color:var(--ink);border-color:var(--gold)}.evidence{border-left:2px solid var(--gold);padding-left:15px;margin-bottom:14px}.evidence p{font-family:Georgia,serif;font-size:1.12rem!important}.feedback{padding:12px 0;color:#ffdfa8}#modes{display:flex;background:#112b38f2;border-radius:30px;padding:4px;position:absolute;bottom:6px;left:0;right:0;border:1px solid #ffffff30}#modes button{background:none;color:white;flex:1;font-size:.8rem;border-radius:22px;min-height:44px;padding:8px 5px}#modes button[aria-pressed=true]{background:var(--gold);color:var(--ink)}.scene-tag{position:absolute;left:10px;bottom:45%;background:#112b38eb;padding:10px 13px;border-left:2px solid var(--gold);font-size:.9rem;max-width:230px;line-height:1.4}footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 20px max(7px,env(safe-area-inset-bottom));background:#102027;flex:none}footer>span{font-size:9px;letter-spacing:.045em;max-width:280px;line-height:1.4}footer button{font-size:.75rem;color:#ddd;background:transparent;min-height:38px;padding:8px 0}dialog{color:var(--paper);background:#152b36;border:1px solid #ffffff40;border-radius:16px;padding:22px;max-width:450px;width:calc(100% - 24px);max-height:82vh;box-shadow:0 20px 90px #0008}dialog::backdrop{background:#03141bba}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}dialog h2{font-size:2rem;margin:12px 0}dialog h3{font-size:1rem;color:var(--gold);margin-top:24px}dialog p,dialog li{line-height:1.6;font-size:1rem}dialog a{color:var(--gold)}dialog small{display:block;line-height:1.5;color:#d0d9dc}#loading{position:absolute;inset:0;z-index:20;display:grid;place-content:center;background:#183748;font-family:Georgia,serif;font-size:1.4rem;padding:30px;text-align:center;gap:20px}#count{display:inline-block;margin-left:4px;color:var(--gold)}.has-past #past-art{opacity:1;clip-path:inset(0 0 0 0)}.partial-past #past-art{opacity:1;clip-path:inset(0 45% 0 0)}.focus-scene #present-art{transform:scale(1.08)}.cover #panel{background:linear-gradient(0deg,#102027,transparent);padding-top:55px}.cover #top{padding-top:50px}.cover h1{font-size:clamp(2.5rem,11vw,4rem)}.cover #intro{font-size:1.1rem}.cover #panel .hint{margin-bottom:16px!important}.complete #top h1{font-size:2.6rem}@media(min-width:600px){#experience{height:min(940px,100dvh);box-shadow:0 0 120px #0009}body{background:radial-gradient(ellipse at 50% 30%,#284656,#0b1c25 70%)}h1{font-size:3.1rem}}@media(max-height:740px){header{padding-top:9px;min-height:53px}#top{padding-top:12px}#top h1{font-size:2rem;margin-bottom:10px}#intro{font-size:1rem}#panel{padding-top:12px}#panel p{font-size:.98rem;margin-bottom:10px}.cover #top{padding-top:20px}.cover h1{font-size:2.65rem!important}#scene-controls{min-height:70px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* r03: portrait stays inside the scene, above its dialogue. */
.with-companion #scene-controls{min-height:180px}
.companion-bust{position:absolute;right:8px;bottom:-20px;height:clamp(180px,27vh,250px);max-height:calc(100% + 16px);max-width:64%;width:auto;object-fit:contain;object-position:bottom;pointer-events:none;user-select:none;filter:drop-shadow(0 4px 12px #081b2850);mask-image:linear-gradient(to bottom,#000 84%,transparent 100%)}
.with-companion #panel{padding-top:16px}
.companion-comment .companion-bust{height:clamp(160px,24vh,220px);max-width:52%}
.companion-comment .scene-tag{left:0;top:12px;bottom:auto;max-width:165px;font-size:.8rem}
@media(max-height:740px){.with-companion #scene-controls{min-height:135px}.companion-bust{height:165px}.companion-comment .companion-bust{height:150px}.companion-comment .scene-tag{max-width:150px;top:0}}