/* Clefhop. One stylesheet, tokens first, light and dark via data-theme or the system.
   Direction 1E, Arcade: navy night, white staff, hot pink and neon mint. The light
   appearance is the same family on white paper with navy ink; it is designed, not derived. */
/* The clef glyphs come from Noto Music, shipped with the app. Without this the
   browser fell back to Apple Symbols, whose clefs are drawn to different metrics
   and landed on the wrong staff lines entirely (2026-09-22). */
@font-face {
  font-family: "Noto Music";
  src: url("/fonts/NotoMusic-Regular.ttf") format("truetype");
  font-display: block;
}

/* Baloo 2 and Nunito, served from this app rather than Google Fonts, so a
   child's page load tells nobody else their address. Variable fonts, latin
   and latin-ext only (SIL Open Font License; fetched 2026-10-11). */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("/fonts/Baloo2-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("/fonts/Baloo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("/fonts/Nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("/fonts/Nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #f5f7ff; --paper-2: #e9edfb; --card: #ffffff; --line: #dde3f5; --line-2: #c3cbe8;
  --ink: #0f1630; --ink-2: #3a4470; --muted: #6a7398;
  --accent: #e8266f; --accent-ink: #ffffff; --accent-soft: #ffe1ec; --accent-deep: #b8144f;
  --ok: #0f9d6a; --ok-text: #0b7a52; --bad-text: #b3261b; --ok-ink: #ffffff; --ok-soft: #d6f7e8; --bad: #e23d2e; --bad-soft: #fde0dd; --warn: #e39a00; --warn-ink: #6b4700; --warn-soft: #fff0c9; --gold: #f2b705;
  --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(15,22,48,.06), 0 10px 28px rgba(15,22,48,.08);
  --sans: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Baloo 2", Nunito, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --music: "Noto Music", "Bravura", "Apple Symbols", serif;
  --press: #8e0f3d;
  --staff-ink: #0f1630;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0f1630; --paper-2: #161f40; --card: #1a2448; --line: #2a3663; --line-2: #3d4b80; --ink: #f2f4ff; --ink-2: #c3c9e6; --muted: #8e97bf; --accent: #ff4d8d; --accent-ink: #0f1630; --accent-soft: #3a2145; --accent-deep: #ff7aa8; --ok: #3dffb0; --ok-text: #3dffb0; --bad-text: #ff8a7d; --ok-ink: #0f1630; --ok-soft: #164a3a; --bad: #ff6b5c; --bad-soft: #4a2323; --warn: #ffd166; --warn-ink: #ffd166; --warn-soft: #4a3f1c; --gold: #ffd166; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35); --staff-ink: #f2f4ff; --press: #b8144f; color-scheme: dark; } }
:root[data-theme="dark"] { --press: #b8144f; --paper: #0f1630; --paper-2: #161f40; --card: #1a2448; --line: #2a3663; --line-2: #3d4b80; --ink: #f2f4ff; --ink-2: #c3c9e6; --muted: #8e97bf; --accent: #ff4d8d; --accent-ink: #0f1630; --accent-soft: #3a2145; --accent-deep: #ff7aa8; --ok: #3dffb0; --ok-text: #3dffb0; --bad-text: #ff8a7d; --ok-ink: #0f1630; --ok-soft: #164a3a; --bad: #ff6b5c; --bad-soft: #4a2323; --warn: #ffd166; --warn-ink: #ffd166; --warn-soft: #4a3f1c; --gold: #ffd166; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35); --staff-ink: #f2f4ff; color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--paper); }
a { color: var(--accent-deep); text-decoration: none; } @media (hover: hover) and (pointer: fine) { a:hover { text-decoration: underline; } }
h1, h2, h3 { margin: 0 0 .4rem; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; font-family: var(--display); }
h1 { font-size: 1.9rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .8rem; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .fine { font-size: .78rem; color: var(--muted); margin-top: .8rem; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; background: var(--paper-2); padding: .05em .3em; border-radius: 4px; }
kbd { font: inherit; font-size: .8em; padding: .05em .4em; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--card); }
hr { border: 0; border-top: 1px solid var(--line); margin: .4rem 0; }
[id] { scroll-margin-top: 5rem; }
.skip-link { position: absolute; left: 1rem; top: -3rem; background: var(--ink); color: var(--paper); padding: .5rem .8rem; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.ico { vertical-align: -.25em; }
.ico.flip { transform: scaleX(-1); }
[hidden] { display: none !important; }
/* !important because a utility has to beat input[type="email"] { width: 100% }, which outranks a
   bare class: the password forms' hidden username was spanning the page and scrolling it sideways. */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 !important; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 2.6rem; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .btn:hover { text-decoration: none; border-color: var(--accent); } }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } @media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); } }
