*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#20211f;color:#20211f}body{padding:5px;display:flex;flex-direction:column;font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}#board{position:relative;flex:1;min-height:0;isolation:isolate}.panel{position:absolute;overflow:hidden;background:#f5f3ec;border-radius:5px;contain:layout paint}.hit{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;text-align:left;z-index:2}.hit:focus-visible{outline:2px solid #003ccf;outline-offset:-5px}.cover{position:absolute;inset:0;padding:clamp(20px,2.1vw,38px);display:flex;flex-direction:column;justify-content:center;gap:24px;transition:opacity .18s;pointer-events:none}.cover h1,.cover h2,.detail h2{font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;letter-spacing:-.035em;line-height:1;margin:0}.cover h1{font-size:clamp(66px,8.5vw,148px)}.cover h2{font-size:clamp(30px,3.25vw,62px)}.cover p{font:clamp(12px,1.15vw,18px)/1.5 'Courier New',monospace;margin:0;max-width:43ch}.dot{color:#003ccf}.compact{position:absolute;inset:0;padding:16px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(16px,1.25vw,20px);line-height:1.25;opacity:0;transition:opacity .2s;pointer-events:none}.panel.logo{background:#003ccf}.logo img{position:absolute;width:75%;max-width:260px;max-height:85%;height:auto;object-fit:contain;left:50%;top:50%;transform:translate(-50%,-50%)}body.focused .panel:not(.logo) .cover{opacity:0}body.focused .panel:not(.active):not(.logo) .compact{opacity:1}.panel.active .hit{height:65px}.panel.active .compact{display:none}.detail{position:absolute;inset:0;overflow:auto;scrollbar-width:none;opacity:0;pointer-events:none;transition:opacity .2s}.detail::-webkit-scrollbar{display:none}.detail-inner{padding:32px;max-width:100%;min-height:100%}.panel.active.ready .detail{opacity:1;pointer-events:auto}.detail small{display:block;color:#003ccf;font:10px/1.5 'Courier New',monospace;letter-spacing:.1em;text-transform:uppercase;margin:0 0 24px}.detail h2{font-size:clamp(40px,5vw,82px);max-width:15ch;margin-bottom:28px}.detail p{font-size:clamp(15px,1.3vw,19px);line-height:1.55;max-width:48ch}.detail ul{padding:0;list-style:none;margin:30px 0;max-width:58ch}.detail li{border-top:1px solid #d7d4ca;padding:12px 0;font-size:14px;line-height:1.5}.detail a{display:inline-block;background:#003ccf;color:#fff;text-decoration:none;padding:14px 20px;font-size:13px;margin:12px 0}.detail .note{font:12px/1.5 'Courier New',monospace;color:#6e6d66}footer{height:24px;display:flex;align-items:center;justify-content:space-between;color:#f5f3ec;font:9px 'Courier New',monospace;gap:10px}footer button{background:none;border:0;color:inherit;font-size:10px;padding:4px 10px}footer button:focus-visible{outline:1px solid white}@media(max-width:900px){.cover{padding:16px;gap:12px}.cover h1{font-size:56px}.cover h2{font-size:26px}.cover p{font-size:11px}.compact{padding:10px;font-size:14px}.detail-inner{padding:22px}.detail h2{font-size:42px}.detail p{font-size:15px}.logo img{max-width:110px}footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.cover,.compact,.detail{transition:none}}
.detail-inner{max-width:none}@media(max-width:900px){body:not(.focused) .cover{padding:12px 16px}.cover p{display:none}body:not(.focused) .cover h1,body:not(.focused) .cover h2{font:24px/1 Impact,'Arial Narrow',sans-serif}.compact{padding:7px 12px}.logo img{max-height:80%}}
.compact{padding:0!important}.compact canvas{display:block;width:100%;height:100%}
/* Keep navigation usable on short viewports; scroll the page when necessary. */
html{height:auto;min-height:100%;scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
body{height:100vh;height:100dvh;min-height:654px;padding:5px;overflow-x:hidden;scrollbar-width:none}
footer{flex:0 0 24px}.detail{overscroll-behavior:contain}.detail-inner{overflow-wrap:anywhere}
@media(max-width:900px){body{min-height:674px}footer{flex-basis:44px}footer button{min-height:44px;padding:8px 12px}.panel.active .hit{height:44px}.cover{gap:8px}body:not(.focused) .cover{padding:8px 16px}.detail-inner{padding:22px}}
@media(min-width:901px){.panel{container-type:size}.cover{padding:min(2.1vw,5cqh,38px);gap:min(24px,4cqh)}.cover h1{font-size:clamp(52px,min(8.5vw,22cqh),148px)}.cover h2{font-size:clamp(24px,min(3.25vw,18cqh),62px)}.cover p{font-size:clamp(11px,min(1.15vw,5cqh),18px)}}
.detail{overflow-x:hidden}.panel.ready .detail-inner{max-width:100%}
/* Minimized panels render only their pixel layer, never the normal cover text. */
body.focused .panel:not(.active):not(.logo) .cover{visibility:hidden}