:root{--lime:#D8FF00;--bg:#E4E2DD;--ink:#080808}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible{outline:3px solid var(--lime);outline-offset:3px}.app{min-height:100dvh;display:grid;grid-template-columns:76px minmax(0,1fr)}aside{background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 6px}aside img{width:60px;height:60px;object-fit:contain}#counter{font-size:33px;font-weight:700}main{padding:clamp(10px,2vw,24px);width:100%;min-width:0;display:flex;flex-direction:column;align-items:center}.head,.stripe,.stage,.controls,.status{width:min(100%,min(1140px,calc(2 * (100dvh - 230px) + 24px)))}.head{font-size:clamp(24px,3vw,44px);font-weight:900;letter-spacing:-.05em}.stripe{background:var(--lime);padding:5px 9px;display:flex;justify-content:space-between;font-size:12px;font-weight:750;color:#000}.stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.5vw,24px);margin:clamp(12px,2vh,22px) 0 0;align-items:start}.square{aspect-ratio:1/1;width:100%;min-width:0;overflow:hidden;position:relative}.copy{border:3px solid #000;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(8px,2cqw,18px);padding:clamp(12px,5cqw,32px);text-align:center;container-type:inline-size;background:var(--bg)}h1{font-size:clamp(16px,5.5cqw,35px);line-height:1.12;margin:0;font-weight:850;white-space:pre-line;overflow-wrap:break-word;text-wrap:balance}p{font-size:clamp(11px,3.3cqw,19px);line-height:1.34;white-space:pre-line;margin:0;overflow-wrap:break-word;text-wrap:balance}.copy.long{gap:2cqw;padding:3cqw}.copy.long h1{font-size:clamp(13px,4.4cqw,26px)}.copy.long p{font-size:clamp(10px,2.75cqw,16px);line-height:1.26}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(5px,1.8cqw,12px);width:min(75%,300px);margin-inline:auto}.choices.triple{grid-template-columns:repeat(3,minmax(0,1fr));width:min(92%,380px)}.choices button{aspect-ratio:1/1;border:2px solid #000;background:#fff;color:#000;font-size:clamp(9px,2.8cqw,15px);font-weight:800;padding:5px;overflow-wrap:anywhere;display:grid;place-items:center;line-height:1.1}.choices button.selected{background:var(--lime)}.copy:has(.choices){padding:2.5cqw;gap:2cqw}.copy:has(.choices) h1{font-size:clamp(12px,4.6cqw,26px)}.copy:has(.choices) p{font-size:clamp(10px,3cqw,16px)}.photo{background:#000}.photo img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1);display:block}.grid9{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2%;padding:0;background:var(--bg)}.grid9>div{border:1px solid #000;min-width:0;min-height:0;aspect-ratio:1;overflow:hidden}.grid9 img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}.controls{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.controls button{width:clamp(48px,6vw,74px);aspect-ratio:1;border:2px solid #000;background:transparent;color:#000;font-size:clamp(8px,.8vw,11px);font-weight:800;padding:4px;overflow-wrap:anywhere}.controls button.dark{background:#000;color:var(--lime)}.controls button.on{background:var(--lime);color:#000}.status{margin-top:10px;font-size:11px;line-height:1.3;color:#333;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.result{position:absolute;inset:0;background:rgba(228,226,221,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:7%;text-align:center;animation:pixel .35s steps(6,end)}.result h2{font-size:clamp(16px,3vw,27px);margin:0}.result .bars{width:100%;display:flex;flex-direction:column;gap:7px}.result .bar{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700}.result .bar span{width:37%;text-align:right;overflow-wrap:anywhere}.result .bar i{height:18px;display:block;background:var(--lime);border:1px solid #000;min-width:2px}.result small{font-size:11px}.result button{background:#000;color:var(--lime);border:0;padding:10px;font-weight:800}.pointgrid{width:65%;aspect-ratio:1;border:2px solid #000;position:relative;background:linear-gradient(90deg,transparent 49.7%,#111 49.7%,#111 50.3%,transparent 50.3%),linear-gradient(transparent 49.7%,#111 49.7%,#111 50.3%,transparent 50.3%);cursor:crosshair}.dot{position:absolute;width:12px;height:12px;background:var(--lime);border:2px solid #000;transform:translate(-50%,-50%)}.worldpoints{position:absolute;inset:0;pointer-events:none}.worldpoints .dot{background:#000;border:2px solid var(--lime)}.note{font-size:clamp(10px,2.8cqw,15px)}.video{border:3px solid #000;display:grid;place-items:center;text-align:center;padding:10%;background:#000;color:#fff;font-weight:800}.video input{max-width:100%;font-size:12px}.video video{width:100%;max-height:100%}.scene{animation:pixel .32s steps(6,end)}@keyframes pixel{from{opacity:0;filter:contrast(2);transform:scale(.98)}to{opacity:1;filter:none;transform:scale(1)}}.modal{position:fixed;inset:0;background:rgba(0,0,0,.83);display:grid;place-items:center;z-index:20;padding:16px}.modalbox{width:min(90vw,550px);aspect-ratio:1;border:3px solid #000;background:var(--bg);padding:5%;display:flex;flex-direction:column;gap:12px;overflow:auto}.modalbox h2{margin:0}.modalbox textarea{width:100%;min-height:120px;flex:1}.modalbox button{padding:10px;border:2px solid #000;background:var(--lime);color:#000;font-weight:800}.hidden{display:none!important}@media(max-width:720px){.app{grid-template-columns:44px 1fr}aside img{width:34px;height:34px}#counter{font-size:19px}main{padding:8px}.stage{gap:6px}.copy{border-width:2px}.controls{gap:4px}.controls button{width:45px;font-size:7px}.head{font-size:25px}.stripe{font-size:9px}.copy h1{font-size:4.5cqw}.copy p{font-size:2.8cqw}.copy.long p{font-size:2.4cqw}.choices button{font-size:2.6cqw;padding:1px}.status{font-size:9px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* V28: readable, stable two-square projection. No viewport-height scaling. */
html,body{min-height:100%;height:auto}
.app{grid-template-columns:62px minmax(0,1fr);min-height:100vh}
main{align-items:stretch;padding:18px 24px 28px;overflow:visible}
.head,.stripe,.stage,.controls,.status{width:100%;max-width:1260px;margin-left:auto;margin-right:auto}
.head{font-size:clamp(30px,3vw,48px)}
.stripe{font-size:14px;padding:8px 12px}
.stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.copy{padding:clamp(16px,4cqw,38px);gap:clamp(12px,2.5cqw,22px)}
.copy h1,.copy:has(.choices) h1{font-size:clamp(20px,5.1cqw,42px);line-height:1.12}
.copy p,.copy:has(.choices) p{font-size:clamp(16px,2.9cqw,23px);line-height:1.32}
.copy.long{padding:clamp(16px,3cqw,32px);gap:clamp(8px,1.5cqw,16px)}
.copy.long h1{font-size:clamp(20px,4.2cqw,33px)}
.copy.long p{font-size:clamp(15px,2.3cqw,20px);line-height:1.3}
.choices{width:min(80%,390px);gap:clamp(8px,1.5cqw,14px)}
.choices.triple{width:min(94%,450px)}
.choices button{font-size:clamp(13px,2.5cqw,19px);padding:8px;hyphens:none;overflow-wrap:break-word}
.controls{gap:10px;margin-top:14px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
.controls button{flex:0 0 78px;width:78px;min-width:78px;font-size:12px;padding:6px;line-height:1.2}
.status{font-size:13px;margin-top:10px}
.photo img,.grid9 img{object-fit:cover;object-position:center center}
@media(max-width:720px){
.app{grid-template-columns:40px minmax(0,1fr)} main{padding:12px}
.stage{gap:8px}.head{font-size:26px}.stripe{font-size:11px}
.copy h1,.copy:has(.choices) h1{font-size:clamp(13px,4.2cqw,22px)}
.copy p,.copy:has(.choices) p{font-size:clamp(11px,2.7cqw,16px)}
.copy.long p{font-size:clamp(10px,2.5cqw,15px)}
.choices button{font-size:clamp(10px,2.4cqw,15px)}
.controls button{width:66px;min-width:66px;flex-basis:66px;font-size:10px}
}

.gate{width:min(90vw,600px);aspect-ratio:1;margin:5vh auto;padding:2rem;background:#D8FF00;color:#000;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}.gate input,.gate button{display:block;width:120px;height:120px;box-sizing:border-box;border:2px solid #000;background:#fff;color:#000;font:inherit}.gate form{display:flex;gap:20px;align-items:end}.gate label{font-size:14px}.gate a{color:#000}.app[hidden]{display:none}