.btn-ghost { background: transparent; }
.btn-danger { border-color: var(--bad-text); color: var(--bad-text); } @media (hover: hover) and (pointer: fine) { .btn-danger:hover { background: var(--bad); color: #fff; } }
.btn-sm { height: 2.75rem; padding: 0 .95rem; font-size: .9rem; } .btn-lg { height: 3.1rem; padding: 0 1.6rem; font-size: 1.05rem; } .btn-block { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }
form.button_to { display: contents; }

/* Cards, pages */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.card + .card, .grid-2 + .card, .card + .grid-2 { margin-top: 1rem; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.page { width: min(1080px, 100% - 2rem); margin: 0 auto; padding: 1.4rem 0 3rem; }
.page.narrow { max-width: 640px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.page-head p { margin: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
/* The gap spaces a grid's cards. `.card + .card` dropped the right-hand card 1rem,
   so the left panels stood taller than the right on Home and Progress. */
.grid-2 > .card + .card { margin-top: 0; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: .3rem; }
.plain-list { list-style: none; margin: 0; padding: 0; } .row-line { padding: .4rem 0; border-top: 1px solid var(--line); } .row-line:first-child { border-top: 0; }
.errors { background: var(--bad-soft); color: var(--bad-text); padding: .6rem .8rem; border-radius: var(--radius-sm); margin-bottom: .8rem; font-weight: 600; }
.pill { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: .8rem; font-weight: 700; }
.star { color: var(--line-2); font-size: 1em; } .star.on { color: var(--gold); }
.table { width: 100%; border-collapse: collapse; } .table th, .table td { text-align: left; padding: .45rem .5rem; border-top: 1px solid var(--line); vertical-align: top; } .table th { border-top: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.table.small td { font-size: .85rem; }

/* App header. The app stands on the site's manuscript paper: faint staves, navy
   ink, a 2px rule under the masthead, stamped cards. docs/DESIGN.md. */
.app-body { --paper: #ffffff; --staffline: rgba(15, 22, 48, 0.045); background-color: var(--paper);
  background-image: linear-gradient(to bottom, var(--staffline) 0 1px, transparent 1px 9px, var(--staffline) 9px 10px, transparent 10px 18px, var(--staffline) 18px 19px, transparent 19px 27px, var(--staffline) 27px 28px, transparent 28px 36px, var(--staffline) 36px 37px, transparent 37px 168px);
  background-size: 100% 168px;
  /* The footer meets the bottom of a short page instead of floating mid-screen. */
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.app-body > main { flex: 1 0 auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-body { --paper: #0f1630; --staffline: rgba(242, 244, 255, 0.05); } }
:root[data-theme="dark"] .app-body { --paper: #0f1630; --staffline: rgba(242, 244, 255, 0.05); }
.app-body ::selection { background: var(--accent); color: #fff; }
.app-header { background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 20; }
.app-header .brand-name { font-family: var(--display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; }
.app-body .card { border: 2px solid var(--ink); box-shadow: 0 8px 0 -4px var(--ink); border-radius: 16px; }
.app-body .btn { font-weight: 800; border-width: 2px; }
.app-body .btn-primary { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); box-shadow: 0 6px 0 -2px var(--press); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .app-body .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 8px 0 -2px var(--press); } }
.app-body .btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 -1px var(--press); }
.app-body .btn-ghost { border-color: var(--ink); color: var(--ink); background: var(--card); }
@media (hover: hover) and (pointer: fine) { .app-body .btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } }
.app-body .eyebrow { color: var(--accent-deep); }
.app-wrap { width: min(1120px, 100% - 2rem); margin: 0 auto; display: flex; align-items: center; gap: 1rem; height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 900; font-size: 1.15rem; color: var(--ink); letter-spacing: -.02em; flex: none; } @media (hover: hover) and (pointer: fine) { .brand:hover { text-decoration: none; } }
.brand-mark svg { display: block; }
.app-nav { display: flex; gap: .1rem; margin-left: .2rem; min-width: 0; }
.nav-item { display: inline-flex; align-items: center; gap: .38rem; min-height: 2.6rem; padding: .35rem .7rem; border-radius: 999px; color: var(--ink-2); font-weight: 800; font-size: .95rem; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease); }
.nav-item .ico { flex: none; }
@media (hover: hover) and (pointer: fine) { .nav-item:hover { background: var(--accent-soft); color: var(--accent-deep); text-decoration: none; } }
.nav-item.active, .nav-item.active:hover { background: var(--ink); color: var(--paper); }
.app-tools { margin-left: auto; display: flex; align-items: center; gap: .4rem; flex: none; }
.tool-link { display: inline-flex; align-items: center; gap: .38rem; min-height: 2.6rem; padding: .35rem .7rem; border-radius: 999px; color: var(--ink-2); font-weight: 800; font-size: .95rem; }
@media (hover: hover) and (pointer: fine) { .tool-link:hover { background: var(--accent-soft); color: var(--accent-deep); text-decoration: none; } }
.tool-link.active { background: var(--ink); color: var(--paper); }
.menu { position: relative; } .menu summary { list-style: none; cursor: pointer; } .menu summary::-webkit-details-marker { display: none; }
.menu-button { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .25rem .7rem .25rem .25rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); font-weight: 800; color: var(--ink); box-shadow: 0 4px 0 -2px var(--ink); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .menu-button:hover { transform: translateY(-1px); box-shadow: 0 6px 0 -2px var(--ink); } }
.menu[open] .menu-button { transform: translateY(2px); box-shadow: 0 2px 0 -1px var(--ink); }
.menu-button .chev { color: var(--ink-2); flex: none; transition: transform .2s var(--ease); }
.menu[open] .menu-button .chev { transform: rotate(180deg); }
.menu-panel { position: absolute; right: 0; top: calc(100% + .55rem); min-width: 16rem; width: max-content; max-width: min(22rem, calc(100vw - 2rem)); background: var(--card); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 8px 0 -4px var(--ink); padding: .45rem; z-index: 30; }
.menu-section { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: .45rem .6rem .25rem; }
.menu-row { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; width: 100%; min-height: 2.75rem; text-align: left; padding: .35rem .6rem; border-radius: 10px; color: var(--ink); background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .menu-row:hover { background: var(--accent-soft); color: var(--accent-deep); text-decoration: none; } } .menu-row.current { font-weight: 800; cursor: default; } @media (hover: hover) and (pointer: fine) { .menu-row.current:hover { background: none; color: var(--ink); } }
.menu-row .avatar.sm { justify-self: center; }
.menu-ico { display: inline-flex; justify-content: center; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .menu-row:hover .menu-ico { color: inherit; } }
.menu-tick { color: var(--ok); }
.menu-panel hr { margin: .35rem .3rem; border-top: 1px solid var(--line); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: color-mix(in srgb, var(--avatar, var(--accent)) 18%, var(--card)); border: 2px solid var(--avatar, var(--accent)); font-size: 1.1rem; flex: none; }
.avatar.sm { width: 1.6rem; height: 1.6rem; font-size: .85rem; border-width: 1.5px; } .avatar.lg { width: 3.4rem; height: 3.4rem; font-size: 1.7rem; border-width: 3px; } .avatar.xl { width: 5.5rem; height: 5.5rem; font-size: 2.8rem; border-width: 3px; }
.impersonation-bar { background: var(--gold); color: #2a2000; text-align: center; padding: .4rem; font-size: .9rem; }
.tabbar { display: none; }
.app-footer { padding: 0 0 1.6rem; margin-top: 2.5rem; font-size: .9rem; color: var(--muted); }
.app-footer .app-wrap { height: auto; display: block; }
.app-footer .fine-end { margin-bottom: 1.1rem; }
.app-footer .foot-row { display: flex; align-items: center; gap: .8rem 1.4rem; flex-wrap: wrap; }
.app-footer nav { display: flex; gap: .3rem 1.1rem; flex-wrap: wrap; margin-left: auto; } .app-footer nav a { color: var(--ink-2); font-weight: 700; }
/* The build tag (shared/_version, identical in every project) is grey at 70%, 1.9:1 on this paper; here it takes the page's muted ink. */
.app-footer .build-tag, .mk-footer .build-tag { margin-left: 0; color: var(--muted); opacity: 1; }
.foot-brand { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; color: var(--ink); }
/* A tablet keeps every place in the masthead, each a picture over its word. */
@media (max-width: 1099px) {
  .app-header .app-wrap { height: 4.4rem; gap: .6rem; }
  .app-header .brand-name { display: none; }
  .app-nav { gap: 0; margin-left: 0; }
  .nav-item, .tool-link { flex-direction: column; gap: .1rem; padding: .3rem .5rem; font-size: .74rem; border-radius: 12px; min-height: 3.2rem; justify-content: center; }
  .nav-item .ico, .tool-link .ico { width: 1.35em; height: 1.35em; }
  .menu-name { display: none; } .menu-button { padding-right: .55rem; }
}
@media (max-width: 760px) {
  .app-header .app-wrap { height: 3.75rem; }
  .app-header .brand-name { display: inline; }
  .app-nav, .tool-link { display: none; }
  .menu-name { display: inline; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-footer { margin-bottom: 4.6rem; }
  .app-footer nav { margin-left: 0; width: 100%; gap: .55rem 1.1rem; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 2px solid var(--ink); padding: .3rem .3rem max(.3rem, env(safe-area-inset-bottom)); z-index: 20; }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 3.1rem; border-radius: 12px; font-size: .72rem; font-weight: 800; color: var(--ink-2); }
  .tabbar a .ico { width: 1.5em; height: 1.5em; }
  @media (hover: hover) and (pointer: fine) { .tabbar a:hover { text-decoration: none; } }
  .tabbar a.active { color: var(--paper); background: var(--ink); }
  .app-main { padding-bottom: 4.4rem; }
  /* A drill or a game owns the phone: no tab bar under the answer buttons. */
  .is-play .tabbar, .is-play .app-footer { display: none; }
  .is-play .app-main { padding-bottom: 0; }
}
@media (max-width: 380px) { .menu-name { display: none; } }
.sub-tabs { display: flex; gap: .3rem; margin: -.2rem 0 1.3rem; border-bottom: 2px solid var(--ink); }
.sub-tab { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem .95rem; margin-bottom: -2px; border-bottom: 4px solid transparent; font-weight: 800; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .sub-tab:hover { color: var(--ink); text-decoration: none; } } .sub-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.goal-bar { height: .6rem; width: min(18rem, 100%); background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 999px; margin-top: .5rem; overflow: hidden; }
.goal-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s; } .goal-bar i.met { background: var(--ok); }
.flash { position: fixed; top: 4.6rem; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 2rem); background: var(--ink); color: var(--paper); padding: .6rem 1.1rem; border-radius: 999px; z-index: 50; font-weight: 800; transition: opacity .4s; box-shadow: 0 6px 0 -2px rgba(15,22,48,.35); text-align: center; }
.flash-alert { background: var(--bad); color: #fff; } .flash.gone { opacity: 0; pointer-events: none; }

/* Forms */
.form .field { margin-bottom: 1rem; } .field label, .field legend { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .3rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], .listbox-button { width: 100%; height: 2.8rem; padding: 0 .8rem; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: inherit; }
input:focus, .listbox-button:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.password-wrap { position: relative; } .password-wrap input { padding-right: 2.8rem; }
.password-toggle { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); border-radius: 8px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .password-toggle:hover { color: var(--ink); background: var(--paper-2); } }
.field-hint { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); }
.account-card h2 { margin: 0 0 .8rem; }
.form-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.form-actions .btn-danger { margin-left: auto; }
.emoji-grid, .color-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.emoji-pick input, .color-pick input, .mode-pick input, .seg-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.emoji-pick span { display: inline-flex; width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; font-size: 1.4rem; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; }
.emoji-pick input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.color-pick span { display: inline-block; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--c); border: 3px solid transparent; cursor: pointer; }
.color-pick input:checked + span { border-color: var(--ink); }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 560px) { .mode-grid { grid-template-columns: 1fr; } }
.mode-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .7rem; padding: .8rem; border: 2px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; height: 100%; }
.mode-card .ico { grid-row: 1 / 3; color: var(--accent-deep); align-self: center; } .mode-card small { color: var(--muted); }
.mode-pick input:checked + .mode-card { border-color: var(--accent); background: var(--accent-soft); }
.check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; }
.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; padding: .2rem; background: var(--card); }
.seg-item { display: inline-flex; align-items: center; justify-content: center; min-height: 2.3rem; padding: .3rem .9rem; border-radius: 999px; color: var(--ink-2); font-size: .88rem; font-weight: 800; cursor: pointer; position: relative; } .seg-item.active { background: var(--accent-deep); color: var(--accent-ink); } @media (hover: hover) and (pointer: fine) { .seg-item:hover { text-decoration: none; color: var(--ink); } } @media (hover: hover) and (pointer: fine) { .seg-item.active:hover { color: var(--accent-ink); } }
.seg-item:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.seg-field { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: .5rem; } .seg-field legend { float: left; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: .3rem; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); cursor: default; }
.setting-row:first-of-type { border-top: 0; } .setting-row > div { display: flex; flex-direction: column; } .setting-row .listbox { width: 13rem; flex: none; }
label.setting-row { cursor: pointer; }
/* The three sounds under the master switch: greyed and inert while it is off, the way the app does it. */
.card:has(#sound:not(:checked)) .needs-sound { opacity: .45; pointer-events: none; }
@media (max-width: 560px) { .setting-row:not(label) { flex-direction: column; align-items: stretch; gap: .5rem; } .setting-row .listbox { width: 100%; } }
.switch { appearance: none; width: 2.9rem; height: 1.7rem; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; flex: none; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: .18rem; left: .18rem; width: 1.34rem; height: 1.34rem; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch:checked { background: var(--ok); } .switch:checked::after { transform: translateX(1.2rem); }
.toast { position: fixed; top: 4.4rem; left: 50%; transform: translateX(-50%); background: var(--ok); color: var(--ok-ink); padding: .4rem .9rem; border-radius: 999px; font-weight: 700; z-index: 50; } .toast.bad { background: var(--bad); }
.listbox { position: relative; } .listbox-native { width: 100%; height: 2.8rem; } .listbox[data-listbox-ready] .listbox-native { position: absolute; opacity: 0; pointer-events: none; }
.listbox-button { display: none; align-items: center; justify-content: space-between; gap: .5rem; text-align: left; cursor: pointer; }
.listbox[data-listbox-ready] .listbox-button { display: flex; }
.listbox-chevron svg { width: 1em; height: .7em; stroke: currentColor; fill: none; stroke-width: 1.8; }
.listbox-list { position: absolute; z-index: 30; top: calc(100% + .3rem); left: 0; min-width: 100%; width: max-content; max-width: min(22rem, 90vw); margin: 0; padding: .3rem; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.listbox-option { display: flex; gap: .5rem; align-items: center; padding: .5rem .6rem; border-radius: 6px; cursor: pointer; }
.listbox-option.active { background: var(--accent-soft); } .listbox-tick { width: 1em; visibility: hidden; color: var(--accent); } .listbox-option[aria-selected="true"] .listbox-tick { visibility: visible; }

/* Forms and profiles in the app: fields with an ink edge, 44px targets, the
   profile being made drawn as it is made. */
.app-body input[type="text"], .app-body input[type="email"], .app-body input[type="password"], .app-body input[type="search"], .app-body .listbox-button { height: 3rem; border: 2px solid var(--line-2); border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .app-body input[type="text"]:hover, .app-body input[type="email"]:hover, .app-body input[type="password"]:hover, .app-body .listbox-button:hover { border-color: var(--ink-2); } }
.app-body .field label, .app-body .field legend { font-weight: 800; font-size: .92rem; margin-bottom: .4rem; }
.app-body .form .field { margin-bottom: 1.3rem; }
fieldset.field { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.app-body .form-actions .btn-danger { margin-left: 0; }
.emoji-grid, .color-grid { gap: .45rem; }
/* Pictures in even rows (balanced_chips.js), never ten and then two. */
.emoji-grid[data-balance] { flex-direction: column; align-items: flex-start; --chip-gap: 7; } .emoji-grid .chip-row { gap: .45rem; }
.emoji-pick span { width: 3rem; height: 3rem; font-size: 1.55rem; border: 2px solid var(--line); border-radius: 14px; background: var(--card); transition: transform .15s var(--ease), border-color .15s; }
@media (hover: hover) and (pointer: fine) { .emoji-pick span:hover { border-color: var(--ink-2); transform: translateY(-1px); } }
.emoji-pick input:checked + span { border-color: var(--ink); background: var(--accent-soft); box-shadow: 0 4px 0 -2px var(--ink); }
.emoji-pick input:focus-visible + span, .color-pick input:focus-visible + span, .mode-pick input:focus-visible + .mode-card { outline: 3px solid var(--accent); outline-offset: 2px; }
.color-pick span { width: 2.75rem; height: 2.75rem; border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--line); }
.color-pick input:checked + span { border-color: var(--card); box-shadow: 0 0 0 3px var(--ink); }
.mode-card { border: 2px solid var(--line-2); border-radius: 14px; background: var(--card); padding: .85rem .9rem; }
.mode-card strong { font-weight: 800; }
.mode-pick input:checked + .mode-card { border-color: var(--ink); background: var(--accent-soft); box-shadow: 0 5px 0 -2px var(--ink); }
.mode-pick input:checked + .mode-card small { color: var(--ink-2); }
.profile-form { padding: clamp(1.1rem, 1rem + 1vw, 1.6rem); }
.profile-preview { display: flex; align-items: center; gap: .9rem; margin: 0 0 1.3rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.profile-preview strong { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; overflow-wrap: anywhere; }
.danger-zone { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid var(--bad); }
.danger-zone h2 { font-size: 1.15rem; color: var(--bad-text); margin-bottom: .3rem; }
.danger-zone p { max-width: 34rem; }
.btn-danger { background: var(--card); }
.onboarding .play-btn { margin-top: .4rem; }
@media (max-width: 480px) { .onboarding .play-btn { width: 100%; } }
/* Profiles: a grid of faces, the way a family picks who is playing. */
.profile-grid { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 860px) { .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.profile-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.2rem .9rem 1rem; border: 2px solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 0 8px 0 -4px var(--ink); min-width: 0; }
.profile-tile.current { border-color: var(--avatar, var(--accent)); box-shadow: 0 8px 0 -4px var(--avatar, var(--accent)), 0 0 0 4px color-mix(in srgb, var(--avatar, var(--accent)) 20%, transparent); }
.profile-tile.add { border-style: dashed; border-color: var(--line-2); box-shadow: none; background: transparent; }
.profile-tile form { display: contents; }
.profile-pick { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .profile-pick:hover { text-decoration: none; } }
@media (hover: hover) and (pointer: fine) { .profile-pick:hover .avatar { transform: translateY(-2px) scale(1.03); } }
.profile-pick .avatar { transition: transform .25s var(--ease); }
.profile-pick strong { font-family: var(--display); font-size: 1.45rem; line-height: 1.1; margin-top: .2rem; overflow-wrap: anywhere; }
.profile-state { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 800; color: var(--accent-deep); }
.profile-tile.current .profile-state { color: var(--ok-text); }
.profile-tile.add .profile-state { color: var(--muted); font-weight: 700; }
.add-avatar { --avatar: var(--line-2); color: var(--ink-2); background: var(--card); border-style: dashed; }
.profile-facts { margin: .5rem 0 .2rem; font-size: .84rem; color: var(--muted); }
.profile-edit { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: 0 .8rem; border-radius: 999px; font-weight: 800; font-size: .9rem; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .profile-edit:hover { background: var(--accent-soft); color: var(--accent-deep); text-decoration: none; } }
.profile-max { margin-top: 1rem; }
.settings-head { justify-content: flex-start; align-items: center; flex-wrap: nowrap; }
.app-body .setting-row strong { font-weight: 800; }
.app-body .setting-row { padding: .95rem 0; }
.app-body .switch { width: 3.2rem; height: 1.9rem; border: 2px solid var(--ink); background: var(--paper-2); }
.app-body .switch::after { top: .16rem; left: .16rem; width: 1.3rem; height: 1.3rem; background: var(--card); border: 2px solid var(--ink); box-shadow: none; }
.app-body .switch:checked { background: var(--ok); } .app-body .switch:checked::after { transform: translateX(1.3rem); }
.app-body .toast { top: 4.8rem; box-shadow: 0 6px 0 -2px rgba(15,22,48,.3); font-weight: 800; }

/* Auth: the form on a stamped card, a saying drawn on a staff beside it. The
   pages use the marketing layout, so the card sizes its own heading. */
.auth-wrap { width: min(980px, 100% - 2rem); margin: clamp(1.6rem, 1rem + 3vw, 3.6rem) auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.auth-wrap.solo { grid-template-columns: minmax(0, 30rem); justify-content: center; }
.auth-art { margin: 0; min-width: 0; }
.auth-art .staff-run { display: block; width: 100%; height: auto; max-width: 30rem; }
.auth-art figcaption { margin-top: .6rem; font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); line-height: 1.1; color: var(--ink); letter-spacing: -.01em; }
.auth-art .n.space .head { fill: var(--accent-deep); } .auth-art .n.space .stem { stroke: var(--accent-deep); }
.auth-card { padding: clamp(1.3rem, 1rem + 1.5vw, 2rem); }
.auth-card.card, .mk-body .auth-card.card { border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 10px 0 -4px var(--ink); }
.auth-card h1, .mk-body .auth-card h1 { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem); line-height: 1.02; margin: 0 0 .4rem; }
.auth-lede { color: var(--ink-2); margin: 0 0 1.3rem; }
.auth-card .field { margin-bottom: 1.1rem; }
.auth-card .field label { display: block; font-weight: 800; font-size: .92rem; margin-bottom: .4rem; }
.auth-card input[type="email"], .auth-card input[type="password"], .auth-card input[type="text"] { height: 3rem; border-width: 2px; border-radius: 12px; }
.auth-card .btn-block { margin-top: .3rem; }
.auth-forgot { margin: .9rem 0 0; font-size: .92rem; font-weight: 700; }
.auth-switch { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); }
.auth-switch a, .auth-forgot a { font-weight: 800; }
.auth-fine { margin: .9rem 0 0; font-size: .8rem; color: var(--muted); }
@media (max-width: 760px) {
  .auth-wrap { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .auth-art { order: -1; display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .8rem; align-items: center; }
  .auth-art figcaption { margin: 0; font-size: 1.15rem; }
}
.auth-brand { text-align: center; margin-bottom: 1rem; }
.mk-body .dev-title { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem); margin: 0 0 .4rem; }
.dev-block { margin-top: 1.5rem; border: 2px dashed var(--accent); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.dev-band { height: 1.6rem; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 12%, transparent) 0 8px, transparent 8px 16px); display: flex; align-items: center; justify-content: center; }
.dev-label { background: var(--card); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 0 .6rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--accent-deep); }
.dev-label .dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ok); }
.dev-toggle { width: 100%; background: none; border: 0; font: inherit; font-weight: 700; text-align: left; padding: .6rem .9rem; cursor: pointer; color: var(--ink); display: flex; justify-content: space-between; }
.dev-toggle .chev { transition: transform .2s; } .dev-block.collapsed .dev-toggle .chev { transform: rotate(-90deg); }
.dev-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s; } .dev-block.collapsed .dev-body { grid-template-rows: 0fr; } .dev-inner { overflow: hidden; }
.dev-row-form { display: contents; }
.dev-row { display: grid; grid-template-columns: 6rem 1fr; gap: .8rem; width: 100%; text-align: left; padding: .6rem .9rem; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; cursor: pointer; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .dev-row:hover { background: var(--accent-soft); } } .dev-name { font-weight: 700; } .dev-name code { font-size: .75em; } .dev-persona { color: var(--ink-2); font-size: .85rem; }
.dev-foot { padding: .6rem .9rem; font-size: .8rem; border-top: 1px solid var(--line); }

