:root{color-scheme:dark;--bg:#102f36;--card:#1a4047;--ink:#f6f4e9;--muted:#a8c4c6;--accent:#ffbd69;--mint:#83dbc8}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#21515a,var(--bg) 65%);color:var(--ink);font-family:system-ui,-apple-system,sans-serif;min-height:100svh}main{max-width:640px;margin:auto;padding:calc(22px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom))}header{text-align:center;margin-bottom:24px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:3px;color:var(--mint)}h1{font-size:22px;line-height:1.5;letter-spacing:1px;margin:8px 0}h1 span{font-size:clamp(22px,6vw,34px)}h2{font-size:23px}button{font:inherit;color:var(--ink);background:var(--card);border:1px solid #ffffff20;border-radius:14px;min-height:48px;padding:12px 18px;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:var(--accent);color:#19343a;font-weight:900;border:0}section>button{width:100%;margin-top:12px}.row{display:flex;gap:12px;margin-top:12px}.row>*{flex:1}.hero{text-align:center;padding:22px 0 36px}.hero p{font-weight:700}.hero small,.hint,footer{color:var(--muted);font-size:12px;line-height:1.8}.whistle-icon{display:grid;place-items:center;width:114px;height:114px;border-radius:38px;background:var(--mint);color:var(--bg);font-size:80px;margin:auto;transform:rotate(-8deg);box-shadow:9px 12px 0 #0002}#levels{display:grid;gap:10px}.level{text-align:left;display:flex;justify-content:space-between;align-items:center;gap:8px}.level strong{display:block}.level small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.badge{font-size:11px;color:var(--accent);white-space:nowrap}.game-top,.stats{display:flex;align-items:center;justify-content:space-between}.game-top small{display:block;color:var(--muted);margin-top:4px}.game-top button{min-width:48px}.stats{margin:20px 0 12px;font-size:12px;color:var(--muted)}.stats b{color:var(--ink);font-size:20px;margin-left:6px}.score-wrap{position:relative;background:#faf7ee;border-radius:18px;overflow:hidden;border:1px solid #ffffff30}canvas{display:block;width:100%;height:190px}.staff-label{position:absolute;top:13px;left:12px;font-size:11px;font-weight:900;color:#61767a;pointer-events:none}.beats{display:flex;justify-content:center;gap:10px;margin:18px 0 0}.beats i{width:10px;height:10px;border-radius:50%;background:#ffffff25}.beats i.active{background:var(--accent);box-shadow:0 0 15px #ffbd6970}.feedback{height:48px;display:grid;place-items:center;font-size:20px;font-weight:800;color:var(--accent)}progress{appearance:none;width:100%;height:4px;border:0;background:#ffffff15;border-radius:3px}progress::-webkit-progress-bar{background:#ffffff15}progress::-webkit-progress-value{background:var(--mint)}progress::-moz-progress-bar{background:var(--mint)}.pad{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:180px;margin-top:22px;border-radius:32px;background:linear-gradient(135deg,#75cfbd,#a1ecdc);border:0;color:#133b3c;box-shadow:0 8px 0 #397f75;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.pad.pressed{transform:translateY(6px);box-shadow:0 2px 0 #397f75;background:var(--accent)}.pad-note{font-size:58px;line-height:1}.pad strong{font-size:22px;margin-top:5px}.pad small{font-size:11px;margin-top:8px}.hint{text-align:center}.result-score{font-size:68px;font-weight:900;color:var(--accent)}.detail{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.detail div{padding:14px;background:var(--card);border-radius:12px;font-size:12px}.detail b{display:block;font-size:24px;margin-top:4px}footer{text-align:center;margin-top:30px}footer a{color:var(--mint);font-size:13px;text-decoration:none}footer p{font-size:10px}dialog{background:var(--bg);color:var(--ink);border:1px solid #ffffff30;border-radius:20px;width:min(90vw,440px);max-height:85svh;padding:24px}dialog::backdrop{background:#0009}dialog p{font-size:13px;line-height:1.8}dialog button{width:100%;margin-top:10px}label{display:block;margin:22px 0;font-size:14px}input[type=range]{display:block;width:100%;margin-top:14px;accent-color:var(--accent)}output{float:right;color:var(--accent)}[hidden]{display:none!important}@media(max-height:750px){main{padding-top:calc(10px + env(safe-area-inset-top))}body:has(#game:not([hidden])) header{margin-bottom:10px}body:has(#game:not([hidden])) h1{font-size:14px;margin:2px 0}body:has(#game:not([hidden])) h1 br{display:none}body:has(#game:not([hidden])) h1 span{font-size:18px}canvas{height:160px}.pad{height:140px;margin-top:14px}footer{margin-top:18px}}@media(orientation:landscape) and (max-height:550px){main{max-width:950px}body:has(#game:not([hidden])) header{display:none}#game:not([hidden]){display:grid;grid-template-columns:1fr 230px;gap:8px 18px}.game-top,.stats,.score-wrap,.beats,.feedback,progress{grid-column:1}.pad{grid-column:2;grid-row:1/7;height:100%;margin:0}.hint{grid-column:1/3;margin:0}canvas{height:140px}.stats,.beats{margin:0}.feedback{height:30px}footer{margin-top:12px}}
:root body{touch-action:manipulation}
#game,#game *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pad *{pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}