.oooo-grid-tutorials {
    margin-block: 2rem;
    padding: clamp(16px, 4vw, 28px);
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: var(--color-line-soft);
}
.oooo-grid-tutorials [hidden] { display: none !important; }
.oooo-grid-start-row, .oooo-grid-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.oooo-grid-tutorials button {
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}
.oooo-grid-tutorials button:hover, .oooo-grid-tutorials button[aria-pressed="true"] {
    border-color: currentColor;
    background: var(--color-line-soft);
}
.oooo-grid-tutorials button:focus-visible, .oooo-grid-step:focus-visible { outline: 2px solid #b86214; outline-offset: 4px; }
.oooo-grid-tutorials button:disabled { opacity: .45; cursor: default; }
.oooo-grid-shell { position: relative; margin-block: 24px; }
.monome-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 16), minmax(0, 1fr));
    gap: clamp(3px, .65vw, 8px);
    padding: clamp(6px, 1.5vw, 16px);
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: #222724;
}
.monome-grid-cell { aspect-ratio: 1; border: 1px solid #a8b0a9; border-radius: 3px; background: #313b34; }
.monome-grid-cell.is-c-note { background: #746343; }
.monome-grid-cell.is-same-note { background: #88734a; }
.monome-grid-cell.is-lit { background: #ffbf6c; border-color: #ffe1af; }
.monome-grid-cell.is-blink { animation: oooo-grid-blink .9s steps(1, end) infinite; }
@keyframes oooo-grid-blink { 50% { background: #a97537; } }
.grid-focus-proxy { position: absolute; pointer-events: none !important; outline: 2px solid #b86214; outline-offset: 3px; border-radius: 3px; }
.oooo-grid-step { padding-top: 8px; scroll-margin-block: 96px; }
.oooo-grid-step [data-grid-progress] { font-family: var(--font-mono); font-size: .8rem; color: var(--color-muted); }
.oooo-grid-step h3 { margin-top: 12px; }
/* Driver highlights the grid only. Keep page controls and navigation usable. */
body.driver-active:has([data-grid-session]:not([hidden])) * { pointer-events: auto; }
body.driver-active:has([data-grid-session]:not([hidden])) .driver-overlay { display: none; }
body.driver-active:has([data-grid-session]:not([hidden])) .grid-focus-proxy { pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) {
    .monome-grid-cell.is-blink { animation: none; }
}