/* Staff drawing */
.staff { display: block; overflow: visible; }
.staff line { stroke: var(--staff-ink); stroke-width: 1.2; }
.staff .ledger { stroke-width: 1.4; }
.staff .head { fill: var(--staff-ink); } .staff .stem { stroke: var(--staff-ink); stroke-width: 1.6; }
.staff .clef, .staff .acc { font-family: var(--music); fill: var(--staff-ink); }
.staff .label { font-family: var(--sans); font-size: 12px; font-weight: 800; fill: var(--muted); }
.staff.ok .head, .staff.ok .stem { fill: var(--ok); stroke: var(--ok); } .staff.warn .head, .staff.warn .stem { fill: var(--warn); stroke: var(--warn); } .staff.bad .head, .staff.bad .stem { fill: var(--bad); stroke: var(--bad); } .staff.unseen .head, .staff.unseen .stem { fill: var(--line-2); stroke: var(--line-2); }
.staff-row { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: flex-end; margin: .6rem 0; }
.ref-row { display: flex; flex-wrap: wrap; gap: .3rem; } .ref-row.heat { justify-content: center; gap: .5rem; }
.ref-note { display: flex; flex-direction: column; align-items: center; padding: .3rem .1rem; border-radius: var(--radius-sm); }
.ref-note.ledger { opacity: .75; }
.ref-name { font-weight: 800; font-size: 1rem; display: flex; flex-direction: column; align-items: center; line-height: 1.1; } .ref-name small { font-weight: 700; color: var(--ink-2); font-size: .7rem; }
.heat .ref-note, .heat-row .ref-note { border: 1px solid var(--line); }
.heat-band { display: grid; grid-template-columns: 6.5rem 1fr; gap: .6rem; align-items: start; padding: .5rem 0; border-top: 1px solid var(--line); }
.heat-band:first-of-type { border-top: 0; }
.heat-label { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: .8rem; }
.heat-row { display: grid; gap: .4rem; } .heat-row.on { grid-template-columns: repeat(9, 1fr); } .heat-row.off { grid-template-columns: repeat(var(--n, 4), 1fr); max-width: calc(100% * var(--n, 4) / 9); }
.heat-row .ref-note { min-width: 0; } .heat-row .staff { width: 100%; height: auto; }
@media (max-width: 760px) { .heat-band { grid-template-columns: 1fr; gap: .3rem; } .heat-label { padding-top: 0; } .heat-row.on { grid-template-columns: repeat(3, 1fr); } .heat-row.off { grid-template-columns: repeat(var(--m, 4), 1fr); max-width: none; } }
.heat-key i { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; vertical-align: -.05em; margin: 0 .1rem 0 .5rem; border: 1px solid var(--line); }
.heat-key i:first-child { margin-left: 0; } .key-ok { background: var(--ok-soft); } .key-warn { background: var(--warn-soft); } .key-bad { background: var(--bad-soft); } .key-unseen { background: var(--card); } .heat-ok { background: var(--ok-soft); } .heat-warn { background: var(--warn-soft); } .heat-bad { background: var(--bad-soft); }

/* Home: one thing to press, as big as a thumb and readable without reading
   (the play triangle), then the other ways to play, then how it is going. */
.btn-xl { height: 3.6rem; padding: 0 1.8rem; font-size: 1.2rem; gap: .55rem; }
.rule-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; padding-bottom: .45rem; border-bottom: 2px solid var(--ink); font-size: 1.3rem; }
.rule-head h2 { margin: 0; font-size: inherit; }
.rule-head a { font-family: var(--sans); font-size: .9rem; font-weight: 800; letter-spacing: 0; white-space: nowrap; }
.empty-note { color: var(--muted); margin: .9rem 0 0; max-width: 34rem; }
.app-body .eyebrow { display: flex; align-items: center; gap: .45rem; letter-spacing: .1em; margin-bottom: .5rem; }
.app-body .eyebrow .eye-clef { font-size: 1.1rem; }

.home-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; flex-wrap: wrap; margin: .6rem 0 1.4rem; }
.home-head h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); margin: 0; line-height: 1; }
.today { display: flex; gap: .5rem; flex-wrap: wrap; }
.today-chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.6rem; padding: .3rem .9rem .3rem .45rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); font-weight: 800; font-size: .92rem; color: var(--ink); white-space: nowrap; }
.today-chip.streak { padding-left: .7rem; color: var(--ink); }
.today-chip.streak .ico { color: var(--accent); }
.today-chip.streak b { font-family: var(--display); font-size: 1.15rem; line-height: 1; }
/* The day's minutes as a ring: a pie in the accent, mint once the goal is met. */
.goal-ring { --p: 0; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: #fff;
  background: radial-gradient(closest-side, var(--card) 62%, transparent 64%), conic-gradient(var(--accent) calc(var(--p) * 1%), var(--paper-2) 0); }
.today-chip.met .goal-ring { background: var(--ok); }

.up-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.2rem 2.4rem; align-items: center; padding: clamp(1.2rem, 1rem + 1.5vw, 2.1rem); }
.up-next h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); line-height: 1; margin: 0 0 .5rem; letter-spacing: -.02em; }
.up-next-blurb { font-size: 1.08rem; color: var(--ink-2); margin: 0 0 .4rem; max-width: 30rem; }
.up-next-facts { font-size: .92rem; margin: 0 0 1.2rem; }
.up-next-facts .star { font-size: 1.05em; }
.up-next-actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.up-next-staff { margin: 0; min-width: 0; }
.up-next-staff .staff-run { display: block; width: 100%; height: auto; max-height: 15rem; }
.up-next-staff figcaption { text-align: right; margin-top: .2rem; }
.staff .bar { stroke-width: 2.4; } .staff .system { stroke-width: 2.4; }
@media (max-width: 860px) { .up-next { grid-template-columns: 1fr; } .up-next-staff { order: -1; } .up-next-staff figcaption { display: none; } }
@media (max-width: 480px) { .up-next-actions .btn { flex: 1 1 auto; } .play-btn { width: 100%; } }

.ways-to-play { margin: 2.2rem 0 0; }
.play-tiles { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
@media (max-width: 860px) { .play-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.play-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .8rem; align-items: center; height: 100%; padding: .9rem 1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: 0 6px 0 -3px var(--ink); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .play-tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 9px 0 -3px var(--ink); } }
.play-tile:active { transform: translateY(2px); box-shadow: 0 3px 0 -2px var(--ink); }
.play-tile .tile-ico { grid-row: 1 / 3; display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); }
.play-tile strong { font-family: var(--display); font-size: 1.25rem; line-height: 1.1; align-self: end; }
.play-tile small { color: var(--muted); font-size: .85rem; align-self: start; }
@media (max-width: 480px) { .play-tile { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: .15rem; padding: .85rem; } .play-tile .tile-ico { grid-row: auto; width: 2.6rem; height: 2.6rem; margin-bottom: .3rem; } }

