:root{color-scheme:dark;--bg:#111d29;--ink:#eef3ed;--muted:#84949b;--lime:#c5ed75}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans','Noto Sans SC',sans-serif}button{font:inherit}.shell{max-width:1440px;margin:auto;padding:0 6%}.topbar{height:90px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2c3b45}.brand{display:flex;align-items:center;gap:11px;color:#f3f5ed;text-decoration:none;font-weight:900;font-size:19px;line-height:1.05}.brand-icon{background:var(--lime);color:#182a29;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:25px}.accent,.intro h1 span,.guide h3 span{color:var(--lime)}.brand small{display:block;font-size:8px;letter-spacing:2.1px;color:#819291;margin-top:6px}.top-right{display:flex;align-items:center;gap:28px;font-size:11px;color:#819291;letter-spacing:.08em}.weather{color:#c7d9bf;background:#253b39;border:1px solid #36534a;border-radius:30px;padding:8px 12px}.weather i,.live-dot,.game-bottom i{display:inline-block;width:6px;height:6px;background:#b9ed7b;border-radius:50%;margin-right:5px}.intro{display:flex;justify-content:space-between;align-items:end;padding:51px 0 29px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.17em;color:#b8d99b}.eyebrow span{display:inline-block;width:25px;height:1px;background:#b8d99b;vertical-align:middle;margin-right:9px}.intro h1{font-size:clamp(30px,3.7vw,52px);letter-spacing:-.05em;margin:13px 0 9px;font-weight:900}.intro p{font-size:13px;color:#9aabae;margin:0}.record{text-align:right;border-left:1px solid #35444b;padding-left:28px;display:grid;gap:3px}.record span{font-size:11px;color:#9fb0ad}.record strong{font-size:29px;letter-spacing:.05em;line-height:1.2}.record small{color:#687d80;font-size:9px;letter-spacing:.16em}.game-wrap{border:1px solid #43555a;border-radius:12px;overflow:hidden;background:#1a2933;box-shadow:0 22px 70px #07101855}.game-top,.game-bottom{height:39px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:10px;letter-spacing:.12em;font-weight:700;color:#98aaa9}.game-top{background:#263941}.divider{color:#586d70;margin:0 8px}.game-top-right{color:#a7b9b1}.stage{position:relative;overflow:hidden;touch-action:none;background:#52696a;aspect-ratio:1200/650}canvas{display:block;width:100%;height:100%}.hud{position:absolute;top:6%;left:4%;display:flex;gap:34px;text-shadow:0 2px 5px #243638;pointer-events:none}.hud div{display:grid;gap:5px}.hud span{font-size:10px;letter-spacing:.1em;color:#e0e8df}.hud strong{font-size:23px;letter-spacing:.05em}.hud b{font:inherit}.hud small{font-size:11px}.overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(90deg,#142b31bb,#263c39aa,#142b31bb)}.overlay-content{padding:16px}.pill{display:inline-block;border:1px solid #d3edb261;border-radius:30px;padding:7px 12px;color:#d4f2b0;font-size:9px;font-weight:700;letter-spacing:.18em}.overlay h2{font-size:clamp(28px,4vw,55px);letter-spacing:-.05em;margin:15px 0 9px}.overlay h2 span{color:#cef189}.overlay p{color:#e0e9dc;font-size:13px;line-height:1.8;margin:0 0 22px}.primary{border:0;border-radius:7px;background:var(--lime);color:#182920;font-weight:900;padding:14px 20px;min-width:164px;cursor:pointer;box-shadow:0 5px 0 #80a84e;transition:transform .15s}.primary:hover{transform:translateY(-2px)}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #80a84e}.primary span{margin-left:24px}.start-hint{font-size:10px;color:#c6d5cd;margin-top:19px}.start-hint kbd{font-size:9px;background:#ffffff24;border:1px solid #ffffff45;border-radius:3px;padding:3px 5px}.hidden{display:none!important}.final-score{display:grid;gap:2px;margin:-8px 0 17px}.final-score span,.final-score small{font-size:10px;color:#d2e1d4}.final-score strong{font-size:34px}.touch-controls{display:none;position:absolute;bottom:5%;right:4%;gap:10px}.touch-controls button{width:58px;height:58px;border-radius:50%;border:1px solid #d9eed5aa;background:#203c3bbd;color:white;font-size:22px;line-height:1;touch-action:none}.touch-controls span{display:block;font-size:9px;margin-top:3px}.game-bottom{height:42px;background:#1c2d35;letter-spacing:.05em}.game-bottom span:last-child{font-size:9px;color:#667d7f}.guide{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:20px;align-items:center;padding:42px 0 43px;border-bottom:1px solid #2b3b44}.guide-heading>span{font-size:9px;color:#a9cf94;letter-spacing:.18em;font-weight:700}.guide h3{font-size:20px;line-height:1.4;margin:8px 0 0}.guide-item{display:flex;gap:15px;align-items:center;border-left:1px solid #33444a;padding-left:22px}.key-icons{display:flex;gap:4px}.key-icons kbd,.swipe-icon{min-width:35px;height:35px;display:grid;place-items:center;background:#2b3d43;border:1px solid #536563;border-bottom:3px solid #536563;border-radius:5px;color:#d8e9d8;font-size:17px}.key-icons .space{font-size:8px;min-width:52px}.swipe-icon{font-size:23px}.guide-item strong{font-size:12px}.guide-item p{font-size:11px;color:#819497;margin:5px 0 0;white-space:nowrap}footer{display:flex;justify-content:space-between;padding:22px 0 30px;color:#6e8385;font-size:10px;letter-spacing:.08em}@media(max-width:800px){.shell{padding:0 4%}.topbar{height:72px}.top-note{display:none}.intro{padding:34px 0 24px}.intro h1{font-size:32px}.record strong{font-size:22px}.guide{grid-template-columns:1fr 1fr;gap:25px}.guide-item{padding-left:14px}.stage{aspect-ratio:1.45}.stage canvas{object-fit:fill}.touch-controls{display:flex}.hud{gap:18px}.hud strong{font-size:17px}.hud span{font-size:9px}}@media(max-width:500px){.brand{font-size:16px}.weather{font-size:9px}.intro{align-items:start}.intro h1{font-size:26px;line-height:1.3}.intro p{font-size:11px;max-width:240px;line-height:1.6}.record{padding-left:12px}.record strong{font-size:18px}.record span{font-size:9px}.record small{font-size:7px}.game-top,.game-bottom{padding:0 10px;font-size:8px}.game-bottom span:last-child{font-size:7px}.stage{aspect-ratio:1.18}.overlay h2{font-size:30px;margin:9px 0}.overlay p{font-size:11px;line-height:1.5;margin-bottom:12px}.pill{font-size:8px;padding:5px 9px}.primary{padding:10px 15px}.start-hint{margin-top:12px}.hud{top:4%;left:4%;gap:12px}.hud strong{font-size:14px}.hud span{font-size:8px}.guide{padding:30px 0}.guide-heading h3{font-size:17px}.guide-item{gap:9px}.guide-item p{font-size:9px;white-space:normal}.key-icons kbd,.swipe-icon{min-width:29px;height:30px}.key-icons .space{min-width:40px;font-size:7px}footer{font-size:8px}}