:root{--lab:#f4f4f2;--ink:#0b0b0c;--signal:#e5132b;--dim:#777;--line:#d8d8d5;--sans:Inter,"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--lab);color:var(--ink)}body{font:500 16px/1.4 var(--sans);overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,.feed-list:focus-visible{outline:3px solid var(--signal);outline-offset:3px}[hidden]{display:none!important}
#app{height:100dvh;min-height:540px;max-width:700px;margin:auto;position:relative;overflow:hidden;background:var(--lab)}.lab-header{position:absolute;z-index:30;top:0;left:0;right:0;height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 18px 0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.lab-header>*{pointer-events:auto}.brand{font:700 10px/1 var(--mono);letter-spacing:.15em;display:flex;align-items:center;gap:3px}.brand-eye{display:inline-block;width:12px;height:7px;border:1.5px solid var(--signal);border-radius:50%;position:relative}.brand-eye:after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:var(--signal);left:3px;top:1px}.icon-button{width:44px;height:44px;border:1px solid var(--line);background:rgba(244,244,242,.84);border-radius:50%;font-size:18px}.screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}.machine{font:600 11px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase}.top-copy{padding:calc(74px + env(safe-area-inset-top)) 24px 0;position:relative;z-index:2}.top-copy .machine{color:var(--dim);margin:0 0 6px}.top-copy h1,.bottom-actions h1{font-size:clamp(34px,9vw,70px);line-height:.94;letter-spacing:-.065em;margin:0;font-weight:850;text-wrap:balance;overflow-wrap:anywhere}.bottom-actions{position:relative;z-index:5;padding:18px 20px max(20px,env(safe-area-inset-bottom));margin-top:auto;background:linear-gradient(0deg,var(--lab) 83%,transparent);display:flex;flex-direction:column;gap:12px}.primary-button,.secondary-button{min-height:58px;width:100%;border:0;padding:14px 22px;display:flex;justify-content:space-between;align-items:center;text-align:left;text-decoration:none;font-size:17px;font-weight:800;letter-spacing:-.02em}.primary-button{background:var(--ink);color:var(--lab)}.primary-button:after{content:"↗";font-size:23px;font-weight:400}.secondary-button{border:1px solid var(--ink);background:transparent;color:var(--ink)}.text-button{border:0;background:none;text-decoration:underline;text-underline-offset:4px;font:600 13px var(--mono);color:var(--ink);padding:12px;align-self:flex-start}.fine-print{font:500 11px/1.5 var(--mono);color:var(--dim);margin:0;overflow-wrap:anywhere}
.open-screen{background:radial-gradient(circle at 50% 44%,#fff 0,#f4f4f2 45%,#e9e9e6 100%)}.room-lines{position:absolute;inset:0;background:linear-gradient(90deg,transparent 9%,rgba(40,40,40,.07) 9.2%,transparent 9.4%,transparent 90.6%,rgba(40,40,40,.07) 90.8%,transparent 91%),linear-gradient(0deg,rgba(40,40,40,.1),transparent 26%);pointer-events:none}.room-lines:before,.room-lines:after{content:"";position:absolute;width:90vw;height:1px;max-width:580px;background:var(--line);left:50%;top:58%;transform:translate(-50%,-50%) rotate(14deg)}.room-lines:after{transform:translate(-50%,-50%) rotate(-14deg)}.open-center{margin:auto 24px;text-align:center;position:relative;z-index:1}.open-center h1{font-size:clamp(58px,19vw,140px);line-height:.83;letter-spacing:-.085em;margin:22px 0;overflow-wrap:anywhere}.open-center p:last-child{color:var(--dim);max-width:27em;margin:10px auto}.eye-mark{width:118px;height:64px;margin:0 auto;border:4px solid var(--ink);border-radius:50%;display:grid;place-items:center;transform:rotate(-8deg)}.eye-mark i{width:38px;height:38px;background:var(--signal);border-radius:50%;display:block;box-shadow:0 0 0 8px var(--lab),0 0 0 11px var(--ink)}
.friend-screen{background:var(--lab)}.friend-preview{height:68%;padding-top:70px;display:grid;place-items:center}.friend-preview canvas{width:min(72vw,370px);height:auto;filter:drop-shadow(0 16px 26px #0002)}.friend-screen .bottom-actions{gap:16px}.friend-screen h1{max-width:10ch}
.feed-screen{background:#0b0b0c;color:#f4f4f2}.feed-meta{position:absolute;top:calc(64px + env(safe-area-inset-top));left:18px;right:18px;z-index:3;display:flex;justify-content:space-between;pointer-events:none;text-shadow:0 1px 5px #0009}.timeline{height:2px;position:absolute;z-index:5;top:calc(54px + env(safe-area-inset-top));left:18px;right:18px;background:#fff5}.timeline i{display:block;width:100%;height:100%;background:var(--signal);transform:scaleX(0);transform-origin:left}.feed-list{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}.feed-list::-webkit-scrollbar{display:none}.feed-card{scroll-snap-align:start;scroll-snap-stop:always;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#151515}.feed-art{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}.feed-art svg{width:100%;height:100%;display:block;transform:scale(1.02)}.feed-art:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#0007 75%,#000b)}.feed-card figcaption{position:relative;z-index:1;padding:0 24px max(42px,env(safe-area-inset-bottom));max-width:34em}.feed-card .feed-topic{font:700 11px var(--mono);letter-spacing:.15em;color:#fff9}.feed-card h2{font-size:clamp(28px,8vw,48px);letter-spacing:-.05em;line-height:1.04;margin:8px 0 0;text-wrap:balance}.feed-card p{font-size:13px;color:#fff9;max-width:25em}.feed-edge{position:absolute;right:14px;top:50%;z-index:2;width:2px;height:90px;background:#fff5}.feed-edge:after{content:"";display:block;width:8px;height:8px;background:var(--signal);border-radius:50%;margin-left:-3px}
.portrait-screen{background:radial-gradient(circle at 50% 48%,#fff 0%,var(--lab) 51%,#e4e4e1 100%)}.portrait-copy h1{max-width:11ch}.portrait-stage{position:absolute;inset:12% 0 15%;display:grid;place-items:center;overflow:hidden}.portrait-stage canvas{position:relative;z-index:1;width:min(110vw,570px);max-height:100%;height:auto;object-fit:contain;filter:drop-shadow(0 15px 20px #0002)}.stage-ring{position:absolute;width:min(75vw,380px);aspect-ratio:1;border:1px solid #b7b7b3;border-radius:50%;top:30%;left:50%;transform:translateX(-50%)}.stage-ring:after{content:"";position:absolute;inset:15%;border:1px dashed #ddd;border-radius:50%}.portrait-screen .bottom-actions{min-height:150px}.observed{margin:0;min-height:2.6em}.double-screen .top-copy h1{font:700 clamp(17px,5vw,24px)/1.15 var(--mono);letter-spacing:.025em;max-width:22ch}.double-screen .portrait-stage{inset:10% 0 12%}.hidden-status{position:absolute;bottom:110px;left:22px;right:22px;z-index:3;color:var(--signal);min-height:2em}.double-screen.glitch canvas{filter:drop-shadow(3px 0 #e5132b) drop-shadow(-3px 0 #0b0b0c)}
.sort-screen .top-copy{padding-top:calc(68px + env(safe-area-inset-top))}.sort-screen .top-copy h1{font-size:clamp(34px,10vw,60px)}.sort-screen #sort-progress{margin:8px 0;color:var(--dim)}.sort-stage{position:absolute;inset:14% 0 30%;display:grid;place-items:center}.sort-stage canvas{width:min(90vw,470px);max-height:100%;height:auto;object-fit:contain}.sort-screen .bottom-actions{gap:8px;padding-top:22px}.sort-screen h2{font-size:clamp(25px,8vw,42px);line-height:1.05;letter-spacing:-.04em;margin:0 0 6px}.sort-buttons{display:grid;gap:7px}.sort-buttons button{background:var(--lab);border:1.5px solid var(--ink);min-height:52px;padding:10px 15px;text-align:left;font-weight:750;display:flex;align-items:center;justify-content:space-between}.sort-buttons button:before{content:"○";font:24px var(--mono);margin-right:16px}.sort-buttons button:last-child{border-color:var(--signal)}.sort-buttons button:active{background:#e6e6e2}.sort-screen.hit-stop .sort-stage{filter:contrast(1.5)}#crack-flash{position:absolute;inset:0;pointer-events:none;background:var(--signal);opacity:0}.sort-screen.hit-stop #crack-flash{opacity:.08}
.split-stage{position:absolute;inset:15% 0 20%;display:flex;justify-content:center;align-items:center;overflow:hidden}.split-stage canvas{width:min(75vw,410px);height:auto;position:relative;z-index:2;transform:translateX(17%);filter:drop-shadow(0 10px 25px #0003)}.player-shadow{position:absolute;width:min(62vw,310px);height:75%;background:#292929;clip-path:polygon(39% 0,61% 0,72% 14%,70% 26%,86% 35%,100% 100%,0 100%,14% 35%,30% 26%,28% 14%);transform:translateX(-34%);filter:blur(1px);opacity:.85}.gap-line{font-size:clamp(29px,9vw,64px);line-height:.95;font-weight:850;letter-spacing:-.06em;margin:0 0 15px;max-width:12ch}.gap-line strong{color:var(--signal);font-size:1.7em;display:block}
.riku-screen{background:#0e1a2b;color:#f4f4f2}.riku-screen .lab-header{color:#f4f4f2}.riku-screen .icon-button{color:#fff;background:#0e1a2b;border-color:#526171}.riku-light{position:absolute;inset:-15% -30% 0;background:radial-gradient(ellipse at 75% 37%,#f2a54166,transparent 40%),linear-gradient(90deg,transparent 35%,#f2a54116 80%)}.rain{position:absolute;inset:0;background:repeating-linear-gradient(101deg,transparent 0 28px,#b7cee119 29px,transparent 31px);opacity:.6}.riku-screen img{position:absolute;width:min(115vw,600px);height:auto;max-height:84%;object-fit:contain;bottom:20%;left:50%;transform:translateX(-50%);filter:drop-shadow(0 12px 30px #0008)}.riku-copy{background:linear-gradient(0deg,#0e1a2b 80%,transparent);gap:8px}.riku-copy h1{font-size:clamp(35px,11vw,72px)}.riku-copy p{max-width:34em}.riku-copy #riku-line{font-size:18px;line-height:1.45}.riku-copy .primary-button{background:#f2a541;color:#0e1a2b}.riku-copy .text-button{color:#f4f4f2}
.share-screen .top-copy h1{font-size:clamp(33px,9vw,58px)}.share-preview{position:absolute;inset:18% 0 23%;display:grid;place-items:center}.share-preview canvas{max-height:100%;height:auto;width:auto;max-width:74vw;box-shadow:0 12px 30px #0003}.share-actions{display:grid;grid-template-columns:2fr 1fr;gap:8px}.share-actions .secondary-button{font-size:13px;justify-content:center;text-align:center}
@media(max-width:380px){.bottom-actions{padding-left:16px;padding-right:16px}.sort-buttons button{min-height:48px}.sort-screen .bottom-actions{gap:5px}.sort-stage{inset:13% 0 34%}.feed-card figcaption{padding-left:18px}}
@media(prefers-reduced-motion:no-preference){.portrait-stage canvas,.split-stage canvas{transition:transform .5s ease,opacity .5s ease}.eye-mark i{animation:watch 5s ease-in-out infinite alternate}@keyframes watch{to{transform:translateX(13px)}}.riku-screen .rain{animation:rain 3s linear infinite}@keyframes rain{to{background-position:80px 130px}}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:0s!important;transition-duration:0s!important;scroll-behavior:auto!important}}
html[lang="ja"] .open-center h1{font-size:clamp(30px,10vw,62px)!important;letter-spacing:-.05em;line-height:.95}

@media(max-width:380px){html[lang="ja"] .open-center h1{font-size:clamp(30px,10vw,60px)!important;letter-spacing:-.05em;line-height:.95}}
h1:focus{outline:none}
.hidden-status{bottom:calc(156px + env(safe-area-inset-bottom));background:var(--lab);padding:5px 0}
.player-shadow{width:min(42vw,210px);height:72%;clip-path:none;border-radius:46% 46% 13% 13% / 18% 18% 5% 5%;transform:translateX(-43%)}
.player-shadow:before{content:"";position:absolute;top:-3%;left:19%;width:62%;aspect-ratio:1;border-radius:50%;background:#292929}
.player-shadow:after{content:"";position:absolute;left:-26%;right:-26%;bottom:-2%;height:65%;border-radius:48% 48% 8% 8% / 18% 18% 4% 4%;background:#292929}

/* Mirror front door (2026-09-25) */
.split-close{display:inline-block;margin-top:10px;font:800 14px/1.4 ui-monospace,monospace;letter-spacing:.04em;color:#e5132b}
.split-friend{display:inline-block;margin-top:8px;font:700 13px/1.4 system-ui,"Hiragino Sans",sans-serif;opacity:.8}
/* The Mirror cold-open title is a sentence, not a word: smaller, never broken mid-word. */
#open-title{font-size:clamp(36px,10.5vw,68px)!important;line-height:.95!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}

/* Codex visual QA: shared tactile finish for the mirror gateway. */
.primary-button,.secondary-button,.text-button { transition:transform .18s ease,filter .18s ease,background-color .18s ease; }
.primary-button:hover,.secondary-button:hover { transform:translateY(-2px); filter:brightness(1.06); }
.primary-button:focus-visible,.secondary-button:focus-visible,.text-button:focus-visible { outline:3px solid var(--signal); outline-offset:4px; }