.home-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2.2rem 2.8rem; margin-top: 2.6rem; }
@media (max-width: 860px) { .home-grid { grid-template-columns: 1fr; } }
.weak-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: .8rem; }
@media (max-width: 1099px) and (min-width: 861px) { .weak-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .weak-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.weak { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .3rem .2rem .55rem; border-radius: 12px; background: var(--card); border: 1.5px solid var(--line); min-width: 0; }
.weak .staff { width: 100%; height: auto; max-width: 9rem; }
.weak-name { font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1; }
.weak-facts { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.home-badges { margin-top: 2.6rem; }
.medal-row { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem 1.2rem; }
@media (max-width: 860px) { .medal-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.medal-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: center; }
.medal-item span { display: flex; flex-direction: column; min-width: 0; } .medal-item strong { font-weight: 800; line-height: 1.2; } .medal-item small { font-size: .82rem; line-height: 1.3; }

/* Medals: a stamped disc and a drawn picture. Earned is pink with a white
   picture; not yet is paper with a dashed ring and a faint picture. */
.medal { display: block; flex: none; overflow: visible; }
.medal-shadow { fill: var(--ink); }
.medal-disc { fill: var(--accent-deep); stroke: var(--ink); stroke-width: 2.5; }
.medal-ring { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.5; stroke-dasharray: 2 3; }
.medal-ico { stroke: #fff; }
.medal-glyph { fill: #fff; font-family: var(--music); }
.medal.locked .medal-shadow { fill: var(--line-2); }
.medal.locked .medal-disc { fill: var(--card); stroke: var(--line-2); stroke-dasharray: 5 4; }
.medal.locked .medal-ring { stroke: var(--line); }
.medal.locked .medal-ico { stroke: var(--line-2); } .medal.locked .medal-glyph { fill: var(--line-2); }

/* Learn: the reference, drawn the way music is written, one staff per band
   with every note named under it. Line notes ink, space notes pink, matching
   the two sayings above them. */
.lede { font-size: 1.08rem; color: var(--ink-2); max-width: 40rem; margin: .2rem 0 0; }
.app-body .page-head h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.7rem); line-height: 1.02; letter-spacing: -.02em; }
.clef-sheet { margin-top: 2.2rem; }
.clef-sheet .rule-head h2 { display: flex; align-items: center; gap: .4rem; }
.clef-sheet .rule-head .eye-clef { font-size: 1.25rem; margin: -.45em 0; }
.sayings { display: flex; flex-wrap: wrap; gap: .5rem .8rem; margin: .9rem 0 1rem; }
.saying { display: flex; align-items: baseline; gap: .5rem; padding: .35rem .85rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); }
.saying dt { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.saying dd { margin: 0; font-weight: 800; }
.saying.spaces { border-color: var(--accent-deep); } .saying.spaces dd { color: var(--accent-deep); }
.run-figure { margin: 0; min-width: 0; }
.run-figure figcaption { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .2rem; }
/* Every run on the page at one scale: --u is its width in staff units. */
.learn-page { --k: 1.75; }
@media (max-width: 760px) { .learn-page { --k: .93; } }
.run-figure .staff-run { display: block; width: calc(var(--u) * var(--k, 1.6) * 1px); max-width: 100%; height: auto; }
.run-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.4rem; margin-top: 1.1rem; align-items: end; }
@media (max-width: 760px) { .run-pair { grid-template-columns: 1fr; } }
.staff .run-name { font-family: var(--display); font-weight: 800; font-size: 19px; fill: var(--ink); stroke: none; }
.staff .n.space .head { fill: var(--accent-deep); } .staff .n.space .stem { stroke: var(--accent-deep); } .staff .n.space .run-name { fill: var(--accent-deep); }
.staff .n.ledger .run-name { fill: var(--ink-2); }
.middle-c-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2.4rem; align-items: center; margin-top: .8rem; }
.middle-c-body p { margin: 0; max-width: 34rem; color: var(--ink-2); font-size: 1.02rem; }
@media (max-width: 640px) { .middle-c-body { grid-template-columns: 1fr; } }
/* Rows of icon and sentence: a grid, never a flex row of loose text, which on a
   phone let each phrase refuse to shrink and pushed /learn 4px past the screen. */
.ways-grid { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
.ways-grid li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; padding: .8rem 0; border-bottom: 1px solid var(--line-2); }
.ways-grid li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.way-ico { display: inline-flex; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); align-items: center; justify-content: center; flex: none; }

/* Dashboard, levels */
/* Levels: units under ruled heads, one row per level, the next one lit. */
.levels-page .page-head { align-items: flex-end; }
.levels-count { margin: 0; font-weight: 800; color: var(--ink-2); white-space: nowrap; } .levels-count b { font-family: var(--display); font-size: 1.6rem; color: var(--ink); }
.unit { margin-top: 2rem; }
.unit-head h2 { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.u-n { font-family: var(--sans); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
.unit-blurb { margin: .2rem 0 .5rem; max-width: 46rem; }
.level-list { list-style: none; margin: 0; padding: 0; }
.level-row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto 6.5rem 6.4rem; gap: .9rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.level-n { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--card); border: 2px solid var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.level-row.done .level-n { background: var(--ok); border-color: var(--ok); color: #fff; }
.level-row.next { background: var(--accent-soft); border: 2px solid var(--accent-deep); border-radius: 14px; box-shadow: 0 6px 0 -3px var(--accent-deep); padding: .7rem; margin: .3rem -.7rem .5rem; }
.level-row.next .level-n { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.level-body { display: flex; flex-direction: column; min-width: 0; }
.level-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.level-kicker b { color: var(--accent-deep); }
.level-row.next .level-kicker { color: var(--ink-2); }
.level-title { font-family: var(--display); font-weight: 800; font-size: 1.15rem; line-height: 1.15; color: var(--ink); }
.level-blurb { font-size: .86rem; color: var(--ink-2); }
.level-stars { white-space: nowrap; font-size: 1.05rem; }
.level-meta { font-size: .82rem; font-weight: 700; color: var(--ink-2); line-height: 1.3; }
.level-row .btn { justify-self: end; }
.level-row.locked .level-n { border-color: var(--line-2); }
@media (max-width: 760px) {
  .level-row { grid-template-columns: 2.4rem minmax(0, 1fr) auto; grid-template-areas: "n body btn" "n stars btn"; row-gap: .15rem; }
  .level-n { grid-area: n; width: 2.4rem; height: 2.4rem; align-self: start; margin-top: .2rem; } .level-body { grid-area: body; } .level-stars { grid-area: stars; font-size: .95rem; } .level-row .btn { grid-area: btn; } .level-meta { display: none; }
  .level-blurb { display: none; }
}
.chips { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.3rem; padding: .25rem .75rem; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--card); font-size: .84rem; font-weight: 800; color: var(--ink-2); } .chip.done { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok-text); }
.chip .chip-stars { font-size: .9em; letter-spacing: -.02em; }
@media (hover: hover) and (pointer: fine) { a.chip:hover { text-decoration: none; border-color: var(--accent); } }
.unit-line { padding: .8rem 0; border-bottom: 1px solid var(--line); } .unit-line strong { font-family: var(--display); font-size: 1.05rem; }

/* Drill */
.focus-main { min-height: 100dvh; display: flex; flex-direction: column; }
.drill { width: min(920px, 100% - 2rem); margin: 0 auto; padding: .8rem 0 2rem; flex: 1; display: flex; flex-direction: column; }
.drill-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .8rem; align-items: center; margin-bottom: .7rem; }
.drill-back { justify-self: start; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: 0 .8rem 0 .55rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); font-weight: 800; color: var(--ink); } @media (hover: hover) and (pointer: fine) { .drill-back:hover { text-decoration: none; background: var(--ink); color: var(--paper); } }
.drill-title { text-align: center; font-family: var(--display); font-size: 1.15rem; line-height: 1.1; } .drill-title .muted { font-family: var(--sans); font-size: .9rem; }
.drill-hud { display: flex; gap: .5rem; justify-content: flex-end; }
.hud { display: inline-flex; align-items: center; min-height: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; padding: .2rem .7rem; border-radius: 999px; background: var(--paper-2); white-space: nowrap; } .hud:empty { display: none; }
.hud-timer { background: var(--warn-soft); color: var(--warn-ink); } .hud-score { background: var(--accent-soft); color: var(--accent-deep); } .hud-streak { background: var(--ok-soft); color: var(--ok); }
.drill-rail { height: .6rem; background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; margin-bottom: .7rem; }
.drill-rail i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .25s; }
.start-pool { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin: .4rem auto 1rem; max-width: 40rem; --chip-gap: 6; }
.start-pool .chip-row { display: flex; flex-wrap: nowrap; gap: .1rem .4rem; }
/* The ready screen's previews: big enough to read on a desktop, three to a row
   on a phone so Start stays above the fold (at 42vw they stacked one per row). */
.staff-box .start-pool .staff { width: 5.4rem; height: auto; }
@media (max-width: 560px) { .staff-box .start-pool .staff { width: min(6.2rem, (100vw - 7.5rem) / 3); } }
.drill-start .small { margin-top: .8rem; } .drill-start .small span { display: block; }
.drill-stage { background: var(--card); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 8px 0 -4px var(--ink); padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 15rem; transition: box-shadow .15s, border-color .15s; }
.drill-stage.right { border-color: var(--ok); box-shadow: 0 8px 0 -4px var(--ok), 0 0 0 5px var(--ok-soft); } .drill-stage.wrong { border-color: var(--bad); box-shadow: 0 8px 0 -4px var(--bad), 0 0 0 5px var(--bad-soft); animation: shake .3s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.staff-box { width: 100%; max-width: 600px; }
/* Note size setting. The SVG is 170 units wide by 120 tall (14 staff spaces across), so the staff is tall for its width. */
.drill[data-size="small"] .staff-box { max-width: 380px; } .drill[data-size="medium"] .staff-box { max-width: 480px; } .drill[data-size="large"] .staff-box { max-width: 600px; } .drill[data-size="xl"] .staff-box { max-width: 760px; }
.drill[data-size="small"] .drill-stage { min-height: 19rem; } .drill[data-size="medium"] .drill-stage { min-height: 24rem; } .drill[data-size="large"] .drill-stage { min-height: 29rem; } .drill[data-size="xl"] .drill-stage { min-height: 36rem; }
/* On a phone the staff is as wide as the screen whatever the size setting, so
   the stage is as tall as the ready screen needs and no taller. */
@media (max-width: 560px) { .drill[data-size] .drill-stage { min-height: 22rem; } .drill-top { grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; } .drill-title .muted { display: none; } .drill-back span { display: none; } .drill-back { padding: 0 .65rem; } }
.drill-last { min-height: 1.4rem; text-align: center; color: var(--muted); font-weight: 700; margin-top: .2rem; }
.staff-box .staff { width: 100%; height: auto; }
.drill-feedback { min-height: 2rem; font-family: var(--display); font-size: 1.6rem; font-weight: 800; line-height: 1.2; text-align: center; } .drill-feedback.ok { color: var(--ok); } .drill-feedback.bad { color: var(--bad); font-size: 1.25rem; }
.drill-start { text-align: center; padding: .6rem .4rem; } .drill-start h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); letter-spacing: -.02em; margin-bottom: .3rem; }
.drill-start > p.muted:first-of-type { max-width: 34rem; margin-left: auto; margin-right: auto; }
.drill-start .btn-primary { height: 3.5rem; padding: 0 2.2rem; font-size: 1.2rem; }
.drill-input { margin-top: .8rem; }
.input-tabs { display: flex; gap: .3rem; justify-content: center; flex-wrap: wrap; margin-bottom: .8rem; --chip-gap: 5; }
.input-tabs:has(.chip-row) { flex-direction: column; align-items: center; } .chip-row { display: flex; flex-wrap: nowrap; gap: .3rem; }
.input-tab { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: .35rem .9rem; border-radius: 999px; border: 2px solid var(--line-2); background: var(--card); color: var(--ink-2); font: inherit; font-weight: 800; font-size: .88rem; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .input-tab:hover { border-color: var(--ink); color: var(--ink); } }
/* --accent-ink on --accent is 4.25:1 in light, which fails at this size. The
   deep pink is what .mk-body .btn-primary already uses and reads at 6.5:1;
   in dark, --accent-deep is the light pink and --accent-ink the navy, so the
   same pair works both ways. */
