:root{color-scheme:light;--ink:#263a32;--paper:#f5edd7;--red:#ac4d35}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#aac7cf;color:var(--ink);font-family:Arial,sans-serif}main{height:100svh;min-height:250px;position:relative}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}header{z-index:6;position:absolute;top:max(20px,env(safe-area-inset-top));left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}nav{display:flex;gap:8px;pointer-events:auto}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}nav button{width:42px;height:42px;padding:10px;border-radius:50%;border:1px solid #263a3260;background:#f5edd7c9;color:var(--ink);display:grid;place-items:center;font-weight:700;box-shadow:0 2px 5px #263a3215}nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}button:hover{filter:brightness(1.07)}button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:4px}button:disabled{opacity:.5;cursor:default}#overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;pointer-events:none}#overlay[hidden],.hud[hidden]{display:none}#start{pointer-events:auto;border:1px solid #263a3288;background:var(--paper);color:var(--ink);font-weight:700;font-size:19px;padding:16px 36px;box-shadow:4px 5px #263a32;transform:rotate(-2deg);min-width:160px}#start:active{translate:3px 3px;box-shadow:1px 2px #263a32}#result{font:700 clamp(35px,6vw,75px) Georgia,serif;color:var(--ink);text-shadow:0 2px 12px var(--paper);background:#f5edd7dd;padding:12px 25px;transform:rotate(-2deg)}.hud{position:absolute;left:28px;right:28px;bottom:max(22px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;pointer-events:none;text-shadow:0 1px 4px var(--paper),0 1px 12px var(--paper);font:700 19px monospace}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width:600px){header{left:17px;right:17px;top:max(17px,env(safe-area-inset-top))}nav{gap:6px}nav button{width:36px;height:36px;padding:8px}nav svg{width:19px;height:19px}.hud{left:18px;right:18px;font-size:17px}#start{font-size:17px;padding:14px 28px}}@media(max-height:500px){header{top:12px;left:20px;right:20px}nav button{width:34px;height:34px;padding:7px}.hud{bottom:12px;font-size:16px}#start{padding:12px 25px;font-size:16px}#result{font-size:32px}}#overlay{inset:0;justify-content:flex-start;align-items:flex-start;padding:18vh 0 0 32%;gap:22px}#intro-title{font:950 clamp(54px,8vw,118px)/.85 Arial,sans-serif;letter-spacing:-5px;margin:0;color:var(--ink);text-shadow:2px 3px 0 #f5edd7a6;transform:rotate(-3deg)}#intro-title span{color:var(--red)}#intro-title[hidden]{display:none}main[data-state=end] #overlay{align-items:center;justify-content:center;padding:0}#start{background:#ad4d35;color:#fff4dc;border:0;box-shadow:3px 4px #263a32;font-size:18px}#pause-panel{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#1c302a66;backdrop-filter:blur(3px)}#pause-panel[hidden]{display:none}#pause-panel>div{background:var(--paper);padding:25px 35px;text-align:center;box-shadow:4px 5px #263a3266;border-radius:5px}#pause-panel h2{font:700 26px Georgia,serif;margin:0 0 20px}#resume{border:0;background:var(--ink);color:var(--paper);padding:12px 28px;font-weight:700;border-radius:3px}#remark,#radev-remark{position:absolute;z-index:2;max-width:210px;width:max-content;transform:translate(-50%,-100%) rotate(-2deg);font:italic 14px/1.3 Georgia,serif;text-align:center;padding:10px 13px;background:#fbf2dcef;color:var(--ink);box-shadow:2px 3px #263a3233;border-radius:3px;pointer-events:none}#remark:after,#radev-remark:after{content:"";position:absolute;bottom:-7px;left:50%;border-left:7px solid transparent;border-right:3px solid transparent;border-top:8px solid #fbf2dc}#remark[hidden],#radev-remark[hidden]{display:none}.hud{z-index:3;left:20px;right:20px;bottom:16px;justify-content:flex-end;gap:25px}@media(max-width:600px){#overlay{padding:17vh 0 0 8%;gap:22px}#intro-title{font-size:65px;letter-spacing:-4px}#start{font-size:16px;padding:13px 26px;min-width:140px}#remark,#radev-remark{font-size:12px;max-width:185px;padding:8px 11px}.hud{left:14px;right:14px;gap:12px;font-size:15px;bottom:13px}nav{position:relative;z-index:6}}@media(max-height:500px){#overlay{padding:19vh 0 0 37%;gap:16px}#intro-title{font-size:58px;letter-spacing:-3px}#start{padding:10px 23px;font-size:15px}.hud{bottom:10px}#remark,#radev-remark{font-size:12px}}.hud{justify-content:flex-end;gap:0}#tally{background:#f5edd7db;padding:7px 11px;border-radius:3px;font-variant-numeric:tabular-nums}#radev-remark{z-index:3;border:1px solid #574f3d3b;will-change:opacity}#tally{transition:background .2s}nav button[aria-pressed=true]{background:#263a32;color:#f5edd7}#rotate-panel{position:fixed;inset:0;z-index:100;background:#f5edd7;color:#263a32;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:30px;text-align:center;touch-action:none;outline:none}#rotate-panel[hidden]{display:none}#rotate-panel svg{display:block;flex:none;width:96px;height:96px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#rotate-panel h2{font-size:23px;margin:0;font-weight:700}