:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1b2844;background:#f5f7fc;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}a{color:#2855b7}.top{height:74px;position:sticky;top:0;background:#fff;border-bottom:1px solid #e4e9f3;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 940px)/2));box-shadow:0 3px 15px #1c325009}.brand{display:flex;gap:11px;align-items:center}.brand img{width:44px;height:44px;border-radius:12px}.brand strong{display:block;font-size:19px;letter-spacing:-.5px}.brand small{color:#687996;font-size:11px}main{max-width:940px;margin:0 auto;padding:26px 20px 125px}.panel,.book,.track,.group,.stat{background:#fff;border:1px solid #e6eafa;border-radius:18px;box-shadow:0 5px 20px #17315908}.auth{max-width:425px;margin:45px auto;padding:30px}.authlogo{width:110px;max-height:105px;object-fit:contain;display:block;margin:auto}h1{font-size:27px;letter-spacing:-.7px;margin:15px 0 5px}h2{font-size:21px;letter-spacing:-.4px;margin:0 0 12px}h3{margin:0 0 6px}.auth h1,.auth p{text-align:center}.auth p,.muted,.subtitle{color:#71809c}.auth p{margin:0 0 27px;font-size:14px}form{display:grid;gap:15px}label{display:grid;gap:7px;font-weight:600;font-size:13px}input{width:100%;background:white;border:1px solid #d8dfec;padding:13px 14px;border-radius:11px;outline:none;color:#172342}input:focus{border-color:#2b67da;box-shadow:0 0 0 3px #2b67da20}.primary{background:#2558bd;color:#fff;border:0;border-radius:11px;padding:13px 18px;font-weight:650}.secondary{background:#eef3ff;color:#2455ab;border:0;border-radius:11px;padding:11px 16px;font-weight:650}.danger{color:#a12b40}.link{border:0;background:none;color:#2558bd;padding:8px;font-size:13px}.authlinks{display:flex;justify-content:space-between;margin-top:15px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.eyebrow{color:#4a6eb4;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;font-size:10px}.subtitle{margin-top:5px;font-size:14px}.search{margin:22px 0 17px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px}.group{padding:17px;display:flex;gap:14px;align-items:center;text-align:left;border:1px solid #e6eafa;color:inherit;width:100%}.group .emoji{font-size:28px;background:#eef3ff;width:56px;height:56px;display:grid;place-items:center;border-radius:15px}.group small{display:block;color:#7686a0;margin-top:5px}.book{overflow:hidden}.bookimage{width:100%;height:150px;object-fit:cover;background:#e9effb}.bookfallback{height:150px;display:grid;place-items:center;background:linear-gradient(140deg,#1c3a79,#6693f0);color:#fff;font-size:55px}.bookbody{padding:15px}.bookbody h3{font-size:16px;line-height:1.25}.bookbody p{color:#75839b;font-size:12px;margin:5px 0 14px}.bookbody .row button{flex:1}.pill{font-size:11px;background:#eaf1ff;padding:6px 9px;border-radius:20px;color:#355cab}.back{border:0;background:transparent;padding:4px 0 15px;color:#2558bd;font-weight:600}.track{padding:13px 14px;margin:8px 0;display:flex;gap:12px;align-items:center}.track .play{border:0;border-radius:12px;width:41px;height:41px;color:#fff;background:#285ab9;font-size:17px}.track .tracktext{flex:1;min-width:0}.track b{font-size:14px;overflow-wrap:anywhere}.track small{color:#7987a1;display:block;margin-top:4px}.track input[type=checkbox]{width:22px;height:22px;accent-color:#2b64c3;cursor:pointer}.empty{text-align:center;padding:55px 20px;color:#71809c;border:1px dashed #cbd5e6;border-radius:17px;background:white}.empty .big{font-size:40px}.detailtop{display:flex;gap:18px;align-items:center;margin-bottom:22px}.detailtop img,.coverplaceholder{height:100px;width:100px;object-fit:cover;border-radius:15px;background:#dfe8f9}.coverplaceholder{display:grid;place-items:center;font-size:44px}.actions{display:flex;gap:9px;flex-wrap:wrap}.scanbox{max-width:550px;margin:20px auto;padding:23px;text-align:center}.scanbox #reader{width:100%;margin:15px auto;overflow:hidden;border-radius:13px}.scanbox .scanform{display:flex;gap:9px;margin:15px 0}.scanbox .scanform input{flex:1;min-width:0}.scanbox p{font-size:13px;line-height:1.6;color:#71809c}#qr{display:flex;justify-content:center;padding:12px;background:white}.account{padding:23px;max-width:540px}.account form{margin-top:18px}.hint{font-size:12px;color:#687b99;line-height:1.6}.player{position:fixed;z-index:20;bottom:82px;left:50%;transform:translateX(-50%);max-width:600px;width:calc(100% - 24px);background:#fff;border:1px solid #dce4f1;box-shadow:0 8px 40px #12244544;border-radius:18px;padding:15px}.playerhead{display:flex;justify-content:space-between;gap:8px}.playerhead small{display:block;color:#697d9b}.playerhead b{display:block;margin:4px 0 10px}.player audio{width:100%}.playercontrols{display:flex;gap:8px;justify-content:center}.playercontrols button,.iconbtn{border:0;background:#eef2fa;padding:8px 13px;border-radius:10px;color:#264580}.playercontrols button{font-size:12px}#toast{position:fixed;z-index:50;left:50%;transform:translateX(-50%);bottom:96px;padding:12px 20px;border-radius:10px;background:#193259;color:white;display:none;max-width:92vw;box-shadow:0 5px 20px #0003}#nav{position:fixed;bottom:0;left:0;right:0;z-index:15;display:flex;justify-content:center;background:white;border-top:1px solid #dde6f4;padding-bottom:env(safe-area-inset-bottom)}#nav button{border:0;background:none;color:#8996ad;min-width:110px;flex:0 1 160px;padding:11px 6px 8px;font-size:12px;display:grid;justify-items:center;gap:2px}#nav button span{font-size:24px}#nav button.active{color:#245bbf;font-weight:800}.space{height:15px}#install{display:block}#install[hidden]{display:none}@media(max-width:500px){main{padding:22px 15px 130px}.auth{margin:12px auto;padding:20px}.top{height:67px;padding:0 15px}.brand strong{font-size:17px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.bookimage,.bookfallback{height:118px}.bookbody{padding:11px}.bookbody h3{font-size:14px}.bookbody .row{flex-wrap:wrap}.bookbody .row button{width:100%}.group{padding:13px}.group .emoji{width:44px;height:44px;font-size:22px}.detailtop{align-items:flex-start}.scanbox{padding:17px}.scanbox .scanform{flex-direction:column}}[hidden]{display:none!important}