.input-tab[aria-selected="true"] { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); }
.answer-pad { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
/* Seven keys: stamped in the page's ink, the letter in the display face. */
.note-btn { height: 4.4rem; border-radius: 14px; border: 2px solid var(--ink); border-bottom-width: 6px; background: var(--card); color: var(--ink); font-family: var(--display); font-size: 2rem; font-weight: 800; line-height: 1; cursor: pointer; transition: transform .06s, border-color .15s, background .15s; touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) { .note-btn:hover { border-color: var(--accent-deep); color: var(--accent-deep); } } .note-btn:active, .note-btn.pressed { transform: translateY(3px); border-bottom-width: 3px; background: var(--accent-soft); border-color: var(--accent-deep); color: var(--accent-deep); }
.keys-mode .note-btn { opacity: .55; font-size: 1.4rem; height: 3rem; border-bottom-width: 3px; }
.keys-mode .note-btn::after { content: " key"; font-size: .6rem; font-weight: 700; color: var(--muted); display: block; }
.note-btn.demo { display: inline-flex; align-items: center; justify-content: center; height: 3.2rem; font-size: 1.4rem; cursor: default; } .note-btn.demo.right { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
@media (max-width: 560px) { .answer-pad { gap: .3rem; } .note-btn { height: 3.8rem; font-size: 1.5rem; border-radius: 10px; } }
.acc-pad { display: flex; gap: .5rem; justify-content: center; margin-top: .6rem; }
.acc-btn { min-height: 2.75rem; padding: .4rem 1rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; } .acc-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.listen-box { text-align: center; padding: 1rem; border: 2px dashed var(--ink); border-radius: 18px; background: var(--card); }
.listen-state { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.1rem; }
.pulse { width: .8rem; height: .8rem; border-radius: 50%; background: var(--line-2); } .pulse.on { background: var(--ok); animation: pulse 1.2s infinite; } .pulse.off { background: var(--bad); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
.listen-heard { min-height: 1.4rem; margin-top: .3rem; }
.listen-actions { margin-top: .5rem; } .listen-actions .btn[hidden] { display: none; }
.drill-hint { text-align: center; min-height: 1.3rem; margin: .6rem 0 0; }
.drill-end { margin-top: 1rem; text-align: center; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem) 1.2rem; }
.drill-end h2 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); letter-spacing: -.02em; line-height: 1; margin: .3rem 0 .5rem; }
.end-stars { font-size: 2.6rem; letter-spacing: .08em; line-height: 1; } .end-stars.big { font-size: 2.6rem; }
.end-stars .star { display: inline-block; }
/* A level's stars arrive one at a time, the earned ones with a pop. Under
   reduced motion they are simply there. */
.drill-end:not([hidden]) .end-stars .star { animation: star-in .45s var(--ease-pop) both; }
.drill-end:not([hidden]) .end-stars .star:nth-child(2) { animation-delay: .12s; } .drill-end:not([hidden]) .end-stars .star:nth-child(3) { animation-delay: .24s; }
.drill-end:not([hidden]) .end-stars .star:nth-child(4) { animation-delay: .36s; } .drill-end:not([hidden]) .end-stars .star:nth-child(5) { animation-delay: .48s; }
@keyframes star-in { from { opacity: 0; transform: scale(.3) rotate(-25deg); } to { opacity: 1; transform: none; } }
.end-line { color: var(--ink-2); font-size: 1.05rem; max-width: 34rem; margin-left: auto; margin-right: auto; }
.end-badges { display: grid; grid-template-columns: minmax(0, max-content); justify-content: center; gap: .8rem; margin: .4rem 0 1.2rem; }
.end-badge { display: flex; align-items: center; gap: .7rem; text-align: left; animation: star-in .5s .55s var(--ease-pop) both; }
.end-badge > span { display: flex; flex-direction: column; line-height: 1.25; }
.end-badge small { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
.end-badge strong { font-family: var(--display); font-size: 1.15rem; } .end-badge span span { font-size: .85rem; color: var(--ink-2); }
/* The streak counter carries a flame drawn in CSS: the emoji was a photo of fire on some screens and a box on others. */
.hud-streak:not(:empty)::before { content: ""; width: 1em; height: 1em; margin-right: .3rem; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 3 4 4.5 4 8.5a4 4 0 0 1-8 0c0-1.5.6-2.6 1.5-3.5.3 1.2 1 2 2 2.3C11 8 10 6 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 3 4 4.5 4 8.5a4 4 0 0 1-8 0c0-1.5.6-2.6 1.5-3.5.3 1.2 1 2 2 2.3C11 8 10 6 12 3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.drill-end.passed h2 { color: var(--ok); }
.drill-end .end-line { text-wrap: balance; }
.drill-end .end-actions .btn { height: 3.1rem; padding: 0 1.4rem; font-size: 1.02rem; }
.drill-end.passed .end-actions [data-drill-target="nextLink"] { order: -1; }
.end-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.end-actions [hidden] { display: none; }
.practice-bar { width: min(760px, 100% - 2rem); margin: .8rem auto 0; }
.practice-form { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* Result, stats, log, badges, profiles. Numbers in the display face, sections
   under ruled headings, stamped boxes only where something is pressed. */
.rule-note { font-family: var(--sans); font-size: .85rem; font-weight: 700; color: var(--muted); letter-spacing: 0; white-space: nowrap; }
.stats-sec { margin-top: 2.2rem; }
.result-page { max-width: 880px; }
.result-back { margin-bottom: .9rem; }
.result-card { text-align: center; padding: clamp(1.3rem, 1rem + 2vw, 2.2rem) 1.2rem; }
.result-card h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 .4rem; }
.result-eyebrow { justify-content: center; text-transform: none; letter-spacing: .02em; font-size: .85rem; color: var(--muted); font-weight: 700; }
.result-nums { display: flex; justify-content: center; gap: .6rem 2.2rem; flex-wrap: wrap; margin: 1rem 0 1.3rem; }
.result-nums div { display: flex; flex-direction: column-reverse; align-items: center; }
.result-nums dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.result-nums dd small { font-size: .55em; color: var(--muted); }
.result-nums dt { color: var(--muted); font-size: .8rem; font-weight: 700; margin-top: .2rem; }
.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: .6rem; margin-top: .9rem; }
.note-cell { display: flex; flex-direction: column; align-items: center; padding: .4rem .3rem .55rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); min-width: 0; }
.note-cell .staff { width: 100%; height: auto; max-width: 8.5rem; }
.note-cell.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); } .note-cell.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.note-cell-name { font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.1; } .note-cell-nums { font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.stat-tiles { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 760px) { .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-tiles .tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.tile { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 6px 0 -3px var(--ink); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.tile b { font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; } .tile b small { font-size: .55em; color: var(--muted); }
.tile span { color: var(--muted); font-size: .8rem; font-weight: 700; line-height: 1.25; }
/* Two weeks of minutes, with the goal drawn across them as a dashed line. */
.bars { position: relative; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: .35rem; height: 9.5rem; align-items: end; margin-top: 1rem; padding-bottom: 1.4rem; }
.goal-line { position: absolute; left: 0; right: 0; bottom: calc(1.4rem + (100% - 1.4rem) * var(--goal-f, 0)); border-top: 2px dashed var(--ok); pointer-events: none; z-index: 1; }
.goal-line span { position: absolute; left: 0; top: -1.35rem; font-size: .72rem; font-weight: 800; color: var(--ok-text); background: var(--paper); padding: 0 .3rem; }
.bar-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; align-items: center; min-width: 0; }
.bar-col > span { position: absolute; bottom: -1.4rem; font-size: .72rem; font-weight: 700; color: var(--muted); } .bar-col > span.today { color: var(--ink); font-weight: 800; }
.bars-empty { position: absolute; inset: 0 0 1.4rem; display: grid; place-items: center; margin: 0; color: var(--muted); font-weight: 700; text-align: center; }
.bar { width: 100%; max-width: 2.4rem; min-height: 3px; background: var(--accent-deep); border-radius: 6px 6px 2px 2px; } .bar.goal { background: var(--ok); } .bar.none { background: var(--line-2); }
.heat-key { margin: .6rem 0 .2rem; }
.note-list .note-line { display: grid; grid-template-columns: 2.2rem minmax(0, auto) minmax(0, 1fr); gap: .1rem .6rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.note-list .note-line b { font-family: var(--display); font-size: 1.35rem; font-weight: 800; line-height: 1; }
.note-list .note-line .muted { font-size: .86rem; text-align: right; }
@media (max-width: 480px) { .note-list .note-line { grid-template-columns: 2.2rem minmax(0, 1fr); } .note-list .note-line .muted { grid-column: 2; text-align: left; } }
.log-window { margin: 0 0 .4rem; }
.empty-sheet { padding: 1.4rem 0; max-width: 34rem; } .empty-sheet p { color: var(--ink-2); margin-bottom: 1rem; }
.log-day { margin-top: 1.8rem; }
.log-date-sub { font-family: var(--sans); font-size: .9rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.log-list { list-style: none; margin: 0; padding: 0; } .log-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.log-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .88rem; font-weight: 700; padding-top: .1rem; }
.log-body { display: block; min-width: 0; } .log-body a { font-weight: 800; }
.log-badge .log-body { display: flex; align-items: center; gap: .6rem; }
.log-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; } .log-meta { display: block; font-size: .88rem; }
.log-stars { white-space: nowrap; }
@media (max-width: 560px) { .log-row { grid-template-columns: 1fr; gap: .1rem; } }
.log-ended { font-size: .75rem; font-weight: 800; white-space: nowrap; padding: .05rem .5rem; border-radius: 999px; background: var(--paper-2); color: var(--muted); } .log-ended.finished { background: var(--ok-soft); color: var(--ok-text); } .log-ended.quit { background: var(--warn-soft); color: var(--warn-ink); } .log-ended.timeout { color: var(--ink-2); }
.badge-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 860px) { .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.badge-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; padding: 1.1rem .8rem 1rem; border-radius: 16px; min-width: 0; }
.badge-card.earned { background: var(--card); border: 2px solid var(--ink); box-shadow: 0 8px 0 -4px var(--ink); }
.badge-card.locked { border: 2px dashed var(--line-2); color: var(--muted); }
.badge-card .medal { margin-bottom: .35rem; }
.badge-card strong { font-family: var(--display); font-size: 1.15rem; line-height: 1.15; }
.badge-blurb { font-size: .86rem; color: var(--ink-2); line-height: 1.35; } .badge-card.locked .badge-blurb { color: var(--muted); }
.badge-when { margin-top: auto; padding-top: .35rem; font-size: .78rem; font-weight: 800; color: var(--ok-text); } .badge-card.locked .badge-when { color: var(--muted); }
.profile-list { display: flex; flex-direction: column; gap: .6rem; }
.profile-row { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; } .profile-row.current { border-color: var(--accent); }
.profile-actions { display: flex; gap: .4rem; }
.card.danger { border-color: var(--bad); margin-top: 1rem; }

/* Marketing: manuscript paper. Everything below is scoped to .mk-body so the app's own
   screens keep their look until they get their round. The brief is docs/DESIGN.md. */
.mk-body {
  --paper: #ffffff; --paper-2: #f6f6f9; --card: #ffffff; --line: #dfe2ee; --line-2: #c6cbe0;
  --ink: #0f1630; --ink-2: #3a4470; --muted: #6a7398;
  --accent: #e8266f; --accent-ink: #ffffff; --accent-soft: #ffe1ec; --accent-deep: #b8144f;
  --ok: #0f9d6a; --ok-text: #0b7a52; --ok-soft: #d6f7e8; --warn: #e39a00; --warn-soft: #fff0c9; --bad: #e23d2e; --bad-text: #b3261b; --bad-soft: #fde0dd;
  --staff-ink: #0f1630; --staffline: rgba(15, 22, 48, 0.045);
  --display: "Baloo 2", Nunito, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
  background-color: #ffffff;
  /* Five hairlines, a gap, five hairlines: the paper a copyist writes on. */
  background-image: linear-gradient(to bottom, var(--staffline) 0 1px, transparent 1px 9px, var(--staffline) 9px 10px, transparent 10px 18px, var(--staffline) 18px 19px, transparent 19px 27px, var(--staffline) 27px 28px, transparent 28px 36px, var(--staffline) 36px 37px, transparent 37px 168px);
  background-size: 100% 168px;
  min-height: 100vh; display: flex; flex-direction: column;
  color: var(--ink);
}
.mk-body ::selection { background: var(--accent); color: #fff; }
.mk-body > main { flex: 1; }
.mk-wrap { width: min(1120px, 100% - 2.4rem); margin: 0 auto; }

.mk-body h1, .mk-body h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1; text-wrap: balance; }
.mk-body h1 { font-size: clamp(2.7rem, 6.2vw, 4.9rem); margin: 0 0 1.1rem; }
.mk-body h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 0 0 0.7rem; }
.mk-body h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; }
.hl { color: var(--accent); }
.eyebrow { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 0.9rem; }
/* A clef in a kicker. Noto Music's treble clef reaches 1.33em above its
   baseline and .4em below, so at line-height 1 it hung into the heading under
   it. Its box is the font's whole height (1.79em) so the glyph stays inside,
   and the kicker's row centers on it. */
