@charset "UTF-8";
:root{color-scheme:dark;--bg:#191c20;--panel:#202429;--line:#34383d;--text:#f0efeb;--muted:#999da3;--accent:#f3ab8b;--accent-dark:#2e2725;--range:33.33%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:14px;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button,select,input[type=range]{touch-action:manipulation}button{cursor:pointer}button,a,input,select{-webkit-tap-highlight-color:transparent}button{color:inherit;border:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:disabled{opacity:.45;cursor:wait}button:active{transform:translateY(1px)}svg{display:block}button svg{width:22px;height:22px}input[type=range]{--fill:var(--accent);appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:14px 0;background:linear-gradient(to right,var(--fill) var(--range),#41454a var(--range));border-radius:8px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--text);box-shadow:0 1px 5px #0005}input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--text)}
.app{max-width:896px;margin:auto;padding:max(32px,env(safe-area-inset-top)) 40px max(24px,env(safe-area-inset-bottom))}.header{display:flex;justify-content:space-between;align-items:center}.brand{color:var(--text);text-decoration:none;display:flex;gap:12px;align-items:center;font-size:25px;font-weight:650}.brand-en{margin-left:12px;font-size:11px;letter-spacing:3px;font-weight:600;vertical-align:middle;color:#c5c5c2}.brand-mark{display:flex;align-items:center;gap:4px;width:27px;height:30px}.brand-mark i{display:block;width:4px;border-radius:4px;background:var(--accent)}.brand-mark i:nth-child(1){height:12px}.brand-mark i:nth-child(2){height:26px}.brand-mark i:nth-child(3){height:18px}.install{display:flex;gap:8px;align-items:center;background:none;color:#b4b6ba;font-size:12px;padding:10px 0 10px 15px}.install svg{width:17px;height:17px}.install:hover{color:var(--text)}.intro{margin:47px 0 27px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--accent);font-weight:600}.intro h1{font-size:32px;font-weight:500;letter-spacing:1.5px;margin:12px 0 9px}.intro>p:last-child{color:var(--muted);font-size:13px;letter-spacing:1px;margin:0}.instrument{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px 32px 19px}.instrument-top{display:flex;justify-content:space-between;align-items:center}.section-label{font-size:11px;color:var(--muted);letter-spacing:1px;display:flex;align-items:center;gap:8px}.status-dot{width:5px;height:5px;border-radius:50%;background:#80868e}.status-dot.playing{background:var(--accent);box-shadow:0 0 8px #f3ab8b44}.session-time{color:#8b9096;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:1px}.tempo-area{display:flex;align-items:center;justify-content:center;gap:33px;margin:5px 0 6px}.tempo-step{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:1px solid #44484d;border-radius:50%;color:#d0d0ce;flex-shrink:0;transition:background .2s,border-color .2s}.tempo-step:hover{background:#30343a;border-color:#74716c}.tempo-step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}.dial{width:250px;height:250px;position:relative;flex-shrink:0}.dial-art{width:100%;height:100%;overflow:visible}.dial-art line{stroke:#4c4e50;stroke-width:1}.dial-art line.major{stroke:#7c756d;stroke-width:1.5}.dial-track{fill:none;stroke:#373b3e;stroke-width:2}.dial-progress{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:722.57;stroke-dashoffset:722.57;transform:rotate(-90deg);transform-origin:center;opacity:.8}.dial.pulse .dial-track{stroke:#66615a}.tempo-number{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none}.tempo-number input{width:185px;font-family:inherit;font-size:76px;line-height:1;font-weight:450;letter-spacing:-4px;font-variant-numeric:tabular-nums;text-align:center;background:transparent;border:0;outline-offset:-4px;color:var(--text);padding:0;pointer-events:auto;-moz-appearance:textfield}.tempo-number input::-webkit-inner-spin-button,.tempo-number input::-webkit-outer-spin-button{appearance:none;margin:0}.tempo-number>span:not(.tempo-name){font-size:10px;letter-spacing:4px;color:var(--accent);margin:1px 0 14px 4px}.tempo-name{font-size:11px;color:var(--muted);letter-spacing:.5px}.tempo-range{max-width:484px;margin:auto}.range-labels{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#92969b;letter-spacing:.5px}.range-labels span:nth-child(2){font-size:10px;color:#898e95;letter-spacing:1px}.beats{display:flex;justify-content:center;gap:10px;margin:26px auto 22px;max-width:520px;flex-wrap:wrap}.beat{width:44px;height:49px;border:1px solid #42454a;background:#282c31;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:#94989e;transition:background .06s,color .06s,border-color .06s}.beat>i{width:5px;height:5px;border-radius:50%;background:#92969d}.beat>span{font-size:10px;font-variant-numeric:tabular-nums}.beat.strong{border-color:#775849;background:#342c28;color:var(--accent)}.beat.strong>i{background:var(--accent);width:6px;height:6px}.beat.muted>i{background:transparent;border:1px solid #737881}.beat.muted{opacity:.6}.beat.active{background:#d9d9d2;border-color:#d9d9d2;color:#26272a}.beat.active>i{background:#34383c}.beat.active.strong{background:var(--accent);border-color:var(--accent);color:#352c28}.beat.active.strong>i{background:#5e3e2f}.beat.active.muted{background:#3a3e44;color:#bbbfc5}.beat.active.muted>i{background:transparent}.transport{display:flex;gap:12px;max-width:484px;margin:0 auto}.play-button{background:var(--accent);color:#302722;border-radius:10px;min-height:54px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:14px;letter-spacing:1px;transition:background .15s}.play-button:hover{background:#ffbb9d}.play-button svg{width:20px;height:20px;fill:currentColor}.transport>.play-button{flex:1}.tap-button{width:120px;border:1px solid #4b4d50;background:transparent;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:7px}.tap-button>span:first-child{font-size:12px;font-weight:650;letter-spacing:1px}.tap-button>span:last-child{font-size:10px;color:#a7a9ad}.tap-button.tapped{border-color:var(--accent);background:#38302b}.beat-hint{color:#858b92;font-size:10px;text-align:center;letter-spacing:.4px;margin:17px 0 0}.settings{display:grid;grid-template-columns:1fr 1.35fr;gap:22px 32px;margin:26px 0 25px;border:1px solid var(--line);border-radius:16px;padding:22px 25px;background:#1d2126}.setting-title{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#c9c9c6;margin-bottom:12px}.setting-title>span:last-child:not(:first-child){color:#7e848d;font-size:9px;letter-spacing:1px}.select-wrap{position:relative}.select-wrap select{width:100%;height:45px;appearance:none;border:1px solid #3e4247;border-radius:8px;background:#272b30;color:var(--text);font-size:13px;padding:0 32px 0 13px;cursor:pointer}.select-wrap svg{position:absolute;right:13px;top:15px;width:15px;height:15px;fill:none;stroke:#a4a7ab;stroke-width:1.5;pointer-events:none}.segmented{display:flex;border:1px solid #3e4247;border-radius:8px;padding:3px;gap:3px;height:45px;background:#272b30}.segmented button{background:transparent;flex:1;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:7px;color:#90969e;font-size:10px}.segmented button.selected{background:#45403b;color:var(--accent)}.notes{font-size:20px;line-height:1;font-family:Georgia,serif}.notes.triplet{font-style:italic;font-size:17px;border-bottom:1px solid currentColor;padding:0 3px}.volume-row{display:flex;gap:11px;align-items:center;height:45px}.volume-row input{--range:70%;--fill:#aeb3b6}.icon-button{display:grid;place-items:center;width:34px;height:34px;padding:6px;background:transparent;color:#aeb3b6;border-radius:5px}.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.icon-button[aria-pressed=true]{color:var(--accent);background:#352f2b}.presets{display:flex;align-items:center;gap:24px}.preset-label{font-size:11px;color:#969ba3;letter-spacing:.5px;white-space:nowrap}.preset-buttons{display:flex;flex:1;gap:10px}.preset-buttons button{display:flex;gap:10px;align-items:center;justify-content:center;flex:1;background:transparent;border:1px solid #3a3e44;border-radius:8px;min-height:43px;color:#b6b9bd;font-size:12px}.preset-buttons button>span:last-child{font-size:10px;color:#7f8690}.preset-buttons button.selected{border-color:#8b6551;background:#2f2926;color:var(--accent)}.preset-buttons button.selected>span:last-child{color:#b58b76}footer{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#727a84;margin-top:29px;letter-spacing:.3px}.offline-status{display:flex;gap:6px;align-items:center}.offline-status>span{width:5px;height:5px;border-radius:50%;background:#7a8085}.offline-status.ready>span{background:#9cae93}.offline-status.error>span{background:var(--accent)}dialog{background:#24282d;color:var(--text);border:1px solid #494b4e;border-radius:18px;max-width:440px;width:calc(100% - 36px);padding:25px}dialog::backdrop{background:#090c10bb;backdrop-filter:blur(6px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-header .eyebrow{font-size:8px;letter-spacing:1.6px}.dialog-header button{font-size:26px}dialog h2{font-size:25px;font-weight:500;letter-spacing:1px;margin:16px 0}dialog p{font-size:12px;line-height:1.9;color:#b5b9bd}dialog strong{color:var(--accent);font-size:12px}#install-instructions{margin:22px 0;border-top:1px solid #3b4045;border-bottom:1px solid #3b4045}dialog .dialog-note{font-size:11px;color:#8c939b}dialog .play-button{width:100%;margin-top:20px;min-height:46px}.toast{position:fixed;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:11px 18px;border:1px solid #656058;background:#38332e;color:#f0e6dc;border-radius:9px;font-size:12px;z-index:5;max-width:90%;width:max-content}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1000px){.app{max-width:820px;padding-top:37px}.intro{margin-top:45px}.settings{grid-template-columns:1fr 1.45fr 1fr;gap:21px 24px}.volume-setting{grid-column:1/-1;display:flex;align-items:center;gap:25px;border-top:1px solid #34383e;padding-top:14px}.volume-setting .setting-title{margin:0;min-width:107px}.volume-row{flex:1;height:30px}.instrument{padding-bottom:21px}.tempo-area{margin-top:0}.dial{width:252px;height:252px}}
@media(max-width:600px){.app{padding:22px 20px max(20px,env(safe-area-inset-bottom))}.header{padding-top:env(safe-area-inset-top)}.brand{font-size:23px}.brand-en{font-size:9px;letter-spacing:2.5px;margin-left:10px}.intro{margin:30px 0 22px}.intro h1{font-size:29px;margin-top:10px}.intro>p:last-child{font-size:12px}.eyebrow{font-size:9px;letter-spacing:2.1px}.instrument{border-radius:17px;padding:18px 20px 16px}.tempo-area{gap:7px;margin:4px -7px 2px}.dial{width:226px;height:226px}.tempo-step{width:35px;height:35px}.tempo-number input{font-size:69px;width:170px}.tempo-number>span:not(.tempo-name){font-size:9px;margin-bottom:12px}.tempo-name{font-size:10px}.range-labels span:nth-child(2){font-size:9px}.beats{margin:23px 0 20px;gap:9px}.beat{height:43px;width:40px;border-radius:8px}.transport{gap:10px}.play-button{min-height:51px}.tap-button{width:107px;gap:5px}.tap-button>span:last-child{font-size:9px}.beat-hint{font-size:9px;margin-top:15px}.keyboard-hint{display:none}.settings{gap:21px 19px;padding:20px;margin:18px 0 22px;border-radius:14px;grid-template-columns:1fr 1.48fr}.setting-title{font-size:11px;margin-bottom:10px}.setting-title>span:last-child:not(:first-child){font-size:8px}.select-wrap select{height:43px;font-size:12px}.segmented{height:43px}.segmented button{gap:2px;flex-direction:column;font-size:8px}.notes{font-size:18px}.notes.triplet{font-size:14px}.volume-row{height:43px;gap:4px}.presets{display:block}.preset-label{font-size:10px;display:block;margin-bottom:11px}.preset-buttons{gap:8px}.preset-buttons button{gap:6px;font-size:12px;min-height:41px}.preset-buttons button>span:last-child{font-size:9px}footer{margin-top:25px;font-size:9px;gap:10px}}
@media(max-width:360px){.app{padding-left:14px;padding-right:14px}.instrument{padding-left:16px;padding-right:16px}.dial{width:202px;height:202px}.tempo-area{gap:5px}.tempo-step{width:32px;height:32px}.tempo-number input{font-size:60px}.settings{padding:17px;gap:18px 14px}.range-labels span:nth-child(2){letter-spacing:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}