/* Songbird Reader — calm by design: soft colours, big type, no flashing, no timers. */
:root{
  --paper:#FBF8F2;
  --card:#FFFFFF;
  --ink:#1E2A2F;
  --ink-2:#4F5D63;
  --ink-3:#8A969B;
  --rule:#ECE6DA;
  --accent:#2F6E8F;        /* calm blue for actions */
  --accent-ink:#FFFFFF;
  --accent-soft:#E4EFF5;
  --glow:#FFE49A;          /* the lit-up word */
  --glow-line:#E2A92B;
  --good:#2E7D5B;
  --good-soft:#E1F2E9;
  --sun:#F6C453;
  --sky:#7FB2D6;
  --radius:18px;
  --font:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.5;
  -webkit-font-smoothing:antialiased;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
button{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:12px}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important} }
.pad{padding:24px}
.hidden{display:none !important}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;max-width:980px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:1.15rem;font-weight:500}
.brand b{font-weight:600;color:var(--accent)}
.bird{color:var(--accent)}
.iconbtn{width:52px;height:52px;border-radius:50%;border:1px solid var(--rule);background:var(--card);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.iconbtn svg{width:24px;height:24px}
.iconbtn[aria-pressed="false"]{color:var(--ink-3)}

main{max-width:980px;margin:0 auto;padding:8px 20px 48px;outline:none}

/* home */
.hello h1{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:600;margin:12px 0 4px;letter-spacing:-.01em}
.hello p{color:var(--ink-2);margin:0 0 24px}
.songs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.songcard{display:flex;flex-direction:column;gap:12px;text-align:start;background:var(--card);border:1px solid var(--rule);border-radius:24px;
  padding:22px;cursor:pointer;text-decoration:none;color:var(--ink);transition:transform .2s,border-color .2s}
.songcard:hover{transform:translateY(-2px);border-color:var(--accent)}
.art{height:120px;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.songcard h2{font-size:1.4rem;font-weight:600;margin:0}
.songcard .go{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--accent)}
.grownups{margin-top:36px;padding-top:20px;border-top:1px solid var(--rule);font-size:.9rem;color:var(--ink-3)}

/* player */
.bar{display:flex;align-items:center;gap:12px;margin:4px 0 18px}
.back{display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 16px;border-radius:24px;border:1px solid var(--rule);background:var(--card);
  text-decoration:none;color:var(--ink);font-weight:500}
.bar h1{font-size:1.3rem;font-weight:600;margin:0}
.stage{background:var(--card);border:1px solid var(--rule);border-radius:28px;padding:clamp(24px,5vw,48px) clamp(18px,4vw,40px);min-height:300px;
  display:flex;flex-direction:column;justify-content:center;gap:18px}
.line{font-size:clamp(1.9rem,6.4vw,3.4rem);font-weight:500;line-height:1.35;margin:0;letter-spacing:.005em;word-spacing:.12em}
.line.next{font-size:clamp(1.2rem,3.6vw,1.8rem);color:var(--ink-3);font-weight:400}
.w{display:inline-block;padding:0 .14em;border-radius:.3em;color:var(--ink-3);transition:background .15s,color .15s,box-shadow .15s}
.w.done{color:var(--ink)}
.w.now{color:var(--ink);background:var(--glow);box-shadow:inset 0 -.12em 0 var(--glow-line)}
.line.next .w{color:var(--ink-3)}
.note{font-size:.88rem;color:var(--ink-3);margin:12px 4px 0}

.controls{display:flex;align-items:center;justify-content:center;gap:14px;margin:24px 0 8px;flex-wrap:wrap}
.play{width:88px;height:88px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 8px 24px rgba(47,110,143,.25)}
.play svg{width:36px;height:36px}
.ctrl{min-width:64px;height:64px;padding:0 18px;border-radius:32px;border:1px solid var(--rule);background:var(--card);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-weight:500}
.ctrl svg{width:24px;height:24px}
.ctrl[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.after{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
.big{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:0 28px;border-radius:32px;border:0;
  background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:1.1rem;cursor:pointer;text-decoration:none}
.big.soft{background:var(--card);color:var(--ink);border:1px solid var(--rule)}

/* word game */
.ask{text-align:center}
.ask p{color:var(--ink-2);margin:0 0 6px;font-size:1.1rem}
.ask .target{display:inline-flex;align-items:center;gap:12px}
.ask h2{font-size:clamp(2rem,7vw,3.2rem);margin:0;font-weight:600}
.choices{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:26px}
.choice{min-height:96px;border-radius:24px;border:2px solid var(--rule);background:var(--card);font-size:clamp(1.8rem,6vw,2.6rem);font-weight:500;cursor:pointer;
  transition:border-color .2s,background .2s,opacity .3s}
.choice:hover{border-color:var(--accent)}
.choice.right{border-color:var(--good);background:var(--good-soft);color:var(--good)}
.choice.tried{opacity:.35}
.feedback{text-align:center;min-height:1.6em;margin:18px 0 0;font-size:1.15rem;color:var(--ink-2)}
.dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--rule)}
.dots i.on{background:var(--good)}
.finish{text-align:center}
.finish h2{font-size:clamp(1.8rem,6vw,2.6rem);margin:8px 0}

@media (max-width:520px){
  main{padding:4px 14px 40px}
  .top{padding:12px 14px}
  .stage{border-radius:22px;min-height:260px}
  .play{width:80px;height:80px}
}

/* ===== header buttons ===== */
.topbtns{display:flex;gap:10px;align-items:center}
.nestbtn{display:inline-flex;align-items:center;gap:6px;height:52px;padding:0 16px;border-radius:26px;border:1px solid var(--rule);background:var(--card);
  text-decoration:none;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.star{fill:#E7E1D4}
.star.on{fill:#F2B632}

/* ===== grades and levels ===== */
.grades{position:relative;display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px 6px;scrollbar-width:none}
.grades::-webkit-scrollbar{display:none}
.gchip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:84px;height:72px;padding:0 12px;border-radius:18px;
  border:1px solid var(--rule);background:var(--card);text-decoration:none;color:var(--ink-2)}
.gchip b{font-size:1.35rem;font-weight:600;line-height:1.1;color:var(--ink)}
.gchip span{font-size:.72rem}
.gchip.on{background:var(--ink);border-color:var(--ink);color:#D9DEE0}
.gchip.on b{color:#fff}
.gskill{color:var(--ink-2);margin:6px 2px 18px;font-size:.95rem}
.gskill b{color:var(--ink);font-weight:600}
.art{height:130px;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.art.lv-easy{background:linear-gradient(160deg,#EAF6EF,#D3ECDD)}
.art.lv-medium{background:linear-gradient(160deg,#FFF5DC,#FCE6AE)}
.art.lv-hard{background:linear-gradient(160deg,#F1EBFA,#DDD0F2)}
.cardtop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.level{display:inline-flex;align-items:center;gap:4px;font-size:.82rem;font-weight:600;padding:4px 10px;border-radius:8px}
.level i{width:7px;height:7px;border-radius:50%;background:currentColor}
.level i:last-of-type{margin-right:4px}
.level.lv-easy{background:#E1F2E9;color:#2E7D5B}
.level.lv-medium{background:#FFF0CC;color:#9A6A08}
.level.lv-hard{background:#ECE4F8;color:#6A4FA3}
.stars{display:inline-flex;gap:2px;vertical-align:middle}
.titlewrap{display:flex;flex-direction:column;min-width:0}
.titlewrap h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{font-size:.82rem;color:var(--ink-3)}
.after .row,.reward .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.after{flex-direction:column;align-items:center}
.singscore{text-align:center;color:var(--ink-2);max-width:46ch;margin:0 auto 4px}
.choices.c4{grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){ .choices.c4{grid-template-columns:repeat(4,1fr)} }

/* ===== Sing with me ===== */
.ctrl span{font-size:.95rem}
.pitch{margin:16px auto 0;max-width:520px;text-align:center}
.ptrack{position:relative;height:14px;border-radius:7px;background:#EFEAE0}
.pband{position:absolute;left:38.5%;width:23%;top:0;bottom:0;border-radius:7px;background:#D6EEE1}
.pdot{position:absolute;top:50%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--paper);transition:left .15s linear,background .2s}
.pitch[data-state="match"] .pdot{background:var(--good)}
.pitch[data-state="rest"] .pdot,.pitch[data-state="quiet"] .pdot{background:var(--ink-3)}
.ptext{margin:10px 0 0;font-size:1.05rem;color:var(--ink-2);min-height:1.5em}

/* ===== reward ===== */
.reward{text-align:center;padding:24px 0}
.reward h2{font-size:clamp(1.7rem,6vw,2.5rem);font-weight:600;margin:6px 0 10px}
.reward .sub{color:var(--ink-2);margin:12px auto 26px;max-width:40ch}
.hatch{position:relative;width:170px;height:170px;margin:0 auto}
.hatch svg{position:absolute;left:10px;top:10px}
.earned .star{margin:0 3px}
@media (prefers-reduced-motion: no-preference){
  .hatch.first .eggart{animation:wobble 1.4s ease-in-out both, eggout .4s ease-in 1.4s forwards}
  .hatch.first .newbird{animation:birdin .6s cubic-bezier(.2,.9,.3,1.3) 1.5s both}
  .hatch:not(.first) .newbird{animation:birdin .5s cubic-bezier(.2,.9,.3,1.3) both}
  .earned .star.on{animation:starpop .45s cubic-bezier(.2,.9,.3,1.4) both}
  .earned .star.on:nth-child(1){animation-delay:1.9s}
  .earned .star.on:nth-child(2){animation-delay:2.15s}
  .earned .star.on:nth-child(3){animation-delay:2.4s}
  .hatch:not(.first) ~ .earned .star.on{animation-delay:.3s}
}
@keyframes wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(4deg)}}
@keyframes eggout{to{opacity:0;transform:scale(1.15)}}
@keyframes birdin{from{opacity:0;transform:translateY(16px) scale(.6)}to{opacity:1;transform:none}}
@keyframes starpop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.eggart,.birdart{transform-origin:50% 80%}

/* ===== nest ===== */
.nesttotals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.nesttotals div{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:16px 18px}
.nesttotals b{font-size:1.6rem;font-weight:600}
.nesttotals span{color:var(--ink-3);font-size:.9rem}
.nesth{font-size:1.1rem;font-weight:600;margin:26px 2px 10px;color:var(--ink-2)}
.nest{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.perch{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:var(--card);border:1px solid var(--rule);border-radius:20px;
  padding:16px 10px;text-decoration:none;color:var(--ink)}
.perch b{font-size:.92rem;font-weight:600;line-height:1.25}
.perch span{font-size:.78rem;color:var(--ink-3)}
.perch.waiting{background:transparent;border-style:dashed}
.perch.waiting .eggart{opacity:.7}
@media (max-width:520px){
  .nest{grid-template-columns:repeat(2,1fr)}
  .gchip{min-width:72px;height:64px}
  .nestbtn{padding:0 12px}
  .iconbtn,.nestbtn{height:48px}
  .iconbtn{width:48px}
}

/* ===== level tabs (inside a grade) ===== */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 18px}
.lvtab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:16px;border:1px solid var(--rule);background:var(--card);
  text-decoration:none;color:var(--ink-2);font-weight:600}
.lvtab .ldots{display:flex;gap:3px;font-style:normal;height:8px;align-items:center}
.lvtab i{display:block;width:7px;height:7px;border-radius:50%;background:currentColor}
.lvtab span{font-size:1rem}
.lvtab small{font-size:.75rem;font-weight:500;color:var(--ink-3)}
.lvtab.lv-easy{color:#2E7D5B}.lvtab.lv-medium{color:#9A6A08}.lvtab.lv-hard{color:#6A4FA3}
.lvtab.on.lv-easy{background:#E1F2E9;border-color:#9FD3B8}
.lvtab.on.lv-medium{background:#FFF0CC;border-color:#EBCB7C}
.lvtab.on.lv-hard{background:#ECE4F8;border-color:#C4B2E6}
.songs{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.songcard .art{height:110px}
.songcard.done .go{color:var(--good)}

/* ===== tap any word to hear it ===== */
.stage .w{cursor:pointer;-webkit-tap-highlight-color:transparent}
.stage .w:hover{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.18em}
.w.heard{animation:heard .7s ease}
@keyframes heard{0%{box-shadow:0 0 0 0 rgba(47,110,143,.35)}40%{box-shadow:0 0 0 .18em rgba(47,110,143,.35)}100%{box-shadow:0 0 0 0 rgba(47,110,143,0)}}
.tapnote{margin-top:2px}

/* ===== install as an app ===== */
.grownups p{margin:0 0 14px}
.install{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--rule);
  border-radius:20px;padding:16px 18px;color:var(--ink-2)}
.install div{display:flex;flex-direction:column;gap:4px;flex:1 1 260px}
.install b{color:var(--ink);font-weight:600}
.install span{font-size:.9rem}
.install .big{min-height:52px;font-size:1rem}

/* the main area takes focus after each screen change (for screen readers); no visible frame */
#app:focus,#app:focus-visible{outline:none}

/* ===== pictures for every song ===== */
.scenebox{border-radius:20px;overflow:hidden;background:#EEF8FC;line-height:0}
.scenebox svg.scene{width:100%;height:100%;display:block}
.scenebox{aspect-ratio:16/9}
.scenebox.banner{width:100%;max-width:560px;margin:0 auto 14px;border:1px solid var(--rule)}
.scenebox.slim{width:100%;max-width:300px;margin:0 auto 14px;border:1px solid var(--rule)}
.songcard .art{position:relative;height:auto;aspect-ratio:16/9;padding:0;background:none}
.songcard .art .scenebox{position:absolute;inset:0;border-radius:16px}
.songcard .go .badge{margin-left:auto;display:inline-flex}
@media (max-width:520px){ .scenebox.slim{max-width:220px} }

/* ===== speed and voice settings ===== */
.settings{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin:16px 0 4px}
.speed{display:inline-flex;align-items:center;gap:4px;background:var(--card);border:1px solid var(--rule);border-radius:30px;padding:5px}
.sbtn{width:46px;height:46px;border-radius:50%;border:0;background:var(--accent-soft);color:var(--accent);font-size:1.6rem;font-weight:600;line-height:1;cursor:pointer}
.sbtn:disabled{opacity:.35;cursor:default}
.sval{display:flex;flex-direction:column;align-items:center;min-width:76px;line-height:1.1}
.sval small{font-size:.7rem;color:var(--ink-3)}
.sval b{font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums}
.styles{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--rule);background:var(--card);
  font-weight:500;font-size:.92rem;color:var(--ink-2);cursor:pointer}
.chip svg{width:16px;height:16px}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.musicchip[aria-pressed="false"]{text-decoration:line-through;color:var(--ink-3)}

/* ===== readers ===== */
.whobtn{display:inline-flex;align-items:center;gap:6px;height:52px;padding:0 14px 0 8px;border-radius:26px;border:1px solid var(--rule);background:var(--card);
  text-decoration:none;color:var(--ink);font-weight:600;max-width:180px}
.whobtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.readers{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin-bottom:22px}
.reader{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:22px;overflow:hidden}
.reader.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.reader .pick{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 12px 12px;border:0;background:none;cursor:pointer;text-align:center}
.reader .pick b{font-size:1.15rem;font-weight:600}
.reader .pick span{font-size:.82rem;color:var(--ink-3)}
.reader .remove{border:0;border-top:1px solid var(--rule);background:none;color:var(--ink-3);font-size:.8rem;padding:8px;cursor:pointer}
.reader.add{align-items:center;justify-content:center;gap:6px;min-height:150px;text-decoration:none;color:var(--accent);border-style:dashed;background:transparent}
.reader.add .plus{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:2rem;line-height:1}
.newreader{background:var(--card);border:1px solid var(--rule);border-radius:24px;padding:22px;margin-bottom:22px}
.newreader h2{margin:0 0 14px;font-weight:600}
.newreader label,.newreader .lbl{display:block;font-weight:500;margin:14px 0 8px}
.newreader input{font:inherit;font-size:1.2rem;width:100%;max-width:360px;padding:12px 14px;border:1px solid var(--rule);border-radius:14px;background:var(--paper)}
.newreader input:focus{outline:3px solid var(--accent-soft);border-color:var(--accent)}
.buddies{display:flex;flex-wrap:wrap;gap:8px}
.buddy{width:72px;height:72px;border-radius:20px;border:2px solid var(--rule);background:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center}
.buddy.on{border-color:var(--accent);background:var(--accent-soft)}
.gradepick{display:flex;flex-wrap:wrap;gap:8px}
.gp{min-width:52px;height:52px;border-radius:14px;border:1px solid var(--rule);background:var(--paper);font-weight:600;font-size:1.1rem;cursor:pointer}
.gp.on{background:var(--ink);border-color:var(--ink);color:#fff}
.newreader .row{margin-top:20px}
.row.left{justify-content:flex-start}
.grownups h2{font-size:1.05rem;font-weight:600;color:var(--ink-2);margin:0 0 6px}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ===== continue card ===== */
.continue{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--rule);border-radius:22px;padding:10px 16px 10px 10px;
  text-decoration:none;color:var(--ink);margin:0 0 20px;transition:border-color .2s}
.continue:hover{border-color:var(--accent)}
.continue .cart{flex:0 0 132px}
.continue .cart .scenebox{border-radius:14px}
.continue .ctext{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.continue small{font-size:.8rem;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.continue b{font-size:1.2rem;font-weight:600}
.continue span{font-size:.88rem;color:var(--ink-3)}
@media (max-width:520px){ .continue .cart{flex-basis:96px} .whobtn span{display:none} .whobtn{padding:0 8px} }

/* ===== app footer ===== */
.appfoot{max-width:980px;margin:0 auto;padding:18px 20px 36px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.85rem}
.appfoot a{color:var(--ink-3);text-decoration:none}
.appfoot a:hover{color:var(--accent)}
.brand span{white-space:nowrap}
.gradepick .gp{flex:1 1 0;min-width:40px}
@media (max-width:520px){
  .top{gap:8px}
  .brand{font-size:1rem;gap:7px}
  .topbtns{gap:6px}
  .iconbtn,.nestbtn,.whobtn{height:44px}
  .iconbtn{width:44px}
  .nestbtn{padding:0 10px}
}
@media (max-width:370px){ .brand span b{display:none} }

/* ===== picture-word cards ===== */
.piccard{display:flex;align-items:center;justify-content:center;width:150px;height:150px;border-radius:28px;background:linear-gradient(160deg,#EEF8FC,#FFF6DD);border:1px solid var(--rule)}
.feedback{display:flex;align-items:center;justify-content:center;gap:10px}
.fbpic{display:inline-flex;width:64px;height:64px;border-radius:16px;background:var(--paper);border:1px solid var(--rule);align-items:center;justify-content:center}

/* ===== read it myself ===== */
.readself{min-height:220px}
.readself .line{display:block}
.readself .w.done{color:var(--ink)}
.rsprog{height:8px;border-radius:4px;background:var(--rule);margin:14px 4px 0;overflow:hidden}
.rsprog span{display:block;height:100%;width:0;background:var(--leaf,#3FA37C);border-radius:4px;transition:width .3s}
.rshear span{font-size:.95rem}
.ctrl:disabled{opacity:.35;cursor:default}
.readdone{text-align:center;margin-bottom:16px}
.readdone h2{font-size:clamp(1.6rem,6vw,2.3rem);margin:6px 0}
.readdone p{color:var(--ink-2);margin:0}
.readbadge{display:inline-flex;margin-right:4px}
.chip svg{flex:0 0 auto}
.big svg{flex:0 0 auto}

/* ===== tricky words ===== */
.continue.tricky .cart.tw{display:flex;flex-wrap:wrap;gap:4px;align-content:center;justify-content:center;aspect-ratio:16/9;border-radius:14px;
  background:linear-gradient(160deg,#FFF3CF,#FDE7F0);padding:6px}
.continue.tricky .cart.tw span{font-size:.85rem;font-weight:600;background:#fff;border-radius:8px;padding:2px 8px}
.learnedtag{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:3px 10px;border-radius:12px;background:#E1F2E9;color:#2E7D5B;font-weight:600;font-size:.9rem}
.learnedlist{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0}
.learnedlist span{font-size:1.3rem;font-weight:600;padding:6px 14px;border-radius:14px;background:#E1F2E9;color:#2E7D5B}
.finish .sub,.reward .sub{color:var(--ink-2)}
.big.small{min-height:46px;padding:0 18px;font-size:.95rem}

/* ===== grown-ups ===== */
.gate{background:var(--card);border:1px solid var(--rule);border-radius:24px;padding:24px;max-width:420px;display:flex;flex-direction:column;gap:12px}
.gate p{margin:0;color:var(--ink-2)}
.gate label b{font-size:2rem}
.gate input{font:inherit;font-size:1.6rem;width:140px;padding:10px 14px;border:1px solid var(--rule);border-radius:14px;background:var(--paper)}
.gate .big{align-self:flex-start}
.greader{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--rule);border-radius:22px;padding:12px 16px;margin-bottom:14px}
.greader div{display:flex;flex-direction:column;flex:1}
.greader b{font-size:1.2rem}
.greader span{color:var(--ink-3);font-size:.9rem}
.gtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gtile{background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column}
.gtile b{font-size:1.8rem;font-weight:600;line-height:1.1}
.gtile span{color:var(--ink-3);font-size:.85rem}
@media (max-width:520px){ .gtiles{grid-template-columns:repeat(2,1fr)} }
.gh{font-size:1.2rem;font-weight:600;margin:28px 2px 8px}
.gwords{display:grid;gap:8px}
.gword{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:10px 14px}
.gword b{font-size:1.25rem;min-width:90px}
.gword span{color:var(--ink-3);font-size:.85rem;flex:1}
.known{border:1px solid var(--rule);background:var(--paper);border-radius:12px;padding:6px 12px;font-size:.85rem;cursor:pointer;color:var(--ink-2)}
.known:hover{border-color:var(--good)}
.ggrades{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.gg{background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:14px 16px}
.gg>b{display:block;margin-bottom:6px}
.gbar{display:grid;grid-template-columns:70px 1fr 44px;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-2);margin:4px 0}
.gbar i{display:block;height:10px;border-radius:5px;background:var(--rule);overflow:hidden}
.gbar em{display:block;height:100%;width:0;border-radius:5px}
.gbar em.lv-easy{background:#3FA37C}.gbar em.lv-medium{background:#E0A92A}.gbar em.lv-hard{background:#7A5CC0}
.gbar small{text-align:right;color:var(--ink-3)}
.gfav{margin:0;padding-left:1.4em}
.gfav li{margin:6px 0}
.gfav a{font-weight:600;text-decoration:none}
.gfav span{display:block;color:var(--ink-3);font-size:.85rem}
.glog{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.glog li{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:8px 14px}
.glog small{color:var(--ink-3);font-size:.78rem}
.glog .stars{vertical-align:-3px}
.gactions{margin-top:28px}
.big.soft.danger{color:#B23A3A}
@media print{
  .top,.appfoot,.gactions,.known,.gword+p,.back,.greader .big,.continue{display:none !important}
  body{background:#fff;font-size:12pt}
  main{padding:0}
  .gtile,.gg,.gword,.glog li,.greader{break-inside:avoid;border-color:#ccc}
}

/* ===== comfort settings (attributes on <html>, set per reader) ===== */
.line{font-size:calc(clamp(1.9rem,6.4vw,3.4rem) * var(--ls,1))}
.line.next{font-size:calc(clamp(1.2rem,3.6vw,1.8rem) * var(--ls,1))}
.choice{font-size:calc(clamp(1.8rem,6vw,2.6rem) * var(--ls,1))}
html[data-text="large"]{--ls:1.18}
html[data-text="large"] body{font-size:20px}
html[data-text="xl"]{--ls:1.36}
html[data-text="xl"] body{font-size:22px}
html[data-font="andika"] body,html[data-font="andika"] button,html[data-font="andika"] input{font-family:"Andika",var(--font)}
html[data-font="atkinson"] body,html[data-font="atkinson"] button,html[data-font="atkinson"] input{font-family:"Atkinson Hyperlegible",var(--font)}
html[data-space="wide"] .line,html[data-space="wide"] .choice,html[data-space="wide"] .ask h2,html[data-space="wide"] .gword b{letter-spacing:.07em;word-spacing:.32em;line-height:1.6}
html[data-space="wide"] .w{margin:0 .06em}
/* highlight colours */
html[data-hl="green"]{--glow:#C9EFD6;--glow-line:#3FA37C}
html[data-hl="blue"]{--glow:#CFE6F7;--glow-line:#2F6E8F}
html[data-hl="underline"] .w.now{background:transparent;box-shadow:inset 0 -.16em 0 var(--accent)}
/* colour themes */
html[data-theme="calm"]{--paper:#F3F7FA;--rule:#DFE8EE;--accent-soft:#E2EEF5}
html[data-theme="contrast"]{--paper:#FFFFFF;--card:#FFFFFF;--ink:#000000;--ink-2:#111111;--ink-3:#333333;--rule:#1E2A2F;--accent:#00457C;--accent-soft:#D6E6F5;--glow:#FFE600;--glow-line:#000000}
html[data-theme="contrast"] .w{color:#555}
html[data-theme="contrast"] .w.done,html[data-theme="contrast"] .w.now{color:#000}
html[data-theme="night"]{--paper:#14202B;--card:#1C2B38;--ink:#EEF3F6;--ink-2:#C5D2DB;--ink-3:#8FA2B0;--rule:#2B3D4C;--accent:#7CC0E8;--accent-ink:#0E1A24;--accent-soft:#1E3A4F;
  --glow:#FFD95E;--glow-line:#E2A92B;--good:#7CD5A8;--good-soft:#1D3B2E;color-scheme:dark}
html[data-theme="night"] .w.now{color:#1E2A2F}
html[data-theme="night"] .play,html[data-theme="night"] .big:not(.soft){color:#0E1A24}
html[data-theme="night"] .gchip.on,html[data-theme="night"] .chip[aria-pressed="true"],html[data-theme="night"] .gp.on{background:#EEF3F6;color:#14202B;border-color:#EEF3F6}
html[data-theme="night"] .gchip.on b{color:#14202B}
html[data-theme="night"] .eggart path:first-child{fill:#E9DFCF}
/* calmer screens */
html[data-motion="reduce"] *{animation:none !important;transition:none !important}
html[data-next="off"] .line.next{display:none !important}
html[data-pics="off"] .scenebox,html[data-pics="off"] .continue .cart:not(.tw){display:none !important}
.comfortpreview{min-height:0;margin-bottom:6px}
.comfort{display:grid;gap:14px;margin:16px 0 20px}
.comfort fieldset{border:1px solid var(--rule);border-radius:20px;background:var(--card);padding:12px 14px 14px;margin:0}
.comfort legend{font-weight:600;padding:0 6px}
.copts{display:flex;flex-wrap:wrap;gap:8px}
.copt{min-height:46px;padding:0 16px;border-radius:23px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:inherit;font-size:.95rem;cursor:pointer}
.copt.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.copt small{font-size:.75rem;opacity:.8}

/* ===== decorate your nest ===== */
.nestbox{border-radius:24px;overflow:hidden;border:1px solid var(--rule);margin:14px 0 6px;line-height:0}
.nestscene{width:100%;height:auto;display:block}
.decorate .lbl{font-weight:600;margin:16px 2px 8px}
.decorate .lbl small{font-weight:400;color:var(--ink-3)}
.copt.locked{opacity:.55;cursor:default}
.decor{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.dcard{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border-radius:16px;border:1px solid var(--rule);background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.dcard b{font-size:.95rem;font-weight:600}
.dcard span{font-size:.78rem;color:var(--ink-3);display:inline-flex;align-items:center;gap:3px}
.dcard.on{border-color:var(--good);background:var(--good-soft)}
.dcard.on span{color:var(--good)}
.dcard.locked{background:transparent;border-style:dashed;cursor:default}
.dcard.locked b{color:var(--ink-3)}
.branchbirds{display:flex;flex-wrap:wrap;gap:6px}
.bb{width:58px;height:58px;border-radius:16px;border:2px solid var(--rule);background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.bb.on{border-color:var(--accent);background:var(--accent-soft)}
.newdecor{display:inline-flex;align-items:center;gap:6px;margin:-10px auto 22px;padding:10px 16px;border-radius:16px;background:var(--good-soft);color:var(--good);text-decoration:none;font-weight:500}
/* the reader's highlight choice wins over the colour theme's own highlight */
html[data-hl="green"][data-theme]{--glow:#C9EFD6;--glow-line:#3FA37C}
html[data-hl="blue"][data-theme]{--glow:#CFE6F7;--glow-line:#2F6E8F}
html[data-hl="underline"][data-theme] .w.now{background:transparent;box-shadow:inset 0 -.16em 0 var(--accent);color:var(--ink)}
.newdecor{display:inline-block;max-width:100%;text-align:center;line-height:1.4}
.newdecor svg{vertical-align:-4px;margin-left:2px}

/* ===== teacher mode ===== */
.newreader textarea,.assignbox select{font:inherit;font-size:1.05rem;width:100%;max-width:420px;padding:12px 14px;border:1px solid var(--rule);border-radius:14px;background:var(--paper);color:var(--ink)}
.newreader textarea:focus,.assignbox select:focus{outline:3px solid var(--accent-soft);border-color:var(--accent)}
.newreader label small,.assignbox small{font-weight:400;color:var(--ink-3)}
.classes{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:18px 0 22px}
.classcard{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--rule);border-radius:22px;padding:18px}
.classcard b{font-size:1.2rem;font-weight:600}
.classcard span{color:var(--ink-3);font-size:.9rem}
.classcard .assigned{color:var(--accent)}
.classcard .row{margin-top:10px;gap:8px}
.assignbox{background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:16px 18px;margin:18px 0}
.assignbox label{display:block;margin-bottom:8px}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:18px;background:var(--card);margin-bottom:22px}
.classtable{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
.classtable th,.classtable td{padding:10px 12px;text-align:start;border-bottom:1px solid var(--rule);white-space:nowrap}
.classtable th{font-weight:600;color:var(--ink-2);font-size:.8rem;background:var(--paper)}
.classtable tr:last-child td{border-bottom:0}
.tname{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.classtable .yes{color:#2E7D4F;font-weight:600}
.classtable .notyet{color:var(--ink-3)}
.readers.big{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.readers.big .pick{padding:22px 12px 18px}
.continue.teacher{border-color:var(--sun);box-shadow:0 0 0 2px #FBE7B4}
.certlist{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.certlink{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:8px 14px;text-decoration:none;color:var(--accent);font-weight:500}
.certlink span{flex:1;display:flex;flex-direction:column;color:var(--ink)}
.certlink small{color:var(--ink-3);font-size:.8rem;font-weight:400}

/* ===== bird certificates ===== */
.certs{display:grid;gap:24px;margin-top:18px}
.cert{background:#FFFDF7;color:#1E2A2F;border-radius:18px;padding:14px;border:1px solid var(--rule);aspect-ratio:1.414/1;max-width:900px;width:100%;margin:0 auto;box-sizing:border-box}
.certin{position:relative;height:100%;box-sizing:border-box;border:3px double #C9A24B;border-radius:12px;padding:clamp(14px,3vw,32px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(2px,.6vw,8px)}
.certcorner{position:absolute;top:12px}
.certcorner.tl{left:14px}
.certcorner.tr{right:14px;transform:scaleX(-1)}
.certbrand{margin:0;letter-spacing:.18em;text-transform:uppercase;font-size:clamp(.62rem,1.4vw,.8rem);color:#2F6E8F;font-weight:600}
.certtitle{margin:0;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(1.3rem,4vw,2.4rem);color:#1E2A2F}
.certsmall{margin:0;font-size:clamp(.72rem,1.7vw,1rem);color:#4F5D63}
.certname{margin:0;font-family:"Fraunces",Georgia,serif;font-size:clamp(1.6rem,5.4vw,3.2rem);font-weight:600;color:#2F6E8F;border-bottom:2px solid #F6C453;padding:0 24px 2px}
.certbird{display:flex;flex-direction:column;align-items:center}
.certbird svg{width:clamp(70px,16vw,150px);height:auto}
.certbirdname{margin:0;font-weight:600;font-size:clamp(.9rem,2.2vw,1.25rem)}
.certstars svg{width:clamp(18px,3.4vw,34px);height:auto}
.certfoot{display:flex;justify-content:space-between;align-items:flex-end;width:100%;max-width:560px;margin-top:clamp(4px,1.4vw,14px);gap:24px}
.certfoot>div{display:flex;flex-direction:column;align-items:center;flex:1;font-size:clamp(.72rem,1.6vw,.95rem)}
.certfoot small{color:#8A969B;font-size:.78em;margin-top:2px}
.certfoot .line2{display:block;width:100%;border-bottom:1px solid #4F5D63;height:1.4em}
@media print{
  .noprint{display:none !important}
  .tablewrap{border-color:#ccc;overflow:visible}
  .classtable{min-width:0;font-size:10pt}
  .certs{display:block;margin:0}
  .cert{border:0;padding:0;border-radius:0;max-width:none;height:96vh;aspect-ratio:auto;page-break-after:always;break-after:page;background:#fff}
  .cert:last-child{page-break-after:auto;break-after:auto}
  .certin{border-width:4px}
}
@media (max-width:640px){
  .cert{aspect-ratio:auto}
  .certin{padding:44px 16px 20px}
  .certcorner svg{width:38px;height:auto}
}
@page{margin:12mm}

/* ===== lessons: steps, pitch line, the end, next step ===== */
.steps{list-style:none;margin:4px 0 2px;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;counter-reset:st}
.steps li{position:relative}
.steps li a,.steps li>span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 4px;border-radius:12px;text-decoration:none;color:var(--ink-3);font-size:.7rem;font-weight:500}
.steps .sic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--rule)}
.steps li.past .sic{background:var(--good-soft);border-color:#BFE3CD;color:var(--good)}
.steps li.past a,.steps li.past>span{color:var(--good)}
.steps li.now .sic{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 4px var(--accent-soft)}
.steps li.now>span{color:var(--ink);font-weight:600}
.steps li a:hover .sic{border-color:var(--accent)}
.stepname{text-align:center;margin:2px 0 12px;color:var(--ink-2);font-size:.95rem}
.donetag{display:inline-flex;align-items:center;gap:3px;color:var(--good);font-weight:600}
.lead{text-align:center;font-size:1.15rem;color:var(--ink-2);margin:6px auto 16px;max-width:36ch}

.melody{position:relative;height:84px;max-width:640px;margin:0 auto 10px;border-radius:16px;background:var(--card);border:1px solid var(--rule);
  background-image:linear-gradient(to top,transparent calc(25% - 1px),var(--rule) 25%,transparent calc(25% + 1px),transparent calc(50% - 1px),var(--rule) 50%,transparent calc(50% + 1px),transparent calc(75% - 1px),var(--rule) 75%,transparent calc(75% + 1px))}
.mnotes{position:absolute;inset:0 14px 0 44px}
.mn{position:absolute;height:10px;margin:0 3px;border-radius:5px;background:#CFDCE4;transform:translateY(50%);transition:background .15s,box-shadow .15s}
.mn.past{background:#E3E9ED}
.mn.now{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.mn.hit{background:var(--good)}
.mn.now.hit{box-shadow:0 0 0 4px var(--good-soft)}
.mlabel{position:absolute;left:10px;top:8px;font-size:.62rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.mlabel.low{top:auto;bottom:8px}
.mvoice{position:absolute;width:20px;height:20px;margin-left:44px;border-radius:50%;background:#E8704A;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);
  transform:translate(-50%,50%);transition:bottom .08s linear,left .15s ease}
.mvoice.hit{background:var(--good)}
.mvoice.rest{opacity:.3}

.stage.ended .line{display:none}
.theend{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;text-align:center}
.theend b{font-family:Georgia,"Fraunces",serif;font-size:clamp(2.6rem,9vw,4.4rem);font-weight:600;color:var(--accent);letter-spacing:.01em}
.theend span{font-size:1.2rem;color:var(--ink-2);margin-top:6px}
@media (prefers-reduced-motion: no-preference){ .theend b{animation:bmEnd .7s cubic-bezier(.2,.9,.3,1.3)} }
@keyframes bmEnd{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

.controls.dock{position:sticky;bottom:0;z-index:5;margin:14px 0 4px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--paper) 72%,transparent)}
.play.pulse,.big.pulse{animation:none}
@media (prefers-reduced-motion: no-preference){
  .play.pulse,.big.pulse{animation:bmPulse 1.8s ease-in-out infinite}
}
@keyframes bmPulse{0%,100%{box-shadow:0 0 0 0 rgba(47,110,143,.45)}50%{box-shadow:0 0 0 12px rgba(47,110,143,0)}}
.big.go{min-height:76px;padding:0 26px;font-size:1.25rem;background:var(--good);color:#fff;text-decoration:none}
.big.go .gotext{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:start}
.big.go .gotext small{font-size:.75rem;font-weight:500;opacity:.85;text-transform:uppercase;letter-spacing:.05em}
.big.go .count{font-style:normal;font-size:.85rem;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.25);display:inline-flex;align-items:center;justify-content:center}
.singscore{display:flex;align-items:center;justify-content:center;gap:10px;text-align:start}
.medal{flex:0 0 auto;vertical-align:middle}

.wordcards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin-bottom:8px}
.wordcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:14px 8px;border-radius:22px;
  border:2px solid var(--rule);background:var(--card);cursor:pointer;font:inherit;color:var(--ink)}
.wordcard b{font-size:calc(1.7rem * var(--ls,1));font-weight:600}
.wordcard.now,.wordcard:hover{border-color:var(--accent)}
.wordcard.now{background:var(--accent-soft)}
.wordcard.nopic{min-height:110px}

.lessondone{display:inline-flex;align-items:center;gap:8px;color:var(--good);font-weight:600;margin:0 auto 14px}
.certready{display:flex;align-items:center;gap:12px;max-width:420px;margin:0 auto 18px;padding:10px 16px;border-radius:18px;background:#FFF7E0;border:1px solid #F3DB9A;
  text-decoration:none;color:var(--ink);text-align:start}
.certready span{flex:1;display:flex;flex-direction:column}
.certready small{color:var(--ink-2)}
.reward .row{margin-bottom:12px}

/* home: up next, step dots, done marks, how it works for children */
.continue.upnext{border-width:2px;border-color:var(--accent);padding:12px 16px 12px 12px}
.continue .goplay{flex:0 0 auto;width:60px;height:60px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.continue .goplay svg{width:28px;height:28px}
.sdots{display:flex;gap:4px;margin-top:6px}
.sdots i{width:16px;height:6px;border-radius:3px;background:var(--rule)}
.sdots i.on{background:var(--good)}
.sdots i.now{background:var(--accent)}
.cstatus{position:absolute;left:8px;top:8px;z-index:1;display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;font-size:.78rem;font-weight:600;background:#fff;color:var(--accent)}
.cstatus.done{background:var(--good);color:#fff}
.songcard.done{border-color:#BFE3CD}
.songcard.going{border-color:var(--accent)}
.howkids{background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:4px 16px;margin:0 0 20px}
.howkids summary{display:flex;align-items:center;gap:10px;min-height:52px;cursor:pointer;font-weight:600;list-style:none}
.howkids summary::-webkit-details-marker{display:none}
.howsteps{list-style:none;padding:0;margin:6px 0 14px;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.howsteps li{display:flex;gap:10px;align-items:flex-start}
.howsteps .sic{flex:0 0 36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.howsteps li span:last-child{display:flex;flex-direction:column;font-size:.9rem;color:var(--ink-2)}
.howsteps b{color:var(--ink)}
.howrow{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin-bottom:14px}
.howrow>div{background:var(--paper);border-radius:16px;padding:12px}
.howrow p{margin:6px 0 0;font-size:.9rem;color:var(--ink-2)}

/* my songs */
.hlist{display:grid;gap:10px}
.hrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:10px 14px 10px 10px}
.hmain{flex:1 1 280px;display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);min-width:0}
.hart{flex:0 0 110px}
.hart .scenebox{border-radius:12px}
.htext{display:flex;flex-direction:column;gap:2px;min-width:0}
.htext b{font-size:1.1rem;font-weight:600}
.htext>span{color:var(--ink-3);font-size:.85rem}
.htext .hstep{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--ink-2)}
.hact{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:560px){
  .steps .sl{display:none}
  .steps .sic{width:32px;height:32px}
  .hart{flex-basis:84px}
  .continue .goplay{width:48px;height:48px}
  .big.go{font-size:1.1rem;padding:0 18px}
}
.big>svg:not([width]),.ctrl>svg:not([width]){width:24px;height:24px}
.big.small>svg:not([width]){width:20px;height:20px}