:root{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#fcf6db;background:#182a35;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:repeating-linear-gradient(0deg,transparent 0 3px,#ffffff02 3px 4px)}main{max-width:490px;margin:auto;padding:22px 16px max(18px,env(safe-area-inset-bottom))}header{position:relative;margin-bottom:20px}.badge{font-size:12px;letter-spacing:3px;color:#a5c3c6}h1{font-size:clamp(30px,9vw,43px);letter-spacing:-2px;margin:6px 0 0;line-height:1}h1 span{color:#ffbf43;margin-left:9px}h1 i{font-style:normal;font-size:30px;margin-left:10px}.cabinet{border:4px solid #0b171e;border-radius:12px;overflow:hidden;box-shadow:0 8px 0 #0b171e;background:#244451}.scoreboard{display:flex;justify-content:space-between;padding:15px 17px;border-bottom:4px solid #0b171e;font-size:12px;letter-spacing:1px;color:#c2d6d2}.scoreboard strong{display:block;font-size:25px;color:#fff6d9;margin-top:5px}.scoreboard div:last-child{text-align:right}.scoreboard div:last-child strong{font-size:21px;color:#ff7971}.screen{position:relative;background:#fffbed;aspect-ratio:390/380;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none;image-rendering:pixelated}#overlay{position:absolute;inset:0;display:grid;place-items:center;background:#fffbedf7;color:#182a35;padding:14px}.menu{text-align:center;width:100%;max-width:310px}#eyebrow{font-size:12px;letter-spacing:1px;color:#586b63}h2{font-size:31px;margin:8px 0}p{font-size:15px;line-height:1.5;margin:10px 0}fieldset{border:0;padding:0;margin:17px 0 13px;display:flex;gap:10px}legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}label{flex:1;position:relative;cursor:pointer}input{position:absolute;opacity:0}label span{display:block;border:2px solid #bbc4b4;padding:10px 5px;border-radius:5px;font-weight:900;font-size:16px}label small{display:block;font-size:12px;font-weight:400;margin-top:5px}input:checked+span{background:#dcebc4;border-color:#315c3f;box-shadow:0 3px 0 #315c3f}input:focus-visible+span{outline:3px solid #ed9133;outline-offset:3px}button{font:900 17px ui-monospace,monospace;cursor:pointer;touch-action:manipulation}#start{width:100%;border:2px solid #172e22;border-radius:5px;padding:13px;background:#315c3f;color:#fffbed;box-shadow:0 4px 0 #172e22}.small{font-size:11px;color:#61705f;margin-top:14px}#duck{width:100%;padding:19px;border:0;border-top:4px solid #0b171e;color:#182a35;background:#ffbf43;letter-spacing:1px;touch-action:none}#duck span{margin-left:16px}#duck:active{background:#eda526}button:disabled{cursor:default;opacity:.65}#pause{position:absolute;right:12px;top:12px;border:2px solid #829481;background:#fffbed;color:#244451;border-radius:5px;width:44px;height:40px}#notice{position:absolute;top:60px;left:0;right:0;text-align:center;color:#315c3f;font-size:20px;font-weight:900;pointer-events:none}footer{text-align:center;margin-top:23px}footer p{font-size:14px}footer small{font-size:12px;line-height:1.6;color:#aac0c5}[hidden]{display:none!important}@media(max-height:740px){main{padding-top:12px;max-width:425px}header{margin-bottom:12px}.screen{aspect-ratio:390/345}footer{margin-top:16px}#duck{padding:14px}h2{font-size:26px}fieldset{margin:10px 0}.small{margin-bottom:0}}

h1{font-size:clamp(29px,8vw,38px);letter-spacing:-1px;line-height:1.1}h1 span{display:block;margin:3px 0 0}

#modes{gap:7px}#modes label{min-width:0}#modes label span{font-size:14px}#modes label small{font-size:11px}