:root{color-scheme:light;--ink:#254636;--muted:#768477;--paper:#f4f3e9;--gold:#f2c357}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}.shell{max-width:1536px;margin:auto;padding:30px 48px 20px}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-family:Georgia,serif;font-size:32px;font-weight:bold;letter-spacing:-1px}.brand-icon{width:42px;height:42px;background:var(--gold);border:1px solid #dcae48;border-radius:50%;text-align:center;line-height:37px;font-size:31px;transform:rotate(-14deg)}.brand-sub{display:block;font-family:Arial,sans-serif;font-size:8px;letter-spacing:2.3px;margin-top:4px}.edition{font-size:12px;color:var(--muted)}.edition span{display:inline-block;width:6px;height:6px;background:#87a57c;border-radius:50%;margin-right:8px}.scores{display:flex;gap:34px}.scores>div{min-width:100px}.record{border-left:1px solid #d7ddcf;padding-left:30px}.label{display:block;font-size:9px;letter-spacing:1.7px;margin-bottom:7px;color:var(--muted)}.scores strong{font-size:25px;font-weight:500;font-variant-numeric:tabular-nums}.scores small{font-size:12px;color:var(--muted)}.game-wrap{position:relative;margin-top:23px;overflow:hidden;border-radius:18px;background:#234c39;box-shadow:0 12px 30px #243e2810;isolation:isolate}canvas{display:block;width:100%;aspect-ratio:1440/760;touch-action:none;outline:none}canvas:focus-visible{outline:2px solid var(--gold);outline-offset:-5px}.game-top,.game-bottom{position:absolute;z-index:3;left:30px;right:30px;display:flex;justify-content:space-between;pointer-events:none;font-size:9px;letter-spacing:1.8px;color:#d6e5c8}.game-top{top:24px}.game-top i{display:inline-block;width:5px;height:5px;background:#c4dc88;border-radius:50%;margin-right:8px}.game-bottom{bottom:22px;letter-spacing:.5px;font-size:11px;color:#d0dfbd}.sound-note{opacity:.6}.overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;background:linear-gradient(90deg,#173e2bde 0%,#183e2b8c 40%,transparent 75%);pointer-events:none}.intro-copy{padding:45px 0 45px 7%;pointer-events:auto;max-width:650px}.eyebrow{color:#cedaad;font-size:10px;letter-spacing:2.5px;margin-bottom:24px}h1{margin:0;color:#f8f5de;font-family:Georgia,'Times New Roman',serif;font-weight:normal;font-size:clamp(36px,4.4vw,68px);line-height:1.07;letter-spacing:-2px}h1 em{font-weight:normal;color:#f3cf70}#description{color:#d0dec6;font-size:14px;line-height:1.8;margin:24px 0 27px}button{font:inherit;cursor:pointer}#start{border:0;border-radius:7px;background:#f2c459;color:#2b442d;min-width:176px;padding:16px 21px;display:flex;justify-content:space-between;gap:28px;font-weight:bold;font-size:14px;box-shadow:0 3px 0 #b78d35;transition:background .15s,transform .15s}#start:hover{background:#ffda7b;transform:translateY(-1px)}button:focus-visible{outline:3px solid white;outline-offset:5px}.start-hint{font-size:11px;color:#b5c7aa;margin-top:18px}kbd{font-family:inherit;font-size:9px;letter-spacing:1px;padding:3px 6px;border:1px solid #9aaf8a80;border-radius:3px;margin-left:3px}.instructions{display:flex;align-items:center;gap:24px;padding:30px 4px 28px;border-bottom:1px solid #dce0d1}.keycap{padding:15px 17px;border:1px solid #cdd4c4;border-bottom-width:3px;border-radius:7px;white-space:nowrap;font-size:10px;letter-spacing:1px;min-width:112px;background:#f9f9f0}.keycap span{margin-left:18px;color:#899b79}.instruction-copy strong{font-size:13px;font-weight:500}.instruction-copy p{font-size:11px;color:var(--muted);margin:8px 0 0}.rhythm{margin-left:auto;display:flex;align-items:center}.rhythm span{border:1px solid #a9b89a;width:10px;height:10px;border-radius:50%}.rhythm span:nth-of-type(2){background:#e9bc59;border-color:#e9bc59}.rhythm i{width:22px;border-top:1px dashed #bac4ad}footer{display:flex;justify-content:space-between;padding-top:18px;font-size:10px;color:#8a9484}footer span:last-child{font-size:8px;letter-spacing:1.6px}[hidden]{display:none!important}details{padding:20px;font-size:12px}pre{white-space:pre-wrap}body.playing .overlay{display:none}body.ended .overlay{background:linear-gradient(90deg,#163b2bf5,#163b2b9a 65%,#163b2b30)}
@media(min-width:1700px){.shell{padding-top:50px}}@media(max-width:900px){.shell{padding:16px 20px}.edition{display:none}.topbar{height:66px}.game-wrap{margin-top:15px}.intro-copy{padding-left:6%}.eyebrow{margin-bottom:15px;font-size:8px}#description{margin:16px 0;font-size:12px}.start-hint{margin-top:13px}.instructions{gap:17px}.instruction-copy strong{font-size:12px}.rhythm{display:none}.game-top,.game-bottom{left:20px;right:20px}.sound-note{display:none}}
@media(max-width:600px){.shell{padding:10px 12px 16px}.topbar{gap:10px}.brand{font-size:25px;gap:7px}.brand-icon{width:33px;height:33px;font-size:25px;line-height:29px}.brand-sub{font-size:6px;letter-spacing:1.3px}.scores{gap:13px}.scores>div{min-width:52px}.record{padding-left:13px}.label{font-size:7px;letter-spacing:.8px}.scores strong{font-size:21px}.game-wrap{border-radius:12px}canvas{aspect-ratio:3/4}.game-top{top:18px;font-size:7px;letter-spacing:1px}.intro-copy{padding:30px 23px;align-self:flex-start;margin-top:58px}h1{font-size:43px}#description{font-size:12px}.eyebrow{font-size:8px}.overlay{background:linear-gradient(180deg,#183e2bdb,transparent 95%)}.game-bottom{bottom:18px;font-size:10px}.instructions{align-items:flex-start;padding:22px 0;gap:12px}.keycap{min-width:68px;padding:12px 8px;font-size:8px}.keycap span{display:none}.instruction-copy strong{font-size:11px;line-height:1.65}.instruction-copy p{font-size:10px;line-height:1.6}footer{font-size:9px}footer span:last-child{display:none}}
@media(max-height:540px) and (orientation:landscape){.shell{padding:8px 18px}.topbar{height:50px}.game-wrap{margin-top:8px}canvas{height:70vh;aspect-ratio:auto}.instructions{padding:15px 0}.intro-copy{padding:20px 6%}h1{font-size:36px}.eyebrow{margin-bottom:10px}#description{margin:10px 0;font-size:11px;line-height:1.5}#start{padding:10px 18px}.start-hint{margin-top:10px}.game-top{top:14px}.game-bottom{bottom:12px}}
@media(max-width:600px){h1{font-size:clamp(32px,10.7vw,43px)}}