:root{--lab:#f4f4f2;--ink:#0b0b0c;--signal:#e5132b;--dim:#747471;--warm:#f2a541}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#111;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Hiragino Sans",sans-serif;overflow:hidden}button,a{font:inherit}button{cursor:pointer}
#app{position:relative;width:min(100vw,560px);height:100svh;min-height:560px;margin:auto;overflow:hidden;background:var(--lab);isolation:isolate;touch-action:none}
#room{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}.vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(9,17,31,.34),transparent 24%,transparent 74%,rgba(9,17,31,.45));mix-blend-mode:multiply}
.masthead{position:absolute;top:max(18px,env(safe-area-inset-top));left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.78);font:10px ui-monospace,SFMono-Regular,monospace;letter-spacing:.13em;z-index:3;text-shadow:0 1px 7px #172338}.wordmark{opacity:.75}.eyebrow{color:#e7cfad}
.feed{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:18px;padding:14svh 14px 28svh;transform:translateY(0);will-change:transform;pointer-events:none}.feed-card{width:86%;margin-inline:auto;height:118px;flex:0 0 118px;border:1px solid rgba(255,255,255,.48);border-radius:18px;background:rgba(250,251,250,.48);backdrop-filter:blur(5px);box-shadow:0 12px 28px rgba(3,10,17,.13);padding:22px;display:flex;flex-direction:column;gap:10px;opacity:.88}.card-dot{width:22px;height:22px;border-radius:50%;background:#c7c7c4;display:block}.card-dot.blue{background:#aab9c2}.card-line{height:8px;width:62%;background:rgba(74,78,77,.25);border-radius:5px}.card-line.wide{width:86%}.card-line.short{width:40%}
.hint{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:rgba(255,255,255,.82);font:12px ui-monospace,SFMono-Regular,monospace;letter-spacing:.04em;text-shadow:0 1px 8px #172338;z-index:4;transition:opacity .3s}.still-ring{position:absolute;right:18px;bottom:max(21px,env(safe-area-inset-bottom));height:20px;width:20px;border:1px solid rgba(255,255,255,.5);border-radius:50%;z-index:4;opacity:.7}.still-ring span{position:absolute;inset:3px;border-radius:50%;background:var(--warm);transform:scale(0);transition:transform .1s}
.object-hint{position:absolute;left:50%;bottom:76px;transform:translate(-50%,10px);padding:8px 12px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(10,18,27,.48);color:#fff;font:11px ui-monospace,monospace;opacity:0;transition:opacity .2s,transform .2s;z-index:5}.object-hint.show{opacity:1;transform:translate(-50%,0)}
.letter{position:absolute;z-index:3;left:47%;top:51%;width:166px;height:108px;transform:translate(-50%,-50%) rotate(-4deg);border:0;border-radius:2px;background:#f5e6bf;color:#684a35;padding:25px 15px 10px;text-align:left;font:italic 12px/1.3 Georgia,serif;box-shadow:0 14px 25px rgba(61,40,20,.34);opacity:0;pointer-events:none;transition:opacity .9s;filter:saturate(.92)}.letter:before{content:"";position:absolute;inset:12px 14px;background:repeating-linear-gradient(180deg,rgba(103,71,39,.22),rgba(103,71,39,.22) 1px,transparent 1px,transparent 8px)}.letter.visible{opacity:1;pointer-events:auto}.letter.found{box-shadow:0 0 0 4px rgba(242,165,65,.45),0 14px 25px rgba(61,40,20,.34)}
.outro{position:absolute;inset:auto 0 0;padding:24px 20px max(26px,env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(8,15,24,.93) 30%);z-index:6;color:#fff;display:flex;align-items:end;gap:18px}.outro p{margin:0;flex:1;font:13px/1.4 ui-monospace,monospace;color:rgba(255,255,255,.82)}.text-button{border:1px solid rgba(255,255,255,.45);border-radius:99px;padding:9px 14px;background:transparent;color:#fff;font-size:12px}.leave{color:var(--warm);font-size:30px;text-decoration:none;line-height:1}.leave[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.letter{transition:none}.feed-card{backdrop-filter:none}}
.hint{opacity:0;pointer-events:none}

#app.letter-open .feed-card{opacity:.32}
.letter.visible{border:2px solid rgba(242,165,65,.92);z-index:10}

#app.scrolling .feed-card{background:rgba(250,251,250,.26);backdrop-filter:blur(2px);}
#app.still-cue::after{content:"";position:absolute;z-index:1;left:57%;top:51%;width:28%;height:25%;border-radius:50%;background:radial-gradient(ellipse,rgba(242,165,65,.52),rgba(242,165,65,.13) 42%,transparent 72%);filter:blur(5px);opacity:0;animation:lamp-breathe 2.2s ease-out;}
@keyframes lamp-breathe{0%{opacity:0;transform:scale(.7)}22%{opacity:1}100%{opacity:0;transform:scale(1.25)}}

/* Cold open (Claude, 2026-09-25): a link visitor sees the title and Morrow's
   line first; it fades the moment they scroll. */
.cold-open{position:absolute;left:20px;right:20px;top:18%;z-index:4;text-align:left;pointer-events:none;transition:opacity .6s ease,transform .6s ease}
.cold-title{margin:0;font:900 clamp(40px,13vw,72px)/.92 system-ui,"Hiragino Sans",sans-serif;letter-spacing:-.03em;color:#f4f4f2;text-shadow:0 4px 30px rgba(0,0,0,.55)}
.cold-line{margin:14px 0 0;font:700 13px/1.45 ui-monospace,monospace;letter-spacing:.05em;color:#ff4a5c;text-shadow:0 2px 12px rgba(0,0,0,.6);max-width:26em}
.started .cold-open{opacity:0;transform:translateY(-16px)}
.riku-line{margin:10px 0 14px;padding:12px 14px;border-radius:12px;background:rgba(14,26,43,.86);color:#f4efe6;border:1px solid rgba(242,165,65,.35);font:500 15px/1.45 system-ui,"Hiragino Sans",sans-serif}
.riku-line:empty{display:none}
@media (prefers-reduced-motion:reduce){.cold-open{transition:none}}
.cold-open{padding:22px 18px 20px;border-radius:18px;background:linear-gradient(180deg,rgba(8,12,22,.82),rgba(8,12,22,.62));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cold-line{color:#ff6b78}
#app:not(.started) .feed{opacity:.28;transition:opacity .5s}

/* Codex visual QA: make the room feel like one continuous scene. */
.cold-open,.outro { backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.text-button,.door,.leave { transition:transform .18s ease,filter .18s ease,opacity .18s ease; }
.text-button:hover,.door:hover,.leave:hover { transform:translateY(-2px); filter:brightness(1.08); }
button:focus-visible,a:focus-visible { outline:3px solid #f2a541; outline-offset:4px; }