:root{
  --night:#101613;
  --pine:#1b241f;
  --pine-edge:rgba(157,184,154,.16);
  --paper:#f7f3e8;
  --paper-edge:#e8e1cd;
  --ink:#2a2722;
  --moss:#9db89a;
  --moss-dim:#6e8570;
  --lamp:#e8c56a;
  --lamp-deep:#b98f2e;
  --c-C:#d43a2f; --c-D:#e07f1f; --c-E:#8a4fbe; --c-F:#3f9a3f;
  --c-G:#2456a8; --c-A:#1e6b47; --c-B:#4aa8d8;
  --head-h:58px;
  --foot-h:56px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--night);
  color:var(--moss);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
::selection{background:var(--lamp);color:var(--night)}

/* ---------- breathing forest ---------- */
.forest{
  position:fixed;inset:auto 0 0 0;height:46vh;z-index:0;pointer-events:none;
  transform-origin:50% 100%;
}
.forest svg{position:absolute;bottom:0;left:0;width:100%;height:100%}
.breath-far{opacity:.35;animation:breathe 8s ease-in-out infinite}
.breath-near{opacity:.5;animation:breathe 8s ease-in-out infinite;animation-delay:-.6s}
@keyframes breathe{
  0%{opacity:.18} 50%{opacity:.55} 100%{opacity:.18}
}
.moonglow{
  position:fixed;top:-22vh;right:-14vw;width:52vw;height:52vw;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(232,197,106,.10),rgba(232,197,106,.035) 45%,transparent 68%);
  animation:breathe 8s ease-in-out infinite;
}
/* warm lamp-glow layer, tied to the same breathing cycle as the forest so
   the whole background reads as one system rather than a second clock.
   Strength nudged up in v0.06 so the 4s-brighten / 4s-darken breath is
   plainly visible, per the feedback queue (the old pulse "isn't working") */
.lampglow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(75% 58% at 50% 32%, color-mix(in srgb,var(--lamp) 22%, transparent) 0%, transparent 68%);
  animation:breathe 8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .breath-far,.breath-near,.moonglow,.lampglow{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;height:var(--head-h);z-index:20;
  display:flex;align-items:center;gap:.8rem;padding:0 1.1rem;
  background:color-mix(in srgb,var(--night) 84%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--pine-edge);
}
.wordmark{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:900;
  font-size:1.25rem;color:var(--paper);white-space:nowrap;text-decoration:none;
}
.wordmark .clef{color:var(--lamp);margin-right:.35rem}
nav{display:flex;gap:.15rem;margin-left:.4rem;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
nav::-webkit-scrollbar{display:none}
nav a{
  color:var(--moss);text-decoration:none;font-size:.86rem;font-weight:600;
  padding:.45rem .6rem;border-radius:999px;letter-spacing:.02em;position:relative;white-space:nowrap;
}
nav a:hover{color:var(--paper)}
nav a.on{background:var(--pine);color:var(--lamp)}
nav a .navbadge{
  display:inline-block;min-width:1.4em;margin-left:.3em;padding:.05em .3em;
  background:var(--lamp);color:var(--night);border-radius:999px;
  font-size:.68rem;font-weight:800;text-align:center;vertical-align:.08em;
}
nav a .navbadge:empty{display:none}
.spacer{flex:1}
.timer{
  display:flex;align-items:center;gap:.5rem;border:1px solid var(--pine-edge);
  background:var(--pine);border-radius:999px;padding:.34rem .85rem;cursor:pointer;
  color:var(--moss);font-size:.88rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.timer:hover{color:var(--paper)}
.timer.running{border-color:var(--lamp);color:var(--lamp)}
.timer.running .dot{background:var(--lamp);animation:breathe 2s ease-in-out infinite}
.timer .dot{width:8px;height:8px;border-radius:50%;background:var(--moss-dim)}
.timer #timerText{font-variant-numeric:tabular-nums}
.timer #timerTotal{opacity:.72;font-size:.76rem;font-weight:600;white-space:nowrap}
.timer #timerTotal b{color:inherit;font-weight:800;font-variant-numeric:tabular-nums}
.reqbtn{
  border:1px solid var(--pine-edge);background:var(--pine);color:var(--moss);
  border-radius:999px;padding:.34rem .85rem;cursor:pointer;font-size:.88rem;font-weight:700;
}
.reqbtn:hover{color:var(--lamp)}
.version{font-size:.72rem;color:var(--moss-dim);font-weight:700;letter-spacing:.06em}
.signin{font-size:.76rem;color:var(--moss-dim);font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:.4rem}
.signin a{color:var(--moss);text-decoration:none;border-bottom:1px dotted var(--moss-dim)}
.signin a:hover{color:var(--lamp);border-bottom-color:var(--lamp)}
.signin .who{color:var(--lamp)}

/* ---------- panels ---------- */
main{position:relative;z-index:5}
body{scroll-snap-type:y proximity}
section.panel{
  min-height:100vh;min-height:100dvh;
  scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--head-h) + 10px) 4vw calc(var(--foot-h) + 12px);
}

