@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;background:#101b27;color:#f7f4e9}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 46%,#1e3841 0,transparent 57%);min-height:100vh}main{max-width:1100px;margin:auto;padding:28px 32px 24px}header{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:11px;align-items:center;color:inherit;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;letter-spacing:1px}.logo{background:#f6c65b;color:#152332;border-radius:10px;width:34px;height:34px;text-align:center;font-size:28px;line-height:32px}.tag{font-size:9px;letter-spacing:2px;border:1px solid #41505b;padding:4px 6px;border-radius:4px;color:#a7b4bb}button{font:inherit;cursor:pointer}button:focus-visible,canvas:focus-visible,a:focus-visible{outline:3px solid #f6c65b;outline-offset:4px}#sound{background:transparent;border:1px solid #40505c;border-radius:20px;padding:8px 15px;color:#b6c3cb;font-size:12px}.intro{text-align:center;margin:40px 0 27px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#9cb4b8}.eyebrow span,.bar i{display:inline-block;width:6px;height:6px;background:#a8d9ad;border-radius:50%;margin-right:7px}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(34px,5vw,48px);letter-spacing:-2px;line-height:1.06;margin:15px 0 14px}h1 br{display:none}.intro p{font-size:13px;color:#9badb8}.machine{max-width:432px;margin:auto;border:1px solid #48606a;border-radius:15px;overflow:hidden;box-shadow:0 22px 65px #030d1866}.bar{height:40px;background:#223541;display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-size:9px;letter-spacing:1.6px;color:#b6c6cc}.bar i{width:5px;height:5px}#pause{border:0;background:none;color:#d4dfe0;font-size:11px;letter-spacing:0}#pause:disabled{opacity:.35;cursor:default}.stage{position:relative;aspect-ratio:480/640;background:#86cbd3;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}#overlay{position:absolute;inset:0;display:flex;align-items:center;flex-direction:column;justify-content:center;background:linear-gradient(#9cd9dc22,#d2ecd344);color:#173b41;text-align:center;padding:22px;pointer-events:none}#overlay[hidden]{display:none}.badge{font-size:9px;letter-spacing:2px;font-weight:700;padding:7px 10px;border:1px solid #3d74734d;border-radius:20px;background:#e6f2d787}h2{font-family:'Space Grotesk',sans-serif;font-size:42px;letter-spacing:-1.8px;line-height:1.04;margin:18px 0 10px}#message{font-size:13px;line-height:1.6;margin:0 0 23px}.play{pointer-events:auto;background:#f6c65b;color:#253829;font-size:14px;font-weight:700;border:1px solid #886e30;border-bottom:4px solid #ab8334;border-radius:9px;padding:14px 22px;min-width:180px;box-shadow:0 5px 0 #26453b12}.play:hover{background:#ffda7c;transform:translateY(-1px)}.play span{margin-left:30px}.hint{font-size:8px;letter-spacing:2px;margin-top:17px;font-weight:700;opacity:.65}#score{position:absolute;top:25px;left:0;right:0;text-align:center;font-family:'Space Grotesk',sans-serif;font-size:52px;color:#fff;font-weight:700;text-shadow:0 3px 0 #315f6777;pointer-events:none}.bottom{background:#223541;padding:17px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#9db0b9}.bottom strong{color:#f6c65b;font-size:18px;margin-left:10px;vertical-align:middle}.best-caption{font-size:10px;letter-spacing:0}.best-caption span{color:#f6c65b;margin-left:8px}footer{max-width:432px;margin:20px auto 0;display:flex;justify-content:space-between;font-size:10px;color:#8297a3}kbd{border:1px solid #3f5260;border-bottom:2px solid #3f5260;border-radius:4px;padding:3px 5px;font:8px 'DM Sans',sans-serif;color:#b3c2cb}.divider{margin:0 8px;color:#405562}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:600px){main{padding:18px 16px}.intro{margin:28px 0 20px}h1{font-size:34px}h1 br{display:block}.tag{display:none}.intro p{font-size:11px}.machine{max-width:360px}footer{max-width:360px;font-size:9px}.best-caption{font-size:9px}}@media(max-height:820px) and (min-width:601px){.intro{margin:22px 0 18px}h1{font-size:36px}.machine{max-width:345px}footer{max-width:345px}}