:root{color-scheme:dark;--bg:#10252b;--panel:#142d33;--mint:#c2e4cd;--gold:#dac59b;--text:#f0f2e9;--muted:#a8babd;--line:#ffffff15;--radius:16px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,summary,label{-webkit-tap-highlight-color:transparent}button,.file-button{touch-action:manipulation;cursor:pointer;min-height:44px;padding:10px 15px;border:1px solid var(--line);background:#ffffff06;border-radius:9px;color:inherit;line-height:1.4}button:hover,.file-button:hover{background:#ffffff12}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}a{color:var(--mint)}[hidden]{display:none!important}.topbar{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(4vw,env(safe-area-inset-left));max-width:1700px;margin:auto}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-size:20px;letter-spacing:2px}.brand i{font:italic 23px Georgia,serif;letter-spacing:-.4px}.topbar nav{display:flex;gap:12px}.topbar nav button{border:0;background:transparent;font-size:12px;color:var(--muted)}.topbar nav button.active{color:var(--text);box-shadow:0 2px 0 var(--mint);border-radius:0}.install{font-size:11px;display:flex;align-items:center;gap:9px;border-radius:24px}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}.install.ready .status-dot{background:var(--mint)}main{max-width:1500px;margin:auto}.practice-page{display:grid;grid-template-columns:285px minmax(0,1fr);gap:64px;padding:40px 5% 30px}.eyebrow{font-size:9px;font-weight:600;color:var(--gold);letter-spacing:1.9px;margin:0 0 17px}h1,h2,h3{font-family:Georgia,serif;font-weight:400;margin:0;letter-spacing:-.6px}h1{font-size:48px;line-height:1.08}h1 em{color:var(--mint);font-weight:400}h2{font-size:32px;line-height:1.15}h3{font-size:23px}.intro{font-size:13px;color:var(--muted);line-height:1.8;margin:18px 0 24px}.search{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;padding-left:13px;background:#ffffff04}.search span{font-size:24px;color:var(--muted)}.search input{border:0;outline-offset:0;background:transparent;width:100%;padding:12px 10px;color:var(--text);font-size:12px;min-height:44px}.filters{display:flex;gap:5px;flex-wrap:wrap;margin:14px 0 0}.filters button{border:0;background:transparent;min-height:36px;padding:6px 8px;color:var(--muted);font-size:10px}.filters button.active{background:#c2e4cd12;color:var(--mint)}.library-count{font-size:10px;letter-spacing:1px;color:var(--muted);margin:20px 0 11px}.songs{display:grid;gap:6px;max-height:540px;overflow:auto;scrollbar-width:thin;scrollbar-color:#8da5a64d transparent;padding-right:4px}.song{display:flex;gap:12px;align-items:center;text-align:left;padding:14px 10px;width:100%;border-color:transparent;min-height:72px}.song.selected{background:#c2e4cd10;border-color:#c2e4cd45}.song-number{font:20px Georgia,serif;color:#96aaaa;min-width:24px}.song.selected .song-number{color:var(--mint)}.song-info{flex:1}.song strong{display:block;font-size:12px;font-weight:500;line-height:1.4}.song small{display:block;color:var(--muted);font-size:9px;margin-top:7px}.song-state{color:var(--mint);font-size:13px}.add-song{width:100%;margin-top:18px;font-size:11px;border-style:dashed;color:var(--mint)}.text-button{background:transparent;border:0;color:var(--muted);font-size:11px;padding:7px 10px}.discover{width:100%;margin-top:5px;font-size:10px}.tiny-note{display:flex;align-items:center;gap:13px;margin-top:20px;color:var(--muted)}.tiny-note>span{font-size:32px;color:var(--gold)}.tiny-note p{font-size:10px;line-height:1.7}.lesson{min-width:0;max-width:830px}.lesson-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.lesson-heading .eyebrow{font-size:9px;margin-bottom:10px}.icon-button{width:44px;min-width:44px;padding:5px;font-size:27px;color:var(--gold)}.description{font-size:12px;line-height:1.7;color:var(--muted);margin:14px 0 20px;min-height:40px}.mode-tabs{display:flex;gap:8px}.mode-tabs button{flex:1;border-color:transparent;background:#ffffff04;font-size:12px;padding:10px 8px}.mode-tabs button span{font-size:9px;opacity:.55;margin-right:10px}.mode-tabs button.active{border-color:#c2e4cd45;background:#c2e4cd12;color:var(--mint)}.mode-help{color:var(--muted);font-size:11px;line-height:1.5;min-height:18px;margin:12px 2px 17px}.setup-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #dac59b32;border-radius:10px;background:#dac59b08;color:var(--gold);padding:3px 10px;font-size:10px;margin-bottom:13px}.setup-banner button{border:0;background:transparent;font-size:10px;color:var(--gold)}.stage{background:radial-gradient(ellipse at 50% 40%,#37546144,transparent 65%),#132b32;border:1px solid var(--line);border-radius:18px;padding:4px 18px 16px;position:relative;overflow:hidden}.stage-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:8px;letter-spacing:1.8px}.stage-top>div{display:flex}.stage-top .text-button{font-size:10px}.instrument-wrap{position:relative}.instrument-wrap:has(.memory-cover:not([hidden])) #drum{visibility:hidden}#drum{width:min(100%,430px);aspect-ratio:1;margin:0 auto;position:relative;filter:drop-shadow(0 16px 14px #06171966)}.drum-shell,#drum-photo{position:absolute;width:100%;height:100%}#drum-photo{object-fit:cover;border-radius:50%;filter:brightness(.8)}.tongue{position:absolute;transform:translate(-50%,-50%);width:16.5%;height:18.5%;padding:0;border-radius:45% 45% 36% 36%;background:linear-gradient(145deg,#68818b19,#071b2255);border:1.5px solid #93a8b264;box-shadow:inset 0 -4px 6px #06171e55;z-index:1;color:#eef5f2;font-size:18px;transition:background .09s,border-color .09s,box-shadow .09s}.tongue::before{content:"";position:absolute;inset:9px;border:1px solid #a0b5ba24;border-top:0;border-radius:0 0 35% 35%;pointer-events:none}.tongue.center{width:24%;height:24%;border-radius:49%;background:radial-gradient(ellipse,#4a697522,#081b2233)}.tongue.center::before{border:1px solid #a0b5ba26;border-radius:45%;inset:12px}.tongue small{display:block;font-size:8px;color:#bacacd;margin-top:6px;letter-spacing:.9px}.tongue b{font-weight:600;text-shadow:0 1px 4px #071b22}.tongue .hand{position:absolute;top:-8px;left:-7px;width:22px;height:22px;font-size:10px;border-radius:50%;background:#d9c499;color:#17302d;display:grid;place-items:center;border:2px solid #1b353f}.tongue.next{border:2px dashed var(--gold);color:#f1ddba}.tongue.active{border:2px solid var(--mint);color:#f2fff0;background:#a0d4b72b;box-shadow:0 0 20px #abd4b923,inset 0 0 20px #a0d4b719}.tongue.pulse{background:#d1f1d65c;box-shadow:0 0 32px #b5e1c754}.approach{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);pointer-events:none;overflow:visible;transform:rotate(-90deg);opacity:0}.tongue.next .approach{opacity:1}.approach circle{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:283;stroke-dashoffset:calc(283 * var(--until,1));transition:stroke-dashoffset .035s linear}.cue{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:5px;min-height:83px;margin-top:5px}.cue>span:first-child{font-size:8px;letter-spacing:2px;color:var(--mint)}.cue strong{font-size:27px;font-weight:400}.cue>span:last-child{font-size:10px;color:var(--muted)}.beat-dots{display:flex;gap:8px;justify-content:center;margin:9px 0 14px}.beat-dots i{width:5px;height:5px;border-radius:50%;background:#a9c1bf28}.beat-dots i.on{background:var(--mint);box-shadow:0 0 10px #c2e4cd55}.legend{display:flex;align-items:center;justify-content:center;gap:25px;font-size:9px;color:var(--muted)}.legend i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px}.now-dot{background:var(--mint)}.next-dot{border:1px solid var(--gold)}.legend label{display:flex;align-items:center;gap:4px}.legend input{width:12px;height:12px}.note-strip{display:flex;gap:6px;margin:14px 0 18px;min-height:52px;overflow:hidden}.note-token{min-width:44px;flex:1;border:1px solid var(--line);border-radius:8px;padding:9px 5px;text-align:center;font-size:11px;background:#ffffff03;white-space:nowrap;position:relative}.note-token small{display:block;font-size:8px;color:var(--muted);margin-top:4px}.note-token.current{border-color:#c2e4cd77;background:#c2e4cd12;color:var(--mint)}.phrase-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px}#phrases{display:flex;gap:5px;flex-wrap:wrap}#phrases button{font-size:10px;padding:7px 10px;min-height:38px}#phrases .selected{color:var(--mint);border-color:#c2e4cd66;background:#c2e4cd0a}.phrase-row>.text-button{font-size:9px;white-space:nowrap}.range-controls{display:flex;gap:12px;align-items:center;margin-bottom:18px;font-size:11px}.range-controls label{display:flex;align-items:center;gap:7px}.transport{display:flex;gap:8px}.primary{background:var(--mint);border-color:var(--mint);color:#17372e;font-weight:600}.primary:hover{background:#dbf1df}.transport .primary{flex:1;font-size:13px;min-height:49px}.square{width:46px;min-width:46px;padding:5px;font-size:21px}.seek-row{display:flex;align-items:center;gap:12px;font-size:9px;color:var(--muted);margin:13px 0 9px}.seek-row input{flex:1;width:0;height:24px}.options{display:flex;gap:13px;align-items:center;flex-wrap:wrap;font-size:10px;color:var(--muted);margin:6px 0 14px}.options label{display:flex;align-items:center;gap:5px;min-height:36px}.tempo input{width:86px}.tempo output{min-width:43px;font-size:10px;color:var(--text)}.tempo-preset{font-size:9px;border:0;background:#ffffff06;min-height:33px;padding:5px 7px}input[type=range]{accent-color:var(--mint)}input[type=checkbox]{accent-color:var(--mint);width:16px;height:16px}.lesson-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}.lesson-footer button{color:var(--mint);font-size:10px}.arrangement{border-top:1px solid var(--line);font-size:11px;color:var(--muted);line-height:1.8;margin-top:10px;padding-top:10px}.arrangement summary{cursor:pointer;min-height:35px;display:flex;align-items:center}.arrangement summary::before{content:'＋';margin-right:8px}select,input[type=text],input[type=number],textarea{color:var(--text);background:#0d232a;border:1px solid #ffffff25;border-radius:8px;padding:10px;min-height:44px}textarea{resize:vertical;min-height:130px;width:100%;line-height:1.6;font-family:ui-monospace,monospace;font-size:12px}.site-footer{max-width:1350px;margin:15px auto 0;padding:20px 4% max(20px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);font-size:10px;color:var(--muted);gap:16px}.footer-dot{color:var(--gold);padding:0 7px}.content-page{padding:55px 6% 60px}.content-page h1{font-size:46px}.content-page>.intro{margin-bottom:35px}.content-page>h2{font-size:27px;margin:35px 0 18px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.settings-card{border:1px solid var(--line);border-radius:var(--radius);background:#ffffff03;padding:27px;min-width:0}.settings-card.wide{grid-column:1/-1}.settings-card h2{font-size:26px}.settings-card h3{margin:30px 0 18px}.settings-card p{font-size:12px;color:var(--muted);line-height:1.9}.setting-label{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:15px 0;font-size:12px}.setting-label input[type=range]{width:55%}.setting-label:has(input[type=checkbox]){justify-content:flex-start}.button-row{display:flex;gap:8px;flex-wrap:wrap}#mapping{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}#mapping label{display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--muted)}#mapping select{width:100%}.file-button{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:middle}.settings-card button{font-size:11px}.record-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:20px 0}.record-row label{display:flex;align-items:center;gap:10px;font-size:12px}.sample-list{display:flex;gap:6px;flex-wrap:wrap}.sample-badge{border:1px solid var(--line);padding:5px 9px;border-radius:20px;font-size:10px;color:var(--muted)}.sample-badge.saved{color:var(--mint);border-color:#c2e4cd66}.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.tips b{display:block;color:var(--text)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.stat{padding:30px;border:1px solid var(--line);border-radius:14px;background:#ffffff03}.stat b{display:block;font:42px Georgia,serif;color:var(--mint)}.stat span{font-size:12px;color:var(--muted);display:block;margin-top:12px}.week{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;align-items:end;padding:22px;border:1px solid var(--line);border-radius:14px}.day{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;height:150px}.day .bar{width:65%;min-height:3px;border-radius:5px;background:#c2e4cd33}.day.today .bar{background:var(--mint)}.day span,.day small{font-size:11px;color:var(--muted)}.learned-list{display:flex;flex-wrap:wrap;gap:12px}.learned-list button{font-size:12px;color:var(--mint)}.muted{color:var(--muted);font-size:11px;line-height:1.8}.empty{color:var(--muted);font-size:12px;line-height:1.8;padding:20px 4px}.memory-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.memory-orbit{font-size:100px;line-height:1.3;color:var(--gold);font-weight:200}.memory-cover h3{font-size:34px}.memory-cover p{font-size:13px;line-height:1.8;color:var(--muted)}.memory-cover button{font-size:11px}.focus-mode .topbar,.focus-mode .library,.focus-mode .site-footer,.focus-mode .description,.focus-mode .arrangement,.focus-mode .setup-banner{display:none}.focus-mode .practice-page{display:block;max-width:960px;margin:auto;padding:22px}.focus-mode .lesson{max-width:none}.focus-mode #drum{width:min(56vh,600px)}dialog{width:min(620px,calc(100% - 30px));max-height:85dvh;overflow:auto;color:var(--text);background:#173239;border:1px solid #ffffff25;border-radius:18px;padding:25px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#041216b8;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.dialog-head h2{font-size:28px}.dialog-head button{border:0}#dialog-body{font-size:13px;line-height:1.8;color:var(--muted)}#dialog-body h3{color:var(--text);margin:20px 0 10px}#dialog-body b{color:var(--text)}#dialog-body label.field{display:block;margin:15px 0;font-size:11px}#dialog-body label.field input,#dialog-body label.field select{display:block;width:100%;margin-top:6px}#dialog-body .primary{width:100%;margin-top:15px}#dialog-body li{margin:10px 0}.import-result{padding:12px 15px;margin:15px 0;border:1px solid #c2e4cd44;border-radius:10px;color:var(--mint)}.import-result.error{color:#f0b7a9;border-color:#f0b7a955}.discovery-card{border-top:1px solid var(--line);padding:18px 0}.discovery-card strong{display:block;color:var(--text)}.discovery-card a{font-size:12px}.toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:20;padding:13px 22px;background:var(--mint);color:#17372e;border-radius:12px;box-shadow:0 8px 40px #0006;max-width:calc(100% - 30px);font-size:12px;text-align:center}.skip{position:absolute;left:12px;top:-100px;padding:15px;background:var(--mint);color:var(--bg);z-index:50}.skip:focus{top:12px}.noscript{text-align:center;padding:30px}.danger{color:#edb8aa}.offline-message{border:1px solid var(--line);border-radius:10px;padding:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1350px){.practice-page{gap:85px;grid-template-columns:310px minmax(0,1fr)}#drum{width:450px}.stage{padding-bottom:20px}}@media(max-width:1050px){.practice-page{grid-template-columns:225px minmax(0,1fr);gap:30px;padding:30px 3%}.topbar{padding:0 3%;gap:15px}.topbar nav{gap:3px}.brand{font-size:17px}.brand i{font-size:20px}h1{font-size:41px}h2{font-size:28px}.description{min-height:60px}.stage{padding:4px 9px 14px}#drum{width:min(100%,380px)}.options{gap:8px}.tempo input{width:70px}.mode-tabs button span{margin-right:4px}.legend{gap:16px}.phrase-row{flex-wrap:wrap}.settings-card{padding:20px}.song{padding:12px 7px;gap:8px}.song strong{font-size:11px}.song small{font-size:9px}.song-number{min-width:22px;font-size:18px}}@media(max-width:760px){.topbar{height:auto;min-height:80px;flex-wrap:wrap;padding:16px 5% 10px;gap:15px}.topbar nav{order:3;width:100%;justify-content:center;gap:15px}.topbar nav button{font-size:12px;min-height:40px}.brand{font-size:18px}.brand i{font-size:22px}.install{padding:7px 10px;min-height:38px;font-size:9px}.practice-page{display:flex;flex-direction:column;padding:27px 5%;gap:26px}.library-heading h1{font-size:36px;line-height:1.1}.library-heading h1 br{display:none}.library-heading h1 em::before{content:' '}.library-heading .intro{font-size:12px;margin:10px 0 18px}.library-heading .intro br{display:none}.eyebrow{font-size:8px;margin-bottom:12px}.songs{display:flex;overflow:auto;max-height:none;padding-bottom:10px}.song{min-width:225px;max-width:225px;border:1px solid var(--line);padding:12px}.song strong{font-size:12px}.tiny-note{display:none}.add-song{width:auto;margin-top:12px;font-size:10px}.discover{width:auto;font-size:10px}.library-count{margin:15px 0 10px}.lesson-heading h2{font-size:29px}.description{min-height:0;font-size:12px}.mode-help{font-size:11px}.setup-banner{font-size:9px;gap:4px}.setup-banner button{font-size:9px}.tongue{font-size:18px}.stage{padding:4px 10px 14px}.options{gap:10px}.tempo{flex-basis:100%}.tempo input{flex:1}.options label{min-height:35px}.note-strip{gap:4px}.note-token{font-size:10px;min-width:38px}.phrase-row{gap:0}#phrases button{min-height:42px;padding:8px 11px}.legend{gap:17px;font-size:9px}.content-page{padding:35px 5%}.content-page h1{font-size:36px}.settings-grid{grid-template-columns:1fr}.settings-card.wide{grid-column:auto}.tips{grid-template-columns:1fr;gap:0}.stats{gap:8px}.stat{padding:18px 10px}.stat b{font-size:30px}.stat span{font-size:10px}.week{padding:12px 8px;gap:5px}.day span,.day small{font-size:9px}.lesson-footer{font-size:9px}.lesson-footer button{font-size:9px}.site-footer{padding:12px 5%;font-size:9px;flex-wrap:wrap;gap:5px}.site-footer .text-button{font-size:10px}dialog{padding:20px}.focus-mode .practice-page{padding:15px}.focus-mode #drum{width:min(100%,47vh)}.focus-mode .mode-help,.focus-mode .lesson-footer{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}@media(orientation:landscape) and (min-width:761px) and (max-height:850px){#drum{width:min(100%,350px)}.practice-page{padding-top:25px}.description{margin-bottom:14px}.mode-help{margin:9px 0 12px}.cue{min-height:65px}.stage{padding-bottom:12px}}
@media(min-width:761px) and (orientation:landscape){.focus-mode .practice-page{max-width:1280px;padding:20px 30px}.focus-mode .lesson{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);column-gap:30px;row-gap:10px;align-items:start}.focus-mode .lesson-heading{grid-column:1/-1;margin-bottom:4px}.focus-mode .lesson-heading h2{font-size:28px}.focus-mode .lesson-heading .eyebrow{font-size:8px}.focus-mode .stage{grid-column:1;grid-row:2/10}.focus-mode #drum{width:min(48vh,430px)}.focus-mode .mode-tabs{grid-column:2;grid-row:2}.focus-mode .mode-help{grid-column:2;grid-row:3;min-height:0;margin:0}.focus-mode .note-strip{grid-column:2;grid-row:4;margin:5px 0}.focus-mode .phrase-row{grid-column:2;grid-row:5;margin:0;align-items:start}.focus-mode .range-controls{grid-column:2;grid-row:6;flex-wrap:wrap;margin:0}.focus-mode .transport{grid-column:2;grid-row:7;margin-top:7px}.focus-mode .seek-row{grid-column:2;grid-row:8;margin:0}.focus-mode .options{grid-column:2;grid-row:9;gap:10px}.focus-mode .options .tempo{flex-basis:100%}.focus-mode .tempo input{flex:1}.focus-mode .lesson-footer{grid-column:2;grid-row:10;flex-wrap:wrap}.focus-mode .legend{gap:14px}.focus-mode .cue{min-height:75px}.focus-mode .note-token{min-width:35px;padding:8px 3px}}
@media(pointer:coarse){.filters button,.tempo-preset,.text-button,#phrases button{min-height:44px}.file-button{min-height:44px}}

#path-guide{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}#path-guide text{font-family:inherit}.path-view .tongue.next .approach{opacity:0}.path-view .tongue.next{border-style:solid;border-color:#b3c6c36b}.visual-guide-label select{min-height:44px;border:1px solid var(--line);border-radius:8px;color:var(--text);background:var(--panel);padding:8px;font:inherit}.visual-guide-label{flex-basis:100%}