/ dark-mode overrides for the lesson-prose
surface. Mirrors the same overrides on `.admin-text-preview` in
`_admin-editor.scss`. */
.mt-dark-mode .content-text a {
color: #64B5F6;
}
.mt-dark-mode .content-text code {
background-color: #2A2A2A;
color: #E0E0E0;
padding: 0.1rem 0.3rem;
border-radius: 3px;
}
.staff-input-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
width: fit-content;
max-width: 100%;
border: 1px solid #BDBDBD;
border-radius: 8px;
padding: 1.25rem 1.5rem;
background: #FFFFFF;
}
.staff-input-header {
font-size: 0.95rem;
margin-bottom: 0.75rem;
}
.staff-input-header strong {
color: #1565C0;
}
.staff-input-target {
color: #FF8F00;
font-weight: 600;
text-transform: lowercase;
}
.staff-input-hint {
font-style: italic;
}
.staff-input-main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.staff-input-side-panel {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.staff-input-controls {
display: flex;
flex-direction: row;
gap: 0.4rem;
flex-wrap: wrap;
align-items: center;
margin-top: 0.25rem;
}
.staff-input-controls::before {
content: "Accidental:";
font-size: 0.78rem;
color: #757575;
margin-right: 0.25rem;
font-weight: 500;
}
.staff-input-label {
margin-top: 0.5rem;
font-family: serif;
font-size: 1.1rem;
color: #1565C0;
font-weight: 600;
}
.staff-input-chord {
font-style: italic;
}
.staff-input-key {
margin-left: 0.4rem;
font-style: normal;
font-weight: 500;
color: #424242;
}
.staff-input-guidelines {
background: #F5F8FB;
border-left: 3px solid #1565C0;
border-radius: 4px;
padding: 0.5rem 0.7rem;
font-size: 0.78rem;
line-height: 1.35;
color: #424242;
}
.staff-input-guidelines-title {
font-weight: 600;
color: #1565C0;
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.staff-input-guidelines ul.guidelines-list {
margin: 0;
padding-left: 0;
list-style: none;
}
.staff-input-guidelines li {
margin-bottom: 0.18rem;
line-height: 1.32;
padding-left: 0.85rem;
position: relative;
}
.staff-input-guidelines li.guideline-bulleted::before {
content: "•";
position: absolute;
left: 0.15rem;
color: #1565C0;
font-weight: 700;
}
.staff-input-guidelines li.guideline-numbered {
padding-left: 0;
}
.staff-input-guidelines li:last-child {
margin-bottom: 0;
}
/* OSMD container: with renderSingleHorizontalStaffline forcing all measures onto a
single system, the SVG can be wider than the column on narrow viewports. Allow
horizontal scrolling instead of letting OSMD line-break (which previously broke the
4-chord cadence across two lines). */
.music-notation-container {
overflow-x: auto;
overflow-y: visible;
}
/* =========================================================================
notation-surface / notation-stage / notation-stage-osmd
--------------------------------------------------------------------------
Task 5 of code-review-mt2-prep remediation
(planning/code-review-remediation.md). These three classes encapsulate
the white-paper-with-black-staff surface every exercise renderer used to
pin inline via `Style="background:#FFFFFF; color:#000; min-width: 480px;
..."` blobs. Hoisting them here means:
1. Theming knobs ($bg-white / $border-firm) actually affect the staff
surface — Phase L (dark mode) can swap the tokens in one place.
2. Renderers can opt in via `Class="notation-surface"` instead of
copy-pasting six rules into every razor file.
3. The notation-surface-style-scanner test
(tests/.../NotationSurfaceStyleScannerTests.cs) keeps the contract
honest — any future renderer that re-introduces inline colors or
a flat 480px min-width fails the test.
========================================================================= */
.notation-surface {
background: var(--staff-paper, #FFFFFF);
color: #424242;
border-radius: 6px;
max-width: 100%;
overflow-x: auto;
overflow-y: visible;
}
.notation-surface--panel {
/* MudPaper-equivalent inner padding, but only when applied alongside
.notation-surface — keep these as separate modifiers so a renderer
that already supplies padding (e.g. via Class="pa-3") doesn't get
a doubled-up gap. */
padding: 1rem;
}
.notation-stage {
position: relative;
width: fit-content;
/* Round-1 kimi note (planning/code-review-remediation.md): the prior
renderer-local rule used a flat `min-width: 480px` which overflowed
viewports narrower than 480px (phones in portrait, narrow split-view
tablets). The `min(100%, 480px)` form keeps 480px as a floor on
wide screens but lets the stage shrink to viewport width on narrow
ones — preserving readability instead of forcing a horizontal
scrollbar around the surrounding chrome. */
min-width: min(100%, 480px);
max-width: 100%;
margin: 0 auto;
}
.notation-stage-osmd {
/* Inner OSMD render target. Positioned/z-indexed so click-and-mark
overlays (`.violation-overlay`, the active-chord highlight) can
sit above the engraving without re-introducing the per-renderer
inline z-index of yore. */
position: relative;
z-index: 1;
min-height: 200px;
/* 2026-05-26 — themeable staff paper (see .notation-surface above). */
background: var(--staff-paper, #FFFFFF);
}
.mtt-notation-sizing svg {
visibility: hidden;
}
.mtt-notation-ready svg {
visibility: visible;
}
/* Click-to-highlight: clicking a notehead toggles this class. Stays sticky until
the user clicks the same note again. Amber-yellow so it reads as a deliberate
highlight (vs. the red used for error markings). */
.mtt-note-highlighted path,
.mtt-note-highlighted ellipse,
.mtt-note-highlighted circle {
fill: #FFB300 !important;
stroke: #FFB300 !important;
}
/* Playback "now-playing" highlight — added at chord-onset, removed at chord-offset.
Blue (Material primary) so it reads as a temporal cue distinct from the amber
"user-marked" highlight above. */
.mtt-chord-playing path,
.mtt-chord-playing ellipse,
.mtt-chord-playing circle {
fill: #1976D2 !important;
stroke: #1976D2 !important;
transition: fill 0.08s ease, stroke 0.08s ease;
}
/* When a notehead is BOTH user-marked AND currently-playing, the playback color
wins for the duration of playback. Selector specificity handles this naturally
because the .mtt-chord-playing rule comes after .mtt-note-highlighted and they
target the same descendant. */
.staff-voice-selector {
display: flex;
gap: 0.6rem;
margin-top: 0.75rem;
flex-wrap: wrap;
}
.voice-pill {
display: inline-flex;
align-items: baseline;
gap: 0.45rem;
padding: 0.4rem 0.95rem;
border-radius: 999px;
border: 1.5px solid #BDBDBD;
background: #FFFFFF;
color: #424242;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
font-family: inherit;
line-height: 1.2;
}
.voice-pill:hover:not(.voice-pill-active) {
border-color: #1565C0;
color: #1565C0;
}
.voice-pill-active {
background: #1565C0;
border-color: #0D47A1;
color: #FFFFFF;
}
/* PR B.10 (master-roadmap user-feedback batch) — `.voice-pill-pitch`
was the second span in the voice-pill that rendered the placed
note's pitch (e.g., "C5"). The user dropped that visual: the
pitch is already conveyed by the notehead's staff position, so
the suffix added clutter without information. Class kept here as
an inert hook in case a future renderer wants to re-introduce a
pitch annotation under a different design; safe to delete with
a follow-up CSS-cleanup PR. */
.voice-pill-pitch {
display: none;
}
.accidental-btn {
min-width: 40px;
padding: 0.3rem 0.65rem;
border: 1.5px solid #BDBDBD;
border-radius: 6px;
background: #FFFFFF;
color: #424242;
font-family: serif;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
line-height: 1.2;
}
.accidental-btn:hover:not(.accidental-active) {
border-color: #1565C0;
color: #1565C0;
}
.accidental-active {
background: #1565C0;
border-color: #0D47A1;
color: #FFFFFF;
}
.accidental-btn-clear,
.accidental-btn-erase {
font-family: inherit;
font-size: 0.78rem;
font-weight: 500;
}
.accidental-btn-erase {
border-color: #E57373;
color: #c62828;
}
.accidental-btn-erase:hover {
background: #FFEBEE;
border-color: #c62828;
}
.piano-keyboard-wrapper {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0.25rem 0;
padding: 0.25rem;
border-radius: 6px;
border: 2px solid transparent;
transition: border-color 0.18s ease, background-color 0.18s ease;
}
.piano-keyboard-active {
border-color: #FF8F00;
background-color: #FFF7E6;
}
.piano-label {
font-size: 0.85rem;
font-weight: 600;
color: #424242;
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.piano-keyboard-scroll {
max-width: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid #BDBDBD;
border-radius: 4px;
background: #FAFAFA;
}
.piano-keyboard {
position: relative;
user-select: none;
}
.piano-key {
position: absolute;
top: 0;
border: 1px solid #424242;
cursor: pointer;
padding: 0;
font-family: inherit;
transition: background-color 0.08s ease, transform 0.04s ease;
}
.piano-key:focus {
outline: 2px solid #FF8F00;
outline-offset: -2px;
z-index: 10;
}
.piano-key-white {
background: #FFFFFF;
color: #424242;
border-radius: 0 0 3px 3px;
z-index: 1;
}
.piano-key-white:hover:not(:disabled) {
background: #E3F2FD;
}
.piano-key-white:active:not(:disabled) {
background: #BBDEFB;
}
.piano-key-black {
background: #212121;
border-radius: 0 0 2px 2px;
z-index: 2;
border-color: #000;
}
.piano-key-black:hover:not(:disabled) {
background: #1565C0;
}
.piano-key-black:active:not(:disabled) {
background: #0D47A1;
}
.piano-key-selected.piano-key-white {
background: #1565C0;
color: #FFFFFF;
}
.piano-key-selected.piano-key-black {
background: #FF8F00;
}
.piano-key-disabled {
cursor: not-allowed;
opacity: 0.35;
}
.piano-key-disabled.piano-key-white {
background: #eeeeee;
}
.piano-key-disabled.piano-key-black {
background: #757575;
}
.piano-key-label {
position: absolute;
bottom: 4px;
left: 0;
right: 0;
text-align: center;
font-size: 0.65rem;
pointer-events: none;
}
.rn-chip.mud-button-outlined-default {
border-color: #757575;
/* PR B.0.3 (master-roadmap Phase B.0 SCSS migration). Dark-mode
override moved inside the light-mode rule via @mixin dark-mode.
Compiles to `.mt-dark-mode .rn-chip.mud-button-outlined-default { ... }`
— same as the prior hand-written form, half the source code.
Reason for the dark-mode value: on the #1E1E1E surface #9E9E9E
reads ~6:1 — well above the WCAG SC 1.4.11 3:1 lower bound for
non-text UI component borders. */
}
.mt-dark-mode .rn-chip.mud-button-outlined-default {
border-color: #9E9E9E;
}
.rn-chip.mud-button-outlined-default:hover {
border-color: #424242;
}
.mt-dark-mode .rn-chip.mud-button-outlined-default:hover {
border-color: #BDBDBD;
}
.exercise-feedback-pre {
font-family: "Helvetica Neue", sans-serif;
font-size: 0.92rem;
white-space: pre-wrap;
margin: 0.5rem 0 0 0;
padding: 0;
background: transparent;
border: 0;
line-height: 1.4;
}
/* Structured violation list — replaces the previous wall of red text. Each
violation becomes a row: a category chip (color-coded by rule type) on the left,
the descriptive message on the right. Wraps cleanly even on narrow screens. */
.exercise-feedback-violations {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin-top: 0.25rem;
}
.exercise-feedback-violation-row {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 0.6rem;
padding: 0.45rem 0.6rem;
background: rgba(255, 255, 255, 0.55);
border-left: 3px solid #d32f2f;
border-radius: 4px;
line-height: 1.35;
}
.exercise-feedback-violation-chip {
display: inline-block;
flex: 0 0 auto;
min-width: 110px;
text-align: center;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0.22rem 0.55rem;
border-radius: 999px;
color: #FFFFFF;
background: #757575;
/* Each rule category gets its own chip color so the eye can group violations
at a glance — chord-identity is amber, parallels are magenta, leading tone
and doubled-LT both get red, etc. */
white-space: nowrap;
}
.exercise-feedback-violation-chip[data-rule=chord-identity] {
background: #e65100;
}
.exercise-feedback-violation-chip[data-rule=ranges-and-spacing] {
background: #6a1b9a;
}
.exercise-feedback-violation-chip[data-rule=voice-overlap] {
background: #1565C0;
}
.exercise-feedback-violation-chip[data-rule=parallel-fifths-octaves],
.exercise-feedback-violation-chip[data-rule=hidden-fifths-octaves] {
background: #ad1457;
}
.exercise-feedback-violation-chip[data-rule=seventh-resolution],
.exercise-feedback-violation-chip[data-rule=seventh-preparation] {
background: #00796b;
}
.exercise-feedback-violation-chip[data-rule=leading-tone-resolution] {
background: #c62828;
}
.exercise-feedback-violation-chip[data-rule=doubled-leading-tone] {
background: #c62828;
}
.exercise-feedback-violation-msg {
flex: 1 1 auto;
color: #1c1c1c;
font-size: 0.92rem;
word-break: normal;
overflow-wrap: anywhere;
}
/* ---------- Session-summary view (end of an exercise series) ---------- */
/* "Where to focus next" — rule-violation cards in a responsive grid. Each card =
chip + count + coaching hint, so the student leaves with concrete things to study. */
.exercise-summary-rule-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.exercise-summary-rule-card {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 0.25rem 0.6rem;
padding: 0.7rem 0.85rem;
background: #FAFAFA;
border: 1px solid #E0E0E0;
border-radius: 6px;
}
.exercise-summary-rule-card .exercise-feedback-violation-chip {
grid-row: 1;
grid-column: 1;
align-self: center;
}
.exercise-summary-rule-count {
grid-row: 1;
grid-column: 2;
text-align: right;
font-weight: 700;
font-size: 1.05rem;
color: #c62828;
align-self: center;
}
.exercise-summary-rule-hint {
grid-row: 2;
grid-column: 1/-1;
color: #424242;
font-size: 0.85rem;
line-height: 1.4;
}
/* Per-question grid — one chip per question, scannable strip showing pass/fail + key/inv. */
.exercise-summary-question-grid {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.exercise-summary-question {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0.65rem;
border-radius: 999px;
font-size: 0.85rem;
background: #f5f5f5;
border: 1px solid #E0E0E0;
}
.exercise-summary-question.ok {
background: rgba(46, 125, 50, 0.08);
border-color: rgba(46, 125, 50, 0.3);
color: #1b5e20;
}
.exercise-summary-question.err {
background: rgba(198, 40, 40, 0.08);
border-color: rgba(198, 40, 40, 0.3);
color: #b71c1c;
}
.exercise-summary-question-num {
font-weight: 600;
opacity: 0.65;
min-width: 1.3em;
text-align: right;
}
.exercise-summary-question-dot {
font-weight: 700;
}
.exercise-summary-question-meta {
color: inherit;
opacity: 0.8;
}
/* Accuracy bars — one row per category (mode, inversion). Color graded green/orange/red. */
.exercise-summary-bars {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.exercise-summary-bar-row {
display: grid;
grid-template-columns: 130px 1fr 70px;
align-items: center;
gap: 0.7rem;
font-size: 0.88rem;
}
.exercise-summary-bar-label {
color: #424242;
}
.exercise-summary-bar-track {
background: #eeeeee;
border-radius: 3px;
height: 12px;
overflow: hidden;
}
.exercise-summary-bar-fill {
height: 100%;
transition: width 0.3s ease;
}
.exercise-summary-bar-count {
font-variant-numeric: tabular-nums;
color: #424242;
text-align: right;
}
/* ── PDF viewer (pdf.js textLayer) ─────────────────────────────────────── */
/* Render the textLayer text invisibly so it's selectable but doesn't visually
stack on top of the canvas. Adapted from pdf.js's text_layer_builder.css. */
.pdf-viewer-container .textLayer {
opacity: 0.25; /* slight visibility for debugging selection bounds */
line-height: 1;
user-select: text;
}
.pdf-viewer-container .textLayer > span {
color: transparent;
position: absolute;
white-space: pre;
cursor: text;
transform-origin: 0% 0%;
}
.pdf-viewer-container .textLayer ::selection {
background: rgba(0, 100, 200, 0.3);
}
.pdf-viewer-container .pdf-page-wrapper {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
background: white;
}
/* ── PDF v3 annotation selection state ──────────────────────────────────── */
.pdf-ann-selected {
outline: 2px dashed #1976D2;
outline-offset: 3px;
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
}
.pdf-stamp-ghost {
/* Inline styles set on the ghost handle most of the look; this is a stable hook
in case a future change wants to target ghosts via CSS. */
}
/* ── PDF interaction hardening ──────────────────────────────────────────────
Kill the browser's default drag-and-drop ghost preview on every PDF surface.
Without these, dragging on the canvas / textLayer span / page wrapper shows
a translucent copy of the page following the cursor — the bug user reported. */
.pdf-page-wrapper,
.pdf-page-wrapper canvas,
.pdf-page-wrapper .textLayer,
.pdf-page-wrapper .textLayer > span {
-webkit-user-drag: none;
user-drag: none;
}
/* Canvas is purely visual; let clicks fall through to the annotation layer below
so stamp drags + drag-rectangles work correctly without canvas eating events. */
.pdf-page-wrapper canvas {
pointer-events: none;
}
/* Admin Markdown preview pane (TextBlockEditor.razor): the live render of
the author's Markdown source. Previously hard-coded to background-color
#fafafa via inline style — switched to this class so it picks up dark
surface tone in dark mode. Light mode keeps the original cream tint. */
.admin-text-preview {
background-color: #FAFAFA;
color: inherit;
/* PR B.0.3: dark-mode override + Markdig + link styling
all collapse into the parent rule via @mixin dark-mode. Compiled
output expands to the same `.mt-dark-mode .admin-text-preview` /
`.mt-dark-mode .admin-text-preview a` / `.mt-dark-mode
.admin-text-preview code` selectors as the prior hand-written
form. */
}
.mt-dark-mode .admin-text-preview {
background-color: #1E1E1E;
color: #E0E0E0;
}
.mt-dark-mode .admin-text-preview a {
/* Markdig HTML output renders bare blocks + links
that inherit body color. Pin a brand-blue link color in
dark mode so they stand out against the muted body grey. */
color: #64B5F6;
}
.mt-dark-mode .admin-text-preview code {
background-color: #2A2A2A;
color: #E0E0E0;
padding: 0.1rem 0.3rem;
border-radius: 3px;
}
/* PR C.2 (master-roadmap, 2026-05-05) — yellow pulse-dot indicator
for the PdfBlockEditor's "Unsaved changes" caption. Pairs with
the warning-color caption text; the gentle pulse keeps the cue
noticeable without being aggressive. Animation cycles 1.5s
ease-in-out; opacity loops between 0.5 and 1.0 alongside a
subtle scale shift so the dot reads as alive rather than
blinking. */
.pdf-editor-pulse-dot {
display: inline-block;
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background-color: #ffc107;
box-shadow: 0 0 0.25rem rgba(255, 193, 7, 0.6);
animation: pdf-editor-pulse 1.5s ease-in-out infinite;
}
@keyframes pdf-editor-pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(0.85);
}
}
:root {
--radius-sm: 4px;
--radius-lg: 10px;
--shadow-sm: 0 1px 0 rgba(15, 23, 41, 0.04), 0 1px 2px rgba(15, 23, 41, 0.06);
--shadow: 0 1px 2px rgba(15, 23, 41, 0.06), 0 4px 12px rgba(15, 23, 41, 0.06);
--shadow-lg: 0 8px 32px rgba(15, 23, 41, 0.08), 0 2px 8px rgba(15, 23, 41, 0.05);
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ok: #2e7d32;
--warn: #ed6c02;
--err: #c62828;
--mono: "JetBrains Mono", ui-monospace, monospace;
--hand: "Caveat", cursive;
--brand-tint: color-mix(in srgb, var(--brand) 10%, transparent);
--brand-tint-strong: color-mix(in srgb, var(--brand) 16%, transparent);
--brand-2-tint: color-mix(in srgb, var(--brand-2) 12%, transparent);
--serif: "Playfair Display", Georgia, serif;
--sans: "Outfit", system-ui, sans-serif;
--brand: #0a0a0a;
--brand-2: #dc2626;
--brand-deep: #000000;
--brand-soft: #f5f5f5;
--paper: #ffffff;
--paper-warm: #f5f5f5;
--surface: #ffffff;
--surface-2: #fafafa;
--ink: #0a0a0a;
--ink-2: #404040;
--ink-3: #737373;
--ink-4: #a3a3a3;
--line: #e5e5e5;
--line-2: #d4d4d4;
--line-3: #f5f5f5;
--radius: 2px;
}
:root[data-theme=editorial] {
--serif: "Fraunces", Georgia, serif;
--sans: "Inter", system-ui, sans-serif;
--brand: #1565c0;
--brand-2: #ff8f00;
--brand-deep: #0d47a1;
--brand-soft: #e3eef9;
--paper: #fafaf7;
--paper-warm: #f5f1e8;
--surface: #ffffff;
--surface-2: #fbfaf6;
--ink: #0f1729;
--ink-2: #334155;
--ink-3: #64748b;
--ink-4: #94a3b8;
--line: #e7e3d4;
--line-2: #d8d2bd;
--line-3: #f0ecdf;
--radius: 6px;
}
:root[data-theme=modern] {
--serif: "Newsreader", Georgia, serif;
--sans: "Manrope", system-ui, sans-serif;
--brand: #4f46e5;
--brand-2: #fb7185;
--brand-deep: #3730a3;
--brand-soft: #eef2ff;
--paper: #fafafa;
--paper-warm: #f1f5f9;
--surface: #ffffff;
--surface-2: #f8fafc;
--ink: #0f172a;
--ink-2: #334155;
--ink-3: #64748b;
--ink-4: #94a3b8;
--line: #e2e8f0;
--line-2: #cbd5e1;
--line-3: #f1f5f9;
--radius: 8px;
}
:root[data-theme=manuscript] {
--serif: "EB Garamond", Georgia, serif;
--sans: "Crimson Pro", Georgia, serif;
--brand: #92400e;
--brand-2: #a16207;
--brand-deep: #7c2d12;
--brand-soft: #fef3c7;
--paper: #fbf6e6;
--paper-warm: #f4ebcf;
--surface: #fffdf7;
--surface-2: #fbf6e6;
--ink: #1c1917;
--ink-2: #44403c;
--ink-3: #78716c;
--ink-4: #a8a29e;
--line: #e7dcc0;
--line-2: #d6c8a3;
--line-3: #efe6cc;
--radius: 3px;
}
:root[data-theme=workhorse] {
--serif: "Source Serif 4", Georgia, serif;
--sans: "IBM Plex Sans", system-ui, sans-serif;
--brand: #0e7c66;
--brand-2: #ca8a04;
--brand-deep: #064e3b;
--brand-soft: #d1fae5;
--paper: #fafaf9;
--paper-warm: #f0ede6;
--surface: #ffffff;
--surface-2: #fafaf9;
--ink: #1c1917;
--ink-2: #44403c;
--ink-3: #78716c;
--ink-4: #a8a29e;
--line: #e7e5e4;
--line-2: #d6d3d1;
--line-3: #f5f5f4;
--radius: 4px;
}
:root[data-font=editorial] {
--serif: "Fraunces", Georgia, serif;
--sans: "Inter", system-ui, sans-serif;
}
:root[data-font=classical] {
--serif: "EB Garamond", Georgia, serif;
--sans: "Crimson Pro", Georgia, serif;
}
:root[data-font=modern] {
--serif: "Newsreader", Georgia, serif;
--sans: "Manrope", system-ui, sans-serif;
}
:root[data-font=workhorse] {
--serif: "Source Serif 4", Georgia, serif;
--sans: "IBM Plex Sans", system-ui, sans-serif;
}
:root[data-font=display] {
--serif: "Playfair Display", Georgia, serif;
--sans: "Outfit", system-ui, sans-serif;
}
:root[data-font=mixed] {
--serif: "Fraunces", Georgia, serif;
--sans: "IBM Plex Sans", system-ui, sans-serif;
}
:root[data-font=classic_sans] {
--serif: "Newsreader", Georgia, serif;
--sans: "Inter", system-ui, sans-serif;
}
:root[data-font=dyslexia] {
--serif: "Atkinson Hyperlegible", Georgia, serif;
--sans: "Lexend", system-ui, sans-serif;
}
:root.mt-dark-mode {
--paper: #0f172a;
--paper-warm: #1e293b;
--surface: #1e293b;
--surface-2: #0f172a;
--ink: #f8fafc;
--ink-2: #cbd5e1;
--ink-3: #94a3b8;
--ink-4: #64748b;
--line: #334155;
--line-2: #475569;
--line-3: #1e293b;
--brand-deep: color-mix(in srgb, var(--brand) 60%, white);
--brand-soft: color-mix(in srgb, var(--brand) 22%, var(--paper));
--brand-tint: color-mix(in srgb, var(--brand) 22%, transparent);
--brand-tint-strong: color-mix(in srgb, var(--brand) 32%, transparent);
--brand-2-tint: color-mix(in srgb, var(--brand-2) 26%, transparent);
--mud-palette-text-primary: #f8fafc;
--mud-palette-text-secondary: #cbd5e1;
--mud-palette-text-disabled: #64748b;
}
:root.mt-dark-mode .mt-customize-rail-card-head {
color: var(--ink);
}
:root {
--staff-paper: #ffffff;
}
:root[data-staff-paper=cream] {
--staff-paper: #fbf6e9;
}
:root[data-staff-paper=warm] {
--staff-paper: #f5edc3;
}
:root[data-staff-paper=invert] {
--staff-paper: #0f172a;
}
:root[data-staff-paper=invert] .notation-stage-osmd svg,
:root[data-staff-paper=invert] .notation-stage-osmd img,
:root[data-staff-paper=invert] .music-notation-container svg,
:root[data-staff-paper=invert] .music-notation-container img,
:root[data-staff-paper=invert] .staff-input-wrapper svg,
:root[data-staff-paper=invert] .staff-input-wrapper img {
filter: invert(1) hue-rotate(180deg);
}
:root {
--surface2: var(--surface-2);
--rule: var(--line);
--muted: var(--ink-3);
--accent: var(--brand);
--orange: var(--brand-2);
}
.mt-editorial-section {
margin-bottom: 32px;
}
.mt-editorial-section .mt-editorial-section-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--rule);
}
.mt-editorial-section .mt-editorial-section-title {
font-family: var(--serif);
font-weight: 500;
font-size: 22px;
color: var(--ink);
line-height: 1.2;
}
.mt-editorial-section .mt-editorial-section-hint {
font-family: var(--serif);
font-style: italic;
font-size: 13px;
color: var(--muted);
flex: 1;
line-height: 1.4;
}
.mt-editorial-section .mt-editorial-section-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
}
.mt-editorial-section .mt-editorial-section-body {
display: flex;
flex-direction: column;
gap: 18px;
}
.mt-editorial-field {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
align-items: flex-start;
}
@media (max-width: 600px) {
.mt-editorial-field {
grid-template-columns: 1fr;
gap: 8px;
}
}
.mt-editorial-field .mt-editorial-field-meta {
padding-top: 8px;
}
@media (max-width: 600px) {
.mt-editorial-field .mt-editorial-field-meta {
padding-top: 0;
}
}
.mt-editorial-field .mt-editorial-field-label {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
.mt-editorial-field .mt-editorial-field-sublabel {
font-family: var(--serif);
font-style: italic;
font-size: 12px;
color: var(--muted);
margin-top: 3px;
line-height: 1.4;
}
.mt-editorial-field .mt-editorial-field-control {
min-width: 0;
}
.mt-editorial-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.mt-editorial-chips .mud-chip-set {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
}
.mt-editorial-chips .mud-chip {
height: auto;
min-height: 0;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
line-height: 1;
border-radius: 99px;
padding: 6px 14px;
margin: 0;
background: var(--surface) !important;
color: var(--accent) !important;
border: 1px solid var(--accent) !important;
box-shadow: none;
transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.mt-editorial-chips .mud-chip .mud-chip-content {
padding: 0;
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.mt-editorial-chips .mud-chip .mud-chip-label,
.mt-editorial-chips .mud-chip .mud-chip-text {
padding: 0;
margin: 0;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: 1;
color: inherit;
}
.mt-editorial-chips .mud-chip .mud-chip-content,
.mt-editorial-chips .mud-chip .mud-chip-label,
.mt-editorial-chips .mud-chip .mud-chip-text {
color: var(--accent) !important;
}
.mt-editorial-chips .mud-chip .mud-chip-icon {
display: none;
}
.mt-editorial-chips .mud-chip:hover:not(.mud-chip-selected):not(.mud-chip-disabled):not(:disabled) {
background: rgba(21, 101, 192, 0.08);
}
.mt-editorial-chips .mud-chip.mud-chip-selected {
background: var(--accent) !important;
color: #ffffff !important;
border-color: var(--accent) !important;
font-weight: 600;
box-shadow: 0 2px 6px rgba(21, 101, 192, 0.35);
}
.mt-editorial-chips .mud-chip.mud-chip-selected .mud-chip-content,
.mt-editorial-chips .mud-chip.mud-chip-selected .mud-chip-label,
.mt-editorial-chips .mud-chip.mud-chip-selected .mud-chip-text {
color: #ffffff !important;
}
.mt-editorial-chips .mud-chip.mud-chip-selected:hover {
background: var(--accent) !important;
border-color: var(--accent) !important;
box-shadow: 0 3px 9px rgba(21, 101, 192, 0.4);
}
.mt-editorial-chips .mud-chip.mud-chip-disabled,
.mt-editorial-chips .mud-chip[disabled],
.mt-editorial-chips .mud-chip:disabled {
background: var(--surface);
color: var(--muted);
border-color: var(--rule);
cursor: not-allowed;
opacity: 0.55;
}
.mt-editorial-chips .mud-chip.mud-chip-disabled .mud-chip-content,
.mt-editorial-chips .mud-chip[disabled] .mud-chip-content,
.mt-editorial-chips .mud-chip:disabled .mud-chip-content {
color: var(--muted);
}
.mt-editorial-chips .mud-chip.mud-chip-disabled:hover,
.mt-editorial-chips .mud-chip[disabled]:hover,
.mt-editorial-chips .mud-chip:disabled:hover {
border-color: var(--rule);
background: var(--surface);
}
.mt-editorial-two-col {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
gap: 24px;
align-items: flex-start;
}
@media (max-width: 720px) {
.mt-editorial-two-col {
grid-template-columns: 1fr;
gap: 16px;
}
}
.mt-editorial-two-col .mt-editorial-two-col-eyebrow {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin-bottom: 10px;
}
.mt-editorial-radios {
display: flex;
flex-direction: column;
gap: 8px;
}
.mt-editorial-radio-card {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--rule);
border-radius: 6px;
cursor: pointer;
transition: border-color 120ms ease;
}
.mt-editorial-radio-card:hover:not(.mt-editorial-radio-card-selected) {
border-color: var(--ink);
}
.mt-editorial-radio-card.mt-editorial-radio-card-selected {
border-color: var(--accent);
}
.mt-editorial-radio-card .mud-radio {
margin: 0;
padding: 0;
align-items: flex-start;
gap: 8px;
}
.mt-editorial-radio-card .mud-radio-button {
padding: 0;
margin: 0;
flex-shrink: 0;
margin-top: 2px;
}
.mt-editorial-radio-card .mud-typography {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: 1.4;
color: inherit;
flex: 1;
}
.mt-editorial-radio-card .mt-editorial-radio-card-label {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: var(--ink);
line-height: 1.2;
}
.mt-editorial-radio-card .mt-editorial-radio-card-label.mt-editorial-radio-card-label-selected {
font-weight: 600;
}
.mt-editorial-radio-card .mt-editorial-radio-card-sub {
font-family: var(--serif);
font-style: italic;
font-size: 12px;
color: var(--muted);
margin-top: 2px;
line-height: 1.4;
}
.mt-editorial-advanced {
border-top: 1px dashed var(--rule);
padding-top: 14px;
}
.mt-editorial-advanced .mt-editorial-advanced-trigger {
background: transparent;
border: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mt-editorial-advanced .mt-editorial-advanced-body {
margin-top: 14px;
}
.mt-customize-shell {
background: var(--paper);
color: var(--ink);
min-height: 100%;
font-family: var(--sans);
display: flex;
flex-direction: column;
}
.mt-customize-topbar {
padding: 14px 56px 0;
}
@media (max-width: 1000px) {
.mt-customize-topbar {
padding: 12px 24px 0;
}
}
.mt-customize-back {
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-3);
text-decoration: none;
border-bottom: 1px dashed var(--line-2);
padding-bottom: 1px;
}
.mt-customize-back:hover {
color: var(--ink);
}
.mt-customize-title-strip {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding: 8px 56px 22px;
border-bottom: 1px solid var(--line);
}
@media (max-width: 1000px) {
.mt-customize-title-strip {
padding: 8px 24px 18px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
.mt-customize-title-block {
min-width: 0;
}
.mt-customize-kicker {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
color: var(--brand);
margin-bottom: 6px;
}
.mt-customize-title {
font-family: var(--serif);
font-weight: 600;
font-size: 32px;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0;
color: var(--ink);
}
.mt-customize-blurb {
font-size: 13px;
color: var(--ink-2);
margin: 6px 0 0;
max-width: 560px;
line-height: 1.5;
}
.mt-customize-meta {
text-align: right;
font-size: 11px;
color: var(--ink-3);
line-height: 1.5;
flex-shrink: 0;
}
@media (max-width: 1000px) {
.mt-customize-meta {
text-align: left;
}
}
.mt-customize-body {
padding: 28px 56px 80px;
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 24px;
align-items: start;
}
@media (max-width: 1000px) {
.mt-customize-body {
grid-template-columns: 1fr;
padding: 20px 24px 60px;
}
}
.mt-customize-form {
display: flex;
flex-direction: column;
gap: 32px;
min-width: 0;
}
.mt-customize-rail {
position: sticky;
top: 80px;
align-self: flex-start;
display: flex;
flex-direction: column;
gap: 16px;
}
@media (max-width: 1000px) {
.mt-customize-rail {
position: static;
}
}
.mt-customize-rail-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.mt-customize-rail-card--wide,
.mt-im-card--wide,
.mt-ks-card--wide,
.mt-customize-tile--wide {
grid-column: 1/-1;
}
.mt-customize-rail-card-head {
padding: 14px 18px 12px;
border-bottom: 1px solid var(--line-3);
background: var(--surface-2);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
color: var(--brand);
display: flex;
align-items: center;
justify-content: space-between;
}
.mt-customize-rail-card-tag {
font-family: var(--serif);
font-style: italic;
text-transform: none;
letter-spacing: 0;
font-weight: 500;
color: var(--ink-3);
font-size: 11px;
}
.mt-customize-rail-card-body {
padding: 16px 14px;
}
.mt-customize-session-extras {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.mt-customize-session-extras .mt-customize-tile {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
}
.mt-customize-session-extras .mt-customize-tile .mt-customize-tile-label {
font-size: 9px;
letter-spacing: 0.16em;
color: var(--ink-3);
font-weight: 600;
margin-bottom: 4px;
text-transform: uppercase;
}
.mt-customize-session-extras .mt-customize-tile .mt-customize-tile-value {
font-family: var(--sans);
font-size: 18px;
font-weight: 600;
color: var(--ink);
}
.mt-customize-session-extras .mt-customize-tile .mt-customize-tile-value .mt-customize-tile-suffix {
font-size: 11px;
color: var(--ink-3);
font-weight: 500;
margin-left: 4px;
}
.mt-customize-cta-wrap {
display: flex;
}
.mt-customize-cta-wrap > .mt-btn {
flex: 1;
justify-content: center;
}
.mt-customize-secondary-actions {
display: flex;
gap: 8px;
}
.mt-customize-secondary-actions > .mt-btn {
flex: 1;
justify-content: center;
}
.mt-customize-helper {
padding: 10px 12px;
border: 1px dashed var(--line-2);
border-radius: var(--radius-sm);
font-family: var(--serif);
font-style: italic;
font-size: 12px;
color: var(--ink-3);
line-height: 1.45;
}
.mt-customize-section > .mt-customize-section-header {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.mt-customize-section > .mt-customize-section-header .mt-customize-section-title {
font-family: var(--serif);
font-weight: 500;
font-size: 22px;
color: var(--ink);
}
.mt-customize-section > .mt-customize-section-body {
display: flex;
flex-direction: column;
gap: 18px;
}
.mt-lesson-page {
background: var(--paper);
color: var(--ink);
min-height: 100%;
font-family: var(--sans);
display: flex;
flex-direction: column;
}
.mt-lesson-page .mt-lesson-header {
border-bottom: 1px solid var(--rule);
padding: 18px 56px;
display: flex;
align-items: center;
gap: 24px;
background: var(--paper);
position: sticky;
top: 0;
z-index: 10;
}
@media (max-width: 960px) {
.mt-lesson-page .mt-lesson-header {
padding: 14px 20px;
}
}
.mt-lesson-page .mt-lesson-header .mt-lesson-breadcrumb {
display: flex;
align-items: baseline;
gap: 10px;
flex: 1;
min-width: 0;
flex-wrap: wrap;
}
.mt-lesson-page .mt-lesson-header .mt-lesson-breadcrumb .mt-lesson-crumb {
font-size: 11px;
letter-spacing: 0.18em;
color: var(--muted);
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
}
.mt-lesson-page .mt-lesson-header .mt-lesson-breadcrumb .mt-lesson-crumb.is-link {
border-bottom: 1px dashed transparent;
}
.mt-lesson-page .mt-lesson-header .mt-lesson-breadcrumb .mt-lesson-crumb.is-link:hover {
color: var(--ink);
border-bottom-color: var(--rule);
}
.mt-lesson-page .mt-lesson-header .mt-lesson-breadcrumb .mt-lesson-crumb.is-current {
color: var(--ink);
}
.mt-lesson-page .mt-lesson-header .mt-lesson-breadcrumb .mt-lesson-sep {
color: var(--muted);
font-size: 11px;
}
.mt-lesson-page .mt-lesson-header .mt-lesson-edit-link {
font-size: 11px;
letter-spacing: 0.14em;
color: var(--accent);
text-decoration: none;
border-bottom: 1px dashed var(--rule);
font-weight: 600;
text-transform: uppercase;
padding: 4px 0;
}
.mt-lesson-page .mt-lesson-header .mt-lesson-edit-link:hover {
color: var(--ink);
}
.mt-lesson-page .mt-lesson-title-strip {
padding: 48px 56px 20px;
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
@media (max-width: 960px) {
.mt-lesson-page .mt-lesson-title-strip {
padding: 28px 20px 14px;
}
}
.mt-lesson-page .mt-lesson-title-strip .mt-lesson-kicker {
font-size: 11px;
letter-spacing: 0.14em;
color: var(--accent);
font-weight: 600;
margin-bottom: 12px;
text-transform: uppercase;
}
.mt-lesson-page .mt-lesson-title-strip .mt-lesson-title {
font-family: var(--serif);
font-weight: 500;
font-size: 56px;
line-height: 1.05;
letter-spacing: -0.012em;
margin: 0 0 4px;
color: var(--ink);
text-wrap: balance;
}
@media (max-width: 960px) {
.mt-lesson-page .mt-lesson-title-strip .mt-lesson-title {
font-size: 36px;
}
}
.mt-lesson-page .mt-lesson-title-strip .mt-lesson-subtitle {
font-family: var(--serif);
font-style: italic;
font-size: 22px;
color: var(--muted);
margin: 0 0 12px;
line-height: 1.35;
}
@media (max-width: 960px) {
.mt-lesson-page .mt-lesson-title-strip .mt-lesson-subtitle {
font-size: 17px;
}
}
.mt-lesson-page .mt-lesson-title-strip .mt-lesson-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.mt-lesson-page .mt-lesson-title-strip .mt-lesson-tag {
font-family: var(--sans);
font-size: 11px;
color: var(--muted);
border: 1px solid var(--rule);
border-radius: 999px;
padding: 3px 10px;
white-space: nowrap;
}
.mt-lesson-page .mt-lesson-body {
padding: 16px 56px 80px;
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
@media (max-width: 960px) {
.mt-lesson-page .mt-lesson-body {
padding: 12px 20px 60px;
}
}
.mt-lesson-page .mt-lesson-footer {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 24px;
align-items: center;
max-width: 1100px;
margin: 80px auto 0;
padding: 24px 56px 40px;
border-top: 1px solid var(--rule);
}
@media (max-width: 960px) {
.mt-lesson-page .mt-lesson-footer {
padding: 20px 20px 30px;
margin-top: 40px;
}
}
.mt-lesson-page .mt-lesson-footer .mt-lesson-foot-link {
font-family: var(--serif);
font-style: italic;
font-size: 17px;
color: var(--ink);
text-decoration: none;
}
.mt-lesson-page .mt-lesson-footer .mt-lesson-foot-link:hover {
color: var(--accent);
}
.mt-lesson-page .mt-lesson-footer .mt-lesson-foot-link.is-prev {
text-align: left;
}
.mt-lesson-page .mt-lesson-footer .mt-lesson-foot-link.is-prev::before {
content: "← ";
color: var(--muted);
font-style: normal;
}
.mt-lesson-page .mt-lesson-footer .mt-lesson-foot-link.is-next {
text-align: right;
}
.mt-lesson-page .mt-lesson-footer .mt-lesson-foot-link.is-next::after {
content: " →";
color: var(--muted);
font-style: normal;
}
.mt-lesson-page .mt-lesson-footer .mt-lesson-foot-center {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
text-align: center;
}
.mt-lesson-page .mt-lesson-footer .mt-lesson-foot-empty {
visibility: hidden;
}
.mt-lesson-figure {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 22px;
margin: 22px 0;
text-align: center;
}
.mt-lesson-figure .mud-stack {
justify-content: center;
}
.mt-lesson-figure-caption {
font-family: var(--serif);
font-style: italic;
font-size: 12.5px;
color: var(--ink-3);
margin-top: 8px;
}
.mt-lesson-exercise {
background: color-mix(in srgb, var(--brand-2) 5%, var(--surface));
border: 1px solid var(--brand-2);
border-radius: var(--radius);
padding: 18px 22px;
margin: 22px 0;
}
.mt-lesson-exercise-eyebrow {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--brand-2);
text-transform: uppercase;
}
.mt-lesson-exercise-title {
font-family: var(--serif);
font-weight: 600;
font-size: 18px;
color: var(--ink);
margin-top: 4px;
margin-bottom: 6px;
}
.mt-lesson-exercise-meta {
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
margin-bottom: 14px;
}
.mt-lesson-exercise .mt-drill-fb {
background: var(--surface);
}
.mt-lesson-callout {
display: flex;
gap: 12px;
background: color-mix(in srgb, var(--brand) 6%, var(--surface));
border-left: 3px solid var(--brand);
border-radius: var(--radius-sm);
padding: 12px 16px;
margin: 22px 0;
font-family: var(--sans);
font-size: 13px;
line-height: 1.55;
color: var(--ink-2);
}
.mt-lesson-callout--note {
background: color-mix(in srgb, var(--ink-3) 6%, var(--surface));
border-left-color: var(--ink-3);
}
.mt-lesson-callout--important {
background: color-mix(in srgb, var(--brand-2) 6%, var(--surface));
border-left-color: var(--brand-2);
}
.mt-lesson-callout--warning {
background: color-mix(in srgb, var(--warn) 6%, var(--surface));
border-left-color: var(--warn);
}
.mt-lesson-callout--caution {
background: color-mix(in srgb, var(--err) 6%, var(--surface));
border-left-color: var(--err);
}
.mt-lesson-callout-ico {
font-size: 18px;
flex-shrink: 0;
}
.mt-selectable-chip-row .mud-chip {
background-color: var(--mud-palette-action-disabled-background) !important;
color: var(--mud-palette-primary) !important;
border: none !important;
font-weight: 500 !important;
}
.mt-selectable-chip-row .mud-chip:hover:not(.mud-disabled) {
background-color: var(--mud-palette-action-disabled) !important;
}
.mt-selectable-chip-row .mud-chip.mud-chip-selected,
.mt-selectable-chip-row .mud-chip[aria-selected=true] {
background-color: var(--mud-palette-primary) !important;
color: var(--mud-palette-primary-text) !important;
}
.mt-selectable-chip-row .mud-chip.mud-chip-selected:hover:not(.mud-disabled),
.mt-selectable-chip-row .mud-chip[aria-selected=true]:hover:not(.mud-disabled) {
background-color: var(--mud-palette-primary-darken) !important;
}
.mt-dark-mode .mt-selectable-chip-row .mud-chip:not(.mud-chip-selected):not([aria-selected=true]) {
background-color: var(--paper-warm) !important;
color: var(--ink) !important;
}
.mt-dark-mode .mt-selectable-chip-row .mud-chip:not(.mud-chip-selected):not([aria-selected=true]):hover:not(.mud-disabled) {
background-color: var(--line-2) !important;
}
.mt-dark-mode .mt-selectable-chip-row .mud-chip.mud-chip-selected,
.mt-dark-mode .mt-selectable-chip-row .mud-chip[aria-selected=true] {
background-color: var(--mud-palette-primary) !important;
color: var(--paper) !important;
}
.mt-dark-mode .mt-selectable-chip-row .mud-chip.mud-chip-selected:hover:not(.mud-disabled),
.mt-dark-mode .mt-selectable-chip-row .mud-chip[aria-selected=true]:hover:not(.mud-disabled) {
background-color: var(--mud-palette-primary-darken) !important;
color: var(--paper) !important;
}
.mt-shell {
min-height: 100vh;
display: grid;
grid-template-columns: 220px 1fr;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
}
.mt-shell-sidebar {
border-right: 1px solid var(--line);
background: var(--surface-2);
padding: 18px 14px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.mt-shell-brand-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border-bottom: 1px solid var(--line);
margin-bottom: 12px;
}
.mt-shell-brand {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px 18px;
text-decoration: none;
color: inherit;
}
.mt-shell-mobile-toggle {
display: none;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 12px;
margin: 0 6px 12px 0;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink-2);
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
}
.mt-shell-mobile-toggle:hover {
background: var(--paper-warm);
color: var(--ink);
}
.mt-shell-brand-mark {
width: 30px;
height: 30px;
background: var(--ink);
color: var(--paper);
border-radius: var(--radius-sm);
display: grid;
place-items: center;
font-family: var(--serif);
font-style: italic;
font-weight: 600;
font-size: 19px;
line-height: 1;
flex-shrink: 0;
}
.mt-shell-brand-name {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.01em;
line-height: 1.15;
white-space: nowrap;
}
.mt-shell-brand-tag {
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
margin-top: 1px;
}
.mt-shell-nav-section {
margin-top: 14px;
}
.mt-shell-nav-label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
font-weight: 600;
padding: 4px 8px;
}
.mt-shell-nav-item {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 10px;
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--ink-2);
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background 80ms var(--ease), color 80ms var(--ease);
}
.mt-shell-nav-item:hover {
background: color-mix(in srgb, var(--ink) 6%, transparent);
color: var(--ink);
}
.mt-shell-nav-item.active {
background: var(--ink);
color: var(--paper);
}
.mt-shell-nav-item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.mt-shell-footer {
margin-top: 24px;
padding: 12px;
background: var(--brand-soft);
border-radius: var(--radius);
font-size: 12px;
color: var(--brand-deep);
line-height: 1.45;
}
.mt-shell-footer b {
font-weight: 600;
}
.mt-shell-page {
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--paper);
background-image: radial-gradient(color-mix(in srgb, var(--ink-3) 8%, transparent) 1px, transparent 1px);
background-size: 24px 24px;
}
.mt-shell-topbar {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 32px;
border-bottom: 1px solid var(--line);
background: var(--surface-2);
position: sticky;
top: 0;
z-index: 10;
}
.mt-shell-crumbs {
font-size: 12.5px;
color: var(--ink-3);
display: flex;
align-items: center;
gap: 8px;
}
.mt-shell-crumbs a {
color: var(--ink-3);
text-decoration: none;
}
.mt-shell-crumbs a:hover {
color: var(--ink);
}
.mt-shell-crumb-sep {
color: var(--ink-4);
}
.mt-shell-crumb-here {
color: var(--ink);
font-weight: 500;
}
.mt-shell-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
}
.mt-shell-icon-btn {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: var(--surface);
display: grid;
place-items: center;
color: var(--ink-2);
cursor: pointer;
padding: 0;
}
.mt-shell-icon-btn:hover {
background: var(--paper-warm);
color: var(--ink);
}
.mt-shell-icon-btn svg {
width: 17px;
height: 17px;
}
.mt-shell-avatar {
width: 30px;
height: 30px;
border-radius: 99px;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
color: #fff;
display: grid;
place-items: center;
font-family: var(--serif);
font-weight: 600;
font-size: 13px;
text-decoration: none;
cursor: pointer;
}
.mt-shell-admin-pill {
display: inline-flex;
align-items: center;
text-decoration: none;
background: var(--brand-2);
color: #1f1a14;
font-family: var(--sans);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.12em;
padding: 5px 9px;
border-radius: var(--radius-sm);
transition: background 120ms var(--ease), color 120ms var(--ease);
}
.mt-shell-admin-pill:hover {
background: color-mix(in srgb, var(--brand-2) 80%, var(--ink));
color: #fff;
}
.mt-shell-text-link {
font-size: 13px;
font-weight: 500;
text-decoration: none;
color: var(--ink-2);
padding: 6px 10px;
border-radius: var(--radius-sm);
}
.mt-shell-text-link:hover {
background: var(--paper-warm);
color: var(--ink);
}
.mt-shell-content {
padding: 28px 36px 80px;
max-width: 1280px;
width: 100%;
margin: 0 auto;
flex: 1;
}
.mt-shell-content--bleed {
padding: 0;
max-width: none;
}
#blazor-error-ui {
color-scheme: light only;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.mt-shell--admin .mt-shell-sidebar {
background: #1f1a14;
color: #f4eddc;
border-right: 1px solid #3a2f1a;
}
.mt-shell--admin .mt-shell-brand {
border-bottom-color: #3a2f1a;
}
.mt-shell--admin .mt-shell-brand-mark {
background: #ff8f00;
color: #1f1a14;
}
.mt-shell--admin .mt-shell-brand-name {
color: #f4eddc;
}
.mt-shell--admin .mt-shell-brand-tag,
.mt-shell--admin .mt-shell-nav-label {
color: #a39782;
}
.mt-shell--admin .mt-shell-nav-item {
color: #cdbfa0;
}
.mt-shell--admin .mt-shell-nav-item:hover {
background: rgba(255, 255, 255, 0.05);
color: #f4eddc;
}
.mt-shell--admin .mt-shell-nav-item.active {
background: #ff8f00;
color: #1f1a14;
}
.mt-shell--admin .mt-shell-footer {
background: #3a2f1a;
color: #f4eddc;
}
.mt-shell--admin .mt-shell-topbar {
background: #1f1a14;
color: #f4eddc;
border-bottom: 1px solid #3a2f1a;
}
.mt-shell--admin .mt-shell-crumbs {
color: #cdbfa0;
}
.mt-shell--admin .mt-shell-crumbs a {
color: #f4eddc;
}
.mt-shell--admin .mt-shell-crumbs a:hover {
color: #fff;
}
.mt-shell--admin .mt-shell-crumb-sep {
color: #7a7164;
}
.mt-shell--admin .mt-shell-crumb-here {
color: #fff;
}
.mt-shell--admin .mt-shell-icon-btn {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
color: #f4eddc;
}
.mt-shell--admin .mt-shell-icon-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.mt-shell--admin .mt-shell-avatar {
background: #ff8f00;
color: #1f1a14;
}
.mt-shell-admin-tag {
background: #ff8f00;
color: #1f1a14;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.12em;
padding: 3px 7px;
border-radius: var(--radius-sm);
margin-right: 4px;
}
.mt-shell-admin-exit {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 500;
text-decoration: none;
padding: 5px 11px;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #cdbfa0;
}
.mt-shell-admin-exit:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.4);
}
@media (max-width: 860px) {
.mt-shell {
grid-template-columns: 1fr;
}
.mt-shell-sidebar {
position: sticky;
top: 0;
z-index: 10;
height: auto;
border-right: none;
border-bottom: 1px solid var(--line);
}
.mt-shell--admin .mt-shell-sidebar {
border-bottom: 1px solid #3a2f1a;
}
.mt-shell-topbar {
padding: 12px 18px;
}
.mt-shell-content {
padding: 20px 18px 64px;
}
.mt-shell-mobile-toggle {
display: inline-flex;
}
.mt-shell-brand-row {
border-bottom: none;
margin-bottom: 0;
}
.mt-shell-nav-wrap {
display: none;
}
.mt-shell-nav-wrap.open {
display: block;
border-top: 1px solid var(--line);
padding-top: 12px;
margin-top: 8px;
}
.mt-shell--admin .mt-shell-nav-wrap.open {
border-top-color: #3a2f1a;
}
}
.mt-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 11px;
font-size: 12.5px;
font-weight: 500;
border-radius: 99px;
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--ink-2);
cursor: pointer;
transition: all 100ms var(--ease);
user-select: none;
line-height: 1.4;
font-feature-settings: "ss01";
}
.mt-chip:hover {
border-color: var(--ink-3);
color: var(--ink);
}
.mt-chip.on {
background: var(--ink);
color: var(--surface);
border-color: var(--ink);
font-weight: 600;
}
.mt-chip.on:hover {
background: var(--brand-deep);
border-color: var(--brand-deep);
}
.mt-chip.muted {
color: var(--ink-4);
border-style: dashed;
border-color: var(--line-2);
}
.mt-chip.sm {
font-size: 11px;
padding: 3px 9px;
}
.mt-chip-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.mt-rn {
font-family: var(--serif);
font-style: italic;
font-feature-settings: "ss01";
}
.mt-segment {
display: inline-flex;
padding: 3px;
background: var(--paper-warm);
border: 1px solid var(--line-2);
border-radius: 99px;
gap: 0;
}
.mt-segment-btn {
border: none;
background: transparent;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
color: var(--ink-3);
padding: 5px 14px;
border-radius: 99px;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: all 150ms var(--ease);
}
.mt-segment-btn:hover {
color: var(--ink);
}
.mt-segment-btn.on {
background: var(--surface);
color: var(--ink);
font-weight: 600;
box-shadow: var(--shadow-sm);
}
.mt-segment-badge {
font-size: 10px;
background: var(--brand);
color: #fff;
padding: 1px 6px;
border-radius: 99px;
font-weight: 600;
}
.mt-toggle-row {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 8px;
border: 1px solid var(--line-2);
border-radius: 99px;
background: var(--surface);
cursor: pointer;
transition: all 120ms var(--ease);
font-family: var(--sans);
margin-top: 8px;
margin-right: 6px;
}
.mt-toggle-row:hover {
border-color: var(--ink-3);
background: var(--paper-warm);
}
.mt-toggle-row.on {
border-color: var(--brand);
background: var(--brand-tint);
}
.mt-toggle-row.on .mt-toggle-sub {
color: var(--brand-deep);
}
.mt-toggle-check {
width: 16px;
height: 16px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--ink-3);
background: var(--surface);
display: grid;
place-items: center;
color: #fff;
flex-shrink: 0;
margin-top: 1px;
transition: all 120ms var(--ease);
}
.mt-toggle-check.on {
border-color: var(--brand);
background: var(--brand);
}
.mt-toggle-label {
font-size: 12.5px;
font-weight: 500;
color: var(--ink);
}
.mt-toggle-sub {
font-family: var(--serif);
font-style: italic;
font-size: 12px;
color: var(--ink-3);
font-feature-settings: "ss01";
}
.mt-wheel {
display: inline-flex;
flex-direction: column;
align-items: center;
user-select: none;
--wheel-accent: var(--brand);
}
.mt-wheel-label {
font-family: var(--serif);
font-style: italic;
font-size: 13px;
color: var(--ink-2);
margin-bottom: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.mt-wheel-label-sym {
font-family: var(--serif);
font-style: normal;
font-weight: 600;
font-size: 17px;
line-height: 1;
}
.mt-wheel-frame {
position: relative;
width: 72px;
height: 96px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--line-2);
box-shadow: inset 0 6px 8px -4px rgba(15, 23, 41, 0.08), inset 0 -6px 8px -4px rgba(15, 23, 41, 0.08);
overflow: hidden;
}
.mt-wheel-frame::before, .mt-wheel-frame::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 32px;
pointer-events: none;
z-index: 2;
}
.mt-wheel-frame::before {
top: 0;
background: linear-gradient(to bottom, var(--surface) 30%, rgba(255, 255, 255, 0));
}
.mt-wheel-frame::after {
bottom: 0;
background: linear-gradient(to top, var(--surface) 30%, rgba(255, 255, 255, 0));
}
.mt-wheel-center {
position: absolute;
top: 32px;
height: 32px;
left: 4px;
right: 4px;
border-top: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
background: var(--brand-tint);
pointer-events: none;
z-index: 1;
}
.mt-wheel-track {
position: relative;
z-index: 1;
height: 100%;
overflow-y: auto;
scroll-snap-type: y mandatory;
scrollbar-width: none;
scroll-behavior: smooth;
}
.mt-wheel-track::-webkit-scrollbar {
display: none;
}
.mt-wheel-pad {
height: 32px;
}
.mt-wheel-item {
height: 32px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: center;
font-family: var(--serif);
font-size: 16px;
font-weight: 500;
color: var(--ink-4);
cursor: pointer;
transition: color 160ms var(--ease), font-size 160ms var(--ease);
}
.mt-wheel-item:hover {
color: var(--ink-2);
}
.mt-wheel-item.on {
color: var(--ink);
font-size: 22px;
font-weight: 600;
}
.mt-wheel-item.on:hover {
color: var(--ink);
}
.mt-wheel-btns {
display: flex;
gap: 4px;
margin-top: 6px;
}
.mt-wheel-btn {
width: 32px;
height: 24px;
border-radius: 6px;
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--ink-2);
font-family: var(--sans);
font-size: 16px;
font-weight: 500;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
transition: all 120ms var(--ease);
}
.mt-wheel-btn:hover {
background: var(--paper-warm);
color: var(--ink);
border-color: var(--ink-3);
}
.mt-wheel-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.mt-wheel-btn:disabled:hover {
background: var(--surface);
}
.mt-hscale {
display: flex;
align-items: center;
width: 100%;
--scale-accent: var(--brand);
}
.mt-hscale-frame {
position: relative;
flex: 1;
height: 46px;
border-radius: 8px;
background: var(--surface);
border: 1px solid var(--line-2);
overflow: hidden;
box-shadow: inset 5px 0 6px -4px rgba(15, 23, 41, 0.08), inset -5px 0 6px -4px rgba(15, 23, 41, 0.08);
}
.mt-hscale-frame::before, .mt-hscale-frame::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 32px;
pointer-events: none;
z-index: 2;
}
.mt-hscale-frame::before {
left: 0;
background: linear-gradient(to right, var(--surface), rgba(255, 255, 255, 0));
}
.mt-hscale-frame::after {
right: 0;
background: linear-gradient(to left, var(--surface), rgba(255, 255, 255, 0));
}
.mt-hscale-center {
position: absolute;
top: 4px;
bottom: 4px;
left: calc(50% - 21px);
width: 42px;
border-radius: 6px;
border: 1px solid var(--scale-accent);
background: color-mix(in srgb, var(--scale-accent) 9%, transparent);
pointer-events: none;
z-index: 1;
}
.mt-hscale-track {
display: flex;
align-items: center;
height: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
position: relative;
z-index: 1;
}
.mt-hscale-track::-webkit-scrollbar {
display: none;
}
.mt-hscale-pad {
flex: 0 0 calc(50% - 18px);
height: 100%;
}
.mt-hscale-item {
flex: 0 0 36px;
height: 100%;
scroll-snap-align: center;
display: grid;
place-items: center;
font-family: var(--serif);
font-weight: 500;
color: var(--ink-4);
cursor: pointer;
transition: color 140ms var(--ease), font-size 140ms var(--ease);
gap: 1px;
}
.mt-hscale-item:hover {
color: var(--ink-2);
}
.mt-hscale-item.on {
font-weight: 700;
color: var(--ink);
}
.mt-hscale-num {
font-size: 14px;
font-weight: 600;
line-height: 1;
}
.mt-hscale-item.on .mt-hscale-num {
font-size: 18px;
color: var(--scale-accent);
}
.mt-hscale-suffix {
font-size: 9.5px;
opacity: 0.55;
line-height: 1;
margin-top: 1px;
}
.mt-hscale-item.on .mt-hscale-suffix {
color: var(--scale-accent);
opacity: 0.8;
}
.mt-hwheel {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.mt-hwheel-btn {
width: 32px;
height: 56px;
border-radius: 8px;
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--ink-2);
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: all 120ms var(--ease);
flex-shrink: 0;
}
.mt-hwheel-btn:hover {
background: var(--paper-warm);
color: var(--ink);
border-color: var(--ink-3);
}
.mt-hwheel-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.mt-hwheel-btn:disabled:hover {
background: var(--surface);
}
.mt-hwheel-frame {
position: relative;
flex: 1;
height: 56px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--line-2);
overflow: hidden;
box-shadow: inset 6px 0 8px -4px rgba(15, 23, 41, 0.08), inset -6px 0 8px -4px rgba(15, 23, 41, 0.08);
}
.mt-hwheel-frame::before, .mt-hwheel-frame::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 38px;
pointer-events: none;
z-index: 2;
}
.mt-hwheel-frame::before {
left: 0;
background: linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0));
}
.mt-hwheel-frame::after {
right: 0;
background: linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0));
}
.mt-hwheel-frame--count {
height: 50px;
}
.mt-hwheel-center {
position: absolute;
top: 6px;
bottom: 6px;
left: calc(50% - 24px);
width: 48px;
border-radius: 6px;
border: 1px solid var(--brand);
background: var(--brand-tint);
pointer-events: none;
z-index: 1;
}
.mt-hwheel-center--count {
left: calc(50% - 28px);
width: 56px;
}
.mt-hwheel-center--speed {
left: calc(50% - 46px);
width: 92px;
}
.mt-hwheel-track {
display: flex;
align-items: center;
height: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
position: relative;
z-index: 1;
}
.mt-hwheel-track::-webkit-scrollbar {
display: none;
}
.mt-hwheel-pad {
flex: 0 0 calc(50% - 19px);
height: 100%;
}
.mt-hwheel-pad--count {
flex: 0 0 calc(50% - 22px);
}
.mt-hwheel-pad--speed {
flex: 0 0 calc(50% - 44px);
}
.mt-hwheel-item {
flex: 0 0 38px;
height: 100%;
scroll-snap-align: center;
display: grid;
place-items: center;
font-family: var(--serif);
font-weight: 500;
font-size: 13px;
color: var(--ink-4);
cursor: pointer;
transition: color 140ms var(--ease), font-size 140ms var(--ease);
}
.mt-hwheel-item.flat {
color: color-mix(in srgb, var(--brand-2) 70%, var(--ink-4));
}
.mt-hwheel-item.sharp {
color: color-mix(in srgb, var(--brand) 70%, var(--ink-4));
}
.mt-hwheel-item.natural {
color: var(--ink-4);
}
.mt-hwheel-item:hover {
color: var(--ink-2);
}
.mt-hwheel-item.on {
font-size: 18px;
font-weight: 600;
color: var(--ink);
}
.mt-hwheel-item.on.flat {
color: var(--brand-2);
}
.mt-hwheel-item.on.sharp {
color: var(--brand-deep);
}
.mt-hwheel-item.on:hover {
color: var(--ink);
}
.mt-hwheel-item--count {
flex: 0 0 44px;
font-size: 14px;
}
.mt-hwheel-item--count.on {
font-size: 22px;
color: var(--ink);
}
.mt-hwheel-item--speed {
flex: 0 0 88px;
font-size: 13px;
}
.mt-hwheel-item--speed.on {
font-size: 14px;
font-weight: 700;
color: var(--ink);
}
.mt-hwheel-readout {
font-family: var(--serif);
font-style: italic;
font-size: 13px;
color: var(--ink-2);
text-align: center;
margin-top: 10px;
}
.mt-hwheel-readout b {
font-family: var(--serif);
font-style: normal;
font-weight: 700;
color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
.mt-wheel-track,
.mt-hscale-track,
.mt-hwheel-track {
scroll-behavior: auto;
}
}
.mt-modal-dialog .mud-dialog-content {
padding: 0;
}
.mt-modal-dialog .mud-dialog-title {
display: none;
}
.mt-modal {
display: flex;
flex-direction: column;
background: var(--surface);
border-radius: var(--radius-lg);
overflow: hidden;
}
.mt-modal-head {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 22px 14px;
border-bottom: 1px solid var(--line);
}
.mt-modal-head.tone-danger .mt-modal-ico {
background: var(--err);
color: #fff;
}
.mt-modal-head.tone-warn .mt-modal-ico {
background: var(--warn);
color: #fff;
}
.mt-modal-head.tone-neutral .mt-modal-ico {
background: var(--ink);
color: var(--paper);
}
.mt-modal-ico {
width: 32px;
height: 32px;
border-radius: 99px;
display: grid;
place-items: center;
font-family: var(--serif);
font-weight: 700;
font-size: 16px;
flex-shrink: 0;
}
.mt-modal-title {
font-family: var(--serif);
font-weight: 600;
font-size: 19px;
letter-spacing: -0.01em;
margin: 0;
}
.mt-modal-body {
padding: 14px 22px 18px;
font-family: var(--sans);
font-size: 13px;
line-height: 1.6;
color: var(--ink-2);
}
.mt-modal-body code {
font-family: var(--mono);
font-size: 11.5px;
background: var(--paper-warm);
padding: 1px 6px;
border-radius: 3px;
color: var(--ink);
}
.mt-modal-text {
margin: 0;
}
.mt-modal-typecheck {
display: block;
margin-top: 14px;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-2);
}
.mt-modal-typecheck span {
display: block;
margin-bottom: 4px;
}
.mt-modal-typecheck-input {
width: 100%;
font-family: var(--mono);
font-size: 13px;
padding: 8px 12px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink);
}
.mt-modal-typecheck-input:focus {
outline: 2px solid var(--err);
outline-offset: 1px;
}
.mt-modal-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
border-top: 1px solid var(--line);
background: var(--surface-2);
}
.mt-modal-foot-spacer {
flex: 1;
}
.mt-modal-btn {
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--ink);
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
padding: 8px 14px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 120ms var(--ease);
white-space: nowrap;
}
.mt-modal-btn:hover {
background: var(--paper-warm);
border-color: var(--ink-3);
}
.mt-modal-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.mt-modal-btn.ghost {
background: transparent;
border-color: transparent;
color: var(--ink-2);
}
.mt-modal-btn.ghost:hover {
background: rgba(15, 23, 41, 0.05);
color: var(--ink);
}
.mt-modal-btn.confirm {
border-color: transparent;
color: #fff;
font-weight: 600;
}
.mt-modal-btn.confirm.tone-danger {
background: var(--err);
}
.mt-modal-btn.confirm.tone-danger:hover {
background: color-mix(in srgb, var(--err) 86%, #000);
}
.mt-modal-btn.confirm.tone-warn {
background: var(--warn);
}
.mt-modal-btn.confirm.tone-warn:hover {
background: color-mix(in srgb, var(--warn) 86%, #000);
}
.mt-modal-btn.confirm.tone-neutral {
background: var(--ink);
color: var(--paper);
}
.mt-modal-btn.confirm.tone-neutral:hover {
background: var(--brand-deep);
}
.mud-dialog.mt-drawer-dialog {
height: 100vh;
max-height: 100vh;
width: min(480px, 92vw);
max-width: min(480px, 92vw);
margin: 0;
border-radius: 0;
border-left: 1px solid var(--line);
box-shadow: -16px 0 40px rgba(15, 23, 41, 0.12);
animation: mt-drawer-slide-in 280ms var(--ease-out);
}
.mud-dialog-container.mud-dialog-centerright:has(.mt-drawer-dialog) {
align-items: stretch;
justify-content: flex-end;
padding: 0;
}
.mud-dialog.mt-drawer-dialog .mud-dialog-content {
padding: 0;
margin: 0;
overflow: hidden;
}
.mud-dialog.mt-drawer-dialog .mud-dialog-title {
display: none;
}
@keyframes mt-drawer-slide-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.mud-dialog.mt-drawer-dialog {
animation: none;
}
}
.mt-drawer {
display: flex;
flex-direction: column;
height: 100%;
background: var(--surface);
}
.mt-drawer-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 20px 22px 16px;
border-bottom: 1px solid var(--line);
}
.mt-drawer-eyebrow {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--brand);
font-weight: 700;
margin-bottom: 4px;
}
.mt-drawer-title {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.01em;
margin: 0;
line-height: 1.1;
}
.mt-drawer-sub {
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-3);
margin: 4px 0 0;
line-height: 1.45;
}
.mt-drawer-close {
width: 30px;
height: 30px;
border-radius: 99px;
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--ink-2);
font-size: 18px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
flex-shrink: 0;
transition: all 120ms var(--ease);
}
.mt-drawer-close:hover {
background: var(--paper-warm);
color: var(--ink);
border-color: var(--ink-3);
}
.mt-drawer-body {
flex: 1;
overflow-y: auto;
padding: 18px 22px 22px;
}
.mt-drawer-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
border-top: 1px solid var(--line);
background: var(--surface-2);
}
.mt-drawer-mode-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 14px 22px 4px;
}
.mt-drawer-mode {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
background: var(--surface);
cursor: pointer;
font-family: var(--sans);
text-align: left;
transition: all 140ms var(--ease);
}
.mt-drawer-mode:hover {
border-color: var(--ink-3);
background: var(--paper-warm);
}
.mt-drawer-mode.on {
border-color: var(--brand);
background: var(--brand-tint);
box-shadow: 0 0 0 1px var(--brand);
}
.mt-drawer-mode-ico {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--paper-warm);
display: grid;
place-items: center;
font-size: 15px;
flex-shrink: 0;
}
.mt-drawer-mode.on .mt-drawer-mode-ico {
background: var(--brand);
color: #fff;
}
.mt-drawer-mode-ttl {
font-family: var(--serif);
font-weight: 600;
font-size: 13.5px;
color: var(--ink);
}
.mt-drawer-mode-sub {
font-size: 11px;
color: var(--ink-3);
font-family: var(--serif);
font-style: italic;
margin-top: 1px;
}
.mt-disclosure {
border: 1px solid var(--line-2);
border-radius: var(--radius-md);
background: var(--surface);
margin-top: 10px;
}
.mt-disclosure--open {
border-color: var(--brand);
}
.mt-disclosure--open .mt-disclosure-chevron {
transform: rotate(90deg);
color: var(--brand);
}
.mt-disclosure-head {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
font-family: var(--sans);
color: var(--ink);
}
.mt-disclosure-head:hover {
background: var(--paper-warm);
}
.mt-disclosure-chevron {
display: inline-grid;
place-items: center;
width: 16px;
height: 16px;
color: var(--ink-3);
transition: transform 140ms var(--ease), color 140ms var(--ease);
flex-shrink: 0;
}
.mt-disclosure-label {
display: inline-flex;
align-items: baseline;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
}
.mt-disclosure-title {
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
.mt-disclosure-sub {
font-family: var(--serif);
font-style: italic;
font-size: 12px;
color: var(--ink-3);
}
.mt-disclosure-count {
font-size: 11px;
font-weight: 600;
color: var(--brand-deep);
background: var(--brand-tint);
border-radius: 99px;
padding: 1px 8px;
flex-shrink: 0;
}
.mt-disclosure-body {
padding: 4px 14px 14px 30px;
border-top: 1px solid var(--line-2);
}
.mt-tweaks-panel {
position: fixed;
width: 280px;
max-height: calc(100vh - 96px);
overflow-y: auto;
background: color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter: blur(12px);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
z-index: 1300;
font-family: var(--sans);
}
.mt-tweaks-panel.mt-theme-panel {
top: 64px;
right: 16px;
bottom: auto;
}
.mt-tweaks-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--line-2);
}
.mt-tweaks-title {
font-family: var(--serif);
font-size: 16px;
font-weight: 600;
color: var(--ink);
}
.mt-tweaks-close {
background: transparent;
border: 0;
cursor: pointer;
font-size: 18px;
color: var(--ink-3);
width: 24px;
height: 24px;
display: grid;
place-items: center;
border-radius: var(--radius-sm);
}
.mt-tweaks-close:hover {
background: var(--line-3);
color: var(--ink);
}
.mt-tweaks-body {
padding: 14px 16px;
}
.mt-tweaks-section {
margin-bottom: 18px;
}
.mt-tweaks-section-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 8px;
}
.mt-tweaks-swatch-strip {
display: flex;
gap: 6px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.mt-tweaks-swatch-btn {
display: flex;
gap: 2px;
padding: 4px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color 140ms var(--ease), transform 140ms var(--ease);
}
.mt-tweaks-swatch-btn:hover {
border-color: var(--ink-3);
transform: translateY(-1px);
}
.mt-tweaks-swatch-btn--active {
border-color: var(--brand);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent);
}
.mt-tweaks-swatch {
width: 14px;
height: 14px;
border-radius: 3px;
display: block;
}
.mt-tweaks-swatch[data-theme=editorial].mt-tweaks-swatch--brand {
background: #1565c0;
}
.mt-tweaks-swatch[data-theme=editorial].mt-tweaks-swatch--brand-2 {
background: #ff8f00;
}
.mt-tweaks-swatch[data-theme=editorial].mt-tweaks-swatch--paper {
background: #fafaf7;
border: 1px solid var(--line);
}
.mt-tweaks-swatch[data-theme=modern].mt-tweaks-swatch--brand {
background: #4f46e5;
}
.mt-tweaks-swatch[data-theme=modern].mt-tweaks-swatch--brand-2 {
background: #fb7185;
}
.mt-tweaks-swatch[data-theme=modern].mt-tweaks-swatch--paper {
background: #fafafa;
border: 1px solid var(--line);
}
.mt-tweaks-swatch[data-theme=manuscript].mt-tweaks-swatch--brand {
background: #92400e;
}
.mt-tweaks-swatch[data-theme=manuscript].mt-tweaks-swatch--brand-2 {
background: #a16207;
}
.mt-tweaks-swatch[data-theme=manuscript].mt-tweaks-swatch--paper {
background: #fbf6e6;
}
.mt-tweaks-swatch[data-theme=workhorse].mt-tweaks-swatch--brand {
background: #0e7c66;
}
.mt-tweaks-swatch[data-theme=workhorse].mt-tweaks-swatch--brand-2 {
background: #ca8a04;
}
.mt-tweaks-swatch[data-theme=workhorse].mt-tweaks-swatch--paper {
background: #fafaf9;
border: 1px solid var(--line);
}
.mt-tweaks-swatch[data-theme=mono].mt-tweaks-swatch--brand {
background: #0a0a0a;
}
.mt-tweaks-swatch[data-theme=mono].mt-tweaks-swatch--brand-2 {
background: #dc2626;
}
.mt-tweaks-swatch[data-theme=mono].mt-tweaks-swatch--paper {
background: #ffffff;
border: 1px solid var(--line);
}
.mt-tweaks-select {
width: 100%;
padding: 8px 10px;
font-family: var(--sans);
font-size: 13px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
color: var(--ink);
}
.mt-tweaks-select:focus {
outline: 2px solid var(--brand);
outline-offset: -1px;
}
.mt-tweaks-font-preview {
display: flex;
align-items: baseline;
gap: 10px;
padding: 10px 14px;
margin-top: 8px;
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
}
.mt-tweaks-font-serif {
font-family: var(--serif);
font-size: 22px;
color: var(--ink);
}
.mt-tweaks-font-sans {
font-family: var(--sans);
font-size: 14px;
color: var(--ink-3);
}
.mt-tweaks-toggle {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
color: var(--ink);
}
.mt-tweaks-toggle input[type=checkbox] {
width: 16px;
height: 16px;
cursor: pointer;
}
.mt-tweaks-anon-hint {
font-size: 11.5px;
color: var(--ink-3);
font-style: italic;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--line-3);
}
.mt-opt-section {
padding: 14px 0;
border-bottom: 1px solid var(--line-3);
}
.mt-opt-section:last-child {
border-bottom: none;
}
.mt-opt-section.flush-top {
padding-top: 0;
}
.mt-opt-label {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
color: var(--ink);
margin-bottom: 10px;
}
.mt-opt-hint {
font-size: 11px;
color: var(--ink-3);
margin-bottom: 8px;
}
.mt-input-mode-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.mt-input-mode-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
background: var(--surface);
cursor: pointer;
font-family: var(--sans);
text-align: left;
transition: all 140ms var(--ease);
}
.mt-input-mode-card:hover {
border-color: var(--ink-3);
background: var(--paper-warm);
}
.mt-input-mode-card.on {
border-color: var(--brand);
background: var(--brand-tint);
box-shadow: 0 0 0 1px var(--brand);
}
.mt-input-mode-glyph {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--paper-warm);
display: grid;
place-items: center;
font-family: var(--serif);
font-size: 18px;
color: var(--ink-2);
flex-shrink: 0;
}
.mt-input-mode-card.on .mt-input-mode-glyph {
background: var(--brand);
color: #fff;
}
.mt-input-mode-ttl {
font-family: var(--serif);
font-weight: 600;
font-size: 13.5px;
color: var(--ink);
}
.mt-input-mode-sub {
font-size: 11px;
color: var(--ink-3);
font-family: var(--serif);
font-style: italic;
margin-top: 1px;
}
.mt-input-voicing-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
}
.mt-input-voicing-chip {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 8px 10px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
background: var(--surface);
cursor: pointer;
font-family: var(--sans);
text-align: left;
transition: all 140ms var(--ease);
}
.mt-input-voicing-chip:hover {
border-color: var(--ink-3);
background: var(--paper-warm);
}
.mt-input-voicing-chip.on {
border-color: var(--brand);
background: var(--brand-tint);
box-shadow: 0 0 0 1px var(--brand);
}
.mt-input-voicing-ttl {
font-family: var(--serif);
font-weight: 600;
font-size: 13px;
color: var(--ink);
}
.mt-input-voicing-sub {
font-size: 10.5px;
color: var(--ink-3);
font-family: var(--serif);
font-style: italic;
}
.mt-iv-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 1fr 1fr;
gap: 6px;
}
.mt-iv-cell {
padding: 10px 0;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
background: var(--surface);
cursor: pointer;
font-family: var(--serif);
font-weight: 500;
font-size: 14px;
color: var(--ink-3);
transition: all 120ms var(--ease);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}
.mt-iv-cell:hover {
border-color: var(--ink-3);
color: var(--ink);
}
.mt-iv-cell.on {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
font-weight: 700;
}
.mt-iv-cell.on.perfect {
background: var(--brand);
border-color: var(--brand);
}
.mt-iv-cell.on.major {
background: var(--brand-deep);
border-color: var(--brand-deep);
}
.mt-iv-cell.on.minor {
background: color-mix(in srgb, var(--brand) 60%, var(--ink-2));
border-color: color-mix(in srgb, var(--brand) 60%, var(--ink-2));
}
.mt-iv-cell.on.tt {
background: var(--brand-2);
border-color: var(--brand-2);
}
.mt-iv-cell-name {
line-height: 1;
}
.mt-iv-cell-sub {
font-family: var(--mono);
font-size: 9.5px;
opacity: 0.6;
font-weight: 400;
letter-spacing: 0.02em;
}
.mt-iv-cell.on .mt-iv-cell-sub {
opacity: 0.8;
}
.mt-opt-quickpicks {
margin-top: 10px;
}
.mt-range-track {
position: relative;
height: 36px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
padding: 0 12px;
}
.mt-range-fill {
position: absolute;
top: 4px;
bottom: 4px;
background: var(--brand-tint);
border: 1px solid var(--brand);
border-radius: 4px;
}
.mt-range-tick {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
flex: 1;
text-align: center;
position: relative;
z-index: 1;
}
.mt-gen-bins {
display: flex;
flex-direction: column;
gap: 12px;
}
.mt-gen-bin-head {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
}
.mt-gen-bin-label {
font-family: var(--serif);
font-weight: 600;
font-size: 13px;
color: var(--ink);
}
.mt-gen-bin-tag {
font-family: var(--serif);
font-style: italic;
font-size: 11.5px;
padding: 1px 8px;
border-radius: 99px;
}
.mt-gen-bin-tag.major {
color: var(--brand-deep);
background: var(--brand-tint);
}
.mt-gen-bin-tag.minor {
color: var(--brand-2);
background: var(--brand-2-tint);
}
.mt-gen-bin-count {
font-size: 11px;
color: var(--ink-3);
margin-left: auto;
}
.mt-slot-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.mt-slot-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface-2);
}
.mt-slot-num {
font-family: var(--serif);
font-style: italic;
font-weight: 600;
font-size: 13px;
color: var(--ink-3);
width: 18px;
text-align: center;
}
.mt-slot-rn {
font-family: var(--serif);
font-style: italic;
font-weight: 600;
font-size: 13px;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
padding: 4px 8px;
flex-shrink: 0;
min-width: 72px;
}
.mt-slot-x {
width: 26px;
height: 26px;
margin-left: auto;
border-radius: 99px;
border: 0;
background: transparent;
color: var(--ink-3);
font-size: 18px;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
}
.mt-slot-x:hover {
background: var(--brand-2-tint);
color: var(--brand-2);
}
.mt-slot-x:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.mt-slot-x:disabled:hover {
background: transparent;
color: var(--ink-3);
}
.mt-opt-add {
margin-top: 8px;
padding: 5px 11px;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
background: transparent;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 100ms var(--ease);
}
.mt-opt-add:hover {
border-color: var(--ink-3);
color: var(--ink);
background: var(--paper-warm);
}
.mt-opt-mode-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.mt-opt-mode {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
background: var(--surface);
cursor: pointer;
font-family: var(--sans);
text-align: left;
transition: all 140ms var(--ease);
}
.mt-opt-mode:hover {
border-color: var(--ink-3);
}
.mt-opt-mode.on {
border-color: var(--brand);
background: var(--brand-tint);
box-shadow: 0 0 0 1px var(--brand);
}
.mt-opt-mode-ico {
width: 26px;
height: 26px;
border-radius: 5px;
background: var(--paper-warm);
display: grid;
place-items: center;
font-size: 14px;
flex-shrink: 0;
}
.mt-opt-mode.on .mt-opt-mode-ico {
background: var(--brand);
color: #fff;
}
.mt-opt-mode-ttl {
font-family: var(--serif);
font-weight: 600;
font-size: 13.5px;
color: var(--ink);
}
.mt-opt-mode-sub {
font-size: 10.5px;
color: var(--ink-3);
font-family: var(--serif);
font-style: italic;
}
.mt-opt-empty {
font-size: 12.5px;
color: var(--ink-3);
font-style: italic;
font-family: var(--serif);
line-height: 1.5;
margin: 0;
}
.mt-drawer-footer-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.mt-lesson-body {
max-width: 820px;
margin: 0 auto;
}
.mt-block {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 18px 22px 20px;
position: relative;
transition: all 160ms var(--ease);
}
.mt-block:hover {
border-color: var(--line-2);
box-shadow: var(--shadow-sm);
}
.mt-block.kind-notation .mt-block-badge {
color: var(--brand);
}
.mt-block.kind-exercise .mt-block-badge {
color: var(--brand-2);
}
.mt-block.kind-audio .mt-block-badge {
color: #2a7a3a;
}
.mt-block.kind-example .mt-block-badge {
color: #6b5b95;
}
.mt-block:hover .mt-block-actions {
opacity: 1;
}
.mt-block-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.mt-block-badge {
font-family: var(--sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--ink-3);
text-transform: uppercase;
}
.mt-block-actions {
display: flex;
gap: 1px;
opacity: 0;
transition: opacity 140ms var(--ease);
}
.mt-block-act {
width: 26px;
height: 26px;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--ink-3);
display: grid;
place-items: center;
cursor: pointer;
transition: all 120ms var(--ease);
}
.mt-block-act:hover {
background: var(--paper-warm);
color: var(--ink);
}
.mt-block-act:disabled {
opacity: 0.25;
cursor: not-allowed;
}
.mt-block-act:disabled:hover {
background: transparent;
color: var(--ink-3);
}
.mt-block-act.danger:hover {
background: var(--brand-2-tint);
color: var(--brand-2);
}
.mt-block-body {
font-family: var(--serif);
}
.mt-block-insert {
display: flex;
align-items: center;
gap: 10px;
margin: 6px 0;
min-height: 14px;
opacity: 0;
transition: opacity 160ms var(--ease);
position: relative;
}
.mt-block-insert.visible, .mt-block-insert.open {
opacity: 1;
}
.mt-block-insert-rule {
flex: 1;
height: 1px;
background: var(--line);
}
.mt-block-insert-pill {
font-family: var(--sans);
font-size: 11.5px;
font-weight: 600;
color: var(--ink-2);
background: var(--surface);
border: 1px solid var(--line-2);
padding: 4px 12px 4px 8px;
border-radius: 99px;
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
transition: all 130ms var(--ease);
white-space: nowrap;
}
.mt-block-insert-pill:hover {
border-color: var(--brand);
color: var(--brand);
box-shadow: var(--shadow-sm);
}
.mt-block-insert-pill .mt-block-insert-plus {
width: 16px;
height: 16px;
border-radius: 99px;
background: var(--ink);
color: var(--paper);
display: inline-grid;
place-items: center;
font-size: 13px;
line-height: 1;
font-weight: 600;
}
.mt-block-insert-pill:hover .mt-block-insert-plus {
background: var(--brand);
}
.mt-block-type-picker {
display: flex;
flex-direction: column;
gap: 8px;
}
.mt-block-insert-menu {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: var(--radius-lg);
padding: 14px;
box-shadow: var(--shadow);
flex: 1;
}
.mt-block-insert-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 12px 16px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
background: var(--surface);
cursor: pointer;
text-align: left;
font-family: var(--sans);
transition: all 140ms var(--ease);
width: 100%;
}
.mt-block-insert-item:hover {
border-color: var(--brand);
background: var(--brand-tint);
box-shadow: 0 1px 0 var(--brand);
transform: translateY(-1px);
}
.mt-block-insert-item:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.mt-block-insert-item:active {
transform: translateY(0);
}
.mt-block-insert-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--paper-warm);
color: var(--ink-2);
display: grid;
place-items: center;
font-family: var(--serif);
font-weight: 700;
font-size: 18px;
flex-shrink: 0;
}
.mt-block-insert-icon.kind-text {
background: var(--ink-2);
color: var(--paper);
}
.mt-block-insert-icon.kind-notation {
background: var(--brand);
color: #fff;
}
.mt-block-insert-icon.kind-exercise {
background: var(--brand-2);
color: #fff;
}
.mt-block-insert-icon.kind-audio {
background: #2a7a3a;
color: #fff;
}
.mt-block-insert-icon.kind-example {
background: #6b5b95;
color: #fff;
}
.mt-block-insert-icon.kind-pdf {
background: #b04a3b;
color: #fff;
}
.mt-block-insert-icon.kind-pdf-example {
background: #8b5a2b;
color: #fff;
}
.mt-block-insert-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.mt-block-insert-lbl {
font-family: var(--serif);
font-weight: 600;
font-size: 14.5px;
color: var(--ink);
line-height: 1.25;
}
.mt-block-insert-desc {
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
line-height: 1.4;
}
.mt-block-text {
font-family: var(--serif);
font-size: 15px;
line-height: 1.65;
color: var(--ink);
min-height: 24px;
padding: 2px 0;
}
.mt-block-text em {
font-style: italic;
color: var(--ink-2);
}
.mt-block-text strong {
font-weight: 600;
}
.mt-block-text.mt-block-example {
font-style: italic;
color: var(--ink-2);
}
.mt-block-text-inline-preview {
display: block;
width: 100%;
border-radius: 6px;
padding: 2px 6px;
margin: -2px -6px;
cursor: text;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.mt-block-text-inline-preview:hover, .mt-block-text-inline-preview:focus-visible {
background-color: var(--surface-2, rgba(0, 0, 0, 0.03));
outline: none;
box-shadow: 0 0 0 1px var(--border, rgba(0, 0, 0, 0.08));
}
.mt-block-text-inline-preview--frozen {
cursor: default;
}
.mt-block-text-inline-preview--frozen:hover {
background-color: transparent;
box-shadow: none;
}
.mt-block-text-inline-empty {
color: var(--ink-3, #888);
font-family: var(--serif);
font-size: 15px;
font-style: italic;
}
.mt-block-text-inline-editor {
display: flex;
flex-direction: column;
gap: 10px;
margin: -2px -6px;
padding: 8px 6px 6px;
border-radius: 6px;
background-color: var(--surface-2, rgba(0, 0, 0, 0.03));
box-shadow: 0 0 0 1px var(--border, rgba(0, 0, 0, 0.12));
}
.mt-block-text-inline-actions {
display: flex;
align-items: center;
gap: 8px;
}
.mt-block-text-inline-status {
color: var(--warning, #b07900);
font-size: 12px;
font-style: italic;
}
.mt-block-audio {
display: flex;
align-items: center;
gap: 14px;
padding: 6px 0;
}
.mt-block-audio-play {
width: 44px;
height: 44px;
border-radius: 99px;
background: var(--ink);
color: var(--paper);
border: 0;
display: grid;
place-items: center;
cursor: pointer;
flex-shrink: 0;
}
.mt-block-audio-play:hover {
background: var(--brand-deep);
}
.mt-block-audio-meta {
flex: 1;
min-width: 0;
}
.mt-block-audio-title {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
color: var(--ink);
}
.mt-block-audio-caption {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
margin-top: 1px;
}
.mt-block-audio-bar {
flex: 0 0 180px;
height: 4px;
background: var(--line);
border-radius: 99px;
overflow: hidden;
}
.mt-block-audio-bar i {
display: block;
height: 100%;
background: #2a7a3a;
}
.mt-block-audio-time {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
flex-shrink: 0;
}
.mt-block-caption {
text-align: right;
font-family: var(--serif);
font-style: italic;
font-size: 12px;
color: var(--ink-3);
margin-top: 4px;
}
.mt-block-exer {
display: flex;
align-items: center;
gap: 14px;
padding: 6px 0;
}
.mt-block-exer-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--brand-2);
color: #fff;
display: grid;
place-items: center;
flex-shrink: 0;
}
.mt-block-exer-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mt-block-exer-title {
font-family: var(--serif);
font-weight: 600;
font-size: 14.5px;
color: var(--ink);
}
.mt-block-exer-config {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
}
.mt-block-exer-edit {
display: inline-flex;
align-items: baseline;
padding: 2px 4px;
margin: -2px -4px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: text;
text-align: left;
font: inherit;
color: inherit;
transition: all 100ms var(--ease);
max-width: fit-content;
}
.mt-block-exer-edit:hover {
background: var(--paper-warm);
border-color: var(--line-2);
}
.mt-block-exer-edit:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 1px;
}
.mt-block-exer-title-input {
font-family: var(--serif);
font-weight: 600;
font-size: 14.5px;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--brand);
border-radius: var(--radius-sm);
padding: 2px 6px;
margin: -3px -7px;
width: 100%;
max-width: 100%;
outline: none;
}
.mt-block-exer-instructions {
font-family: var(--serif);
font-style: italic;
font-size: 12.5px;
color: var(--ink-2);
line-height: 1.4;
}
.mt-block-exer-instructions-empty {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-4);
font-style: italic;
opacity: 0.75;
}
.mt-block-exer-instructions-empty:hover {
opacity: 1;
}
.mt-block-exer-instructions-input {
font-family: var(--serif);
font-style: italic;
font-size: 12.5px;
color: var(--ink-2);
background: var(--surface);
border: 1px solid var(--brand);
border-radius: var(--radius-sm);
padding: 6px 8px;
width: 100%;
resize: vertical;
outline: none;
line-height: 1.4;
min-height: 48px;
}
.mt-block-exer-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
align-self: flex-start;
}
.mt-block-cpw {
display: flex;
flex-direction: column;
gap: 12px;
}
.mt-block-cpw-head {
display: flex;
align-items: center;
gap: 12px;
}
.mt-block-cpw-icon-wrap {
flex-shrink: 0;
}
.mt-block-cpw-meta {
flex: 1;
min-width: 0;
}
.mt-block-cpw-title {
font-family: var(--serif);
font-weight: 600;
font-size: 15.5px;
letter-spacing: -0.005em;
color: var(--ink);
}
.mt-block-cpw-sub {
font-family: var(--serif);
font-style: italic;
font-size: 13px;
color: var(--ink-2);
margin-top: 1px;
}
.mt-block-cpw-tag {
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
color: var(--brand-2);
background: var(--brand-2-tint);
padding: 2px 8px;
border-radius: 99px;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.mt-block-cpw-staff-wrap {
background: color-mix(in srgb, var(--brand-2) 6%, var(--surface));
border: 1px solid color-mix(in srgb, var(--brand-2) 22%, var(--line));
border-radius: var(--radius-sm);
padding: 10px 12px 6px;
}
.mt-block-cpw-staff {
display: block;
width: 100%;
height: auto;
}
.mt-block-cpw-legend {
display: flex;
gap: 18px;
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-2);
margin-top: -4px;
}
.mt-block-cpw-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.mt-block-cpw-swatch-given {
width: 10px;
height: 7.5px;
background: var(--ink);
border-radius: 50%;
display: inline-block;
}
.mt-block-cpw-swatch-blank {
width: 11px;
height: 8.5px;
border: 1.3px dashed var(--brand);
border-radius: 50%;
display: inline-block;
}
.mt-block-cpw-stats {
display: flex;
flex-wrap: wrap;
gap: 14px 22px;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
padding: 6px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.mt-block-cpw-stats b {
color: var(--ink);
font-weight: 600;
}
.mt-block-cpw-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
}
.mt-block-btn {
font-family: var(--sans);
font-size: 11.5px;
font-weight: 600;
padding: 5px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--ink-2);
cursor: pointer;
transition: all 120ms var(--ease);
}
.mt-block-btn:hover {
border-color: var(--ink-3);
color: var(--ink);
}
.mt-block-btn.accent {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.mt-block-btn.accent:hover {
background: var(--brand-deep);
border-color: var(--brand-deep);
}
.mt-lts {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding: 4px 0 22px;
border-bottom: 1px solid var(--line);
margin-bottom: 24px;
}
.mt-lts-meta {
flex: 1;
min-width: 0;
}
.mt-lts-eyebrow {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--brand);
font-weight: 700;
}
.mt-lts-title {
display: block;
width: 100%;
font-family: var(--serif);
font-weight: 600;
font-size: 30px;
letter-spacing: -0.02em;
margin: 4px 0 8px;
line-height: 1.1;
color: var(--ink);
background: transparent;
border: 0;
outline: none;
padding: 2px 0;
border-radius: 3px;
}
.mt-lts-title:focus {
background: var(--brand-tint);
padding: 2px 6px;
margin-left: -6px;
}
.mt-lts-tags {
display: flex;
gap: 14px;
font-size: 11.5px;
color: var(--ink-3);
flex-wrap: wrap;
}
.mt-lts-tags code {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-2);
}
.mt-lts-tags b {
color: var(--ink-2);
font-weight: 600;
}
.mt-lts-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.mt-btn {
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--ink);
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
padding: 8px 14px;
border-radius: var(--radius-sm);
transition: all 120ms var(--ease);
white-space: nowrap;
cursor: pointer;
text-decoration: none;
}
.mt-btn:hover {
background: var(--paper-warm);
border-color: var(--ink-3);
}
.mt-btn--primary {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
font-weight: 600;
}
.mt-btn--primary:hover {
background: var(--brand-deep);
border-color: var(--brand-deep);
}
.mt-btn--accent {
background: var(--brand);
color: #fff;
border-color: var(--brand);
font-weight: 600;
}
.mt-btn--accent:hover {
background: var(--brand-deep);
border-color: var(--brand-deep);
}
.mt-btn--ok {
background: var(--ok);
border-color: var(--ok);
color: #fff;
}
.mt-btn--ok:hover {
background: color-mix(in srgb, var(--ok) 88%, #000);
}
.mt-btn--ghost {
background: transparent;
border-color: transparent;
color: var(--ink-2);
}
.mt-btn--ghost:hover {
background: rgba(15, 23, 41, 0.05);
color: var(--ink);
}
.mt-btn--danger {
border-color: var(--err);
color: var(--err);
background: var(--surface);
}
.mt-btn--sm {
font-size: 12px;
padding: 5px 10px;
}
.mt-btn--lg {
font-size: 14px;
padding: 10px 18px;
}
.mt-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.mt-ex-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
padding: 4px 0 14px;
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
}
@media (max-width: 680px) {
.mt-ex-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
.mt-ex-eyebrow {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--brand);
}
.mt-ex-title {
font-family: var(--serif);
font-size: 30px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 4px 0;
color: var(--ink);
}
.mt-ex-tiny {
font-size: 11px;
color: var(--ink-3);
}
.mt-ex-filter-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 14px;
}
.mt-ex-filter-label {
font-size: 11px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.mt-ex-spacer {
flex: 1;
}
.mt-ex-search {
font-family: var(--sans);
font-size: 12px;
border: 1px solid var(--line-2);
padding: 6px 12px;
border-radius: 99px;
background: var(--surface);
color: var(--ink-3);
width: 220px;
}
.mt-ex-section {
margin-top: 28px;
}
.mt-ex-sec-head {
display: flex;
align-items: baseline;
justify-content: space-between;
font-family: var(--serif);
font-size: 16px;
font-weight: 600;
padding-bottom: 6px;
border-bottom: 1px solid var(--line);
margin-bottom: 12px;
}
.mt-ex-sec-sub {
font-style: italic;
font-weight: 500;
color: var(--ink-2);
}
.mt-ex-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 1000px) {
.mt-ex-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 680px) {
.mt-ex-grid {
grid-template-columns: 1fr;
}
}
.mt-ex-tile {
background: var(--surface);
border: 1px solid var(--line);
border-left: 3px solid var(--line-2);
border-radius: var(--radius);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
cursor: pointer;
text-align: left;
font-family: var(--sans);
transition: all 140ms var(--ease);
position: relative;
}
.mt-ex-tile:hover {
border-color: var(--ink-3);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.mt-ex-tile--mt {
border-left-color: var(--brand);
}
.mt-ex-tile--as {
border-left-color: var(--brand-2);
}
.mt-ex-tile--coming-soon {
cursor: default;
opacity: 0.6;
background: var(--paper-warm);
border-style: dashed;
}
.mt-ex-tile--coming-soon:hover {
border-color: var(--line);
transform: none;
box-shadow: none;
}
.mt-ex-name {
font-family: var(--serif);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--ink);
line-height: 1.2;
}
.mt-ex-desc {
font-size: 12px;
color: var(--ink-2);
line-height: 1.45;
}
.mt-ex-foot {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--ink-3);
margin-top: auto;
padding-top: 10px;
border-top: 1px solid var(--line-3);
gap: 8px;
}
.mt-ex-foot-new {
font-style: italic;
color: var(--ink-3);
}
.mt-ex-foot-soon {
font-style: italic;
color: var(--ink-4);
letter-spacing: 0.01em;
}
.mt-drill {
display: flex;
flex-direction: column;
font-family: var(--sans);
}
.mt-drill-progress {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 0 12px;
border-bottom: 1px solid var(--line);
margin-bottom: 14px;
flex-wrap: wrap;
}
.mt-drill-q {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--ink-2);
}
.mt-drill-tiny {
font-size: 11px;
color: var(--ink-3);
}
.mt-drill-streak {
font-variant-numeric: tabular-nums;
}
.mt-drill-streak--broken {
color: var(--err);
font-weight: 600;
}
.mt-drill-bar {
flex: 1;
min-width: 80px;
height: 6px;
border-radius: 99px;
background: var(--line);
overflow: hidden;
position: relative;
}
.mt-drill-bar > i {
display: block;
height: 100%;
background: var(--brand);
border-radius: 99px;
transition: width 300ms var(--ease);
}
.mt-drill-bar--ok > i {
background: var(--ok);
}
.mt-drill-body {
padding: 8px 0;
}
.mt-drill-review-banner {
background: var(--surface-2, var(--surface));
border: 1px dashed var(--line);
padding: 6px 10px;
margin-bottom: 8px;
border-radius: 4px;
font-size: 12px;
color: var(--ink-2);
}
.mt-drill-review-banner-outcome {
font-weight: 600;
}
.mt-drill-review-banner-outcome--ok {
color: var(--ok);
}
.mt-drill-review-banner-outcome--warn {
color: var(--warn);
}
.mt-drill-review-banner-outcome--err {
color: var(--err);
}
.mt-drill-fb {
border-radius: var(--radius);
padding: 14px 18px;
margin-top: 14px;
font-family: var(--sans);
}
.mt-drill-fb--correct {
background: color-mix(in srgb, var(--ok) 8%, var(--surface));
border: 1.5px solid var(--ok);
}
.mt-drill-fb--errors {
background: color-mix(in srgb, var(--err) 5%, var(--surface));
border: 1.5px solid var(--err);
}
.mt-drill-fb--warn {
background: color-mix(in srgb, var(--warn) 8%, var(--surface));
border: 1.5px solid var(--warn);
}
.mt-drill-fb-head {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
color: var(--ink);
}
.mt-drill-fb-ico {
width: 28px;
height: 28px;
border-radius: 99px;
display: grid;
place-items: center;
font-size: 16px;
color: #fff;
flex-shrink: 0;
font-weight: 700;
}
.mt-drill-fb-ico--ok {
background: var(--ok);
}
.mt-drill-fb-ico--err {
background: var(--err);
}
.mt-drill-fb-ico--warn {
background: var(--warn);
}
.mt-drill-fb-body {
margin-top: 10px;
font-size: 13px;
color: var(--ink-2);
line-height: 1.55;
}
.mt-drill-points-row {
display: flex;
justify-content: flex-end;
min-height: 18px;
margin-top: 8px;
}
.mt-drill-points {
font-size: 11.5px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.mt-drill-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 0;
border-top: 1px solid var(--line);
margin-top: 14px;
}
.mt-drill-nav-spacer {
flex: 1;
}
.mt-drill-nav-right {
display: flex;
align-items: center;
gap: 8px;
}
.mt-drill-page {
max-width: 1100px;
margin: 0 auto;
width: 100%;
padding: 18px 56px 80px;
}
@media (max-width: 960px) {
.mt-drill-page {
padding: 14px 20px 60px;
}
}
.mt-drill-page-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.mt-drill--summary {
max-width: 720px;
margin: 0 auto;
padding: 24px 24px 28px;
background: var(--paper);
border-radius: 6px;
}
.mt-drill-summary-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.mt-drill-summary-head-left {
display: flex;
flex-direction: column;
gap: 4px;
}
.mt-drill-summary-headline {
font-family: var(--serif);
font-size: 28px;
font-weight: 600;
color: var(--ink);
line-height: 1.15;
margin-top: 4px;
}
.mt-drill-summary-head-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.mt-drill-summary-score {
font-family: var(--serif);
font-size: 30px;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.mt-drill-summary-pct {
font-size: 13px;
font-weight: 500;
color: var(--ink-2);
}
.mt-drill-summary-head--excellent {
color: var(--ok);
}
.mt-drill-summary-head--excellent .mt-drill-summary-score,
.mt-drill-summary-head--excellent .mt-drill-summary-pct {
color: var(--ok);
}
.mt-drill-summary-head--good .mt-drill-summary-score,
.mt-drill-summary-head--good .mt-drill-summary-pct {
color: var(--brand);
}
.mt-drill-summary-head--warn .mt-drill-summary-score,
.mt-drill-summary-head--warn .mt-drill-summary-pct {
color: var(--warn);
}
.mt-drill-summary-head--poor .mt-drill-summary-score,
.mt-drill-summary-head--poor .mt-drill-summary-pct {
color: var(--err);
}
.mt-drill-summary-foot {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.mt-drill-summary-foot-spacer {
flex: 1;
}
.mt-drill-summary-section {
margin-top: 24px;
margin-bottom: 24px;
}
.mt-drill-summary-section-head {
font-family: var(--serif);
font-size: 17px;
font-weight: 600;
margin: 0 0 12px;
color: var(--ink);
}
.mt-drill-summary-section-head--standalone {
margin-top: 28px;
}
.mt-drill-summary-confusion-list,
.mt-drill-summary-coaching-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.mt-drill-summary-confusion-row {
padding: 10px 12px;
border: 1px solid var(--line);
border-left: 3px solid var(--err);
border-radius: var(--radius-sm);
background: var(--paper);
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 4px 12px;
align-items: center;
}
.mt-drill-summary-confusion-text {
grid-column: 1;
grid-row: 1;
font-size: 13px;
color: var(--ink);
}
.mt-drill-summary-confusion-count {
grid-column: 2;
grid-row: 1;
font-family: var(--mono);
font-weight: 600;
font-size: 13px;
color: var(--err);
white-space: nowrap;
}
.mt-drill-summary-confusion-advice {
grid-column: 1/-1;
grid-row: 2;
font-size: 12px;
color: var(--ink-3);
}
.mt-drill-summary-by-concept {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.mt-drill-summary-by-concept li {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: baseline;
padding: 6px 0;
border-bottom: 1px solid var(--line);
}
.mt-drill-summary-by-concept li:last-child {
border-bottom: none;
}
.mt-drill-summary-by-concept-label {
font-size: 13px;
color: var(--ink);
}
.mt-drill-summary-by-concept-score {
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--ink-2);
}
.mt-drill-summary-by-concept-score--ok {
color: var(--ok);
}
.mt-drill-summary-by-concept-score--warn {
color: var(--warn);
}
.mt-drill-summary-by-concept-score--err {
color: var(--err);
}
.mt-drill-summary-coaching-note {
padding: 12px 14px;
border-left: 3px solid var(--brand);
background: var(--surface);
border-radius: var(--radius-sm);
}
.mt-drill-summary-coaching-note-head {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
color: var(--brand);
margin-bottom: 4px;
}
.mt-drill-summary-coaching-note-body {
font-size: 13px;
color: var(--ink-2);
line-height: 1.5;
}
.mt-drill-summary-alert {
padding: 10px 14px;
border-radius: var(--radius-sm);
border-left: 3px solid var(--ok);
background: color-mix(in srgb, var(--ok) 6%, var(--paper));
margin-bottom: 16px;
font-size: 13px;
color: var(--ink);
}
.mt-drill-summary-alert--success {
border-left-color: var(--ok);
}
.mt-drill-satb-body {
display: flex;
gap: 24px;
align-items: flex-start;
}
@media (max-width: 900px) {
.mt-drill-satb-body {
flex-direction: column;
gap: 16px;
}
}
.mt-drill-satb-staff-col {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.mt-drill-satb-question-head {
text-align: center;
}
.mt-drill-satb-kicker {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-2);
font-weight: 600;
}
.mt-drill-satb-key {
font-family: var(--serif);
font-size: 20px;
font-weight: 600;
margin-top: 2px;
}
.mt-drill-satb-key-accidentals {
color: var(--ink-3);
font-style: italic;
}
.mt-drill-satb-rn {
font-family: var(--serif);
font-style: italic;
font-size: 54px;
font-weight: 600;
color: var(--brand);
line-height: 1.05;
margin-top: 4px;
}
.mt-drill-satb-result-head {
text-align: center;
}
.mt-drill-satb-result-header {
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
margin-top: 2px;
}
.mt-drill-satb-result-subtitle {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-2);
}
.mt-drill-satb-result-head--ok .mt-drill-satb-result-subtitle {
color: var(--ok);
}
.mt-drill-satb-staff {
padding: 12px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
}
.mt-drill-satb-staff--okay {
border-color: var(--ok);
}
.mt-drill-satb-staff--errs {
border-color: var(--err);
}
.mt-drill-satb-vstatus {
display: flex;
justify-content: center;
gap: 16px;
}
.mt-drill-satb-vstatus-line {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--ink-3);
}
.mt-drill-satb-vstatus-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--line-2);
}
.mt-drill-satb-vstatus-line--now .mt-drill-satb-vstatus-dot {
background: var(--brand);
}
.mt-drill-satb-vstatus-line--done .mt-drill-satb-vstatus-dot {
background: var(--ok);
}
.mt-drill-satb-vstatus-line--given .mt-drill-satb-vstatus-dot {
background: var(--ink-3);
opacity: 0.5;
}
.mt-drill-satb-rail {
flex: 0 0 220px;
display: flex;
flex-direction: column;
gap: 10px;
}
@media (max-width: 900px) {
.mt-drill-satb-rail {
flex: 1 1 auto;
width: 100%;
}
}
.mt-drill-satb-card {
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px;
background: var(--surface);
}
.mt-drill-satb-card--brand {
border-color: var(--brand);
}
.mt-drill-satb-card-lbl {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-3);
font-weight: 600;
}
.mt-drill-satb-card-body {
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 6px;
}
.mt-drill-satb-vrail {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
cursor: pointer;
text-align: left;
font: inherit;
color: var(--ink);
}
.mt-drill-satb-vrail:hover {
background: var(--surface);
border-color: var(--ink-3);
}
.mt-drill-satb-vrail--now {
border-color: var(--brand);
}
.mt-drill-satb-vrail--given {
opacity: 0.6;
cursor: default;
}
.mt-drill-satb-vrail-letter {
font-weight: 700;
font-size: 12px;
min-width: 14px;
}
.mt-drill-satb-vrail-pitch {
font-family: var(--mono);
font-size: 12px;
flex: 1;
}
.mt-drill-satb-vrail-chip {
font-size: 9px;
padding: 1px 6px;
border-radius: 3px;
font-weight: 700;
}
.mt-drill-satb-vrail-chip--done {
background: var(--ok);
color: #fff;
}
.mt-drill-satb-vrail-chip--now {
background: var(--brand);
color: #fff;
}
.mt-drill-satb-vrail-given {
font-size: 10px;
color: var(--ink-3);
font-style: italic;
}
.mt-drill-satb-guidelines {
gap: 4px;
}
.mt-drill-satb-guideline-line {
font-size: 12px;
color: var(--ink-2);
line-height: 1.4;
}
.mt-dash-greet-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 24px;
}
@media (max-width: 700px) {
.mt-dash-greet-row {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
.mt-dash-day {
font-size: 13px;
color: var(--ink-3);
margin-bottom: 4px;
font-family: var(--serif);
font-style: italic;
}
.mt-dash-greet-title {
font-family: var(--serif);
font-weight: 600;
font-size: 34px;
letter-spacing: -0.02em;
margin: 0;
line-height: 1.05;
color: var(--ink);
}
.mt-dash-greet-title em {
font-style: italic;
color: var(--ink-2);
font-weight: 500;
}
.mt-dash-streak {
text-align: right;
}
.mt-dash-streak-lbl {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
font-weight: 600;
margin-bottom: 4px;
}
.mt-dash-streak-num {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
color: var(--ink);
}
.mt-dash-streak-dots {
display: flex;
gap: 3px;
justify-content: flex-end;
margin-top: 5px;
}
.mt-dash-dot {
width: 9px;
height: 9px;
border-radius: 99px;
background: var(--ink);
}
.mt-dash-dot--today {
background: var(--brand);
box-shadow: 0 0 0 3px var(--brand-tint-strong);
}
.mt-dash-continue {
background: linear-gradient(135deg, var(--brand-soft) 0%, var(--paper-warm) 100%);
border: 1px solid var(--line-2);
border-radius: var(--radius-lg);
padding: 24px;
display: grid;
grid-template-columns: 1fr 280px;
gap: 28px;
align-items: center;
margin-bottom: 28px;
position: relative;
overflow: hidden;
}
.mt-dash-continue::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(var(--brand-tint) 1.5px, transparent 1.5px);
background-size: 24px 24px;
pointer-events: none;
}
@media (max-width: 700px) {
.mt-dash-continue {
grid-template-columns: 1fr;
padding: 18px;
}
}
.mt-dash-continue-left {
position: relative;
}
.mt-dash-continue-right {
position: relative;
}
.mt-dash-continue-ek {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
color: var(--brand);
margin-bottom: 6px;
}
.mt-dash-continue-title {
font-family: var(--serif);
font-weight: 600;
font-size: 26px;
letter-spacing: -0.02em;
margin: 0;
line-height: 1.1;
color: var(--ink);
}
.mt-dash-continue-title em {
font-style: italic;
color: var(--ink-2);
font-weight: 500;
}
.mt-dash-continue-meta {
font-size: 12.5px;
color: var(--ink-3);
margin: 8px 0 16px;
}
.mt-dash-continue-actions {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.mt-dash-mini-staff {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 8px 10px;
}
.mt-dash-weekly {
background: linear-gradient(135deg, var(--brand-tint-strong) 0%, var(--brand-tint) 100%);
border: 1px solid var(--brand);
border-radius: var(--radius-lg);
padding: 22px 26px;
margin-bottom: 28px;
position: relative;
overflow: hidden;
}
.mt-dash-weekly::before {
content: "";
position: absolute;
right: -40px;
top: -40px;
width: 220px;
height: 220px;
border-radius: 50%;
background: color-mix(in srgb, var(--brand) 10%, transparent);
pointer-events: none;
}
.mt-dash-weekly-eyebrow {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--sans);
font-size: 11.5px;
color: var(--brand-deep);
margin-bottom: 4px;
position: relative;
}
.mt-dash-weekly-badge {
background: var(--brand-2);
color: #fff;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.12em;
padding: 2px 8px;
border-radius: 99px;
}
.mt-dash-weekly-body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: center;
position: relative;
}
@media (max-width: 760px) {
.mt-dash-weekly-body {
grid-template-columns: 1fr;
}
}
.mt-dash-weekly-title {
font-family: var(--serif);
font-weight: 600;
font-size: 24px;
letter-spacing: -0.01em;
margin: 0;
line-height: 1.15;
color: var(--ink);
}
.mt-dash-weekly-sub {
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: var(--ink-2);
line-height: 1.55;
margin: 6px 0 0;
max-width: 540px;
}
.mt-dash-weekly-sub em {
color: var(--brand-deep);
font-style: italic;
}
.mt-dash-weekly-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 8px;
}
.mt-dash-weekly-actions {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
}
@media (max-width: 760px) {
.mt-dash-weekly-actions {
align-items: flex-start;
}
}
.mt-dash-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 24px;
align-items: start;
}
@media (max-width: 1000px) {
.mt-dash-grid {
grid-template-columns: 1fr;
}
}
.mt-dash-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 14px;
}
.mt-dash-card-head h3 {
font-family: var(--serif);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.01em;
margin: 0;
color: var(--ink);
}
.mt-dash-card-head h3 em {
font-style: italic;
color: var(--ink-2);
font-weight: 500;
}
.mt-dash-card-head-right {
display: flex;
align-items: center;
gap: 8px;
}
.mt-dash-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.mt-dash-list--tight {
gap: 8px;
}
.mt-dash-course {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
transition: all 140ms var(--ease);
cursor: pointer;
text-decoration: none;
color: inherit;
}
.mt-dash-course:hover {
border-color: var(--line-2);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.mt-dash-course-swatch {
width: 44px;
height: 56px;
border-radius: var(--radius-sm);
background: var(--brand);
position: relative;
overflow: hidden;
flex-shrink: 0;
display: grid;
place-items: center;
color: #fff;
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
font-style: italic;
}
.mt-dash-course-swatch::after {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(to bottom, transparent 0 9px, rgba(255, 255, 255, 0.18) 9px 10px);
}
.mt-dash-course-swatch--as {
background: var(--brand-2);
}
.mt-dash-course-swatch--archived {
background: var(--ink-4);
}
.mt-dash-course-body {
flex: 1;
min-width: 0;
}
.mt-dash-course-title {
font-family: var(--serif);
font-weight: 600;
font-size: 15px;
letter-spacing: -0.005em;
margin-bottom: 2px;
color: var(--ink);
}
.mt-dash-course-sub {
font-size: 11.5px;
color: var(--ink-3);
margin-bottom: 8px;
}
.mt-dash-course-progress {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: var(--ink-3);
}
.mt-dash-course-progress .mt-dash-bar {
flex: 1;
}
.mt-dash-course-next {
font-size: 11px;
color: var(--ink-3);
margin-top: 8px;
font-family: var(--serif);
font-style: italic;
}
.mt-dash-bar {
height: 6px;
border-radius: 99px;
background: var(--line);
overflow: hidden;
position: relative;
}
.mt-dash-bar > i {
display: block;
height: 100%;
background: var(--ink);
border-radius: 99px;
transition: width 300ms var(--ease);
}
.mt-dash-bar--brand > i {
background: var(--brand);
}
.mt-dash-bar--amber > i {
background: var(--brand-2);
}
.mt-dash-badge {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 99px;
background: var(--brand);
color: #fff;
flex-shrink: 0;
}
.mt-dash-badge--as {
background: var(--brand-2);
}
.mt-dash-badge--archived {
background: var(--line);
color: var(--ink-3);
}
.mt-dash-preset {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
transition: all 140ms var(--ease);
cursor: pointer;
text-decoration: none;
color: inherit;
}
.mt-dash-preset:hover {
border-color: var(--line-2);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.mt-dash-preset--add {
border-style: dashed;
border-color: var(--line-2);
color: var(--ink-3);
font-size: 12.5px;
justify-content: center;
font-family: var(--serif);
font-style: italic;
}
.mt-dash-preset--add:hover {
color: var(--ink);
border-color: var(--ink-3);
}
.mt-dash-preset-icon {
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
background: var(--paper-warm);
display: grid;
place-items: center;
color: var(--ink-2);
flex-shrink: 0;
}
.mt-dash-preset-body {
flex: 1;
min-width: 0;
}
.mt-dash-preset-name {
font-family: var(--serif);
font-weight: 600;
font-size: 13.5px;
margin-bottom: 1px;
color: var(--ink);
}
.mt-dash-preset-meta {
font-size: 11px;
color: var(--ink-3);
}
.mt-dash-preset-play {
color: var(--ink-3);
font-size: 14px;
}
.mt-dash-divider {
height: 1px;
background: var(--line);
margin: 40px 0 18px;
}
.mt-dash-eyebrow {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
color: var(--ink-3);
}
.mt-dash-tiny {
font-size: 11px;
color: var(--ink-3);
}
.mt-dash-browse {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.mt-dash-browse-spacer {
flex: 1;
}
.mt-dash-loading {
padding: 40px 0;
color: var(--ink-3);
font-family: var(--serif);
font-style: italic;
}
.mt-dash-landing {
max-width: 640px;
padding: 48px 0;
}
.mt-dash-landing-title {
font-family: var(--serif);
font-weight: 600;
font-size: 36px;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 10px 0 0;
color: var(--ink);
}
.mt-dash-landing-lede {
font-size: 15px;
color: var(--ink-2);
line-height: 1.6;
margin: 14px 0 0;
}
.mt-dash-landing-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 22px;
}
.mt-dash-landing-foot {
margin-top: 28px;
}
.mt-courses-strip {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding: 8px 0 22px;
border-bottom: 1px solid var(--line);
margin-bottom: 28px;
}
@media (max-width: 700px) {
.mt-courses-strip {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
.mt-courses-kicker {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
color: var(--brand);
margin-bottom: 6px;
}
.mt-courses-kicker--amber {
color: var(--brand-2);
}
.mt-courses-title {
font-family: var(--serif);
font-weight: 600;
font-size: 32px;
letter-spacing: -0.02em;
margin: 0;
line-height: 1.05;
color: var(--ink);
}
.mt-courses-desc {
font-size: 13px;
color: var(--ink-2);
margin-top: 6px;
max-width: 560px;
}
.mt-courses-meta {
text-align: right;
font-size: 11px;
color: var(--ink-3);
line-height: 1.5;
flex-shrink: 0;
}
.mt-courses-meta b {
color: var(--ink-2);
font-weight: 600;
}
@media (max-width: 700px) {
.mt-courses-meta {
text-align: left;
}
}
.mt-courses-filter {
display: flex;
flex-wrap: wrap;
gap: 28px;
padding: 18px 20px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
margin-bottom: 28px;
}
.mt-courses-filter-label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--brand);
margin-bottom: 8px;
}
.mt-courses-section {
margin-bottom: 36px;
}
.mt-courses-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
border-bottom: 1px solid var(--line-2);
padding: 0 0 12px;
margin-bottom: 18px;
}
.mt-courses-section-title {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.01em;
margin: 4px 0 0;
white-space: nowrap;
color: var(--ink);
}
.mt-courses-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 900px) {
.mt-courses-grid {
grid-template-columns: 1fr;
}
}
.mt-courses-tile {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 20px 16px;
display: flex;
flex-direction: column;
gap: 12px;
transition: all 160ms var(--ease);
}
.mt-courses-tile:hover {
border-color: var(--line-2);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.mt-courses-tile--enrolled {
border-color: var(--brand);
box-shadow: 0 0 0 1px var(--brand-tint);
}
.mt-courses-tile--enrolled.mt-courses-tile--as {
border-color: var(--brand-2);
box-shadow: 0 0 0 1px var(--brand-2-tint);
}
.mt-courses-tile--locked {
opacity: 0.68;
}
.mt-courses-tile--locked:hover {
transform: none;
box-shadow: none;
border-color: var(--line);
}
.mt-courses-tile-head {
display: flex;
align-items: flex-start;
gap: 14px;
}
.mt-courses-mark {
flex-shrink: 0;
width: 52px;
height: 64px;
border-radius: var(--radius);
background: var(--brand);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: var(--serif);
position: relative;
overflow: hidden;
}
.mt-courses-mark--as {
background: var(--brand-2);
}
.mt-courses-mark::after {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(to bottom, transparent 0 11px, rgba(255, 255, 255, 0.16) 11px 12px);
pointer-events: none;
}
.mt-courses-tile--locked .mt-courses-mark {
background: var(--ink-4);
}
.mt-courses-mark-roman {
font-style: italic;
font-weight: 600;
font-size: 22px;
line-height: 1;
position: relative;
z-index: 1;
}
.mt-courses-mark-disc {
font-family: var(--sans);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
margin-top: 2px;
opacity: 0.85;
position: relative;
z-index: 1;
}
.mt-courses-headline {
flex: 1;
min-width: 0;
}
.mt-courses-tile-title {
font-family: var(--serif);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--ink);
}
.mt-courses-status {
flex-shrink: 0;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 99px;
background: var(--brand);
color: #fff;
}
.mt-courses-status--as {
background: var(--brand-2);
}
.mt-courses-status--audit {
background: var(--ink-2);
color: var(--paper);
}
.mt-courses-status--locked {
background: var(--line);
color: var(--ink-3);
}
.mt-courses-tile-desc {
font-size: 13px;
line-height: 1.5;
color: var(--ink-2);
margin: 0;
}
.mt-courses-tile-stats {
display: flex;
gap: 18px;
font-size: 11.5px;
color: var(--ink-3);
}
.mt-courses-tile-stats b {
color: var(--ink);
font-weight: 600;
}
.mt-courses-tile-progress {
display: flex;
align-items: center;
gap: 10px;
margin-top: 4px;
}
.mt-courses-bar {
height: 6px;
border-radius: 99px;
background: var(--line);
overflow: hidden;
position: relative;
flex: 1;
}
.mt-courses-bar > i {
display: block;
height: 100%;
background: var(--ink);
border-radius: 99px;
transition: width 300ms var(--ease);
}
.mt-courses-bar--brand > i {
background: var(--brand);
}
.mt-courses-bar--amber > i {
background: var(--brand-2);
}
.mt-courses-tile-lock {
font-size: 12px;
color: var(--ink-3);
font-style: italic;
font-family: var(--serif);
display: flex;
align-items: center;
gap: 6px;
}
.mt-courses-tile-next {
display: flex;
align-items: baseline;
gap: 8px;
font-family: var(--serif);
font-style: italic;
border-top: 1px solid var(--line-3);
padding-top: 10px;
}
.mt-courses-next-text {
font-size: 13px;
font-weight: 500;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mt-courses-tile-actions {
display: flex;
gap: 8px;
align-items: center;
padding-top: 2px;
}
.mt-courses-enroll {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 40px;
padding: 24px 28px;
background: linear-gradient(135deg, var(--brand-soft) 0%, var(--paper-warm) 100%);
border: 1px solid var(--line-2);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.mt-courses-enroll::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(var(--brand-tint) 1.5px, transparent 1.5px);
background-size: 24px 24px;
pointer-events: none;
}
.mt-courses-enroll > * {
position: relative;
}
.mt-courses-enroll h3 {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.01em;
margin: 4px 0 0;
color: var(--ink);
}
@media (max-width: 700px) {
.mt-courses-enroll {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
}
.mt-courses-empty {
display: flex;
align-items: center;
gap: 18px;
padding: 40px 28px;
border: 1.5px dashed var(--line-2);
border-radius: var(--radius);
margin: 12px 0;
color: var(--ink-3);
justify-content: center;
}
.mt-courses-empty-text {
font-family: var(--serif);
font-style: italic;
font-size: 18px;
}
.mt-courses-tiny {
font-size: 11px;
color: var(--ink-3);
}
.mt-courses-enroll-note {
max-width: 520px;
margin-top: 4px;
}
.mt-course-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--line);
margin-bottom: 26px;
align-items: start;
}
@media (max-width: 1000px) {
.mt-course-hero {
grid-template-columns: 1fr;
}
}
.mt-course-eyebrow {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--brand);
}
.mt-course-title {
font-family: var(--serif);
font-size: 34px;
font-weight: 600;
letter-spacing: -0.02em;
margin: 4px 0;
line-height: 1.1;
color: var(--ink);
}
.mt-course-desc {
font-family: var(--sans);
font-size: 14px;
color: var(--ink-2);
line-height: 1.6;
max-width: 620px;
margin: 8px 0 0;
}
.mt-course-hero-chips {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 12px;
}
.mt-course-cta {
width: 100%;
}
.mt-course-cta-card {
background: var(--surface);
border: 1px solid var(--brand);
border-radius: var(--radius);
padding: 18px 20px;
}
.mt-course-cta-card > .mt-btn {
width: 100%;
justify-content: center;
}
.mt-course-cta-eyebrow {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--brand);
}
.mt-course-cta-sub {
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-2);
margin: 6px 0 12px;
line-height: 1.5;
}
.mt-course-sec-head {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 14px;
}
.mt-course-sec-title {
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
}
.mt-course-sec-sub {
font-size: 11.5px;
color: var(--ink-3);
font-style: italic;
font-family: var(--serif);
}
.mt-course-chap-grid {
display: flex;
flex-direction: column;
gap: 6px;
}
.mt-course-chap {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
.mt-course-chap--preview {
border-color: var(--brand);
background: var(--brand-tint);
}
.mt-course-chap-num {
width: 32px;
height: 32px;
border-radius: 99px;
background: var(--paper-warm);
display: grid;
place-items: center;
font-family: var(--serif);
font-style: italic;
font-weight: 600;
font-size: 14px;
color: var(--ink-2);
flex-shrink: 0;
}
.mt-course-chap--preview .mt-course-chap-num {
background: var(--brand);
color: #fff;
}
.mt-course-chap-body {
flex: 1;
min-width: 0;
}
.mt-course-chap-title {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
color: var(--ink);
}
.mt-course-tiny {
font-size: 11px;
color: var(--ink-3);
}
.mt-course-gate {
max-width: 520px;
margin: 32px 0;
padding: 32px 28px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.mt-course-gate-eyebrow {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--brand);
}
.mt-course-gate-title {
font-family: var(--serif);
font-size: 24px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 6px 0 0;
color: var(--ink);
}
.mt-course-gate-text {
font-family: var(--sans);
font-size: 13px;
color: var(--ink-2);
line-height: 1.55;
margin: 8px 0 16px;
max-width: 440px;
}
.mt-class-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
padding: 4px 0 18px;
border-bottom: 1px solid var(--line);
margin-bottom: 22px;
}
@media (max-width: 700px) {
.mt-class-head {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
.mt-class-eyebrow {
font-family: var(--sans);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--brand);
}
.mt-class-title {
font-family: var(--serif);
font-weight: 600;
font-size: 28px;
letter-spacing: -0.01em;
margin: 4px 0;
line-height: 1.1;
color: var(--ink);
}
.mt-class-title em {
font-style: italic;
font-weight: 500;
color: var(--ink-2);
}
.mt-class-meta {
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-2);
}
.mt-class-badge {
display: inline-block;
margin-left: 8px;
font-family: var(--sans);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 2px 8px;
border-radius: 99px;
background: var(--paper-warm);
color: var(--ink-2);
vertical-align: middle;
}
.mt-class-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
flex-shrink: 0;
}
.mt-class-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 22px;
align-items: start;
}
@media (max-width: 1000px) {
.mt-class-grid {
grid-template-columns: 1fr;
}
}
.mt-class-main {
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.mt-class-side {
display: flex;
flex-direction: column;
gap: 12px;
position: sticky;
top: 80px;
align-self: start;
}
@media (max-width: 1000px) {
.mt-class-side {
position: static;
}
}
.mt-class-sec-head {
font-family: var(--serif);
font-size: 15px;
font-weight: 600;
color: var(--ink);
padding-bottom: 6px;
border-bottom: 1px solid var(--line);
margin-bottom: 10px;
display: flex;
align-items: baseline;
}
.mt-class-sec-sub {
margin-left: auto;
font-size: 11px;
font-weight: 400;
font-style: italic;
color: var(--ink-3);
}
.mt-class-announce-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.mt-class-announce {
background: var(--brand-2-tint);
border: 1px solid var(--brand-2);
border-radius: var(--radius);
padding: 12px 14px;
}
.mt-class-announce-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.mt-class-announce-title {
font-family: var(--serif);
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
.mt-class-announce-body {
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-2);
line-height: 1.5;
margin: 6px 0 0;
}
.mt-class-empty {
font-family: var(--sans);
font-size: 12.5px;
font-style: italic;
color: var(--ink-3);
}
.mt-class-chap-list {
display: flex;
flex-direction: column;
}
.mt-class-chap-row {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
border-bottom: 1px solid var(--line-3);
font-family: var(--sans);
font-size: 12.5px;
}
.mt-class-chap-row--active {
background: var(--brand-tint);
border-bottom-color: var(--brand);
border-radius: var(--radius-sm);
}
.mt-class-chap-dot {
width: 18px;
height: 18px;
border-radius: 99px;
display: grid;
place-items: center;
font-size: 10px;
font-weight: 700;
color: var(--ink-3);
border: 1px solid var(--line-2);
background: var(--surface);
flex-shrink: 0;
}
.mt-class-chap-dot--ok {
background: var(--ok);
border-color: var(--ok);
color: #fff;
}
.mt-class-chap-dot--now {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.mt-class-chap-name {
flex: 1;
min-width: 0;
font-family: var(--serif);
color: var(--ink);
}
.mt-class-chap-name--active {
font-weight: 600;
}
.mt-class-chap-count {
font-size: 11px;
color: var(--ink-3);
flex-shrink: 0;
}
.mt-class-chap-count--now {
color: var(--brand);
}
.mt-class-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px 14px;
}
.mt-class-card-lbl {
font-family: var(--sans);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--brand);
}
.mt-class-card-text {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-2);
line-height: 1.55;
margin: 4px 0 0;
}
.mt-class-dots {
display: flex;
gap: 4px;
flex-wrap: wrap;
align-items: center;
margin-top: 8px;
}
.mt-class-dot {
width: 22px;
height: 22px;
border-radius: 99px;
background: var(--brand);
display: inline-block;
flex-shrink: 0;
}
.mt-class-tiny {
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
}
.mt-class-gate {
max-width: 520px;
margin: 32px 0;
padding: 32px 28px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.mt-class-gate-eyebrow {
font-family: var(--sans);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--brand);
}
.mt-class-gate-title {
font-family: var(--serif);
font-size: 24px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 6px 0 0;
color: var(--ink);
}
.mt-class-gate-text {
font-family: var(--sans);
font-size: 13px;
color: var(--ink-2);
line-height: 1.55;
margin: 8px 0 16px;
max-width: 440px;
}
.mt-account-section {
padding: 22px 0;
border-bottom: 1px solid var(--line);
}
.mt-account-section:last-child {
border-bottom: none;
}
.mt-account-sec-head {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 14px;
}
.mt-account-sec-title {
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
}
.mt-account-sec-title--danger {
color: var(--err);
}
.mt-account-sec-sub {
font-size: 11.5px;
color: var(--ink-3);
font-style: italic;
font-family: var(--serif);
}
.mt-account-sec-spacer {
flex: 1;
}
.mt-account-head {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 6px;
}
.mt-account-avatar {
width: 64px;
height: 64px;
border-radius: 99px;
background: var(--brand);
color: #fff;
display: grid;
place-items: center;
font-family: var(--serif);
font-weight: 600;
font-size: 24px;
font-style: italic;
flex-shrink: 0;
}
.mt-account-head-body {
flex: 1;
min-width: 0;
}
.mt-account-name {
font-family: var(--serif);
font-size: 24px;
font-weight: 600;
margin: 0;
color: var(--ink);
}
.mt-account-tiny {
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
margin-top: 2px;
}
.mt-account-head-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
}
.mt-account-admin-badge {
font-family: var(--sans);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 99px;
background: var(--brand-2);
color: #fff;
}
.mt-account-admin-link {
font-size: 11.5px;
font-weight: 600;
color: var(--brand);
text-decoration: none;
}
.mt-account-admin-link:hover {
text-decoration: underline;
}
.mt-account-field {
display: grid;
grid-template-columns: 180px 1fr auto;
gap: 14px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--line-3);
font-family: var(--sans);
font-size: 13px;
}
.mt-account-field:last-child {
border-bottom: none;
}
@media (max-width: 700px) {
.mt-account-field {
grid-template-columns: 1fr;
gap: 4px;
}
}
.mt-account-field-lbl {
font-family: var(--serif);
font-weight: 600;
font-size: 13px;
color: var(--ink);
}
.mt-account-field-val {
color: var(--ink-2);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.mt-account-field--pref .mt-account-field-val {
grid-column: 2/-1;
}
.mt-account-pref-select {
max-width: 360px;
min-width: 240px;
flex: 0 1 360px;
}
.mt-account-pill {
font-family: var(--sans);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 8px;
border-radius: 99px;
background: var(--brand-tint);
color: var(--brand);
}
.mt-account-pill--ok {
background: color-mix(in srgb, var(--ok) 16%, transparent);
color: var(--ok);
}
.mt-account-class-row {
display: grid;
grid-template-columns: 40px 1fr auto auto;
gap: 14px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--line-3);
font-family: var(--sans);
font-size: 13px;
}
.mt-account-class-row:last-child {
border-bottom: none;
}
.mt-account-class-row--archived {
opacity: 0.65;
}
@media (max-width: 700px) {
.mt-account-class-row {
grid-template-columns: 40px 1fr;
}
}
.mt-account-mark {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 36px;
height: 44px;
background: var(--brand);
color: #fff;
border-radius: var(--radius-sm);
font-family: var(--serif);
font-style: italic;
font-weight: 600;
font-size: 14px;
flex-shrink: 0;
}
.mt-account-mark--as {
background: var(--brand-2);
}
.mt-account-mark--archived {
background: var(--line-2);
color: var(--ink-3);
}
.mt-account-mark-tag {
font-family: var(--sans);
font-style: normal;
font-size: 8px;
font-weight: 600;
letter-spacing: 0.08em;
opacity: 0.85;
margin-top: 1px;
}
.mt-account-class-name {
font-family: var(--serif);
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
}
.mt-account-class-sub {
font-size: 11px;
color: var(--ink-3);
margin-top: 2px;
}
.mt-account-class-badge {
font-family: var(--sans);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 8px;
border-radius: 99px;
background: var(--paper-warm);
color: var(--ink-2);
}
.mt-account-class-link {
font-family: var(--sans);
font-size: 11.5px;
font-weight: 600;
color: var(--brand);
text-decoration: none;
white-space: nowrap;
}
.mt-account-class-link:hover {
text-decoration: underline;
}
.mt-account-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 700px) {
.mt-account-stats {
grid-template-columns: 1fr 1fr;
}
}
.mt-account-stat {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px 14px;
}
.mt-account-stat-num {
font-family: var(--serif);
font-weight: 600;
font-size: 24px;
color: var(--ink);
line-height: 1;
}
.mt-account-stat-lbl {
font-size: 10.5px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-top: 6px;
}
.mt-account-preset {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
margin-bottom: 6px;
font-family: var(--sans);
font-size: 12.5px;
}
.mt-account-preset-dot {
width: 8px;
height: 8px;
border-radius: 99px;
background: var(--brand);
flex-shrink: 0;
}
.mt-account-preset-name {
font-family: var(--serif);
font-weight: 600;
color: var(--ink);
}
.mt-account-preset-meta {
color: var(--ink-3);
}
.mt-account-preset-spacer {
flex: 1;
}
.mt-account-preset-input {
font-family: var(--serif);
font-size: 12.5px;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--brand);
border-radius: var(--radius-sm);
padding: 3px 8px;
}
.mt-account-empty {
font-family: var(--sans);
font-size: 12.5px;
font-style: italic;
color: var(--ink-3);
}
.mt-account-danger {
background: color-mix(in srgb, var(--err) 4%, var(--surface));
border: 1px solid var(--err);
border-radius: var(--radius-sm);
padding: 12px 14px;
margin-top: 8px;
display: flex;
align-items: flex-start;
gap: 14px;
}
.mt-account-danger-body {
flex: 1;
}
.mt-account-danger-title {
font-family: var(--serif);
font-size: 14px;
font-weight: 600;
color: var(--err);
}
.mt-account-danger-text {
font-family: var(--sans);
font-size: 12px;
color: var(--ink-2);
margin: 4px 0 0;
line-height: 1.5;
}
.mt-signin-page {
min-height: 100vh;
display: grid;
grid-template-columns: minmax(0, 420px) 1fr;
}
@media (max-width: 880px) {
.mt-signin-page {
grid-template-columns: 1fr;
}
}
.mt-signin-card {
padding: 48px;
max-width: 420px;
width: 100%;
align-self: center;
justify-self: center;
}
@media (max-width: 700px) {
.mt-signin-card {
padding: 32px 22px;
}
}
.mt-signin-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 32px;
}
.mt-signin-mark {
width: 36px;
height: 36px;
flex-shrink: 0;
display: grid;
place-items: center;
background: var(--ink);
color: var(--paper);
border-radius: var(--radius-sm);
font-family: var(--serif);
font-weight: 700;
font-size: 22px;
}
.mt-signin-brand-name {
font-family: var(--serif);
font-weight: 600;
font-size: 18px;
color: var(--ink);
}
.mt-signin-brand-sub {
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
}
.mt-signin-tabs {
display: flex;
border-bottom: 1px solid var(--line);
margin-bottom: 24px;
}
.mt-signin-tab {
padding: 10px 0;
margin-right: 24px;
margin-bottom: -1px;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
color: var(--ink-3);
text-decoration: none;
border-bottom: 2px solid transparent;
}
.mt-signin-tab.is-active {
color: var(--ink);
border-bottom-color: var(--ink);
}
.mt-signin-tab:hover {
color: var(--ink);
}
.mt-signin-field {
display: block;
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-2);
margin-bottom: 12px;
}
.mt-signin-field span {
display: block;
font-weight: 600;
margin-bottom: 4px;
color: var(--ink);
}
.mt-signin-field input {
width: 100%;
font-family: var(--sans);
font-size: 14px;
padding: 9px 12px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink);
}
.mt-signin-field input:focus {
outline: 2px solid var(--brand);
outline-offset: 1px;
}
.mt-signin-check {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-2);
margin: 4px 0 4px;
}
.mt-signin-error {
display: block;
font-family: var(--sans);
font-size: 12px;
color: var(--err);
margin-bottom: 8px;
}
.mt-signin-submit {
width: 100%;
justify-content: center;
margin-top: 14px;
}
.mt-signin-alt {
text-align: center;
margin-top: 12px;
}
.mt-signin-passkey {
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
color: var(--brand);
background: none;
border: 0;
cursor: pointer;
}
.mt-signin-foot {
margin-top: 18px;
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-3);
text-align: center;
}
.mt-signin-foot a {
color: var(--brand);
font-weight: 600;
}
.mt-signin-aside {
background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 62%, #000) 100%);
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px 56px;
}
@media (max-width: 880px) {
.mt-signin-aside {
display: none;
}
}
.mt-signin-aside-quote {
font-family: var(--serif);
font-style: italic;
font-size: 24px;
line-height: 1.4;
max-width: 480px;
}
.mt-signin-aside-attrib {
font-family: var(--sans);
font-style: normal;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
opacity: 0.7;
margin-top: 12px;
}
.mt-preferences-palettes {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mt-preferences-palette {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px 6px 6px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
cursor: pointer;
transition: border-color 140ms var(--ease), transform 140ms var(--ease);
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
margin: 0;
}
.mt-preferences-palette:hover {
border-color: var(--ink-3);
transform: translateY(-1px);
}
.mt-preferences-palette:focus-within {
outline: 2px solid var(--brand);
outline-offset: 1px;
}
.mt-preferences-palette--active {
border-color: var(--brand);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent);
}
.mt-preferences-palette-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.mt-preferences-palette-swatch-strip {
display: inline-flex;
gap: 2px;
}
.mt-preferences-palette-swatch {
width: 14px;
height: 14px;
border-radius: 3px;
display: inline-block;
}
.mt-preferences-palette-name {
font-weight: 500;
white-space: nowrap;
}
.mt-preferences-palette-swatch[data-theme=editorial].mt-preferences-palette-swatch--brand {
background: #1565c0;
}
.mt-preferences-palette-swatch[data-theme=editorial].mt-preferences-palette-swatch--brand-2 {
background: #ff8f00;
}
.mt-preferences-palette-swatch[data-theme=editorial].mt-preferences-palette-swatch--paper {
background: #fafaf7;
border: 1px solid var(--line);
}
.mt-preferences-palette-swatch[data-theme=modern].mt-preferences-palette-swatch--brand {
background: #4f46e5;
}
.mt-preferences-palette-swatch[data-theme=modern].mt-preferences-palette-swatch--brand-2 {
background: #fb7185;
}
.mt-preferences-palette-swatch[data-theme=modern].mt-preferences-palette-swatch--paper {
background: #fafafa;
border: 1px solid var(--line);
}
.mt-preferences-palette-swatch[data-theme=manuscript].mt-preferences-palette-swatch--brand {
background: #92400e;
}
.mt-preferences-palette-swatch[data-theme=manuscript].mt-preferences-palette-swatch--brand-2 {
background: #a16207;
}
.mt-preferences-palette-swatch[data-theme=manuscript].mt-preferences-palette-swatch--paper {
background: #fbf6e6;
}
.mt-preferences-palette-swatch[data-theme=workhorse].mt-preferences-palette-swatch--brand {
background: #0e7c66;
}
.mt-preferences-palette-swatch[data-theme=workhorse].mt-preferences-palette-swatch--brand-2 {
background: #ca8a04;
}
.mt-preferences-palette-swatch[data-theme=workhorse].mt-preferences-palette-swatch--paper {
background: #fafaf9;
border: 1px solid var(--line);
}
.mt-preferences-palette-swatch[data-theme=mono].mt-preferences-palette-swatch--brand {
background: #0a0a0a;
}
.mt-preferences-palette-swatch[data-theme=mono].mt-preferences-palette-swatch--brand-2 {
background: #dc2626;
}
.mt-preferences-palette-swatch[data-theme=mono].mt-preferences-palette-swatch--paper {
background: #ffffff;
border: 1px solid var(--line);
}
.mt-tools-strip {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding: 8px 0 22px;
border-bottom: 1px solid var(--line);
margin-bottom: 20px;
}
@media (max-width: 700px) {
.mt-tools-strip {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
.mt-tools-kicker {
font-family: var(--sans);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
color: var(--brand);
margin-bottom: 6px;
}
.mt-tools-title {
font-family: var(--serif);
font-weight: 600;
font-size: 32px;
letter-spacing: -0.02em;
margin: 0;
line-height: 1.05;
color: var(--ink);
}
.mt-tools-desc {
font-family: var(--sans);
font-size: 13px;
color: var(--ink-2);
margin-top: 6px;
max-width: 560px;
}
.mt-tools-meta {
text-align: right;
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
line-height: 1.5;
flex-shrink: 0;
}
@media (max-width: 700px) {
.mt-tools-meta {
text-align: left;
}
}
.mt-tools-toggle {
margin-bottom: 14px;
}
.mt-tools-note {
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 8px 12px;
margin-bottom: 18px;
}
.mt-tools-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 18px;
align-items: start;
}
@media (max-width: 1000px) {
.mt-tools-grid {
grid-template-columns: 1fr;
}
}
.mt-tools-col {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.mt-tools-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 20px;
}
.mt-tools-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.mt-tools-card-title {
font-family: var(--serif);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.01em;
margin: 0;
color: var(--ink);
}
.mt-tools-tiny {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
line-height: 1.5;
}
.mt-tools-clock {
position: relative;
width: 240px;
height: 240px;
margin: 18px auto;
}
.mt-tools-dot {
position: absolute;
left: 50%;
top: 50%;
width: 34px;
height: 34px;
margin: -17px 0 0 -17px;
border-radius: 99px;
border: 1px solid var(--line-2);
background: var(--surface);
font-family: var(--serif);
font-weight: 600;
font-size: 12px;
color: var(--ink-2);
display: grid;
place-items: center;
}
.mt-tools-dot--on {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.mt-tools-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
border-radius: 99px;
background: var(--surface-2);
border: 1px solid var(--line);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mt-tools-center-set {
font-family: var(--serif);
font-weight: 600;
font-size: 18px;
color: var(--ink);
}
.mt-tools-result {
display: flex;
flex-direction: column;
}
.mt-tools-result-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
border-bottom: 1px solid var(--line-3);
font-family: var(--sans);
font-size: 12.5px;
}
.mt-tools-result-row:last-child {
border-bottom: none;
}
.mt-tools-result-row b {
font-family: var(--mono);
font-weight: 700;
font-size: 13px;
color: var(--ink);
}
.mt-tools-result-lbl {
flex: 1;
font-family: var(--serif);
color: var(--ink-3);
}
.mt-tools-iv {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
}
.mt-tools-iv-cell {
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 10px 0;
text-align: center;
}
.mt-tools-iv-cell b {
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
color: var(--ink);
}
.mt-tools-iv-label {
display: block;
font-family: var(--sans);
font-size: 10px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.mt-tools-related {
display: flex;
flex-direction: column;
}
.mt-tools-related-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--line-3);
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-3);
}
.mt-tools-related-row:last-child {
border-bottom: none;
}
.mt-tools-related-row b {
font-family: var(--mono);
font-weight: 700;
color: var(--ink);
}
.mt-tools-related-em {
font-style: italic;
}
.mt-tools-matrix-note {
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
margin-bottom: 10px;
}
.mt-tools-matrix-note b {
font-family: var(--mono);
color: var(--ink-2);
font-weight: 600;
}
.mt-tools-matrix {
width: 100%;
border-collapse: collapse;
font-family: var(--mono);
font-size: 11px;
}
.mt-tools-matrix th {
padding: 6px 4px;
text-align: center;
color: var(--brand);
font-weight: 700;
font-size: 10px;
}
.mt-tools-matrix tbody th {
color: var(--brand-2);
text-align: right;
padding-right: 8px;
}
.mt-tools-matrix td {
padding: 6px 4px;
text-align: center;
border: 1px solid var(--line-3);
background: var(--surface);
color: var(--ink);
}
.mt-tools-matrix tfoot td {
background: transparent;
border: none;
color: var(--brand-deep);
font-weight: 700;
padding-top: 6px;
font-size: 10px;
}
.mt-admin-greet {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
padding: 4px 0 14px;
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
}
@media (max-width: 700px) {
.mt-admin-greet {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
.mt-admin-greet-eyebrow {
font-family: var(--sans);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
color: var(--ink-3);
}
.mt-admin-greet-h1 {
font-family: var(--serif);
font-size: 30px;
font-weight: 600;
letter-spacing: -0.02em;
margin: 4px 0;
color: var(--ink);
}
.mt-admin-greet-h1 em {
font-style: italic;
color: var(--ink-2);
font-weight: 500;
}
.mt-admin-greet-sub {
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
margin-top: 2px;
}
.mt-admin-greet-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.mt-admin-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 22px;
}
@media (max-width: 900px) {
.mt-admin-stats {
grid-template-columns: 1fr 1fr;
}
}
.mt-admin-stat {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px 14px;
}
.mt-admin-stat--brand {
border-left: 3px solid var(--brand);
}
.mt-admin-stat--amber {
border-left: 3px solid var(--brand-2);
background: color-mix(in srgb, var(--brand-2) 5%, var(--surface));
}
.mt-admin-stat-num {
font-family: var(--serif);
font-weight: 600;
font-size: 24px;
color: var(--ink);
line-height: 1;
}
.mt-admin-stat-lbl {
font-family: var(--sans);
font-size: 10.5px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-top: 6px;
}
.mt-admin-block {
margin-bottom: 32px;
}
.mt-admin-block-head {
display: flex;
align-items: baseline;
gap: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
margin-bottom: 12px;
}
.mt-admin-sec-title {
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
}
.mt-admin-sec-sub {
font-family: var(--serif);
font-size: 11.5px;
color: var(--ink-3);
font-style: italic;
}
.mt-admin-sec-spacer {
flex: 1;
}
.mt-admin-tiny {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
}
.mt-admin-row {
display: grid;
grid-template-columns: 40px 1fr auto auto auto;
gap: 14px;
align-items: center;
padding: 12px 14px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
margin-bottom: 6px;
transition: all 140ms var(--ease);
font-family: var(--sans);
font-size: 12.5px;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.mt-admin-row:hover {
border-color: var(--ink-3);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
@media (max-width: 900px) {
.mt-admin-row {
grid-template-columns: 40px 1fr;
gap: 10px;
}
}
.mt-admin-row-body {
min-width: 0;
}
.mt-admin-row-title {
font-family: var(--serif);
font-size: 14px;
color: var(--ink);
font-weight: 600;
}
.mt-admin-row-title em {
font-style: italic;
color: var(--ink-2);
font-weight: 500;
}
.mt-admin-row-meta {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
margin-top: 2px;
}
.mt-admin-row-meta b {
color: var(--ink);
font-weight: 600;
}
.mt-admin-row-meta code {
font-family: var(--mono);
font-size: 11px;
background: var(--paper-warm);
padding: 1px 6px;
border-radius: 3px;
}
.mt-admin-row-stats {
display: flex;
gap: 14px;
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
}
.mt-admin-row-stats b {
color: var(--ink);
font-weight: 600;
}
.mt-admin-status {
font-family: var(--sans);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 99px;
}
.mt-admin-status--published {
background: var(--ok);
color: #fff;
}
.mt-admin-status--live {
background: var(--brand);
color: #fff;
}
.mt-admin-status--draft {
background: var(--line);
color: var(--ink-3);
}
.mt-admin-status--archived {
background: var(--line-2);
color: var(--ink-3);
}
.mt-admin-mark {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 36px;
height: 44px;
background: var(--brand);
color: #fff;
border-radius: var(--radius-sm);
font-family: var(--serif);
font-style: italic;
font-weight: 600;
font-size: 14px;
flex-shrink: 0;
}
.mt-admin-mark--as {
background: var(--brand-2);
}
.mt-admin-mark--archived {
background: var(--line-2);
color: var(--ink-3);
}
.mt-admin-mark-tag {
font-family: var(--sans);
font-style: normal;
font-size: 8px;
font-weight: 600;
letter-spacing: 0.08em;
opacity: 0.85;
margin-top: 1px;
}
.mt-admin-activity {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-2);
border-bottom: 1px solid var(--line-3);
}
.mt-admin-activity--flagged {
background: color-mix(in srgb, var(--brand-2) 6%, transparent);
border-radius: var(--radius-sm);
border-bottom-color: transparent;
}
.mt-admin-activity b {
color: var(--ink);
font-weight: 600;
}
.mt-admin-activity-age {
width: 80px;
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
flex-shrink: 0;
}
.mt-admin-activity-detail {
margin-left: auto;
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
flex-shrink: 0;
}
.mt-admin-empty {
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-3);
font-style: italic;
padding: 12px 14px;
background: var(--surface);
border: 1px dashed var(--line);
border-radius: var(--radius-sm);
}
.mt-admin-course-back {
display: inline-block;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
text-decoration: none;
margin-bottom: 6px;
}
.mt-admin-course-back:hover {
color: var(--ink);
}
.mt-admin-course-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
padding: 4px 0 14px;
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
}
@media (max-width: 900px) {
.mt-admin-course-head {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
.mt-admin-course-head-eyebrow {
font-family: var(--sans);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--brand);
}
.mt-admin-course-head-title {
font-family: var(--serif);
font-size: 28px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 4px 0;
color: var(--ink);
}
.mt-admin-course-head-title em {
font-style: italic;
color: var(--ink-2);
font-weight: 500;
}
.mt-admin-course-head-meta {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
margin-top: 2px;
}
.mt-admin-course-head-meta code {
font-family: var(--mono);
font-size: 11px;
background: var(--paper-warm);
padding: 1px 6px;
border-radius: 3px;
color: var(--ink-2);
}
.mt-admin-course-head-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
flex-shrink: 0;
}
.mt-admin-course-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 22px;
align-items: start;
}
@media (max-width: 1000px) {
.mt-admin-course-grid {
grid-template-columns: 1fr;
}
}
.mt-admin-course-main {
min-width: 0;
}
.mt-admin-course-rail {
display: flex;
flex-direction: column;
gap: 12px;
position: sticky;
top: 80px;
align-self: start;
}
@media (max-width: 1000px) {
.mt-admin-course-rail {
position: static;
}
}
.mt-admin-course-rail-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px 14px;
}
.mt-admin-course-rail-lbl {
font-family: var(--sans);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--brand);
}
.mt-admin-course-rail-row {
display: grid;
grid-template-columns: 100px 1fr;
gap: 10px;
align-items: baseline;
padding: 6px 0;
border-bottom: 1px solid var(--line-3);
font-family: var(--sans);
font-size: 12px;
}
.mt-admin-course-rail-row:last-of-type {
border-bottom: none;
}
.mt-admin-course-rail-row > span:first-child {
font-family: var(--serif);
font-weight: 600;
color: var(--ink);
}
.mt-admin-course-rail-row > span:last-child {
color: var(--ink-2);
}
.mt-admin-course-rail-text {
font-family: var(--sans);
font-size: 12px;
color: var(--ink-2);
margin: 4px 0 0;
line-height: 1.55;
}
.mt-admin-course-rail-text b {
color: var(--ink);
font-weight: 600;
}
.mt-admin-course-rail-link {
display: block;
margin: 4px 0 2px;
font-family: var(--serif);
font-weight: 600;
font-size: 13px;
color: var(--brand);
text-decoration: none;
}
.mt-admin-course-rail-link:hover {
text-decoration: underline;
}
.mt-admin-course-rail-list {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.mt-admin-course-rail-list li {
font-family: var(--sans);
font-size: 12px;
color: var(--ink-2);
line-height: 1.45;
}
.mt-admin-course-rail-empty {
font-family: var(--sans);
font-size: 12px;
font-style: italic;
color: var(--ink-3);
margin: 4px 0 0;
}
.chap-block {
border: 1px solid var(--line);
border-radius: var(--radius-sm);
margin-bottom: 12px;
background: var(--paper);
}
.chap-block-head {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
}
.chap-block-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
}
.chap-block-num {
font-family: var(--sans);
font-weight: 600;
color: var(--ink-3);
}
.chap-block-title {
font-family: var(--serif);
font-weight: 500;
color: var(--ink);
}
.chap-block .grip {
cursor: grab;
color: var(--ink-3);
}
.chap-block .chevron {
color: var(--ink-3);
font-size: 14px;
width: 14px;
text-align: center;
}
.chap-block .tiny {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
}
.chap-block-body {
padding: 8px 12px 12px 40px;
border-top: 1px solid var(--line);
}
.lesson-row-wrap {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.lesson-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line);
font-family: var(--sans);
flex: 1 1 auto;
min-width: 0;
}
.lesson-row:hover {
background: var(--paper);
}
.lesson-row.editing {
cursor: default;
}
.lesson-row .grip {
cursor: grab;
color: var(--ink-3);
}
.lesson-row-title {
font-family: var(--serif);
font-weight: 500;
cursor: text;
flex: 1 1 auto;
min-width: 0;
}
.lesson-row .tiny {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
}
.lesson-row-edit-field {
margin: 0;
}
.lesson-row-actions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.lesson-ico {
width: 22px;
height: 22px;
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 11px;
color: #fff;
font-family: var(--sans);
flex-shrink: 0;
}
.lesson-ico.text {
background: var(--ink-3);
}
.lesson-ico.quiz {
background: var(--brand);
}
.lesson-ico.test {
background: var(--brand-2);
}
.mt-admin-lesson {
display: flex;
flex-direction: column;
gap: 22px;
padding: 24px 0;
}
.mt-admin-lesson-back {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
text-decoration: none;
}
.mt-admin-lesson-back:hover {
color: var(--ink);
}
.mt-admin-lesson-freeze {
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px 14px;
background: var(--surface);
display: flex;
align-items: center;
gap: 14px;
font-family: var(--sans);
font-size: 13px;
color: var(--ink-2);
}
.mt-admin-lesson-freeze--frozen {
border-color: var(--warn);
background: color-mix(in srgb, var(--warn) 8%, var(--surface));
color: var(--ink);
}
.mt-admin-lesson-body {
display: flex;
flex-direction: column;
}
.mt-block-notation-preview,
.mt-block-audio-preview,
.mt-block-example-preview,
.mt-block-pdf-preview,
.mt-block-pdf-example-preview {
display: block;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.mt-block-notation-preview:hover:not(:disabled),
.mt-block-audio-preview:hover:not(:disabled),
.mt-block-example-preview:hover:not(:disabled),
.mt-block-pdf-preview:hover:not(:disabled),
.mt-block-pdf-example-preview:hover:not(:disabled) {
background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.mt-block-notation-preview:disabled,
.mt-block-audio-preview:disabled,
.mt-block-example-preview:disabled,
.mt-block-pdf-preview:disabled,
.mt-block-pdf-example-preview:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.mt-block-notation-preview:focus-visible,
.mt-block-audio-preview:focus-visible,
.mt-block-example-preview:focus-visible,
.mt-block-pdf-preview:focus-visible,
.mt-block-pdf-example-preview:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.mt-block-notation-empty,
.mt-block-audio-empty {
padding: 14px;
color: var(--ink-3);
font-style: italic;
}
.mt-block-exercise-empty {
padding: 18px;
border: 1px dashed var(--line-2);
border-radius: var(--radius-sm);
color: var(--ink-3);
font-style: italic;
text-align: center;
cursor: pointer;
background: transparent;
}
.mt-block-exercise-empty:hover {
background: color-mix(in srgb, var(--brand) 5%, transparent);
color: var(--ink);
}
.mt-block-exercise-empty:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.mt-block-exercise-disabled {
pointer-events: none;
opacity: 0.6;
}
.mt-block-pdf,
.mt-block-pdf-example {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
font-family: var(--sans);
}
.mt-block-pdf-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--ink-2);
flex: 0 0 auto;
}
.mt-block-pdf-meta {
flex: 1 1 auto;
min-width: 0;
}
.mt-block-pdf-title {
font-size: 13px;
font-weight: 500;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mt-block-pdf-caption {
font-size: 12px;
color: var(--ink-3);
margin-top: 2px;
}
.mt-block-pdf-stat {
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
flex: 0 0 auto;
}
.mt-block-pdf-example-badge {
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--brand) 12%, transparent);
color: var(--brand);
font-weight: 500;
flex: 0 0 auto;
}
.mt-admin-class-back {
display: inline-block;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
text-decoration: none;
margin-bottom: 6px;
}
.mt-admin-class-back:hover {
color: var(--ink);
}
.mt-admin-class-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
padding: 4px 0 14px;
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
}
@media (max-width: 900px) {
.mt-admin-class-head {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
.mt-admin-class-head-eyebrow {
font-family: var(--sans);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--brand);
}
.mt-admin-class-head-title {
font-family: var(--serif);
font-size: 28px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 4px 0;
color: var(--ink);
}
.mt-admin-class-head-title em {
font-style: italic;
color: var(--ink-2);
font-weight: 500;
}
.mt-admin-class-head-meta {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
margin-top: 2px;
}
.mt-admin-class-head-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
flex-shrink: 0;
}
.mt-admin-class-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 22px;
align-items: start;
}
@media (max-width: 1100px) {
.mt-admin-class-grid {
grid-template-columns: 1fr;
}
}
.mt-admin-class-main {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.mt-admin-class-rail {
display: flex;
flex-direction: column;
gap: 12px;
position: sticky;
top: 80px;
align-self: start;
}
@media (max-width: 1100px) {
.mt-admin-class-rail {
position: static;
}
}
.mt-admin-class-rail-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px 14px;
}
.mt-admin-class-rail-card--accent {
background: var(--brand-tint);
border-color: var(--brand);
}
.mt-admin-class-rail-lbl {
font-family: var(--sans);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--brand);
}
.mt-admin-class-rail-text {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-2);
margin: 4px 0 0;
line-height: 1.55;
}
.mt-admin-class-rail-text b {
color: var(--ink);
font-weight: 600;
}
.mt-admin-class-code {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--ink);
background: var(--surface);
border: 1.5px solid var(--ink);
border-radius: var(--radius-sm);
padding: 8px 12px;
margin-top: 6px;
text-align: center;
}
.mt-admin-class-tiny {
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
}
.mt-admin-class-announcements {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.mt-admin-class-announcements-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.mt-admin-class-announcements-title {
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.005em;
margin: 0;
color: var(--ink);
}
.mt-admin-class-announcements-empty {
padding: 12px;
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-3);
font-style: italic;
background: var(--surface);
border: 1px dashed var(--line);
border-radius: var(--radius-sm);
text-align: center;
}
.mt-admin-class-announcements-empty strong {
color: var(--ink-2);
font-style: normal;
font-weight: 600;
}
.mt-admin-class-announcements-list {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.mt-admin-class-announcement {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 10px 12px;
}
.mt-admin-class-announcement-head {
display: flex;
align-items: baseline;
gap: 8px;
}
.mt-admin-class-announcement-title {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: var(--ink);
flex: 1;
min-width: 0;
}
.mt-admin-class-announcement-time {
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
flex-shrink: 0;
}
.mt-admin-class-announcement-body {
margin-top: 6px;
font-family: var(--sans);
font-size: 12.5px;
line-height: 1.55;
color: var(--ink-2);
white-space: pre-wrap;
}
.mt-admin-student-head {
display: flex;
align-items: center;
gap: 18px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
margin-bottom: 22px;
}
@media (max-width: 900px) {
.mt-admin-student-head {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
.mt-admin-student-avatar {
width: 64px;
height: 64px;
border-radius: 99px;
background: var(--brand-2);
color: #fff;
display: grid;
place-items: center;
font-family: var(--serif);
font-weight: 600;
font-size: 24px;
font-style: italic;
flex-shrink: 0;
}
.mt-admin-student-head-body {
flex: 1;
min-width: 0;
}
.mt-admin-student-head-title {
font-family: var(--serif);
font-size: 26px;
font-weight: 600;
margin: 0;
color: var(--ink);
letter-spacing: -0.01em;
}
.mt-admin-student-head-meta {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
margin-top: 2px;
}
.mt-admin-student-head-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
flex-shrink: 0;
}
.mt-admin-student-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 22px;
align-items: start;
}
@media (max-width: 1000px) {
.mt-admin-student-grid {
grid-template-columns: 1fr;
}
}
.mt-admin-student-main {
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.mt-admin-student-rail {
display: flex;
flex-direction: column;
gap: 12px;
position: sticky;
top: 80px;
align-self: start;
}
@media (max-width: 1000px) {
.mt-admin-student-rail {
position: static;
}
}
.mt-admin-student-block {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.mt-admin-student-block-head {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--surface-2);
border-bottom: 1px solid var(--line);
}
.mt-admin-student-block-head b {
font-family: var(--serif);
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
.mt-admin-student-block-head-spacer {
flex: 1;
}
.mt-admin-student-block-body {
padding: 14px 18px;
}
.mt-admin-student-empty {
padding: 18px;
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-3);
font-style: italic;
text-align: center;
}
.mt-admin-student-attempts-table {
width: 100%;
border-collapse: collapse;
font-family: var(--sans);
font-size: 12.5px;
}
.mt-admin-student-attempts-table thead th {
text-align: left;
padding: 8px 14px;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
border-bottom: 1px solid var(--line);
background: var(--surface-2);
}
.mt-admin-student-attempts-table tbody td {
padding: 9px 14px;
border-bottom: 1px solid var(--line-3);
vertical-align: middle;
}
.mt-admin-student-attempts-table tbody tr:last-child td {
border-bottom: none;
}
.mt-admin-student-attempts-table tbody tr:hover {
background: var(--surface-2);
}
.mt-admin-student-attempts-table tbody tr.mt-admin-student-attempts-row--flagged {
background: color-mix(in srgb, var(--brand-2) 5%, transparent);
}
.mt-admin-student-attempts-table b {
font-family: var(--serif);
font-weight: 600;
color: var(--ink);
}
.mt-admin-student-attempts-table .mt-admin-student-attempts-violations {
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
margin-top: 2px;
}
.mt-admin-student-attempts-table .mt-admin-student-attempts-age {
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
}
.mt-admin-student-acc-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 99px;
background: var(--ink-3);
margin-right: 5px;
vertical-align: middle;
}
.mt-admin-student-acc-dot--ok {
background: var(--ok);
}
.mt-admin-student-acc-dot--warn {
background: var(--warn);
}
.mt-admin-student-acc-dot--err {
background: var(--err);
}
.mt-admin-student-acc-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
}
.mt-admin-student-acc-label {
font-family: var(--serif);
font-size: 13px;
min-width: 150px;
color: var(--ink);
}
.mt-admin-student-acc-value {
font-family: var(--mono);
font-size: 12px;
min-width: 36px;
text-align: right;
color: var(--ink);
font-weight: 600;
}
.mt-admin-student-acc-bar {
flex: 1;
height: 6px;
border-radius: 99px;
background: var(--line);
overflow: hidden;
position: relative;
}
.mt-admin-student-acc-bar > i {
display: block;
height: 100%;
border-radius: 99px;
transition: width 300ms var(--ease);
background: var(--ink);
}
.mt-admin-student-acc-bar--ok > i {
background: var(--ok);
}
.mt-admin-student-acc-bar--warn > i {
background: var(--warn);
}
.mt-admin-student-acc-bar--err > i {
background: var(--err);
}
.mt-admin-student-engagement {
padding: 16px 18px;
}
.mt-admin-student-engagement-svg {
width: 100%;
height: 80px;
display: block;
}
.mt-admin-student-engagement-foot {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
}
.mt-admin-student-rail-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px 14px;
}
.mt-admin-student-rail-lbl {
font-family: var(--sans);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--brand);
}
.mt-admin-student-rail-progress {
font-family: var(--serif);
font-size: 32px;
font-weight: 600;
color: var(--brand);
margin-top: 4px;
line-height: 1.1;
}
.mt-admin-student-rail-tiny {
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
}
.mt-admin-student-rail-bar {
height: 6px;
border-radius: 99px;
background: var(--line);
overflow: hidden;
margin-top: 8px;
}
.mt-admin-student-rail-bar > i {
display: block;
height: 100%;
border-radius: 99px;
background: var(--brand);
transition: width 300ms var(--ease);
}
.mt-admin-student-flag-card {
background: color-mix(in srgb, var(--brand-2) 6%, var(--surface));
border: 1px solid var(--brand-2);
border-radius: var(--radius-sm);
padding: 12px 14px;
}
.mt-admin-student-flag-lbl {
font-family: var(--sans);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--brand-2);
}
.mt-admin-student-flag-text {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-2);
margin: 4px 0 0;
line-height: 1.55;
}
.mt-admin-student-flag-text b {
color: var(--ink);
font-weight: 600;
}
.mt-admin-student-notes {
display: flex;
flex-direction: column;
gap: 6px;
}
.mt-admin-student-notes-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 6px;
}
.mt-admin-student-notes-item {
background: var(--surface-2);
border: 1px solid var(--line-3);
border-radius: var(--radius-sm);
padding: 8px 10px;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-2);
}
.mt-admin-student-notes-item-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
font-size: 10.5px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.mt-admin-student-notes-textarea {
width: 100%;
min-height: 80px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
padding: 8px 10px;
font-family: var(--sans);
font-size: 12.5px;
resize: vertical;
background: var(--surface);
color: var(--ink);
}
.mt-admin-student-notes-textarea:focus {
outline: none;
border-color: var(--brand);
}
.mt-admin-student-notes-actions {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-top: 4px;
}
.mt-cpw-drawer-body {
display: flex;
flex-direction: column;
}
.mt-cpw-section {
padding: 14px 0;
border-bottom: 1px solid var(--line-3);
}
.mt-cpw-section:last-child {
border-bottom: none;
}
.mt-cpw-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
gap: 12px;
}
.mt-cpw-label {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
color: var(--ink);
white-space: nowrap;
}
.mt-cpw-hint {
font-size: 11.5px;
color: var(--ink-3);
text-align: right;
}
.mt-cpw-empty {
padding: 24px 12px;
text-align: center;
color: var(--ink-3);
font-size: 12px;
font-style: italic;
}
.mt-cpw-slot-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.mt-cpw-slot-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface-2);
}
.mt-cpw-slot-num {
font-family: var(--serif);
font-style: italic;
font-weight: 600;
font-size: 13px;
color: var(--ink-3);
width: 18px;
text-align: center;
}
.mt-cpw-slot-rn {
font-family: var(--serif);
font-style: italic;
font-weight: 600;
font-size: 13px;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
padding: 4px 8px;
flex-shrink: 0;
min-width: 72px;
}
.mt-cpw-slot-voices {
display: flex;
gap: 3px;
margin-left: auto;
}
.mt-cpw-voice-btn {
width: 28px;
height: 26px;
font-family: var(--serif);
font-style: italic;
font-weight: 600;
font-size: 13px;
color: var(--ink-3);
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 100ms var(--ease);
}
.mt-cpw-voice-btn:hover {
border-color: var(--ink-3);
color: var(--ink);
}
.mt-cpw-voice-btn.on {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.mt-cpw-slot-x {
width: 26px;
height: 26px;
border-radius: 99px;
border: 0;
background: transparent;
color: var(--ink-3);
font-size: 18px;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
}
.mt-cpw-slot-x:hover {
background: color-mix(in srgb, var(--err) 12%, transparent);
color: var(--err);
}
.mt-cpw-slot-x:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.mt-cpw-slot-x:disabled:hover {
background: transparent;
color: var(--ink-3);
}
.mt-cpw-add-chord {
margin-top: 8px;
}
.mt-cpw-tiny {
font-size: 11px;
color: var(--ink-3);
margin-bottom: 8px;
}
.mt-cpw-gen-keysig-row {
display: flex;
flex-direction: column;
}
.mt-cpw-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mt-cpw-chip {
padding: 6px 12px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--ink-2);
font-size: 12px;
font-family: var(--sans);
cursor: pointer;
}
.mt-cpw-chip.on {
background: color-mix(in srgb, var(--brand) 12%, transparent);
border-color: var(--brand);
color: var(--brand);
font-weight: 500;
}
.mt-cpw-chip-rn {
font-family: var(--serif);
font-style: italic;
}
.mt-cpw-gen-bins {
display: flex;
flex-direction: column;
gap: 16px;
}
.mt-cpw-chord-bin {
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
}
.mt-cpw-chord-bin-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-family: var(--sans);
}
.mt-cpw-chord-bin-label {
font-size: 12px;
font-weight: 500;
color: var(--ink);
}
.mt-cpw-chord-bin-tag {
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
text-transform: lowercase;
}
.mt-cpw-chord-bin-tag.major {
background: color-mix(in srgb, var(--brand) 15%, transparent);
color: var(--brand);
}
.mt-cpw-chord-bin-tag.minor {
background: color-mix(in srgb, var(--brand-2) 15%, transparent);
color: var(--brand-2);
}
.mt-cpw-chord-bin-count {
margin-left: auto;
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.mt-cpw-mode-toggle {
display: flex;
gap: 8px;
padding: 8px 0;
}
.mt-cpw-mode-btn {
flex: 1;
padding: 12px 16px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink-2);
font-family: var(--sans);
font-size: 13px;
cursor: pointer;
}
.mt-cpw-mode-btn.on {
border-color: var(--brand);
background: color-mix(in srgb, var(--brand) 8%, transparent);
color: var(--brand);
font-weight: 500;
}
.cb-customize-body {
display: block;
font-family: var(--sans);
color: var(--ink);
}
.cb-view-mode {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid var(--line-2);
}
.cb-view-mode-hint {
font-family: var(--serif);
font-style: italic;
font-size: 12px;
color: var(--ink-3);
}
.cb-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.cb-presets-bar {
padding-bottom: 12px;
margin-bottom: 4px;
border-bottom: 1px solid var(--line-2);
}
.cb-mode-block {
margin-top: 12px;
}
.cb-mode-block + .cb-mode-block {
margin-top: 14px;
}
.cb-mode-block-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.cb-mode-tag {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--brand-deep);
background: var(--brand-tint);
border-radius: 99px;
padding: 2px 8px;
}
.cb-mode-tag.minor {
color: var(--brand-2-deep, var(--ink-2));
background: var(--brand-2-tint, var(--paper-warm));
}
.cb-advanced-stub {
padding: 24px;
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: 13px;
color: var(--ink-3);
border: 1px dashed var(--line-2);
border-radius: var(--radius-md);
margin-top: 12px;
}
.cb-adv-grid-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -8px;
padding: 0 8px;
}
.cb-adv-grid {
min-width: 560px;
}
.cb-body-header {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-bottom: 12px;
}
.cb-save-preset-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
color: var(--brand-deep);
background: var(--brand-tint);
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.cb-save-preset-btn:hover {
background: var(--brand-tint-strong);
}
.mt-ks-wheels {
display: flex;
gap: 18px;
justify-content: center;
align-items: flex-start;
margin-bottom: 12px;
}
.mt-ks-wheels .mt-wheel-label {
font-size: 12px;
margin-bottom: 6px;
gap: 3px;
}
.mt-ks-wheels .mt-wheel-label-sym {
font-size: 15px;
}
.mt-ks-note {
font-family: var(--serif);
font-style: italic;
font-size: 12px;
line-height: 1.45;
color: var(--ink-3);
text-align: center;
}
.mt-ks-note strong {
font-style: normal;
font-weight: 600;
color: var(--ink-2);
}
.mt-customize-preview {
display: flex;
flex-direction: column;
gap: 12px;
}
.mt-customize-preview-step,
.mt-customize-preview-step-stub {
display: flex;
flex-direction: column;
gap: 4px;
}
.mt-customize-preview-label {
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mt-customize-preview-empty,
.mt-customize-preview-step-stub {
padding: 12px;
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: 13px;
color: var(--ink-3);
}
.mt-customize-preview-next {
margin-left: auto;
padding: 2px 8px;
background: transparent;
border: 1px solid var(--line-2);
border-radius: 4px;
font-family: var(--sans);
font-size: 11px;
color: var(--ink-2);
cursor: pointer;
}
.mt-customize-preview-next:hover {
background: var(--surface-2);
color: var(--ink);
}
.mt-meta {
display: flex;
flex-direction: column;
gap: 2px;
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
line-height: 1.5;
text-align: right;
}
@media (max-width: 1000px) {
.mt-meta {
text-align: left;
}
}
.mt-keysig-customize {
display: block;
font-family: var(--sans);
color: var(--ink);
}
.mt-keysig-view-toggle {
display: inline-flex;
align-items: center;
gap: 0;
padding: 2px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
margin-bottom: 14px;
}
.mt-keysig-view-btn {
appearance: none;
border: 0;
background: transparent;
color: var(--ink-2);
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 6px 14px;
border-radius: calc(var(--radius-sm) - 2px);
cursor: pointer;
transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
.mt-keysig-view-btn:hover {
color: var(--ink);
}
.mt-keysig-view-btn.on {
background: var(--ink);
color: var(--surface);
}
.mt-keysig-section {
display: grid;
gap: 8px;
margin-bottom: 16px;
}
.mt-keysig-section-head {
font-family: var(--serif);
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
margin: 0;
letter-spacing: 0;
}
.mt-keysig-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.mt-keysig-range-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 16rem));
gap: 10px;
inline-size: min(34rem, 100%);
}
@media (max-width: 760px) {
.mt-keysig-range-grid {
grid-template-columns: 1fr;
inline-size: min(20rem, 100%);
}
}
.mt-keysig-stepper-tile {
display: grid;
gap: 6px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
}
.mt-keysig-stepper-tile-label {
font-family: var(--sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-3);
}
.mt-keysig-stepper-tile-control {
display: grid;
grid-template-columns: 2.1rem minmax(2.5rem, 1fr) 2.1rem;
align-items: center;
gap: 8px;
}
.mt-keysig-stepper-tile-step {
appearance: none;
block-size: 2.1rem;
inline-size: 2.1rem;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink-2);
font: inherit;
font-weight: 700;
cursor: pointer;
transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease);
}
.mt-keysig-stepper-tile-step:hover:not(:disabled), .mt-keysig-stepper-tile-step:focus-visible {
border-color: var(--ink);
color: var(--ink);
outline: none;
}
.mt-keysig-stepper-tile-step:disabled {
cursor: default;
opacity: 0.45;
}
.mt-keysig-stepper-tile-value {
font-family: var(--sans);
font-size: 18px;
font-weight: 700;
color: var(--ink);
text-align: center;
line-height: 1;
}
.mt-keysig-chip-grid {
display: grid;
gap: 6px;
}
.mt-keysig-chip-grid-row {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
}
.mt-keysig-chip {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 100%;
min-block-size: 2rem;
text-align: center;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
}
.mt-admin-edit-drawer {
font-family: var(--sans);
color: var(--ink);
}
.mt-admin-edit-drawer .mt-edit-section-label {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
color: var(--ink);
margin: 14px 0 10px;
letter-spacing: -0.005em;
}
.mt-admin-edit-drawer .mt-edit-description {
font-family: var(--serif);
font-style: italic;
font-size: 12.5px;
color: var(--ink-3);
margin-top: 12px;
line-height: 1.5;
}
.mt-admin-edit-drawer .mud-input-outlined .mud-input-outlined-border {
border-color: var(--line-2);
border-radius: var(--radius-sm);
}
.mt-admin-edit-drawer .mud-input-outlined:hover .mud-input-outlined-border {
border-color: var(--ink-3);
}
.mt-admin-edit-drawer .mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.mt-admin-edit-drawer .mud-input-outlined .mud-input-control-input:focus + .mud-input-outlined-border {
border-color: var(--brand);
border-width: 1px;
}
.mt-admin-edit-drawer .mud-input-label-outlined.mud-input-label {
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
letter-spacing: 0.01em;
}
.mt-admin-edit-drawer .mud-input-label-outlined.mud-input-label.mud-input-label-shrink {
color: var(--ink-2);
}
.mt-admin-edit-drawer .mud-input-control-input {
font-family: var(--sans);
font-size: 13.5px;
color: var(--ink);
}
.mt-admin-edit-drawer .mt-edit-action-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--line-3);
}
.mt-admin-edit-drawer .mt-edit-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 600;
border-radius: 99px;
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--ink-2);
line-height: 1.4;
}
.mt-admin-edit-drawer .mt-edit-badge--ok {
background: var(--ok-tint, color-mix(in srgb, var(--ok) 14%, var(--surface)));
color: var(--ok);
border-color: color-mix(in srgb, var(--ok) 40%, var(--line-2));
}
.mt-admin-edit-drawer .mt-edit-badge--warn {
background: var(--warn-tint, color-mix(in srgb, var(--brand) 14%, var(--surface)));
color: var(--brand-deep);
border-color: color-mix(in srgb, var(--brand) 40%, var(--line-2));
}
.mt-admin-edit-drawer .mt-edit-badge .mt-edit-badge-glyph {
font-size: 13px;
line-height: 1;
}
.mt-admin-edit-drawer .mt-edit-status {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
margin-left: auto;
align-self: center;
}
.mt-admin-edit-drawer .mt-edit-status--warn {
color: var(--brand-deep);
font-weight: 500;
}
.mt-admin-edit-drawer .mt-edit-status--error {
color: var(--err);
font-weight: 500;
}
.mt-admin-edit-drawer .mud-alert.mud-alert-outlined-info,
.mt-admin-edit-drawer .mud-alert.mud-alert-outlined-warning {
background: var(--paper-warm);
border: 1px dashed var(--line-2);
border-radius: var(--radius-sm);
color: var(--ink-2);
}
.mt-admin-edit-drawer .mud-alert.mud-alert-outlined-info .mud-icon-root,
.mt-admin-edit-drawer .mud-alert.mud-alert-outlined-warning .mud-icon-root {
color: var(--ink-3);
}
.mt-admin-edit-drawer .mud-alert.mud-alert-outlined-info .mud-alert-message,
.mt-admin-edit-drawer .mud-alert.mud-alert-outlined-warning .mud-alert-message {
font-family: var(--sans);
font-size: 13px;
}
.mt-exercise-picker {
display: flex;
flex-direction: column;
gap: 22px;
}
.mt-exercise-picker-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.mt-exercise-picker-section-label {
font-family: var(--serif);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0;
padding-bottom: 6px;
border-bottom: 1px solid var(--line-3);
}
.mt-exercise-picker-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
@media (max-width: 560px) {
.mt-exercise-picker-grid {
grid-template-columns: 1fr;
}
}
.mt-exercise-picker-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 12px 14px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
background: var(--surface);
text-align: left;
cursor: pointer;
transition: all 140ms var(--ease);
font-family: var(--sans);
width: 100%;
}
.mt-exercise-picker-card:hover {
border-color: var(--brand);
background: var(--brand-tint);
box-shadow: 0 1px 0 var(--brand);
}
.mt-exercise-picker-card:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.mt-exercise-picker-card:active {
transform: translateY(1px);
}
.mt-exercise-picker-card-title {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
color: var(--ink);
line-height: 1.25;
}
.mt-exercise-picker-card-desc {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
line-height: 1.45;
}
.mt-about {
max-width: 720px;
}
.mt-about-section-title {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 36px 0 4px;
color: var(--ink);
}
.mt-about-paragraph {
font-size: 15px;
color: var(--ink-2);
line-height: 1.65;
margin: 12px 0 0;
}
.mt-about-paragraph strong {
color: var(--ink);
font-weight: 600;
}
.mt-pricing {
max-width: 1100px;
}
.mt-pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
margin-top: 32px;
}
.mt-pricing-card {
display: flex;
flex-direction: column;
border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
border-radius: 12px;
padding: 22px;
background: var(--paper, #fff);
min-height: 380px;
}
.mt-pricing-card--accent {
border-color: var(--brand, #6b4d2e);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.mt-pricing-card-eyebrow {
font-family: var(--sans);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11px;
font-weight: 600;
color: var(--ink-3);
margin-bottom: 8px;
}
.mt-pricing-card-price {
font-family: var(--serif);
font-size: 28px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.1;
color: var(--ink);
}
.mt-pricing-card-price-unit {
font-size: 12px;
color: var(--ink-3);
font-style: italic;
margin-top: 2px;
}
.mt-pricing-card-lede {
font-size: 14px;
color: var(--ink-2);
line-height: 1.55;
margin: 14px 0 0;
}
.mt-pricing-card-list {
list-style: none;
margin: 14px 0 0;
padding: 0;
font-size: 13px;
color: var(--ink-2);
flex: 1;
}
.mt-pricing-card-list li {
position: relative;
padding: 5px 0 5px 18px;
line-height: 1.45;
}
.mt-pricing-card-list li::before {
content: "·";
position: absolute;
left: 4px;
color: var(--ink-3);
font-weight: 700;
}
.mt-pricing-card-cta-pending {
display: inline-block;
margin-top: 18px;
padding: 8px 12px;
font-size: 12px;
color: var(--ink-3);
font-style: italic;
border: 1px dashed var(--border, rgba(0, 0, 0, 0.16));
border-radius: 6px;
text-align: center;
}
.mt-pricing-footnote {
font-size: 13px;
color: var(--ink-3);
font-style: italic;
line-height: 1.55;
margin: 28px 0 0;
max-width: 640px;
}