@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#f6f0e9;background:#090d16;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 90% 4%,#2a1f22 0,transparent 35%),#090d16}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #e5b570;outline-offset:3px}a{color:inherit;text-decoration:none}.shell{max-width:480px;min-height:100dvh;margin:auto;padding:0 22px 110px;position:relative;background:linear-gradient(155deg,rgba(28,31,44,.8),rgba(9,13,22,0) 42%)}.top{display:flex;justify-content:space-between;align-items:center;padding:23px 0 21px}.brand{display:flex;align-items:center;gap:10px}.brand-icon{width:37px;height:37px;border:1px solid #bd8b52;border-radius:12px;color:#e9ba76;display:grid;place-items:center;font-family:Outfit;font-size:24px;font-weight:800}.brand span{display:block;font-family:Outfit;font-size:15px;letter-spacing:.13em;font-weight:800}.brand small{display:block;color:#aeb1bc;font-size:8px;letter-spacing:.27em;margin-top:-2px}.avatar{width:38px;height:38px;border-radius:50%;border:1px solid #625747;background:#292d36;color:#ebbc79;font-weight:800}.eyebrow{text-transform:uppercase;letter-spacing:.23em;color:#d9a968;font-weight:800;font-size:10px}.heading{font-family:Outfit;font-weight:700;line-height:1.06;letter-spacing:-.035em}.hero h1{font-size:39px;margin:11px 0}.hero p{font-size:14px;line-height:1.55;color:#b6bac3;margin:0 0 21px}.gold{color:#e3b271}.instrument{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;background:#1b202d;border:1px solid #3b3a3a;border-radius:14px;margin:19px 0 25px}.instrument small{display:block;font-size:10px;color:#9da1af;margin-bottom:3px}.instrument strong{font-size:14px}.instrument button,.textbutton{border:0;background:transparent;color:#e9b571;font-weight:800;font-size:12px}.feature{position:relative;overflow:hidden;border-radius:21px;background:radial-gradient(circle at 85% 20%,#a37745 0,#543c31 32%,#2c232a 68%,#222330 100%);padding:22px;min-height:187px;box-shadow:0 16px 40px #0005}.feature:after{content:'𝄞';font-family:Georgia,serif;position:absolute;right:24px;top:4px;color:#e7b97933;font-size:195px;line-height:1;transform:rotate(-15deg)}.feature>*{position:relative;z-index:1}.feature .pill{display:inline-block;background:#e0b170;color:#241c18;padding:6px 10px;border-radius:30px;font-size:9px;font-weight:800;letter-spacing:.14em}.feature h2{font-family:Outfit;font-size:27px;line-height:1.12;margin:20px 0 6px}.feature p{color:#e0d4c6;font-size:12px;margin:0}.feature button,.primary{border:0;background:#e5b572;color:#181720;font-weight:800;border-radius:11px;padding:12px 17px;margin-top:18px}.sectionhead{display:flex;justify-content:space-between;align-items:center;margin:25px 0 12px}.sectionhead h2{font-family:Outfit;font-size:20px;margin:0}.sectionhead button{border:0;background:none;color:#e8b673;font-size:11px;font-weight:800}.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tile{border:1px solid #343845;border-radius:16px;background:#1b202b;padding:16px;text-align:left;color:#fff;min-height:104px}.tile .icon{font-size:23px;margin-bottom:13px}.tile strong{font-size:13px;display:block}.tile small{font-size:10px;color:#a3a8b6}.track{display:flex;align-items:center;gap:12px;background:#1b202b;border:1px solid #303440;border-radius:14px;padding:10px;margin:9px 0}.cover{flex:0 0 52px;height:52px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:23px;background:linear-gradient(140deg,#73604d,#252a3a)}.cover.blue{background:linear-gradient(140deg,#315b69,#222638)}.cover.rose{background:linear-gradient(140deg,#855d65,#282633)}.trackmain{flex:1;min-width:0;background:none;border:0;color:#f7f1eb;text-align:left;padding:0}.trackmain strong{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trackmain small{color:#9ea4b1;font-size:10px}.heart{border:0;background:none;color:#89909e;font-size:21px;padding:8px}.heart.active{color:#e9b573}.nav{position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);width:min(480px,100%);height:calc(69px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#131824ed;border-top:1px solid #333844;display:flex;justify-content:space-around;backdrop-filter:blur(16px)}.nav button{width:20%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;background:none;color:#8b929e;font-size:9px}.nav button b{font-size:21px;font-weight:400}.nav button.active{color:#e9b774}.page-title{font:700 30px Outfit;margin:14px 0 5px}.sub{color:#a7adba;font-size:13px;line-height:1.5;margin:0 0 20px}.search{display:flex;gap:10px;align-items:center;background:#202531;border:1px solid #363b48;padding:0 15px;border-radius:12px;margin:18px 0}.search input{min-width:0;width:100%;padding:15px 0;background:none;border:none;color:#fff;outline:none;font-size:13px}.search input::placeholder{color:#818999}.chips{display:flex;gap:8px;overflow:auto;padding:0 0 8px;scrollbar-width:none}.chip{white-space:nowrap;background:#202531;border:1px solid #373c47;color:#b5bac4;border-radius:30px;padding:9px 13px;font-size:11px}.chip.active{background:#e7b674;border-color:#e7b674;color:#1d1b1b;font-weight:800}.empty{background:#1b202b;border:1px dashed #454a56;padding:24px;border-radius:16px;text-align:center;margin-top:20px}.empty p{font-size:13px;color:#abb0ba;line-height:1.5}.empty .primary{margin:5px 0}.back{border:0;background:none;color:#e8b775;font-size:13px;padding:0;margin:7px 0 23px}.album{width:100%;aspect-ratio:1.18;border-radius:23px;background:radial-gradient(circle at 70% 30%,#b88c5b,#594039 37%,#252634 75%);display:grid;place-items:center;overflow:hidden;position:relative}.album:before{content:'M';font-family:Outfit;font-weight:800;font-size:210px;color:#ffffff0d;position:absolute;transform:rotate(-14deg)}.album .sax{font-size:110px;transform:rotate(-20deg);filter:drop-shadow(3px 12px 12px #0008)}.player-title{font:700 27px Outfit;margin:22px 0 4px}.player-meta{font-size:12px;color:#a4abb7}.scrub{margin:20px 0 4px}.scrub input,.range input{accent-color:#e6b573;width:100%}.times{display:flex;justify-content:space-between;color:#9da3b1;font-size:10px}.transport{display:flex;justify-content:center;align-items:center;gap:26px;margin:12px 0 20px}.transport button{background:none;border:0;color:#f1e8df;font-size:21px}.transport .play{width:62px;height:62px;border-radius:50%;background:#e5b572;color:#181921;font-size:24px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.control{border:1px solid #353945;border-radius:12px;background:#1d2230;color:#d7d9dc;min-height:53px;text-align:left;padding:10px 12px;font-size:11px}.control strong{display:block;color:#fff;font-size:12px;margin-top:2px}.control.on{border-color:#d7a668;background:#3a302f}.range{background:#1d2230;border:1px solid #343945;border-radius:12px;padding:14px;font-size:12px}.range label{display:flex;justify-content:space-between}.range strong{color:#e9ba76}.notes{margin-top:13px;background:#202530;border-radius:12px;padding:14px;font-size:12px}.notes span{display:block;color:#a6adba;font-size:10px;margin-bottom:8px}.notes strong{letter-spacing:.15em;line-height:1.8}.modalwrap{position:fixed;inset:0;z-index:30;background:#000b;display:flex;align-items:flex-end;justify-content:center}.modal{width:min(480px,100%);border-radius:25px 25px 0 0;background:#242936;padding:22px 24px calc(26px + env(safe-area-inset-bottom));box-shadow:0 -15px 60px #0008}.modal h2{font:700 23px Outfit;margin:3px 0 5px}.modal p{font-size:12px;color:#b5bbc5;line-height:1.5}.modal .choice{width:100%;text-align:left;border:1px solid #404653;background:#303644;color:white;border-radius:12px;margin-top:9px;padding:14px}.modal .choice.selected{border-color:#e4b470;color:#e4b470}.modal input{display:block;width:100%;background:#161b25;color:#fff;border:1px solid #454a55;border-radius:11px;padding:14px;margin:10px 0}.modal .primary{width:100%;margin-top:9px}.close{float:right;border:0;background:none;color:#c9cbd1;font-size:21px}.line{border-bottom:1px solid #323744;padding:17px 0;display:flex;justify-content:space-between;align-items:center;gap:12px}.line strong{font-size:13px}.line small{display:block;color:#a5aab6;font-size:11px;margin-top:4px}.line button{border:0;background:none;color:#e7b574;font-weight:800;font-size:12px}.toast{position:fixed;z-index:50;bottom:90px;left:50%;transform:translateX(-50%);background:#e6b676;color:#171820;border-radius:10px;padding:10px 16px;font-size:12px;font-weight:800;white-space:nowrap;max-width:90%;text-align:center}.shop{background:linear-gradient(130deg,#5a3d32,#1d2431);border-radius:20px;padding:25px;margin:17px 0}.shop h2{font:700 27px Outfit;margin:12px 0}.shop p{font-size:13px;line-height:1.5;color:#e1d2c2}.shop a{display:inline-block;background:#e6b572;border-radius:11px;color:#171820;padding:12px 15px;font-weight:800;font-size:12px;margin-top:8px}.fine{font-size:11px;color:#9299a6;line-height:1.55;margin:20px 0}.welcome{padding-top:9vh;text-align:center}.welcome .logo{margin:auto;width:92px;height:92px;border:1px solid #c59b67;border-radius:26px;display:grid;place-items:center;font:800 54px Outfit;color:#e8b777;box-shadow:0 0 50px #bd8b5240}.welcome h1{font:800 42px Outfit;line-height:1.08;margin:33px 0 12px}.welcome p{color:#b7bdc9;line-height:1.55}.welcome .primary{width:100%;margin-top:26px}.welcome .fine{margin-top:30px}@media(min-width:600px){.shell{box-shadow:0 0 70px #0008;border-left:1px solid #2b303a;border-right:1px solid #2b303a}}

