:root{color-scheme:light;--bg:#E7DFD2;--text:#44382f;--muted:#6b5d50;--icon:#7a695a;--panel:#f2ebe1;--line:#cfc2b1;--accent:#995523;--switch-off:#b6a693;--knob:#fff9ef;--switch-on:#ac6b37;--selected-bg:#e7d3bb;--selected-text:#75431f;--hover:#e4d9ca;--toast:#d7c7b3;--backdrop:#30272255;font-family:'Segoe UI','Microsoft YaHei',sans-serif;font-synthesis:none}
:root[data-theme=dark]{color-scheme:dark;--bg:#302722;--text:#e7dfd2;--muted:#b3a496;--icon:#baa795;--panel:#3b3029;--line:#645246;--accent:#dfa468;--switch-off:#746154;--knob:#f6ebdc;--switch-on:#c18b53;--selected-bg:#594331;--selected-text:#f1c38d;--hover:#483a30;--toast:#514034;--backdrop:#140f0c99}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:7px}svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.app{height:100vh;height:100dvh;min-height:460px;position:relative;overflow:hidden}.topbar{position:absolute;left:0;right:0;top:clamp(30px,7vh,70px);display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:start;gap:12px;padding:0 clamp(22px,5vw,52px);max-width:720px;margin:0 auto;z-index:5}.icon-button{background:transparent;border:0;display:grid;place-items:center;width:44px;height:44px;padding:9px;color:var(--icon);border-radius:50%;transition:color .15s}.icon-button:hover{color:var(--text)}
.counts{text-align:center;padding-top:1px}.counts h1{font-size:clamp(24px,5.6vw,30px);font-weight:400;line-height:1.4;margin:0;letter-spacing:1px;white-space:nowrap}.counts h1 span{font-variant-numeric:tabular-nums}.counts p{margin:12px 0 0;font-size:14px;font-weight:400;letter-spacing:.5px;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stage{position:absolute;top:53%;left:50%;transform:translate(-50%,-50%);width:min(78vw,340px);height:min(78vw,340px)}.bull{display:block;width:100%;height:100%;border:0;padding:0;background:transparent;position:relative;transform-origin:50% 62%;border-radius:46%;outline-offset:10px}.bull img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.bull:active{transform:scale(.96)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,8px);max-width:90%;padding:11px 18px;background:var(--toast);border:1px solid var(--line);color:var(--text);border-radius:12px;font-size:12px;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}
dialog{width:350px;max-width:calc(100% - 36px);max-height:calc(100dvh - 36px);overflow-y:auto;padding:22px 26px 20px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:19px;box-shadow:0 18px 80px #0003}dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(5px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;margin:0 0 22px}.dialog-header h2{font-size:20px;font-weight:400;margin:0}.dialog-header .icon-button{width:32px;height:32px;margin-right:-7px}.dialog-header svg{width:21px;height:21px}
.theme-field{border:0;border-bottom:1px solid var(--line);padding:9px 0 22px;margin:0 0 12px}.theme-field legend{font-size:12px;padding:0}.theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.theme-options button{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:8px;font-size:11px;min-height:40px;padding:9px 2px}.theme-options button.selected{background:var(--selected-bg);border-color:var(--accent);color:var(--selected-text)}
.setting-row{margin:0 0 27px}.setting-row label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:12px}.setting-row label span{color:var(--muted);font-size:12px}input[type=range]{width:100%;height:15px;accent-color:var(--accent);cursor:pointer}.switch-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;min-height:42px}.switch-row label{align-self:stretch;display:flex;align-items:center;flex:1;cursor:pointer}.switch-row input{appearance:none;width:35px;height:20px;border:0;background:var(--switch-off);border-radius:20px;position:relative;cursor:pointer;transition:background .15s}.switch-row input::after{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:var(--knob);border-radius:50%;transition:transform .15s}.switch-row input:checked{background:var(--switch-on)}.switch-row input:checked::after{transform:translateX(15px)}
.tempo-field{border:0;border-bottom:1px solid var(--line);padding:10px 0 24px;margin:6px 0 13px}.tempo-field legend{font-size:12px;color:var(--muted);padding:0}.tempo-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.tempo-options button{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:8px;font-size:11px;min-height:40px;padding:9px 2px}.tempo-options button.selected{background:var(--selected-bg);border-color:var(--accent);color:var(--selected-text)}.reset-button{background:transparent;border:1px solid var(--line);width:100%;border-radius:10px;padding:11px;margin-top:25px;font-size:12px;color:var(--text)}.reset-button:hover{background:var(--hover)}.setting-note{font-size:10px;color:var(--muted);text-align:center;margin:14px 0 1px}
body.reduce-motion *,body.reduce-motion *::after{animation:none!important;transition:none!important}
@supports(padding:env(safe-area-inset-top)){.topbar{top:calc(clamp(30px,7vh,70px) + env(safe-area-inset-top))}}
@media(min-width:760px){.stage{width:min(45vh,380px);height:min(45vh,380px)}.topbar{top:50px}.counts h1{font-size:30px}.counts p{font-size:14px}}
@media(max-height:580px){.topbar{top:22px}.counts h1{font-size:23px}.counts p{margin-top:7px;font-size:12px}.stage{width:min(64vw,46vh);height:min(64vw,46vh);top:58%}}
@media(prefers-reduced-motion:reduce){*,*::after{animation:none!important;transition:none!important}}
