:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#28392f;--primary:#326b54;--muted:#5e6c62;--border:#dbe2d8;background:#f8faf6;font-family:Avenir Next,PingFang SC,Microsoft YaHei,sans-serif;font-size:16px;line-height:1.5}*{box-sizing:border-box;letter-spacing:0}body{min-width:280px;margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid var(--primary);outline-offset:3px}#root{width:100%;min-height:100vh}.metronome-container{isolation:isolate;min-height:100dvh;padding:env(safe-area-inset-top,0px) 16px calc(112px + env(safe-area-inset-bottom,0px));position:relative}.app-header,main{width:100%;max-width:480px;margin-inline:auto;position:relative}.app-header{padding-block:24px 8px}.app-header h1{margin:0;font-size:22px;font-weight:650}.help-link{z-index:21;top:calc(8px + env(safe-area-inset-top,0px));right:max(16px, env(safe-area-inset-right,0px));min-height:44px;color:var(--primary);-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:6px;font-size:14px;font-weight:650;text-decoration:none;display:inline-flex;position:fixed}.help-link:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}.help-popover{z-index:20;top:calc(60px + env(safe-area-inset-top,0px));right:max(16px, env(safe-area-inset-right,0px));width:min(360px, calc(100vw - 32px - env(safe-area-inset-right,0px)));max-height:calc(100vh - 84px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 84px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8e9591 transparent;color:#fff;background:#272c29f0;border:1px solid #ffffff24;border-radius:8px;padding:22px;position:fixed;overflow-y:auto;box-shadow:0 12px 32px #17251b26}.help-popover:focus{outline:none}.help-popover h2{margin:0 0 18px;font-size:18px;font-weight:700}.help-popover section+section{border-top:1px solid #ffffff26;margin-top:20px;padding-top:16px}.help-popover h3{margin:0 0 8px;font-size:15px;font-weight:650}.help-popover p{overflow-wrap:anywhere;margin:0;font-size:14px;line-height:1.8}.help-popover p+p{margin-top:8px}.help-popover::-webkit-scrollbar{width:6px}.help-popover::-webkit-scrollbar-track{background:0 0}.help-popover::-webkit-scrollbar-thumb{background:#8e9591;border:1px solid #303632;border-radius:3px}.help-popover::-webkit-scrollbar-thumb:hover{background:#bdc5bf}.watermark{z-index:-1;pointer-events:none;opacity:.035;color:#464c46;text-align:center;background:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><g fill=\"%23464c46\"><ellipse cx=\"36\" cy=\"32\" rx=\"10\" ry=\"27\"/><ellipse cx=\"64\" cy=\"32\" rx=\"10\" ry=\"27\"/><ellipse cx=\"50\" cy=\"70\" rx=\"33\" ry=\"24\"/></g></svg>") top/80px 80px no-repeat;width:110px;height:110px;padding-top:82px;position:absolute;top:16px;right:max(12px,50% - 240px)}.watermark span{white-space:nowrap;font-size:18px;font-weight:800;line-height:24px;display:block}@media (width<=359px){.watermark{background-size:52px 52px;width:86px;height:78px;padding-top:54px;top:8px}.watermark span{font-size:14px;line-height:20px}}.tempo-section{padding-block:20px 24px}.bpm-display{justify-content:center;align-items:baseline;gap:10px;display:flex}.bpm-value{width:3.5ch;height:88px;color:inherit;text-align:center;font-variant-numeric:tabular-nums;background:0 0;border:2px solid #0000;border-radius:6px;padding:0;font-size:68px;font-weight:650;line-height:1.15}.bpm-input{border-color:var(--primary);background:#fff;min-width:0}.bpm-display span{color:var(--muted);font-size:14px}.tempo-controls{grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:16px;margin-top:16px;display:grid}.icon-btn{background:#e8ece6;border:1px solid #d9e0d6;border-radius:50%;place-items:center;width:48px;height:48px;display:grid}.icon-btn:disabled{opacity:.4;cursor:default}.track-panel{border-top:1px solid var(--border);--track-color:#b95239;--track-soft:#f6e8e2;padding-block:20px 24px}.secondary-track{--track-color:#247b94;--track-soft:#e3f0f4}.track-heading{justify-content:space-between;align-items:center;min-height:44px;display:flex}.track-heading h2{margin:0;font-size:17px;font-weight:650}.track-body{gap:20px;padding-top:12px;display:grid}.beat-visualizer{justify-content:center;align-items:center;gap:8px;height:46px;display:flex}.beat-dot{background:#dce1d9;border:2px solid #0000;border-radius:50%;flex:0 0 28px;width:28px;height:28px;transition:background-color 60ms linear,transform 60ms linear}.beat-dot.accent{outline:2px solid var(--track-color);outline-offset:3px}.beat-dot.active{background:var(--track-color);transform:scale(1.12)}.beat-setting{gap:10px;display:grid;container-type:inline-size}.field-label{color:var(--muted);font-size:14px}.beat-options{grid-template-columns:repeat(8,minmax(36px,1fr));gap:4px;width:100%;max-width:380px;display:grid}.beat-options button{border:1px solid var(--border);font-variant-numeric:tabular-nums;background:#fff;border-radius:6px;min-width:36px;height:36px;padding:0;font-size:15px}.beat-options button[aria-pressed=true]{background:var(--track-soft);border-color:var(--track-color);color:var(--track-color);box-shadow:inset 0 -2px var(--track-color);font-weight:700}@container (width<316px){.beat-options{grid-template-columns:repeat(4,36px)}}.volume-setting{grid-template-columns:auto minmax(0,1fr) 44px;align-items:center;gap:12px;display:grid}.volume-setting output{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}input[type=range]{width:100%;min-width:0;height:44px;accent-color:var(--track-color,var(--primary));cursor:pointer;margin:0}input[type=range]::-webkit-slider-thumb{min-width:24px;min-height:24px}input[type=range]::-moz-range-thumb{width:22px;height:22px}.track-toggle{cursor:pointer;min-height:44px;color:var(--muted);align-items:center;gap:10px;font-size:14px;display:flex;position:relative}.track-toggle input{opacity:0;cursor:pointer;width:48px;height:44px;margin:0;position:absolute;right:0}.switch-track{pointer-events:none;background:#c9d1c7;border-radius:14px;width:46px;height:28px}.switch-track:after{content:"";background:#fff;border-radius:50%;width:22px;height:22px;margin:3px;transition:transform .14s;display:block}.track-toggle input:checked+.switch-track{background:var(--track-color)}.track-toggle input:checked+.switch-track:after{transform:translate(18px)}.track-toggle input:focus-visible+.switch-track{outline:3px solid var(--primary);outline-offset:3px}.transport{z-index:5;border-top:1px solid var(--border);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));background:#f8faf6;position:fixed;bottom:0;left:0;right:0}.transport-inner{width:100%;max-width:480px;margin-inline:auto}.play-btn{background:var(--primary);color:#fff;border:0;border-radius:8px;justify-content:center;align-items:center;gap:10px;width:100%;height:56px;font-size:18px;font-weight:600;display:flex}.play-btn.is-playing{background:#a34835}button:not(:disabled):active{filter:brightness(.94)}@media (width>=768px){.app-header{padding-top:40px}.tempo-section{padding-block:28px 32px}.track-panel{padding-block:24px 28px}}@media (orientation:landscape){.metronome-container{padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}}@media (prefers-reduced-motion:reduce){.beat-dot,.switch-track:after{transition:none}.beat-dot.active{transform:none}}