.upload-box{margin:18px 0 9px;padding:20px;border:1px solid #65513e;border-radius:17px;background:linear-gradient(155deg,#322b2d,#1c222e)}.upload-box h2{font:700 21px Outfit;margin:9px 0}.upload-box p{font-size:13px;color:#c8c5c4;line-height:1.5}.upload-box input{display:block;width:100%;background:#151b25;border:1px solid #48505b;border-radius:11px;color:#fff;padding:12px;margin:9px 0;font-size:14px}.upload-box input[type=file]{font-size:12px}.upload-box .primary{width:100%;margin:5px 0 11px}.upload-box small{color:#aeb3bd;line-height:1.5;display:block}

.personal-art{aspect-ratio:auto;height:150px}.personal-art .sax{font-size:66px}.ab-practice{border:1px solid #4c453f;border-radius:14px;background:#202530;padding:16px;margin-top:13px}.ab-practice strong{font-size:14px}.ab-practice p{font-size:12px;color:#b9bfca;line-height:1.45;margin:7px 0 13px}.ab-actions{display:flex;gap:9px}.ab-actions button{flex:1;background:#e6b572;color:#181b22;border:0;border-radius:10px;padding:12px 6px;font-size:12px;font-weight:800}.ab-practice .textbutton{margin-top:13px;padding:3px 0}.row-actions{display:flex;align-items:center;gap:12px}.row-actions button{white-space:nowrap}

.key-panel,.score-panel{border:1px solid #48414a;border-radius:14px;background:#202530;padding:16px;margin:14px 0}.key-panel>strong,.score-panel>strong{font-size:15px}.key-panel p,.score-panel p{font-size:12px;line-height:1.45;color:#b9bfca;margin:7px 0 14px}.key-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.key-inputs label{color:#c6cbd3;font-size:12px}.key-inputs select{display:block;width:100%;margin:6px 0 0;padding:11px 9px;background:#151b25;color:#fff;border:1px solid #4e5360;border-radius:8px;font:inherit}.key-results{margin-top:14px;display:grid;gap:6px}.key-results>div{display:flex;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:8px;background:#2b303c;font-size:12px}.key-results>div.selected{outline:1px solid #e6b572}.key-results b{color:#e9b874}.key-empty{margin-bottom:0!important}.score-picker{display:inline-block;background:#e6b572;color:#181b22;padding:11px 13px;border-radius:9px;font-size:12px;font-weight:800;cursor:pointer}.score-picker input{position:absolute;width:1px;height:1px;opacity:0}.score-panel a{display:block;color:#e9b874;font-weight:800;font-size:12px;margin-top:14px}.score-panel a[hidden]{display:none}

.guide-panel{background:#1c2932;border:1px solid #41636b;border-radius:14px;padding:16px;margin:14px 0}.guide-panel>strong{font-size:15px}.guide-panel p{font-size:12px;line-height:1.5;color:#bed0d2}.guide-panel small{display:block;color:#aebdc5;font-size:11px;margin-top:12px}.guide-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.guide-controls[hidden]{display:none}.guide-controls button{border:1px solid #65a3a8;background:#2c474e;color:#f1f8f7;border-radius:9px;padding:11px 7px;font-size:11px;font-weight:800}.guide-controls label{grid-column:1/-1;color:#e6eff0;font-size:12px;margin-top:3px}.guide-controls label span{float:right}.guide-controls input{display:block;width:100%;accent-color:#78c2c0;margin-top:8px}

.add-list-icon{border:0;background:none;color:#e5b574;font-size:21px;padding:7px}.new-list{width:100%;margin:0 0 16px}.set-card{display:block;text-align:left;width:100%;border:1px solid #494550;border-radius:13px;background:#202530;color:#fff;padding:16px;margin:9px 0}.set-card strong{font-size:15px;display:block}.set-card small{font-size:12px;color:#b7bdc8;display:block;margin-top:5px}.set-track{display:flex;align-items:center;gap:8px;border-bottom:1px solid #343945;min-height:63px}.set-number{color:#e8b571;font-size:12px;width:20px}.set-title{flex:1;min-width:0;text-align:left;border:0;background:none;color:#fff;padding:10px 0}.set-title strong,.set-title small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.set-title strong{font-size:13px}.set-title small{font-size:11px;color:#aeb4be;margin-top:3px}.set-track>button:not(.set-title){border:0;background:#282f3c;color:#e8b674;border-radius:8px;padding:7px;font-size:16px}.delete-list{margin-top:25px}.practice-note{background:#202530;border:1px solid #3a404c;border-radius:12px;padding:15px;margin:17px 0}.practice-note label{font-size:13px;font-weight:800;display:block;margin-bottom:9px}.practice-note textarea{width:100%;min-height:80px;resize:vertical;color:#fff;background:#121823;border:1px solid #4b5360;border-radius:8px;padding:10px;font:13px 'DM Sans',Arial,sans-serif}.practice-note small{font-size:11px;color:#aeb6c1}
.set-track>button:not(.set-title){min-width:36px;min-height:38px}.set-title{min-width:70px}

.backup-panel{border:1px solid #605346;border-radius:16px;padding:18px;background:#252630;margin:24px 0}.backup-panel strong{font-size:16px}.backup-panel p{font-size:12px;color:#bdc2cb;line-height:1.5}.backup-panel button,.backup-panel label{display:block;width:100%;text-align:center;border:1px solid #e4b572;border-radius:10px;background:#e4b572;color:#181b22;padding:11px;font-weight:800;font-size:12px;margin-top:9px;cursor:pointer}.backup-panel label{background:transparent;color:#e4b572}.backup-panel input{position:absolute;width:1px;height:1px;opacity:0}.backup-panel small{display:block;color:#b8bec9;font-size:11px;line-height:1.45;margin-top:13px}

.upload-box label{display:block;margin:13px 0 4px;color:#e7e3df;font-size:14px;font-weight:700}.upload-box label input{font-weight:400}.upload-box button:disabled{opacity:.6;cursor:wait}

.ab-footer{display:flex;justify-content:space-between;gap:10px;margin-top:12px}.ab-practice .ab-footer .textbutton{margin-top:0;min-height:40px}.ab-practice small{display:block;color:#b9bfca;font-size:12px;margin-top:6px}

.tuner-card{margin:24px 0;padding:26px 20px;border-radius:22px;text-align:center;background:radial-gradient(circle at 50% 0,#3b403d,#202833 56%,#1a202c);border:1px solid #736044}.tuner-card>small{font-size:12px;letter-spacing:.16em;color:#deb377}.tuner-card>strong{display:block;font:700 clamp(70px,22vw,110px)/1 Outfit,Arial,sans-serif;min-height:115px;margin:20px 0 2px;color:#faf5eb}.tuner-card>p{font-size:15px;line-height:1.45;color:#e4e7e8;min-height:23px}.tuner-scale{position:relative;display:flex;justify-content:space-between;align-items:center;margin:30px 0 24px;height:48px;border-radius:10px;padding:0 10px;background:linear-gradient(90deg,#375d80,#367263 43%,#367263 57%,#8b534f);font-size:11px;font-weight:800;color:white}.tuner-scale:after{content:'';position:absolute;left:50%;top:0;bottom:0;border-left:2px solid #fff8}.tuner-scale i{position:absolute;left:50%;top:-9px;width:3px;height:66px;border-radius:3px;background:#f4c373;box-shadow:0 0 7px #000;transform:translateX(-50%);transition:left .12s linear;z-index:2}.tuner-card #tuner-status{font-size:14px;color:#f3c98d}.tuner-card .primary{width:100%;margin-top:10px;min-height:51px;font-size:14px}.tuner-card .primary:disabled{opacity:.65}#tuner-written{min-height:45px}

.metro-card{margin:22px 0;padding:23px 18px;border-radius:18px;background:#202731;border:1px solid #715b44}.metro-number{text-align:center;font:800 clamp(70px,22vw,110px)/1 Outfit,Arial,sans-serif;color:#e9bd7b;margin:10px 0 20px}.metro-card label{color:#d7dbe0;font-size:14px;font-weight:700}.metro-card>input[type=range]{width:100%;margin:12px 0 19px;accent-color:#e9b571}.metro-row{display:flex;gap:10px;align-items:end;margin:12px 0}.metro-row>label{flex:1}.metro-row input,.metro-row select{display:block;width:100%;height:46px;margin-top:6px;padding:9px;background:#111924;color:#fff;border:1px solid #5e6771;border-radius:9px;font:inherit}.metro-row button{min-height:46px;min-width:52px;padding:0 10px;background:#35404c;border:1px solid #596572;color:#fff;border-radius:9px;font-size:16px;font-weight:800}.metro-row [data-action=metro-tap]{font-size:12px;background:#635039;border-color:#a38154}.metro-dots{display:flex;justify-content:center;gap:16px;margin:26px 0 10px}.metro-dots i{width:21px;height:21px;border-radius:50%;background:#4e5962;transition:background .08s,transform .08s}.metro-dots i.active{background:#e8b775;transform:scale(1.25)}.metro-card>p{text-align:center;color:#bdc7cf;font-size:14px}.metro-card>.primary{width:100%;min-height:52px;font-size:14px}

.discovery{margin:26px 0 10px;padding:19px;background:#1b2731;border:1px solid #42616c;border-radius:16px}.discovery h2{margin:0 0 7px;font:700 20px Outfit,Arial,sans-serif}.discovery p{font-size:14px;line-height:1.5;color:#c5d0d5;margin:0 0 15px}.discovery label{display:block;font-size:14px;font-weight:700;margin-bottom:7px}.discovery input{width:100%;min-height:46px;background:#111925;border:1px solid #57717b;border-radius:9px;color:white;padding:10px;font-size:16px}.discovery-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.discovery-actions button{min-height:47px;padding:8px;color:#1b1e25;background:#e6b572;border:0;border-radius:9px;font-size:12px;font-weight:800}.discovery small{display:block;font-size:12px;line-height:1.5;color:#b9c7cc;margin-top:12px}

.shop a.music-site{display:block;width:max-content;max-width:100%;background:transparent;color:#fff;border:1px solid #e6b572;font-size:12px;white-space:normal}

.lang-select{color:#f6f0e9;background:#1a2431;border:1px solid #5f6c76;border-radius:9px;min-height:42px;padding:6px 4px;font-size:14px;max-width:145px}.welcome-lang{display:flex;justify-content:flex-end;padding-top:24px}.welcome-lang .lang-select{max-width:140px}
.top{gap:8px}.top .brand{min-width:0;flex:1}.top .brand-icon{flex:0 0 37px}.top .brand small{letter-spacing:.13em;white-space:nowrap}.top .avatar{flex:0 0 38px}
@media(max-width:390px){.top .brand small{display:none}.top .brand{gap:6px}.top .brand-icon{flex-basis:32px;width:32px;height:32px}.top .lang-select{max-width:123px}}

@media(max-width:360px){.top .brand span{display:none}}
.audio-entry{border-bottom:1px solid #323744;padding-bottom:13px}.audio-entry .line{border-bottom:0;padding-bottom:5px}.voice-tool{display:flex;align-items:flex-start;gap:10px}.voice-tool button{flex:0 0 auto;min-height:42px;border:1px solid #e6b572;border-radius:9px;padding:8px 10px;background:#232b37;color:#e6b572;font-size:12px;font-weight:800}.voice-tool button:disabled{opacity:.7}.voice-tool small{font-size:12px;line-height:1.4;color:#b7bfca;max-width:280px}
@media(max-width:390px){.voice-tool{flex-wrap:wrap}.voice-tool small{max-width:none}}

.record-volume{display:block;color:#e6eff0;font-size:14px;margin:12px 0}.record-volume span{float:right}.record-volume input{display:block;width:100%;accent-color:#e6b572;margin-top:10px}.record-button{background:#e6b572;color:#18232a;border:0;border-radius:10px;padding:14px 18px;font-weight:800;font-size:14px;min-height:48px}.record-button:disabled,.export-controls button:disabled{opacity:.5}.export-controls{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.export-controls button{border:1px solid #75989a;background:#273b42;color:#f1f8f7;border-radius:8px;padding:11px;font-size:12px;font-weight:700;min-height:44px}.guide-panel #record-status{font-size:14px;color:#d8e9e8;line-height:1.5}

@media(min-width:760px){.shell{max-width:860px;padding-left:36px;padding-right:36px}.nav{width:min(860px,100%)}.modal{width:min(760px,100%)}.album{max-height:360px;aspect-ratio:auto;height:360px}.guide-panel{padding:24px}.guide-panel p{font-size:16px}.guide-panel small{font-size:14px}.guide-panel>strong{font-size:20px}.export-controls button{font-size:14px}}