.eye-clef { display: inline-block; font-family: var(--music); font-size: 1.1rem; line-height: 1.79; height: 1.79em; color: var(--ink); vertical-align: middle; flex: none; }

/* Rehearsal marks: the boxed letters a score uses to say where a section starts. */
.rmark { margin: 0 0 0.9rem; }
.rmark span { display: inline-grid; place-items: center; min-width: 2.3rem; height: 2.3rem; padding: 0 0.45rem; border: 2.5px solid var(--ink); border-radius: 6px; font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1; color: var(--ink); background: var(--paper); box-shadow: 0 5px 0 -2px var(--ink); }
.rmark.coda span { font-family: var(--music); font-size: 2.1rem; padding-top: 0.15rem; }

/* The staff divider: a system's first bar. */
.staff-rule { position: relative; height: 40px; margin: 0.4rem 0; background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 9px); background-size: 100% 37px; background-repeat: no-repeat; background-position: 0 2px; opacity: 0.9; }
.staff-rule::after { content: ""; position: absolute; right: 0; top: 2px; height: 33px; width: 3px; background: var(--ink); }
.staff-rule .clef { position: absolute; left: 6px; top: -14px; font-family: var(--music); font-size: 56px; line-height: 1; color: var(--ink); }

/* Masthead */
.mk-header { background: color-mix(in srgb, #ffffff 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; border-bottom: 2px solid var(--ink); }
.mk-header .mk-wrap { display: flex; align-items: center; gap: 1.2rem; height: 4rem; }
.mk-brand .brand-name { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.02em; }
.mk-nav { display: flex; gap: 0.15rem; margin-left: 0.4rem; }
.mk-nav a { padding: 0.4rem 0.75rem; border-radius: 999px; color: var(--ink-2); font-weight: 800; font-size: 0.95rem; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .mk-nav a:hover { background: var(--accent-soft); color: var(--accent-deep); text-decoration: none; } }
.mk-actions { margin-left: auto; display: flex; gap: 0.5rem; }
/* A phone or tablet keeps Pricing and FAQ in the masthead; the in-page
   anchors are for a wide screen. On a phone they take a second, slim row. */
@media (max-width: 860px) { .mk-nav .mk-wide { display: none; } .mk-nav { margin-left: 0; } }
@media (max-width: 560px) {
  .mk-header .mk-wrap { flex-wrap: wrap; height: auto; padding: .5rem 0 .3rem; row-gap: .1rem; }
  .mk-nav { order: 3; width: 100%; justify-content: flex-start; gap: .2rem; margin: 0 0 0 -.6rem; }
  .mk-nav a { min-height: 2.5rem; display: inline-flex; align-items: center; }
}
.mk-nav a[aria-current="page"] { background: var(--ink); color: #fff; }

/* Buttons on paper: the pill stays (a kid's thumb likes it), the primary is the pink. */
.mk-body .btn { font-weight: 800; border-width: 2px; }
.mk-body .btn-primary { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; box-shadow: 0 6px 0 -2px #8e0f3d; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .mk-body .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 8px 0 -2px #8e0f3d; } }
.mk-body .btn-ghost { background: var(--paper); border-color: var(--ink); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .mk-body .btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); } }

/* Hero */
.hero { padding: clamp(2.6rem, 6vw, 5rem) 0 clamp(2.4rem, 5vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-grid > * { min-width: 0; }
/* One column (a tablet, a phone): the copy runs the full width and the live
   drill comes right after the buttons that point at it, before the tally. */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { display: contents; }
  .hero-grid > .stage { order: 1; margin: .4rem 0 1.8rem; }
  .hero-copy > .tally { order: 2; max-width: none; }
  .hero .lead { max-width: 40rem; }
}
.hero h1 .l2 { display: block; padding-left: clamp(0px, 3vw, 2.4rem); }
.hero h1 .l3 { display: block; padding-left: clamp(0px, 6vw, 4.8rem); }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--ink-2); max-width: 32rem; }
.hero-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1.3rem 0 1.6rem; }
.tally { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.4rem; max-width: 34rem; border-top: 2px solid var(--ink); padding-top: 0.9rem; }
.tally > div { min-width: 0; }
.tally dt { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tally dd { margin: 0.1rem 0 0; color: var(--ink-2); font-size: 0.95rem; }
.tally dd b { color: var(--ink); font-family: var(--display); font-size: 1.2rem; font-weight: 800; }
.tally dd b.ok { color: var(--ok-text); }
@media (max-width: 520px) { .tally { grid-template-columns: 1fr; } }

/* The live drill card: the product in one card. */
.stage { margin: 0; padding: 1.1rem 1.2rem 1.2rem; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 10px 0 -4px var(--ink); background: var(--card); }
.stage-cap { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.5rem; }
.stage-cap .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ok); animation: pulse 1.2s infinite; }
.stage-staff .staff { width: 100%; height: auto; }
.stage-pad { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; margin: 0.7rem 0; }
.stage-note { font-size: 0.88rem; color: var(--muted); margin: 0; }
.demo .stage-cap { justify-content: flex-start; } .demo-count { margin-left: auto; color: var(--ink); text-transform: none; letter-spacing: 0; }
.demo-stage { min-height: 15rem; padding: 0.6rem; border-radius: 12px; box-shadow: none; border-color: var(--line); } .demo-stage .staff-box { max-width: 320px; }
.demo .note-btn { height: 3.5rem; font-family: var(--display); font-size: 1.5rem; border-radius: 12px; border-color: var(--line-2); }
@media (hover: hover) and (pointer: fine) { .demo .note-btn:hover { border-color: var(--accent); } }
@media (max-width: 560px) { .demo .note-btn { height: 3rem; font-size: 1.25rem; } }

/* Sections */
.mk-band { padding: clamp(2.6rem, 6vw, 5rem) 0; }
.sec-head { max-width: 30rem; }
.sec-head.wide { max-width: 44rem; }
.sect-p { color: var(--ink-2); max-width: 40rem; font-size: 1.05rem; line-height: 1.55; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.two-col > * { min-width: 0; }
.two-col.align-start { align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 1.6rem; } }

/* Ways to answer */
.ways-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ways-list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-2); align-items: start; }
.ways-list h3 { font-size: 1.15rem; margin: 0 0 0.15rem; } .ways-list p { color: var(--ink-2); margin: 0; font-size: 0.98rem; }

