:root{
  --green:#185932;--green-d:#0f3f23;--sage:#bbcec0;--gold:#ffd65e;--cream:#fffaea;--tan:#dbd4c7;--black:#111;
  --paper:#fff;--ink:#16211a;--muted:#5d665f;--line:#e6e0d3;
  --good:#1b7a3d;--good-bg:#e4f3e9;--bad:#b3261e;--bad-bg:#fbe9e7;
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --r:16px;--shadow:0 1px 2px rgba(17,17,17,.06),0 6px 20px rgba(24,89,50,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.5 var(--sans)}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.2}
h2{font-size:1.6rem;margin:0 0 .4rem}
h3{font-size:1.15rem;margin:0 0 .5rem}
p{margin:.4rem 0 .8rem}
kbd{font:600 .72rem var(--sans);background:var(--paper);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--muted)}

/* header */
header{background:var(--green);color:#fff;position:sticky;top:0;z-index:5;box-shadow:0 2px 0 var(--gold)}
.hwrap{max-width:1040px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;background:none;border:0;padding:0;color:#fff;text-align:left}
.brand .mark{width:40px;height:40px;font-size:.72rem !important;border-radius:50%;background:var(--gold);color:var(--green);display:grid;place-items:center;font:700 .95rem var(--serif)}
.brand b{display:block;font:600 1.15rem var(--serif)}
.brand small{display:block;color:var(--gold);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
#nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
#nav button{background:transparent;border:0;color:#e8efe9;padding:7px 12px;border-radius:999px;cursor:pointer;font-weight:600;font-size:.88rem;display:flex;align-items:center;gap:6px}
#nav button:hover{background:rgba(255,255,255,.1)}
#nav button.on{background:var(--gold);color:var(--black)}
#nav button svg{width:14px;height:14px}
.vpill{display:flex;align-items:center;gap:6px;font-size:.75rem;color:#e8efe9;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:4px 10px;white-space:nowrap}
.vpill i{width:8px;height:8px;border-radius:50%;background:#999}
.vpill.up i{background:#5fd38a}.vpill.loading i{background:var(--gold);animation:pulse 1s infinite}.vpill.down i{background:#f28b82}

main{max-width:860px;margin:0 auto;padding:24px 16px 80px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:16px;box-shadow:var(--shadow)}
.muted{color:var(--muted);font-size:.9rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}

/* buttons */
.btn{background:var(--green);color:#fff;border:0;padding:10px 18px;border-radius:12px;cursor:pointer;font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:8px}
.btn:hover{background:var(--green-d)}
.btn.alt{background:var(--paper);color:var(--ink);border:1.5px solid var(--line)}
.btn.alt:hover{border-color:var(--green)}
.btn.ghost{background:transparent;color:var(--green);padding:8px 10px}
.btn.ghost:hover{background:var(--good-bg)}
.btn:disabled{opacity:.45;cursor:default}
.btn kbd{background:rgba(255,255,255,.15);color:inherit;border-color:rgba(255,255,255,.3)}
.btn.alt kbd,.btn.ghost kbd{background:var(--cream);color:var(--muted);border-color:var(--line)}

/* home */
.hero{background:linear-gradient(135deg,var(--green),#1f6e40);color:#fff;border-radius:var(--r);padding:28px 26px;margin-bottom:16px;box-shadow:var(--shadow)}
.hero h2{font-size:2rem;margin-bottom:.3rem}
.hero p{color:#e3ece5;max-width:560px}
.hero .motto{color:var(--gold);font-family:var(--serif);font-style:italic}
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.mode{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);padding:16px;text-align:left;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s,border-color .12s}
.mode:hover{transform:translateY(-2px);border-color:var(--green)}
.mode .ic{width:36px;height:36px;border-radius:10px;background:var(--good-bg);color:var(--green);display:grid;place-items:center;margin-bottom:10px}
.mode.voice .ic{background:var(--gold);color:var(--black)}
.mode b{display:block;font-family:var(--serif);font-size:1.1rem}
.mode span{font-size:.85rem;color:var(--muted)}
.mode em{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green);background:var(--good-bg);padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:middle}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.stat{background:var(--cream);border-radius:12px;padding:12px}
.stat b{display:block;font:600 1.6rem var(--serif);color:var(--green)}
.stat span{font-size:.8rem;color:var(--muted)}
ol.plan{padding-left:1.2rem;margin:.3rem 0}ol.plan li{margin:.25rem 0}

/* filter */
details.set{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:14px}
details.set summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--muted);list-style:none;display:flex;align-items:center;gap:8px}
details.set summary::-webkit-details-marker{display:none}
details.set summary::after{content:"";margin-left:auto;border:5px solid transparent;border-top-color:var(--muted);transform:translateY(3px)}
details.set[open] summary::after{transform:rotate(180deg) translateY(3px)}
.filter{display:grid;gap:10px;padding-top:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 12px;font-size:.85rem;cursor:pointer;font-weight:600}
.chip.on{background:var(--green);border-color:var(--green);color:#fff}
.flabel{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}

/* progress */
.top{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:.88rem;color:var(--muted)}
.bar{height:8px;background:var(--tan);border-radius:6px;overflow:hidden;flex:1}
.bar i{display:block;height:100%;background:var(--green);transition:width .35s}
.bar.segs{display:flex;gap:2px;background:none}
.bar.segs i{flex:1;background:var(--tan);border-radius:3px;width:auto}
.bar.segs i.m1{background:var(--sage)}.bar.segs i.m2{background:var(--green)}

/* study card */
.card{background:var(--paper);border-radius:20px;box-shadow:var(--shadow);border:1px solid var(--line);padding:28px 26px;margin-bottom:14px;text-align:center;position:relative}
.tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-bottom:8px}
.tag .src{padding:2px 7px;border-radius:999px;background:var(--cream);margin-left:6px}
.tag .src.notes{background:#fff3c8}
.prompt{font:500 1.55rem/1.35 var(--serif);margin:6px auto 4px;max-width:640px}
.prompt.long{font-size:1.15rem}
.qimg{max-height:110px;max-width:170px;margin:0 auto 10px;display:block}
.sw{display:inline-block;width:30px;height:30px;border-radius:8px;border:1px solid rgba(0,0,0,.2);vertical-align:middle;margin-right:8px}
.askline{font-size:.82rem;color:var(--muted);margin-top:10px}

/* flashcard */
.flash{perspective:1200px;height:320px;cursor:pointer;margin-bottom:14px}
.flash .in{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.flash.flip .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;font:500 1.45rem/1.35 var(--serif);overflow:auto}
.face.back{transform:rotateY(180deg);background:#f4f8f5;font-size:1.25rem}

/* multiple choice / written */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{display:block;width:100%;text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;font-size:.98rem}
.opt:hover{border-color:var(--green)}
.opt .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--cream);font-size:.75rem;font-weight:700;margin-right:8px;color:var(--muted)}
.opt.ok{border-color:var(--good);background:var(--good-bg)}
.opt.no{border-color:var(--bad);background:var(--bad-bg)}
label.opt{display:flex;align-items:center;gap:8px}
input[type=text],textarea,select,input[type=number]{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:12px;font:1rem var(--sans);background:var(--paper);color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--green)}
textarea{min-height:90px;resize:vertical}
.fb{margin-top:12px;padding:12px 14px;border-radius:12px;text-align:left}
.fb.ok{background:var(--good-bg)}.fb.no{background:var(--bad-bg)}
.fb b.v{display:block;margin-bottom:2px}
.fb.ok b.v{color:var(--good)}.fb.no b.v{color:var(--bad)}

/* voice */
.mic-zone{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 2px}
.mic{--lv:0;position:relative;width:88px;height:88px;border-radius:50%;border:0;cursor:pointer;background:var(--green);color:#fff;display:grid;place-items:center;transition:background .2s}
.mic svg{width:34px;height:34px;position:relative;z-index:1}
.mic::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--sage);transform:scale(calc(1 + var(--lv)*.35));transition:transform .08s;opacity:.9}
.mic.waiting{background:var(--green)}
.mic.waiting::before{border-color:var(--gold);animation:ring 1.4s infinite}
.mic.recording{background:var(--bad)}
.mic.recording::before{border-color:#f5a39c;animation:none}
.mic.busy{background:var(--muted)}
.mic.busy::before{border-color:var(--tan);border-top-color:var(--green);animation:spin .8s linear infinite}
.mic.idle::before,.mic.off::before{border-color:transparent}
.micstat{font-weight:600;font-size:.95rem;min-height:1.4em}
.michint{font-size:.78rem;color:var(--muted)}
.said{font-family:var(--serif);font-size:1.05rem;font-style:italic;margin:2px 0 6px}
.said::before{content:"\201C"}.said::after{content:"\201D"}
.echo{background:#fff8dc;border:1.5px dashed #e6c14c;border-radius:12px;padding:10px 12px;margin-top:10px;text-align:center;font-weight:600}
mark{background:none;color:inherit;border-radius:4px;padding:0 2px}
mark.hit{background:#cfe9d7;color:#0f4d27}
mark.miss{background:#f8d3cf;color:#8d1d16}
.banner{border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:.9rem;background:#fff3c8;border:1px solid #f0d77a}
.banner.bad{background:var(--bad-bg);border-color:#efb8b2}
.banner code{background:rgba(0,0,0,.06);padding:1px 6px;border-radius:5px}
.typebox{display:flex;gap:8px;margin-top:10px;width:100%;max-width:520px}
.countdown{height:3px;background:var(--green);border-radius:2px;margin-top:10px;animation:shrink var(--d,1.2s) linear forwards}

/* test */
.q{border-bottom:1px solid var(--line);padding:16px 0}
.q:last-child{border:0}
.q .prompt{font-size:1.15rem;text-align:left;margin:4px 0 10px}
.qnum{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.match p{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:10px;align-items:center;margin:6px 0}
.score{font:600 3rem var(--serif);color:var(--green);line-height:1}
.review{display:grid;gap:10px}
.rv-item{border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:left}
.rv-item.ok{border-left:5px solid var(--good)}.rv-item.no{border-left:5px solid var(--bad)}
.rv-item .said{font-size:.98rem}
.badge{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px}
.badge.ok{background:var(--good-bg);color:var(--good)}.badge.no{background:var(--bad-bg);color:var(--bad)}
.setup{display:grid;gap:14px}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;flex-wrap:wrap}
.seg button{border:0;background:var(--paper);padding:8px 14px;cursor:pointer;font-weight:600;font-size:.88rem}
.seg button.on{background:var(--green);color:#fff}
.toggle{display:flex;align-items:center;gap:8px;font-size:.92rem;cursor:pointer}
.toggle input{width:18px;height:18px;accent-color:var(--green)}

table.ref{width:100%;border-collapse:collapse;font-size:.93rem}
table.ref td,table.ref th{border-bottom:1px solid var(--line);padding:9px 8px;text-align:left;vertical-align:top}
table.ref th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
table.ref td:first-child{font-weight:600;width:36%}

@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.3}}
@keyframes shrink{from{width:100%}to{width:0}}

}

/* greek letters, hints, previews */
.glyph{display:block;font:500 3.6rem/1.1 "Times New Roman",Georgia,serif;letter-spacing:.08em}
.glyph-sm{font:500 1.35rem "Times New Roman",Georgia,serif;letter-spacing:.06em;margin-right:8px}
.hint{font:600 1.1rem ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.12em;color:var(--green);min-height:0;margin-top:6px;word-break:break-word}
.hint:empty{display:none}
.fb.new{background:#eef4fb;font-family:var(--serif);font-size:1.15rem}
.fb.new b.v{color:#2a5a8a;font-family:var(--sans);font-size:.9rem}
.tfdef{font-size:1.15rem;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
select.ok{border-color:var(--good);background:var(--good-bg)}
select.no{border-color:var(--bad);background:var(--bad-bg)}
.greek{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.greek div{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;align-items:center}

/* alphabet drill */
.abc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px;text-align:left}
.abc-grid div{border:1.5px solid var(--line);border-radius:10px;padding:6px 8px;min-height:42px;display:flex;align-items:center;font-size:.88rem;white-space:nowrap;overflow:hidden}
.abc-grid .glyph-sm{white-space:nowrap;margin-right:6px;font-size:1.15rem}
.abc-grid .done{background:var(--good-bg);border-color:#9fd0ae}
.abc-grid .done.err{background:#fff3c8;border-color:#e6c14c}
.abc-grid .cur{border:2px dashed var(--green);font-weight:700;color:var(--green);justify-content:center}
.abc-grid .todo{color:var(--tan);justify-content:center;font-size:.75rem}
.abc-cue{margin-top:14px}
.abc-in{display:block;max-width:320px;margin:16px auto 6px;text-align:center;font-size:1.5rem !important;letter-spacing:.04em}
.abc-in.shake{animation:shake .3s;border-color:var(--bad)}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.banner.muted-banner{background:var(--cream);border-color:var(--line);color:var(--muted)}
.banner .btn.ghost{padding:4px 8px;font-size:.85rem}

/* Type / Say it switch at the top of Learn and Test */
.via{display:flex;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:4px;gap:4px;margin-bottom:14px;max-width:360px}
.via button{flex:1;border:0;background:none;border-radius:10px;padding:9px 10px;font-weight:700;font-size:.92rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted)}
.via button svg{width:18px;height:18px}
.via button.on{background:var(--green);color:#fff}

/* flashcard swipe feedback */
.flash{touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:transform .2s}
.flash[data-swipe=know] .face{box-shadow:0 0 0 3px var(--good)}
.flash[data-swipe=learning] .face{box-shadow:0 0 0 3px #e6c14c}

/* drill: input on top, grid below */
.abc-card .abc-cue{margin:0 0 4px}
.abc-card .abc-in{margin:0 auto 6px}
.abc-card .micstat{margin-bottom:12px}
.top .btn.ghost{padding:4px 8px;font-size:.85rem}

/* phone tab bar (hidden on wide screens) */
.tabbar{display:none}
.touch kbd{display:none}

@media (max-width:720px){
  /* header: one slim row; sections move to the bottom tab bar */
  .hwrap{padding:8px 16px;gap:10px;flex-wrap:nowrap}
  nav#nav{display:none}
  .brand .mark{width:34px;height:34px}
  .brand b{font-size:1.05rem}
  .brand small{display:none}
  .vpill{margin-left:auto;font-size:.72rem;padding:4px 9px}

  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--paper);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(24,89,50,.08)}
  .tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;padding:4px 0;font-size:.68rem;font-weight:700;color:var(--muted);cursor:pointer;min-width:0}
  .tabbar button svg{width:22px;height:22px}
  .tabbar button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tabbar button.on{color:var(--green)}
  .tabbar button.on svg{background:var(--good-bg);border-radius:10px;padding:3px 10px;width:44px;height:28px;box-sizing:border-box}
  main{padding:14px 12px calc(96px + env(safe-area-inset-bottom))}

  /* home */
  .hero{padding:18px 18px;margin-bottom:12px}
  .hero h2{font-size:1.45rem}
  .hero p{font-size:.92rem;margin:0}
  .modes{grid-template-columns:1fr 1fr;gap:10px}
  .mode{padding:12px}
  .mode .ic{width:32px;height:32px;margin-bottom:6px}
  .mode b{font-size:1rem}
  .mode span{font-size:.78rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .mode em{display:none}
  .stats{grid-template-columns:repeat(3,1fr);gap:6px}
  .stat{padding:10px 8px}
  .stat b{font-size:1.25rem}
  .stat span{font-size:.72rem;line-height:1.25;display:block}

  /* panels and cards */
  .panel{padding:16px}
  .card{padding:20px 16px;border-radius:18px}
  h2{font-size:1.35rem}
  .prompt{font-size:1.3rem}
  .prompt.long{font-size:1.02rem}
  .glyph{font-size:3rem}
  .flash{height:min(56vh,360px)}
  .face{font-size:1.3rem;padding:18px}

  /* touch-sized controls */
  .btn{min-height:46px;padding:10px 16px;justify-content:center}
  .btn.ghost{min-height:40px}
  .opt{min-height:52px;padding:12px}
  .opts{grid-template-columns:1fr;gap:8px}
  .chip{padding:8px 14px}
  .seg{display:flex;width:100%}
  .seg button{flex:1 1 0;padding:10px 6px;font-size:.82rem;min-width:0}
  .toggle{font-size:.95rem;padding:4px 0}
  .card .row.toggles,.card .row:has(> .toggle){flex-direction:column;align-items:flex-start;gap:6px}
  .typebox{max-width:none}
  input[type=text],textarea,select,input[type=number]{font-size:16px}

  /* action rows: big, even buttons */
  .acts,.fb + .row,#fb > .row,.panel > .row,.card .row:has(> .btn){gap:8px}
  .acts .btn,#fb > .row > .btn,.panel > .row > .btn:not(.ghost){flex:1 1 140px}
  .acts .spacer{display:none}
  .mic{width:96px;height:96px}
  .michint{text-align:center;padding:0 8px}

  /* tests and results */
  .score{font-size:2.4rem}
  .match p{grid-template-columns:1fr}
  .rv-item .row{gap:6px}
  table.ref td:first-child{width:40%}
  .top{font-size:.8rem;gap:8px}

  /* alphabet drill: compact grid of 4 */
  .abc-intro p{font-size:.85rem}
  .abc-intro.started{display:none}
  .abc-grid{grid-template-columns:repeat(4,1fr);gap:4px}
  .abc-grid div{flex-direction:column;justify-content:center;min-height:44px;padding:4px 2px;font-size:.66rem;text-align:center}
  .abc-grid .glyph-sm{margin:0;font-size:1rem}
  .abc-in{font-size:1.3rem !important;max-width:none}
  .greek{grid-template-columns:repeat(3,1fr)}
}

/* folded options on setup screens */
details.more{border-top:1px solid var(--line);margin-top:14px;padding-top:10px;text-align:left}
details.more summary{cursor:pointer;font-weight:700;font-size:.9rem;color:var(--muted);list-style:none;display:flex;align-items:center;gap:6px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"";border:5px solid transparent;border-left-color:var(--muted);transition:transform .15s}
details.more[open] summary::before{transform:rotate(90deg) translateX(2px)}
.more-body{display:grid;gap:14px;padding-top:12px}
.toggles{display:flex;flex-wrap:wrap;gap:8px 18px}
.start-row{justify-content:center;margin:14px 0 4px}
.setup .start-row{justify-content:flex-start}
@media (max-width:720px){
  .start-row .btn{flex:1}
  .toggles{flex-direction:column;gap:6px}
  .seg.grid2{display:grid;grid-template-columns:1fr 1fr}
}

/* song */
.song-head{display:grid;gap:12px}
.song-head .seg{justify-self:start}
.sp iframe{display:block;border-radius:12px}
.song-head .micstat:empty{display:none}
.song-ctl{position:sticky;top:var(--hh,62px);z-index:4;background:var(--cream);padding:10px 0;margin:-6px 0 6px;display:grid;gap:8px}
.song-ctl .row{flex-wrap:nowrap}
.song-ctl .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.song-ctl .chips::-webkit-scrollbar{display:none}
.song-ctl .chip{white-space:nowrap;flex:none}
.chip.done::after{content:" \2713";color:var(--good)}
.chip.on.done::after{color:var(--gold)}
.playbtn{width:48px;height:48px;border-radius:50%;background:var(--green);color:#fff;border:0;display:grid;place-items:center;cursor:pointer;flex:none;box-shadow:var(--shadow)}
.playbtn:hover{background:var(--green-d)}
.playbtn svg{width:22px;height:22px}
.stime{font-variant-numeric:tabular-nums;font-size:.88rem;color:var(--muted);white-space:nowrap}
.seg.words button{padding:7px 12px}
.song-note{background:var(--gold);border-color:var(--gold)}
.lyr-top{margin-bottom:4px}
.lyrics h4{font:700 .72rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 4px 10px}
.lyrics h4 .badge{letter-spacing:0;text-transform:none;margin-left:6px}
.ln{font:500 1.35rem/1.45 var(--serif);padding:6px 10px 9px;border-radius:10px;cursor:pointer;position:relative;opacity:.7;transition:opacity .2s,background .2s}
.ln:hover{background:var(--cream)}
.ln.past{opacity:.45}
.ln.on{opacity:1;background:var(--good-bg);color:var(--green-d)}
.ln.on::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--green) calc(var(--p,0) * 100%),var(--sage) 0)}
.lyrics.unsynced .ln{opacity:1}
.ln .note{color:var(--muted)}
.lyrics:is(.m-hint,.m-hide) .ln:not(.past):not(.peek) .w{border-bottom:2px solid var(--tan)}
.lyrics.m-hint .ln:not(.past):not(.peek) .w .r,.lyrics.m-hide .ln:not(.past):not(.peek) .w{color:transparent}
.lyr-acts{margin-top:16px}
.sync-card{display:grid;gap:6px}
.sync-prev{color:var(--muted);font:500 1rem var(--serif);min-height:1.5em}
.sync-prev span{font:600 .75rem var(--sans);color:var(--green)}
.sync-now{font:600 1.7rem/1.3 var(--serif);color:var(--green-d);min-height:2.6em;display:grid;place-items:center}
.sync-next{color:var(--muted);font:500 1.05rem var(--serif);min-height:1.5em}
.sync-tap{justify-self:center;min-width:min(100%,320px);min-height:64px;justify-content:center;font-size:1.05rem}
.sync-tap svg{width:18px;height:18px}
.song-text{width:100%;font:15px/1.5 ui-monospace,Menlo,monospace;border:1.5px solid var(--line);border-radius:12px;padding:12px;margin:6px 0 12px;background:var(--cream);color:var(--ink);resize:vertical}
@media (max-width:720px){
  .song-head .seg{justify-self:stretch}
  .ln{font-size:1.18rem}
  .seg.words{display:inline-flex;width:auto}
  .seg.words button{flex:none;padding:8px 9px}
  .sync-now{font-size:1.4rem}
  .sync-tap{width:100%}
  .lyr-acts .btn{flex:1 1 140px}
}
.skip{margin:14px 10px 0;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.skip::before,.skip::after{content:"";flex:1;border-top:1.5px dashed var(--line)}
.scrub{width:100%;accent-color:var(--green);margin:0;height:28px}