@import url('../platform/nav.css');
:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#243e35;background:#f5f0e5;font-synthesis:none;--green:#285c45;--ink:#243e35;--dim:#6d7567;--line:#dcd9c9;--gold:#b87532}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b87532;outline-offset:4px}a{color:inherit}.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px max(20px,calc((100vw - 1060px)/2));border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:14px;font-weight:800;white-space:nowrap}.brand span{font-size:9px;letter-spacing:2px;margin-left:6px}.top-actions{display:flex;align-items:center;gap:10px}.top button{min-height:40px;border:1px solid var(--line);border-radius:30px;background:transparent;padding:8px 13px;font-size:12px}.top .coin{background:#ede2c4;border-color:#e8d6a8;font-weight:700}#app{width:min(100% - 32px,620px);margin:48px auto 60px;min-height:65vh}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--dim);text-transform:uppercase}.hero{text-align:center}.hero h1{font-size:clamp(54px,11vw,80px);letter-spacing:-4px;line-height:1.1;margin:20px 0 18px;font-weight:850}.hero h1 span{display:block;font-size:15px;letter-spacing:2px;font-weight:400;margin-top:20px}.hero p{line-height:1.8}.meta{display:flex;justify-content:center;gap:12px;align-items:center;font-size:12px;color:var(--dim);margin:18px 0}.tag{font-size:11px;background:#e9dfc8;border-radius:20px;padding:6px 11px}.surface{background:#fcfaf5;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 4px 0 #e9e4d8}.player{text-align:center;padding:22px 0 26px}.dial{position:relative;border:0;border-radius:50%;height:128px;width:128px;background:var(--green);color:#fff;box-shadow:0 0 0 10px #f0eee3,0 0 0 11px #d7dfd0;font-size:37px;display:grid;place-items:center;margin:14px auto 28px}.dial.is-playing{animation:breath 1.4s ease-in-out infinite}.dial:after{content:"";position:absolute;inset:12px;border:1px solid #8fa994;border-radius:50%}.duration{font-size:14px;color:var(--dim)}.duration strong{color:var(--ink);font-variant-numeric:tabular-nums;font-size:24px;margin-right:5px}.ticks{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:24px 0 8px}.tick{height:7px;background:#e9e5db;border-radius:5px}.tick.current{background:#ba8d52}.tick.wrong{background:#b96850}.tick.skip{background:#beb7a7}.tick.correct{background:#398660}.steps{display:flex;justify-content:space-between;font-size:10px;color:var(--dim)}.search{position:relative;margin-top:28px}.search label{display:block;font-size:12px;margin-bottom:8px;color:var(--dim)}.search input{width:100%;padding:15px 45px 15px 14px;border:1px solid #b8c3b4;border-radius:9px;background:white;font-size:16px;color:var(--ink)}.search-icon{position:absolute;right:15px;top:38px;color:var(--dim);pointer-events:none}.suggestions{list-style:none;margin:4px 0 0;padding:0;background:white;border:1px solid var(--line);border-radius:9px;max-height:min(240px,35dvh);overflow:auto}.suggestions:empty{display:none}.suggestions button{display:block;text-align:left;width:100%;border:0;border-bottom:1px solid #eee;background:none;padding:13px 14px;min-height:52px}.suggestions button:hover{background:#f1f4ed}.suggestions small{display:block;color:var(--dim);font-size:11px;margin-top:4px}.selected{border:1px solid #78957a;background:#edf2e8;border-radius:8px;padding:12px 14px;margin-top:12px;display:flex;justify-content:space-between;align-items:center;font-size:14px}.selected small{display:block;color:var(--dim);font-size:11px;margin-top:3px}.selected button{border:0;background:none;padding:8px}.actions{display:flex;gap:10px;margin-top:15px}.actions button,.primary,.secondary{min-height:47px;border-radius:9px;padding:12px 18px;font-size:14px;font-weight:650}.primary{border:1px solid var(--green);background:var(--green);color:#fff;flex:1}.secondary{border:1px solid #cacdbc;background:transparent}.actions .secondary{flex:1}button.wide{display:block;width:100%;margin-top:18px}.fine{font-size:11px!important;color:var(--dim);line-height:1.7}.answers{list-style:none;padding:0;margin:24px 0 0}.answers li{padding:11px 0;border-top:1px solid var(--line);display:flex;gap:10px;font-size:13px;align-items:center}.answer-num{color:var(--dim);font-size:11px;width:18px}.answers small{margin-left:auto;font-size:11px;color:var(--dim)}.message{font-size:12px;color:var(--gold);min-height:20px;margin-top:12px;line-height:1.6}.score{font-size:105px;font-weight:800;letter-spacing:-6px;margin:30px 0 0;line-height:1}.score small{font-size:19px;letter-spacing:0;color:var(--dim)}.result-title{font-size:25px;margin:26px 0 8px}.result-sub{font-size:12px;color:var(--dim)}.result .dial{width:64px;height:64px;font-size:20px;margin-top:24px;margin-bottom:20px}.summary{display:flex;gap:20px;justify-content:center;padding:18px 0;font-size:12px;color:var(--dim)}.summary strong{display:block;font-size:20px;color:var(--ink);margin-top:5px}.earned{color:var(--gold);font-size:14px;animation:appear .4s ease}.result h2{font-size:18px}.result details{border-top:1px solid var(--line);padding:18px 0;text-align:left;font-size:12px}.result details summary{cursor:pointer}.result details p{line-height:1.7}.calendar{padding:0;list-style:none}.calendar li{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:17px 0;font-size:13px}.calendar button{border:1px solid var(--line);border-radius:7px;background:transparent;padding:10px;font-size:12px}.calendar small{display:block;color:var(--dim);font-size:11px;margin-top:5px}.stats-chart{display:flex;align-items:end;gap:8px;height:100px;margin:18px 0 26px}.stats-bar{flex:1;background:#a9c1a6;min-height:2px;position:relative}.stats-bar span{position:absolute;font-size:10px;bottom:-18px;left:50%;transform:translateX(-50%)}.help li{line-height:1.8;margin:10px 0}.modal{position:fixed;inset:0;z-index:100;background:#182d2499;display:grid;place-items:center;padding:18px}.modal-box{max-width:540px;max-height:88dvh;overflow:auto;background:#fcfaf5;padding:26px;border-radius:18px;box-shadow:0 20px 90px #0003}.modal-box h2{margin-top:0}.modal-box p{font-size:13px;line-height:1.8}.modal-box a{word-break:break-word}.modal-box button{min-height:44px}.error{text-align:center;padding:30px}.error h2{font-size:22px}.error p{font-size:13px;line-height:1.8}.preview-banner{padding:12px 15px;border:1px solid #d8bc83;border-radius:9px;background:#f7ecd3;font-size:12px;line-height:1.7;margin:22px 0}.stats-note{font-size:11px;color:var(--dim)}footer{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;padding:24px 18px 40px;border-top:1px solid var(--line);font-size:11px;color:var(--dim)}footer a{text-decoration:none}footer button{padding:0;border:0;background:none;font-size:11px;color:inherit}#notice{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:90vw;background:#243e35;color:#fff;border-radius:9px;padding:12px 20px;font-size:13px;z-index:200;box-shadow:0 4px 20px #0003}#notice:empty{display:none}@keyframes breath{50%{box-shadow:0 0 0 16px #e1e8da,0 0 0 17px #c6d4c0}}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:540px){.top{padding:16px}.brand span{display:none}.top-actions{gap:6px}#app{margin-top:30px}.surface{padding:20px}.hero h1{font-size:62px}.dial{height:112px;width:112px}.player{padding-top:12px}.score{font-size:86px}.actions button{font-size:13px;padding:12px 10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

@media(max-width:600px){body.typing #app{margin-top:12px}body.typing .hero{display:none}body.typing .meta{margin:8px 0}body.typing .player{padding:0 0 8px}body.typing .dial{width:62px;height:62px;font-size:20px;margin:10px auto 18px}body.typing .ticks{margin-top:12px}body.typing .search{margin-top:14px}body.typing .suggestions{max-height:150px}}