:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--paper:#eef2ef;--surface:#f9fbfa;--surface-soft:#f3f6f4;--ink:#142c2b;--muted:#69807c;--jade:#9fc7b7;--cinnabar:#d8523f;--gold:#d6ad59;--line:#cbd8d3;color:var(--ink);background:var(--paper);font-synthesis:none;font-family:PingFang SC,Noto Sans SC,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 20% 5%, #f8faf8 0, var(--paper) 54%, #e7eeeb 100%);min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer;min-width:44px;min-height:44px}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline-offset:3px;outline:3px solid #d8523f55}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.page-shell{place-items:center;min-height:100vh;padding:18px;display:grid}.app-shell{background:#f9fbfaf7;border:1px solid #dce4e0;border-radius:30px;grid-template-columns:minmax(0,1fr) 360px;width:min(1380px,100%);height:calc(100vh - 36px);min-height:680px;display:grid;overflow:hidden;box-shadow:0 24px 70px #142c2b21,0 2px 8px #142c2b0f}.practice-surface{flex-direction:column;min-width:0;padding:30px 34px 26px;display:flex;position:relative;overflow:hidden}.app-header{z-index:2;align-items:center;gap:24px;display:flex}.app-header h1{border-right:1px solid var(--line);letter-spacing:.15em;margin:0;padding-right:24px;font-family:STKaiti,KaiTi,Songti SC,serif;font-size:34px;font-weight:700;line-height:1}.offline-status{color:#3a7264;align-items:center;gap:9px;font-size:13px;font-weight:600;display:inline-flex}.offline-status i{background:var(--jade);border-radius:50%;width:9px;height:9px;box-shadow:0 0 0 5px #9fc7b72b}.tempo-stage{flex:1;place-items:center;min-height:520px;margin-top:-20px;display:grid;position:relative}.pipa-strings{z-index:0;opacity:.62;justify-content:space-between;width:142px;display:flex;position:absolute;top:-48px;bottom:86px;left:50%;transform:translate(-50%)}.pipa-strings i{background:linear-gradient(180deg, var(--gold), #d6ad5940);transform-origin:top;width:1px;display:block;box-shadow:0 0 8px #d6ad592b}.pipa-body{z-index:1;background:linear-gradient(100deg,#ffffffe0,#f4f7f4c7 48%,#ffffffeb);border:2px solid #d7bd7e;border-top-width:1px;border-radius:42% 42% 46% 46%/34% 34% 64% 64%;flex-direction:column;justify-content:center;align-items:center;width:min(560px,78%);min-height:500px;display:flex;position:relative;box-shadow:inset 0 0 38px #fff,0 24px 52px #21493e1f,0 0 0 11px #9fc7b717}.pipa-body:before{content:"";border-radius:inherit;pointer-events:none;border:1px solid #9fc7b766;position:absolute;inset:28px}.pipa-body:after{content:"";z-index:-1;border-radius:inherit;opacity:.5;border:1px dashed #9fc7b766;position:absolute;inset:-22px}.bpm-field input{color:#0b4b3c;text-align:center;letter-spacing:-.065em;appearance:textfield;background:0 0;border:0;outline:0;width:300px;padding:0;font-family:Iowan Old Style,Baskerville,Georgia,serif;font-size:clamp(88px,9vw,124px);line-height:.9}.bpm-field input::-webkit-inner-spin-button{appearance:none}.tempo-term{letter-spacing:.06em;margin-top:12px;font-family:Songti SC,Georgia,serif;font-size:19px}.tempo-actions{align-items:center;gap:18px;margin-top:28px;display:flex}.round-button{color:#175443;background:#f9fbfadb;border:1px solid #b9d2c8;border-radius:50%;width:58px;height:58px;padding:0;font-size:31px;line-height:1;box-shadow:0 6px 18px #2759481a}.tap-tempo{border:1px solid var(--line);color:#52736a;background:#f9fbfad1;border-radius:17px;min-width:126px;padding:0 20px;font-size:14px}.tempo-slider{width:62%;accent-color:var(--cinnabar);margin-top:28px}.tempo-stage.is-playing .pipa-body{animation:.72s ease-in-out infinite alternate pipaPulse}.tempo-stage.is-playing .pipa-strings i{animation:.36s ease-in-out infinite alternate stringPulse}.transport{z-index:2;grid-template-columns:1fr 100px 1fr;place-items:center;gap:22px;margin-top:-86px;display:grid;position:relative}.play-button{background:var(--cinnabar);color:#fff;border:3px solid #f2c68e;border-radius:50%;width:92px;height:92px;padding:0;position:relative;box-shadow:0 12px 25px #d8523f42,inset 0 0 0 1px #a93224}.play-button:active{transform:scale(.96)}.play-icon{filter:drop-shadow(0 1px 1px #8b291f66);border-top:14px solid #0000;border-bottom:14px solid #0000;border-left:22px solid #fff;width:0;height:0;margin:auto;display:block;transform:translate(3px)}.pause-icon{justify-content:center;gap:8px;display:flex}.pause-icon i{background:#fff;border-radius:3px;width:8px;height:28px}.voice-toggle{background:0 0;border:0;justify-self:end;align-items:center;gap:10px;padding:8px 12px;font-size:14px;font-weight:600;display:inline-flex}.switch-track{background:#c9d2cf;border-radius:999px;width:48px;height:27px;padding:3px;transition:background .15s}.switch-track i{background:#fff;border-radius:50%;width:21px;height:21px;transition:transform .15s;display:block;box-shadow:0 2px 5px #24483e33}.voice-toggle.is-on .switch-track{background:#3b816d}.voice-toggle.is-on .switch-track i{transform:translate(21px)}.practice-clock{border:1px solid var(--line);color:#496b62;background:#f9fbfabd;border-radius:999px;justify-self:start;align-items:center;gap:8px;min-height:44px;padding:8px 14px;font-size:13px;display:flex}.practice-clock svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;width:19px;height:19px}.practice-clock strong{color:var(--ink);font-family:Iowan Old Style,Georgia,serif;font-size:20px;font-weight:500}.audio-message{text-align:center;color:#a33b2f;margin:0;font-size:12px;position:absolute;inset:calc(100% + 4px) 0 auto}.beat-strip{z-index:2;background:#ffffffd6;border:1px solid #e0e7e3;border-radius:22px;align-items:center;gap:28px;min-height:102px;margin-top:28px;padding:18px 26px;display:flex;position:relative;box-shadow:0 12px 32px #20413814}.beat-label{white-space:nowrap;font-size:15px;font-weight:700}.beat-dots{flex-wrap:wrap;flex:1;align-items:center;gap:11px;display:flex}.beat-dot{width:44px;height:44px;color:var(--ink);background:#fff;border:1px solid #ccd8d3;border-radius:50%;place-items:center;font-family:Georgia,serif;transition:transform .14s,background .14s,color .14s;display:grid}.beat-dot.strong{color:#fff;background:#0f5542;border-color:#0f5542}.beat-dot.normal{background:#bfd5cc;border-color:#bfd5cc}.beat-dot.mute{color:#9baaa5;background:0 0;border-style:dashed}.beat-dot.active{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff;transform:scale(1.16);box-shadow:0 0 0 5px #d8523f24}.keyboard-hint{color:var(--muted);margin:11px 4px 0;font-size:11px}.settings-rail{border-left:1px solid var(--line);background:#f5f8f6;min-width:0;padding:26px 22px 30px;overflow:auto}.settings-rail>header{justify-content:space-between;align-items:baseline;margin-bottom:18px;display:flex}.settings-rail h2{margin:0;font-size:21px}.settings-rail>header span{color:var(--muted);font-size:11px}.settings-stack,.practice-panel,.preset-panel{gap:12px;display:grid}.setting-section,.practice-panel,.preset-panel,.install-help{background:#ffffffb3;border:1px solid #dce4e0;border-radius:16px;padding:15px}.setting-section h3{margin:0 0 12px;font-size:15px}.setting-section h3 small{color:var(--muted);margin-left:5px;font-size:10px;font-weight:500}.choice-grid{grid-template-columns:repeat(4,1fr);gap:7px;display:grid}.meter-grid{grid-template-columns:repeat(4,1fr)}.choice-grid button,.subdivision-list button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 6px;font-size:12px}.choice-grid button.selected,.subdivision-list button.selected{color:#fff;background:#0f5542;border-color:#0f5542}.custom-meter{grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;margin-top:10px;display:grid}.custom-meter label{color:var(--muted);font-size:10px}.custom-meter input,.custom-meter select{border:1px solid var(--line);background:#fff;border-radius:9px;width:100%;min-height:40px;margin-top:4px;padding:7px 9px;display:block}.subdivision-list{grid-template-columns:repeat(2,1fr);gap:7px;display:grid}.subdivision-list button{text-align:left;align-items:center;gap:8px;display:flex}.note-mark{color:#255d4e;background:#e5efeb;border-radius:50%;place-items:center;width:24px;height:24px;font-family:Georgia,serif;display:grid}.subdivision-list button.selected .note-mark{color:#fff;background:#ffffff26}.accent-grid{grid-template-columns:repeat(4,1fr);gap:7px;display:grid}.accent-button{border:1px solid var(--line);background:#fff;border-radius:11px;min-width:0;padding:7px 3px}.accent-button span{font-family:Georgia,serif;font-size:16px;display:block}.accent-button small{color:var(--muted);margin-top:2px;font-size:9px;display:block}.accent-button.strong{color:#fff;background:#0f5542;border-color:#0f5542}.accent-button.strong small{color:#dcebe5}.accent-button.mute{color:#98a6a2;border-style:dashed}.practice-panel{margin-top:12px}.practice-row{border-bottom:1px solid #e3e9e6;justify-content:space-between;align-items:center;gap:10px;min-height:52px;display:flex}.practice-row strong,.practice-row small{display:block}.practice-row strong{font-size:14px}.practice-row small{color:var(--muted);margin-top:3px;font-size:10px}.switch-button{background:#cad2d0;border:0;border-radius:999px;width:44px;min-width:44px;height:26px;min-height:26px;padding:3px}.switch-button i{background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .15s;display:block}.switch-button.is-on{background:#3b816d}.switch-button.is-on i{transform:translate(18px)}.practice-fields{grid-template-columns:repeat(3,1fr);gap:7px;padding:9px 0;display:grid}.practice-fields.two{grid-template-columns:repeat(2,1fr)}.practice-fields label,.duration-field{color:var(--muted);font-size:9px}.practice-fields input,.duration-field select{border:1px solid var(--line);background:#fff;border-radius:8px;width:100%;min-height:38px;margin-top:4px;padding:7px;display:block}.duration-field{margin-top:6px;display:block}.preset-panel{margin-top:12px}.preset-save{grid-template-columns:1fr;gap:8px;display:grid}.preset-save input{border:1px solid var(--line);background:#fff;border-radius:10px;width:100%;min-height:44px;padding:9px 12px}.preset-save button{color:#20705a;background:0 0;border:1px solid #72a391;border-radius:12px;justify-content:center;align-items:center;gap:8px;font-weight:700;display:flex}.preset-save svg{fill:none;stroke:currentColor;stroke-width:1.8px;width:18px;height:18px}.preset-list{gap:6px;margin-top:10px;display:grid}.preset-list>div{border-top:1px solid #e1e7e4;grid-template-columns:1fr auto auto;align-items:center;gap:5px;padding-top:8px;display:grid}.preset-list span strong,.preset-list span small{display:block}.preset-list span strong{font-size:12px}.preset-list span small{color:var(--muted);margin-top:2px;font-size:9px}.preset-list button{border:1px solid var(--line);background:#fff;border-radius:8px;min-height:36px;padding:5px 8px;font-size:10px}.install-help{color:var(--muted);margin-top:12px;font-size:11px}.install-help summary{cursor:pointer;color:var(--ink);font-weight:700}.install-help p{margin:9px 0 0;line-height:1.6}@keyframes pipaPulse{0%{box-shadow:inset 0 0 38px #fff,0 24px 52px #21493e1f,0 0 0 11px #9fc7b717}to{box-shadow:inset 0 0 38px #fff,0 24px 52px #21493e1f,0 0 0 18px #9fc7b729}}@keyframes stringPulse{0%{opacity:.55;transform:scaleY(.995)}to{opacity:.9;transform:scaleY(1.005)}}@media (width<=960px){.page-shell{place-items:start center;padding:0}.app-shell{border:0;border-radius:0;grid-template-columns:1fr;height:auto;min-height:100vh}.practice-surface{min-height:790px;padding:22px 18px 20px}.app-header h1{font-size:28px}.tempo-stage{min-height:460px;margin-top:0}.pipa-body{width:min(390px,94%);min-height:430px}.bpm-field input{width:230px;font-size:88px}.transport{grid-template-columns:1fr 86px 1fr;gap:7px;margin-top:-80px}.play-button{width:80px;height:80px}.voice-toggle{flex-direction:column;justify-self:center;gap:5px;padding:5px;font-size:11px}.practice-clock{flex-wrap:wrap;justify-content:center;justify-self:center;max-width:118px;padding:6px 8px;font-size:10px}.practice-clock strong{font-size:16px}.beat-strip{gap:13px;margin-top:24px;padding:15px}.beat-label{font-size:12px}.beat-dot{width:38px;height:38px}.settings-rail{border-top:1px solid var(--line);border-left:0;max-height:none;padding:24px 16px 42px}.keyboard-hint{display:none}}@media (width<=480px){.practice-surface{min-height:735px}.offline-status{margin-left:auto;font-size:10px}.app-header{gap:12px}.app-header h1{padding-right:12px;font-size:24px}.tempo-stage{min-height:410px}.pipa-strings{width:100px;bottom:52px}.pipa-body{width:92%;min-height:390px}.pipa-body:before{inset:18px}.bpm-field input{width:195px;font-size:76px}.tempo-term{font-size:15px}.tempo-actions{gap:12px;margin-top:22px}.round-button{width:50px;height:50px;font-size:27px}.tap-tempo{min-width:104px;padding:0 12px;font-size:12px}.tempo-slider{width:58%;margin-top:20px}.transport{grid-template-columns:1fr 78px 1fr;margin-top:-64px}.play-button{width:72px;height:72px}.play-icon{border-top-width:11px;border-bottom-width:11px;border-left-width:18px}.beat-strip{align-items:flex-start}.beat-dots{gap:7px}.beat-dot{width:34px;height:34px;font-size:12px}.choice-grid,.meter-grid{grid-template-columns:repeat(4,1fr)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}