/* The course, as a set list: six units, two rows of three. */
.track { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 960px) { .track { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .track { grid-template-columns: 1fr; } }
.track-unit { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 1rem 1.1rem 0.6rem; min-width: 0; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
@media (hover: hover) and (pointer: fine) { .track-unit:hover { transform: translateY(-3px); box-shadow: 0 10px 0 -4px var(--ink); } }
.track-unit-head .u-n { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); }
.track-unit-head h3 { font-size: 1.3rem; margin: 0.1rem 0 0.6rem; }
.track-levels { list-style: none; margin: 0; padding: 0; }
.track-level { display: grid; grid-template-columns: 1.7rem 1fr auto; gap: 0.5rem; align-items: center; padding: 0.4rem 0; font-weight: 700; font-size: 0.95rem; border-top: 1px solid var(--line); }
.track-n { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 0.85rem; font-weight: 800; }
.track-title { min-width: 0; }
.track-meta { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }

/* Heat map card */
.heat-demo { border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 10px 0 -4px var(--ink); }
.heat-demo .ref-name { font-size: 1.15rem; font-family: var(--display); } .heat-demo .stage-cap { margin-bottom: 0.8rem; }
/* For grown-ups: the words, then the heat map the width of the page, each
   note a cell a parent can read across the room (88px and up). */
.grownups .sec-head.wide { max-width: 46rem; margin-bottom: 1.6rem; }
.grownups .heat-demo { padding: 1.2rem 1.3rem 1.1rem; }
.grownups .heat-row.on { grid-template-columns: repeat(9, minmax(5.5rem, 1fr)); gap: .6rem; }
.grownups .heat-row .ref-note { padding: .5rem .2rem .6rem; }
@media (max-width: 1060px) { .grownups .heat-row.on { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grownups .heat-row.on { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* How it works: the heading holds still beside the five ways. */
@media (min-width: 861px) { #how .sec-head { position: sticky; top: 6rem; } }

/* Coda and the end */
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(2rem, 4vw, 3.4rem); align-items: center; }
@media (max-width: 860px) { .closing-grid { grid-template-columns: 1fr; } }
/* The pricing page: the claim on the left, the ask beside it, same shape as the
   coda band so the two pages read as one system. */
.pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(2rem, 4vw, 3.4rem); align-items: center; }
@media (max-width: 860px) { .pricing-grid { grid-template-columns: 1fr; } }
.closing-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.narrow-copy { max-width: 640px; } .narrow-copy h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: 0.9rem; }
.faq h3, .legal h3 { margin-top: 1.5rem; font-size: 1.15rem; }
/* FAQ: the heading and its topics hold still on the left while the answers
   scroll, grouped the way a parent asks them. */
.faq-grid { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.faq-head { position: sticky; top: 6rem; }
.faq-head h1 { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.6rem); }
.faq-head .lead { font-size: 1.05rem; }
.faq-toc { display: flex; flex-direction: column; gap: .2rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
.faq-toc a { display: inline-flex; align-items: center; min-height: 2.5rem; font-weight: 800; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .faq-toc a:hover { color: var(--accent-deep); } }
.faq-body section + section { margin-top: 2.6rem; }
.mk-body .rule-head { font-size: 1.35rem; line-height: 1.2; margin: 0 0 .2rem; }
.faq-body .qa { padding: 1.1rem 0 1.15rem; border-bottom: 1px solid var(--line-2); }
.faq-body .qa h3 { margin: 0 0 .4rem; font-size: 1.25rem; line-height: 1.2; }
.faq-body .qa p { margin: 0; color: var(--ink-2); max-width: 40rem; font-size: 1.02rem; line-height: 1.6; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq-head { position: static; } .faq-toc { flex-direction: row; flex-wrap: wrap; gap: .2rem 1.2rem; } }
.mk-footer { padding: 1rem 0 2.6rem; font-size: 0.92rem; color: var(--muted); }
.fine-end { display: flex; align-items: baseline; justify-content: flex-end; gap: 0.5rem; padding: 0.4rem 0 1.2rem; border-bottom: 2px solid var(--ink); margin-bottom: 1.2rem; }
.fine-word { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1.4rem; color: var(--ink); }
.fine-end .barline { font-family: var(--music); font-size: 1.8rem; color: var(--ink); line-height: 1; }
.foot-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.foot-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; color: var(--ink); }
.mk-footer nav { display: flex; gap: 1rem; } .mk-footer nav a { color: var(--ink-2); font-weight: 700; }
.foot-copy { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* Reveal on scroll: a settle, a rise and a blur-to-sharp, or nothing at all under reduced motion. */
.mk-body .reveal { opacity: 0; transform: translateY(16px); filter: blur(3px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
.mk-body .reveal.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .mk-body .reveal { opacity: 1; transform: none; filter: none; transition: none; } }

.demo-tabs { margin: .6rem 0 .4rem; } .demo-tabs .input-tab:disabled { opacity: .4; cursor: default; }
.demo-listen { margin-top: .6rem; }
/* The home-page demo closes after ten notes. */
.demo .note-btn:disabled { opacity: .4; cursor: default; }
.demo-done { text-align: center; padding: 1rem; } .demo-done-title { font-family: var(--display); font-size: 1.9rem; font-weight: 800; line-height: 1.05; margin-bottom: .4rem; } .demo-done p { margin-bottom: .8rem; color: var(--ink-2); text-wrap: balance; }
.demo-done-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.demo.is-done .stage-note { display: none; }
.note-line { display: flex; flex-direction: column; gap: .05rem; }

.hero-early { margin: -0.7rem 0 1.4rem; font-size: 0.95rem; color: var(--ink-2); }
.hero-early a { font-weight: 800; }

/* ---- Recent runs ------------------------------------------------------- */
/* Two lines, two straight right edges: the stars in one column whether a run
   earned any or not, the clock time under them. The left side says how many
   notes there were, which the row used to leave out entirely. */
.run-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.8rem; align-items: baseline; padding: 0.45rem 0; border-top: 1px solid var(--line); }
.run-row:first-child { border-top: 0; }
.run-row .run-title { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.run-row .run-stars { white-space: nowrap; letter-spacing: 0.02em; }
.run-row .run-stars.none { visibility: hidden; }
.run-row .run-facts, .run-row .run-when { font-size: 0.86rem; color: var(--muted); }
.run-row .run-when { white-space: nowrap; }

/* The "?" panel styles itself: see app/views/shared/_version.html.erb. */

/* ---- Games -------------------------------------------------------------- */
.game { max-width: 60rem; margin: 0 auto; padding: 0 1rem 2rem; }
.game .drill-hud { gap: 0.4rem; }
.hud-lives { color: var(--accent-deep); letter-spacing: 0.08em; }
.game-field { position: relative; margin: 0.8rem 0 1rem; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 8px 0 -4px var(--ink); overflow: hidden; transition: border-color 0.16s ease, background 0.16s ease; }
.veil-card h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); letter-spacing: -.02em; }
/* Conveyor's field is one staff tall, so on a phone its ready card was cut off
   above the title and through the Start button. The field keeps room for the
   card before, during and after a game, so starting still moves nothing. */
.game-field:has(.conveyor-wrap) { min-height: 15.5rem; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 480px) { .veil-card .game-rule { display: none; } .veil-card .game-blurb { font-size: .92rem; margin-bottom: .8rem; } .game-veil { padding: .8rem; } }
.veil-card .btn-primary { height: 3.4rem; padding: 0 2rem; font-size: 1.15rem; }
.game-field.hit { border-color: var(--bad); background: var(--bad-soft); }
.game-start, .game-over { text-align: center; padding: 1.4rem 1rem 1.8rem; }
.game-start h2, .game-over h2 { margin: 0 0 0.4rem; }
.game-blurb { max-width: 34rem; margin: 0 auto 1.1rem; }
.game-rule { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.9rem; }
/* Games: each card leads with a drawing of its game, so a child can tell
   them apart before reading a word. */
.game-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 760px) { .game-grid { grid-template-columns: 1fr; } }
.game-grid > .card + .card { margin-top: 0; }
.app-body .game-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: 100%; }
.game-art { position: relative; height: 11rem; background: var(--paper-2); border-bottom: 2px solid var(--ink); overflow: hidden; }
.art-drop { position: absolute; padding: 2px 4px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 0 4px 0 -2px var(--ink); }
.art-drop .staff { display: block; }
.art-drop:nth-child(2) { transform: rotate(-2deg); } .art-drop:nth-child(3) { transform: rotate(2deg); }
.art-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 24px); opacity: .5; }
.game-art-scroll { display: flex; align-items: center; padding: 0 1rem; }
.game-art-scroll .staff-run { width: 100%; height: auto; max-height: 8.5rem; }
.game-art-scroll .n:first-of-type .head { fill: var(--accent-deep); } .game-art-scroll .n:first-of-type .stem { stroke: var(--accent-deep); }
.art-gate { position: absolute; top: 1.2rem; bottom: 1.2rem; left: 32%; width: 4px; border-radius: 4px; background: var(--accent); }
.game-copy { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.3rem 1.3rem; }
.game-copy h2 { font-size: 1.9rem; letter-spacing: -.02em; line-height: 1; margin: 0 0 .5rem; }
.game-blurb-copy { color: var(--ink-2); margin: 0 0 .7rem; }
.game-rules { list-style: none; margin: 0 0 1.2rem; padding: 0; font-size: .88rem; color: var(--muted); }
.game-rules li { padding-left: 1rem; position: relative; } .game-rules li::before { content: ""; position: absolute; left: 0; top: .6em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); }
.game-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.game-best { margin: 0; display: flex; align-items: baseline; gap: .4rem; font-weight: 800; color: var(--muted); }
.game-best strong { font-family: var(--display); font-size: 1.8rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Note Rain: each drop is its own little staff, because vertical position on a
   staff means pitch, so a note that fell down a shared staff would change pitch
   as it fell. */
.rain { height: min(52vh, 420px); position: relative; }
.rain-sky { position: absolute; inset: 0 0 8px 0; }
.rain-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--line-2) 0 10px, transparent 10px 20px); }
.drop { position: absolute; top: 0; left: 0; will-change: transform; background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; padding: 2px 4px; box-shadow: var(--shadow); }
.drop.low { border-color: var(--warn); }
.drop.caught { transition: transform 0.2s ease, opacity 0.2s ease; opacity: 0; border-color: var(--ok); }
.drop.landed { border-color: var(--bad); background: var(--bad-soft); transition: opacity 0.3s ease; opacity: 0; }
.drop.wrong { border-color: var(--bad); animation: shake 0.28s ease; }
@keyframes shake { 25% { margin-left: -5px; } 75% { margin-left: 5px; } }

/* Conveyor: one continuous staff, so reading ahead means what it means on a page. */
.conveyor-wrap { padding: 0.6rem 0; }
.conveyor-board { width: 100%; }
.conveyor { display: block; }
.conveyor .gline { stroke: var(--staff-ink); stroke-width: 1.2; opacity: 0.55; }
.conveyor .clefpad { fill: var(--card); }
.conveyor .clef { fill: var(--staff-ink); font-family: "Noto Music", serif; }
.conveyor .gate { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; opacity: 0.85; }
.conveyor .head { fill: var(--staff-ink); }
.conveyor .stem, .conveyor .ledger { stroke: var(--staff-ink); stroke-width: 1.6; }
.conveyor .note.now .head { fill: var(--accent); }
.conveyor .note.now .stem { stroke: var(--accent); }
.conveyor .note.right .head, .conveyor .note.right .stem { fill: var(--ok); stroke: var(--ok); opacity: 0.55; }
.conveyor .note.wrong .head, .conveyor .note.wrong .stem { fill: var(--bad); stroke: var(--bad); opacity: 0.55; }

@media (prefers-reduced-motion: reduce) { .drop.caught, .drop.landed { transition: none; } .drop.wrong { animation: none; } }
@media (max-width: 760px) {
  /* The whole game on one screen: field, tabs, buttons, with nothing below the fold. */
  .rain { height: min(34vh, 270px); }
  .game { padding: 0 0.6rem 1rem; }
  .game-field { margin: 0.5rem 0 0.6rem; }
}

/* The ready and over panels sit on the field, so starting a game moves nothing. */
.game-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(2px); text-align: center; z-index: 2; }
.game-veil[hidden] { display: none; }
.veil-card { max-width: 32rem; }
.veil-card h2 { margin: 0 0 0.4rem; }
.veil-card .game-blurb { margin: 0 auto 1.1rem; }
.veil-card .end-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 0.9rem; }

/* A row of three pickers is three rows on a phone, each one label plus a track
   that fills the width with its options divided evenly. Squeezed onto one line
   "On the staff" broke into three lines of one word. Kept to one line apiece,
   because a game screen that spends 200 pixels on its settings leaves the
   answer buttons below the fold. */
@media (max-width: 760px) {
  .practice-form { flex-direction: column; align-items: stretch; gap: .35rem; }
  .practice-form .seg-field { display: flex; align-items: center; gap: .4rem; }
  .practice-form .seg-field legend { float: left; margin: 0; flex: 0 0 3.2rem; font-size: .68rem; }
  .practice-form .seg { flex: 1 1 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: .15rem; }
  .practice-form .seg { border-width: 1.5px; min-width: 0; }
  .practice-form .seg-item { text-align: center; white-space: nowrap; font-size: .78rem; font-weight: 700; padding: .3rem .15rem; min-height: 2.1rem; min-width: 0; }
  /* The clef is named in the picker right above; saying it again wrapped the title. */
  .game .drill-title .muted { display: none; }
}

/* The speaker on a drill: a live mute that does not touch saved settings, for
   the times the buzz is the problem and the settings page is two taps away. */
.hud-mute { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink-2); cursor: pointer; padding: 0.15rem 0.5rem; }
@media (hover: hover) and (pointer: fine) { .hud-mute:hover { color: var(--ink); } }
.hud-mute[aria-pressed="true"] { background: var(--bad-soft); border-color: var(--bad); color: var(--bad-text); }
.hud-mute [hidden] { display: none; }

/* The note letter under each ready-screen preview, and the mnemonic below them.
   Both were missing before a level started, which is exactly when they help. */
.staff .staff-label { fill: var(--accent-deep); font-family: var(--display); font-weight: 800; }
.start-mnemonic { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; margin: 0.2rem 0 1.1rem; }
.start-mnemonic .mn { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 0.8rem; color: var(--muted); }
.start-mnemonic .mn b { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-right: .1rem; }
.start-mnemonic .mn span { display: inline-flex; align-items: baseline; gap: .4rem; padding: .2rem .7rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--card); }
.start-mnemonic .mn span + span { border-color: var(--accent-deep); } .start-mnemonic .mn span + span i { color: var(--accent-deep); }
.start-mnemonic .mn i { font-style: normal; font-weight: 800; font-size: .9rem; color: var(--ink); }

/* The play-by-play of one run: what was on the screen, what came back, how long
   it took. The aggregate note table above it can never answer "that note was
   never shown to me", which is the argument this exists to settle. */
