/* JLS FREE TOOLS -- the class tools (flashcards, metronome): one big card the whole room can read, a full-screen button. */
.tool-stage{background:var(--night);color:#f3ebe0;border-radius:24px;padding:28px;min-height:min(62vh,560px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;position:relative;box-shadow:0 30px 80px -40px rgba(0,0,0,.6)}
.tool-stage.light{background:#fff;color:var(--ink);box-shadow:0 10px 40px -30px rgba(0,0,0,.35);border:1px solid var(--rule)}
.tool-stage canvas{max-width:100%;height:auto}
.tool-stage .big{font:400 clamp(44px,9vw,120px)/1 var(--serif);letter-spacing:-.02em;text-align:center}
.tool-stage .mid{font:600 clamp(22px,3.4vw,40px)/1.2 var(--sans);text-align:center;color:var(--gold)}
.tool-stage .dim{color:var(--night-soft);font-size:16px;text-align:center}
.tool-stage.light .dim{color:var(--soft)}
.tool-stage.light .mid{color:var(--clay-text)}
.fs{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.1);color:inherit;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 14px;font:600 13px var(--sans);cursor:pointer}
.tool-stage.light .fs{background:var(--cream);border-color:var(--rule)}
.tool-stage:fullscreen{border-radius:0;min-height:100vh;padding:5vh 6vw}
.tool-stage:fullscreen .fs{display:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
.actions .btn{min-height:56px;padding:0 30px;font-size:17px}
.keys{margin:10px 0 0;text-align:center;color:var(--soft);font-size:14px}
.keys kbd{display:inline-block;background:#fff;border:1px solid var(--rule);border-bottom-width:3px;border-radius:8px;padding:2px 9px;font:600 13px var(--sans);color:var(--ink)}
.beat-ring{width:min(46vh,380px);height:min(46vh,380px);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#2b2019,#1a130f 70%);box-shadow:inset 0 0 0 10px rgba(255,255,255,.08);transition:box-shadow .08s,transform .08s}
.beat-ring.hit{box-shadow:inset 0 0 0 10px var(--gold),0 0 60px rgba(242,196,109,.35);transform:scale(1.03)}
.beat-ring.strong{box-shadow:inset 0 0 0 14px var(--clay),0 0 80px rgba(196,80,47,.45);transform:scale(1.06)}
.beat-ring .big{font-size:clamp(90px,24vh,220px)}
.dots{display:flex;gap:14px}
.dots i{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.18)}
.dots i.on{background:var(--gold)}.dots i.strong.on{background:var(--clay)}
input[type=range]{width:min(420px,100%);accent-color:var(--clay)}
.row{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:center}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--rule);background:#fff;border-radius:999px;padding:8px 14px;font:600 14px var(--sans);cursor:pointer;color:var(--ink)}
.chip[aria-pressed=true]{background:var(--clay);border-color:var(--clay);color:#fff}
@media (max-width:760px){.tool-stage{padding:18px;min-height:52vh}.beat-ring{width:min(70vw,320px);height:min(70vw,320px)}}