/* AudioForge Kids. Big targets, high contrast, no small print. The 7-9 band reads fluently — that band is
   first, so words are allowed — but nothing depends on reading a label to know what a thing does. */
:root{--ink:#17241f;--muted:#4b5f57;--paper:#f6f1e4;--card:#fffdf6;--line:#ded3bd;--go:#1b6f5a}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px}
.brand{font:700 20px/1 Georgia,serif}
.grown-ups{font:600 13px/1 system-ui,sans-serif;color:var(--muted);background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:9px 14px;cursor:pointer;touch-action:none}
.grown-ups.holding{background:#e7dfcb}
main{max-width:1100px;margin:0 auto;padding:6px 18px 60px}
.hello{margin:6px 0 16px;font:700 clamp(26px,5vw,38px)/1.1 Georgia,serif}

.bands{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.band{font:700 17px/1 system-ui,sans-serif;background:var(--card);border:2px solid var(--line);border-radius:999px;
  padding:14px 20px;cursor:pointer;color:var(--ink);min-height:52px}
.band.on{background:var(--go);border-color:var(--go);color:#fff}

.shelves{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.shelf{display:flex;flex-direction:column;gap:8px;text-align:left;background:var(--card);border:2px solid var(--line);
  border-top:6px solid var(--accent,#2f6f57);border-radius:16px;padding:12px;cursor:pointer;color:var(--ink);min-height:200px}
.shelf-art{display:block;aspect-ratio:1/1;border-radius:10px;background:#e9e1cd;overflow:hidden}
.shelf-art img{width:100%;height:100%;object-fit:cover;display:block}
.shelf-name{font:700 19px/1.2 Georgia,serif}
.shelf-sub{font-size:14px;color:var(--muted)}

.shelf-title{grid-column:1/-1;margin:4px 0;font:700 26px/1.2 Georgia,serif}
.back{grid-column:1/-1;justify-self:start;font:700 16px/1 system-ui,sans-serif;background:var(--card);
  border:2px solid var(--line);border-radius:999px;padding:14px 20px;cursor:pointer;color:var(--ink)}
.ep{grid-column:1/-1;display:flex;align-items:center;gap:14px;background:var(--card);border:2px solid var(--line);
  border-radius:14px;padding:16px;cursor:pointer;color:var(--ink);text-align:left;min-height:64px}
.ep-play{font-size:22px;color:var(--go)}
.ep.playing .ep-play{color:#b5452c}
.ep-name{flex:1;font:600 18px/1.3 system-ui,sans-serif}
.ep-len{font-size:15px;color:var(--muted)}
.empty{margin-top:22px;font-size:17px;color:var(--muted)}

.gate-scrim{position:fixed;inset:0;background:rgba(15,25,20,.6);display:flex;align-items:center;justify-content:center;padding:18px}
.gate-scrim[hidden]{display:none}
.gate{background:var(--card);border-radius:16px;max-width:460px;width:100%;padding:22px}
.gate h2{margin:0 0 10px;font:700 21px/1.2 Georgia,serif}
.gate-q{margin:0 0 12px;font-size:16.5px;line-height:1.5}
.gate-in{width:100%;font:16px system-ui,sans-serif;padding:13px 12px;border:2px solid var(--line);border-radius:10px}
.gate-no{margin:10px 0 0;color:#a33a2a;font-size:15px}
.gate-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn{font:700 15px/1 system-ui,sans-serif;background:var(--go);color:#fff;border:0;border-radius:999px;padding:13px 18px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--go);border:2px solid var(--go)}
@media (max-width:520px){ .shelves{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} }