*{box-sizing:border-box}[hidden]{display:none!important}:root{--green:#07492b;--dark:#0a311c;--lime:#edff38;--cream:#fffbe6}body{margin:0;color:var(--cream);background:#075034; font:700 16px Arial,Helvetica,sans-serif}body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 65% 25%,#26895388,transparent 57%),repeating-linear-gradient(120deg,transparent 0 90px,#53ad6d0b 91px 93px),linear-gradient(140deg,#073f29,#096438 70%,#063924)}button,a{font:inherit;touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #ffb833;outline-offset:-3px}.shell{width:min(1120px,94vw);margin:auto}header,footer{display:flex;align-items:center;gap:20px}header{height:76px;border-bottom:1px solid #ecffd23b}.brand{width:111px;height:46px;flex:none;background:url(assets/key-visual.jpg) -31px -724px/556px auto no-repeat;clip-path:polygon(0 0,40% 0,44% 17%,100% 11%,100% 100%,0 100%)}.edition,small,.eyebrow,footer span,.label{font-size:10px;letter-spacing:1.6px;font-weight:900}.edition i,.eyebrow i{display:inline-block;width:7px;height:7px;background:var(--lime);border-radius:50%;margin-right:5px}header button{margin-left:auto;color:var(--cream);background:#083e28;border:1px solid #b9dc9c66;border-radius:22px;padding:9px 13px;font-size:12px}main{display:grid;grid-template-columns:.85fr 1.15fr;gap:7%;align-items:center;max-width:970px;margin:20px auto 12px}aside{padding-left:12px}.label{display:inline-block;background:var(--cream);color:var(--dark);padding:6px 10px;box-shadow:3px 3px 0 #082817;transform:rotate(-3deg)}h1,h2{font-family:Impact,'Arial Black',Arial,sans-serif;font-weight:1000;letter-spacing:-.065em;line-height:.88;margin:20px 0;text-transform:uppercase;transform:skew(-6deg) rotate(-3deg);text-shadow:3px 5px #102e15}h1{font-size:clamp(65px,7vw,103px)}em,h2 strong{color:var(--lime);font-style:normal}aside p{font-size:20px;line-height:1.4;color:#f6fbd2}.line{display:block;height:2px;width:53px;background:#ebff35;margin:25px 0 10px}article{width:100%;max-width:480px;justify-self:center;border:2px solid #082b16;border-radius:23px;overflow:hidden;background:var(--cream);box-shadow:0 7px 0 #053320,0 18px 55px #052e2555;color:var(--dark)}.viewport{height:clamp(370px,61svh,610px);position:relative;overflow:hidden;background:#6bdb51}canvas{width:100%;height:100%;display:block;touch-action:none;user-select:none}#intro,#hud,#signal,#toast,.routeline{pointer-events:none;position:absolute}#intro{inset:8% 5% auto;text-align:center;color:var(--cream)}#intro h2{font-size:clamp(38px,6vh,59px);line-height:.89;margin:14px 0}h2 strong{font-size:1.44em}.console{position:relative;border-top:3px solid var(--dark);padding:12px 20px 15px;text-align:center;background:var(--cream)}.eyebrow{color:#43704d}.eyebrow i{background:#85b458;width:4px;height:4px;vertical-align:middle;margin:0 4px}.console p{font-size:14px;line-height:1.3;margin:6px 0 10px}.cta{display:block;width:100%;min-height:40px;background:var(--lime);border:2px solid var(--dark);border-radius:9px;color:var(--dark);font-weight:900;box-shadow:0 3px var(--dark)}.cta:active{transform:translateY(2px);box-shadow:0 1px var(--dark)}.console a{display:inline-block;color:var(--green);margin-top:12px;font-size:13px}footer{justify-content:space-between;padding:10px 0 14px;color:#d5edcb}footer a{font-size:12px;color:inherit}#hud{top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:start;gap:10px}.hudleft,.clock{background:#093b2af2;color:var(--cream);padding:8px 12px;border:1px solid #d1efaf;border-radius:10px}.hudleft{display:grid;grid-template-columns:78px auto;align-items:center;gap:2px 8px}.hudleft small{grid-column:span 2}#hud small{font-size:9px;color:#daeda9;letter-spacing:1.2px}.meter{height:10px;background:#39694e;border-radius:8px;position:relative}.meter i,.routeline i{height:100%;background:#fffae0;display:block;border-radius:inherit}.meter b{position:absolute;left:80%;width:2px;height:16px;top:-3px;background:#fce036}.clock{text-align:right}.clock strong{display:block}.routeline{bottom:0;left:0;width:100%;height:4px;background:#416b38}.routeline i{background:#f6ff28}#signal,#toast{left:50%;top:31%;transform:translate(-50%,-50%) rotate(-3deg);font:1000 24px Arial;color:#fff8d9;text-shadow:2px 3px #153827;white-space:nowrap}#signal{font-size:55px}#toast{background:#073c29e8;color:#fcffc8;border-radius:6px;padding:5px 10px;top:51%;font-size:17px;text-shadow:none}#toast:empty{display:none}article[data-mode=run] .console{min-height:68px}article[data-mode=end] .viewport{height:clamp(285px,54svh,506px)}
@media(max-width:700px){.shell{width:min(100%,490px)}header{height:54px;padding:0 14px;gap:10px}.brand{transform:scale(.82);transform-origin:left center;margin-right:-18px}.edition{font-size:8px;letter-spacing:1px}main{display:block;margin:0}aside{display:none}article{max-width:none;border:0;border-radius:0;box-shadow:none}.viewport{height:calc(100svh - 207px);min-height:260px;max-height:780px}.console{padding:10px 16px 13px}.console p{font-size:13px}footer{padding:9px 14px}footer span{font-size:8px}.cta{min-height:40px}article[data-mode=run] .viewport,article[data-mode=count] .viewport{height:calc(100svh - 159px)}article[data-mode=end] .viewport{height:calc(100svh - 238px);min-height:220px}#intro h2{font-size:clamp(32px,6vh,55px)}}
@media(min-width:701px){main{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:8%}h1{font-size:clamp(56px,6vw,83px)}}