/* ═══════════════════════════════════════════════════════════════════ Note Trainer — Musician Studio theme. Paint and shape over app/base.css. Section accents follow the active game: Tempo (rhythm), Manico (fret), Orecchio (ear), Pagina (reading). ═══════════════════════════════════════════════════════════════════ */ :root { /* Surfaces */ --ms-bg: #F4F6F9; --ms-bg-header: #FFFFFF; --ms-card: #FFFFFF; --ms-card-subtle: #F8FAFC; --ms-line: #E2E8F0; --ms-line-2: #CBD5E1; /* Text */ --ms-text: #0F172A; --ms-muted: #64748B; --ms-faint: #94A3B8; /* Tempo = Electric Coral */ --ms-tempo: #E53935; --ms-tempo-dark: #C62828; --ms-tempo-light: #FFEBEE; /* Manico = Deep Cyan / Teal */ --ms-manico: #00ACC1; --ms-manico-dark: #00838F; --ms-manico-light: #E0F7FA; /* Orecchio = Deep Violet */ --ms-orecchio: #8E24AA; --ms-orecchio-dark: #6A1B9A; --ms-orecchio-light: #F3E5F5; /* Pagina = Ink Amber — the printed page, the fourth pillar */ --ms-pagina: #EA8C00; --ms-pagina-dark: #B45309; --ms-pagina-light: #FFF4E3; /* Semantic */ --ms-ok: #10B981; --ms-ok-dark: #059669; --ms-ok-soft: #D1FAE5; --ms-err: #EF4444; --ms-err-dark: #DC2626; --ms-err-soft: #FEE2E2; --ms-gold: #D97706; --ms-gold-soft: #FEF3C7; /* Active section accent (overridden per game mode) */ --ms-accent: var(--ms-manico); --ms-accent-dark: var(--ms-manico-dark); --ms-accent-soft: var(--ms-manico-light); --ms-edge: 4px; --ms-r-sm: 10px; --ms-r-md: 14px; --ms-r-lg: 20px; --ms-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04); --ms-shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.06); --ms-segment: #E2E8F0; --ms-segment-active: #FFFFFF; --ms-fretboard: #1E293B; --ms-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --ms-display: "Fredoka", "Plus Jakarta Sans", ui-rounded, sans-serif; /* Page chrome tokens (consumed by page.css) */ --nt-page-bg: var(--ms-bg); --nt-page-text: var(--ms-text); --nt-page-muted: var(--ms-muted); --nt-page-line: var(--ms-line); --nt-page-accent: var(--ms-accent); } /* Dark palette. app/theme.js stamps the attribute on from the document head, before the first paint — the stored choice, or the OS preference while the player has not made one. */ :root[data-theme="dark"] { --ms-bg: #0F172A; --ms-bg-header: #0B1120; --ms-card: #1E293B; --ms-card-subtle: #182234; --ms-line: #334155; --ms-line-2: #475569; --ms-text: #F8FAFC; --ms-muted: #94A3B8; --ms-faint: #64748B; --ms-tempo: #FF5252; --ms-tempo-dark: #D32F2F; --ms-tempo-light: rgba(255, 82, 82, 0.15); --ms-manico: #00E5FF; --ms-manico-dark: #00B8D4; --ms-manico-light: rgba(0, 229, 255, 0.15); --ms-orecchio: #B388FF; --ms-orecchio-dark: #7C4DFF; --ms-orecchio-light: rgba(179, 136, 255, 0.15); --ms-pagina: #FBBF24; --ms-pagina-dark: #D97706; --ms-pagina-light: rgba(251, 191, 36, 0.15); --ms-ok: #34D399; --ms-ok-dark: #10B981; --ms-ok-soft: rgba(16, 185, 129, 0.18); --ms-err: #F87171; --ms-err-dark: #EF4444; --ms-err-soft: rgba(239, 68, 68, 0.18); --ms-gold: #FFD700; --ms-gold-soft: rgba(217, 119, 6, 0.2); --ms-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25); --ms-shadow-subtle: 0 10px 30px rgba(0, 0, 0, 0.3); --ms-segment: #0F172A; --ms-segment-active: #1E293B; --ms-fretboard: #0B1120; } /* ── Page shell ──────────────────────────────────────────────────── */ html, body { height: 100%; overflow: hidden; background: var(--ms-bg); color: var(--ms-text); font-family: var(--ms-font); } body.nt-page-settings { overflow: auto; } /* Three groups: identity, what the app is listening to, where the player is up to. The middle one is the one a plugged-in guitarist checks first. */ .nt-topbar { height: 72px; background: var(--ms-bg-header); border-bottom: 2px solid var(--ms-line); backdrop-filter: none; gap: 16px; padding: 0 24px; justify-content: space-between; } .nt-topbar-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; } .nt-topbar-mark { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--ms-tempo), var(--ms-orecchio-dark)); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; } .nt-topbar-mark svg { width: 24px; height: 24px; } .nt-topbar-name { display: block; line-height: 1; } .nt-topbar-name b { display: block; font-family: var(--ms-display); font-size: 21px; font-weight: 600; color: var(--ms-text); } .nt-topbar-edition { display: inline-flex; gap: 5px; margin-top: 5px; padding: 2px 8px; border-radius: 6px; background: var(--ms-manico-light); color: var(--ms-manico); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .nt-topbar-edition :empty { display: none; } .nt-topbar-right { display: flex; align-items: center; gap: 10px; flex: none; } .nt-topbar-exit.nt-topbar-exit { min-height: 38px; padding: 0 14px; font-size: 13px; border-radius: 12px; } /* Icon-only chrome buttons (settings, and anything else that joins them). */ .nt-icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--ms-line); background: var(--ms-card-subtle); color: var(--ms-muted); display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; flex: none; } .nt-icon-btn:hover, .nt-icon-btn:focus-visible { border-color: var(--ms-line-2); color: var(--ms-text); } .nt-icon-btn .nt-ic { width: 19px; height: 19px; } .nt-theme-toggle { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ms-line); background: var(--ms-card-subtle); color: var(--ms-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .nt-theme-toggle:hover, .nt-theme-toggle:focus-visible { border-color: var(--ms-line-2); } .nt-lang-select { height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--ms-line); background: var(--ms-card-subtle); color: var(--ms-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .nt-lang-select:hover { border-color: var(--ms-line-2); color: var(--ms-text); } /* Narrow: the brand keeps its mark, the wording steps aside. */ @media (max-width: 1080px) { .nt-game-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .nt-topbar { padding: 0 14px; gap: 10px; } .nt-topbar-name { display: none; } .nt-topbar-right { gap: 6px; } .nt-theme-label { display: none; } .nt-theme-toggle { padding: 0 11px; } } .nt-boot { color: var(--ms-muted); font-weight: 600; } .nt-boot h1 { font-family: var(--ms-display); color: var(--ms-text); font-weight: 600; } .nt-back { color: var(--ms-muted); font-weight: 700; font-size: 13px; } .nt-back:hover, .nt-back:focus-visible { color: var(--ms-accent); } /* ── Token remap into base.css variables ─────────────────────────── */ .note-trainer-root { color-scheme: light; --nt-font: var(--ms-font); --nt-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --nt-bg-0: var(--ms-bg); --nt-bg-1: var(--ms-bg); --nt-surface-1: var(--ms-card); --nt-surface-2: var(--ms-card-subtle); --nt-surface-3: var(--ms-segment); --nt-inset: var(--ms-card-subtle); --nt-inset-deep: var(--ms-segment); --nt-line-1: var(--ms-line); --nt-line-2: var(--ms-line-2); --nt-text: var(--ms-text); --nt-dim: var(--ms-text); --nt-muted: var(--ms-muted); --nt-faint: var(--ms-faint); --nt-accent: var(--ms-accent); --nt-accent-edge: var(--ms-accent); --nt-accent-deep: var(--ms-accent-dark); --nt-accent-soft: var(--ms-accent-soft); --nt-ok: var(--ms-ok); --nt-ok-edge: var(--ms-ok-dark); --nt-err: var(--ms-err); --nt-err-edge: var(--ms-err-dark); --nt-hint: var(--ms-gold); --nt-hint-edge: var(--ms-gold); --nt-r-sm: var(--ms-r-sm); --nt-r-md: var(--ms-r-md); --nt-r-lg: var(--ms-r-lg); --nt-shadow-1: var(--ms-shadow-card); --nt-ring: 0 0 0 4px color-mix(in srgb, var(--ms-accent) 30%, transparent); background: var(--ms-bg); /* Same content width as the Musician Studio mockup. */ max-width: 1140px; width: 92%; margin: 0 auto; padding: 100px 0 28px; font-weight: 500; height: 100vh; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; } .note-trainer-root.is-playing, .note-trainer-root.is-ear, .note-trainer-root.is-rhythm { overflow-y: auto; } /* Section accent follows the selected game */ .note-trainer-root.is-game-rhythm { --ms-accent: var(--ms-tempo); --ms-accent-dark: var(--ms-tempo-dark); --ms-accent-soft: var(--ms-tempo-light); } .note-trainer-root.is-game-fret { --ms-accent: var(--ms-manico); --ms-accent-dark: var(--ms-manico-dark); --ms-accent-soft: var(--ms-manico-light); } .note-trainer-root.is-game-ear { --ms-accent: var(--ms-orecchio); --ms-accent-dark: var(--ms-orecchio-dark); --ms-accent-soft: var(--ms-orecchio-light); } .note-trainer-root.is-game-reading { --ms-accent: var(--ms-pagina); --ms-accent-dark: var(--ms-pagina-dark); --ms-accent-soft: var(--ms-pagina-light); } :root[data-theme="dark"] .note-trainer-root { color-scheme: dark; } /* ── Type ────────────────────────────────────────────────────────── */ .note-trainer-root h1 { font-family: var(--ms-display); font-weight: 600; letter-spacing: -0.01em; } .note-trainer-root h2 { font-family: var(--ms-display); font-weight: 600; } .nt-section-label { font-size: 12px; font-weight: 800; letter-spacing: 0.08px; text-transform: uppercase; color: var(--ms-faint); } .nt-section-label span { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ms-muted); } .nt-global-progress { background: var(--ms-card-subtle); border: 1px solid var(--ms-line); border-radius: 12px; font-weight: 800; font-size: 13px; padding: 6px 14px; } .nt-global-progress b { color: var(--ms-gold); } /* ── Buttons ─────────────────────────────────────────────────────── */ .nt-btn { border: none; border-bottom: var(--ms-edge) solid var(--ms-accent-dark); border-radius: 16px; background: var(--ms-accent); color: #fff; font-family: var(--ms-display); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; text-transform: none; min-height: 48px; padding: 0 22px; box-shadow: 0 4px 15px color-mix(in srgb, var(--ms-accent) 28%, transparent); transition: filter .1s ease, transform .05s ease, border-bottom-width .05s ease, box-shadow .1s ease; } .nt-btn:hover { filter: brightness(1.05); transform: translateY(-1px); } .nt-btn:active { transform: translateY(2px); border-bottom-width: 2px; box-shadow: none; filter: brightness(0.98); } .nt-btn.secondary { background: var(--ms-card); border: 2px solid var(--ms-line); border-bottom: var(--ms-edge) solid var(--ms-line-2); color: var(--ms-muted); font-family: var(--ms-font); font-weight: 700; box-shadow: none; } .nt-btn.secondary:hover { background: var(--ms-card-subtle); color: var(--ms-text); border-color: var(--ms-muted); filter: none; transform: none; } .nt-btn.secondary:active { border-bottom-width: 2px; transform: translateY(2px); } .nt-tempo-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ms-line); border-bottom: 3px solid rgba(0, 0, 0, 0.15); background: var(--ms-card); color: var(--ms-text); font-weight: 800; font-size: 18px; } .nt-tempo-btn:hover { background: var(--ms-card-subtle); border-color: var(--ms-line-2); } .nt-tempo-btn:active { transform: translateY(2px); border-bottom-width: 1px; } /* ── Panels and cards ────────────────────────────────────────────── */ .nt-panel { background: var(--ms-card); border: 2px solid var(--ms-line); border-radius: var(--ms-r-lg); padding: 24px; box-shadow: var(--ms-shadow-subtle); } .nt-setup .nt-panel { min-height: 0; } /* ── Setup workspace — mirror Musician Studio mockup proportions ─── */ .nt-setup { display: flex; flex-direction: column; gap: 28px; flex: 1 1 auto; min-height: 0; height: 100%; } .nt-mode-selector { display: flex; flex-direction: column; gap: 8px; flex: none; } .nt-game-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .nt-game-card { flex: none; min-width: 0; } .nt-workspace { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; flex: 1 1 auto; min-height: 0; } .nt-workspace-main { min-width: 0; min-height: 0; overflow: visible; display: block; } .nt-control-deck { display: flex; flex-direction: column; gap: 20px; position: static; min-height: 0; overflow: visible; } .nt-deck-card { display: flex; flex-direction: column; gap: 18px; padding: 24px !important; } .nt-deck-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ms-faint); } .nt-deck-title .nt-ic { width: 16px; height: 16px; } /* base.css shows the active panel with display:block, so the deck's own stacking has to come from the panel, not from the card around it. */ .note-trainer-root.is-game-fret .nt-deck-card #nt-deck-fret, .note-trainer-root.is-game-ear .nt-deck-card #nt-deck-ear, .note-trainer-root.is-game-reading .nt-deck-card #nt-deck-reading, .note-trainer-root.is-game-rhythm .nt-deck-card #nt-deck-rhythm { display: flex; flex-direction: column; gap: 18px; } .nt-deck-title .nt-deck-emoji { font-size: 16px; line-height: 1; } .nt-tip-box { display: none; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px dashed var(--ms-line); border-radius: var(--ms-r-md); background: var(--ms-card-subtle); font-size: 12px; font-weight: 500; color: var(--ms-muted); line-height: 1.4; } .note-trainer-root.is-game-fret #nt-tip-fret, .note-trainer-root.is-game-ear #nt-tip-ear, .note-trainer-root.is-game-reading #nt-tip-reading, .note-trainer-root.is-game-rhythm #nt-tip-rhythm { display: flex; } .nt-tip-box strong { color: var(--ms-text); font-weight: 700; } .nt-bpm-display { display: flex; justify-content: center; margin-bottom: 4px; } .nt-bpm-display .nt-tempo-val { align-items: baseline; gap: 6px; } .nt-bpm-display .nt-tempo-val b { font-family: var(--ms-display); font-size: 44px; font-weight: 600; color: var(--ms-tempo); line-height: 1; } .nt-bpm-display .nt-tempo-val span { font-size: 14px; font-weight: 800; color: var(--ms-muted); } .nt-bpm-slider { flex: 1; accent-color: var(--ms-tempo); cursor: pointer; height: 6px; } .nt-btn-rocket { font-size: 18px; line-height: 1; } .nt-panel-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; } .nt-panel-title h3 { margin: 0; font-family: var(--ms-display); font-size: 20px; font-weight: 600; color: var(--ms-text); } .nt-panel-subtitle { margin: 2px 0 0; font-size: 13px; font-weight: 500; color: var(--ms-muted); line-height: 1.4; } .nt-deck-grid { grid-template-columns: 1fr; gap: 14px; margin: 0; } .nt-deck-stack { display: flex; flex-direction: column; gap: 18px; margin: 0; } .nt-option-group { display: flex; flex-direction: column; gap: 8px; } .nt-option-label-row { display: flex; align-items: center; gap: 6px; position: relative; width: 100%; } .nt-option-label { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ms-muted); } /* A quiet "?" — the tip opens on hover or focus, so touch and keyboard both work. */ .nt-help { flex: none; width: 18px; height: 18px; padding: 0; border: 1px solid var(--ms-line); border-radius: 999px; background: var(--ms-card-subtle); color: var(--ms-muted); font-family: var(--ms-font); font-size: 11px; font-weight: 800; line-height: 1; cursor: help; } .nt-help:hover, .nt-help:focus-visible { color: var(--ms-text); border-color: var(--ms-accent); outline: none; } .nt-help-tip { position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; width: 100%; padding: 10px 12px; border: 1px solid var(--ms-line); border-radius: var(--ms-r-md); background: var(--ms-card); box-shadow: var(--ms-shadow-card); color: var(--ms-muted); font-size: 12px; font-weight: 500; line-height: 1.45; text-transform: none; letter-spacing: 0; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity .12s ease, transform .12s ease, visibility .12s ease; } .nt-help:hover + .nt-help-tip, .nt-help:focus-visible + .nt-help-tip, .nt-option-label-row:focus-within .nt-help-tip { opacity: 1; visibility: visible; transform: translateY(0); } .nt-option-hint { margin: 0; font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--ms-faint); } .nt-option-hint b { color: var(--ms-muted); font-weight: 700; } .nt-rhythm-controls.nt-deck-stack { display: flex; flex-direction: column; grid-template-columns: none; } .nt-bpm-picker { align-items: center; text-align: center; padding: 16px; gap: 12px; } .nt-bpm-picker .nt-tempo-row { justify-content: center; width: 100%; gap: 12px; } .nt-bpm-picker .nt-tempo-val { flex: 1; justify-content: center; } /* Hide the BPM value that lives inside the stepper row — the display above is enough. */ .nt-bpm-picker .nt-tempo-row .nt-tempo-val { display: none; } .nt-deck-card .nt-start-row { margin-top: 4px; flex-direction: column; align-items: stretch; } .nt-deck-card .nt-btn-play, .nt-deck-card #nt-start { width: 100%; min-height: 56px; padding: 16px; font-size: 20px; letter-spacing: 0.5px; text-transform: uppercase; } .nt-deck-card .nt-ear-diff { align-self: stretch; width: 100%; } .nt-deck-card .nt-toggle { max-width: none; } .nt-deck-card .nt-setup-hint { display: none; } /* The neck, drawn. A dark board against the light panel, the way a fretboard diagram is printed — and the one place in the setup that shows the instrument rather than describing it. */ .nt-fret-preview { margin-bottom: 8px; padding: 6px 10px 4px; border: 1px solid var(--ms-line); border-radius: var(--ms-r-md); background: var(--ms-fretboard); } /* No height cap: the board is a wide object and the box is wide, so it fills it. Capping the height letterboxed the drawing into the middle third of an otherwise empty panel. */ .nt-fret-preview .note-trainer-fb-svg { max-height: none; } .nt-fret-preview .note-trainer-fb-board { fill: transparent; stroke: transparent; } .nt-fret-preview .note-trainer-fb-strlabel { fill: var(--ms-manico); } .nt-fret-preview .note-trainer-fb-fretnum { fill: rgba(226, 232, 240, 0.45); } .nt-fret-preview .note-trainer-fb-string { stroke: rgba(226, 232, 240, 0.7); } .nt-fret-preview .note-trainer-fb-fret { stroke: rgba(226, 232, 240, 0.18); } .nt-fret-preview .note-trainer-fb-inlay { fill: rgba(226, 232, 240, 0.22); } .nt-fret-preview-caption { display: none; } /* Same density as the Musician Studio mockup. */ .nt-levels, .nt-ear-levels, .nt-reading-levels, .nt-rhythm-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .nt-level-card { flex: none; min-width: 0; } /* Note pills: only on the study you're about to play. */ #nt-panel-fret .nt-level-card:not(.active) .nt-lc-notes, #nt-panel-fret .nt-level-card:not(.active) .nt-lc-foot { display: none; } #nt-panel-fret .nt-level-card { padding: 14px 16px; } .nt-lc-mastery { display: none; } .nt-level-card.active .nt-lc-mastery { display: flex; } @media (max-width: 560px) { .nt-ear-levels { grid-template-columns: 1fr; } } @media (max-width: 1080px) { .nt-game-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .nt-game-picker { grid-template-columns: 1fr; } .nt-reading-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nt-workspace { grid-template-columns: 1fr; } .nt-control-deck { position: static; } .nt-rhythm-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .note-trainer-root { height: auto; overflow-y: auto; } } .nt-game-card, .nt-level-card { border: 2px solid var(--ms-line); border-bottom: 4px solid var(--ms-line); border-radius: var(--ms-r-md); background: var(--ms-card-subtle); box-shadow: none; transition: border-color .12s ease, background .12s ease, transform .05s ease; } .nt-game-card { border-bottom-width: 5px; border-radius: var(--ms-r-lg); background: var(--ms-card); box-shadow: var(--ms-shadow-card); } .nt-game-card::before, .nt-level-card::before { display: none; } .nt-game-card:hover, .nt-level-card:hover { background: var(--ms-card-subtle); border-color: var(--ms-faint); transform: translateY(-2px); } .nt-game-card:active, .nt-level-card:active { transform: translateY(2px); border-bottom-width: 2px; } /* Default active = current section accent */ .nt-game-card.active, .nt-level-card.active { border-color: var(--ms-accent); border-bottom-color: var(--ms-accent-dark); background: var(--ms-accent-soft); } /* Per-game picker colors (visible even when not the selected root mode) */ .nt-game-card[data-accent="rhythm"].active { border-color: var(--ms-tempo); border-bottom-color: var(--ms-tempo-dark); background: var(--ms-tempo-light); } .nt-game-card[data-accent="fret"].active { border-color: var(--ms-manico); border-bottom-color: var(--ms-manico-dark); background: var(--ms-manico-light); } .nt-game-card[data-accent="reading"].active { border-color: var(--ms-pagina); border-bottom-color: var(--ms-pagina-dark); background: var(--ms-pagina-light); } .nt-game-card[data-accent="ear"].active { border-color: var(--ms-orecchio); border-bottom-color: var(--ms-orecchio-dark); background: var(--ms-orecchio-light); } /* The three pillars read as one row of equal pills: icon, name, one line on what it trains, and how much of it is behind you. Anything longer is the card's tooltip — the panel underneath does the explaining. */ .nt-game-card { display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 18px 20px; text-align: left; } .nt-gc-body { min-width: 0; flex: 1; } .nt-gc-title, .nt-level-card .nt-lc-title { font-family: var(--ms-display); font-weight: 600; font-size: 18px; } .nt-gc-title { display: block; margin-bottom: 2px; } .nt-gc-tag { display: block; color: var(--ms-muted); font-weight: 500; font-size: 12px; line-height: 1.35; /* Three lines at most, and three lines' worth of room always reserved: the row is centred, so a card whose tag runs to three lines while its neighbours use two would sit its title 8px off theirs. Two lines was right when there were three pillars and each card was wider. */ min-height: calc(1.35em * 3); -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .nt-level-card .nt-lc-desc { color: var(--ms-muted); font-weight: 500; font-size: 12.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .nt-gc-mastery { flex: none; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--ms-line); background: var(--ms-card-subtle); color: var(--ms-muted); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; } .nt-game-card[data-accent="rhythm"].active .nt-gc-mastery { color: var(--ms-tempo); } .nt-game-card[data-accent="fret"].active .nt-gc-mastery { color: var(--ms-manico); } .nt-game-card[data-accent="ear"].active .nt-gc-mastery { color: var(--ms-orecchio); } .nt-game-card[data-accent="reading"].active .nt-gc-mastery { color: var(--ms-pagina-dark); } .nt-game-card.active .nt-gc-mastery { background: var(--ms-card); border-color: transparent; } .nt-gc-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--ms-card-subtle); border: 1px solid var(--ms-line); display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; flex: none; } .nt-game-card[data-accent="rhythm"] .nt-gc-icon { color: var(--ms-tempo); } .nt-game-card[data-accent="fret"] .nt-gc-icon { color: var(--ms-manico); } .nt-game-card[data-accent="ear"] .nt-gc-icon { color: var(--ms-orecchio); } .nt-game-card[data-accent="reading"] .nt-gc-icon { color: var(--ms-pagina); } .nt-game-card.active .nt-gc-icon { background: var(--ms-card); border-color: transparent; } .nt-game-card[data-accent="rhythm"].active .nt-gc-icon { color: var(--ms-tempo); } .nt-game-card[data-accent="fret"].active .nt-gc-icon { color: var(--ms-manico); } .nt-game-card[data-accent="ear"].active .nt-gc-icon { color: var(--ms-orecchio); } .nt-game-card[data-accent="reading"].active .nt-gc-icon { color: var(--ms-pagina); } .nt-gc-icon .nt-ic { width: 24px; height: 24px; } .nt-lc-chip { background: var(--ms-card); color: var(--ms-muted); border: 1px solid var(--ms-line); border-radius: 999px; padding: 2px 9px; font-weight: 700; font-size: 11px; } .nt-level-card.active .nt-lc-chip { background: color-mix(in srgb, var(--ms-card) 75%, transparent); color: var(--ms-accent-dark); border-color: transparent; } /* Number on its own line, then the name, then one quiet line of detail — three short beats instead of a paragraph of chips. */ .nt-ear-levels .nt-level-card, .nt-reading-levels .nt-level-card, .nt-rhythm-levels .nt-level-card, #nt-levels .nt-level-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; background: var(--ms-card-subtle); } .nt-ear-levels .nt-level-card.active, .nt-reading-levels .nt-level-card.active, .nt-rhythm-levels .nt-level-card.active, #nt-levels .nt-level-card.active { background: var(--ms-accent-soft); } .nt-ear-levels .nt-lc-num, .nt-reading-levels .nt-lc-num, .nt-rhythm-levels .nt-lc-num { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--ms-card); color: var(--ms-muted); border: 1px solid var(--ms-line); border-radius: 999px; font-size: 12px; font-weight: 800; } .nt-ear-levels .nt-level-card.active .nt-lc-num, .nt-reading-levels .nt-level-card.active .nt-lc-num, .nt-rhythm-levels .nt-level-card.active .nt-lc-num { background: var(--ms-card); border-color: var(--ms-line); color: var(--ms-muted); } .nt-ear-levels .nt-lc-title, .nt-reading-levels .nt-lc-title, .nt-rhythm-levels .nt-lc-title, #nt-levels .nt-lc-title { font-family: var(--ms-font); font-size: 14px; font-weight: 700; line-height: 1.25; } .nt-lc-meta { color: var(--ms-muted); font-size: 11px; font-weight: 600; } /* Mockup has no drill blurb under the grid — tip lives in the deck. */ #nt-panel-rhythm #nt-rhythm-tip, #nt-panel-rhythm #nt-rhythm-warn, #nt-panel-ear #nt-ear-intro { display: none; } /* Input delay is a Time setting and lives in the Time deck. It was hidden here for a while on the promise of a top-bar home that was never built, which left a player who had calibrated once with no way to do it again. */ #nt-latency-row { border-top: 2px solid var(--ms-line); padding-top: 16px; } #nt-latency-row .nt-tempo-head { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ms-muted); margin-bottom: 8px; } .nt-lat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #nt-latency-row .nt-tempo-val { display: flex; align-items: baseline; gap: 5px; } #nt-latency-row .nt-tempo-val b { font-family: var(--ms-display); font-size: 24px; font-weight: 600; } #nt-latency-row.is-calibrated .nt-tempo-val b { color: var(--ms-ok-dark); } #nt-latency-row:not(.is-calibrated) .nt-tempo-val b { color: var(--ms-gold); } /* The BPM note stays out of the deck; the latency one is the whole point of its row — it says whether the figure was measured or merely guessed. */ .nt-deck-card .nt-ctl .nt-tempo-note { display: none; } .nt-deck-card #nt-latency-row .nt-tempo-note { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.45; } .nt-deck-stack .nt-option-group .nt-option-hint { display: block; } /* One meta line per study: what it is on the left, what you scored on the right — so a grid of ten reads down a single column of numbers. `auto` rather than 0 pushes it to the card's floor, so a title that wraps to two lines does not drop its neighbours' meta rows out of line. */ .nt-ear-levels .nt-lc-foot, .nt-reading-levels .nt-lc-foot, .nt-rhythm-levels .nt-lc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: auto; padding-top: 8px; } .nt-lc-best { color: var(--ms-gold); font-weight: 800; font-size: 11.5px; } .nt-lc-best .nt-ic { color: var(--ms-gold); } .nt-lc-best.is-empty { color: var(--ms-faint); font-weight: 600; } .nt-lc-bar { height: 12px; border-radius: 999px; background: var(--ms-segment); border: none; } .nt-lc-bar > i { background: var(--ms-accent); border-radius: 999px; } .nt-lc-pct { font-weight: 800; color: var(--ms-muted); } /* ── Inputs ──────────────────────────────────────────────────────── */ .note-trainer-root select { min-height: 46px; border: 1px solid var(--ms-line); border-radius: var(--ms-r-sm); background: var(--ms-card-subtle); color: var(--ms-text); font-weight: 700; font-size: 13px; padding: 0 14px; } .note-trainer-root select:hover { border-color: var(--ms-accent); } .nt-field > span { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ms-muted); } .nt-ear-diff { background: var(--ms-segment); border: 1px solid var(--ms-line); border-radius: 12px; padding: 4px; } .nt-ear-diff .nt-seg { border-radius: 8px; font-weight: 700; font-size: 11px; color: var(--ms-muted); min-height: 0; padding: 8px 6px; } .nt-ear-diff .nt-seg:hover { color: var(--ms-text); background: transparent; } .nt-ear-diff .nt-seg.active { background: var(--ms-segment-active); color: var(--ms-text); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); border: 1px solid var(--ms-line); } /* ── Rhythm controls / BPM ───────────────────────────────────────── */ .nt-ctl { background: var(--ms-card-subtle); border: 1px solid var(--ms-line); border-radius: var(--ms-r-md); padding: 16px; } .nt-tempo-head { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: var(--ms-muted); } .nt-tempo-val b { font-family: var(--ms-display); font-size: 36px; font-weight: 600; color: var(--ms-tempo); line-height: 1; } .nt-tempo-val span { font-size: 13px; font-weight: 800; color: var(--ms-muted); } .nt-tempo-note { color: var(--ms-muted); font-weight: 600; } .nt-tempo-note b { color: var(--ms-ok-dark); } /* ── HUD ─────────────────────────────────────────────────────────── */ .nt-prompt .nt-prompt-lead { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ms-muted); } .nt-prompt .nt-note { font-family: var(--ms-display); font-size: 42px; font-weight: 600; letter-spacing: -0.02em; } .nt-stat .nt-stat-val { font-family: var(--ms-display); font-size: 24px; font-weight: 600; } .nt-stat .nt-stat-lbl { font-weight: 800; font-size: 10.5px; letter-spacing: 0.06em; color: var(--ms-muted); } .nt-stat.combo .nt-stat-val { color: var(--ms-gold); } .nt-detected { background: var(--ms-card-subtle); border-radius: 14px; padding: 8px 12px; font-weight: 700; color: var(--ms-muted); } .nt-feedback { font-weight: 800; font-size: 15px; border-radius: 16px; padding: 0 4px; min-height: 30px; } .nt-feedback.ok { color: var(--ms-ok-dark); } .nt-feedback.err { color: var(--ms-err-dark); } .nt-feedback.hint { color: var(--ms-gold); } /* ── Ear training ────────────────────────────────────────────────── */ .nt-choice { border: 2px solid var(--ms-line); border-bottom: var(--ms-edge) solid var(--ms-line); border-radius: 16px; background: var(--ms-card); color: var(--ms-text); font-weight: 800; min-width: 84px; min-height: 64px; font-size: 20px; transition: transform .05s ease, background .12s ease, border-color .12s ease; } .nt-ear-choices { gap: 12px; } .nt-choice:hover:not(:disabled) { background: var(--ms-card-subtle); } .nt-choice:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; } .nt-choice.correct { background: var(--ms-ok-soft); border-color: var(--ms-ok); color: var(--ms-ok-dark); } .nt-choice.wrong { background: var(--ms-err-soft); border-color: var(--ms-err); color: var(--ms-err-dark); } .nt-ear-ask { font-weight: 800; font-size: 17px; color: var(--ms-text); } .nt-viz-core { background: var(--ms-accent); color: #fff; border-color: var(--ms-accent-dark); } .nt-th-head, .nt-em-head { font-weight: 800; color: var(--ms-text); } .nt-th-abbr, .nt-em-abbr { font-weight: 800; color: var(--ms-accent-dark); } .nt-em-fill.is-strong { background: var(--ms-ok); } .nt-em-fill.is-mid { background: var(--ms-gold); } .nt-em-fill.is-weak { background: var(--ms-err); } /* ── Toggle ──────────────────────────────────────────────────────── */ .nt-toggle-track { background: var(--ms-segment); border-color: var(--ms-line-2); } .nt-toggle input:checked + .nt-toggle-track { background: var(--ms-accent); border-color: var(--ms-accent-dark); } .nt-toggle input:checked + .nt-toggle-track .nt-toggle-thumb { background: #fff; } .nt-toggle-title { font-weight: 800; color: var(--ms-text); } .nt-toggle-desc { color: var(--ms-muted); font-weight: 500; } /* ── Drill / fretboard mini ──────────────────────────────────────── */ .nt-drill { background: var(--ms-fretboard); border: 1px solid var(--ms-line); border-radius: var(--ms-r-md); color: #F8FAFC; } .nt-drill-head .t { color: var(--ms-faint); } .nt-fb-name { color: var(--ms-manico); } .nt-fb-row.on .nt-fb-name { color: #fff; } .nt-fb-row.on .nt-fb-wire { background: var(--ms-manico); } .nt-fb-row.on .nt-fb-dot { background: var(--ms-manico); border-color: #fff; } /* ── Results / calibration overlays ──────────────────────────────── */ .nt-results-card, .nt-calib-card { border-radius: 22px; border: 2px solid var(--ms-line); background: var(--ms-card); box-shadow: var(--ms-shadow-subtle); } .nt-results-card h2 { font-size: 24px; } .nt-medal { font-size: 56px; } .nt-results-msg { color: var(--ms-muted); font-weight: 700; } .nt-re-verdict, .nt-re-advice, .nt-re-diag { border-radius: 16px; border: 2px solid var(--ms-line); } .nt-re-advice-h { font-weight: 800; color: var(--ms-text); } .nt-cs { border-radius: 999px; font-weight: 800; } .nt-cs.is-now { background: var(--ms-accent); color: #fff; border-color: var(--ms-accent); } .nt-cs.is-done { color: var(--ms-ok-dark); border-color: var(--ms-ok); } .nt-calib-verdict { border-radius: 999px; font-weight: 800; } /* ── Toasts ──────────────────────────────────────────────────────── */ .nt-toast { border-radius: 18px; border: 2px solid var(--ms-accent); border-bottom-width: var(--ms-edge); background: var(--ms-card); font-weight: 700; box-shadow: var(--ms-shadow-subtle); } /* ── Warnings ────────────────────────────────────────────────────── */ .nt-warn { border-radius: 16px; border: 2px solid var(--ms-gold); background: var(--ms-gold-soft); color: var(--ms-text); font-weight: 600; } .nt-setup-hint { font-weight: 700; color: var(--ms-muted); } .nt-setup-hint.is-warn { color: var(--ms-gold); } /* ── Settings page ───────────────────────────────────────────────── */ .nt-settings-page .note-trainer-settings { --nts-text: var(--ms-text); --nts-dim: var(--ms-text); --nts-muted: var(--ms-muted); --nts-inset: var(--ms-card); --nts-line: var(--ms-line); --nts-accent: var(--ms-accent); --nts-ok: var(--ms-ok); font-family: var(--ms-font); font-size: 14px; font-weight: 600; } .nt-settings-page .note-trainer-settings .nts-card { background: var(--ms-card); border: 2px solid var(--ms-line); border-radius: var(--ms-r-lg); box-shadow: var(--ms-shadow-card); } .nt-settings-page .note-trainer-settings h3 { font-family: var(--ms-display); font-weight: 600; font-size: 17px; } .nt-settings-page .note-trainer-settings select { min-height: 46px; border: 1px solid var(--ms-line); border-radius: var(--ms-r-sm); background: var(--ms-card-subtle); color: var(--ms-text); font-weight: 700; } .nt-settings-page .note-trainer-settings button { border-radius: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; min-height: 46px; } .nt-settings-page .note-trainer-settings .nts-danger { border: none; border-bottom: var(--ms-edge) solid var(--ms-err-dark); background: var(--ms-err); color: #fff; } .nt-settings-page .note-trainer-settings .nts-danger:hover { filter: brightness(1.06); background: var(--ms-err); } .nt-settings-page .note-trainer-settings .nts-danger:active { transform: translateY(2px); border-bottom-width: 2px; } .nt-settings-page .note-trainer-settings .nts-status { font-weight: 800; color: var(--ms-ok-dark); } @media (prefers-reduced-motion: reduce) { .nt-btn, .nt-choice, .nt-game-card, .nt-level-card, .nt-tempo-btn { transition: none; } .nt-btn:active, .nt-choice:active, .nt-tempo-btn:active { transform: none; } .nt-input-dot { animation: none; } } /* ── Input bar ───────────────────────────────────────────────────── */ .nt-input { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border: 1px solid var(--ms-line); border-radius: 30px; background: var(--ms-card-subtle); } /* Signal dot: grey until the device is open, green and breathing once it is, the warning colour when something needs the player's attention. */ .nt-input-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ms-faint); flex: none; } .nt-input.is-live .nt-input-dot, .nt-input.is-ok .nt-input-dot { background: var(--ms-ok); box-shadow: 0 0 8px var(--ms-ok); animation: nt-signal 2s infinite; } .nt-input.is-warn .nt-input-dot { background: var(--ms-gold); box-shadow: 0 0 8px var(--ms-gold); } .nt-input.is-err .nt-input-dot { background: var(--ms-err); box-shadow: 0 0 8px var(--ms-err); } @keyframes nt-signal { 0%, 100% { transform: scale(0.95); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } } .nt-input-select.nt-input-select { width: auto; max-width: 250px; min-height: 32px; padding: 0 8px; border: none; border-radius: 999px; background: transparent; color: var(--ms-text); font: inherit; font-size: 13px; font-weight: 600; } .nt-meter { width: 68px; height: 10px; border-radius: 999px; background: var(--ms-segment); overflow: hidden; flex: 0 0 auto; } .nt-meter > i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--ms-ok); transition: width .06s linear; } .nt-meter.is-hot > i { background: var(--ms-ok); box-shadow: 0 0 8px var(--ms-ok); } .nt-input-status { font-size: 12px; font-weight: 700; color: var(--ms-muted); white-space: nowrap; } .nt-input-status.is-ok { color: var(--ms-ok-dark); } .nt-input-status.is-warn { color: var(--ms-gold); } .nt-input-status.is-err { color: var(--ms-err-dark); } .nt-input-monitor { min-width: 34px; min-height: 34px; border: 1px solid var(--ms-line); border-radius: 12px; background: var(--ms-card); font-size: 15px; line-height: 1; cursor: pointer; } .nt-input-monitor:hover { background: var(--ms-card-subtle); } .nt-input-monitor.is-on { background: var(--ms-ok); border-color: var(--ms-ok-dark); color: #fff; } /* The hint floats — it must not shove the whole room down and force scroll. */ body.has-input-hint .note-trainer-root { padding-top: 100px; } /* Anchored to the foot of the window, not under the top bar: at the top it covered — and blocked — half the game picker. */ .nt-input-hint { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 20; width: min(560px, calc(100vw - 32px)); display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 2px solid var(--ms-accent); border-bottom-width: var(--ms-edge); border-radius: 18px; background: var(--ms-accent-soft); color: var(--ms-text); box-shadow: var(--ms-shadow-subtle); } .nt-input-hint.is-ok { border-color: var(--ms-ok-dark); } .nt-ih-body b { font-size: 15px; font-weight: 800; } .nt-ih-body p { margin: 4px 0 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ms-text); } .nt-ih-actions { margin-left: auto; display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; } .nt-ih-go { min-height: 42px; padding: 0 18px; border: none; border-bottom: var(--ms-edge) solid var(--ms-accent-dark); border-radius: 14px; background: var(--ms-accent); color: #fff; font: inherit; font-family: var(--ms-display); font-weight: 600; font-size: 14px; cursor: pointer; } .nt-ih-go:active { transform: translateY(2px); border-bottom-width: 2px; } .nt-ih-go:disabled { opacity: 0.6; cursor: default; } .nt-ih-skip { border: none; background: none; color: var(--ms-muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .nt-ih-skip:hover { color: var(--ms-text); } @media (max-width: 820px) { /* The bar wraps to two rows here — 124px measured — so the room below it has to reserve that much, or the first cards hide under the bar. */ .nt-topbar { height: auto; min-height: 124px; flex-wrap: wrap; padding: 10px 14px; } .note-trainer-root, body.has-input-hint .note-trainer-root { padding-top: 152px; } .nt-input { order: 3; width: 100%; } .nt-input-select.nt-input-select { flex: 1; max-width: none; } .nt-input-hint { flex-direction: column; align-items: flex-start; } .nt-ih-actions { margin-left: 0; flex-direction: row; align-items: center; } } .nt-input-volume { width: 0; opacity: 0; padding: 0; margin: 0; transition: width .15s ease, opacity .15s ease; accent-color: var(--ms-accent); cursor: pointer; } .nt-input-volume.is-on { width: 78px; opacity: 1; } /* Same reason as the hint above: at the top of the window it sat on the game picker. It stacks just above the hint when both are up. */ .nt-input-tip { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 19; max-width: min(520px, calc(100vw - 32px)); padding: 10px 16px; border: 1px solid var(--ms-line); border-radius: 999px; background: var(--ms-card); color: var(--ms-muted); font-size: 13px; font-weight: 700; text-align: center; cursor: pointer; box-shadow: var(--ms-shadow-card); } .nt-input-tip:hover { color: var(--ms-text); } #nt-latency-row:not(.is-calibrated) { border: 2px solid var(--ms-gold); border-radius: 16px; padding: 10px; background: var(--ms-gold-soft); } #nt-latency-row:not(.is-calibrated) #nt-calib-start { background: var(--ms-accent); border: none; border-bottom: var(--ms-edge) solid var(--ms-accent-dark); color: #fff; } #nt-latency-row:not(.is-calibrated) #nt-calib-start:hover { filter: brightness(1.05); } /* ── Results card ────────────────────────────────────────────────── */ .nt-results-card { width: min(560px, 94vw); max-height: 88vh; overflow-y: auto; padding: 28px 26px 24px; } .nt-results-card h2 { margin: 0 0 6px; font-size: 26px; } .nt-medal { font-size: 60px; line-height: 1; margin-bottom: 4px; } .nt-results-stats .nt-stat { flex: 1 1 0; min-width: 0; } .nt-results-stats { gap: 12px; margin: 18px 0 14px; padding: 16px 0; border-top: 2px solid var(--ms-line); border-bottom: 2px solid var(--ms-line); } .nt-results-stats .nt-stat-val { font-size: 28px; } .nt-results-msg { font-size: 15px; font-weight: 700; color: var(--ms-text); line-height: 1.5; } .nt-re-verdict { margin-top: 18px; padding: 14px 16px; border: none; border-radius: 16px; background: var(--ms-card-subtle); font-size: 14.5px; font-weight: 600; line-height: 1.6; color: var(--ms-text); } .nt-re-verdict.is-hintish { background: var(--ms-gold-soft); border: 2px solid var(--ms-gold); } .nt-re-advice { margin-top: 18px; padding-top: 0; border-top: none; border: none; background: none; padding: 0; } .nt-re-advice-h { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--ms-muted); margin-bottom: 10px; } .nt-re-tip { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 10px; border: 2px solid var(--ms-line); border-radius: 16px; font-size: 14px; font-weight: 600; line-height: 1.55; text-align: left; } .nt-re-tip .i { font-size: 20px; line-height: 1.2; flex: 0 0 auto; } .nt-re-diag { margin-top: 16px; border: none; border-top: 2px solid var(--ms-line); border-radius: 0; padding-top: 14px; } /* When the extra block opens with a foldout, the block's own rule and the foldout's are the same rule drawn twice with a gap between them. */ #nt-res-extra > .nt-re-diag:first-child { margin-top: 0; border-top: none; padding-top: 0; } .nt-re-diag > summary { font-size: 13px; font-weight: 800; color: var(--ms-muted); } .nt-re-diag > summary:hover { color: var(--ms-text); } .nt-re-diag-body { padding-top: 12px; display: flex; flex-direction: column; gap: 10px; } .nt-re-row { font-size: 13.5px; font-weight: 600; } .nt-re-row span { color: var(--ms-muted); } .nt-re-row b { font-weight: 800; color: var(--ms-text); } .nt-results-actions { margin-top: 22px; gap: 12px; } /* Fretboard SVG marks pick up section accent via --nt-accent already */ .note-trainer-fb-board { fill: #1E293B; stroke: #334155; } .note-trainer-fb-mark.is-detected circle { fill: color-mix(in srgb, var(--ms-accent) 30%, transparent); stroke: var(--ms-accent); } /* ═══════════════════════════════════════════════════════════════════ La Pagina — reading the staff. The staff is drawn by utils/staff.js as bare geometry with classes on it; every colour it has is here, which is what makes it follow the light and dark palettes like everything else. ═══════════════════════════════════════════════════════════════════ */ .note-trainer-staff-svg { display: block; height: 168px; width: auto; max-width: 100%; margin: 0 auto; overflow: visible; } /* A phrase to be read in time uses the whole panel instead. */ .note-trainer-staff-svg.is-wide { width: 100%; height: auto; } /* Staff lines are ink, not furniture: they are the ruler every note is read against, so they are the text colour thinned down rather than a border grey that disappears next to a black notehead. */ .note-trainer-staff-line, .note-trainer-staff-ledger { stroke: color-mix(in srgb, var(--ms-text) 66%, transparent); stroke-width: 1.7; stroke-linecap: round; } .note-trainer-staff-bar { stroke: color-mix(in srgb, var(--ms-text) 66%, transparent); stroke-width: 2.4; } .note-trainer-staff-clef path { fill: none; stroke: var(--ms-text); stroke-linecap: round; stroke-linejoin: round; } .note-trainer-staff-dot { fill: var(--ms-text); } .note-trainer-staff-head { fill: var(--ms-text); } .note-trainer-staff-head.is-hollow { fill: var(--ms-card); stroke: var(--ms-text); stroke-width: 2.8; } .note-trainer-staff-stem, .note-trainer-staff-flag { stroke: var(--ms-text); stroke-width: 2.4; stroke-linecap: round; fill: none; } .note-trainer-staff-acc path { fill: none; stroke: var(--ms-text); stroke-width: 2.3; stroke-linecap: round; } .note-trainer-staff-timesig { fill: var(--ms-text); font-family: var(--ms-display); font-size: 27px; font-weight: 600; text-anchor: middle; } .note-trainer-staff-label { fill: var(--ms-muted); font-family: var(--ms-font); font-size: 15px; font-weight: 800; text-anchor: middle; } .note-trainer-staff-playhead { stroke: var(--ms-pagina); stroke-width: 3; stroke-linecap: round; } /* Verdicts. The notehead is what changes colour — the note that was read, not the panel around it, because that is what the player was looking at. */ .note-trainer-staff-note { transition: opacity .16s ease; } .note-trainer-staff-note.is-ok .note-trainer-staff-head { fill: var(--ms-ok); } .note-trainer-staff-note.is-ok .note-trainer-staff-head.is-hollow { fill: var(--ms-card); stroke: var(--ms-ok); } .note-trainer-staff-note.is-ok .note-trainer-staff-stem, .note-trainer-staff-note.is-ok .note-trainer-staff-flag { stroke: var(--ms-ok); } .note-trainer-staff-note.is-err .note-trainer-staff-head { fill: var(--ms-err); } .note-trainer-staff-note.is-err .note-trainer-staff-head.is-hollow { fill: var(--ms-card); stroke: var(--ms-err); } .note-trainer-staff-note.is-err .note-trainer-staff-stem, .note-trainer-staff-note.is-err .note-trainer-staff-flag { stroke: var(--ms-err); } .note-trainer-staff-note.is-active .note-trainer-staff-head { fill: var(--ms-pagina); } .note-trainer-staff-note.is-active .note-trainer-staff-stem, .note-trainer-staff-note.is-active .note-trainer-staff-flag { stroke: var(--ms-pagina); } /* The answer the player did not give, shown where it would have been. */ .note-trainer-staff-note.is-ghost { opacity: 0.42; } .note-trainer-staff-note.is-ghost .note-trainer-staff-head { fill: var(--ms-ok); } .note-trainer-staff-note.is-ghost .note-trainer-staff-stem { stroke: var(--ms-ok); } /* An anchor offered as a hint is not an answer, so it is not green. */ .note-trainer-staff-note.is-ghost.is-anchor { opacity: 0.6; } .note-trainer-staff-note.is-ghost.is-anchor .note-trainer-staff-head { fill: var(--ms-pagina); } .note-trainer-staff-note.is-ghost.is-anchor .note-trainer-staff-stem { stroke: var(--ms-pagina); } .note-trainer-staff-note.is-ghost.is-anchor .note-trainer-staff-label { fill: var(--ms-pagina-dark); } .note-trainer-staff-note.is-ok .note-trainer-staff-head, .note-trainer-staff-note.is-err .note-trainer-staff-head { animation: nt-note-pop .3s var(--nt-ease, cubic-bezier(.2,.8,.3,1)); transform-box: fill-box; transform-origin: center; } @keyframes nt-note-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } } /* ── Setup panel ──────────────────────────────────────────────────── */ .nt-read-preview { background: var(--ms-card-subtle); border: 2px solid var(--ms-line); border-radius: var(--ms-r-md); padding: 8px 12px 10px; } .nt-read-preview .note-trainer-staff-svg { height: 118px; } .nt-read-preview-caption { font-size: 11.5px; font-weight: 600; color: var(--ms-muted); } /* The deck's live hint highlights the line the clef names, so the emphasis belongs to this section's accent — the shared rule paints it success-green, which would read as a verdict. */ #nt-reading-clef-note b { color: var(--ms-pagina-dark); } /* ── Play view ────────────────────────────────────────────────────── */ .nt-read-ask { font-family: var(--ms-display); font-size: 19px; font-weight: 600; color: var(--ms-text); } .nt-read-stage { gap: 18px; } /* The frame hugs the staff instead of running the width of the panel: a music example is an object on the page, not a banner across it. */ .nt-read-staff { align-self: center; width: auto; max-width: 100%; padding: 10px 18px; border-radius: var(--ms-r-lg); background: var(--ms-card-subtle); border: 2px solid var(--ms-line); } .note-trainer-root.is-read-sight .nt-read-staff { align-self: stretch; width: 100%; } .nt-read-heard { font-size: 13px; font-weight: 600; color: var(--ms-muted); } .nt-read-heard b { color: var(--ms-text); font-family: var(--nt-mono); } .nt-read-choices { gap: 12px; } /* Higher / lower and step / skip are two big targets, not a keypad: the answer is a shape, and the button should look like one. */ .nt-read-choices .nt-choice.is-contour { /* Words, not note names — the mono face is reserved for pitches. */ font-family: var(--ms-font); font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 128px; padding: 14px 20px; } .nt-read-choices .nt-ch-glyph { font-size: 22px; line-height: 1; color: var(--ms-pagina-dark); font-weight: 700; } .nt-read-choices .nt-choice.correct .nt-ch-glyph { color: var(--ms-ok-dark); } .nt-read-choices .nt-choice.wrong .nt-ch-glyph { color: var(--ms-err-dark); } .nt-read-neck { border-radius: var(--ms-r-md); overflow: hidden; animation: nt-fade-in var(--nt-dur-base, .18s) ease; } /* ── The explanation cards ────────────────────────────────────────── */ .nt-lesson { gap: 18px; padding: 30px 24px; } .nt-lesson-title { font-family: var(--ms-display); font-size: 23px; font-weight: 600; color: var(--ms-text); letter-spacing: -0.01em; } .nt-lesson-body { font-size: 14.5px; font-weight: 500; color: var(--ms-muted); } /* The figure is the argument; the words are the caption. So it is framed and given room, the same frame a question gets. */ .nt-lesson-figure { padding: 12px 20px; border-radius: var(--ms-r-lg); background: var(--ms-card-subtle); border: 2px solid var(--ms-line); align-self: center; width: auto; max-width: 100%; } .nt-lesson-figure .note-trainer-staff-svg { height: 150px; } .nt-lesson-figure .note-trainer-staff-svg.is-wide { width: 100%; height: auto; } .nt-lesson-dots .nt-ldot { width: 8px; height: 8px; border-radius: 99px; background: var(--ms-segment); transition: background .16s ease, width .16s ease; } .nt-lesson-dots .nt-ldot.is-done { background: var(--ms-pagina-dark); } .nt-lesson-dots .nt-ldot.is-now { background: var(--ms-pagina); width: 22px; } .nt-lesson-actions .nt-btn { min-width: 150px; } /* The way out is always on screen and never the loud one: a player who knows this already should not have to hunt for the exit, or feel nudged to skip. */ .nt-lesson-actions .nt-btn.secondary { font-weight: 600; } /* Back sits apart from the pair that moves you forward. */ .nt-lesson-actions .nt-btn.nt-lesson-back { min-width: 0; padding: 0 16px; } .nt-option-label-sub { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ms-faint); margin-left: 6px; } .nt-read-after { margin-top: 2px; } .nt-read-after .nt-btn { min-width: 152px; } /* The hint. Available, never loud — a player who does not need it should not be invited to use it, and one who does should not have to look. */ .nt-read-hint { min-height: 34px; padding: 0 16px; font-size: 12.5px; font-weight: 700; gap: 7px; } .nt-read-hint:disabled { opacity: 0.4; cursor: default; } /* The rule a direction question is measured against. */ .note-trainer-staff-guide { stroke: var(--ms-pagina); stroke-width: 2; stroke-dasharray: 5 5; opacity: 0.85; } /* The lesson bar. Duolingo's one genuinely good idea: a lesson you can see the end of is a lesson people finish. */ .nt-read-pips .nt-pip { background: var(--ms-segment); } .nt-read-pips .nt-pip.is-ok { background: var(--ms-ok); } .nt-read-pips .nt-pip.is-err { background: var(--ms-err); } .nt-read-pips .nt-pip.is-now { background: var(--ms-pagina); animation: nt-pip-breathe 1.6s ease-in-out infinite; } @keyframes nt-pip-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .nt-read-pips .nt-pip.is-now { animation: none; } .note-trainer-staff-note.is-ok .note-trainer-staff-head, .note-trainer-staff-note.is-err .note-trainer-staff-head { animation: none; } .nt-read-neck { animation: none; } } .nt-rhythm-sheet .note-trainer-staff-svg { width: 100%; height: auto; } .nt-rhythm-preview .note-trainer-staff-svg { height: 108px; width: auto; } /* ── Rhythm notation ───────────────────────────────────────────────── */ /* One line, because there is no pitch in a rhythm exercise and five lines would invite the eye to look for one. Everything else is set the way a method book sets it. */ .note-trainer-staff-svg.is-rhythm { height: 132px; } .note-trainer-staff-svg.is-rhythm.is-wide { width: 100%; height: auto; } .note-trainer-staff-beam { fill: var(--ms-text); } .note-trainer-staff-rest .is-fill { fill: var(--ms-text); stroke: none; } .note-trainer-staff-rest .is-stroke { fill: none; stroke: var(--ms-text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .note-trainer-staff-tuplet { fill: var(--ms-muted); font-family: var(--ms-font); font-size: 14px; font-weight: 800; font-style: italic; text-anchor: middle; } /* The bar the player is in, washed behind the notes. */ .note-trainer-staff-barmark { fill: var(--ms-tempo-light); transition: x .12s linear, opacity .2s ease; } /* Verdicts reach the rests too, so a missed silence reads as one. */ .note-trainer-staff-note.is-ok .note-trainer-staff-beam { fill: var(--ms-ok); } .note-trainer-staff-note.is-err .note-trainer-staff-beam { fill: var(--ms-err); }