:root{--lab:#f4f4f2;--ink:#0b0b0c;--signal:#e5132b;--dim:#777;--amber:#f2a541;--night:#0e1a2b}
@media(prefers-color-scheme:dark){:root{--lab:#0b0b0c;--ink:#f4f4f2;--dim:#aaa}}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--lab);color:var(--ink);font:500 16px/1.4 system-ui,"Hiragino Sans","Noto Sans JP",sans-serif}body{overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid var(--signal);outline-offset:5px}
#app{position:relative;isolation:isolate;min-height:100svh;display:grid;grid-template-rows:1fr auto;overflow:hidden;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));background:var(--lab);transition:background .75s ease}
#app:before,#app:after{content:"";position:absolute;pointer-events:none;inset:0;z-index:-1}#app:before{background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(11,11,12,.035) 50%,transparent calc(50% + 1px)),linear-gradient(0deg,transparent calc(50% - 1px),rgba(11,11,12,.025) 50%,transparent calc(50% + 1px));background-size:72px 72px;opacity:.5}#app:after{inset:16px;border:1px solid color-mix(in srgb,var(--ink) 7%,transparent)}
.room{position:relative;min-height:52svh;display:grid;place-items:center;align-content:center;text-align:center;padding:5vh 0 3vh}.labmark{position:absolute;top:0;left:0;margin:0;color:var(--dim);font:700 10px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.22em}.rounds{position:absolute;top:0;right:0;color:var(--dim);font:700 10px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em}
.eyeWrap{position:absolute;width:min(95vw,710px);aspect-ratio:1.9;top:50%;left:50%;transform:translate(-50%,-54%);pointer-events:none;opacity:.82}#eye{display:block;width:100%;height:100%;filter:drop-shadow(0 8px 12px rgba(229,19,43,.1));transition:filter .6s,opacity .6s}#number{position:relative;z-index:1;color:var(--signal);font:800 clamp(80px,27vw,228px)/.9 system-ui,"Hiragino Sans",sans-serif;letter-spacing:-.105em;font-variant-numeric:tabular-nums;white-space:nowrap;text-indent:-.08em;text-shadow:0 2px 0 var(--lab)}#number[data-empty]{color:var(--signal);opacity:.36}#caption{position:relative;z-index:1;max-width:35rem;min-height:2.8em;margin:24px auto 0;padding:0 12px;color:var(--ink);font-size:clamp(14px,3.8vw,18px);font-weight:600;overflow-wrap:anywhere}#seal{position:relative;z-index:1;max-width:100%;min-height:1.5em;margin:16px auto 0;padding:8px 12px;border-top:1px solid color-mix(in srgb,var(--signal) 30%,transparent);color:var(--signal);font:600 clamp(10px,2.7vw,12px)/1.5 ui-monospace,SFMono-Regular,monospace;letter-spacing:.025em;overflow-wrap:anywhere}
#pads{z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,24px);width:min(100%,760px);margin:0 auto 6px}#pads button{position:relative;height:clamp(132px,27svh,235px);border:1px solid color-mix(in srgb,var(--ink) 60%,transparent);border-bottom:9px solid color-mix(in srgb,var(--ink) 82%,transparent);border-radius:4px 4px 8px 8px;background:linear-gradient(160deg,color-mix(in srgb,var(--lab) 92%,var(--ink)),var(--lab));color:var(--ink);box-shadow:0 13px 0 color-mix(in srgb,var(--ink) 12%,transparent),0 18px 23px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.8);font:600 clamp(56px,18vw,118px)/1 system-ui,sans-serif;cursor:pointer;touch-action:manipulation;transition:transform .09s,box-shadow .09s,border-bottom-width .09s}#pads button:active,#pads button.pressed{transform:translateY(8px);border-bottom-width:2px;box-shadow:0 5px 0 color-mix(in srgb,var(--ink) 12%,transparent),0 7px 12px rgba(0,0,0,.17)}#pads button span{display:block;transform:translateY(-4px)}#pads button small{position:absolute;bottom:14px;left:18px;color:var(--dim);font:700 10px ui-monospace,monospace;letter-spacing:.2em}
#scanline{position:absolute;inset:0 0 auto;height:2px;background:var(--signal);opacity:0;pointer-events:none;z-index:4}.hit #number{animation:pulse .3s ease-out}.hit #scanline{animation:scan .27s ease-out}.miss #number{animation:glitch .14s steps(2,end)}.hitstop #number,.hitstop #eye{animation-play-state:paused!important}#app[data-phase=door] #pads,#app[data-phase=out] #pads{display:none}#app[data-phase=door] .labmark,#app[data-phase=out] .labmark{opacity:.45}#app[data-phase=door] .eyeWrap{opacity:.16;filter:blur(3px)}#app[data-phase=door] #number{font-size:clamp(55px,17vw,140px)}#app[data-phase=door] .room{min-height:33svh;align-content:start;padding-top:6vh}#app[data-phase=door] #caption{margin-top:8px}#app[data-phase=door] #seal{margin-top:8px}
#door,#out{display:none;text-align:center}#app[data-phase=door] #door,#app[data-phase=out] #out{display:block}#door{position:relative;min-height:55svh;padding-top:0}#doorLine{position:relative;z-index:2;margin:0 0 8px;font:800 clamp(20px,5vw,34px)/1.15 system-ui,sans-serif;letter-spacing:.045em}.doorFrame{position:relative;width:clamp(142px,38vw,230px);height:min(43svh,390px);margin:0 auto;background:linear-gradient(90deg,#fff 72%,#f2a541);box-shadow:0 0 0 3px var(--ink),20px 0 36px rgba(11,11,12,.13)}#doorShape,.outDoor{position:absolute;inset:0;background:linear-gradient(90deg,#fdfdfb 0%,#fff 82%,#dad9d4 100%);border:1px solid #ddd;box-shadow:inset -5px 0 8px rgba(0,0,0,.07);transform-origin:left center;transform:perspective(750px) rotateY(-13deg);transition:transform 1.2s cubic-bezier(.2,.8,.1,1)}.doorFrame:before{content:"";position:absolute;inset:-4px -4px -4px 70%;background:#f8e9d3;filter:blur(13px);opacity:.34}#app[data-phase=door] .doorFrame:before{opacity:.3}#stillTrack{height:2px;width:clamp(142px,38vw,230px);margin:18px auto 0;background:color-mix(in srgb,var(--ink) 15%,transparent)}#still{height:100%;background:var(--signal);width:0;box-shadow:0 0 6px var(--signal)}
#app[data-phase=out]{background:radial-gradient(ellipse at 50% 62%,#f2a541 0%,#d1843b 25%,#324155 68%,#0e1a2b 100%);color:#fff;min-height:100svh}#app[data-phase=out]:before{background:repeating-linear-gradient(105deg,transparent 0 13px,rgba(255,255,255,.11) 14px,transparent 16px 34px);opacity:.48;animation:rain .7s linear infinite}#app[data-phase=out]:after{border-color:rgba(255,255,255,.2)}#app[data-phase=out] .room{min-height:28svh;padding:5vh 0 0}#app[data-phase=out] #number{font-size:clamp(60px,18vw,146px);color:#fff;text-shadow:0 4px 18px rgba(14,26,43,.4)}#app[data-phase=out] .eyeWrap{opacity:.3;filter:blur(8px);animation:blink .65s ease-in-out both}#app[data-phase=out] #caption,#app[data-phase=out] #seal{display:none}#app[data-phase=out] #out{align-self:start}#app[data-phase=out] .doorFrame{height:min(30svh,250px);border-color:#fff;background:#f2a541;box-shadow:0 0 75px #f2a541}#app[data-phase=out] .outDoor{transform:perspective(750px) rotateY(-72deg)}#outLine{font:700 clamp(17px,4.2vw,24px)/1.3 system-ui,sans-serif;max-width:35rem;margin:14px auto}#riku{max-width:34em;margin:18px auto 24px;font-size:clamp(16px,4.2vw,21px);line-height:1.5}.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding-bottom:env(safe-area-inset-bottom)}.row button,.row a{min-height:48px;padding:13px 16px;border:1px solid #fff;border-radius:3px;background:rgba(14,26,43,.5);color:#fff;text-decoration:none;font:700 14px/1.3 system-ui,sans-serif;cursor:pointer}.row a{background:#f2a541;color:#0e1a2b;border-color:#f2a541}
#card{display:none}@keyframes pulse{0%{transform:scale(1)}45%{transform:scale(1.075)}100%{transform:scale(1)}}@keyframes scan{0%{opacity:0;transform:translateY(0)}30%{opacity:.5}100%{opacity:0;transform:translateY(100svh)}}@keyframes glitch{0%,100%{transform:none}50%{transform:translateX(5px) skewX(-2deg)}}@keyframes blink{0%{transform:translate(-50%,-54%) scaleY(1)}45%{transform:translate(-50%,-54%) scaleY(.02)}100%{transform:translate(-50%,-54%) scaleY(1)}}@keyframes rain{to{background-position:0 44px}}
@media(max-width:400px){#app{padding-left:14px;padding-right:14px}.room{min-height:54svh}#seal{font-size:10px}#app[data-phase=out] .room{min-height:24svh}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}#app[data-phase=out]:before{background:none}#app[data-phase=out] .eyeWrap{opacity:.12}#app[data-phase=out] .outDoor{transform:perspective(750px) rotateY(-72deg)}}

#proof{position:relative;z-index:2;max-width:min(90vw,600px);margin:2px auto 0;color:var(--dim);font:600 10px/1.4 ui-monospace,SFMono-Regular,monospace;overflow-wrap:anywhere;text-align:center}#proof[hidden]{display:none}#proof summary{cursor:pointer;list-style:none}#proof summary:before{content:"▸ ";color:var(--signal)}#proof[open] summary:before{content:"▾ "}#proof code{display:block;white-space:pre-wrap;padding:6px 8px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);background:var(--lab)}#app[data-phase=out] #proof{display:none}

#doorShape{right:12px}#app[data-phase=door] .doorFrame{box-shadow:0 0 0 3px var(--ink),8px 0 30px rgba(242,165,65,.55),20px 0 36px rgba(11,11,12,.13)}

/* Claude review FIX: keep the result clear of the open door at 390×844. */
#app[data-phase="out"] #out{display:flex;flex-direction:column;align-items:center}
#app[data-phase="out"] #out .doorFrame{flex:0 0 min(23svh,190px);height:min(23svh,190px);margin-bottom:24px}
#app[data-phase="out"] #outLine{position:relative;z-index:3;margin:0 auto 18px;max-width:35rem}

/* Claude review FIX: the completed eye remains legible while the door waits. */
#app[data-phase="door"] .eyeWrap{opacity:.44;filter:drop-shadow(0 0 16px rgba(229,19,43,.3));}
#app[data-phase="door"] #eye{filter:contrast(1.35) drop-shadow(0 8px 12px rgba(229,19,43,.22));}

/* Hook + friend challenge (Claude, 2026-09-25) */
.hook{position:relative;z-index:2;margin:10vh 0 0;text-align:center;font:700 12px/1.4 ui-monospace,monospace;letter-spacing:.12em;color:#e5132b}
.hook[hidden]{display:none}
.challenge{position:relative;z-index:2;margin:10px auto 0;padding:6px 12px;width:max-content;max-width:90%;border:1px solid #e5132b;border-radius:999px;text-align:center;font:700 12px ui-monospace,monospace;letter-spacing:.06em;color:#f4f4f2;background:rgba(229,19,43,.18)}
[data-phase="door"] .hook,[data-phase="out"] .hook,[data-phase="door"] .challenge,[data-phase="out"] .challenge{display:none}

/* Morrow reads your habits (Claude, 2026-09-25) */
.habit{position:relative;z-index:2;max-width:32em;min-height:2.8em;margin:10px auto 0;padding:0 14px;text-align:center;font:800 12.5px/1.45 ui-monospace,monospace;letter-spacing:.05em;color:#ff4a5c;opacity:0}
.habit.show{animation:habit 5s ease both}
@keyframes habit{0%{opacity:0;transform:translateY(6px);filter:blur(3px)}8%{opacity:1;transform:none;filter:none}85%{opacity:1}100%{opacity:.35}}
#app[data-phase=door] .habit,#app[data-phase=out] .habit{display:none}
.privacyLine{position:relative;z-index:2;margin:6px auto 0;text-align:center;font:500 11px/1.4 system-ui,"Hiragino Sans",sans-serif;opacity:.55;max-width:30em;padding:0 16px}
.privacyLine[hidden]{display:none}
.model{max-width:32em;margin:6px auto 4px;padding:12px 14px;border-radius:10px;background:rgba(14,26,43,.55);text-align:left}
.model:empty{display:none}
.model p{margin:4px 0;font:700 12.5px/1.45 ui-monospace,monospace;color:#ffd9b0}
.model .modelTitle{font-size:11px;letter-spacing:.14em;color:#ff8a95;margin-bottom:6px}

/* Codex visual QA: sharpen the commit-reveal controls. */
.row button,.doorFrame,.outDoor { transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; }
.row button:hover,.doorFrame:hover,.outDoor:hover { transform:translateY(-2px); filter:brightness(1.08); }
button:focus-visible,a:focus-visible { outline:3px solid #e5132b; outline-offset:4px; }

/* SK-2 · the friend's running number, in gold under yours: stay under it */
#ghostNum{position:relative;z-index:1;margin-top:6px;color:#d98a1c;font:800 clamp(13px,3.6vw,16px) ui-monospace,SFMono-Regular,"Hiragino Sans","Noto Sans Thai","Apple SD Gothic Neo",monospace;letter-spacing:.08em;font-variant-numeric:tabular-nums}#ghostNum[hidden]{display:none}#app[data-phase=out] #ghostNum{color:#ffd27a}