.playby { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.pb { display: grid; grid-template-columns: 2rem auto 2.2rem 1fr auto; gap: 0 0.7rem; align-items: center; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--line); }
.pb.bad { border-radius: 10px; border-bottom-color: transparent; }
.pb-asked { font-family: var(--display); }
.pb.bad { background: var(--bad-soft); }
.pb-n { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; text-align: right; }
.pb-staff .staff { display: block; }
.pb-asked { font-weight: 800; font-size: 1.05rem; }
.pb-said { color: var(--ink-2); font-size: 0.9rem; display: flex; align-items: center; gap: 0.3rem; }
.pb.ok .pb-said { color: var(--ok-text); }
.pb.bad .pb-said { color: var(--bad-text); }
.pb-ms { color: var(--ink-2); font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 40rem) {
  .pb { grid-template-columns: 1.6rem auto 1fr; gap: 0 0.5rem; }
  .pb-said { grid-column: 2 / -1; }
  .pb-ms { grid-column: 3; grid-row: 1; text-align: right; }
}

/* The whole Recent row opens the run, not just the title: the play-by-play is
   the reason to click and nothing said the row was a link. */
.run-row { position: relative; }
.run-row .run-link::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { .run-row:hover { background: var(--paper-2); } }
@media (hover: hover) and (pointer: fine) { .run-row:hover .run-link { text-decoration: underline; } }

/* The family pass in the house style (its own rules are family_pass.css). A
   locked card wears a waiting medal, dashed with a padlock; the pass, once on,
   wears an earned one, pink with a check, the same medals the badges use. */
.paywall { position: relative; }
.paywall::before, .paywall::after { content: ""; position: absolute; top: 1.4rem; right: 1.4rem; width: 4rem; height: 4rem; border-radius: 50%; }
.paywall::before { background: var(--card); border: 2.5px dashed var(--line-2); }
.paywall::after { background: var(--line-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 10.5h11a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1zM8.5 10.5V7a3.5 3.5 0 1 1 7 0v3.5'/%3E%3C/svg%3E") center / 1.9rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 10.5h11a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1zM8.5 10.5V7a3.5 3.5 0 1 1 7 0v3.5'/%3E%3C/svg%3E") center / 1.9rem no-repeat; }
.paywall.pass-on::before { background: var(--accent-deep); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); animation: star-in .5s .1s var(--ease-pop) both; }
.paywall.pass-on::after { background: #fff; animation: star-in .5s .1s var(--ease-pop) both;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E"); }
.paywall > .paywall-eyebrow, .paywall > h1, .paywall > .paywall-kid { padding-right: 5rem; }
@media (max-width: 520px) { .paywall::before, .paywall::after { width: 3rem; height: 3rem; top: 1.1rem; right: 1.1rem; } .paywall::after { -webkit-mask-size: 1.4rem; mask-size: 1.4rem; } .paywall > .paywall-eyebrow, .paywall > h1 { padding-right: 3.6rem; } .paywall > .paywall-kid { padding-right: 0; } }

/* ---- Play screens: the drill and the games fit the screen ---------------
   A run owns the viewport: header, stage, keys, nothing below the fold and
   nothing scrolled away (a phone on its side used to start a run with the
   staff 223px above the screen). --hdr is the masthead's height. */
:root { --hdr: calc(4rem + 2px); }
@media (max-width: 1099px) { :root { --hdr: calc(4.4rem + 2px); } }
@media (max-width: 760px) { :root { --hdr: calc(3.75rem + 2px); } }
.run-on .app-footer, .run-on .tabbar { display: none; }
.run-on .app-main { padding-bottom: 0; }
.drill.running { height: calc(100dvh - var(--hdr)); min-height: 19rem; padding-bottom: .5rem; }
.drill.running .drill-stage { flex: 1 1 0; min-height: 0; padding: .5rem; }
.drill.running .staff-box { flex: 1 1 0; min-height: 0; }
.drill.running .staff-box .staff { height: 100%; }
.drill.running .drill-input { margin-top: .6rem; }
.drill.running .drill-last { min-height: 1.2rem; }

/* The ready card: Start right under the title, the run's choices under it,
   then the notes (six on a phone, with a way to see them all). */
.drill-start .start-btn { margin: .35rem 0 .55rem; }
.start-rule { margin: 0 0 .5rem; font-weight: 700; color: var(--ink-2); } .start-rule span { display: block; }
.start-blurb { max-width: 34rem; margin: 0 auto .9rem; font-size: .92rem; }
/* A fieldset's legend is not a grid or flex item unless it floats, so the
   legend floats and the control fills the rest of the row. */
.start-options { width: 100%; margin: 0 auto 1rem; max-width: 30rem; text-align: left; }
.start-options .practice-form { display: flex; flex-direction: column; align-items: stretch; gap: .45rem; }
.start-options .seg-field { display: flex; align-items: center; gap: .5rem; width: 100%; min-width: 0; }
.start-options .seg-field legend { float: left; flex: 0 0 3.6rem; margin: 0; padding: 0; font-size: .7rem; }
.start-options .seg { flex: 1 1 auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-width: 1.5px; padding: .15rem; min-width: 0; }
.start-options .seg-item { min-height: 2.75rem; padding: .25rem .3rem; font-size: .84rem; text-align: center; white-space: nowrap; min-width: 0; }
.start-options .seg-notes .seg { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.start-best { margin: .2rem 0 0; text-align: center; font-size: .9rem; color: var(--ink-2); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 2.75rem; padding: 0 .2rem; font-weight: 800; cursor: pointer; }
@media (max-width: 767px) { .start-pool.capped .extra { display: none; } }
@media (min-width: 768px) { .start-more { display: none !important; } }
.start-more { display: inline-flex; align-items: center; min-height: 2.75rem; margin: -.4rem 0 .4rem; font-weight: 800; color: var(--accent-deep); }
/* The notes picker is four long words: on a phone, two by two. */
@media (max-width: 560px) { .start-options .seg-notes .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; } }

/* The answer modes: five tabs where there is room, one "Answer: Tap" control
   that opens upward where there is not. */
.mode-fold { position: relative; display: flex; justify-content: center; }
.mode-fold-btn { display: none; }
@media (max-width: 560px), (orientation: landscape) and (max-height: 500px) {
  .mode-fold { margin-bottom: .5rem; }
  .mode-fold-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
  .mode-fold-k { color: var(--muted); font-weight: 700; }
  .mode-fold-btn .chev { transition: transform .2s var(--ease); } .mode-fold.open .mode-fold-btn .chev { transform: rotate(180deg); }
  .mode-fold .input-tabs { display: none; position: absolute; bottom: calc(100% + .4rem); left: 50%; transform: translateX(-50%); z-index: 15; flex-direction: column; align-items: stretch; gap: .25rem; margin: 0; padding: .4rem; min-width: 12rem; background: var(--card); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 8px 0 -4px var(--ink); }
  .mode-fold.open .input-tabs { display: flex; }
  .mode-fold .input-tab { justify-content: flex-start; border-color: transparent; }
}
/* Keys greys the letters as a hint for a keyboard; a touch screen has none. */
@media (pointer: coarse) { .keys-mode .note-btn { opacity: 1; } .keys-mode .note-btn::after { content: none; } }
/* Sharps and flats: the sign first, then the letter, each step labelled. */
.acc-pad { flex-direction: column; align-items: center; gap: .3rem; margin: 0 0 .5rem; }
.acc-pad:not([hidden]) { display: flex; }
.acc-row { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.pad-label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Games fit the screen too, and their field is what grows. */
.game { height: min(calc(100dvh - var(--hdr)), 54rem); min-height: 24rem; display: flex; flex-direction: column; padding-bottom: .5rem; }
.game-field, .game-field:has(.conveyor-wrap) { flex: 1 1 0; min-height: 0; }
.game .rain { height: 100%; }
.game .conveyor-wrap { height: 100%; display: flex; align-items: center; }
.game .drill-input { margin-top: .4rem; }
.game .drill-top { grid-template-columns: auto minmax(0, 1fr) auto; }
.game .drill-hud { flex-wrap: wrap; justify-content: flex-end; row-gap: .3rem; }
.game.running .drill-title { visibility: hidden; }
.veil-card .start-options { margin-top: 1rem; }
.game-veil { overflow-y: auto; align-items: safe center; }
@media (max-height: 640px) { .veil-card .game-blurb, .veil-card .game-rule { display: none; } .veil-card h2 { font-size: 1.5rem; } }

/* A phone (or anything short) on its side: no masthead, the staff on the left
   at the full height, the seven letters on the right as 4 and 3. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --hdr: 0px; }
  .is-play .app-header, .is-play .app-footer, .is-play .tabbar, .is-play .impersonation-bar { display: none; }
  .is-play .app-main { padding-bottom: 0; }
  .drill, .game { width: calc(100% - 1.5rem); max-width: none; }
  .drill.running, .game { height: 100dvh; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding: .4rem 0 .5rem; }
  .drill.running { grid-template-rows: auto auto minmax(0, 1fr); }
  .game { grid-template-rows: auto minmax(0, 1fr); }
  .drill.running > .drill-top, .game > .drill-top { grid-column: 1; grid-row: 1; margin-bottom: .3rem; }
  .drill.running > .drill-rail { grid-column: 1; grid-row: 2; margin-bottom: .4rem; }
  .drill.running > .drill-stage { grid-column: 1; grid-row: 3; }
  .game > .game-field { grid-column: 1; grid-row: 2; margin: 0; }
  .drill.running > .drill-input, .game > .drill-input { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; display: flex; flex-direction: column; align-items: center; }
  .drill.running .answer-pad, .game .answer-pad { grid-template-columns: repeat(4, 64px); gap: 6px; }
  .drill.running .note-btn, .game .note-btn { height: 64px; font-size: 1.6rem; }
  .drill-back span { display: none; } .drill-back { padding: 0 .65rem; }
  .drill.running .drill-hint { max-width: 17rem; }
}

/* Every control a thumb uses is 44px: the level rows are links end to end,
   the drill's mute and the masthead's buttons included. */
.level-row { position: relative; }
.level-row .level-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.level-row .btn { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) { .level-row:hover { background: color-mix(in srgb, var(--accent-soft) 50%, transparent); } }
.mk-actions .btn { height: 2.75rem; }
.app-body .switch { width: 3.4rem; height: 2rem; }
.app-body .switch::after { width: 1.4rem; height: 1.4rem; } .app-body .switch:checked::after { transform: translateX(1.4rem); }
/* The flash sits where it hides nothing: above the tab bar on a phone, and
   under the drill's own top row on a play screen. */
@media (max-width: 760px) { .flash { top: auto; bottom: calc(5rem + env(safe-area-inset-bottom)); } .run-on .flash, .is-play .flash { bottom: auto; top: calc(var(--hdr) + 3.6rem); } }
.is-play .flash { top: calc(var(--hdr) + 3.8rem); }
/* No lone item on a last row: the answer modes are a list, colors four and
   four on a phone, and four profile tiles two by two. */
.mode-grid, .onboarding .mode-grid { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 560px) { .color-grid { display: grid; grid-template-columns: repeat(4, 2.75rem); } }
@media (min-width: 861px) { .profile-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; } }

/* A field's own error, under it, in the app's words (formcheck_controller). */
.field-error { margin: .35rem 0 0; font-size: .88rem; font-weight: 800; color: var(--bad-text); }
input[aria-invalid="true"] { border-color: var(--bad) !important; }

/* Account: the forms' buttons are quiet (no pink unless it buys something),
   and Sign Out sits as a row of its own above Delete. */
.sign-out-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sign-out-card h2 { margin: 0 0 .2rem; } .sign-out-card p { margin: 0; }

/* Chosen breaks (wrapcheck): a sentence per .line, a clause per .clause, and
   paragraphs that never leave one word alone on their last line. */
span.line { display: block; }
/* A phrase kept whole where the line breaks, chosen per phrase (bin/wrapcheck). */
.nowrap { white-space: nowrap; }
span.clause { display: inline-block; }
p, li, dd, .lead, .sect-p { text-wrap: pretty; }

span.keep { white-space: nowrap; }

/* The grown-ups question sits on a tint: its hint takes the second ink, not muted (3.98:1 there). */
.grownup-gate .field-hint { color: var(--ink-2); }