/* Native Android NinjaTrax visual identity. */
:root{--ninja-teal:#47BFC3;--ninja-aqua:#5ce1e6;--ninja-dark:#044e65;--ninja-red:#D91E1E;font-family:Roboto,"Arial",sans-serif;color:#101b20;background:var(--ninja-teal)}
html,body,#app{min-height:100%;background:var(--ninja-teal)}
.top{background:var(--ninja-teal);border-bottom:2px solid #fff;box-shadow:none;height:65px;color:white}
.brand img{border-radius:50%;background:#fff;object-fit:contain;padding:3px}
.brand strong,h1,h2,.eyebrow,.primary,.auth h1{font-family:"Oswald","Arial Narrow",Roboto,sans-serif;font-stretch:condensed;font-weight:800}
.brand strong{font-size:23px;letter-spacing:.2px}.brand small{color:#efffff;font-size:11px}
main{background:var(--ninja-teal);min-height:calc(100dvh - 66px);padding-top:24px}
h1,h2,.eyebrow{color:#fff}h1{font-size:32px;text-transform:none;letter-spacing:0;margin:5px 0 10px}
h2{font-size:24px}.eyebrow{font-size:12px;letter-spacing:.7px;color:#e6ffff}
.subtitle,.muted{color:#073f4a}.subtitle{font-weight:500}
.panel,.book,.track,.group,.stat{background:#fff;border:0;border-radius:12px;box-shadow:0 3px 6px #06494c1f}
.auth{margin:25px auto;padding:30px;border-radius:13px}.auth h1{color:#111}.auth p{color:#555}
.authlogo{width:126px;max-height:128px}.auth label{color:#202020}
input{border:1px solid #b6d7d8;border-radius:7px}input:focus{border-color:#008fa3;box-shadow:0 0 0 3px #47bfc344}
.primary{background:#044e65;color:#fff;border-radius:7px;text-transform:none}.secondary{background:#ddf7f8;color:#044e65;border-radius:7px}
.iconbtn{background:#dff7f7;color:#044e65}
.link,a,.back{color:#044e65}.back{font-weight:700}.pill{background:white;color:#044e65;border:1px solid #d1eff0}
.search{background:#fff;border:2px solid white}
.grid{gap:14px}.group{border-radius:12px;padding:17px}.group .emoji{background:#fff;border-radius:50%;width:62px;height:62px;flex-shrink:0}.group .emoji img{height:100%;width:100%;object-fit:contain}.group strong{color:#111;font-size:17px}.group small{color:#555}
.bookbody h3{color:#2196f3}.bookbody p{color:#555}.bookimage,.bookfallback{background:#e9fafa}.bookfallback{background:#d9f6f6;color:#034e65}
.track{border-radius:8px}.track .play{background:#044e65;border-radius:50%;width:44px;height:44px}.track input[type=checkbox]{accent-color:#47bfc3}
.empty{background:#ffffffec;border:0;color:#044e65}.scanbox{background:#fff}.scanbox h2,.account h2{color:#111}.account{background:#fff}
#nav{background:#fff;border-top:2px solid #e6ecec;box-shadow:0 -3px 10px #034e6522;padding:5px 7px calc(5px + env(safe-area-inset-bottom));justify-content:space-between}
#nav button{min-width:0;flex:1;color:#161616;gap:4px;height:75px;padding:5px 3px;font-size:12px;font-weight:500;border-radius:9px}
#nav button img{width:48px;height:48px;object-fit:contain}
#nav button.active{background:#e3f9f9;color:#064e65;font-weight:800}
.player{bottom:calc(94px + env(safe-area-inset-bottom));border:2px solid #47bfc3}.playercontrols button{color:#044e65}
#toast{background:#044e65;bottom:112px}
@media(max-width:500px){main{padding-top:20px}.top{padding:0 17px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.group{flex-direction:column;text-align:center;gap:8px}.group .emoji{height:74px;width:74px}.group small{font-size:11px}.group strong{font-size:15px}.auth{margin:14px auto;padding:23px}.bookbody h3{font-size:15px}#nav button img{width:46px;height:46px}}
/* Android Profile and scanned-book instrument catalogue */
.instrument-grid{margin-top:22px}
.instrument-grid .group{justify-content:center}
.native-profile{max-width:560px;margin:0 auto;padding:0 8px 30px;text-align:center}
.native-profile>h1{font-size:34px;margin:4px 0 20px;color:white}
.profile-photo-button{display:block;width:124px;height:124px;padding:0;border:0;background:white;border-radius:50%;margin:0 auto 20px;box-shadow:0 5px 14px #03515b44;overflow:hidden}
.profile-photo{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-name-form{display:flex;align-items:center;gap:12px;margin:0 3px 24px}
.profile-name-form input{flex:1;min-width:0;background:#fff;border-radius:9px;height:48px;font-size:16px}
.profile-save{border:0;border-radius:50%;background:transparent;color:white;font-size:37px;font-weight:800;width:50px;height:48px;line-height:1}
.profile-section{background:white;border-radius:10px;margin:14px 3px;padding:17px 18px;min-height:150px;text-align:left;box-shadow:0 3px 9px #00566125}
.profile-section-heading{display:flex;gap:14px;align-items:center;justify-content:center;margin:0 0 20px}
.profile-section-heading h2{font-family:Roboto,Arial,sans-serif;font-size:20px;font-weight:750;letter-spacing:0;color:#101010;margin:0}
.profile-add{width:33px;height:33px;display:grid;place-items:center;background:none;border:0;color:#111;font-weight:900;font-size:31px;line-height:1}
.profile-items{max-height:190px;overflow:auto;display:flex;flex-direction:column;gap:7px}
.profile-items>p{color:#777;font-size:14px;text-align:center}
.profile-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#effafa;border-radius:7px;font-size:15px}
.profile-item button{background:transparent;border:0;color:#a23b3b;font-size:23px}
.profile-dialog{border:0;border-radius:14px;max-width:min(90vw,400px);width:100%;padding:22px;box-shadow:0 16px 65px #0005}
.profile-dialog::backdrop{background:#07242ba8}
.profile-dialog h2{color:#073f4a;font-size:23px}
.profile-dialog select{width:100%;padding:13px;border:1px solid #b6d7d8;border-radius:8px;font:inherit;background:white}
.profile-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.profile-photo-choices{margin:12px 3px;padding:15px;background:white;border-radius:10px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.profile-photo-choices[hidden]{display:none}
.profile-photo-choices button{background:transparent;border:0;padding:0;width:76px;height:90px}
.profile-photo-choices img{width:100%;height:100%;object-fit:cover;border-radius:8px}
@media(max-width:500px){.profile-section{min-height:145px;padding:17px 12px}.native-profile>h1{font-size:32px}}

/* Android library grid — faithful 2-column instrument cards */
.instrument-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:16px 1px 24px;margin-top:4px}
.instrument-grid .instrument-tile{width:100%;min-height:190px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:21px 12px 18px;border:0;border-radius:10px;box-shadow:0 3px 9px #03526728;text-align:center}
.instrument-grid .instrument-tile .instrument-visual{height:112px;width:112px;display:grid;place-items:center;background:transparent;flex:none}
.instrument-grid .instrument-tile .instrument-visual img{display:block;max-width:100%;max-height:100%;width:112px;height:112px;object-fit:contain}
.instrument-grid .instrument-tile strong{font-family:"Oswald","Arial Narrow",Arial,sans-serif;font-weight:700;font-size:18px;line-height:1.2;color:#111;letter-spacing:0}
.instrument-grid .instrument-tile:focus-visible{outline:3px solid #074b62;outline-offset:3px}
#nav{align-items:center}
#nav button{min-height:78px;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 2px 7px}
#nav button img{display:block;width:50px;height:50px;max-height:none;object-fit:contain;image-rendering:auto;flex-shrink:0}
@media(max-width:500px){
 .instrument-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:14px 2px}
 .instrument-grid .instrument-tile{min-height:177px;padding:17px 8px 16px}
 .instrument-grid .instrument-tile .instrument-visual{height:106px;width:106px}
 .instrument-grid .instrument-tile .instrument-visual img{width:106px;height:106px}
 .instrument-grid .instrument-tile strong{font-size:17px}
 #nav button img{width:49px;height:49px}
}

/* Timestamped practice section navigation */
.section-navigation{margin-top:12px;border-top:1px solid #d5eeee;padding-top:12px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#044e65;font-size:14px}
.section-add{font-size:12px;padding:7px 11px}
.section-markers{display:flex;flex-wrap:nowrap;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;padding:10px 0;scrollbar-width:thin}
.section-chip{display:flex;flex-direction:column;gap:2px;align-items:flex-start;flex:0 0 auto;max-width:180px;padding:8px 11px;border:1px solid #add5d6;background:#e9f8f9;border-radius:9px;color:#044e65;text-align:left}
.section-chip span{font-size:12px;font-weight:700}
.section-chip small{font-size:11px}
.section-chip.active{background:#044e65;color:white;border-color:#044e65}
.section-jog{display:flex;gap:9px}
.section-jog button{flex:1;border:0;background:#ddf7f8;border-radius:8px;padding:10px 5px;color:#044e65;font-size:12px;font-weight:700}
.section-hint,.section-empty{font-size:11px;color:#60787f;line-height:1.5}
.section-hint{margin:6px 0 0}

/* Library: the instrument artwork itself is the full tap target */
.image-only-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;padding:14px 0 24px}
.image-only-grid .instrument-image-button{display:block;width:100%;aspect-ratio:1/1;background:transparent;border:0;box-shadow:none;padding:5px;cursor:pointer;border-radius:12px}
.image-only-grid .instrument-image-button img{display:block;width:100%;height:100%;object-fit:contain}
.image-only-grid .instrument-image-button:focus-visible{outline:3px solid #044e65;outline-offset:2px}
.profile-picker{border:0;border-radius:16px;max-width:min(94vw,560px);width:100%;max-height:min(82dvh,700px);padding:18px;box-shadow:0 18px 60px #002d3570}
.profile-picker::backdrop{background:#002e3888}
.profile-picker-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.profile-picker-head h2{margin:0;color:#044e65}
.profile-picker-head button{border:0;background:#e2f6f7;border-radius:50%;width:36px;height:36px}
.profile-picker .profile-photo-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(95px,1fr));max-height:60dvh;overflow-y:auto;gap:12px;padding:15px 0;margin:0}
.profile-picker .profile-photo-choices button{width:100%;height:135px;border:2px solid transparent;border-radius:9px;cursor:pointer;overflow:hidden}
.profile-picker .profile-photo-choices button:focus-visible{border-color:#044e65}
.profile-picker .profile-photo-choices img{width:100%;height:100%;object-fit:contain}
.section-admin-panel{background:#f1fbfb;border-radius:9px;padding:12px;margin-top:12px}
.section-admin-panel p{font-size:12px;color:#334f54}
.section-admin-panel textarea{width:100%;resize:vertical;min-height:100px;padding:10px;border:1px solid #9dcacc;border-radius:8px;font:inherit}
.section-admin-actions{display:flex;gap:9px;justify-content:end;margin-top:10px}
@media(max-width:500px){.image-only-grid{gap:12px;padding-top:10px}.image-only-grid .instrument-image-button{padding:0}}

/* Original-style rectangular instrument artwork; image is the complete button. */
.image-only-grid .instrument-image-button{aspect-ratio:1.35/1;padding:0;border-radius:8px;overflow:hidden}
.image-only-grid .instrument-image-button img{width:100%;height:100%;object-fit:contain}
/* Selecting a book: the full rectangular cover is the button, with no captions. */
.book-cover-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:14px 0 24px}
.book-cover-button{display:block;width:100%;aspect-ratio:1.35/1;padding:0;background:transparent;border:0;border-radius:8px;overflow:hidden;cursor:pointer}
.book-cover-button:focus-visible{outline:3px solid #044e65;outline-offset:3px}
.book-cover-image,.book-cover-image .bookimage,.book-cover-image .bookfallback{display:block;width:100%;height:100%}
.book-cover-image .bookimage{object-fit:contain;background:transparent}
.book-cover-image .bookfallback{display:grid;place-items:center;border-radius:8px}
/* Pitch-preserving playback rate slider. */
.playback-speed-control{display:flex;align-items:center;gap:10px;margin:11px 0 8px}
.playback-speed-control label{display:block;flex:none;font-size:12px;font-weight:700;color:#044e65}
.playback-speed-control input[type=range]{flex:1;min-width:40px;width:auto;padding:0;margin:0;accent-color:#044e65;box-shadow:none;cursor:pointer}
.playback-speed-control output{flex:none;min-width:47px;font-size:13px;font-weight:750;color:#044e65;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:500px){
 .book-cover-grid{gap:12px}
 .playback-speed-control{gap:7px}
 .playback-speed-control label{font-size:11px}
}

/* Image-only profile chooser: no visible copy, just cover images and close icon. */
.profile-picker{padding:12px}
.profile-picker .profile-picker-head{justify-content:flex-end}
.profile-picker .profile-photo-choices{padding:8px 0 0}
.profile-picker-empty{display:block;width:100%;min-height:90px}
/* Keep original artwork intact inside distinctly landscape-oriented tap targets. */
.image-only-grid .instrument-image-button{aspect-ratio:1.65/1;border-radius:7px;overflow:hidden}
.image-only-grid .instrument-image-button img{width:100%;height:100%;object-fit:contain}

/* Keep published practice markers visible on small phone screens. */
.player{
 max-height:calc(100dvh - 112px - env(safe-area-inset-bottom));
 overflow-y:auto;
 overscroll-behavior:contain;
 scrollbar-width:thin;
}
.section-navigation{min-height:0}
@media(max-height:680px){
 .player{max-height:calc(100dvh - 96px - env(safe-area-inset-bottom));padding:11px}
 .section-navigation{margin-top:8px;padding-top:8px}
}

/* Visibly rectangular tiles even though the original instrument art is square. */
.instrument-grid.image-only-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;align-items:stretch}
.instrument-grid.image-only-grid .instrument-image-button{
 width:100%;height:auto;min-height:0;aspect-ratio:1.8 / 1;
 display:flex;align-items:center;justify-content:center;
 padding:9px 12px;margin:0;box-sizing:border-box;
 border:1px solid #c5e8e8;border-radius:10px;
 background:#eaf8f9;overflow:hidden;box-shadow:none;
}
.instrument-grid.image-only-grid .instrument-image-button img{
 display:block;width:auto;height:100%;max-width:100%;max-height:100%;
 aspect-ratio:1/1;object-fit:contain;
}
.section-marker-add{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.section-marker-add input{flex:2 1 140px;min-width:0;padding:10px}
.section-marker-add button{flex:1 1 160px;padding:9px;font-size:12px}
.section-draft-label{display:block;margin-top:12px;font-size:12px;font-weight:700}
#section-draft-count{font-size:12px;font-weight:700;color:#044e65;margin:5px 0}

/* Screenshot-matched original Android library: two portrait white cards. */
.original-library-grid,.original-book-grid{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:clamp(14px,6.5vw,48px);margin-top:22px;
 padding:0 2px 24px;align-items:start;
}
.original-instrument-card,.original-book-card{
 width:100%;aspect-ratio:0.80/1;background:white;
 border:0;border-radius:16px;box-shadow:0 2px 6px #064a5060;
 overflow:hidden;
}
.original-instrument-card{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 padding:13% 7% 11%;gap:6%;color:#090909;text-align:center;
}
.original-instrument-art{
 display:flex;justify-content:center;align-items:center;width:100%;height:60%;
}
.original-instrument-art img{display:block;height:100%;width:100%;object-fit:contain}
.original-instrument-card strong{
 font-family:Roboto,Arial,sans-serif;color:#080808;
 font-size:clamp(16px,4.1vw,27px);font-weight:650;line-height:1.15;
}
.original-book-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:11% 8% 12%;gap:4%}
.original-book-open{
 flex:0 0 64%;display:flex;align-items:center;justify-content:center;
 width:100%;height:64%;background:transparent;border:0;padding:0;min-height:0;
}
.original-book-open .bookimage,.original-book-open .bookfallback{
 width:100%;height:100%;object-fit:contain;background:transparent;
}
.original-book-delete{
 display:grid;place-items:center;border:0;border-radius:50%;
 width:clamp(34px,8vw,52px);height:clamp(34px,8vw,52px);
 padding:7px;color:#fff;background:#51c6d5;flex:none;
}
.original-book-open:focus-visible,.original-book-delete:focus-visible,.original-instrument-card:focus-visible{
 outline:3px solid #004e66;outline-offset:2px;
}
@media(min-width:700px){
 .original-library-grid,.original-book-grid{gap:24px;max-width:610px}
 .original-instrument-card,.original-book-card{max-height:370px}
}
@media(max-width:500px){
 .original-library-grid,.original-book-grid{gap:clamp(12px,6vw,38px);margin-top:18px;padding:0 2px 24px}
 .original-instrument-card,.original-book-card{border-radius:13px}
}

/* Minimal audio bar: deliberately no browser-native three-dot/settings button. */
.player audio:not([controls]){display:none}
.simple-audio-controls{display:flex;align-items:center;gap:9px;width:100%;padding:8px 2px 10px}
.simple-audio-controls #audio-toggle{width:36px;height:36px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:#49bdc7;color:#fff;font-size:15px;padding:0}
.simple-audio-controls .audio-time{font-size:12px;flex:none;font-variant-numeric:tabular-nums;color:#345b65}
.simple-audio-controls #audio-seek{flex:1;min-width:35px;margin:0;padding:0;height:22px;accent-color:#49bdc7;background:transparent;border:0;box-shadow:none}

/* Profile instrument icons reflect the unique instrument categories in Library. */
.profile-instrument-icons{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;min-height:80px;padding:4px 2px 10px}
.profile-instrument-icon{width:clamp(78px,23vw,110px);height:clamp(78px,23vw,110px);display:grid;place-items:center}
.profile-instrument-icon img{width:100%;height:100%;object-fit:contain}
.profile-instrument-icons>p{margin:8px 0;color:#777;font-size:14px;text-align:center}

/* Profile only: instrument icons shown as round badges, without the large white panel. */
.native-profile .profile-instruments-section{
 background:transparent;border:0;box-shadow:none;border-radius:0;
 margin:4px 3px 20px;padding:0;min-height:0;text-align:center;
}
.native-profile .profile-instruments-section .profile-section-heading{
 margin:0 0 15px;
}
.native-profile .profile-instruments-section .profile-section-heading h2{color:#fff}
.native-profile .profile-instruments-section .profile-instrument-icons{
 display:flex;justify-content:center;flex-wrap:wrap;gap:14px;
 padding:0;min-height:0;
}
.native-profile .profile-instruments-section .profile-instrument-icon{
 width:clamp(78px,24vw,108px);height:clamp(78px,24vw,108px);
 padding:10px;border-radius:50%;background:#fff;
 box-shadow:0 3px 11px #00424a30;overflow:hidden;flex:none;
}
.native-profile .profile-instruments-section .profile-instrument-icon img{
 width:100%;height:100%;object-fit:contain;
}
.native-profile .profile-instruments-section .profile-instrument-icons>p{
 color:white;
}
/* Profile name now saves on field change or Enter; no tick icon. */
.native-profile .profile-name-form{margin-right:3px}

/* Profile achievement medallions: one badge per fully completed book. */
.native-profile .profile-achievements{margin:22px 3px 18px;padding:2px 0 18px;text-align:center}
.native-profile .profile-achievements h2{font:750 20px Roboto,Arial,sans-serif;color:#fff;margin:0 0 16px}
.native-profile .achievement-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;align-items:center}
.native-profile .achievement-badge{position:relative;width:clamp(70px,20vw,95px);height:clamp(70px,20vw,95px);flex:none}
.native-profile .achievement-badge-medallion{
 width:100%;height:100%;border-radius:50%;overflow:hidden;
 background:#fff;border:4px solid #f6d46d;
 box-shadow:0 2px 0 #b88a1a,0 4px 12px #06444a55;
 display:grid;place-items:center;padding:6px;
}
.native-profile .achievement-badge-medallion img{width:100%;height:100%;object-fit:contain}
.native-profile .achievement-badge-fallback{font-size:36px;color:#d3a22a}
.native-profile .achievement-badge-check{
 position:absolute;right:-3px;bottom:0;display:grid;place-items:center;
 width:26px;height:26px;border-radius:50%;background:#32b89a;
 color:white;border:2px solid #fff;font-size:16px;font-weight:800;
}
.native-profile .achievement-empty{color:#fff;font-size:13px;margin:3px 0 10px;opacity:.9}

/* Header only: enlarge the actual MMA artwork within its circular badge. */
.top .brand img{width:54px;height:54px;min-width:54px;border-radius:50%;padding:0;object-fit:cover;background:#fff;display:block}
.top .brand{gap:10px}
@media(max-width:500px){.top .brand img{width:52px;height:52px;min-width:52px}}

/* Profile circular badges are shortcuts to their Library instrument books. */
.native-profile .profile-instruments-section button.profile-instrument-icon{
 display:grid;place-items:center;cursor:pointer;border:0;color:inherit;
 -webkit-tap-highlight-color:transparent;
}
.native-profile .profile-instruments-section button.profile-instrument-icon:focus-visible{
 outline:3px solid #073f4a;outline-offset:3px;
}
/* In-app confirmation retains the native prompt's wording and Cancel/OK,
   without the browser-added site origin. */
.confirm-dialog{border:0;border-radius:12px;padding:22px 24px;max-width:min(90vw,410px);width:100%;box-shadow:0 18px 65px #0005;color:#172342}
.confirm-dialog::backdrop{background:#0006}
.confirm-dialog p{font-size:15px;line-height:1.45;margin:0 0 23px}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px}
.confirm-actions button{min-width:75px}

/* Track list: original Android aqua circular play symbol. */
.track .play{border:0;border-radius:50%;background:transparent;color:inherit;box-shadow:none;padding:0;display:grid;place-items:center;width:46px;height:46px;flex:none}
.track .play .android-track-play-icon{width:46px;height:46px;display:block;overflow:visible}

/* Lightweight animated PWA launch splash. It is a transient overlay only,
   so it does not delay Firebase startup or alter the signed-in app. */
.launch-splash{
 position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
 padding:env(safe-area-inset-top) 24px env(safe-area-inset-bottom);
 background:#47bfc3;color:#fff;text-align:center;
 pointer-events:auto;opacity:1;
 transition:opacity .35s ease,visibility .35s ease;
}
.launch-splash-content{
 display:flex;flex-direction:column;align-items:center;
 justify-content:center;width:100%;max-width:340px;
 animation:none;
}
.launch-splash-logo{
 width:clamp(120px,34vw,160px);height:clamp(120px,34vw,160px);
 display:block;border-radius:50%;object-fit:contain;
 animation:splash-logo-settle .45s both ease-out;
 filter:drop-shadow(0 5px 11px #00717835);
}
.launch-splash-title{
 font-family:"Oswald","Arial Narrow",Roboto,Arial,sans-serif;
 font-size:clamp(35px,10vw,49px);font-weight:800;
 line-height:1.12;margin-top:20px;letter-spacing:.4px;
}
.launch-splash-subtitle{
 font-family:Roboto,Arial,sans-serif;font-size:clamp(15px,4vw,19px);
 font-weight:400;margin-top:6px;letter-spacing:.1px;
}
.launch-splash-rainbow{
 display:flex;justify-content:center;align-items:center;gap:7px;
 margin-top:23px;height:11px;
}
.launch-splash-rainbow span{
 display:block;width:29px;height:7px;border-radius:7px;
 opacity:0;transform:translateY(16px) scaleX(.3);
 animation:splash-rainbow-pop .38s both cubic-bezier(.1,.88,.2,1.2);
}
.launch-splash-rainbow span:nth-child(1){background:#ed3438;animation-delay:.38s}
.launch-splash-rainbow span:nth-child(2){background:#ffd63f;animation-delay:.48s}
.launch-splash-rainbow span:nth-child(3){background:#32bc56;animation-delay:.58s}
.launch-splash-rainbow span:nth-child(4){background:#2281d5;animation-delay:.68s}
.launch-splash-rainbow span:nth-child(5){background:#ad4dc1;animation-delay:.78s}
.launch-splash.launch-splash-exit{opacity:0;visibility:hidden;pointer-events:none}
@keyframes splash-logo-settle{
 from{opacity:1;transform:scale(.96)}to{opacity:1;transform:scale(1)}
}
@keyframes splash-content-rise{
 from{transform:translateY(13px)}to{transform:translateY(0)}
}
@keyframes splash-rainbow-pop{
 from{opacity:0;transform:translateY(16px) scaleX(.3)}
 to{opacity:1;transform:translateY(0) scaleX(1)}
}
@media(prefers-reduced-motion:reduce){
 .launch-splash,.launch-splash-content,.launch-splash-logo,
 .launch-splash-rainbow span{animation:none!important;transition:none!important}
 .launch-splash-rainbow span{opacity:1;transform:none}
}

/* Keep logo visible from the first frame so the OS launch icon doesn't
   disappear and then reappear as the custom splash starts. */
.launch-splash-logo{opacity:1}
.launch-splash-title,.launch-splash-subtitle{
 animation:splash-text-reveal .48s .12s both ease-out;
}
@keyframes splash-text-reveal{
 from{opacity:0;transform:translateY(6px)}
 to{opacity:1;transform:translateY(0)}
}

/* Match playback-bar toggle exactly to the Android-style track-list play button. */
.simple-audio-controls #audio-toggle{width:46px;height:46px;min-width:46px;flex:none;border:0;border-radius:50%;padding:0;background:transparent;display:grid;place-items:center;box-shadow:none}
.simple-audio-controls #audio-toggle .android-track-play-icon{display:block;width:46px;height:46px;overflow:visible}

/* Book track view: artwork and an accessible completion progress bar. */
.detailtop .book-progress{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:8px}
.detailtop .book-progress-track{width:100%;height:15px;overflow:hidden;border-radius:100px;background:#d4eeee;box-shadow:inset 0 1px 3px #1356611c}
.detailtop .book-progress-fill{height:100%;border-radius:inherit;background:#ffd43b;transition:width .24s ease;position:relative}
@media(max-width:500px){.detailtop .book-progress-track{height:13px}}

.detailtop .book-progress-count{color:#075367;font-size:13px;font-weight:650;text-align:center;font-variant-numeric:tabular-nums}

/* Solid yellow progress with a star at the completed edge. */
.detailtop .book-progress-track{overflow:visible;position:relative}
.detailtop .book-progress-star{position:absolute;right:0;top:50%;transform:translate(45%,-50%);font-size:24px;line-height:1;color:#ffc928;text-shadow:0 1px 2px #845d2359;-webkit-text-stroke:1px #e0a51e;pointer-events:none}
.detailtop .book-progress-count{font-size:18px;font-weight:750;line-height:1.3}


/* Practice tools */
.tool-switch,.instrument-tabs{display:flex;gap:8px;margin:18px 0 14px;overflow-x:auto}
.tool-switch button,.instrument-tabs button{flex:1;border:1px solid #d7eeee;background:#ffffffd9;color:#044e65;border-radius:9px;padding:11px 12px;font-weight:750;white-space:nowrap}
.tool-switch button.selected,.instrument-tabs button.active{background:#044e65;color:white;border-color:#044e65}
.practice-card{max-width:540px;margin:0 auto;background:white;border-radius:14px;padding:22px;box-shadow:0 4px 16px #06494c22}
.practice-card .eyebrow{color:#12848a}.tempo-readout{text-align:center;margin:7px 0 4px;color:#044e65}.tempo-readout strong{font-size:72px;line-height:1;font-weight:850;letter-spacing:-3px}.tempo-readout span{display:inline-block;margin-left:8px;font-size:15px;font-weight:700;color:#638087}
.tempo-slider{accent-color:#044e65;padding:0;margin:13px 0 3px}.tempo-range{display:flex;justify-content:space-between;color:#789092;font-size:11px}.tempo-presets{display:flex;justify-content:space-between;gap:6px;margin:14px 0 19px}.tempo-presets button{background:#e6f8f8;color:#075361;border:0;border-radius:8px;padding:8px 10px;font-weight:700}.tempo-presets button.active{background:#b8eded;box-shadow:inset 0 0 0 1px #54bfc1}
.signature-label{display:flex;align-items:center;justify-content:space-between;color:#24444a;margin:10px 0 16px}.signature-label select{max-width:145px;padding:9px;border:1px solid #cde3e4;border-radius:8px;background:#fff;color:#173b41}
.beat-dots{display:flex;justify-content:center;gap:12px;margin:13px 0 18px}.beat-dot{height:12px;width:12px;border-radius:50%;background:#d7e8e8;transition:transform .08s,background .08s}.beat-dot.on{background:#e7a800;transform:scale(1.45)}
.tool-main-button{width:100%;min-height:50px;font-size:16px}.tool-hint{text-align:center;color:#657b80;font-size:12px;line-height:1.5;margin:13px 0 0}
.string-list{display:flex;justify-content:center;gap:8px;margin:17px 0 16px}.string-list span{background:#e7f8f8;color:#075361;border-radius:20px;padding:7px 12px;font-size:13px;font-weight:750}
.tuner-display{text-align:center;min-height:197px;padding:9px 8px 17px}.tuner-guidance{font-size:13px;color:#5c7478;font-weight:650}.tuner-note{font-size:70px;line-height:1.05;font-weight:850;color:#044e65;margin:5px 0}.tuner-frequency{font-size:14px;color:#678084}.tuner-meter{display:flex;align-items:center;gap:11px;max-width:340px;margin:20px auto 0;color:#82999b;font-weight:800}.meter-scale{position:relative;flex:1;height:8px;background:linear-gradient(90deg,#e27666 0%,#e6bb52 33%,#53bc91 50%,#e6bb52 67%,#e27666 100%);border-radius:5px}.meter-scale i{position:absolute;left:50%;top:-5px;height:18px;border-left:2px solid #154e53}.meter-marker{position:absolute;top:-5px;width:4px;height:18px;background:#123940;border-radius:3px;transform:translateX(-50%);transition:left .09s}.tuner-cents{height:20px;font-size:12px;color:#446568;font-weight:750;margin-top:8px}
@media(max-width:500px){.practice-card{padding:18px 15px}.tempo-readout strong{font-size:64px}.tempo-presets{gap:4px}.tempo-presets button{padding:8px 7px;font-size:12px}.instrument-tabs{gap:5px}.instrument-tabs button{padding:10px 6px;font-size:13px}.string-list{gap:5px}.string-list span{padding:7px 9px;font-size:12px}}


/* Tools navigation uses the supplied circular wrench artwork. */
#nav{overflow:visible}
#nav button{min-height:84px;height:auto;padding:2px 2px 6px;gap:2px;overflow:visible}
#nav button img.tool-tab-icon{display:block;width:48px;height:48px;max-width:48px;max-height:48px;object-fit:contain;object-position:center;border-radius:0;flex:0 0 48px;overflow:visible}
/* Metronome transport uses the same aqua play/pause buttons as the track player. */
.metro-transport{display:grid;place-items:center;width:46px;height:46px;margin:16px auto 4px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.metro-transport .android-track-play-icon{display:block;width:46px;height:46px;overflow:visible}


/* The square source artwork is clipped to its intended transparent circle.
   Give the Tools tab extra vertical room so the complete wrench stays visible. */
#nav button[data-nav="tools"]{min-height:88px;height:auto;padding:3px 2px 7px;gap:2px;overflow:visible}
#nav button[data-nav="tools"] img.tool-tab-icon{display:block;width:48px;height:48px;min-height:48px;max-height:48px;object-fit:contain;object-position:center;flex:0 0 48px;border-radius:50%;clip-path:circle(50% at 50% 50%);overflow:visible}