*{box-sizing:border-box}body{margin:0;background:#0d282d;color:#f4eedc;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif}main{max-width:1060px;padding:30px 28px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.eyebrow{font-size:9px;letter-spacing:3px;color:#adc3b3;margin:0 0 9px;font-weight:700}h1{font:normal 47px/1.1 Georgia,serif;margin:0}.subtitle{margin:7px 0 0;font:italic 17px Georgia,serif;color:#b9cbb8}#ribbons{color:#dcb876;font-size:12px;white-space:nowrap}nav{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}button{font:600 13px system-ui;cursor:pointer;border-radius:8px;border:1px solid #5f7f75;color:#eee8d5;background:#24484a;padding:12px 16px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #f0c77b;outline-offset:3px}button:disabled{opacity:.5;cursor:default}nav button{text-align:left;background:#17383c;color:#adcbc0}nav button.active{background:#2c524e;border-color:#e3be79;color:#fff0d0}nav small{display:block;font-size:10px;font-weight:400;margin-top:3px}.game{border:1px solid #56766a;border-radius:15px;overflow:hidden;background:#173b40;box-shadow:0 15px 45px #061b2450}.topline{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 0;gap:20px}.topline h2{font:normal 23px Georgia,serif;margin:0 0 5px}.topline p{font-size:11px;color:#b6c9b9;margin:0}#charge{font-size:12px;white-space:nowrap;color:#d4b786}canvas{display:block;width:100%;height:auto}.readout{display:flex;justify-content:space-between;padding:0 22px 18px;font-size:12px;font-weight:700;letter-spacing:1px}#phase[data-dark=true]{color:#9ed9e1}#counts{letter-spacing:0;color:#f0d195}.lesson{display:grid;grid-template-columns:25px 1fr 25px 1fr;gap:12px;align-items:center;padding:18px 0}.lesson p{font-size:12px;line-height:1.5;color:#b9c9bb;margin:0}.lesson b{display:block;color:#f1e4c4;font-weight:600}.number{background:#375750;color:#e7ca87;width:24px;height:24px;border-radius:50%;text-align:center;line-height:24px;font-size:11px}.control{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:center;border-top:1px solid #35544f;padding:20px 0}.buttons{display:flex;gap:9px}#hold{background:#e5bb74;color:#213932;border-color:#e5bb74;touch-action:none;user-select:none;flex:1;box-shadow:0 4px 0 #9a793f;padding:15px 14px}#hold.held{background:#467d84;color:#eaf1df;transform:translateY(3px);box-shadow:0 1px 0 #2f5a60}.buttons #pulse{flex:1;background:#e9e4cf;color:#24443d;border-color:#e9e4cf}.bar{height:10px;position:relative;border-radius:10px;background:#25494d;overflow:hidden}.bar span{position:absolute;left:25%;width:31%;height:100%;background:#a3c19c35;border-left:1px solid #8eaf8b;border-right:1px solid #8eaf8b}#duration{height:100%;width:0;position:absolute;background:#e6bd78;border-radius:10px}.meter p{font-size:10px;color:#adc5b7;margin:9px 0 0}#result{background:#e8dfc6;color:#24433a;padding:22px;border-radius:12px;margin:0 0 16px}#result h2{font:normal 28px Georgia,serif;margin:0 0 7px}#result p{font-size:13px;line-height:1.55;margin:0 0 14px}#result button{background:#31564b;color:#fff1cf}.utility{display:flex;align-items:center;gap:12px;font-size:10px;color:#9bb8aa;padding:4px 0 22px;flex-wrap:wrap}.utility button{font-size:10px;padding:7px 11px;background:transparent}.utility #best{margin-left:auto}kbd{font:inherit;border:1px solid #6b8b7b;border-radius:3px;padding:1px 4px}details{border-top:1px solid #35534e;padding:14px 0;font-size:11px;line-height:1.7;color:#a9bfb1}summary{cursor:pointer}a{color:#dcc38d}details p{max-width:830px}@media(max-width:620px){main{padding:20px 14px}h1{font-size:35px}.eyebrow{font-size:7px;letter-spacing:1.8px}.subtitle{font-size:15px}header{gap:10px}#ribbons{font-size:10px}nav{gap:5px}nav button{font-size:11px;padding:10px}nav small{font-size:9px}.topline{padding:13px 14px 0;gap:10px}.topline h2{font-size:19px}.topline p{font-size:9px}#charge{font-size:10px}.readout{font-size:9px;padding:0 14px 13px}.lesson{grid-template-columns:24px 1fr;gap:10px;padding:15px 0}.lesson p{font-size:11px}.lesson b{display:inline}.control{grid-template-columns:1fr;gap:17px;padding:16px 0}.buttons button{font-size:12px}#result h2{font-size:24px}.utility{gap:8px}}