/* Базовая дизайн-система, шапка, подвал, настройки и
   стикеры приходят из guide-shell.css, собранного из того же src/index.css,
   что и SPA. Здесь остаются только стили собственного контента гайдов. */
.g-body { line-height: 1.6; }
.guide-screen { min-height: 100vh; }
.topbar-account-button { text-decoration: none; }
.topbar-account-button [data-guide-account-label] { color: inherit; font: inherit; }
a { color: var(--accent-strong); }

.g-breadcrumbs { padding: 12px 24px; font-size: 13px; color: var(--text-dim); max-width: 760px; margin: 0 auto; }
.g-breadcrumbs a { color: var(--text-dim); }
.g-crumb-sep { margin: 0 6px; opacity: .5; }
.g-main { max-width: 760px; margin: 0 auto; padding: 8px 24px 48px; }
.g-banner { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; margin: 16px 0 4px; border: 1px solid var(--line); }
.g-article h1, .g-index-hero h1 { font-size: 32px; line-height: 1.2; margin: 8px 0 16px; }
.g-intro { font-size: 17px; color: var(--text-dim); }
.g-article section { margin-top: 28px; }
.g-toc { margin: 0 0 8px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; }
.g-toc ol { margin: 8px 0 0; padding-left: 22px; }
.g-toc li { margin-bottom: 4px; }
.g-article > h2 { margin-top: 28px; }
.g-article > blockquote { margin: 16px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--accent); color: var(--text-dim); }
.g-article h3 { font-size: 17px; margin: 14px 0 6px; }
.g-article h2 { font-size: 21px; margin: 0 0 10px; }
.g-article p { margin: 0 0 12px; }
.g-article ul { padding-left: 20px; }
.g-article li { margin-bottom: 6px; }
.g-cta {
  margin-top: 36px; padding: 20px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-raised); text-align: center;
}
.g-cta p { margin: 0 0 12px; color: var(--text-dim); }
.g-cta-button {
  display: inline-block; padding: 12px 24px; border-radius: 999px; background: var(--accent);
  color: var(--on-accent); text-decoration: none; font-weight: 700;
}
.g-index-jumpnav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; font-size: 13px; }
.g-index-jumpnav a { color: var(--text-dim); text-decoration: none; }
.g-index-jumpnav a:hover { color: var(--accent-strong); }
.g-index-section { margin-top: 40px; scroll-margin-top: 16px; }
.g-index-section h2 { font-size: 20px; margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.g-index-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 14px; }
.g-index-card a {
  display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-raised); text-decoration: none; color: var(--text);
}
.g-index-card h3 { margin: 0 0 6px; font-size: 18px; }
.g-index-card p { margin: 0; color: var(--text-dim); font-size: 14px; }

/* Курс на 100 уроков - 3 баннера ниже статей (владелец продукта: "ниже
   статей у нас курс"). Один акцентный цвет на уровень - тот же приём, что
   на основном сайте для баса/сигнала (--bass/--signal в index.css), просто
   заведён здесь отдельно (см. :root выше - у guides.css своя copy палитры). */
.g-course-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.g-course-section h2 { font-size: 22px; margin: 0; }
.g-course-overall-progress { margin: 8px 0 16px; font-size: 13px; font-weight: 700; color: var(--accent-strong); }
.g-course-banners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.g-course-banner {
  display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 16px;
  text-decoration: none; color: var(--text); background: var(--bg-raised);
  border: 1px solid var(--line); border-top: 3px solid var(--accent);
}
.g-course-banner--beginner { border-top-color: var(--bass); }
.g-course-banner--intermediate { border-top-color: var(--accent); }
.g-course-banner--advanced { border-top-color: var(--signal); }
.g-course-banner-ru { font-size: 20px; font-weight: 700; }
.g-course-banner p { margin: 8px 0 0; font-size: 13px; color: var(--text-dim); line-height: 1.4; }
.g-course-banner-progress { margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--accent-strong); }
@media (max-width: 720px) {
  .g-course-banners { grid-template-columns: 1fr; }
}

/* Страница одного уровня курса (/course/{tier}/) - уроки строго по номеру,
   с готовой статьёй - ссылка, без неё - серая строка с бейджем "скоро". */