/* ---------- the practice stage (v0.08) ----------
   The stage IS the page now: one exercise at a time, everything above the
   fold — hosted panel, grade buttons, queue line. Exercise panels live in
   the hidden #shed and are relocated in on demand (hostPanelIn); Theory and
   Compose keep their own full-height sections below the fold. */
#shed{display:none}
.stage{
  min-height:100vh;min-height:100dvh;
  scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.45rem;
  padding:calc(var(--head-h) + 8px) 4vw calc(var(--foot-h) + 8px);
}
.stage .panel{
  min-height:0;padding:0;scroll-snap-align:none;width:100%;
}
/* v0.10: Theory + Compose are modals now, so the stage runs nearly full
   width. The sheet and the small preference buttons sit side by side.
   v0.12: dropped the 1320px cap that left big margins on wide monitors. The
   stage (and, below, the sheet music, its header, suggestions and playback
   rig) now runs 96vw, ceilinged at 1880px for ultra-wide. The ~9.5rem
   preference column on the right is why the sheet lands near 88% rather than a
   literal 90% at 1920px; the buttons-beside-the-music layout is intentional. */
.stage-main{width:min(1880px,96vw);display:flex;align-items:flex-start;gap:.9rem}
.stage-host{flex:1;min-width:0}
.stage-side{
  display:flex;flex-direction:column;gap:.4rem;flex:none;width:9.5rem;padding-top:1.6rem;
}
.stage-side .prefbtn{padding:.42rem .6rem;font-size:.78rem;width:100%;text-align:left}
.stage-side .prefbtn.more{align-self:flex-start;width:auto}
.stage-side .sing-note{
  font-size:.74rem;color:var(--lamp);line-height:1.4;padding:.2rem .1rem .3rem;
  border-top:1px dashed var(--pine-edge);margin-top:.2rem;
}
.stage-side .practiced-btn{
  background:rgba(232,197,106,.12);border:1px solid var(--lamp-deep);color:var(--lamp);
  border-radius:999px;padding:.42rem .6rem;font-size:.78rem;cursor:pointer;font-weight:700;width:100%;
}
.stage-side .practiced-btn.done{background:#1c3a2a;border-color:#3f9a3f;color:#a6dfa6;cursor:default}
@media (max-width:900px){
  .stage-main{flex-direction:column}
  .stage-side{flex-direction:row;flex-wrap:wrap;width:100%;padding-top:0}
  .stage-side .prefbtn{width:auto}
}
/* the stage shares the viewport with the grade rows, so the sheet gets a
   slightly shorter leash than the old full-screen panels' 56vh */
.stage .paper{max-height:44vh}
/* grading happens through the spaced-repetition buttons below the card —
   the old three-button ratings row stays available in the browse modals */
.stage .ratings{display:none}
/* v0.12: on the stage, the sheet music and its neighbours fill the host so
   the notation spans nearly the full viewport (the abcjs staff width is
   measured from the paper at render time and re-rendered on resize; see
   ensureExRendered / renderExPaper). Their base rule is min(1060px,92vw). */
.stage .paper,
.stage .panelhead,
.stage .extras,
.stage .panelfoot{width:100%;max-width:100%}
/* v0.12: the browse modals (scales, fingering, pieces) host the same
   exercise panels, so let them fill a roomier card too, without touching the
   theory or compose modals (whose paper is a direct child, not inside .exhost). */
.modal .card.wide:has(.exhost){width:min(1180px,94vw)}
.modal .exhost .paper,
.modal .exhost .panelhead,
.modal .exhost .extras,
.modal .exhost .panelfoot{width:100%;max-width:100%}
.stage-row{margin-top:.1rem;justify-content:center}
.stage-row .srsbtn{padding:.6rem 1.5rem;font-size:.95rem}
.queueline{
  font-size:.78rem;color:var(--moss-dim);font-variant-numeric:tabular-nums;
  text-align:center;line-height:1.5;
}
.queueline .keys{opacity:.75}
.stage .practice-empty{
  background:var(--paper);border:1px solid var(--paper-edge);border-radius:14px;
  box-shadow:0 22px 60px -18px rgba(0,0,0,.75), 0 0 0 6px rgba(247,243,232,.045);
  width:min(720px,92vw);padding:3rem 2rem;color:#7d8a6f;
}
.stage .practice-empty b{color:var(--ink)}
.prefbtn.more{padding:.5rem .8rem;color:var(--moss-dim)}
/* Theory + Compose modals (v0.10): keep their panels inside the modal card */
#theoryModal .panelhead,#composeModal .panelhead{width:100%;margin-bottom:.8rem}
#theoryModal .theory-paper{max-height:56vh;min-height:30vh}
#composeModal .compose-paper{max-height:60vh;overflow-y:auto}
.breathe-list{margin:.4rem 0 .8rem 1.1rem;display:flex;flex-direction:column;gap:.5rem}
.breathe-list li{line-height:1.5;font-size:.92rem;color:var(--ink)}
.breathe-list b{color:var(--lamp-deep)}
.breathe-foot{font-size:.82rem;color:var(--moss-dim)}
.breathe-foot a{color:var(--lamp-deep)}
.panelhead{width:min(1060px,92vw);display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;margin-bottom:.6rem}
.panelhead .no{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;
  color:var(--moss-dim);font-size:1rem;
}
.panelhead h2{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:900;
  color:var(--paper);font-size:clamp(1.2rem,2.3vw,2rem);white-space:nowrap;
}
/* hint gets its own full-width row below the title (rather than squeezing
   the title into a narrow column) so it's free to wrap to two lines and the
   title never has to shrink-wrap into an overflow */
.panelhead .hint{color:var(--moss);font-size:.88rem;flex-basis:100%;max-width:none;text-align:left;line-height:1.4}
.paper{
  width:min(1060px,92vw);
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:14px;
  box-shadow:0 22px 60px -18px rgba(0,0,0,.75), 0 0 0 6px rgba(247,243,232,.045);
  padding:1.1rem 1.4rem .8rem;
  max-height:56vh;overflow-y:visible;touch-action:pan-y;
}
/* overscroll-behavior stays at its default (auto) on purpose: when a tall
   piece's inner scroll runs out, the gesture chains to the page, so page
   scrolling works with the pointer anywhere, including over the sheet music */
.paper.paper-scrolls{overflow-y:auto}
.paper{color:var(--ink)}
.paper svg{display:block}
.paper .abcjs-chord{fill:#7d8a6f}
.paper .abcjs-annotation{fill:#9a917c}
.paper .abcjs-tempo{fill:#9a917c}
.note-label{fill:#8b8474;font-family:system-ui,sans-serif;font-weight:600}
.abcjs-playing{filter:drop-shadow(0 0 2px rgba(185,143,46,1)) drop-shadow(0 0 7px rgba(232,197,106,.85))}
.play-cursor{fill:rgba(232,197,106,.30);stroke:rgba(185,143,46,.55);stroke-width:.8;rx:5}
.no-glow .abcjs-playing{filter:none}
.no-glow .play-cursor{display:none}
.paper .abcjs-note, .paper .abcjs-notehead{cursor:pointer}
.grade{
  margin-left:.2rem;align-self:center;white-space:nowrap;
  font-size:.72rem;font-weight:800;letter-spacing:.05em;color:var(--lamp);
  border:1px solid var(--lamp-deep);border-radius:999px;padding:.18rem .6rem;
  background:rgba(232,197,106,.08);
}
.glowbtn{
  border:1px solid var(--pine-edge);background:var(--pine);color:var(--moss);
  border-radius:999px;padding:.34rem .7rem;cursor:pointer;font-size:.88rem;font-weight:700;
}
.glowbtn.off{color:var(--moss-dim);border-style:dashed}
.glowbtn:hover{color:var(--lamp)}

/* suggestions + personal notes under each exercise */
.extras{
  width:min(1060px,92vw);display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.55rem;
  align-items:start;
}
details.tips{
  background:var(--pine);border:1px solid var(--pine-edge);border-radius:12px;
  font-size:.84rem;color:var(--moss);overflow:hidden;
}
details.tips summary{
  cursor:pointer;padding:.5rem .8rem;font-weight:700;color:var(--moss);
  list-style:none;user-select:none;
}
details.tips summary::-webkit-details-marker{display:none}
details.tips summary::before{content:"✦ ";color:var(--lamp)}
details.tips[open] summary{color:var(--lamp);border-bottom:1px solid var(--pine-edge)}
details.tips ul{padding:.55rem .9rem .7rem 1.7rem;display:flex;flex-direction:column;gap:.35rem}
details.tips li{line-height:1.45}
details.tips b{color:var(--paper);font-weight:700}
.notesbox{display:flex;flex-direction:column;gap:.2rem}
.exnotes{
  width:100%;min-height:2.6em;max-height:9em;background:var(--pine);color:var(--paper);
  border:1px solid var(--pine-edge);border-radius:12px;padding:.5rem .8rem;
  font:inherit;font-size:.84rem;resize:vertical;
}
.exnotes::placeholder{color:var(--moss-dim)}
.exnotes:focus{border-color:var(--lamp-deep)}
.notes-state{font-size:.68rem;color:var(--moss-dim);align-self:flex-end;min-height:1em;padding-right:.2rem}

/* practice-log modal */
.tm-totals{display:flex;gap:1.2rem;margin:.2rem 0 .9rem}
.tm-totals div{flex:1;text-align:center;background:var(--night);border:1px solid var(--pine-edge);border-radius:10px;padding:.5rem}
.tm-totals b{display:block;color:var(--lamp);font-size:1.05rem;font-variant-numeric:tabular-nums}
.tm-totals span{font-size:.7rem;color:var(--moss-dim);letter-spacing:.06em;text-transform:uppercase}
.tm-list{max-height:38vh;overflow-y:auto;display:flex;flex-direction:column;gap:.3rem}
.tm-row{display:flex;align-items:center;gap:.6rem;background:var(--night);border:1px solid var(--pine-edge);border-radius:10px;padding:.42rem .7rem;font-size:.86rem}
.tm-row .d{color:var(--paper);font-variant-numeric:tabular-nums}
.tm-row .len{color:var(--lamp);font-weight:700;font-variant-numeric:tabular-nums;margin-left:auto}
.tm-row .how{font-size:.7rem;color:var(--moss-dim)}
.tm-row button{border:none;background:none;color:var(--moss-dim);cursor:pointer;font-size:.85rem;padding:.15rem .3rem}
.tm-row button:hover{color:var(--lamp)}
.tm-row input{width:4.5em;background:var(--pine);color:var(--paper);border:1px solid var(--lamp-deep);border-radius:6px;padding:.15rem .3rem;font:inherit;text-align:right}
.tm-status{font-size:.85rem;margin-bottom:.6rem;color:var(--moss)}
.tm-status b{color:var(--lamp);font-variant-numeric:tabular-nums}
.tm-empty{color:var(--moss-dim);font-size:.85rem;text-align:center;padding:1rem 0}

.panelfoot{
  width:min(1060px,92vw);display:flex;align-items:center;gap:1rem;margin-top:.7rem;flex-wrap:wrap;
}
.audio{flex:1;min-width:300px}
.ratings{display:flex;gap:.5rem;align-items:center}
.rate{
  border:1px solid var(--pine-edge);background:var(--pine);color:var(--moss);
  border-radius:999px;padding:.42rem .85rem;cursor:pointer;font-size:.84rem;font-weight:700;
}
.rate:hover{color:var(--paper)}
.rate.on[data-r="toohard"]{background:#4a2320;border-color:#8a4038;color:#f0b0a8}
.rate.on[data-r="practice"]{background:#3d3416;border-color:var(--lamp-deep);color:var(--lamp)}
.rate.on[data-r="gotit"]{background:#1c3a2a;border-color:#3f9a3f;color:#a6dfa6}
.rate-date{font-size:.72rem;color:var(--moss-dim);min-width:5.5em}

/* abcjs audio widget re-skin */
.abcjs-inline-audio{background:var(--pine);border:1px solid var(--pine-edge);border-radius:999px;height:38px;padding:0 12px}
.abcjs-btn g{fill:var(--moss);stroke:var(--moss)}
.abcjs-inline-audio .abcjs-btn:hover g{fill:var(--lamp);stroke:var(--lamp)}
.abcjs-midi-progress-background{background:var(--night)!important;border:1px solid var(--pine-edge)!important;height:8px!important}
.abcjs-midi-progress-indicator{background:var(--lamp)!important;width:12px!important}
.abcjs-midi-clock{color:var(--moss)!important;font-size:.8rem!important}
.abcjs-midi-tempo{background:var(--night)!important;color:var(--paper)!important;border:1px solid var(--pine-edge)!important;border-radius:6px!important}
.abcjs-tempo-wrapper{color:var(--moss)!important;font-size:.72rem!important}

/* section intro strip */
.divider{
  min-height:34vh;display:flex;align-items:center;justify-content:center;
  scroll-snap-align:start;padding-top:var(--head-h);
}
.divider h3{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;
  color:var(--moss);font-size:1.1rem;letter-spacing:.24em;text-transform:uppercase;
}
.divider h3 b{color:var(--lamp);font-weight:600}

/* ---------- theory / SRS ---------- */
.theory-paper{min-height:40vh;display:flex;flex-direction:column}
.srs-meta{display:flex;gap:.8rem;align-items:center;font-size:.75rem;color:#9a917c;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.9rem}
.srs-meta .unit{font-weight:800;color:#7d8a6f}
.srs-front{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;
  font-size:clamp(1.15rem,2vw,1.5rem);color:var(--ink);line-height:1.4;margin-bottom:.8rem;
}
.srs-back{font-size:.98rem;line-height:1.6;color:#3d382f;border-top:1px dashed #d8cfb6;padding-top:.8rem;margin-top:.2rem}
.srs-back b{color:#1e6b47}
.srs-abc{margin:.6rem 0 0}
.srs-done{flex:1;display:grid;place-items:center;text-align:center;color:#7d8a6f;font-size:1rem;padding:2rem 0}
.srs-done b{display:block;font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:1.5rem;color:var(--ink);margin-bottom:.4rem}
.srsbtn{
  border:1px solid var(--pine-edge);background:var(--pine);color:var(--moss);
  border-radius:999px;padding:.5rem 1.1rem;cursor:pointer;font-size:.88rem;font-weight:800;
}
.srsbtn:hover{color:var(--paper)}
.srsbtn.reveal{background:var(--lamp);color:var(--night);border-color:var(--lamp)}
.srsbtn[data-g="again"]:hover{background:#4a2320;border-color:#8a4038;color:#f0b0a8}
.srsbtn[data-g="hard"]:hover{background:#43380f;border-color:var(--lamp-deep);color:var(--lamp)}
.srsbtn[data-g="good"]:hover{background:#1c3a2a;border-color:#3f9a3f;color:#a6dfa6}
.srsbtn[data-g="easy"]:hover{background:#14333f;border-color:#4aa8d8;color:#a8d8f0}
.srsbtn small{display:block;font-weight:600;font-size:.64rem;color:inherit;opacity:.7}
.srs-count{font-size:.8rem;color:var(--moss);margin-left:auto;font-variant-numeric:tabular-nums}

/* ---------- compose ---------- */
.compose-paper{min-height:36vh}
.comp-controls{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.8rem}
.recbtn{
  border:2px solid #b0483e;background:#fdf9ee;color:#b0483e;border-radius:999px;
  padding:.6rem 1.3rem;cursor:pointer;font-size:.95rem;font-weight:800;
}
.recbtn.armed{background:#b0483e;color:#fff;animation:breathe 2s ease-in-out infinite}
.recbtn:disabled,.hand-select button:disabled{opacity:.45;cursor:not-allowed}
.comp-note{font-size:.8rem;color:#9a917c;font-style:italic}
.hand-select{display:flex;gap:.4rem;flex-wrap:wrap}
.handbtn{
  border:1px solid #d8cfb6;background:#fdf9ee;color:#7d8a6f;border-radius:999px;
  padding:.42rem .8rem;cursor:pointer;font-size:.8rem;font-weight:700;
}
.handbtn:hover{color:var(--ink)}
.handbtn.on{background:#b0483e;color:#fff;border-color:#b0483e}
.comp-info-btn{
  border:1px solid #d8cfb6;background:#fdf9ee;color:#7d8a6f;border-radius:999px;
  padding:.42rem .75rem;cursor:pointer;font-size:.8rem;font-weight:700;
}
.comp-info-btn:hover{color:var(--ink)}
.comp-info-btn[aria-expanded="true"]{background:var(--lamp);color:var(--night);border-color:var(--lamp-deep)}
.comp-info{
  background:#fbf7ec;border:1px solid #e2dac4;border-radius:10px;color:#5b5648;
  font-size:.82rem;line-height:1.5;padding:.65rem .9rem;margin:0 0 .8rem;
}
.comp-info[hidden]{display:none}
.comp-result audio{width:100%;margin:.4rem 0 .8rem}
.comp-save{display:flex;gap:.6rem;align-items:center;margin:.6rem 0 .2rem;flex-wrap:wrap}
.comp-save input{
  flex:1;min-width:180px;background:#fdf9ee;border:1px solid #d8cfb6;border-radius:10px;
  padding:.5rem .8rem;font:inherit;font-size:.88rem;color:var(--ink);
}
.comp-save button{
  border:1px solid var(--lamp-deep);background:var(--lamp);color:var(--night);
  border-radius:999px;padding:.5rem 1.1rem;cursor:pointer;font-weight:800;font-size:.88rem;
}
.comp-status{font-size:.85rem;color:#7d8a6f;min-height:1.2em;margin:.3rem 0}
.comp-list{margin-top:1rem;border-top:1px dashed #d8cfb6;padding-top:.8rem}
.comp-list h4{font-family:"Fraunces",Georgia,serif;font-style:italic;color:var(--ink);font-size:1rem;margin-bottom:.5rem}
.comp-item{border:1px solid #e2dac4;border-radius:10px;padding:.6rem .8rem;margin-bottom:.6rem;background:#fbf7ec}
.comp-item .ci-head{display:flex;align-items:baseline;gap:.6rem;font-size:.85rem;color:#7d8a6f}
.comp-item .ci-head b{color:var(--ink);font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:1rem}
.comp-item .ci-head button{margin-left:auto;border:none;background:none;color:#b0a789;cursor:pointer}
.comp-item .ci-head button:hover{color:#b0483e}
.comp-item audio{width:100%;margin:.35rem 0}
.comp-item .audio,.comp-preview-audio{margin:.4rem 0 .2rem;min-width:0}
.comp-empty{color:#9a917c;font-size:.85rem;font-style:italic}

/* ---------- footer ---------- */
footer{
  position:fixed;bottom:0;left:0;right:0;height:var(--foot-h);z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:.4rem;gap:.1rem;
  font-family:"Fraunces",Georgia,serif;font-style:italic;
  color:var(--moss);font-size:.92rem;letter-spacing:.04em;
  background:linear-gradient(transparent,rgba(16,22,19,.9) 45%);
  pointer-events:none;
}
.foot-sub{font-size:.74rem;color:var(--moss-dim)}
.foot-sub b{color:var(--lamp);font-weight:600}

/* quiet ecosystem line at the very end of the room */
.ecoline{text-align:center;font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:.78rem;color:var(--moss-dim);margin:2.4rem auto 1.2rem;letter-spacing:.04em}
.ecoline a{color:var(--moss);text-decoration:none;border-bottom:1px dotted var(--moss-dim)}
.ecoline a:hover{color:var(--lamp);border-bottom-color:var(--lamp)}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;z-index:40;display:none;place-items:center;
  background:rgba(6,9,7,.7);backdrop-filter:blur(4px);
}
.modal.open{display:grid}
.modal .card{
  width:min(520px,92vw);background:var(--pine);border:1px solid var(--pine-edge);
  border-radius:16px;padding:1.4rem;max-height:86vh;overflow-y:auto;
}
.modal h3{font-family:"Fraunces",Georgia,serif;font-style:italic;color:var(--paper);margin-bottom:.3rem}
.modal p{font-size:.85rem;color:var(--moss);margin-bottom:.9rem}
.modal textarea{
  width:100%;min-height:90px;background:var(--night);color:var(--paper);
  border:1px solid var(--pine-edge);border-radius:10px;padding:.7rem;font:inherit;font-size:.92rem;
  resize:vertical;
}
.modal .row{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.8rem}
.modal button{
  border:none;border-radius:999px;padding:.5rem 1.1rem;font-weight:800;cursor:pointer;font-size:.88rem;
}
.modal .send{background:var(--lamp);color:var(--night)}
.modal .cancel{background:transparent;color:var(--moss);border:1px solid var(--pine-edge)}
.modal .ok{color:#a6dfa6;font-size:.85rem;margin-top:.6rem;min-height:1.1em}

/* feedback queue inside the next-version modal */
.fb-list{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;max-height:34vh;overflow-y:auto}
.fb-item{
  display:flex;align-items:baseline;gap:.6rem;background:var(--night);
  border:1px solid var(--pine-edge);border-radius:10px;padding:.45rem .7rem;font-size:.82rem;
}
.fb-item .t{flex:1;color:var(--paper);line-height:1.35}
.fb-item .d{color:var(--moss-dim);font-size:.7rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.fb-chip{
  font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  border-radius:999px;padding:.14rem .5rem;white-space:nowrap;
}
.fb-chip.queued{background:rgba(232,197,106,.14);color:var(--lamp);border:1px solid var(--lamp-deep)}
.fb-chip.done{background:rgba(63,154,63,.14);color:#a6dfa6;border:1px solid #3f9a3f}
.fb-done{margin-bottom:.6rem}
.fb-done summary{cursor:pointer;font-size:.78rem;color:var(--moss-dim);font-weight:700;padding:.2rem 0;user-select:none}
.fb-done summary:hover{color:var(--moss)}
.fb-done[open] summary{margin-bottom:.4rem}
.fb-loading{font-size:.8rem;color:var(--moss-dim);margin-bottom:.8rem}

/* browsable exercise modals (scales / fingering) — tabs + list + prev/next,
   with the picked exercise's own card (notation, playback, ratings, notes)
   relocated live into .exhost */
.modal .card.wide{width:min(920px,94vw)}
.browse-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.7rem}
.browse-tab{
  border:1px solid var(--pine-edge);background:var(--night);color:var(--moss);
  border-radius:999px;padding:.32rem .85rem;cursor:pointer;font-size:.82rem;font-weight:700;
}
.browse-tab:hover{color:var(--paper)}
.browse-tab.on{background:rgba(232,197,106,.14);border-color:var(--lamp-deep);color:var(--lamp)}
.browse-nav{display:flex;align-items:stretch;gap:.5rem;margin-bottom:.5rem}
.browse-arrow{
  border:1px solid var(--pine-edge);background:var(--night);color:var(--moss);
  border-radius:10px;padding:0 .8rem;cursor:pointer;font-size:1.3rem;line-height:1;flex:none;
}
.browse-arrow:hover{color:var(--lamp);border-color:var(--lamp-deep)}
.browse-list{flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:.4rem}
.browse-item{
  display:flex;align-items:center;gap:.4rem;text-align:left;
  border:1px solid var(--pine-edge);background:var(--night);color:var(--moss);
  border-radius:10px;padding:.4rem .7rem;cursor:pointer;font-size:.82rem;white-space:nowrap;
}
.browse-item:hover{color:var(--paper)}
.browse-item.on{border-color:var(--lamp-deep);color:var(--lamp);background:rgba(232,197,106,.1)}
.exhost{margin-top:.4rem}
.exhost .panel{min-height:auto;display:block;padding:0}
.exhost .panelhead,.exhost .paper,.exhost .extras,.exhost .panelfoot{width:100%}
.exhost .panelhead h2{white-space:normal}
.exhost .paper{max-height:38vh}

/* ---------- practice mode (exercise spaced repetition) ---------- */
.practice-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.prefbtn{
  border:1px solid var(--pine-edge);background:var(--pine);color:var(--moss);
  border-radius:999px;padding:.5rem 1.05rem;cursor:pointer;font-size:.86rem;font-weight:700;
}
.prefbtn:hover{color:var(--paper)}
.prefbtn.skip{color:var(--moss-dim);font-weight:600}
.prefbtn:disabled{opacity:.4;cursor:not-allowed}
.prefbtn[data-p="enjoy"].on{background:#1c3a2a;border-color:#3f9a3f;color:#a6dfa6}
.prefbtn[data-p="fine"].on{background:#3d3416;border-color:var(--lamp-deep);color:var(--lamp)}
.prefbtn[data-p="dislike"].on{background:#4a2320;border-color:#8a4038;color:#f0b0a8}
.practice-toggle{
  background:none;border:none;color:var(--moss-dim);font-size:.78rem;cursor:pointer;
  text-decoration:underline dotted;padding:.2rem 0;
}
.practice-toggle:hover{color:var(--lamp)}
.practice-toggle:empty{display:none}
.practice-empty{padding:2.4rem 1rem;text-align:center;color:var(--moss)}
.practice-empty b{
  display:block;font-family:"Fraunces",Georgia,serif;font-style:italic;
  font-size:1.4rem;color:var(--paper);margin-bottom:.5rem;
}
.practice-sub2{font-size:.78rem;color:var(--moss-dim);margin-top:.7rem}

.toast{
  position:fixed;bottom:calc(var(--foot-h) + 10px);left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--pine);color:var(--paper);border:1px solid var(--lamp-deep);
  border-radius:999px;padding:.5rem 1.2rem;font-size:.86rem;font-weight:600;z-index:30;
  opacity:0;transition:all .35s;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

:where(button,a,input,textarea):focus-visible{outline:2px solid var(--lamp);outline-offset:2px}

/* accessible tooltips: title="" only ever shows on mouse hover, so keyboard
   and touch users get nothing. data-tip + this pattern shows the same hint
   on hover, on keyboard focus, and (via a tap-toggled .tip-open class, see
   the touchstart listener near the toast code) on tap. */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-4px);
  background:var(--pine);color:var(--paper);border:1px solid var(--lamp-deep);
  padding:.35rem .6rem;border-radius:8px;font-size:.72rem;font-weight:600;
  white-space:normal;width:max-content;max-width:180px;text-align:center;
  pointer-events:none;opacity:0;visibility:hidden;z-index:50;
  transition:opacity .15s ease,transform .15s ease;
}
[data-tip]:hover::after,[data-tip]:focus-visible::after,[data-tip].tip-open::after{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}

@media (max-width:1240px){ .timer #timerTotal{display:none} .reqbtn{padding:.34rem .6rem} }
/* 8 nav items (Fingering + Practice joined the original 6) need more room
   than they used to; below 1300px tighten the pills so the row scrolls
   (via nav's own overflow-x, see above) instead of pushing the timer/log/
   next-version/version controls off the right edge of the header. */
@media (max-width:1300px){ nav{gap:.05rem} nav a{padding:.42rem .45rem;font-size:.8rem} }
@media (max-width:980px){ .panelhead .hint{display:none} .extras{grid-template-columns:1fr} }
@media (max-width:720px){ nav{display:none} }

/* ================= v0.14 additions ================= */

/* grade dropdown, in the header, next to the nav */
.gradesel{
  display:flex;align-items:center;gap:.35rem;
  border:1px solid var(--pine-edge);background:var(--pine);color:var(--moss);
  border-radius:999px;padding:.28rem .3rem .28rem .7rem;font-size:.82rem;font-weight:700;
}
.gradesel label{white-space:nowrap;color:var(--moss-dim);font-weight:600;font-size:.76rem}
.gradesel select{
  background:var(--night);color:var(--paper);border:1px solid var(--pine-edge);
  border-radius:999px;padding:.22rem .5rem;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
}
.gradesel select:focus-visible{outline:2px solid var(--lamp)}

/* breathing buttons in the header */
.breathebtn{
  border:1px solid var(--pine-edge);background:var(--pine);color:var(--moss);
  border-radius:999px;padding:.34rem .7rem;cursor:pointer;font-size:.82rem;font-weight:700;
}
.breathebtn:hover{color:var(--lamp)}
.breathebtn.on{background:rgba(232,197,106,.16);border-color:var(--lamp-deep);color:var(--lamp)}

/* full-screen translucent breathing overlay — pointer-events:none so every
   click passes straight through to the page underneath, per Em's spec */
#breatheOverlay{
  position:fixed;inset:0;z-index:35;display:none;place-items:center;
  pointer-events:none;background:rgba(16,22,19,.16);
}
#breatheOverlay.on{display:grid}
.orb{
  width:min(34vw,220px);height:min(34vw,220px);border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(232,197,106,.55), rgba(157,184,154,.28) 55%, transparent 78%);
  border:1px solid rgba(232,197,106,.35);
  display:grid;place-items:center;
  transform:scale(.72);opacity:.75;
  transition:transform 1.2s ease-in-out, opacity 1.2s ease-in-out;
}
.orb.grow{transform:scale(1);opacity:.95}
.orb .orblabel{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;
  color:var(--paper);font-size:1rem;letter-spacing:.04em;text-shadow:0 2px 10px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: reduce){ .orb{transition:none} }

/* compact stage-side controls (v0.14: the ⋯ is gone, everything shows at
   once, sized down so the sheet music keeps most of the width) */
.stage-side .prefbtn{padding:.3rem .5rem;font-size:.72rem}
.stage-side .prefbtn.skip{font-size:.7rem}
.stage-side .practiced-btn{padding:.3rem .5rem;font-size:.72rem}
.stage-side .sing-note{font-size:.68rem}

/* standalone content pages (Pieces / Fingering / Theory / Compose / Scales) —
   the old modal ".card.wide" shape, now the page body itself */
.pagewrap{
  max-width:min(1180px,94vw);margin:0 auto;
  padding:calc(var(--head-h) + 22px) 0 calc(var(--foot-h) + 40px);
  position:relative;z-index:5;
}
.pagewrap h1{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:900;
  color:var(--paper);font-size:clamp(1.5rem,3.2vw,2.3rem);margin-bottom:.3rem;
}
.pagewrap > p.lede{color:var(--moss);font-size:.92rem;margin-bottom:1.1rem;max-width:60em}
.pagewrap .exhost{margin-top:.4rem}
.pagewrap .exhost .panel{min-height:auto;display:block;padding:0}
.pagewrap .exhost .panelhead,.pagewrap .exhost .paper,.pagewrap .exhost .extras,.pagewrap .exhost .panelfoot{width:100%}
.pagewrap .exhost .paper{max-height:46vh}

/* scales grid (v0.14 redesign): every scale for the chosen grade, at a
   glance — staff notation + keyboard graphic + fingering, side by side */
.scale-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
.scale-card{
  background:var(--paper);border:1px solid var(--paper-edge);border-radius:14px;
  box-shadow:0 22px 60px -18px rgba(0,0,0,.75), 0 0 0 6px rgba(247,243,232,.045);
  padding:1rem 1.2rem;color:var(--ink);
}
.scale-card h3{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:700;
  font-size:1.15rem;margin-bottom:.15rem;
}
.scale-card .scale-sub{font-size:.78rem;color:#8b8474;margin-bottom:.6rem}
.scale-card .scale-notation{overflow-x:auto}
.scale-card .keyboard-wrap{margin-top:.5rem;max-width:720px}
.scale-card .keyboard-wrap svg{width:100%;height:auto;display:block}
.scale-simplify-note{font-size:.78rem;color:var(--moss-dim);margin:.4rem 0 1rem;max-width:60em}

/* browse list (Pieces / Fingering pages): grade-filtered list on the left,
   hosted exercise panel on the right — mirrors the old browse-modal look */
.browse-page{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap;margin-top:.8rem}
.browse-page .browse-list-col{flex:none;width:min(280px,100%);display:flex;flex-direction:column;gap:.4rem;max-height:70vh;overflow-y:auto}
.browse-page .exhost{flex:1;min-width:0}
.browse-empty{color:var(--moss);font-size:.9rem;padding:1.5rem 0}

/* ============ notation tabs (v0.01, ukulele-only) ============
   Three switchable views per exercise panel: chord diagrams, a
   self-rendered TAB, and the existing abcjs staff. Persisted in
   localStorage (uke_notation_view), shared across the whole site. */
.notation-tabs{width:min(1060px,92vw);display:flex;gap:.4rem;margin:.3rem 0 .5rem}
.notation-tabbtn{
  border:1px solid var(--pine-edge);background:var(--pine);color:var(--moss);
  border-radius:999px;padding:.32rem .9rem;cursor:pointer;font-size:.85rem;font-weight:700;
}
.notation-tabbtn.on{border-color:var(--lamp-deep);color:var(--lamp);background:rgba(232,197,106,.12)}
.notation-view{display:none;width:min(1060px,92vw)}
.notation-view.shown{display:block}
.notation-view.notation-staff .paper{width:100%}
.fretbox-row{display:flex;flex-wrap:wrap;gap:.9rem;background:var(--paper);border:1px solid var(--paper-edge);
  border-radius:14px;padding:1rem 1.2rem;box-shadow:0 22px 60px -18px rgba(0,0,0,.75), 0 0 0 6px rgba(247,243,232,.045);}
.fretbox-cell svg.fretbox{width:96px;height:auto;display:block}
.chord-missing{color:var(--moss-dim);font-size:.85rem;padding:1rem}
.uke-tab{
  background:var(--paper);border:1px solid var(--paper-edge);border-radius:14px;
  box-shadow:0 22px 60px -18px rgba(0,0,0,.75), 0 0 0 6px rgba(247,243,232,.045);
  color:var(--ink);padding:1rem 1.2rem;overflow-x:auto;font-family:"SF Mono",Consolas,Menlo,monospace;
  font-size:.85rem;line-height:1.6;margin:0;
}
.tab-note{font-size:.78rem;color:var(--moss-dim);margin:.4rem 0 0}

/* ukulele fretboard (Scales page) */
.scale-card .uke-fretboard-wrap{margin-top:.5rem;max-width:720px}
.scale-card .uke-fretboard-wrap svg{width:100%;height:auto;display:block}

@media (max-width:900px){ .browse-page{flex-direction:column} .browse-page .browse-list-col{width:100%;max-height:none} }