@font-face{
  font-family:"Sukajan Brush";
  src:url("assets/Sukajan-Brush.otf") format("opentype");
  font-display:swap;
}
:root{
  --tan:#d9ccb4; --ink:#28241a; --charcoal:#221f18;
  --red:#9e1a1a; --lightred:#c7302b; --darkred:#461212;
  --cream:#fff8f0; --gray:#b9ab98;

  --panel:#2c281f; --panel2:#34302526; --raise:#38332708;
  --line:#4a4334; --line2:#3a352a;
  --font:Optima,Candara,"Segoe UI",system-ui,sans-serif;

  --ground:var(--charcoal); --ontext:var(--cream); --wm:var(--cream); --sub:var(--tan);
  --wmline:var(--lightred);
}

body[data-tier="guest"]{ --ground:#2b2620; }
body[data-tier="apprentice"]{ --ground:var(--darkred); --ontext:var(--cream); --wm:var(--cream); --sub:#e8cabf; --wmline:var(--cream); }
body[data-tier="ronin"]{ --ground:#000; --ontext:#fff; --wm:#fff; --sub:#f2ece2; }

body[data-tier="apprentice"] .mark path:nth-of-type(1){fill:var(--tan)}
body[data-tier="apprentice"] .mark path:nth-of-type(2){fill:#fff8f0}
body[data-tier="apprentice"] .mark path:nth-of-type(3){fill:#d9ccb4}
body[data-tier="ronin"] .mark path:nth-of-type(1){fill:#c7302b}
body[data-tier="ronin"] .mark path:nth-of-type(2){fill:#fff8f0}
body[data-tier="ronin"] .mark path:nth-of-type(3){fill:#d9ccb4}

body[data-tier="apprentice"] .playalong-title,body[data-tier="apprentice"] .how-link{color:var(--cream)}

body[data-tier="apprentice"] .play,
body[data-tier="apprentice"] .upgrade-btn,
body[data-tier="apprentice"] .learnbtn.owned,
body[data-tier="apprentice"] .seg-btn.is-active,
body[data-tier="apprentice"] .mode.is-active{background:var(--tan);color:var(--darkred)}
body[data-tier="apprentice"] .mode.is-active b,
body[data-tier="apprentice"] .mode.is-active small{color:var(--darkred)}
body[data-tier="apprentice"] .play:hover,
body[data-tier="apprentice"] .upgrade-btn:hover{background:#e7dac4}
body[data-tier="apprentice"] .play.playing{background:var(--ink);color:var(--cream)}

body[data-tier="apprentice"] .mode,
body[data-tier="apprentice"] .next,
body[data-tier="apprentice"] .learnbtn,
body[data-tier="apprentice"] .inv-chip{border-color:var(--tan);color:var(--cream)}
body[data-tier="apprentice"] .inv-chip.is-active,
body[data-tier="apprentice"] .nest-btn.is-active,
body[data-tier="apprentice"] .ih-go{background:var(--tan);color:var(--darkred);border-color:var(--tan)}
body[data-tier="apprentice"] .game-nav a:hover,
body[data-tier="apprentice"] .game-nav button:hover,
body[data-tier="apprentice"] .game-nav a:focus,
body[data-tier="apprentice"] .game-nav button:focus{background:var(--tan);color:var(--darkred)}

body[data-tier="apprentice"] .barfill{background:linear-gradient(90deg,var(--tan),var(--cream))}

body[data-tier="apprentice"] .nest-crumb .chev,
body[data-tier="apprentice"] .inv-toggle .chev{color:var(--tan)}
body[data-tier="apprentice"] input[type=range]{accent-color:var(--tan)}
body[data-tier="apprentice"] .help-dot:hover{border-color:var(--tan);color:var(--tan)}

body[data-tier="apprentice"] .belt-row button[data-tier="apprentice"]{border-color:var(--tan);color:var(--tan)}
body[data-tier="apprentice"] .belt-row button.on[data-tier="apprentice"]{background:var(--tan);color:var(--darkred);border-color:var(--tan)}

body[data-tier="apprentice"] #instrSeg [data-instr="Bb"]{color:#f2ded9;background:rgba(255,248,240,.14)}
body[data-tier="apprentice"] #instrSeg .is-active[data-instr="Bb"]{background:var(--cream);color:var(--darkred)}
body[data-tier="apprentice"] #instrSeg [data-instr="C"]{background:rgba(217,204,180,.16)}
body[data-tier="apprentice"] #instrSeg [data-instr="Eb"]{background:rgba(40,36,26,.5)}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font); color:var(--ontext);
  background:var(--ground);
  background-image:radial-gradient(rgba(217,204,180,.05) 1px,transparent 1px);
  background-size:3px 3px;
  min-height:100dvh; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  transition:background-color .35s ease, color .35s ease;
}
#app{max-width:520px; margin:0 auto; padding:34px 18px 44px; display:flex; flex-direction:column; gap:26px}

.topbar{text-align:center; margin-bottom:34px}

.lockup{display:inline-flex; flex-direction:column; align-items:center; width:100%;
  container-type:inline-size}
.mark{width:min(66cqi,240px); height:auto; margin:2px 0 10px}
.wordmark{font-family:"Sukajan Brush",var(--font); color:var(--wm); font-weight:400;
  font-size:clamp(26px,11.5cqi,46px); margin:0; line-height:1; white-space:nowrap}

.wm-underline{height:3px; width:180px; background:var(--wmline);
  border-radius:2px; margin:6px auto 0}
.tagline{margin:.5em 0 0; color:var(--sub); font-size:14px; letter-spacing:.02em}

.chips{display:flex; flex-direction:column; gap:12px}
.chip{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.chip-label{font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--sub); text-transform:uppercase}
.seg{display:inline-flex; background:var(--panel); border:1px solid var(--line2);
  border-radius:12px; padding:4px; gap:4px}
.seg-btn{border:0; background:transparent; color:var(--cream); font-family:var(--font);
  font-size:16px; font-weight:600; padding:9px 14px; border-radius:9px; cursor:pointer}
.seg-btn:hover{background:var(--raise)}
.seg-btn.is-active{background:var(--red); color:var(--cream); box-shadow:0 1px 0 var(--darkred)}

.cell-card{background:var(--tan); border:1px solid #c2b096; border-radius:20px;
  padding:22px 20px; position:relative; overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.28)}
.cell-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background:var(--red)}
.now{margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--darkred)}
.notes{display:flex; justify-content:center; flex-wrap:wrap; row-gap:8px; gap:min(9vw,54px);
  font-family:"Sukajan Brush",var(--font);
  color:var(--ink); font-size:clamp(52px,17vw,88px); line-height:1; min-height:1em}

.notes.mid{font-size:clamp(34px,10vw,58px); gap:min(5vw,26px)}

.notes.long{font-size:clamp(20px,5.6vw,36px); gap:min(3vw,16px); row-gap:6px}
.notes span{transition:opacity .15s}
.notes span.dim{opacity:.05}
.notes span.hit{color:var(--red); transform:scale(1.12); transition:transform .06s}
.solf{text-align:center; margin:14px 0 2px; font-size:23px; font-weight:700; color:var(--red)}
.vamp{text-align:center; margin:2px 0 0; color:#574a37; font-size:14px}

.tempo{display:flex; flex-direction:column; gap:8px}
.tempo label{font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--sub)}
input[type=range]{width:100%; accent-color:var(--red); height:26px}

.displaymode{display:flex; align-items:center; gap:12px}

.modes{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.modes-cap{grid-column:1/-1; display:flex; align-items:center; gap:8px; margin-bottom:-2px}
.mode{border:2px solid var(--red); background:var(--panel); border-radius:16px; padding:14px 6px;
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; color:var(--cream)}
.mode b{font-family:"Sukajan Brush",var(--font); font-weight:400; font-size:30px; line-height:1; color:var(--cream)}
.mode small{color:var(--gray); font-weight:600; font-size:12px}
.mode.is-active{background:var(--red); color:var(--cream)}
.mode.is-active b{color:var(--cream)}
.mode.is-active small{color:var(--tan)}

.transport{display:flex; gap:12px}
.play,.next{flex:1; border:0; border-radius:40px; padding:16px; font-family:var(--font);
  font-size:18px; font-weight:700; letter-spacing:.04em; cursor:pointer; color:var(--cream); background:var(--red)}
.play:hover{background:var(--lightred)}
.play.playing{background:var(--darkred)}
.next{background:transparent; border:2px solid var(--red); flex:0 0 auto; padding:16px 22px}
.hint{margin:0; text-align:center; color:var(--gray); font-size:13px; font-style:italic}

@media (prefers-reduced-motion:reduce){.notes span{transition:none}}

.seg.wrap{flex-wrap:wrap}
.learn{text-align:center}
.learnbtn{border:2px solid var(--red);background:transparent;color:var(--cream);border-radius:30px;
  padding:12px 24px;font-family:var(--font);font-weight:700;font-size:15px;cursor:pointer}
.learnbtn.owned{background:var(--red);color:var(--cream)}
.progress{background:var(--tan);border:1px solid #c2b096;border-radius:18px;padding:18px;margin-top:10px;box-shadow:0 6px 22px rgba(0,0,0,.28)}
.rankrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.counts{margin-left:auto;font-size:13px;color:#574a37;text-align:right}
.rankrow .counts{margin-left:12px}
.barwrap{height:8px;background:#221f18;border:1px solid #3a352a;border-radius:5px;margin:12px 0;overflow:hidden}
.stages{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.stage{display:flex;align-items:center;gap:10px}
.stage-lbl{flex:0 0 82px;font-size:12px;font-weight:700;color:var(--darkred)}
.stage-bar{flex:1;height:7px;background:#e7dac4;border:1px solid #c8b795;border-radius:5px;overflow:hidden}
.stage-pct{flex:0 0 36px;text-align:right;font-size:12px;font-weight:700;color:var(--ink)}

.barfill,.stage-fill{height:100%;background:linear-gradient(90deg,var(--red),var(--lightred));width:0;transition:width .4s}
.upgrade-btn{display:block;width:100%;margin-top:14px;background:var(--red);color:var(--cream);border:0;border-radius:30px;
  padding:13px;font-family:var(--font);font-weight:700;font-size:15px;letter-spacing:.02em;cursor:pointer}
.upgrade-btn:hover{background:var(--lightred)}

.nav-toggle{position:fixed;top:12px;left:12px;z-index:70;width:42px;height:42px;border:0;border-radius:10px;
  background:rgba(34,31,24,.62);backdrop-filter:blur(4px);display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:4px;cursor:pointer;padding:0}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--cream);border-radius:2px}
.game-nav{position:fixed;top:60px;left:12px;z-index:70;background:var(--charcoal);border:1px solid var(--tan);
  border-radius:12px;padding:8px;display:flex;flex-direction:column;min-width:158px;box-shadow:0 10px 28px rgba(0,0,0,.42)}
.game-nav[hidden]{display:none}

.game-nav a,.game-nav button{padding:10px 14px;color:var(--cream);text-decoration:none;border-radius:8px;font-size:15px}
.game-nav button{background:transparent;border:0;font-family:inherit;text-align:left;width:100%;cursor:pointer}
.game-nav a:hover,.game-nav a:focus,
.game-nav button:hover,.game-nav button:focus{background:var(--red);color:var(--cream)}

.tw-eyebrow{margin:0 0 6px;padding-right:30px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:700}
.tw-list{margin:10px 0 12px;padding-left:20px;font-size:15px;line-height:1.5}
.tw-list li{margin:4px 0}
.tw-urgency{font-size:14px;opacity:.85}
.tw-code{margin:8px 0 0;font-size:13.5px;text-align:center;opacity:.9}
.tw-code b{letter-spacing:.06em}
.tw-free{margin:10px 0 0;font-size:14px;text-align:center}
.tw-free[hidden]{display:none}
.tw-decline{display:block;width:100%;margin:8px 0 0;background:transparent;border:0;color:inherit;
  opacity:.75;text-decoration:underline;font-family:inherit;font-size:14px;cursor:pointer}
.tw-reassure{margin:10px 0 0;font-size:12.5px;opacity:.7;text-align:center}

.install-hint{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;max-width:430px;margin:0 auto;
  background:var(--charcoal);color:var(--cream);border:1px solid var(--tan);border-radius:13px;
  padding:12px 14px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.4);font-size:14px}
.install-hint[hidden]{display:none}
.ih-text{flex:1;min-width:140px}
.ih-go{background:var(--red);color:var(--cream);border:0;border-radius:20px;padding:9px 18px;
  font-weight:700;cursor:pointer;font-family:inherit;font-size:14px}
.ih-x{background:transparent;border:0;color:var(--tan);font-size:22px;line-height:1;cursor:pointer;padding:0 2px}
.ih-ios{flex-basis:100%;font-size:13px;color:var(--tan);margin-top:2px}
.ih-ios b{color:var(--cream)}

.cmp-wrap{overflow-x:auto;margin:2px 0 10px}
.cmp{width:100%;min-width:360px;border-collapse:collapse;font-size:11.5px;table-layout:fixed}
.cmp th,.cmp td{padding:6px 5px;text-align:center;vertical-align:middle;border-bottom:1px solid #e6dcc7}
.cmp thead th{font-family:"Sukajan Brush",var(--font);font-weight:400;font-size:14px;line-height:1.02;padding:8px 3px}
.cmp thead th small{display:block;font-family:var(--font);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.75;margin-top:2px}
.cmp .th-g{background:#f1e9da;color:var(--darkred)}
.cmp .th-a{background:#f4dede;color:var(--darkred)}
.cmp .th-r{background:var(--charcoal);color:var(--cream)}
.cmp .th-s{background:#b07a00;color:var(--cream)}
.cmp td.s{background:rgba(176,122,0,.10)}
.cmp .feat{text-align:left;font-weight:700;color:var(--darkred);font-size:11px;width:32%}
.cmp td.g{background:rgba(0,0,0,.015)}
.cmp td.a{background:rgba(158,26,26,.06)}
.cmp td.r{background:rgba(20,16,12,.045)}
.cmp .yes{color:#1e7a33;font-weight:700}
.cmp .no{color:var(--gray)}
.cmp .hl{color:var(--red);font-weight:700}

.seg-btn.locked,.mode.locked{opacity:.38}

.seg-btn.locked::after,
.nest-btn.locked::after,
.inv-chip.locked::after{content:" \1F512";font-size:10px}

.nest{display:flex;flex-direction:column;gap:8px;width:100%}
.nest-tag{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--tan);text-transform:uppercase}
.nest-opts{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.nest-btn{border:1px solid var(--line2);background:var(--panel);color:var(--cream);font-family:var(--font);
  font-size:14px;font-weight:600;border-radius:12px;padding:7px 14px;cursor:pointer;transition:background .15s;
  text-align:center;line-height:1.15}
.nest-btn:hover{background:var(--raise)}
.nest-btn.is-active{background:var(--red);box-shadow:0 1px 0 var(--darkred)}
.nest-btn.locked{opacity:.42;cursor:pointer}
.lock-tag{margin-left:6px;font-size:10px;font-weight:600;letter-spacing:.01em;color:var(--tan);text-transform:none}
.lock-tag[hidden]{display:none}
.nest-crumb{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:transparent;
  color:var(--tan);border-radius:12px;padding:6px 12px;cursor:pointer;opacity:.55;transition:opacity .2s}
.nest-crumb:hover,.nest-crumb:focus-visible{opacity:1}
.nest-crumb b{color:var(--cream);font-weight:700}
.nest-crumb .chev{color:var(--red);font-size:15px}
.nest-level[data-state="crumb"] .nest-opts{display:none}
.nest-level[data-state="open"] .nest-crumb{display:none}
.nest-level[data-state="hidden"]{display:none}
#cellSeg .seg-btn[hidden],#pathSeg .seg-btn[hidden]{display:none}

#cellSeg{max-height:clamp(220px,46vh,320px); overflow-y:auto; align-content:flex-start; scrollbar-width:thin}
#cellSeg::-webkit-scrollbar{width:8px}
#cellSeg::-webkit-scrollbar-thumb{background:var(--line2); border-radius:8px}
.nest-level{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.fam-sub{display:block;font-size:10px;font-weight:600;color:var(--tan);opacity:.85;text-transform:none;letter-spacing:.02em;margin-top:2px}
.nest-btn.is-active .fam-sub{color:var(--cream);opacity:.92}
.nest-btn.locked .fam-sub{opacity:.6}

.help{position:relative;display:inline-flex;align-items:center}
.help-dot{position:relative;width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);
  color:var(--sub,var(--tan));font-weight:700;font-size:12px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.help-dot::after{content:"";position:absolute;inset:-11px}
.help-dot:hover{color:var(--cream);border-color:var(--red)}
.help-bubble{position:absolute;left:0;top:calc(100% + 8px);z-index:20;width:min(300px,82vw);
  background:var(--tan);color:var(--ink);border:1px solid #c2b096;border-radius:12px;padding:12px 14px;
  font-size:13px;line-height:1.45;box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:opacity .15s;

  display:none}
.help-bubble b{color:var(--darkred)}
.help:hover .help-bubble,.help.open .help-bubble,.help-dot:focus-visible + .help-bubble{opacity:1;visibility:visible;display:block}

@media(max-width:420px){
  .help{position:static}
  .help-bubble{left:12px;right:12px;width:auto}
}

.modal-card .help{position:static}
.modal-card .help-bubble{position:static;left:auto;right:auto;width:auto;margin:8px 0 0}

.inversions.disabled .inv-toggle{opacity:.4;cursor:not-allowed}
.inv-note{font-size:12px;color:var(--gray);font-style:italic}
.inv-head{display:flex;align-items:center;gap:8px}

.playalong{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 0 2px;text-align:center}
.playalong-title{font-family:var(--font);color:var(--lightred);font-weight:700;font-size:clamp(15px,4.2vw,20px);letter-spacing:.05em;text-transform:uppercase;line-height:1.15}

.prog-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:transparent;
  border:0;cursor:pointer;padding:0 0 6px;color:var(--darkred);font-family:var(--font);font-weight:700;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.prog-chev{color:var(--red);transition:transform .2s}
.prog-toggle[aria-expanded="false"] .prog-chev{transform:rotate(-90deg)}
.prog-body[hidden]{display:none}

body.paid.playing .chips,body.paid.playing .tempo,body.paid.playing .displaymode,body.paid.playing .modes{opacity:.18;transition:opacity .3s}
body.paid.playing .chips:hover,body.paid.playing .tempo:hover,body.paid.playing .displaymode:hover,body.paid.playing .modes:hover,
body.paid.playing .chips:focus-within,body.paid.playing .tempo:focus-within,body.paid.playing .displaymode:focus-within,body.paid.playing .modes:focus-within{opacity:1}
.mode.locked::after{content:"\1F512";font-size:11px;display:block}

.upsell{text-align:center;color:var(--cream);font-weight:700;font-size:17px;letter-spacing:.02em;
  margin:4px 0;padding:13px 18px;background:rgba(199,48,43,.26);
  border:1.5px solid var(--lightred);border-radius:14px}
.upgrade{margin-left:auto;background:var(--red);color:var(--cream);text-decoration:none;font-weight:700;
  font-size:12px;padding:6px 13px;border-radius:16px}
.optin-email{width:100%;padding:12px 14px;border:1.5px solid #c2b096;border-radius:10px;background:var(--cream);
  color:var(--ink);font-family:var(--font);font-size:16px;margin:2px 0 6px}
.optin-err{color:var(--red);font-size:13px;margin:0 0 6px;font-weight:700}
.optin-save{border:0;cursor:pointer;width:100%;text-align:center}
.optin-decline{display:block;width:100%;margin-top:10px;background:transparent;border:0;color:#574a37;
  text-decoration:underline;cursor:pointer;font-size:13px;font-family:var(--font)}

.belts{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;margin:-4px 0 2px}
.belt-row{display:flex;gap:8px;flex-wrap:wrap}
.belt-row button{border:1.5px solid;background:transparent;border-radius:14px;padding:10px 16px;min-height:40px;
  font-family:var(--font);font-weight:700;font-size:13px;letter-spacing:.02em;cursor:pointer}
.belt-row button[data-tier="guest"]{border-color:#d9ccb4;color:#d9ccb4}
.belt-row button[data-tier="apprentice"]{border-color:#c7302b;color:#d98a84}
.belt-row button[data-tier="ronin"]{border-color:#6f6656;color:#cbbfa6}
.belt-row button.on[data-tier="guest"]{background:#d9ccb4;color:#221f18}
.belt-row button.on[data-tier="apprentice"]{background:#9e1a1a;color:#fff8f0;border-color:#9e1a1a}
.belt-row button.on[data-tier="ronin"]{background:#221f18;color:#d9ccb4;border-color:#4a4334}

.recede{opacity:.38;transition:opacity .3s ease}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.recede:hover,.recede:focus-within,.recede:active,.recede:has(:focus-visible){opacity:1}

@media (hover:none){.recede{opacity:1}}
@media (prefers-reduced-motion:reduce){.recede{transition:none}}
.upgrade[hidden]{display:none}

.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(20,16,12,.72)}
.modal-card{position:relative;max-width:440px;width:100%;max-height:86vh;overflow:auto;
  background:var(--tan);color:var(--ink);border:1px solid #c2b096;border-radius:20px;
  padding:26px 24px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.modal-x{position:absolute;top:6px;right:8px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--darkred);font-size:28px;line-height:1;cursor:pointer;font-weight:700}
.modal-title{font-family:"Sukajan Brush",var(--font);color:var(--red);font-size:34px;margin:0 0 14px;line-height:1}
.modal-body{margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--ink)}
.modal-sub{margin:16px 0 6px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--darkred)}
.how-steps{margin:0 0 14px;padding-left:20px;font-size:15px;line-height:1.5;color:var(--ink)}
.how-steps li{margin:0 0 5px}
.modal-order{margin:0 0 20px;padding-left:22px;color:var(--ink);font-size:15px;line-height:1.7;font-weight:600}
.modal-cta{display:inline-block;background:var(--red);color:var(--cream);text-decoration:none;
  font-weight:700;font-size:15px;padding:12px 22px;border-radius:30px}

#instrSeg [data-instr="C"],
#pathSeg [data-cell="P1"],#pathSeg [data-cell="P2"]{color:#e6dcc8;background:rgba(217,204,180,.12)}
#instrSeg [data-instr="Bb"],
#pathSeg [data-cell="P3"],#pathSeg [data-cell="P4"]{color:#e8b0aa;background:rgba(199,48,43,.15)}
#instrSeg [data-instr="Eb"],
#pathSeg [data-cell="P5"],#pathSeg [data-cell="P6"]{color:#cfc6b6;background:rgba(58,53,42,.55)}
#instrSeg .is-active[data-instr="C"],
#pathSeg .is-active[data-cell="P1"],#pathSeg .is-active[data-cell="P2"]{background:#d9ccb4;color:#221f18;box-shadow:none}
#instrSeg .is-active[data-instr="Bb"],
#pathSeg .is-active[data-cell="P3"],#pathSeg .is-active[data-cell="P4"]{background:#9e1a1a;color:#fff8f0;box-shadow:none}
#instrSeg .is-active[data-instr="Eb"],
#pathSeg .is-active[data-cell="P5"],#pathSeg .is-active[data-cell="P6"]{background:#3a352a;color:#f0e9da;box-shadow:inset 0 0 0 1px #554d3c}

.belt-badge{display:inline-flex;align-items:center;margin-right:auto}
.belt-badge svg{display:block}

.inversions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:-8px}
.inv-toggle{background:transparent;border:1px solid var(--line2);color:var(--tan);border-radius:14px;
  padding:6px 14px;font-family:var(--font);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer}
.inv-toggle .chev{color:var(--red)}
.inv-panel{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.inv-panel[hidden]{display:none}
.inv-chip{border:1.5px solid var(--red);background:transparent;color:var(--cream);border-radius:12px;
  padding:8px 15px;font-family:var(--font);font-weight:700;font-size:15px;letter-spacing:.14em;cursor:pointer}
.inv-chip.is-active{background:var(--red);color:var(--cream)}
.inv-chip.locked{opacity:.4}

.how-link{background:transparent;border:0;color:var(--lightred);font-family:var(--font);
  font-weight:700;font-size:13px;letter-spacing:.04em;cursor:pointer;margin-top:10px;padding:2px 4px}
.how-link:hover{text-decoration:underline}

.mute-cluster{position:fixed; top:10px; right:12px; z-index:60; display:flex; gap:2px}
.mute-btn{width:42px; height:42px; padding:9px; background:transparent; border:0; cursor:pointer;
  color:var(--ontext); line-height:0; border-radius:12px}
.mute-btn:hover{background:rgba(255,255,255,.10)}
.mute-btn svg{width:100%; height:100%}
.mute-btn .spk{fill:currentColor}
.mute-btn .note{stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.mute-btn .note-h{fill:currentColor}
.mute-btn .wave{stroke:currentColor; stroke-width:2; stroke-linecap:round; fill:none}
.mute-btn .slash{stroke:currentColor; stroke-width:2.4; stroke-linecap:round; display:none}
.mute-btn.off{opacity:.85}
.mute-btn.off .slash{display:block}
.mute-btn.off .wave{display:none}

.attrib{margin:0; padding:22px 16px 28px; text-align:center}
.attrib p{margin:0; color:var(--sub); font-family:var(--font); font-size:12.5px; letter-spacing:.02em}

.badges{margin:14px 0 2px;border-top:1px solid #c2b096;padding-top:12px}
.badges[hidden]{display:none}
.badges-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.badges-title{font-family:"Sukajan Brush",var(--font);font-size:24px;line-height:1;color:var(--darkred)}
.badge-streak{margin-left:auto;font-size:12px;color:#574a37;text-align:right;line-height:1.3}
.badge-streak b{color:var(--darkred)}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:12px 8px}

.badge{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  background:none;border:0;padding:0;font-family:inherit;cursor:default}
.badge-disc{position:relative;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--charcoal);border:2px solid var(--tan);
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:23px;line-height:1;color:var(--tan);
  box-shadow:0 3px 10px rgba(0,0,0,.28);transition:transform .25s ease,opacity .25s ease}
.badge-name{font-size:10.5px;line-height:1.25;font-weight:700;color:var(--ink);max-width:78px}
.badge-cat{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#7a6a53;margin-top:-3px}

.badge[data-cat="streak"] .badge-disc{border-color:#8c6c62;font-family:"Sukajan Brush",var(--font);font-size:26px;color:var(--cream)}
.badge[data-cat="milestone"] .badge-disc{border-color:var(--red);color:#f0d9c8}
.badge[data-cat="habit"] .badge-disc{border-color:var(--darkred);background:#3a1414;color:var(--tan)}

.badge[data-mark="open"] .badge-disc{background:#fbf5ea;border:2px dashed var(--darkred);color:var(--darkred)}
.badge[data-mark="filled"] .badge-disc{background:linear-gradient(160deg,#d9a520,#b07a00 62%,#8a5f00);
  border-color:#7a5400;color:#2b1d00;text-shadow:0 1px 0 rgba(255,255,255,.35)}

.badge.locked .badge-disc{background:#cabda5;border-color:#b3a68c;border-style:dashed;color:#8b7f6a;
  box-shadow:none;filter:grayscale(1)}
.badge.locked .badge-name,.badge.locked .badge-cat{color:#8b7f6a;font-weight:600}
.badge.locked .badge-disc::after{content:"\1F512";position:absolute;right:-2px;bottom:-2px;font-size:11px;
  filter:grayscale(1);text-shadow:0 1px 2px rgba(0,0,0,.4)}

@keyframes badgePop{0%{transform:scale(.4) rotate(-14deg);opacity:0}
  55%{transform:scale(1.22) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.badge.just-earned .badge-disc{animation:badgePop .62s cubic-bezier(.2,1.2,.3,1) both;
  box-shadow:0 0 0 4px rgba(199,48,43,.28),0 4px 14px rgba(0,0,0,.35)}

.badge-toast{position:fixed;left:12px;right:12px;bottom:14px;z-index:80;max-width:430px;margin:0 auto;
  background:var(--charcoal);color:var(--cream);border:1px solid var(--tan);border-radius:15px;
  padding:13px 40px 13px 14px;display:flex;align-items:center;gap:13px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);animation:toastUp .3s ease both}
.badge-toast[hidden]{display:none}
@keyframes toastUp{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
.bt-badge{flex:0 0 auto;gap:0}
.badge-toast .badge-disc{width:50px;height:50px;animation:badgePop .62s cubic-bezier(.2,1.2,.3,1) both}
.bt-text{flex:1;min-width:0}
.bt-eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tan);font-weight:700}
.bt-name{font-family:"Sukajan Brush",var(--font);font-size:27px;line-height:1.05;color:var(--cream);margin:1px 0 2px}
.bt-sub{font-size:12.5px;line-height:1.35;color:var(--tan)}
.bt-x{position:absolute;top:4px;right:4px;width:40px;height:40px;background:transparent;border:0;color:var(--tan);
  font-size:23px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.bt-x:hover{color:var(--cream)}

.badge-toast .help-bubble{top:auto;bottom:calc(100% + 8px);left:auto;right:0}

[data-cell]{position:relative}
[data-cell].mark-terrains::after,
[data-cell].mark-mushin::after{
  position:absolute; top:3px; right:4px; width:15px; height:15px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; pointer-events:none;
  font-family:"Hiragino Mincho ProN",serif; font-size:9px; line-height:1}

[data-cell].mark-terrains::after{
  content:"\5730"; color:var(--tan); border:1.5px solid var(--tan); background:transparent; opacity:.85}

[data-cell].mark-mushin::after{
  content:"\7121"; color:#3a2a12; border:1.5px solid #e8c477; background:#e8c477;
  box-shadow:0 0 7px rgba(232,196,119,.55); font-weight:700}
body[data-tier="apprentice"] [data-cell].mark-terrains::after{color:var(--cream); border-color:var(--cream)}

.setup{border:1px solid rgba(217,204,180,.22);border-radius:14px;margin:22px auto 6px;max-width:760px;background:rgba(0,0,0,.14)}
.setup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 18px;min-height:44px;font-family:Optima,"Optima Nova",Candara,sans-serif;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;font-size:14px;color:var(--tan)}
.setup>summary::-webkit-details-marker{display:none}
.setup>summary:hover,.setup>summary:focus-visible{color:var(--cream)}
.setup>summary .chev{transition:transform .18s ease;display:inline-block}
.setup[open]>summary .chev{transform:rotate(180deg)}
.setup[open]>summary{border-bottom:1px solid rgba(217,204,180,.18)}
.setup-body{padding:6px 12px 16px}

.setup-body .recede{opacity:1}