.g-course-hero-tier { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); }
.g-course-list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 6px; }
.g-course-subhead { margin: 20px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.g-course-list li:first-child.g-course-subhead { margin-top: 0; }
.g-course-list a, .g-course-list li.g-course-soon {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); text-decoration: none; color: var(--text);
}
.g-course-list a:hover { border-color: var(--line-strong); background: var(--bg-raised); }
.g-course-list li.g-course-soon { color: var(--text-dim); }
.g-course-n { display: inline-block; min-width: 26px; margin-right: 4px; color: var(--accent-strong); font-weight: 700; }
.g-course-soon-badge { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: var(--bg-sunken, var(--bg)); border: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }

/* Гейт регистрации (владелец продукта: первые COURSE_FREE_LIMIT уроков
   beginner бесплатно, дальше и весь intermediate/advanced - только
   зарегистрированным) + отметка "пройдено" (вставляется JS-ом в
   courseTierHtml, см. renderChecks). data-locked ставит сама генерация
   (см. courseTierHtml) - скрипт там же снимает атрибут после успешной
   проверки /api/auth/me, ссылка при этом остаётся настоящей всегда
   (боты видят граф ссылок независимо от гейта). */
.g-course-list li.g-course-row { display: flex; align-items: center; gap: 8px; }
.g-lock-badge {
  display: none; flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: var(--bg-sunken, var(--bg));
  border: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim);
}
li[data-locked] .g-lock-badge { display: inline-block; }
li[data-locked] a { opacity: .65; }
.g-lesson-check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: none; cursor: pointer; padding: 0; display: grid; place-items: center;
}
.g-lesson-check::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.g-lesson-check[data-done='true'] { border-color: var(--accent); background: var(--accent); }
.g-lesson-check[data-done='true']::after { background: var(--on-accent); }
.g-course-register-cta {
  margin-top: 24px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-raised);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
}
.g-course-register-cta p { margin: 0; color: var(--text-dim); font-size: 13px; max-width: 480px; }

@media (max-width: 600px) {
  .g-main, .g-breadcrumbs { padding-left: 16px; padding-right: 16px; }
  .g-article h1, .g-index-hero h1 { font-size: 26px; }
}

/* Mobile hardening (2026-09-24): .g-main - flex-потомок экрана, без min-width: 0
   он раздувался под широкий виджет (карта нот ~728px) и вся статья обрезалась
   справа. Широкий виджет теперь скроллится внутри своей карточки. */
.g-main, .g-article, .g-breadcrumbs { min-width: 0; max-width: 100%; }
.g-widget { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.g-widget-inner { min-width: min-content; }
.g-byline { margin: -4px 0 12px; color: var(--text-dim); font-size: 13px; }
.g-course-outline { margin: 24px 0 12px; font-size: 18px; }
.g-course-list li.g-course-row { min-width: 0; }
.g-course-list li.g-course-row > a { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .g-widget { padding: 12px; }
  .g-widget:has(.g-widget-inner--chord) { margin: 6px 0; }
  .g-article h1, .g-article h2, .g-article h3 { overflow-wrap: anywhere; hyphens: auto; }
}

/* Стрелки "предыдущий/следующий урок" - показываются только на статьях, которые
   входят в курс (см. lessonNavHtml/COURSE_BY_SLUG), сквозной порядок по номеру
   урока, не по тиру. Пустая сторона (первый/последний написанный урок) - просто
   пустая ячейка grid, чтобы вторая ссылка не съезжала на её место. */
.g-lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0 0; }
.g-lesson-nav a {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--line); text-decoration: none; color: var(--text); min-width: 0;
}
.g-lesson-nav a:hover { border-color: var(--line-strong); background: var(--bg-raised); }
.g-lesson-nav a span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.g-lesson-nav-next { text-align: right; align-items: flex-end; }
@media (max-width: 600px) {
  .g-lesson-nav { grid-template-columns: 1fr; }
  .g-lesson-nav-next { text-align: left; align-items: flex-start; }
}

/* Интерактивный блок (гриф гаммы / диаграмма аккорда) внутри урока - гидрируется
   public/guides/lesson-widget.js (собран из src/lessonWidget/main.tsx). До
   гидратации виден только текст-заглушка (.g-widget-fallback); класс g-widget--ready
   ставится скриптом сразу после mount, тогда заглушка прячется.
   .practice-fretboard-* - буквальная копия классов из src/index.css (тот же гриф,
   что и на вкладке "Ноты" основного приложения), просто заведена здесь отдельно -
   у guides.css своя copy, как и у остальных элементов шапки/курса. */
