:root { --ink:#121212; --muted:#626262; --surface:#fff; --canvas:#f5f4f1; --line:#dedbd5; --accent:#df2530; --accent-dark:#a9131d; --success:#19764a; --success-bg:#e4f4eb; --danger:#b5242d; --danger-bg:#fbe8e9; --shadow:0 14px 40px rgba(18,18,18,.09); --radius:18px; --max:1120px; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--canvas); }
body { min-height:100dvh; margin:0; line-height:1.5; background:var(--canvas); }
a { color:var(--accent-dark); font-weight:700; text-underline-offset:3px; }
button, input { font:inherit; }
button, .button { touch-action:manipulation; }
.skip-link { position:absolute; left:12px; top:-60px; z-index:10; padding:10px 14px; background:var(--ink); color:#fff; border-radius:8px; }
.skip-link:focus { top:12px; }
.site-header { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px clamp(18px, 5vw, 56px); background:#fff; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; letter-spacing:-.03em; white-space:nowrap; }
.brand img { width:40px; height:40px; object-fit:contain; border-radius:5px; }
.brand span { font-size:1.05rem; }.brand strong { color:var(--accent); }
nav { display:flex; align-items:center; gap:16px; } nav a, .link-button { color:var(--ink); font-size:.9rem; text-decoration:none; white-space:nowrap; }
.nav-cta { padding:9px 13px; color:#fff; background:var(--accent); border-radius:10px; }.inline-form { display:inline; }.link-button { border:0; background:none; padding:0; cursor:pointer; font-weight:700; }
main { width:min(var(--max), calc(100% - 36px)); margin:0 auto; }.site-footer { margin-top:56px; padding:28px 18px; color:#777; text-align:center; font-size:.82rem; border-top:1px solid var(--line); }
.hero { min-height:calc(100dvh - 150px); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); align-items:center; gap:clamp(34px,8vw,100px); padding:64px 0; }.eyebrow { margin:0 0 8px; color:var(--accent-dark); font-size:.75rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.hero h1, h1, h2, h3, p { margin-top:0; }.hero h1 { max-width:660px; margin-bottom:18px; font-size:clamp(2.8rem, 6vw, 5.3rem); line-height:.98; letter-spacing:-.07em; }.hero h1 em { color:var(--accent); font-style:normal; }.lead { max-width:610px; color:var(--muted); font-size:1.13rem; }.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border:1px solid transparent; border-radius:12px; font-weight:800; text-decoration:none; cursor:pointer; transition:transform .2s ease, background .2s ease, box-shadow .2s ease; }.button:hover { transform:translateY(-1px); }.button:focus-visible, button:focus-visible, input:focus-visible, a:focus-visible { outline:3px solid #f4a800; outline-offset:3px; }.button-primary { color:#fff; background:var(--accent); box-shadow:0 8px 18px rgba(223,37,48,.24); }.button-primary:hover { background:var(--accent-dark); }.button-secondary { color:var(--ink); background:#fff; border-color:var(--line); }
.hero-card { position:relative; min-height:310px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:34px; background:var(--ink); color:#fff; border-radius:var(--radius); box-shadow:var(--shadow); }.hero-card:before { position:absolute; right:-80px; bottom:-110px; width:250px; height:250px; border:18px solid var(--accent); border-radius:50%; content:""; }.hero-card p { position:relative; margin:28px 0 0; color:#f2f2f2; font-size:1.05rem; }.staff-lines { position:relative; display:grid; gap:12px; }.staff-lines span { height:2px; background:#fff; }.staff-lines b { position:absolute; top:2px; left:49%; width:27px; height:21px; border-radius:50%; background:var(--accent); transform:rotate(-18deg); }.staff-lines b:after { position:absolute; right:-5px; bottom:12px; width:3px; height:65px; background:var(--accent); content:""; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:52px; }.feature-grid article, .stat-grid article { padding:22px; background:#fff; border:1px solid var(--line); border-radius:15px; }.feature-grid h2 { margin-bottom:8px; font-size:1.08rem; }.feature-grid p { margin:0; color:var(--muted); font-size:.92rem; }
.auth-shell { display:grid; place-items:center; min-height:calc(100dvh - 180px); padding:36px 0; }.auth-card { width:min(100%, 490px); padding:clamp(26px,6vw,46px); background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }.auth-card h1 { margin-bottom:8px; font-size:2rem; letter-spacing:-.045em; }.auth-card > p:not(.eyebrow):not(.muted) { color:var(--muted); }.auth-logo { display:block; width:80px; height:80px; margin-bottom:26px; object-fit:contain; }
.stack-form { display:grid; gap:14px; margin-top:26px; }.stack-form label { display:grid; gap:6px; font-size:.91rem; font-weight:750; }.stack-form input { width:100%; min-height:46px; padding:10px 12px; border:1px solid #bdbab4; border-radius:10px; background:#fff; color:var(--ink); }.stack-form small, .helper { color:var(--muted); font-size:.8rem; font-weight:500; }.field-error { margin:0; color:var(--danger); font-size:.84rem; font-weight:700; }.notice { margin:18px 0 0; padding:12px; border-radius:10px; font-size:.9rem; }.notice-error { color:#7e161c; background:var(--danger-bg); }.muted { margin-top:24px; color:var(--muted); font-size:.9rem; }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:42px 0 28px; }.page-heading h1 { margin-bottom:8px; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.06em; }.page-heading p:not(.eyebrow) { margin:0; color:var(--muted); }.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.stat-grid article { display:grid; gap:4px; }.stat-grid span { color:var(--muted); font-size:.82rem; font-weight:700; }.stat-grid strong { font-size:1.7rem; letter-spacing:-.05em; }.section-heading { display:flex; justify-content:space-between; align-items:center; margin-top:42px; }.section-heading h2 { margin:0; font-size:1.5rem; letter-spacing:-.04em; }
.empty-state { max-width:620px; margin:36px auto; padding:44px 28px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }.empty-state h1, .empty-state h2 { margin-bottom:9px; letter-spacing:-.04em; }.empty-state p { color:var(--muted); }.empty-state .button { margin-top:14px; }
.exercise-list { display:grid; gap:12px; margin-top:20px; }.exercise-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:20px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:15px; }.exercise-row h3 { margin:8px 0 3px; font-size:1rem; }.exercise-row p { margin:0; color:var(--muted); font-size:.85rem; }.status { display:inline-flex; padding:3px 8px; border-radius:999px; font-size:.72rem; font-weight:800; }.status-in_progress { color:#8a5500; background:#fff1d4; }.status-completed { color:#146039; background:var(--success-bg); }.status-expired { color:#7e161c; background:var(--danger-bg); }.exercise-score { min-width:72px; text-align:right; }.exercise-score strong { display:block; font-size:1.35rem; letter-spacing:-.05em; }.exercise-score span { color:var(--muted); font-size:.76rem; }
.form-page { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr); gap:clamp(32px,7vw,80px); align-items:start; padding:46px 0; }.form-intro { position:sticky; top:22px; }.form-intro h1 { margin-bottom:10px; font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.06em; }.form-intro p:not(.eyebrow) { color:var(--muted); }.settings-form { display:grid; gap:28px; padding:clamp(22px,4vw,38px); background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }.settings-form fieldset { margin:0; padding:0; border:0; }.settings-form legend { margin-bottom:12px; font-size:1.05rem; font-weight:800; }.choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.small-grid { grid-template-columns:repeat(4,1fr); }.choice { position:relative; display:block; min-height:54px; cursor:pointer; }.choice input { position:absolute; opacity:0; inset:0; }.choice span { min-height:54px; display:flex; align-items:center; justify-content:center; padding:9px; text-align:center; border:1px solid #c6c2bc; border-radius:11px; font-size:.87rem; font-weight:750; transition:border-color .18s ease, background .18s ease, color .18s ease; }.choice input:checked + span { border-color:var(--ink); background:var(--ink); color:#fff; }.choice input:focus-visible + span { outline:3px solid #f4a800; outline-offset:2px; }.form-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }.form-actions > a { font-size:.9rem; }
.quiz-shell { width:min(700px,100%); min-height:calc(100dvh - 122px); display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:14px; margin:0 auto; padding:18px 0 12px; }.quiz-header { display:flex; align-items:end; justify-content:space-between; gap:16px; }.quiz-header > div { flex:1; font-size:.82rem; font-weight:800; }.progress { height:7px; margin-top:7px; overflow:hidden; background:#ddd9d3; border-radius:99px; }.progress i { display:block; height:100%; background:var(--accent); border-radius:inherit; }.quiz-header dl { display:flex; gap:11px; margin:0; }.quiz-header dl div { min-width:44px; text-align:right; }.quiz-header dt { color:var(--muted); font-size:.68rem; font-weight:800; text-transform:uppercase; }.quiz-header dd { margin:0; font-size:1rem; font-weight:900; font-variant-numeric:tabular-nums; }.timer dd { color:var(--accent-dark); }.timer.is-low dd { color:var(--danger); animation:pulse 1s ease-in-out infinite; }
.quiz-page .site-footer { display:none; }
.note-card { min-height:0; display:grid; place-items:center; align-content:center; padding:12px; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }.note-card p { margin:0 0 2px; font-size:.85rem; font-weight:800; }.note-card img { display:block; width:min(100%, 400px); height:auto; max-height:min(42dvh,310px); object-fit:contain; }.answer-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }.answer-button { min-height:64px; display:grid; place-content:center; gap:2px; padding:8px 5px; color:var(--ink); background:#fff; border:1px solid #c8c4bd; border-radius:12px; cursor:pointer; transition:transform .16s ease, border-color .16s ease, background .16s ease; }.answer-button:hover { border-color:var(--accent); transform:translateY(-1px); }.answer-button:active { transform:scale(.98); }.answer-button strong { font-size:1rem; }.answer-button span { color:var(--muted); font-size:.76rem; font-weight:650; }.answer-result { cursor:default; }.answer-result.correct { color:#0c5732; border-color:var(--success); background:var(--success-bg); }.answer-result.wrong { color:#8d1e25; border-color:var(--danger); background:var(--danger-bg); }.answer-result.correct span, .answer-result.wrong span { color:inherit; }.answer-result small { font-weight:800; }.feedback-shell { grid-template-rows:auto minmax(0,1fr) auto; }.feedback-message { display:flex; gap:9px; align-items:baseline; padding:12px 14px; border-radius:12px; }.feedback-message strong { font-size:1rem; }.feedback-message span { font-size:.86rem; }.feedback-message.is-correct { color:#0c5732; background:var(--success-bg); }.feedback-message.is-wrong { color:#8d1e25; background:var(--danger-bg); }.note-card.compact img { max-height:min(29dvh,205px); }.feedback-grid { pointer-events:none; }
.results-hero { padding:58px 0 42px; text-align:center; }.results-hero h1 { margin:0; color:var(--accent); font-size:clamp(4.2rem,12vw,7rem); line-height:.9; letter-spacing:-.09em; }.results-hero > p:not(.eyebrow) { margin:15px auto 0; color:var(--muted); }.result-metrics { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 24px; margin:25px 0; color:var(--muted); font-size:.9rem; }.result-metrics b { color:var(--ink); }.review-section { padding-bottom:30px; }.review-list { display:grid; gap:12px; margin-top:20px; }.review-item { display:grid; grid-template-columns:180px minmax(0,1fr); gap:20px; align-items:center; padding:16px; background:#fff; border:1px solid var(--line); border-left-width:5px; border-radius:15px; }.review-item.review-correct { border-left-color:var(--success); }.review-item.review-wrong { border-left-color:var(--danger); }.review-item img { width:180px; height:110px; object-fit:contain; }.review-item h3 { margin:0 0 7px; }.review-item p { margin:4px 0; color:var(--muted); font-size:.9rem; }.review-item strong { color:var(--ink); }
.admin-table-wrap { overflow-x:auto; margin-top:20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }.admin-table-wrap table { width:100%; min-width:720px; border-collapse:collapse; }.admin-table-wrap th, .admin-table-wrap td { padding:16px; text-align:left; border-bottom:1px solid var(--line); font-size:.9rem; }.admin-table-wrap th { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; }.admin-table-wrap tr:last-child td { border:0; }.admin-table-wrap td small { display:block; color:var(--muted); }
@keyframes pulse { 50% { opacity:.45; } }
@media (max-width:760px) { .site-header { min-height:65px; padding:8px 18px; }.brand img { width:34px; height:34px; }.brand span { font-size:.95rem; } nav { gap:11px; } nav a, .link-button { font-size:.78rem; }.nav-cta { padding:8px 9px; } main { width:min(100% - 28px, var(--max)); }.hero { grid-template-columns:1fr; min-height:auto; padding:44px 0 32px; }.hero h1 { font-size:clamp(2.7rem,14vw,4rem); }.hero-card { min-height:220px; }.feature-grid { grid-template-columns:1fr; }.stat-grid { grid-template-columns:repeat(2,1fr); }.page-heading { align-items:start; flex-direction:column; padding:32px 0 20px; }.exercise-row { grid-template-columns:1fr auto; gap:12px; }.exercise-row .button { grid-column:1/-1; }.exercise-score { grid-column:2; grid-row:1; }.form-page { grid-template-columns:1fr; padding:32px 0; }.form-intro { position:static; }.choice-grid { grid-template-columns:1fr; }.small-grid { grid-template-columns:repeat(2,1fr); }.quiz-shell { min-height:calc(100dvh - 102px); gap:10px; padding:10px 0 8px; }.quiz-header { align-items:center; }.quiz-header dl { gap:7px; }.quiz-header dl div { min-width:37px; }.quiz-header dt { font-size:.58rem; }.quiz-header dd { font-size:.86rem; }.note-card { padding:7px; }.note-card p { font-size:.76rem; }.note-card img { max-height:min(38dvh,290px); }.answer-grid { gap:6px; }.answer-button { min-height:54px; border-radius:10px; }.answer-button strong { font-size:.88rem; }.answer-button span { font-size:.67rem; }.feedback-message { padding:9px 10px; }.feedback-message span { font-size:.75rem; }.review-item { grid-template-columns:1fr; gap:10px; }.review-item img { width:100%; height:125px; }.site-footer { margin-top:34px; } }
@media (max-height:670px) and (max-width:760px) { .site-header { display:none; }.quiz-shell { min-height:100dvh; }.quiz-header { padding-top:4px; }.note-card img { max-height:27dvh; }.answer-button { min-height:47px; }.note-card p { display:none; } }
@media (prefers-reduced-motion:reduce) { *, *:before, *:after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* The supplied note artwork already includes its white canvas. Let it fill the
   question card so the musical staff is not rendered as a small centered image. */
.note-card { grid-template-rows:auto minmax(0,1fr); align-content:stretch; }
.note-card img { width:100%; height:100%; min-height:0; max-height:none; object-fit:fill; }