/* The groove lab — one stylesheet for every room that mounts it.
 * Sep 13, 2026: moved verbatim out of portal-practice.html, in the same
 * cascade order it had there, so the lessons room can carry the identical
 * metronome. Two phone @media blocks also carry a few dead selectors from
 * the legacy practice-room layout (.pr-body, .global-controls, .gc-row-*);
 * they were moved whole rather than surgically, to keep the cascade exact.
 */

/* portal-practice.html 100–117 */
.metrow{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.metrow .disp{text-align:center;min-width:120px}
.metrow .disp .v{font-family:'Playfair Display',Georgia,serif;font-size:3.4rem;color:var(--brand);line-height:1}
.metrow .disp .u{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.metrow .mctrl{flex:1;min-width:340px}
.metrow input[type=range]{width:100%;accent-color:var(--brand)}
.mrow{display:flex;gap:.4rem;margin-top:.55rem;flex-wrap:wrap;align-items:center}
.fl{display:inline-flex;align-items:center;gap:.4rem;font-size:.71rem;color:var(--muted)}
.fl select{font:inherit;font-size:.75rem;padding:.32rem .45rem;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink)}
.fl input[type=range]{width:92px}
.beats{display:flex;gap:.4rem}
.beats i{width:11px;height:11px;border-radius:50%;background:#E6E1EF;display:block}
.beats i.on{background:var(--gold);transform:scale(1.25)}
.beats i.acc{background:var(--brand)}
.stepper{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--muted)}
.stepper b{min-width:22px;text-align:center;color:var(--ink);font-size:.85rem}
.gridN{display:grid;gap:4px;margin:.7rem 0}
.stepwrap{display:flex;flex-direction:column;gap:3px}

/* portal-practice.html 121–121 */
.cell.beat{outline:2px solid var(--gold);outline-offset:1px}

/* portal-practice.html 367–379 */
    .gc-rhythm-info {
      display: flex; align-items: baseline; gap: 0.6rem; flex: 1; min-width: 0;
    }

    .gc-rhythm-name {
      font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 600;
      color: var(--purple-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      margin: 0;
    }

    .gc-rhythm-meta {
      font-size: 0.7rem; color: #aaa; letter-spacing: 0.06em; white-space: nowrap;
    }

/* portal-practice.html 386–386 */
    .gc-row-3 .beat-grid { margin-bottom: 0; }

/* portal-practice.html 394–396 */
    .gc-row-4 .legend {
      margin-bottom: 0; border: none; background: none; padding: 0;
    }

/* portal-practice.html 400–513 */
    .bpm-display { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 600; color: var(--purple-deep); line-height: 1; }

    .bpm-unit { font-size: 0.65rem; color: #bbb; letter-spacing: 0.1em; }

    .bpm-controls { display: flex; gap: 0.45rem; }

    .bpm-btn {
      width: 32px; height: 32px; border-radius: 50%;
      border: 1px solid var(--purple-border); background: var(--purple-pale);
      color: var(--purple); font-size: 1.1rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center; transition: background 0.15s;
    }

    .bpm-btn:hover { background: rgba(91,33,182,0.15); border-color: var(--purple); }

    .bpm-slider {
      -webkit-appearance: none; appearance: none;
      width: 200px; height: 4px; border-radius: 2px;
      background: var(--gold-border); outline: none; cursor: pointer;
    }

    .bpm-slider::-webkit-slider-thumb {
      -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
      background: var(--purple); cursor: pointer; box-shadow: 0 0 8px rgba(91,33,182,0.4);
    }

    .bpm-slider::-moz-range-thumb {
      width: 18px; height: 18px; border-radius: 50%; border: none;
      background: var(--purple); cursor: pointer; box-shadow: 0 0 8px rgba(91,33,182,0.4);
    }

    .metro-btn {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.55rem 1.1rem; border-radius: 8px;
      border: 1px solid var(--purple-border); background: var(--purple-pale);
      color: var(--purple); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.15s;
    }

    .metro-btn:hover { background: rgba(91,33,182,0.15); color: var(--purple-deep); border-color: var(--purple); }

    .metro-btn.active { background: rgba(91,33,182,0.15); color: var(--purple-deep); border-color: var(--purple); }

    .metro-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-border); transition: background 0.04s; }

    .metro-dot.flash { background: var(--amber); box-shadow: 0 0 6px var(--amber); }

    .metro-dot.accent { background: #fff; box-shadow: 0 0 12px var(--amber), 0 0 20px rgba(255,255,255,0.3); transform: scale(1.4); }

    .sound-btn {
      padding: 0.45rem 0.9rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600;
      border: 1px solid var(--purple-border); background: white;
      color: #999; cursor: pointer; transition: all 0.15s;
    }

    .sound-btn:hover { border-color: var(--purple); color: var(--purple); }

    .sound-btn.active { background: var(--purple-pale); border-color: var(--purple); color: var(--purple); }

    /* Custom Ensemble config + mixer panel */
    .ensemble-panel { grid-column: 1 / -1; background: rgba(122,106,170,0.05); border: 1px solid rgba(122,106,170,0.18); border-radius: 10px; padding: 0.75rem 0.95rem; }

    .ensemble-head { font-size: 0.68rem; letter-spacing: 0.06em; color: var(--purple); font-weight: 700; margin-bottom: 0.6rem; text-transform: uppercase; }

    .ensemble-head span { color: #999; font-weight: 400; text-transform: none; letter-spacing: 0; }

    .ensemble-rows { display: flex; flex-direction: column; gap: 0.45rem; }

    .ens-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

    .ens-row.off { opacity: 0.42; }

    .ens-on { width: 15px; height: 15px; accent-color: var(--purple); cursor: pointer; flex-shrink: 0; }

    .ens-label { font-size: 0.72rem; font-weight: 700; color: #555; min-width: 104px; }

    .ens-sel { background: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 0.2rem 0.4rem; font-size: 0.74rem; font-family: inherit; cursor: pointer; color: #444; }

    .ens-vol { flex: 1; min-width: 90px; max-width: 190px; accent-color: var(--purple); cursor: pointer; }

    .ens-vol-num { font-size: 0.62rem; color: #999; min-width: 28px; text-align: right; }

    .ens-block { border-top: 1px solid rgba(122,106,170,0.12); padding-top: 0.45rem; margin-top: 0.2rem; }

    .ens-block:first-child { border-top: none; padding-top: 0; margin-top: 0; }

    .ens-role-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }

    .ens-role-label { font-size: 0.72rem; font-weight: 700; color: var(--purple); letter-spacing: 0.02em; }

    .ens-add { font-size: 0.6rem; font-weight: 700; padding: 2px 8px; border-radius: 5px; cursor: pointer; color: var(--purple); background: rgba(122,106,170,0.08); border: 1px solid rgba(122,106,170,0.25); }

    .ens-add:hover { background: rgba(122,106,170,0.18); }

    .ens-block .ens-row { padding-left: 22px; margin-bottom: 0.28rem; }

    .ens-rm { font-size: 0.85rem; line-height: 1; width: 20px; height: 20px; border-radius: 5px; cursor: pointer; color: #b55; background: #fff; border: 1px solid #e6cccc; flex-shrink: 0; }

    .ens-rm:hover { background: #fbeaea; }

    .ens-empty { font-size: 0.65rem; color: #aaa; font-style: italic; padding: 0 0 4px 22px; }

    /* global shaker strip — visible in every sound mode */
    .shaker-strip { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
      background: rgba(196,154,60,0.05); border: 1px solid rgba(196,154,60,0.22); border-radius: 10px; padding: 0.5rem 0.9rem; }

    .shaker-strip-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9a7520; }

    .shaker-chk { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; color: #555; cursor: pointer; user-select: none; }

    .shaker-chk input { width: 15px; height: 15px; accent-color: #C49A3C; cursor: pointer; }

    .shaker-hint { font-size: 0.62rem; font-weight: 400; color: #aaa; }

    .shaker-strip .ens-vol { max-width: 140px; accent-color: #C49A3C; }

/* portal-practice.html 520–558 */
    .rpick { position: relative; margin-bottom: 1.2rem; }

    .rpickbtn {
      display: inline-flex; align-items: center; gap: 0.6rem; font-family: inherit;
      font-size: 0.9rem; font-weight: 600; color: #111; background: #fff;
      border: 1px solid var(--purple-border, #e5ddf0); border-radius: 10px;
      padding: 0.6rem 1rem; cursor: pointer; min-width: 17rem; text-align: left;
    }

    .rpickbtn:hover { border-color: var(--purple, #5B21B6); }

    .rpickbtn .car { margin-left: auto; font-size: 0.65rem; color: var(--purple, #5B21B6); transition: transform 0.15s; }

    .rpick.open .rpickbtn .car { transform: rotate(180deg); }

    .rpick.open .library-grid { display: flex; }

    .library-grid .lib-card {
      display: flex; align-items: center; gap: 0.8rem;
      padding: 0.5rem 0.75rem; border-radius: 8px; border: none;
      background: transparent; text-align: left; min-height: 0;
      position: relative; transition: background 0.14s;
    }

    .library-grid .lib-card:hover { background: rgba(91,33,182,0.05); transform: none; box-shadow: none; }

    .library-grid .lib-card.active { background: rgba(91,33,182,0.09); box-shadow: inset 3px 0 0 var(--purple, #5B21B6); }

    .library-grid .lib-card-name { font-size: 0.86rem; font-weight: 600; margin: 0; flex: 1; }

    .library-grid .lib-card.active .lib-card-name { color: var(--purple, #5B21B6); }

    .library-grid .lib-card-meta { font-size: 0.74rem; color: #9a93a6; margin: 0; flex: none; }

    .library-grid .lib-card::before { content: '\25b6'; font-size: 0.6rem; color: #c9c0d8; flex: none; width: 1rem; }

    .library-grid .lib-card.active::before { color: var(--purple, #5B21B6); }

    .library-grid .lib-card-del { position: static; margin-left: 0.4rem; }

/* portal-practice.html 560–563 */
    @media (max-width: 760px) {
      .rpickbtn { width: 100%; min-width: 0; justify-content: space-between; }
      .library-grid { width: calc(100vw - 2.5rem); }
    }

/* portal-practice.html 565–754 */
.lib-card {
      display: flex; align-items: center; gap: 0.8rem;
      padding: 0.5rem 0.75rem; border-radius: 8px; border: none;
      background: transparent; text-align: left; min-height: 0;
      position: relative; transition: background 0.14s;
    }

    .library-grid .lib-card:hover { background: rgba(91,33,182,0.05); transform: none; box-shadow: none; }

    .library-grid .lib-card.active { background: rgba(91,33,182,0.09); box-shadow: inset 3px 0 0 var(--purple, #5B21B6); }

    .library-grid .lib-card-name { font-size: 0.86rem; font-weight: 600; margin: 0; flex: none; min-width: 11rem; }

    .library-grid .lib-card.active .lib-card-name { color: var(--purple, #5B21B6); }

    .library-grid .lib-card-meta { font-size: 0.74rem; color: #9a93a6; margin: 0; flex: 1; }

    .library-grid .lib-card::before {
      content: '▶'; font-size: 0.6rem; color: #c9c0d8; flex: none; width: 1rem;
    }

    .library-grid .lib-card.active::before { color: var(--purple, #5B21B6); }

    .library-grid .lib-card-del { position: static; margin-left: auto; }

    .lib-card {
      background: white; border: 1px solid var(--purple-border); border-radius: 10px;
      padding: 0.75rem 0.9rem; cursor: pointer; transition: all 0.15s;
      position: relative;
    }

    .lib-card:hover { border-color: var(--purple); box-shadow: 0 2px 10px rgba(91,33,182,0.1); }

    .lib-card.active { border-color: var(--purple); background: var(--purple-pale); box-shadow: 0 0 0 2px rgba(91,33,182,0.15); }

    .lib-card.custom-card { border-style: dashed; border-color: var(--purple-border); }

    .lib-card-name { font-weight: 600; font-size: 0.82rem; color: #111; margin-bottom: 0.2rem; }

    .lib-card.active .lib-card-name { color: var(--purple); }

    .lib-card-meta { font-size: 0.65rem; color: #999; letter-spacing: 0.06em; }

    .lib-card-del {
      position: absolute; top: 0.4rem; right: 0.5rem;
      font-size: 0.7rem; color: #ccc; cursor: pointer; padding: 0.15rem 0.25rem;
      border-radius: 3px; display: none;
    }

    .lib-card:hover .lib-card-del { display: block; }

    .lib-card-del:hover { color: #e55; background: rgba(229,85,85,0.08); }


    /* ── PLAYER BUTTON ── */
    .player-play-btn {
      width: 44px; height: 44px; border-radius: 50%;
      border: 1.5px solid rgba(91,33,182,0.4); background: rgba(91,33,182,0.1);
      color: var(--purple); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: all 0.15s;
    }

    .player-play-btn:hover { background: rgba(91,33,182,0.25); }

    .player-play-btn.playing { background: var(--purple); border-color: var(--purple); color: #fff; }


    /* ── BEAT GRID ── */
    .beat-grid { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }

    .beat {
      width: 34px; height: 34px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
      transition: transform 0.04s, box-shadow 0.04s; flex-shrink: 0; cursor: default;
    }

    .beat-D  { background: var(--gold-pale); color: var(--gold); border: 1px solid var(--gold-border); }

    .beat-T  { background: rgba(196,154,60,0.1); color: #9a7520; border: 1px solid rgba(196,154,60,0.3); }

    .beat-K  { background: rgba(122,106,170,0.1); color: #5a4a8a; border: 1px solid rgba(122,106,170,0.3); }

    .beat-r  { background: #f4f0eb; color: #ccc; border: 1px solid #e8e2d9; font-size: 0.5rem; }

    .beat-Pa { background: rgba(196,150,58,0.07); color: var(--gold-mid); border: 1px solid var(--gold-border); font-size: 0.55rem; }

    .beat-Fa { background: rgba(196,150,58,0.04); color: var(--gold-mid); border: 1px solid rgba(196,150,58,0.15); font-size: 0.55rem; }

    .beat.active { transform: scale(1.18); position: relative; z-index: 1; }

    .beat-D.active  { background: var(--gold); color: white; box-shadow: 0 0 12px rgba(196,150,58,0.5); }

    .beat-T.active  { background: var(--gold); color: white; box-shadow: 0 0 12px rgba(196,154,60,0.5); }

    .beat-K.active  { background: #7a6aaa; color: white; box-shadow: 0 0 10px rgba(122,106,170,0.5); }

    .beat-r.active  { background: #ddd; }

    .beat-Pa.active { background: var(--gold-lt); color: white; }

    .beat-Fa.active { background: var(--gold-mid); color: white; }

    .beat-sep { width: 1px; height: 34px; background: rgba(0,0,0,0.07); flex-shrink: 0; }

    /* split 16th-note cell in the player grid (display only) */
    .beat-split { width: 40px; gap: 2px; background: transparent !important; border: none !important; padding: 0; }

    .beat-half { flex: 1 1 0; min-width: 0; height: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.52rem; font-weight: 700; cursor: pointer; }

    /* editable player grid: each step = a column (the .beat cell + its ÷ toggle) */
    .beat-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; }

    #beatGrid .beat { cursor: pointer; }


    /* ── CUSTOM RHYTHM BUILDER ── */
    .builder-section { margin-bottom: 3rem; }

    .builder-box {
      background: white; border: 1px solid var(--gold-border); border-radius: 14px; overflow: hidden;
    }

    .builder-header {
      background: radial-gradient(135deg, #1a0533 0%, #0a0a0a 50%, #0d0618 100%); padding: 0.9rem 1.4rem;
      display: flex; align-items: center; justify-content: space-between;
    }

    .builder-header span { font-family: 'Playfair Display', serif; font-size: 0.95rem; color: #FDF5DF; }

    .builder-body { padding: 1.4rem; }

    .builder-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }

    .builder-input {
      border: 1px solid #e8e2d9; border-radius: 7px; padding: 0.5rem 0.8rem;
      font-family: 'Inter', sans-serif; font-size: 0.85rem; outline: none; background: #fafaf8;
    }

    .builder-input:focus { border-color: var(--gold-border); }

    .builder-grid { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 1.2rem; }

    .builder-step {
      width: 40px; height: 40px; border-radius: 7px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.65rem; font-weight: 700; transition: all 0.1s; border: 1px solid #e8e2d9;
      background: #f4f0eb; color: #aaa; user-select: none;
    }

    .builder-step:hover { border-color: var(--gold); }

    .builder-step.s-D  { background: var(--gold-pale); color: var(--gold); border-color: var(--gold-border); }

    .builder-step.s-T  { background: rgba(196,154,60,0.12); color: #9a7520; border-color: rgba(196,154,60,0.35); }

    .builder-step.s-K  { background: rgba(122,106,170,0.12); color: #5a4a8a; border-color: rgba(122,106,170,0.35); }

    .builder-step.s-Pa { background: rgba(196,150,58,0.1); color: var(--gold); border-color: var(--gold-border); }

    .builder-step.s-Fa { background: rgba(196,150,58,0.06); color: var(--gold-mid); border-color: rgba(196,150,58,0.2); }

    /* split 16th-note step: a slot = the cell + its split toggle underneath */
    .builder-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; }

    .builder-step.split { width: 42px; height: 40px; padding: 0; gap: 2px; background: transparent; border: none; }

    .builder-half {
      flex: 1 1 0; min-width: 0; height: 40px; border-radius: 6px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.6rem; font-weight: 700; border: 1px solid #e8e2d9;
      background: #f4f0eb; color: #aaa; user-select: none; transition: all 0.1s;
    }

    .builder-half:hover { border-color: var(--gold); }

    .builder-half.s-D  { background: var(--gold-pale); color: var(--gold); border-color: var(--gold-border); }

    .builder-half.s-T  { background: rgba(196,154,60,0.12); color: #9a7520; border-color: rgba(196,154,60,0.35); }

    .builder-split-toggle {
      font-size: 0.5rem; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 4px;
      cursor: pointer; color: #bbb; border: 1px solid #e8e2d9; background: #faf7f2;
      user-select: none; letter-spacing: 0.03em;
    }

    .builder-split-toggle:hover { border-color: var(--gold); color: var(--gold-mid); }

    .builder-split-toggle.on { color: var(--gold); border-color: var(--gold-border); background: var(--gold-pale); }

/* portal-practice.html 761–761 */
    .bpm-slider-wrap { min-width: 160px; }

/* portal-practice.html 765–860 */
    @media (max-width: 768px) {
      .pr-body { padding: 2rem 1rem 3rem; }

      /* Stack the global controls grid vertically */
      .global-controls {
        grid-template-columns: 1fr;
        padding: 1rem 1.2rem;
        gap: 0.8rem;
        overflow: hidden;
      }

      /* Tempo row: inline flex */
      .global-controls > div:first-child,
      .global-controls > div:nth-child(2),
      .global-controls > div:nth-child(3),
      .global-controls > div:nth-child(4) {
        min-width: 0 !important;
      }

      /* Make slider full width */
      .bpm-slider-wrap {
        min-width: 0;
      }
      .bpm-slider {
        width: 100%;
      }

      /* Row 2: wrap sound buttons */
      .gc-row-2 {
        flex-wrap: wrap;
        gap: 0.6rem;
      }
      .gc-rhythm-info {
        flex-basis: 100%;
      }
      .sound-select {
        flex-wrap: wrap;
        gap: 0.4rem;
      }
      .sound-btn {
        font-size: 0.65rem;
        padding: 0.35rem 0.6rem;
      }
      .cycle-select {
        margin-left: 0 !important;
      }

      /* Beat grid: smaller beats on mobile */
      .beat {
        width: 28px;
        height: 28px;
        font-size: 0.55rem;
      }
      .beat-grid {
        gap: 3px;
      }

      /* Library grid: 2 columns on mobile */
      .library-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
      }

      /* Legend wrap */
      .legend {
        gap: 0.5rem;
        padding: 0.5rem 0.7rem;
      }

      /* Video player */
      .pr-video-wrap iframe {
        height: 220px;
      }

      /* PDF viewer */
      .pr-pdf-viewer iframe {
        height: 400px;
      }
      .pr-pdf-body {
        padding: 0.7rem 0.8rem 0.8rem;
      }

      /* Section titles */
      .pr-section-title {
        font-size: 1.1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
      }

      /* Header */
      .pr-header { min-height: 34vh; }
      .pr-header-inner {
        padding: 2rem 1.5rem 2.5rem;
      }
    }

/* portal-practice.html 863–889 */
    @media (max-width: 480px) {
      .global-controls {
        padding: 0.8rem 1rem;
      }
      .bpm-display {
        font-size: 1.8rem;
      }
      .beat {
        width: 24px;
        height: 24px;
        font-size: 0.5rem;
        border-radius: 5px;
      }
      .library-grid {
        grid-template-columns: 1fr 1fr;
      }
      .lib-card {
        padding: 0.6rem 0.7rem;
      }
      .lib-card-name {
        font-size: 0.75rem;
      }
      .sound-btn {
        font-size: 0.6rem;
        padding: 0.3rem 0.5rem;
      }
    }

/* portal-practice.html 3347–3353 */
[data-tool] .beat-slot{background:#F2EEF8;border:1px solid #DDD3EC;color:var(--ink);min-width:34px;min-height:40px;font-weight:600}
[data-tool] .beat-slot.active{background:var(--brand);color:#fff;border-color:var(--brand)}
[data-tool] .lib-card{background:#FBFAFE;border:1px solid var(--line);color:var(--ink)}
[data-tool] .lib-card:hover{border-color:#cfc6e0}
[data-tool] .lib-card-name{color:var(--ink)}
[data-tool] .lib-card-meta{color:var(--muted)}
[data-tool] .ens-row select,[data-tool] .ens-row input{font-family:inherit}

/* portal-practice.html 3355–3357 */
[data-tool] .rpick .rpickbtn{width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:9px;padding:.6rem .8rem;font-family:inherit;font-size:.88rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
[data-tool] .rpick > div:last-child{display:none}
[data-tool] .rpick.open > div:last-child{display:block;border:1px solid var(--line);border-radius:10px;margin-top:.35rem;max-height:320px;overflow-y:auto;background:#fff}

/* portal-practice.html 3367–3368 */
[data-tool] .bpm-btn{background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-weight:600;font-size:.9rem;min-width:36px;min-height:36px;padding:.3rem .6rem;cursor:pointer;font-family:inherit}
[data-tool] .bpm-btn:hover{border-color:#cfc6e0;background:#FBFAFE}

/* portal-practice.html 3370–3374 */
[data-tool] .metro-btn{background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:.82rem;font-weight:600;padding:.45rem .8rem;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.45rem}
[data-tool] .metro-btn.on,[data-tool] .metro-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}
[data-tool] .player-play-btn{background:var(--brand);color:#fff;border:none;border-radius:50%;width:40px;height:40px;display:inline-grid;place-items:center;cursor:pointer}
[data-tool] .sound-btn{background:#fff;border:1px solid var(--line);border-radius:99px;color:var(--ink);font-size:.76rem;font-weight:600;padding:.4rem .75rem;cursor:pointer;font-family:inherit}
[data-tool] .sound-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* portal-practice.html 1443–1467, the room's last stylesheet: light-room tuning
   for the carried-over controls (sliders, selects, checkboxes, the strokes
   legend). Moved here Sep 13 so the lessons room draws them the same way. */

/* Sliders and knobs. The carried-over controls were drawn for a dark page —
   on a white card an unstyled iOS range is a white thumb on a white track.
   Every slider in the room gets a visible rail and a brand thumb. */
[data-tool] input[type=range]{-webkit-appearance:none;appearance:none;height:22px;background:transparent;accent-color:var(--brand);cursor:pointer;min-width:70px}
[data-tool] input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:#E3DBEF}
[data-tool] input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:#E3DBEF}
[data-tool] input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:19px;height:19px;border-radius:50%;background:var(--brand);border:2.5px solid #fff;box-shadow:0 1px 5px rgba(39,9,73,.35);margin-top:-7px}
[data-tool] input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--brand);border:2.5px solid #fff;box-shadow:0 1px 5px rgba(39,9,73,.35)}
[data-tool] #bpmDisplay{color:var(--ink)}
[data-tool] select{background:#fff !important;border:1px solid var(--line) !important;border-radius:7px !important;color:var(--ink) !important;font-family:inherit;padding:.3rem .5rem !important;background-image:none !important}
[data-tool] input[type=number],[data-tool] input[type=text]{background:#fff;border:1px solid var(--line);border-radius:7px;color:var(--ink);font-family:inherit;padding:.35rem .5rem}
[data-tool] input[type=checkbox]{accent-color:var(--brand);width:16px;height:16px}
/* the strokes legend: a quiet inline row, not stacked full-width bands */
[data-tool] #strokeLegend{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.72rem;color:var(--muted);margin:.5rem 0}
[data-tool] #strokeLegend > *{display:inline-flex;align-items:center;gap:.3rem;width:auto;background:none}
@media(max-width:900px){
  [data-tool] input[type=range]::-webkit-slider-thumb{width:23px;height:23px;margin-top:-9px}
  [data-tool] .bpm-btn{min-width:42px;min-height:42px}
}

/* play pressed before the chosen sound arrived: a short, visible wait (≤3 s) */
.player-play-btn.loading{opacity:.55;cursor:progress}