.g-widget {
  margin: 20px 0; padding: 16px 20px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--bg-raised); display: flex; flex-direction: column; gap: 12px;
}
/* Когда в одной секции урока идёт подряд несколько аккордов (например, весь
   список "10 аккордов"), они переносятся в ряд карточками, а не тянутся одной
   длинной колонкой - :has() безопасен для 2026 года (Chrome/Firefox/Safari
   поддерживают давно), у гамм/слайдов эта раскладка не включается специально:
   там обычно один широкий виджет на секцию, ему нужна вся ширина. */
.g-widget:has(.g-widget-inner--chord) {
  display: inline-flex; vertical-align: top; margin: 8px; width: auto;
}
.g-video { position: relative; margin: 20px 0; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-raised); }
.g-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.g-widget-fallback { margin: 0; color: var(--text-dim); font-size: 13px; }
.g-widget--ready .g-widget-fallback { display: none; }
.g-widget-inner { display: flex; flex-direction: column; gap: 12px; }
.g-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.g-widget-title { font-size: 13px; font-weight: 700; color: var(--text); }
.g-widget-toggle { display: flex; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.g-widget-toggle button {
  border: none; background: none; color: var(--text-dim); font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.g-widget-toggle button[data-on='true'] { background: var(--accent); color: var(--on-accent); }
.g-widget-play {
  align-self: flex-start; border: 1px solid var(--accent-strong); border-radius: 999px; background: none;
  color: var(--accent-strong); font-size: 13px; font-weight: 600; padding: 8px 16px; cursor: pointer;
}
.g-widget-play:hover { background: var(--accent-strong); color: var(--on-accent); }
.g-widget-tab { display: block; width: 100%; height: auto; max-width: 100%; color: var(--text); }
.g-widget-tab-note { cursor: pointer; }
.g-widget-slide { display: block; width: 100%; max-width: 340px; height: auto; color: var(--text); }
/* Страница аккорда: диаграмма + бой/перебор и сочетание из четырёх аккордов */
.g-chordpage { gap: 18px; }
.g-chordpage-main { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.g-chordpage-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.g-chordpage-prog { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.g-chordpage-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.g-chordpage-chord { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text); font: inherit; cursor: pointer; min-width: 0; }
.g-chordpage-chord:hover { border-color: var(--line-strong); }
.g-chordpage-chord[data-active='true'] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.g-chordpage-chord svg { width: 100%; height: auto; max-width: 190px; }
.g-chordpage-degree { font-size: 11px; color: var(--text-dim); }
.g-chordpage-name { font-size: 13px; font-weight: 700; }
.g-chordpage-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.g-chordpage-hint { margin: 0; font-size: 12px; color: var(--text-dim); }
.g-chord-degrees { color: var(--text-dim); font-size: 12px; }
.g-chord-links { display: flex; flex-wrap: wrap; gap: 8px; }
.g-chord-links a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 700; }
.g-chord-links a:hover { border-color: #8b78e6; color: #8b78e6; }
@media (max-width: 560px) { .g-chordpage-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Рубрика «Жанры»: /{locale}/genres/ и /{locale}/genres/{slug}/. Цвет жанра - --genre. */
.g-genre-article h1 { position: relative; padding-left: 16px; }
.g-genre-article h1::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 5px; border-radius: 3px; background: var(--genre, var(--accent)); }
.g-genre-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.g-genre-chips span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--genre, var(--accent)) 45%, transparent); background: color-mix(in srgb, var(--genre, var(--accent)) 12%, transparent); color: var(--text); font-size: 12px; font-weight: 600; }
.g-genre-chordlinks { font-weight: 700; }
.g-genre-note { font-size: 13px; color: var(--text-dim); border-left: 3px solid var(--genre, var(--accent)); padding-left: 12px; }
.g-genre-article h3 { margin-top: 20px; }
.g-chordpage[data-main='false'] .g-chordpage-prog { border-top: 0; padding-top: 0; }
.g-genre-cards { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.g-genre-card { position: relative; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--genre) 26%, transparent), transparent 70%), var(--bg-raised); overflow: hidden; }
.g-genre-card > a, .g-genre-card > div { display: flex; flex-direction: column; gap: 8px; min-height: 170px; padding: 18px; color: var(--text); text-decoration: none; }
.g-genre-card h2 { margin: 0; font-size: 22px; }
.g-genre-card p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.45; }
.g-genre-card .g-genre-chips { margin-top: auto; }
.g-genre-card:hover { border-color: var(--genre); }
.g-genre-card--soon { opacity: .55; }
.g-genre-card--soon:hover { border-color: var(--line); }
/* Проигрыватель риффа (виджет kind:'riff') */
.g-riff { gap: 12px; min-width: 0; max-width: 100%; }
.g-widget:has(.g-riff) { min-width: 0; }
.g-riff-meta { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.g-riff-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; scrollbar-color: var(--line-strong) transparent; }
.g-riff-tab { display: block; color: var(--text); }
.g-riff-string { stroke: var(--line-strong); stroke-width: 1; }
.g-riff-string-name { fill: var(--text-dim); font: 700 11px/1 'Space Grotesk', system-ui, sans-serif; }
.g-riff-bar { stroke: var(--text-dim); stroke-width: 1; opacity: .6; }
.g-riff-mark { fill: var(--text-dim); font: 700 10px/1 'Space Grotesk', system-ui, sans-serif; }
.g-riff-slide { stroke: var(--text); stroke-width: 1.5; opacity: .7; }
.g-riff-note rect { fill: var(--bg-raised); transition: fill .08s ease; }
.g-riff-note text { fill: var(--text); font: 700 12px/1 'Space Grotesk', system-ui, sans-serif; }
.g-riff-note--active rect { fill: var(--genre, var(--accent)); }
.g-riff-note--active text { fill: #fff; }
.g-riff-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.g-riff-controls .g-widget-play { align-self: center; }
.g-riff-controls .g-widget-play:disabled { opacity: .5; cursor: default; }
.g-riff-toggle { border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--text-dim); font-size: 12px; font-weight: 600; padding: 6px 12px; cursor: pointer; }
.g-riff-toggle[data-on='true'] { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.g-riff-open { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--accent-strong); text-decoration: none; }
.g-riff-open:hover { text-decoration: underline; }
.g-riff-status { margin: 8px 0; }
/* Страницы-инструменты (тюнер, гитара онлайн): инструмент сразу под заголовком */
.g-tuner { gap: 12px; }
.g-tuner .tuner-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g-tuner .tuner-note b { font-size: 72px; line-height: 1; }
.g-tuner .tuner-cents { font-size: 24px; }
.g-tuner .tuner-string b { font-size: 17px; }
.g-tuner .tuner-status { font-size: 14px; }
.g-tuner select, .g-tuner .tuner-seg button, .g-tuner .tuner-ref { font-size: 13px; }
.g-tuner .tuner-message { font-size: 13px; }
@media (max-width: 560px) { .g-tuner .tuner-note b { font-size: 60px; } }
.g-vguitar { gap: 14px; }
.g-vguitar-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
.g-vguitar-neck { display: block; width: 100%; min-width: 640px; height: auto; color: var(--text); }
.g-vguitar-cell { cursor: pointer; touch-action: manipulation; outline: none; }
.g-vguitar-cell:focus-visible rect { stroke: var(--accent); stroke-width: 1.5; }
.g-vguitar-hit { fill: var(--accent); opacity: .9; }
.g-vguitar-name { fill: var(--text); font: 700 12px/1 'Space Grotesk', system-ui, sans-serif; }
.g-vguitar-fret { fill: var(--text-dim); font: 600 11px/1 'Space Grotesk', system-ui, sans-serif; }
.g-vguitar-chords { display: flex; flex-direction: column; gap: 10px; }
.g-vguitar-chord-row { display: flex; flex-wrap: wrap; gap: 8px; }
.g-vguitar-chord { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Интерактивные блоки статей: метроном, смена аккордов, конструктор риффа, микрофон, подбор, план */
.g-aw { min-width: 0; }
.g-aw-hint { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.g-aw-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.g-aw-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.g-aw-field--inline { flex-direction: row; align-items: center; gap: 8px; }
.g-aw-field b { color: var(--text); }
.g-aw-field input[type='range'] { width: 100%; min-width: 140px; accent-color: var(--accent); }
.g-aw-field select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; font: inherit; }
.g-aw-beats { display: flex; gap: 8px; }
.g-aw-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); background: transparent; transition: background .08s ease, transform .08s ease; }
.g-aw-dot[data-accent='true'] { border-color: var(--accent); }
.g-aw-dot[data-on='true'] { background: var(--accent); border-color: var(--accent); transform: scale(1.2); }
.g-aw-bpm { font-size: 14px; color: var(--text-dim); }
.g-aw-bpm b { font-size: 34px; color: var(--text); font-variant-numeric: tabular-nums; }
.g-aw-chords { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.g-aw-chord { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g-aw-chord small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.g-aw-chord:not([data-now]) { opacity: .6; }
.g-aw-counter { font-size: 13px; color: var(--text-dim); }
.g-aw-counter b { color: var(--text); }
.g-aw-grid { display: grid; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
.g-aw-col { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 10px; border: 1px solid transparent; }
.g-aw-col[data-active='true'] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.g-aw-cell { position: relative; border: 1px solid var(--line); background: var(--bg); color: var(--text-dim); border-radius: 8px; padding: 6px 0; font: 700 13px/1 'Space Grotesk', system-ui, sans-serif; cursor: pointer; }
.g-aw-cell small { position: absolute; right: 3px; bottom: 2px; font-size: 8px; opacity: .6; }
.g-aw-cell:hover { border-color: var(--accent); color: var(--text); }
.g-aw-cell[data-on='true'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.g-aw-tab { margin: 0; padding: 10px 12px; overflow-x: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; color: var(--text); font: 600 13px/1.35 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
.g-aw-error { margin: 0; color: #ff8a80; font-size: 13px; }
.g-aw-listen { display: flex; flex-direction: column; gap: 10px; }
.g-aw-level { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.g-aw-level span { display: block; height: 100%; background: var(--accent); transition: width .06s linear; }
.g-aw-note { font-size: 54px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.g-aw-meter { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #ef6c4d, #d6b84a 40%, #4fbf72 50%, #d6b84a 60%, #ef6c4d); opacity: .85; }
.g-aw-meter-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--text); }
.g-aw-meter-pin { position: absolute; top: -5px; width: 8px; height: 20px; margin-left: -4px; border-radius: 4px; background: var(--text); border: 2px solid var(--bg); transition: left .08s ease; }
.g-aw-status { font-size: 14px; font-weight: 700; }
.g-aw-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-dim); }
.g-aw-facts b { color: var(--text); }
.g-aw-checks { display: flex; flex-direction: column; gap: 8px; }
.g-aw-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.g-aw-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); }
.g-aw-result { display: flex; flex-direction: column; gap: 10px; }
.g-aw-bars { display: flex; flex-direction: column; gap: 8px; }
.g-aw-bar { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; align-items: center; gap: 10px; font-size: 13px; }
.g-aw-bar i { display: block; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.g-aw-bar em { display: block; height: 100%; background: var(--line-strong); border-radius: 5px; transition: width .2s ease; }
.g-aw-bar em[data-top='true'] { background: var(--accent); }
.g-strum { gap: 12px; }
.g-strum-names { display: flex; flex-wrap: wrap; gap: 8px; }
.g-strum-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
.g-strum-grid { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(30px, 1fr)); gap: 6px; min-width: 0; }
.g-strum-col { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); transition: border-color .08s ease, background .08s ease, transform .08s ease; }
.g-strum-col[data-strong='true'] { border-color: var(--line-strong); }
.g-strum-col[data-active='true'] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); transform: translateY(-2px); }
.g-strum-arrow { font: 800 28px/1 'Space Grotesk', system-ui, sans-serif; color: var(--text); }
.g-strum-arrow[data-kind='pass'] { opacity: .3; }
.g-strum-arrow[data-kind='rest'] { opacity: .25; }
.g-strum-col[data-active='true'] .g-strum-arrow[data-kind='hit'], .g-strum-col[data-active='true'] .g-strum-arrow[data-kind='short'] { color: var(--accent-strong); }
.g-strum-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.g-strum-dot[data-on='true'] { background: var(--accent); }
.g-strum-count { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.g-strum-col[data-strong='true'] .g-strum-count { color: var(--text); }
.g-aw-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.g-aw-plan li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.g-aw-plan-min { font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.g-aw-plan small { display: block; margin-top: 2px; color: var(--text-dim); font-size: 13px; line-height: 1.4; }
@media (max-width: 560px) {
  .g-aw-bar { grid-template-columns: 1fr; gap: 4px; }
  .g-aw-cell { padding: 8px 0; }
  .g-aw-note { font-size: 44px; }
}
@media (max-width: 560px) { .g-riff-open { margin-left: 0; width: 100%; } }
.practice-fretboard-card { display: grid; gap: 12px; overflow: hidden; }
.practice-fretboard-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--line-strong) transparent; }
.practice-fretboard { display: block; min-width: 720px; width: 100%; color: var(--text); }
.practice-fretboard-fret { fill: currentColor; font: 700 11px/1 'Space Grotesk', system-ui, sans-serif; opacity: .58; }
.practice-fretboard-note--active { filter: drop-shadow(0 0 7px var(--accent)); }
.practice-fretboard-note { cursor: pointer; }
.practice-fretboard-note:hover circle:last-of-type,
.practice-fretboard-note:focus-visible circle:last-of-type { opacity: 1; }
.practice-fretboard-note:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }