/* studio.css — the studio kit skin (learning tools, task A1). Loaded only on kit pages, through
   templates/macros/studio.html studio_assets(). Contract: docs/superpowers/plans/2026-10-07-learning-tools-contract.md
   "Studio CSS classes"; frozen after A1 (a page restyles in its own CSS file).

   Look: the two crash-course guides (docs/research/2026-10-07-learning-guides-demand/guides). Hardware (.st-panel,
   pads, LEDs, the transport) stays dark charcoal in both themes, like the machine it imitates; everything around it
   follows brizm's theme through the --st-* tokens. Accent per page: set --st-accent on .st-root.

   Classes: .st-root .st-display(.st-unit) .st-panel .st-pads .st-pad(--red|orange|yellow|ivory, .is-on, .is-hit)
   .st-btn(--play) .st-grid(.st-grid-scroll .st-grid-label .st-cell .st-cell--v1|v2|v3 .is-beat .is-head .is-out,
   [data-group=0..3]) .st-seg .st-notation .st-slider .st-leds(.st-led .is-on .is-accent .is-mute .is-beat)
   .st-scope .st-callout .st-try .st-card-link .st-transport .st-print .st-readout .st-sr */

/* ── tokens ──────────────────────────────────────────────────────────── */
.st-root {
    /* guide palette */
    --st-808-red: #CF3626;
    --st-808-orange: #E97E1F;
    --st-808-yellow: #EBBE2E;
    --st-808-ivory: #EEE7D3;
    --st-orange: #FF6A1F;
    --st-cyan: #00A9CC;
    --st-violet: #7B61FF;
    --st-green: #12A866;
    --st-pink: #F23A84;
    --st-yellow: #EDB400;
    --st-led: #FF3B28;

    /* hardware: the same in both themes */
    --st-panel: #1A1C1F;
    --st-panel-2: #2A2D31;
    --st-panel-ink: #ECEAE3;
    --st-panel-muted: #A6AAAE;
    --st-panel-line: #3C4045;
    --st-well: #111315;
    --st-key: #34383D;
    --st-key-ink: #ECEAE3;

    /* theme-following surfaces: brizm dark (navy) */
    --st-ink: var(--text, #e0e2f0);
    --st-muted: var(--text-dim, #8a88a8);
    --st-line: rgba(124, 116, 214, 0.24);
    --st-surface: rgba(22, 20, 52, 0.78);
    --st-sunk: rgba(4, 4, 16, 0.42);
    --st-raised: rgba(255, 255, 255, 0.09);
    --st-focus: #7FA8FF;

    --st-accent: var(--st-orange);
    --st-on-accent: #1C0C00;
    --st-font: "Archivo", "DM Sans", system-ui, -apple-system, sans-serif;
    --st-target: 2.75rem;            /* 44 px */

    font-family: var(--st-font);
    font-stretch: 100%;
    color: var(--st-ink);
}
[data-theme="light"] .st-root {
    --st-panel: #24272B;
    --st-panel-2: #33373C;
    --st-ink: var(--text, #1a1830);
    --st-muted: var(--text-dim, #5a566e);
    --st-line: rgba(90, 80, 150, 0.22);
    --st-surface: #ffffff;
    --st-sunk: #ECEAF3;
    --st-raised: #ffffff;
    --st-focus: #1F63D6;
}
/* inside the hardware the surface tokens become the machine's (the transport is also .st-root: match the
   light rule's specificity and come after it) */
.st-panel,
.st-transport,
[data-theme="light"] .st-panel,
[data-theme="light"] .st-transport {
    --st-ink: var(--st-panel-ink);
    --st-muted: var(--st-panel-muted);
    --st-line: var(--st-panel-line);
    --st-surface: var(--st-panel-2);
    --st-sunk: var(--st-well);
    --st-raised: #3A3E44;
    --st-focus: #7FA8FF;
}

.st-root :focus-visible,
.st-transport :focus-visible {
    outline: 2px solid var(--st-focus);
    outline-offset: 2px;
}
.st-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── display type: Archivo's width axis is the voice ─────────────────── */
.st-display {
    --st-wdth: 125%;
    margin: 0;
    font-family: var(--st-font);
    font-size: var(--st-display-size, clamp(3.4rem, 8.5vw, 6.8rem));
    font-weight: 850;
    font-stretch: var(--st-wdth);
    line-height: 0.84;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--st-ink);
}
.st-display--narrow {
    --st-wdth: 68%;
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.005em;
}
.st-display--sm { --st-display-size: clamp(2rem, 4.6vw, 3.2rem); }
.st-unit {
    margin-inline-start: 0.22em;
    font-size: 0.24em;
    font-weight: 700;
    font-stretch: 100%;
    letter-spacing: 0.01em;
    color: var(--st-muted);
}
.st-readout {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    font-stretch: 92%;
}

/* ── hardware panel ──────────────────────────────────────────────────── */
.st-panel {
    position: relative;
    padding: clamp(14px, 2.2vw, 22px);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--st-panel-2) 0, var(--st-panel) 64px);
    color: var(--st-panel-ink);
    border: 1px solid rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 22px 44px -28px rgba(0, 0, 0, 0.85);
}

/* ── pads: 808 keys and MPC pads ─────────────────────────────────────── */
.st-pads {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr));
    gap: 0.6rem;
    touch-action: manipulation;
}
.st-pad {
    --st-pc: var(--st-accent);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: var(--st-target);
    min-height: 5.6rem;
    padding: 0.7rem 0.75rem 0.8rem;
    border: 0;
    border-radius: 7px;
    background: var(--st-key);
    color: var(--st-key-ink);
    font: inherit;
    font-family: var(--st-font);
    text-align: start;
    cursor: pointer;
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.06s, box-shadow 0.06s, filter 0.06s, background-color 0.06s;
}
.st-pad::before {               /* the LED */
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--st-pc) 60%, #000);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.45);
}
.st-pad-name {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    font-stretch: 112%;
    line-height: 1;
    letter-spacing: -0.01em;
}
.st-pad-meta {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-stretch: 88%;
    line-height: 1.1;
    opacity: 0.78;
    font-variant-numeric: tabular-nums;
}
.st-pad--red { background: var(--st-808-red); color: #fff; }
.st-pad--orange { background: var(--st-808-orange); color: #17191B; }
.st-pad--yellow { background: var(--st-808-yellow); color: #17191B; }
.st-pad--ivory { background: var(--st-808-ivory); color: #17191B; }
.st-pad--red::before,
.st-pad--orange::before,
.st-pad--yellow::before,
.st-pad--ivory::before { background: rgba(0, 0, 0, 0.35); }
.st-pad:hover { filter: brightness(1.07); }
.st-pad:active,
.st-pad.is-hit,
.st-pad.is-on {
    transform: translateY(2px);
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.28);
}
.st-pad.is-hit { filter: brightness(1.22); }
.st-pad:not([class*="st-pad--"]).is-hit { background: var(--st-pc); color: #fff; }
.st-pad.is-on::before,
.st-pad.is-hit::before {
    background: var(--st-led);
    box-shadow: 0 0 10px 2px var(--st-led);
}

/* ── buttons ─────────────────────────────────────────────────────────── */
.st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--st-target);
    padding: 0 1rem;
    border: 1px solid var(--st-line);
    border-radius: 9px;
    background: var(--st-raised);
    color: var(--st-ink);
    font: inherit;
    font-family: var(--st-font);
    font-size: 0.95rem;
    font-weight: 650;
    font-stretch: 95%;
    cursor: pointer;
}
.st-btn:hover { border-color: var(--st-muted); }
.st-btn--play {
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--st-808-orange);
    color: #17191B;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}
.st-btn--play::before {          /* play triangle, a square while playing */
    content: "";
    width: 0;
    height: 0;
    margin-inline-start: 4px;
    border-inline-start: 15px solid currentColor;
    border-block: 9px solid transparent;
}
.st-btn--play[aria-pressed="true"] {
    background: var(--st-808-red);
    color: #fff;
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25);
}
.st-btn--play[aria-pressed="true"]::before {
    width: 15px;
    height: 15px;
    margin: 0;
    border: 0;
    border-radius: 2px;
    background: currentColor;
}

/* ── step grid ───────────────────────────────────────────────────────── */
.st-grid-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    margin: 0 -2px;
    padding: 2px 2px 6px;
}
.st-grid {
    --st-cols: 16;
    --st-label-w: 6.5rem;
    display: grid;
    grid-template-columns: var(--st-label-w) repeat(var(--st-cols), minmax(1.75rem, 1fr));
    gap: 6px 4px;
    align-items: center;
    min-width: calc(var(--st-label-w) + var(--st-cols) * 1.95rem);
}
.st-grid-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--st-target);
    padding: 0 0.4rem 0 0;
    border: 0;
    background: none;
    color: var(--st-ink);
    font: inherit;
    font-family: var(--st-font);
    font-size: 0.88rem;
    font-weight: 650;
    font-stretch: 90%;
    text-align: start;
    cursor: pointer;
}
.st-grid-label[aria-pressed="false"] { color: var(--st-muted); text-decoration: line-through; }
.st-cell {
    --st-on: var(--st-accent);
    position: relative;
    min-width: 0;
    height: var(--st-target);
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: var(--st-key);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
    cursor: pointer;
}
.st-cell[data-group="0"] { --st-on: var(--st-808-red); }
.st-cell[data-group="1"] { --st-on: var(--st-808-orange); }
.st-cell[data-group="2"] { --st-on: var(--st-808-yellow); }
.st-cell[data-group="3"] { --st-on: var(--st-808-ivory); }
.st-cell.is-beat { margin-inline-start: 6px; }
.st-cell::after {               /* step LED */
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
}
.st-cell--v1 { background: var(--st-on); background: color-mix(in srgb, var(--st-on) 36%, var(--st-key)); }
.st-cell--v2 { background: var(--st-on); background: color-mix(in srgb, var(--st-on) 74%, var(--st-key)); }
.st-cell--v3 { background: var(--st-on); }
.st-cell--v1::after { background: #FF8A6A; }
.st-cell--v2::after { background: var(--st-led); }
.st-cell--v3::after { background: var(--st-led); box-shadow: 0 0 6px 1px var(--st-led); }
.st-cell.is-head { box-shadow: inset 0 0 0 2px var(--st-panel-ink), inset 0 -3px 0 rgba(0, 0, 0, 0.28); }
.st-cell.is-out { opacity: 0.28; }

/* ── segmented control (and the key-notation control, K2 markup) ─────── */
.st-seg,
.st-notation {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
    border-radius: 11px;
    background: var(--st-sunk);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.st-seg > button,
.st-notation > button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: var(--st-target);
    padding: 0 0.9rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--st-muted);
    font: inherit;
    font-family: var(--st-font);
    font-size: 0.9rem;
    font-weight: 650;
    font-stretch: 92%;
    cursor: pointer;
}
.st-seg > button::before,
.st-notation > button::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
}
.st-seg > button:hover,
.st-notation > button:hover { color: var(--st-ink); }
.st-seg > button[aria-pressed="true"],
.st-notation > button[aria-checked="true"] {
    background: var(--st-raised);
    color: var(--st-ink);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.st-seg > button[aria-pressed="true"]::before,
.st-notation > button[aria-checked="true"]::before {
    background: var(--st-accent);
    opacity: 1;
    box-shadow: 0 0 6px var(--st-accent);
}
.st-seg > button:disabled { opacity: 0.4; cursor: default; }

/* ── slider: a fader cap on a sunk track ─────────────────────────────── */
.st-slider {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 650;
    font-stretch: 92%;
    color: var(--st-muted);
}
.st-slider-head { display: flex; justify-content: space-between; gap: 0.6rem; }
.st-slider-head output {
    color: var(--st-ink);
    font-variant-numeric: tabular-nums;
}
.st-slider input[type="range"],
input[type="range"].st-slider,
.st-transport input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--st-target);
    margin: 0;
    background: transparent;
    cursor: pointer;
    accent-color: var(--st-accent);
}
.st-slider input[type="range"]::-webkit-slider-runnable-track,
input[type="range"].st-slider::-webkit-slider-runnable-track,
.st-transport input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: var(--st-sunk);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.st-slider input[type="range"]::-moz-range-track,
input[type="range"].st-slider::-moz-range-track,
.st-transport input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--st-sunk);
}
.st-slider input[type="range"]::-webkit-slider-thumb,
input[type="range"].st-slider::-webkit-slider-thumb,
.st-transport input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 26px;
    margin-top: -10px;
    border: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, transparent 6px, var(--st-accent) 6px, var(--st-accent) 10px, transparent 10px),
        linear-gradient(180deg, #F4F2EC, #C9C6BD);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.st-slider input[type="range"]::-moz-range-thumb,
input[type="range"].st-slider::-moz-range-thumb,
.st-transport input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 26px;
    border: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, transparent 6px, var(--st-accent) 6px, var(--st-accent) 10px, transparent 10px),
        linear-gradient(180deg, #F4F2EC, #C9C6BD);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ── LEDs ────────────────────────────────────────────────────────────── */
.st-leds {
    --st-n: 16;
    display: grid;
    grid-template-columns: repeat(var(--st-n), minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 0.9rem;
}
.st-led {
    display: inline-block;
    min-width: 10px;
    min-height: 10px;
    border-radius: 2px;
    background: #2C3035;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}
.st-led.is-beat { background: #40454C; }
.st-led.is-accent { background: color-mix(in srgb, var(--st-led) 35%, #2C3035); }
.st-led.is-mute { background: transparent; box-shadow: inset 0 0 0 1px #4A4F56; }
.st-led.is-on { background: var(--st-accent); box-shadow: 0 0 8px 1px var(--st-accent); }
.st-led.is-on.is-accent { background: var(--st-led); box-shadow: 0 0 10px 2px var(--st-led); }
.st-led.is-on.is-mute { background: transparent; box-shadow: inset 0 0 0 1px var(--st-panel-muted); }
.st-grid-label .st-led { flex: none; width: 10px; height: 10px; }

/* ── oscilloscope ────────────────────────────────────────────────────── */
.st-scope {
    display: block;
    width: 100%;
    height: 5.75rem;
    border-radius: 8px;
    background-color: var(--st-sunk);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 10% 25%;
    background-position: -1px -1px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* ── teaching blocks ─────────────────────────────────────────────────── */
.st-callout {
    max-width: 66ch;
    margin: 1.2em 0;
    padding: 0.15rem 0 0.15rem 0.95rem;
    border-inline-start: 3px solid var(--st-accent);
    color: var(--st-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}
.st-callout strong { color: var(--st-ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.st-try {
    max-width: 68ch;
    margin: 1.6em 0;
    padding: 0.95rem 1.25rem 0.75rem;
    border-inline-start: 5px solid var(--st-808-orange);
    border-radius: 0 10px 10px 0;
    background: var(--st-surface);
    line-height: 1.55;
}
.st-try > h2,
.st-try > h3,
.st-try > h4 {
    margin: 0 0 0.45rem;
    font-family: var(--st-font);
    font-size: 1.02rem;
    font-weight: 750;
    font-stretch: 105%;
}
.st-try ol,
.st-try ul { margin: 0 0 0.3rem; padding-inline-start: 1.25em; }
.st-try li { margin-bottom: 0.4em; padding-inline-start: 0.2em; }

/* ── deep-link card ──────────────────────────────────────────────────── */
.st-card-link {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr);
    column-gap: 0.85rem;
    align-items: start;
    min-height: var(--st-target);
    padding: 0.85rem 1rem;
    border: 1px solid var(--st-line);
    border-radius: 12px;
    background: var(--st-surface);
    color: var(--st-ink);
    text-decoration: none;
}
.st-card-link::before {          /* a small pad in the card's accent */
    content: "";
    grid-row: 1 / span 2;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 6px;
    background: radial-gradient(circle at 9px 9px, rgba(0, 0, 0, 0.35) 3.5px, transparent 4px), var(--st-accent);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
.st-card-link-title {
    font-weight: 750;
    font-stretch: 108%;
    font-size: 1rem;
    line-height: 1.25;
}
.st-card-link-desc {
    grid-column: 2;
    margin-top: 0.15rem;
    color: var(--st-muted);
    font-size: 0.88rem;
    line-height: 1.4;
}
.st-card-link:hover { border-color: var(--st-accent); color: var(--st-ink); text-decoration: none; }
.st-card-link:hover::before {
    background: radial-gradient(circle at 9px 9px, var(--st-led) 3.5px, transparent 4.5px), var(--st-accent);
}

/* ── transport: Studio.transport.claim() puts it last in main ────────── */
.st-transport {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 1.5rem 0 0;
    padding: 0.4rem 0.45rem 0.4rem 0.95rem;
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--st-panel-2), var(--st-panel));
    color: var(--st-panel-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 -12px 30px -14px rgba(0, 0, 0, 0.7);
}
.st-transport[hidden] { display: none; }
.st-transport-led {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--st-led);
    box-shadow: 0 0 9px 2px var(--st-led);
}
.st-transport-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.92rem;
    font-weight: 700;
    font-stretch: 88%;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.st-transport-scope {
    flex: 0 1 9rem;
    width: 9rem;
    height: 2.25rem;
    border-radius: 6px;
    background-size: 12.5% 50%;
}
.st-transport-vol {
    display: flex;
    flex: 0 1 8.5rem;
    align-items: center;
    gap: 0.4rem;
    min-width: 5rem;
    color: var(--st-panel-muted);
}
.st-transport-vol svg { flex: none; }
.st-transport-stop {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    min-width: var(--st-target);
    min-height: var(--st-target);
    padding: 0 1rem 0 0.85rem;
    border: 0;
    border-radius: 10px;
    background: var(--st-808-red);
    color: #fff;
    font: inherit;
    font-family: var(--st-font);
    font-size: 0.92rem;
    font-weight: 750;
    font-stretch: 95%;
    cursor: pointer;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
.st-transport-stop:active { transform: translateY(1px); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.25); }
.st-transport-stop-icon {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: currentColor;
}

/* ── touch and small screens ─────────────────────────────────────────── */
@media (pointer: coarse) {
    .st-grid { grid-template-columns: var(--st-label-w) repeat(var(--st-cols), minmax(var(--st-target), 1fr)); }
    .st-grid { min-width: calc(var(--st-label-w) + var(--st-cols) * (var(--st-target) + 4px) + 18px); }
}
@media (max-width: 1024px) {
    .st-transport { bottom: 56px; }   /* above style.css .bottom-bar (fixed, 56 px) */
}
@media (max-width: 560px) {
    .st-pads { grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 0.5rem; }
    .st-pad { min-height: 4.9rem; padding: 0.6rem 0.6rem 0.7rem; }
    .st-pad-name { font-size: 1rem; }
    .st-grid { --st-label-w: 5.2rem; }
    .st-panel { border-radius: 14px; }
    .st-transport { gap: 0.6rem; padding-inline-start: 0.75rem; }
    .st-transport-scope { display: none; }
    .st-transport-vol { flex-basis: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .st-root *,
    .st-root *::before,
    .st-root *::after,
    .st-transport * {
        transition: none !important;
        animation: none !important;
    }
}

/* ── print: page content only (a cheat sheet prints on its own) ──────── */
@media print {
    .top-bar,
    .sidebar,
    .sidebar-offcanvas,
    .bottom-bar,
    .st-transport,
    footer,
    .ad-slot,
    .bg-gradient { display: none !important; }
    .layout { display: block !important; }
    main { max-width: none !important; padding: 0 !important; }
    body::before, body::after { display: none !important; }
    .st-root {
        --st-ink: #000;
        --st-muted: #333;
        --st-line: #999;
        --st-surface: #fff;
        --st-sunk: #f2f2f2;
        color: #000;
    }
    .st-print { break-inside: avoid; }
    .st-panel, .st-pad, .st-cell, .st-led {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        box-shadow: none;
    }
}