:root{--fd:'Fraunces',serif;--fn:'Poppins','Outfit',sans-serif;--fb:'Outfit','Poppins',sans-serif;--fm:'IBM Plex Mono',monospace;--r:16px;--rs:12px;--rx:8px;--tr:0.25s ease;--bg:#0F1216;--sf:#151A20;--s2:#1C2128;--s3:#242B34;--bd:rgba(255,255,255,0.07);--tx:rgba(255,255,255,0.92);--td:rgba(255,255,255,0.55);--tm:rgba(255,255,255,0.28);--a1:#ff9484;--a1g:rgba(255,148,132,0.18);--a2:#78e8e0;--a2g:rgba(120,232,224,0.15);--a3:#ffe0a0;--a3g:rgba(255,224,160,0.15);--a4:#c4b4ff;--a4g:rgba(196,180,255,0.18);--a5:#f4b0d8;--a5g:rgba(244,176,216,0.15);--a6:#98c8ff;--a6g:rgba(152,200,255,0.15);--a7:#80e8b8;--a7g:rgba(128,232,184,0.15);--a8:#ffc888;--a8g:rgba(255,200,136,0.15);--gn:#80e8b8;--gng:rgba(128,232,184,0.2);--rd:#ff9494;--sh:0 2px 0 rgba(0,0,0,0.3);--sb:rgba(15,18,22,0.92);--c-card:#1C2128;--c-card-edge:#151A20}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Prevent double-tap zoom on all interactive elements — iOS Safari ignores user-scalable=no */
button,a,[onclick],[role="button"],input,select,textarea,.nb,.ch,.sb,.ib,.tb,.rhtb{touch-action:manipulation}
body{font-family:var(--fb);background:var(--bg);color:var(--tx);min-height:100dvh;overflow-x:hidden}
.app{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:12px 14px 120px}
.hd{display:flex;align-items:center;justify-content:space-between;padding:14px 0;padding-top:calc(env(safe-area-inset-top) + 14px);flex-shrink:0}#p-home.on{overflow-y:hidden;flex:1;padding-bottom:80px}#p-home::-webkit-scrollbar{display:none}
.logo-text{font-family:var(--fd);font-size:1.6rem;font-weight:700;line-height:1.1}
.logo-sub{font-family:var(--fn);font-size:0.52rem;letter-spacing:0.22em;text-transform:uppercase;font-weight:700;display:flex;gap:4px}
.logo-sub span:first-child{color:rgba(255,255,255,0.35)}
.logo-sub span:last-child{color:rgba(255,255,255,0.35)}
@keyframes logoShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hd-greet{flex:1;text-align:center;overflow:hidden;animation:greetFadeIn 0.6s ease-out;padding:0 4px}
.hd-greet-line{font-family:var(--fn);font-size:0.7rem;font-weight:700;color:var(--td);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.2;letter-spacing:0.03em}
.hd-greet-name{font-family:var(--fd);font-size:1.15rem;font-weight:700;background:linear-gradient(135deg,var(--a4),var(--a5),var(--a2));background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.2;animation:logoShimmer 6s ease-in-out infinite}
@keyframes greetFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.set-name-input{font-family:var(--fb);font-size:0.72rem;padding:6px 10px;border-radius:8px;border:1.5px solid var(--bd);background:var(--sf);color:var(--tx);width:120px;text-align:right;outline:none;transition:border-color 0.2s}
.set-name-input:focus{border-color:var(--a4)}
.set-name-input::placeholder{color:var(--tm);font-size:0.62rem}
.hd h1{font-family:var(--fd);font-size:1.5rem;font-weight:700}
.hd p{font-size:0.6rem;color:var(--tm);letter-spacing:0.18em;text-transform:uppercase;font-weight:600}
.ha{display:flex;align-items:center;gap:5px}
/* Glass-morphism icon buttons */
.ib{width:34px;height:34px;border-radius:9px;border:1.5px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--td);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.ib:active{transform:scale(0.92);background:rgba(255,255,255,0.08)}.ib svg{width:16px;height:16px}.ib.on{background:var(--a1);color:#fff;border-color:var(--a1);box-shadow:0 0 16px var(--a1g)}
/* Bottom nav - frosted glass with glow */
.bn{position:fixed;bottom:0;left:0 !important;transform:none !important;background:rgba(20,22,26,0.96);z-index:100;width:100% !important;max-width:100% !important;overflow:visible}
.bn-cats{display:flex;justify-content:space-around;padding:4px 6px calc(env(safe-area-inset-bottom) + 8px);gap:6px;overflow:visible}.bn-cats button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 6px;border:none;background:transparent;color:rgba(255,255,255,0.45);font-family:var(--fn);font-size:0.52rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;position:relative;transition:all .15s;text-decoration:none;border-radius:14px}.bn-cats button svg{width:28px;height:28px;transition:all .15s}.bn-cats button.on{}.bn-cats button.on svg{transform:scale(1.15)}.bn-cats button:active{transform:translateY(2px)}
.bn-cats button.on::after{display:none}
.bn-cats button[data-cat="home"]{color:#7ede6a}
.bn-cats button[data-cat="train"]{color:#f0a830}
.bn-cats button[data-cat="learn"]{color:#60a5fa}
.bn-cats button[data-cat="tools"]{color:#e05050}
.bn-cats button[data-cat="ai"]{color:#a78bfa}
.tool-drawer{position:fixed;left:50%;transform:translateX(-50%) translateY(100%);background:rgba(18,18,24,0.85);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);border-top:2px solid rgba(255,255,255,0.08);z-index:99;transition:transform .25s cubic-bezier(.4,0,1,1);padding:12px 12px 24px;max-height:70vh;overflow-y:auto;border-radius:20px 20px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.06);width:100%;max-width:480px;bottom:calc(56px + env(safe-area-inset-bottom,0px));pointer-events:none}.tool-drawer.on{transform:translateX(-50%) translateY(0);pointer-events:auto;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.tool-drawer[data-cat="train"]{border-top-color:#ff8c42;background:linear-gradient(180deg,rgba(255,140,66,0.10) 0%,rgba(18,18,24,0.88) 50%);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px)}
.tool-drawer[data-cat="learn"]{border-top-color:#a78bfa;background:linear-gradient(180deg,rgba(167,139,250,0.10) 0%,rgba(18,18,24,0.88) 50%);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px)}
.tool-drawer[data-cat="tools"]{border-top-color:#60a5fa;background:linear-gradient(180deg,rgba(96,165,250,0.10) 0%,rgba(18,18,24,0.88) 50%);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px)}
.tool-drawer[data-cat="ai"]{border-top-color:#f472b6;background:linear-gradient(180deg,rgba(244,114,182,0.10) 0%,rgba(18,18,24,0.88) 50%);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px)}
.tool-drawer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--bd)}.tool-drawer-header span{font-family:var(--fb);font-size:0.6rem;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.4);font-weight:700}.tool-drawer-close{background:none;border:none;color:var(--tm);cursor:pointer;font-size:1.2rem;padding:4px 8px}
.tool-drawer[data-cat="train"] .tool-drawer-header span{color:#ff8c42}
.tool-drawer[data-cat="learn"] .tool-drawer-header span{color:#a78bfa}
.tool-drawer[data-cat="tools"] .tool-drawer-header span{color:#60a5fa}
.tool-drawer[data-cat="ai"] .tool-drawer-header span{color:#f472b6}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tool-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 6px 14px;border-radius:14px;border:1px solid rgba(255,255,255,0.20) !important;background:linear-gradient(180deg,color-mix(in srgb,var(--pc,#888) 45%,#1a1a1a) 0%,color-mix(in srgb,var(--pc,#888) 20%,#0a0a0a) 100%) !important;box-shadow:0 4px 12px rgba(0,0,0,0.40),inset 0 1px 0 rgba(255,255,255,0.18),inset 0 -2px 4px rgba(0,0,0,0.35) !important;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;position:relative;overflow:hidden}
.tool-btn:active{transform:scale(0.97) !important;box-shadow:0 4px 8px rgba(0,0,0,0.60),inset 0 2px 8px rgba(0,0,0,0.40) !important}
.tool-btn svg{width:36px;height:36px;color:#fff5e8 !important}
.tool-btn span{font-family:var(--fn);font-size:0.54rem;font-weight:500;color:#fff !important;text-transform:uppercase;letter-spacing:0.04em;text-align:center;line-height:1.2}
.tool-btn.active{border-color:var(--pc) !important;background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 55%,#1a1a1a) 0%,color-mix(in srgb,var(--pc) 28%,#0a0a0a) 100%) !important;box-shadow:0 4px 12px color-mix(in srgb,var(--pc) 25%,transparent),inset 0 1px 0 rgba(255,255,255,0.18),inset 0 -2px 4px rgba(0,0,0,0.35) !important}
.tool-btn.active svg{color:#fff5e8 !important;filter:drop-shadow(0 0 6px rgba(255,245,232,0.3))}
.tool-btn.active span{color:var(--pc) !important}
.tool-btn .pro-dot{position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,#ffd166,#f0a040)}
.tool-btn .ai-dot{position:absolute;top:2px;left:5px;font-size:1.0rem;color:#f472b6;line-height:1;text-shadow:0 0 6px rgba(244,114,182,0.8)}
/* Duo-style Quick Start tiles */
.qs-tile{display:flex;align-items:center;gap:10px;padding:16px 14px;border-radius:14px;border:none;cursor:pointer;transition:all .12s;width:100%;text-align:left;font-size:14px;font-weight:700;color:#fff}
.qs-tile:active{transform:translateY(2px)}
.qs-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(0,0,0,0.2) !important}
.qs-icon svg{width:20px;height:20px;color:#fff}
.pn:not(#p-home) .qs-tile{background:var(--c-card);border-bottom:4px solid var(--c-card-edge)}.pn:not(#p-home) .qs-tile:active{border-bottom-width:1px}
.pn:not(#p-home) .qs-tile span{font-family:var(--fb);font-size:0.78rem}
.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,0.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:98;opacity:0;pointer-events:none;transition:opacity .3s}.drawer-scrim.on{opacity:1;pointer-events:auto}
.nb{display:none}/* legacy - replaced by tool-grid */
.nb svg{width:18px;height:18px}.nb.on{color:var(--tx)}.nb.on::after{content:'';position:absolute;top:0;left:25%;right:25%;height:2px;background:currentColor;border-radius:0 0 2px 2px}
.nb[data-t="pitch"].on{color:var(--a1)}.nb[data-t="tuner"].on{color:var(--a2)}.nb[data-t="metro"].on{color:var(--a3)}.nb[data-t="bpm"].on{color:var(--a4)}.nb[data-t="chords"].on{color:var(--a5)}.nb[data-t="ear"].on{color:var(--a6)}.nb[data-t="scales"].on{color:var(--a7)}.nb[data-t="score"].on{color:var(--a8)}.nb[data-t="drone"].on{color:var(--a2)}.nb[data-t="warmup"].on{color:var(--a3)}.nb[data-t="rhythm"].on{color:var(--a4)}.nb[data-t="cof"].on{color:var(--a5)}.nb[data-t="prog"].on{color:var(--a6)}.nb[data-t="loop"].on{color:var(--a7)}.nb[data-t="rec"].on{color:var(--a1)}
.pn{display:none;animation:panelIn .35s cubic-bezier(.22,1,.36,1);--pc:var(--a2)}.pn.on{display:block}.pn:not(#p-home){padding-top:env(safe-area-inset-top)}#p-home.on{display:flex}#p-home .cd+.cd{margin-top:0}#p-proglib.on{display:flex;flex-direction:column;gap:16px;padding:16px 16px 120px}
/* Panel accent colors */
#p-tuner{--pc:#78e8e0}#p-pitch{--pc:#c0392b}
#p-metro{--pc:#d4a820}#p-bpm{--pc:#c4b4ff}
#p-chords{--pc:#f4b0d8}#p-prog{--pc:#a855f7}
#p-jazzlab{--pc:#1CB0F6}#p-scales{--pc:#fb923c}
#p-proglib{--pc:#e85d75}
#p-ear{--pc:#f97316}#p-inton{--pc:#34d399}
#p-score{--pc:#f472b6}#p-sight{--pc:#c084fc}
#p-drone{--pc:#14b8a6}#p-freq{--pc:#06b6d4}
#p-warmup{--pc:#3b82f6}
#p-rhythm{--pc:#7a5aaa}#p-beatbuild{--pc:#6b4a9a}
#p-cof{--pc:#a78bfa}
#p-loop{--pc:#22c55e}
#p-rec{--pc:#34d399}
#p-setlist{--pc:#8b5cf6}
#p-trans{--pc:#f97316}
#p-stage{--pc:#f43f5e}
#p-share{--pc:#14b8a6}
#p-analytics{--pc:#f0a830}
#p-session{--pc:#60a5fa}
#p-tempotr{--pc:#ef4444}
#p-nash{--pc:#ca8a04}
#p-keyfind{--pc:#22c55e}
#p-db{--pc:#8b5cf6}
#p-history{--pc:#34d399;max-width:520px;margin:0 auto;padding:12px 14px 100px;box-sizing:border-box}

/* --- Music History: Museum/Editorial --- */
.hist-stack{display:flex;flex-direction:column;gap:8px}

.hist-card{position:relative;width:100%;height:120px;border-radius:12px;overflow:hidden;cursor:pointer;border-left:3px solid var(--era-color,var(--a4));background-size:cover;background-position:center}
.hist-card__overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,0.85) 40%,rgba(0,0,0,0.3) 100%)}
.hist-card__info{position:absolute;bottom:14px;left:14px}
.hist-card__name{font-family:var(--fd);font-size:1.1rem;font-weight:700;color:#fff}
.hist-card__years{font-family:var(--fn);font-size:0.6rem;color:rgba(255,255,255,0.55);margin-top:2px}
.hist-card__badge{position:absolute;top:10px;right:10px;font-family:var(--fn);font-size:0.55rem;color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.12);padding:3px 8px;border-radius:10px}
.hist-card:active{transform:scale(0.98);transition:transform .1s}

.hist-reader{animation:histFadeIn .25s ease}
@keyframes histFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.hist-hero{position:relative;width:100%;height:220px;border-radius:12px;overflow:hidden}
.hist-hero__img{width:100%;height:100%;object-fit:cover}
.hist-hero__gradient{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,var(--bg) 100%)}
.hist-hero__back{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.45);border:none;color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.hist-hero__back:active{background:rgba(0,0,0,0.7)}
.hist-hero__info{position:absolute;bottom:16px;left:16px;z-index:2}
.hist-hero__name{font-family:var(--fd);font-size:1.4rem;font-weight:700;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,0.6)}
.hist-hero__years{font-family:var(--fn);font-size:0.65rem;color:rgba(255,255,255,0.6);margin-top:2px}
.hist-hero__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.hist-hero__watermark{font-family:var(--fd);font-size:3rem;font-weight:700;opacity:0.1;color:#fff;text-align:center;line-height:1.1}

.hist-tab-row{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px 12px}
.hist-pills{display:flex;gap:6px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:12px 0 8px 0}
.hist-pills::-webkit-scrollbar{display:none}
.hist-pill{flex-shrink:0;padding:5px 12px;border-radius:14px;font-family:var(--fn);font-size:0.6rem;color:var(--td);background:var(--s2);border:1px solid var(--bd);cursor:pointer;white-space:nowrap;transition:all .15s}
.hist-pill.active{color:#fff;border-color:var(--era-color,var(--a4));background:color-mix(in srgb,var(--era-color,var(--a4)) 20%,transparent)}
.hist-pill-count{font-family:var(--fn);font-size:0.55rem;color:var(--tm);flex-shrink:0;display:flex;align-items:center;padding-left:6px}

.hist-article__title{font-family:var(--fd);font-size:1.2rem;font-weight:700;color:#fff;margin:16px 16px 8px;line-height:1.3}
.hist-article__body{padding:0 16px}
.hist-article__body p{font-family:var(--fn);font-size:0.78rem;line-height:1.75;color:var(--tx);margin-bottom:14px}

.hist-nav{display:flex;justify-content:space-between;padding:16px;gap:12px}
.hist-nav__btn{background:none;border:none;font-family:var(--fn);font-size:0.7rem;color:var(--era-color,var(--a4));cursor:pointer;padding:8px 0;flex:1}
.hist-nav__btn:hover{opacity:0.8}
.hist-nav__btn--prev{text-align:left}
.hist-nav__btn--next{text-align:right}
.hist-nav__btn:disabled{color:var(--tm);cursor:default;opacity:0.3}
@keyframes panelIn{from{opacity:0;transform:translateY(12px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Glass cards with depth, panel-tinted */
.cd{background:linear-gradient(180deg,var(--panel-top) 0%,var(--panel-bottom) 100%);border:1px solid var(--panel-stroke);border-radius:var(--panel-radius);padding:20px 16px;box-shadow:0 16px 24px rgba(0,0,0,0.80),inset 0 1px 0 rgba(255,255,255,0.15),inset 0 -2px 8px rgba(0,0,0,0.30);transition:transform .1s,box-shadow .1s;position:relative;overflow:hidden}.cd::before{content:'';position:absolute;top:0;left:0;right:0;height:60px;background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 6%,transparent) 0%,transparent 100%);pointer-events:none;border-radius:var(--panel-radius) var(--panel-radius) 0 0}.cd:active{transform:translateY(2px)}.cd+.cd{margin-top:10px}
/* Home screen card surfaces */
.cadenze-panel{background:linear-gradient(180deg,var(--panel-top) 0%,var(--panel-bottom) 100%);border:1px solid var(--panel-stroke);border-radius:var(--panel-radius);box-shadow:0 16px 24px rgba(0,0,0,0.80),inset 0 1px 0 rgba(255,255,255,0.15),inset 0 -2px 8px rgba(0,0,0,0.30);position:relative}
.cadenze-theory{border:1px solid rgba(255,255,255,0.20);border-radius:var(--panel-radius)}
.ct{font-size:0.82rem;font-weight:800;color:var(--tx);margin-bottom:10px;letter-spacing:0}
.ct-icon{font-size:0.9rem;margin-right:3px;vertical-align:-1px}
/* Tool bar breadcrumb */
.tool-bar{display:none;align-items:center;gap:8px;padding:6px 0 2px;animation:greetFadeIn 0.3s ease-out}
.tool-bar.on{display:flex}
.tool-bar-back{background:none;border:none;color:var(--tm);cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.tool-bar-back:active{transform:scale(0.9);color:var(--tx)}
.tool-bar-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tool-bar-name{font-family:var(--fn);font-size:0.72rem;font-weight:700;color:var(--tx);letter-spacing:0.02em}
/* Empty states */
.empty-state{text-align:center;padding:20px 10px}
.empty-icon{width:36px;height:36px;margin:0 auto 8px;color:var(--tm);opacity:0.5}
.empty-msg{font-family:var(--fn);font-size:0.78rem;font-weight:700;color:var(--td);margin-bottom:4px}
.empty-sub{font-family:var(--fm);font-size:0.6rem;color:var(--tm);line-height:1.4}
/* Stats grid */
.pn:not(#p-home) .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pn:not(#p-home) .stat-box{background:linear-gradient(180deg, var(--tile-top) 0%, var(--tile-bottom) 100%);border-radius:var(--rs, 12px);border:1px solid var(--tile-stroke);box-shadow:var(--tile-shadow), inset 0 1px 0 rgba(255,255,255,0.12);padding:12px 10px;text-align:center;position:relative}
.pn:not(#p-home) .stat-val{font-family:var(--fd);font-size:1.4rem;font-weight:700;line-height:1.1}
.pn:not(#p-home) .stat-label{font-family:var(--fn);font-size:0.52rem;font-weight:700;color:var(--tm);text-transform:uppercase;letter-spacing:0.06em;margin-top:2px}
/* Home ad card (free users) */
.home-ad-card{text-align:center}
.home-ad-area{border-radius:12px;background:var(--s2);border:1px dashed var(--bd);padding:20px 12px;margin-bottom:8px}
.home-ad-label{font-family:var(--fn);font-size:0.45rem;font-weight:700;color:var(--tm);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;opacity:0.6}
.home-ad-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100px}
.home-ad-cta{font-family:var(--fn);font-size:0.6rem;font-weight:700;color:var(--a3);cursor:pointer;padding:6px 0;transition:color .15s}
.home-ad-cta:active{color:var(--a4)}
/* Interstitial ad overlay */
.interstitial{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;animation:interIn 0.3s ease-out}
.interstitial.out{animation:interOut 0.25s ease-in forwards}
@keyframes interIn{from{opacity:0}to{opacity:1}}
@keyframes interOut{from{opacity:1}to{opacity:0}}
@keyframes aitxSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.interstitial-top{display:flex;justify-content:flex-end;padding:env(safe-area-inset-top,12px) 16px 8px;background:rgba(0,0,0,0.15)}
.interstitial-dismiss{font-family:var(--fn);font-size:0.72rem;font-weight:700;color:var(--a2);cursor:pointer;padding:8px 14px;border-radius:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);transition:all .15s;letter-spacing:0.02em}
.interstitial-dismiss:active{transform:scale(0.96);background:rgba(255,255,255,0.1)}
.interstitial-body{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}
.interstitial-ad-area{width:100%;max-width:340px;text-align:center}
.interstitial-ad-label{font-family:var(--fn);font-size:0.45rem;font-weight:700;color:var(--tm);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:10px;opacity:0.5}
.interstitial-ad-box{background:var(--sf);border:1px dashed var(--bd);border-radius:16px;padding:40px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:250px}
.interstitial-footer{display:flex;align-items:center;justify-content:center;padding:12px 16px calc(env(safe-area-inset-bottom,8px)+8px);gap:4px}
/* Gradient accent utilities */
.grad-btn{border:none;background:linear-gradient(135deg,var(--a3),var(--a8),var(--a5));color:var(--bg);font-weight:700;box-shadow:0 4px 16px rgba(255,209,102,0.2);text-shadow:0 1px 2px rgba(0,0,0,0.2)}.grad-btn:active{box-shadow:0 1px 4px rgba(255,209,102,0.15);transform:scale(0.95)}
.grad-teal{border:none;background:linear-gradient(135deg,var(--a2),var(--a7));color:var(--bg);font-weight:700;box-shadow:0 4px 16px rgba(78,205,196,0.2)}.grad-teal:active{transform:scale(0.95)}
.grad-violet{border:none;background:linear-gradient(135deg,var(--a4),var(--a5));color:#fff;font-weight:700;box-shadow:0 4px 16px rgba(167,139,250,0.2)}.grad-violet:active{transform:scale(0.95)}
.grad-fire{border:none;background:linear-gradient(135deg,var(--a1),var(--a8));color:#fff;font-weight:700;box-shadow:0 4px 16px rgba(255,107,74,0.2)}.grad-fire:active{transform:scale(0.95)}
.grad-text{background:linear-gradient(135deg,var(--a4),var(--a2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* Big action buttons — pedalboard stomp style */
.bb{width:64px;height:64px;border-radius:50%;border:2px solid;background:var(--sf);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;box-shadow:0 4px 16px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.1);backdrop-filter:blur(8px)}.bb:active{transform:scale(0.93);box-shadow:0 1px 4px rgba(0,0,0,0.15)}.bb svg{width:24px;height:24px}
.st{text-align:center;margin-top:8px;font-size:0.74rem;color:var(--tm);font-weight:500}
.fc{display:flex;justify-content:center;margin-top:16px}
/* Pill buttons — gradient glass with color */
.ch{padding:6px 14px;border-radius:20px;border:1.5px solid var(--bd);background:var(--c-card);color:var(--td);font-family:var(--fb);font-size:0.74rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s;border-bottom:3px solid var(--c-card-edge)}.ch:active{transform:translateY(2px);border-bottom-width:1px}.ch:hover{border-color:var(--bd);color:var(--tx)}
.cg{display:flex;flex-wrap:wrap;gap:5px}
/* Preset pills — embossed look */
.pl{padding:5px 10px;border-radius:8px;border:1.5px solid rgba(255,255,255,0.08);background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.01));color:var(--td);font-family:var(--fm);font-size:0.74rem;cursor:pointer;transition:all .15s;box-shadow:0 2px 4px rgba(0,0,0,0.12)}.pl:active{transform:scale(0.96);box-shadow:inset 0 1px 3px rgba(0,0,0,0.3)}
.db{font-family:var(--fd);font-size:4rem;line-height:1;text-align:center}
.dl{font-size:0.68rem;color:var(--tm);text-transform:uppercase;letter-spacing:0.14em;text-align:center;margin-top:2px;font-weight:600}
.ds{font-family:var(--fd);font-style:italic;font-size:0.92rem;color:var(--td);text-align:center;margin-top:3px}
/* Sliders — gradient thumb */
.sl{-webkit-appearance:none;appearance:none;width:100%;height:5px;background:var(--s3);border-radius:3px;outline:none}.sl::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
/* Round adjust buttons — 3D press */
.ab{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.08);background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.01));color:var(--tx);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.06);transition:all .1s}.ab:active{transform:scale(0.9);box-shadow:inset 0 2px 4px rgba(0,0,0,0.3)}
canvas{display:block}
.sr{display:flex;gap:5px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}.sr::-webkit-scrollbar{display:none}
/* Small round buttons — knurled metal feel */
.sb{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.08);background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.01));color:var(--tx);font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,0.15);transition:opacity .1s,box-shadow .1s}.sb:active{opacity:0.6;box-shadow:inset 0 1px 3px rgba(0,0,0,0.3)}
.vd{font-family:var(--fm);font-size:0.92rem;font-weight:600;min-width:16px;text-align:center}
/* Modal — frosted glass */
.mo{display:none;position:fixed;inset:0;background:rgba(14,15,26,0.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:200;align-items:center;justify-content:center;padding:20px}.mo.op,.mo.on{display:flex}
.md{background:linear-gradient(145deg,rgba(20,20,24,0.97),rgba(28,26,30,0.95));border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:22px 18px;max-width:380px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.05);max-height:80vh;overflow-y:auto;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.md h2{font-family:var(--fd);font-size:1.2rem;margin-bottom:4px}.md p{font-size:0.78rem;color:var(--td);margin-bottom:14px}
#setm .md{background:rgba(18,18,24,0.88);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,0.08);border-radius:24px;box-shadow:0 8px 48px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.06);scrollbar-width:none;-ms-overflow-style:none;position:relative}
#setm .md::-webkit-scrollbar{display:none}
/* Onboarding */
.ob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:300;align-items:center;justify-content:center;padding:20px}.ob-overlay.op{display:flex}
.ob-card{background:linear-gradient(145deg,rgba(16,16,24,0.95),rgba(24,24,36,0.9));border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:28px 22px;max-width:340px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.ob-card h2{font-family:var(--fd);font-size:1.6rem;margin-bottom:8px}.ob-card p{font-size:0.85rem;color:var(--td);margin-bottom:20px;line-height:1.6}
.ob-dots{display:flex;gap:6px;justify-content:center;margin-bottom:16px}.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--s3)}.ob-dot.on{background:var(--a1)}
.ob-btn{padding:12px 28px;border-radius:var(--rs);border:none;background:linear-gradient(135deg,var(--a1),var(--a3));color:#fff;font-family:var(--fb);font-size:0.9rem;font-weight:600;cursor:pointer;transition:all .15s;box-shadow:0 4px 16px rgba(255,107,74,0.3)}.ob-btn:active{transform:scale(0.95);box-shadow:0 2px 8px rgba(255,107,74,0.2)}
/* Pitch pipe dial — SVG container */
.pg{width:100%;max-width:400px;margin:0 auto;line-height:0}
/* Tuner */
.tn{font-family:var(--fd);font-size:3.8rem;line-height:1;text-align:center;color:var(--a2);text-shadow:0 0 32px var(--a2g),0 0 64px rgba(78,205,196,0.08);transition:color .3s}.tn.it{color:var(--gn);text-shadow:0 0 32px var(--gng),0 0 64px rgba(74,222,128,0.08)}
.tm{margin:18px 0 12px;position:relative;height:48px}
.mb{position:absolute;top:50%;left:10%;right:10%;height:3px;background:var(--s3);border-radius:2px;transform:translateY(-50%)}
.mt{position:absolute;top:50%;left:10%;right:10%;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center}
.mk{width:2px;height:8px;background:var(--s3);border-radius:1px}.mk.c{height:22px;width:3px;background:var(--a2);box-shadow:0 0 5px var(--a2g)}
.mn{position:absolute;top:50%;left:50%;width:10px;height:10px;background:var(--tx);border-radius:50%;transform:translate(-50%,-50%);transition:left .12s ease-out;z-index:2}.mn.it{background:var(--gn);box-shadow:0 0 10px var(--gng)}
.tc{border-color:var(--a2);color:var(--a2)}.tc.on{background:var(--a2);color:var(--bg);box-shadow:0 0 28px var(--a2g),0 0 56px rgba(78,205,196,0.1);animation:btnPulse 2s ease-in-out infinite}
@keyframes btnPulse{0%,100%{box-shadow:0 0 20px var(--a2g)}50%{box-shadow:0 0 36px var(--a2g),0 0 60px rgba(78,205,196,0.08)}}
/* Metro */
.mc{color:var(--a3);text-shadow:0 0 32px var(--a3g),0 0 64px rgba(255,209,102,0.08)}
.ms::-webkit-slider-thumb{background:linear-gradient(135deg,var(--a3),#f0a040);box-shadow:0 0 12px var(--a3g)}
.mbc{border-color:var(--a3);color:var(--a3)}.mbc.on{background:var(--a3);color:var(--bg);box-shadow:0 0 28px var(--a3g),0 0 56px rgba(255,209,102,0.1)}
.bi{display:flex;justify-content:center;gap:8px;margin-top:14px}
.bd{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.08);transition:all .08s}.bd.on{background:var(--a3);border-color:var(--a3);box-shadow:0 0 12px var(--a3g);transform:scale(1.3)}.bd.db.on{background:var(--a1);border-color:var(--a1);box-shadow:0 0 12px var(--a1g)}.bd.muted{opacity:0.2}.bd.muted.on{background:var(--tm);border-color:var(--tm);box-shadow:none;opacity:0.4}
/* BPM */
.bv{background:linear-gradient(135deg,var(--a4),#c4b5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px var(--a4g))}
.bl{border-color:var(--a4);color:var(--a4)}.bl.on{background:linear-gradient(135deg,var(--a4),#c4b5fd);color:var(--bg);box-shadow:0 0 28px var(--a4g);animation:pg 1.8s ease-in-out infinite}
@keyframes pg{0%,100%{box-shadow:0 0 18px var(--a4g)}50%{box-shadow:0 0 38px var(--a4g)}}
.wc{margin-top:12px;height:60px;background:var(--s2);border-radius:var(--rs);overflow:hidden}.wc canvas{width:100%;height:100%}
.tb{width:100%;padding:18px;border-radius:var(--rs);border:2px dashed rgba(255,255,255,0.1);background:linear-gradient(180deg,rgba(255,255,255,0.04),transparent);color:var(--td);font-family:var(--fb);font-size:0.88rem;font-weight:500;cursor:pointer;user-select:none;transition:all .1s;box-shadow:0 2px 8px rgba(0,0,0,0.15)}.tb:active{transform:scale(0.97);border-color:var(--a4);border-style:solid;box-shadow:inset 0 2px 6px rgba(0,0,0,0.3);background:rgba(167,139,250,0.06)}
.tr{font-family:var(--fm);font-size:1.4rem;color:var(--a4);text-align:center;margin-top:6px;font-weight:600}
/* Chords */
.cn{font-family:var(--fd);font-size:2.6rem;line-height:1;text-align:center;background:linear-gradient(135deg,var(--a5),#f9a8d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 18px var(--a5g))}
.cpb{border-color:var(--a5);color:var(--a5);width:48px;height:48px}.cpb.on{background:linear-gradient(135deg,var(--a5),#f9a8d4);color:var(--bg);box-shadow:0 0 24px var(--a5g)}
/* Intervals */
.in{font-family:var(--fd);font-size:1.6rem;background:linear-gradient(135deg,var(--a6),#93c5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 16px var(--a6g));text-align:center;min-height:2rem}
.ia{padding:7px 12px;border-radius:var(--rs);border:1.5px solid rgba(255,255,255,0.08);background:linear-gradient(180deg,rgba(255,255,255,0.04),transparent);color:var(--tx);font-family:var(--fb);font-size:0.76rem;font-weight:500;cursor:pointer;transition:all .15s}.ia:active{transform:scale(0.95)}.ia.ok{border-color:var(--gn);color:var(--gn);box-shadow:0 0 10px var(--gng)}.ia.no{border-color:var(--rd);color:var(--rd);box-shadow:0 0 10px rgba(248,113,113,0.2)}
.ipb{border-color:var(--a6);color:var(--a6);width:48px;height:48px}
/* Scales */
.sn{font-family:var(--fd);font-size:1.5rem;background:linear-gradient(135deg,var(--a7),#6ee7b7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 16px var(--a7g));text-align:center}
.spb{border-color:var(--a7);color:var(--a7);width:48px;height:48px}.spb.on{background:linear-gradient(135deg,var(--a7),#6ee7b7);color:var(--bg);box-shadow:0 0 24px var(--a7g)}
.ps{display:flex;height:56px;border-radius:var(--rs);overflow:hidden;border:1px solid var(--bd);margin-top:8px}
.pk{flex:1;background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));border-right:1px solid rgba(255,255,255,0.04);display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;font-family:var(--fm);font-size:0.5rem;color:var(--tm)}.pk:last-child{border-right:none}.pk.is{background:linear-gradient(180deg,rgba(52,211,153,0.15),rgba(52,211,153,0.05));color:var(--a7)}.pk.rt{background:linear-gradient(180deg,rgba(52,211,153,0.3),rgba(52,211,153,0.1));font-weight:700}.pk.sh{background:rgba(0,0,0,0.3)}.pk.sh.is{background:linear-gradient(180deg,rgba(52,211,153,0.2),rgba(52,211,153,0.08))}
/* Score */
.uz{border:1.5px dashed rgba(255,255,255,0.18);border-radius:var(--panel-radius);padding:28px 16px;text-align:center;cursor:pointer;background:var(--sf);transition:border-color .15s,background .15s}.uz:hover{border-color:var(--a3);background:var(--s2)}.uz:active{border-color:var(--a3)}.uz svg{width:32px;height:32px;color:var(--td);margin-bottom:8px}
.sp{display:flex;gap:6px;overflow-x:auto;padding:4px 0 6px;scrollbar-width:none}.sp::-webkit-scrollbar{display:none}
.spt{width:72px;height:100px;border-radius:var(--rs);border:2px solid var(--bd);overflow:hidden;flex-shrink:0;cursor:pointer;position:relative;background:var(--s2)}.spt.on{border-color:var(--a8);box-shadow:0 0 10px var(--a8g)}.spt img{width:100%;height:100%;object-fit:cover}
.sv{width:100%;max-height:45vh;overflow:auto;border-radius:var(--rs);border:1px solid var(--bd);background:var(--s2)}.sv img{width:100%;display:block}
.tl{margin-top:8px}.ti{display:flex;align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid var(--bd)}.ti:last-child{border-bottom:none}
.tt{width:26px;height:26px;border-radius:5px;border:1.5px solid var(--bd);background:var(--s2);color:var(--tx);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.65rem}.tt.mu{opacity:0.3}.tt.so{border-color:var(--a8);color:var(--a8)}
.pbar{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 10px;background:var(--s2);border-radius:var(--rs);border:1px solid var(--bd)}
.pbar .py{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--a8);background:transparent;color:var(--a8);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.pbar .py.on{background:var(--a8);color:var(--bg)}.pbar .py svg{width:14px;height:14px}
.pp{flex:1;height:4px;background:var(--s3);border-radius:2px;overflow:hidden;cursor:pointer}.ppf{height:100%;background:var(--a8);border-radius:2px;width:0%}
.lc{padding:5px 11px;border-radius:20px;border:1.5px solid var(--bd);background:var(--s2);color:var(--td);font-size:0.7rem;cursor:pointer}.lc.on{border-color:var(--a8);color:var(--a8)}
/* Drone */
.drn{font-family:var(--fd);font-size:2.4rem;text-align:center;color:var(--a2);text-shadow:0 0 22px var(--a2g)}
.drb{border-color:var(--a2);color:var(--a2)}.drb.on{background:var(--a2);color:var(--bg);box-shadow:0 0 22px var(--a2g)}
/* Rhythm */
.rhn{font-family:var(--fd);font-size:1.6rem;text-align:center;color:var(--pc);text-shadow:0 0 22px color-mix(in srgb,var(--pc) 30%,transparent)}
.rhb{border-color:var(--pc);color:var(--pc);width:48px;height:48px}
.rhtb{width:100%;padding:24px;border-radius:var(--rs);border:none;background:var(--pc);color:#0d0f13;font-family:var(--fb);font-size:1rem;font-weight:600;cursor:pointer;user-select:none;letter-spacing:0.04em;box-shadow:0 4px 20px var(--a4g);transition:transform .1s,filter .1s}.rhtb:active{transform:scale(0.96);filter:brightness(1.15)}
/* Rhythm Trainer — expanded controls */
.rh-controls{margin:10px 0 6px;padding:0 4px}
.rh-ctrl-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rh-ctrl-label{font-family:var(--fm);font-size:0.6rem;color:var(--tm);width:42px;flex-shrink:0}
.rh-diff-btns{display:flex;gap:4px;flex:1}
.rh-diff{flex:1;padding:5px 0;border-radius:6px;border:1.5px solid var(--bd);background:var(--s2);color:var(--td);font-family:var(--fb);font-size:0.65rem;cursor:pointer;transition:all .15s}
.rh-diff.active{border-color:var(--pc);color:var(--pc);background:color-mix(in srgb,var(--pc) 10%,transparent)}
.rh-genre-sel{flex:1;padding:12px 10px;min-height:44px;border-radius:8px;border:1.5px solid var(--bd);background:var(--s2);color:var(--tx);font-family:var(--fb);font-size:0.65rem;cursor:pointer;appearance:auto;-webkit-appearance:auto}
.rh-genre-sel option{background:var(--s2);color:var(--tx)}
.rh-stats{display:flex;justify-content:center;gap:20px;margin:8px 0;padding:8px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.rh-stat{text-align:center}
.rh-stat-label{display:block;font-family:var(--fm);font-size:0.5rem;color:var(--tm);text-transform:uppercase;letter-spacing:0.04em}
.rh-stat-value{display:block;font-family:var(--fd);font-size:1.1rem;color:var(--td);margin-top:1px}
/* Beat Builder Grid */
.bb-grid{display:flex;flex-direction:column;gap:6px;min-width:fit-content}
.bb-row{display:flex;align-items:center;gap:0}
.bb-label{width:44px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding-right:4px;position:sticky;left:0;z-index:2;background:#0b0d11}
.bb-label-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1}
.bb-label-text{font-family:var(--fm);font-size:9px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42px;text-align:center}
.bb-cells{display:flex;gap:2px}
.bb-cell{width:36px;height:36px;border-radius:6px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);cursor:pointer;transition:background .1s,transform .08s,box-shadow .1s;flex-shrink:0}
.bb-cell:active{transform:scale(0.88)}
.bb-cell.on{border-color:transparent}
.bb-cell.beat1{background:rgba(255,255,255,0.10)}
.bb-cell.playing{box-shadow:inset 0 0 8px rgba(255,255,255,0.3)}
.bb-playing-col{background:rgba(255,255,255,0.07)!important}
.bb-measure-sep{width:2px;height:36px;background:rgba(255,255,255,0.12);flex-shrink:0;margin:0 2px;border-radius:1px}
.bb-beat-num{width:36px;text-align:center;font-family:var(--fm);font-size:0.48rem;color:var(--tm);flex-shrink:0}
.bb-fullscreen{position:fixed;inset:0;z-index:200;background:#0b0d11;display:flex;flex-direction:column;padding:8px;overflow:auto}
.bb-fullscreen-close{position:absolute;top:4px;left:4px;z-index:201;background:rgba(255,255,255,0.1);border:none;color:#fff;width:44px;height:44px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:12px}
.bb-fullscreen-transport{display:flex;align-items:center;gap:10px;padding:4px 48px 8px;flex-shrink:0}
/* Circle of Fifths */
.cof-wrap{position:relative;width:100%;max-width:420px;margin:0 auto}
.cof-wrap canvas{width:100%;height:auto}
/* Progression */
.prog-timeline{display:flex;gap:4px;overflow-x:auto;padding:8px 0;scrollbar-width:none}.prog-timeline::-webkit-scrollbar{display:none}
.prog-chord{padding:10px 14px;border-radius:var(--rs);border:1.5px solid var(--bd);background:var(--s2);color:var(--tx);font-family:var(--fd);font-size:1rem;cursor:pointer;white-space:nowrap;flex-shrink:0;min-width:60px;text-align:center}.prog-chord.on{border-color:var(--a6);background:rgba(96,165,250,0.08)}
.prog-chord.playing{border-color:var(--a6);box-shadow:0 0 12px var(--a6g)}
/* Loop pedal */
.loop-layers{margin-top:8px}.loop-layer{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--bd)}.loop-layer:last-child{border-bottom:none}
.loop-wave{flex:1;height:32px;background:var(--s2);border-radius:var(--rx);overflow:hidden}.loop-wave canvas{width:100%;height:100%}
/* Recorder */
.rt{font-family:var(--fm);font-size:2rem;color:var(--pc);font-weight:600;text-align:center}
.rb{border-color:var(--rd);color:var(--rd)}.rb.on{background:var(--rd);color:#fff;animation:pr 1s ease-in-out infinite}
@keyframes pr{0%,100%{box-shadow:0 0 14px rgba(248,113,113,0.3)}50%{box-shadow:0 0 32px rgba(248,113,113,0.5)}}
.rl{margin-top:8px}.ri{display:flex;align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid var(--bd)}.ri:last-child{border-bottom:none}
.rpb{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--pc);background:transparent;color:var(--pc);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.rpb svg{width:11px;height:11px}
.sc{margin-top:8px;height:80px;background:var(--sb);border-radius:var(--rs);overflow:hidden}.sc canvas{width:100%;height:100%}
/* Practice journal */
.je{padding:10px;border-bottom:1px solid var(--bd)}.je:last-child{border-bottom:none}
.je .jd{font-family:var(--fm);font-size:0.62rem;color:var(--tm)}.je .jn{font-size:0.82rem;font-weight:600;margin-top:2px}.je .jp{font-family:var(--fm);font-size:0.68rem;color:var(--td);margin-top:2px}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--bd);border-top-color:var(--a8);border-radius:50%;animation:sp .6s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.tw{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--bd)}.tw:last-child{border-bottom:none}.tw span{font-size:0.82rem;font-weight:500}
.ts{width:40px;height:22px;border-radius:11px;background:rgba(255,255,255,0.12);border:none;cursor:pointer;position:relative;transition:all .2s}.ts.on{background:#f0a830;box-shadow:0 0 12px rgba(240,168,48,0.3)}.ts::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,0.3)}.ts.on::after{transform:translateX(18px)}
/* Vocal Warmup */
.vw-display{font-family:var(--fd);font-size:2.6rem;text-align:center;line-height:1;color:var(--a3);text-shadow:0 0 22px var(--a3g)}
.vw-vowel{font-family:var(--fd);font-size:3.2rem;text-align:center;color:var(--tx);opacity:0.9;margin-top:4px;transition:all 0.15s}
.vw-vowel.active{transform:scale(1.1);opacity:1}
.vw-progress-bar{height:6px;background:var(--s3);border-radius:3px;overflow:hidden;margin:10px 0}.vw-progress-fill{height:100%;background:var(--a3);border-radius:3px;transition:width 0.3s}
.vw-step{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--bd);font-size:0.72rem}.vw-step:last-child{border-bottom:none}
.vw-step-num{width:22px;height:22px;border-radius:50%;background:var(--s2);border:1.5px solid var(--bd);display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:0.55rem;font-weight:600;flex-shrink:0;color:var(--td)}
.vw-step-num.done{background:var(--a3);border-color:var(--a3);color:var(--bg)}
.vw-step-num.current{background:var(--a3g);border-color:var(--a3);color:var(--a3)}
#vwSteps.collapsed{max-height:0;overflow:hidden;transition:max-height .3s ease}
#vwSteps:not(.collapsed){max-height:2000px;transition:max-height .3s ease}
.vw-note-strip{display:flex;justify-content:center;gap:3px;margin:8px 0}
.vw-note{width:24px;height:24px;border-radius:50%;background:var(--s2);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:0.42rem;color:var(--td);transition:all 0.15s}
.vw-note.active{background:var(--a3);border-color:var(--a3);color:var(--bg);transform:scale(1.2);box-shadow:0 0 8px var(--a3g)}
.vw-note.played{background:var(--a3g);border-color:var(--a3);color:var(--a3)}
.vw-btn{border-color:var(--a3);color:var(--a3)}.vw-btn.on{background:var(--a3);color:var(--bg);box-shadow:0 0 22px var(--a3g)}
.vw-vowel-btns{display:flex;justify-content:center;gap:6px;margin-top:8px}
.vw-vb{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--bd);background:var(--s2);color:var(--tx);font-family:var(--fd);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.vw-vb:active{transform:scale(0.92)}.vw-vb.on{border-color:var(--a3);color:var(--a3);background:var(--a3g)}
@media(max-width:380px){.pg{max-width:320px}.nb{min-width:42px;font-size:0.4rem}.nb svg{width:16px;height:16px}}
@media(max-width:320px){.cd{padding:12px 10px}.pg{max-width:280px}.bb{width:54px;height:54px}.bb svg{width:20px;height:20px}.rt{font-size:3rem}}
@media(min-width:768px){.app{max-width:640px;padding:16px 20px 120px}.cd{padding:22px 18px}.bn{max-width:600px}.tool-drawer{max-width:600px}}
@media(min-width:1024px){.app{max-width:720px}.bn{max-width:680px}.tool-drawer{max-width:680px}}
.cd{overflow:visible;word-wrap:break-word}
/* Setlist */
.sl-item{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid var(--bd);cursor:grab;user-select:none;-webkit-user-select:none}.sl-item:last-child{border-bottom:none}.sl-item.active{background:color-mix(in srgb,var(--pc) 14%,transparent);border-radius:var(--rs)}
.sl-num{width:22px;height:22px;border-radius:50%;background:var(--s2);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:0.55rem;color:var(--td);flex-shrink:0}
.sl-item.active .sl-num{background:var(--pc);border-color:var(--pc);color:#0d0f13}
.sl-info{flex:1;min-width:0}.sl-song{font-size:0.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sl-meta{font-family:var(--fm);font-size:0.52rem;color:var(--tm)}
/* Transpose */
.tr-big{font-family:var(--fd);font-size:3rem;text-align:center;color:var(--a6);text-shadow:0 0 20px var(--a6g)}
.tr-arrow{font-size:1.5rem;text-align:center;color:var(--tm);margin:4px 0}
.tr-from{font-family:var(--fd);font-size:1.6rem;text-align:center;color:var(--td)}
/* Stage Tuner */
.stage-note{font-family:var(--fd);font-size:8rem;line-height:1;text-align:center;letter-spacing:-4px}
.stage-cents{font-family:var(--fm);font-size:2rem;text-align:center;font-weight:600}
.stage-bar{height:12px;background:var(--s3);border-radius:6px;margin:16px 8%;position:relative;overflow:hidden}
.stage-fill{position:absolute;top:0;height:100%;border-radius:6px;transition:left 0.1s,width 0.1s}
.stage-center{position:absolute;top:-4px;left:50%;width:3px;height:20px;background:var(--a2);transform:translateX(-50%);border-radius:2px}
/* Tempo Trainer */
.tt-display{text-align:center}.tt-current{font-family:var(--fd);font-size:3.4rem;color:var(--a3);text-shadow:0 0 20px var(--a3g)}.tt-target{font-family:var(--fm);font-size:0.8rem;color:var(--td)}
.tt-progress{height:6px;background:var(--s3);border-radius:3px;overflow:hidden;margin:8px 0}.tt-fill{height:100%;background:linear-gradient(90deg,var(--a3),var(--a2));border-radius:3px;transition:width 0.3s}
/* Sight Reading */
.sr-staff{position:relative;height:120px;background:var(--s2);border-radius:var(--rs);overflow:hidden;margin:8px 0}
.sr-staff canvas{width:100%;height:100%}
.sr-options{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:8px}
.sr-opt{padding:12px 16px;min-width:52px;min-height:44px;border-radius:var(--rs);border:1.5px solid var(--bd);background:var(--s2);color:var(--tx);font-family:var(--fb);font-size:0.78rem;font-weight:500;cursor:pointer}.sr-opt:active{transform:scale(0.95)}.sr-opt.ok{border-color:var(--gn);color:var(--gn)}.sr-opt.no{border-color:var(--rd);color:var(--rd)}
/* Intonation */
.int-display{position:relative;height:100px;margin:8px 0}
.int-display canvas{width:100%;height:100%}
/* Nashville */
.nv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px}
.nv-cell{padding:10px 4px;border-radius:var(--rs);border:1px solid var(--bd);background:var(--s2);text-align:center;cursor:pointer}.nv-cell:active{transform:scale(0.96)}
.nv-num{font-family:var(--fd);font-size:1.2rem;font-weight:600}.nv-chord{font-family:var(--fm);font-size:0.6rem;color:var(--td);margin-top:1px}
/* Key Finder */
.kf-input{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}
.kf-note{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--bd);background:var(--s2);display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:0.7rem;cursor:pointer}.kf-note.on{border-color:var(--a4);background:var(--a4g);color:var(--a4)}
.kf-result{padding:8px;border-radius:var(--rs);border:1px solid var(--bd);background:var(--s2);margin-top:4px}
/* Freq Analyzer */
.fa-display{height:140px;background:var(--s2);border-radius:var(--rs);overflow:hidden;position:relative}
.fa-display canvas{width:100%;height:100%}
.fa-peak{font-family:var(--fm);font-size:0.72rem;color:var(--td);text-align:center;margin-top:4px}
/* dB Meter */
.db-display{font-family:var(--fd);font-size:5rem;text-align:center;line-height:1}
.db-bar{height:20px;background:var(--s3);border-radius:10px;overflow:hidden;margin:12px 0;position:relative}
.db-fill{height:100%;border-radius:10px;transition:width 0.1s}
.db-label{font-family:var(--fm);font-size:0.7rem;text-align:center;color:var(--td)}
.db-peak{font-family:var(--fm);font-size:0.62rem;color:var(--tm);text-align:center;margin-top:2px}
/* Pro Gating */
.pro-badge{display:inline-block;padding:1px 4px;border-radius:3px;background:linear-gradient(135deg,var(--a3),var(--a8));color:var(--bg);font-family:var(--fm);font-size:0.35rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;margin-left:2px;vertical-align:middle}
.pro-overlay{position:absolute;inset:0;background:rgba(8,8,14,0.85);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;border-radius:var(--rs);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pro-overlay-card{text-align:center;padding:24px 20px;max-width:260px}
.pro-overlay-card h3{font-family:var(--fd);font-size:1.2rem;margin-bottom:6px;background:linear-gradient(135deg,var(--a4),var(--a5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pro-overlay-card p{font-size:0.72rem;color:var(--td);margin-bottom:14px;line-height:1.5}
.pro-cta{display:inline-block;padding:10px 24px;border-radius:20px;background:linear-gradient(135deg,var(--a3),var(--a8));color:var(--bg);font-family:var(--fb);font-size:0.8rem;font-weight:700;cursor:pointer;border:none;transition:all 0.15s;box-shadow:0 4px 20px rgba(255,209,102,0.25)}.pro-cta:active{transform:scale(0.96);box-shadow:0 2px 8px rgba(255,209,102,0.2)}.pro-cta:hover{box-shadow:0 6px 24px rgba(255,209,102,0.35);transform:translateY(-1px)}
.pro-features{font-family:var(--fm);font-size:0.55rem;color:var(--tm);margin-top:10px;text-align:left;line-height:1.8}
.pro-restore{font-size:0.55rem;color:var(--tm);margin-top:10px;text-decoration:underline;cursor:pointer}
.nb .pro-dot{display:none;width:4px;height:4px;border-radius:50%;background:var(--a3);position:absolute;top:4px;right:4px}
body:not(.pro) .nb .pro-dot{display:block}
.nb{position:relative}
/* Ad-free bottom nav — no banner offset needed */

/* Practice Session Builder */
#sessFloat{animation:sessSlide 0.3s ease-out}
@keyframes sessSlide{from{transform:translateY(-100%)}to{transform:translateY(0)}}
#sessRunner{animation:sessFadeIn 0.3s ease}
@keyframes sessFadeIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}

/* ===== FEATURE TOOLTIPS ===== */
.ftip-bubble{position:absolute;z-index:250;max-width:280px;width:calc(100vw - 40px);padding:14px 16px;border-radius:14px;background:var(--c-card);border:2px solid var(--tip-accent,var(--a2));border-bottom:4px solid var(--tip-accent,var(--a2));box-shadow:0 8px 32px rgba(0,0,0,0.25);animation:ftipIn 0.3s cubic-bezier(.22,1,.36,1);pointer-events:auto}
.ftip-bubble.ftip-out{animation:ftipOut 0.2s ease-in forwards}
.ftip-arrow{position:absolute;width:12px;height:12px;background:var(--c-card);border:2px solid var(--tip-accent,var(--a2));transform:rotate(45deg)}
.ftip-bottom .ftip-arrow{top:-7px;border-bottom:none;border-right:none}
.ftip-top .ftip-arrow{bottom:-7px;border-top:none;border-left:none}
.ftip-title{font-family:var(--fn);font-size:0.78rem;font-weight:800;color:var(--tx);margin-bottom:4px}
.ftip-msg{font-family:var(--fm);font-size:0.62rem;color:var(--td);line-height:1.5;margin-bottom:10px}
.ftip-dismiss{display:inline-block;padding:6px 16px;border-radius:10px;border:none;background:var(--tip-accent,var(--a2));color:#fff;font-family:var(--fn);font-size:0.62rem;font-weight:700;cursor:pointer;transition:transform 0.1s}
.ftip-dismiss:active{transform:scale(0.94)}
@keyframes ftipIn{from{opacity:0;transform:translateY(8px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ftipOut{to{opacity:0;transform:translateY(6px) scale(0.96)}}
.ftip-dot{width:8px;height:8px;border-radius:50%;background:var(--tip-accent,var(--a2));position:absolute;top:8px;right:8px;z-index:5;animation:ftipPulse 2s ease-in-out infinite;pointer-events:none}
@keyframes ftipPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 var(--tip-accent,var(--a2))}50%{transform:scale(1.3);box-shadow:0 0 8px var(--tip-accent,var(--a2))}}
.bb--ai{border-color:var(--a1);color:var(--a1)}
.bb--ai.on{background:var(--a1);color:var(--bg);box-shadow:0 0 28px rgba(255,148,132,0.3)}
.page-title{text-align:center;margin-bottom:10px}
.page-title__name{font-family:var(--fd);font-size:1.4rem;font-weight:400;color:var(--a1);text-shadow:0 0 20px rgba(255,148,132,0.2)}
.page-title__sub{font-family:var(--fm);font-size:0.6rem;color:var(--tm);margin-top:3px;letter-spacing:0.04em}
.back-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--button-radius);border:1.5px solid var(--bd);background:var(--s2);color:var(--a2);font-family:var(--fn);font-size:0.78rem;font-weight:700;cursor:pointer;margin-bottom:8px;transition:border-color .15s,color .15s}
.back-btn:hover{border-color:var(--a2)}
.back-btn:active{transform:translateY(1px)}
.ch--primary{border-color:var(--a2);color:var(--a2);font-weight:700}
.ch--primary:hover{background:var(--a2g)}

/* ── Inner stat/info tiles (matches home page cadenze-tile elevation) ── */
.mini-tile{background:linear-gradient(180deg, var(--tile-top) 0%, var(--tile-bottom) 100%);border-radius:var(--rs, 12px);border:1px solid var(--tile-stroke);box-shadow:var(--tile-shadow), inset 0 1px 0 rgba(255,255,255,0.12);position:relative}
.mini-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:150px 150px}

/* ── AI nav raised button (Prompt 168) ────────────────────────────────── */
.nb-ai-wrap{flex:1;display:flex;justify-content:center;align-items:flex-end;margin-top:-24px;overflow:visible}
.nb-ai-btn{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;background:none;border:none;-webkit-tap-highlight-color:transparent;padding:0;position:relative;flex:unset}
.nb-ai-btn::before{content:'';position:absolute;width:90px;height:45px;top:-8px;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(160,120,255,0.45) 0%,rgba(160,120,255,0.12) 35%,transparent 70%);pointer-events:none;filter:blur(14px);z-index:-1}
.nb-ai-icon{width:52px;height:52px;border-radius:16px;background:linear-gradient(145deg,var(--a4),var(--a2));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 20px rgba(160,120,255,0.40),0 2px 8px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.3);border:3px solid var(--bg,#0f1216);flex-shrink:0}
.nb-ai-label{font-size:0.5rem;font-weight:700;color:var(--a4);letter-spacing:0.05em;font-family:var(--fn);text-transform:uppercase;margin-top:2px}
.nb-ai-btn.on .nb-ai-icon{box-shadow:0 4px 24px rgba(160,120,255,0.55),0 2px 8px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.3)}
.nb-ai-btn.on .nb-ai-label{color:#fff}
.nb-ai-btn.on svg{transform:none !important}
.nb-ai-btn:active{transform:translateY(2px)}