/* Music Theory, Illustrated: "Moon Doors" design.
   Night-blue surfaces, raised and pressed shapes, Cormorant Garamond headings, Outfit interface text. */

:root {
  /* surfaces */
  --bg: #171923;
  --bg2: #1a1d28;
  --bg3: #1d2030;
  --line: #2a2d3d;
  --hi: #222533;       /* light edge of a raised surface */
  --hi2: #262a3a;
  --lo: #0c0d13;       /* dark edge */
  --deep: #06070a;
  /* text */
  --fg: #ece4d8;
  --fg2: #c9c1d2;
  --fg3: #a39cb0;
  --fg4: #8f889c;
  /* palette */
  --coral: #e08a64;
  --coral2: #f0a27e;
  --rust: #9e563b;
  --rust2: #c56b4a;
  --gold: #e0b050;
  --olive: #b9bd84;
  --rose: #d9a3a0;
  --cream: #f6ecd8;
  --accent: #e08a64;
  --part: #e08a64;
  --ok: #b9d084;
  --bad: #e8837a;
  /* musical roles */
  --c-root: #e0b050;
  --c-third: #f0a27e;
  --c-fifth: #9ec3c8;
  --c-seventh: #b9bd84;
  --c-tension: #b49ce0;
  --c-avoid: #e8837a;
  --c-scale: #4a4d60;
  --c-glow: #e08a64;
  /* shape */
  --raise: -3px -3px 7px var(--hi), 4px 4px 8px var(--lo);
  --raise-md: -4px -4px 10px var(--hi), 5px 5px 12px var(--lo);
  --raise-lg: -8px -8px 18px var(--hi), 10px 10px 22px var(--lo);
  --press: inset -3px -3px 7px var(--hi), inset 4px 4px 8px var(--lo);
  --press-md: inset -4px -4px 9px var(--hi), inset 5px 5px 10px var(--lo);
  --press-lg: inset -8px -8px 18px var(--hi), inset 10px 10px 22px var(--lo);
  --radius: 30px;
  --serif: Poppins, Inter, sans-serif;
  --sans: Inter, system-ui, sans-serif;
  --top: 76px;
  --wide: 1200px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--coral2); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 1.6em 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 300; letter-spacing: -.01em; }
h2 { font-size: 34px; }
h3 { font-size: 25px; font-style: italic; }
em { font-style: italic; }
button, select, input, textarea { font: inherit; color: inherit; }
code, kbd { font: .88em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg); padding: 1px 6px; border-radius: 6px; box-shadow: var(--press); }
::selection { background: rgba(224, 138, 100, .35); }
input::placeholder { color: var(--fg4); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.eyebrow { font: 500 12px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--olive); }
.muted { color: var(--fg3); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- raised button base ---------- */
.raise-btn { width: 44px; height: 44px; flex: none; border: 0; cursor: pointer; background: var(--bg); color: var(--fg); font-size: 18px; border-radius: 14px; box-shadow: var(--raise); transition: transform .25s, filter .25s, color .25s, box-shadow .25s; }
.raise-btn:hover { transform: translateY(-2px); filter: brightness(1.18); color: var(--coral2); }
.raise-btn:active { box-shadow: var(--press); transform: none; }

/* ---------- header ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(23, 25, 35, .94); backdrop-filter: blur(10px); box-shadow: 0 10px 24px -14px var(--lo); }
.topbar-in { max-width: var(--wide); margin: 0 auto; padding: 16px 48px; display: flex; align-items: center; gap: 16px; }
.brand { font-family: var(--serif); font-size: clamp(18px, 2.2vw, 28px); white-space: nowrap; transition: transform .25s, color .25s; }
.brand em { color: var(--coral); }
.brand:hover { transform: translateY(-2px); }
.search-btn { flex: 1 1 200px; min-width: 44px; max-width: 280px; overflow: hidden; border: 0; cursor: pointer; background: var(--bg); display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 18px; border-radius: 16px; box-shadow: var(--press-md); font-size: 14px; color: #b4adbf; transition: transform .25s, filter .25s, color .25s; }
.search-btn:hover { transform: translateY(-2px); filter: brightness(1.18); color: var(--coral2); }
.s-left { display: flex; gap: 8px; align-items: center; }
.s-icon { font-size: 16px; color: var(--coral); line-height: 1; }
.search-btn kbd { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: none; box-shadow: -2px -2px 5px var(--hi), 3px 3px 6px var(--lo); }
.topnav { display: flex; gap: 18px; margin-left: auto; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.topnav a { border-bottom: 1.5px dotted var(--coral); padding-bottom: 3px; transition: transform .3s; display: inline-block; }
.topnav a:nth-child(odd):hover { transform: translateY(-3px) rotate(-3deg); }
.topnav a:nth-child(even):hover { transform: translateY(-3px) rotate(3deg); }
.topnav a.on { color: var(--coral2); }
.top-status { display: flex; align-items: center; gap: 8px; }
.ts-streak { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg3); padding: 8px 12px; border-radius: 14px; box-shadow: var(--raise); }
.ts-dot { width: 7px; height: 7px; border-radius: 50%; background: #4a4d60; }
.ts-streak.on { color: var(--gold); }
.ts-streak.on .ts-dot { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.ts-due { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-tension); padding: 8px 12px; border-radius: 14px; box-shadow: var(--raise); white-space: nowrap; }
.sound { display: flex; gap: 12px; align-items: center; flex: none; }
.inst { position: relative; }
.inst-btn { display: flex; align-items: center; gap: 10px; border: 0; cursor: pointer; background: var(--bg); font-size: 13px; padding: 10px 14px; border-radius: 14px; box-shadow: var(--raise); transition: transform .25s, filter .25s, color .25s, box-shadow .25s; white-space: nowrap; }
.inst-btn:hover { transform: translateY(-2px); filter: brightness(1.18); color: var(--coral2); }
.inst-btn.open { box-shadow: var(--press); }
.inst-btn .chev { font-size: 10px; color: var(--coral); transition: transform .25s; }
.inst-btn.open .chev { transform: rotate(180deg); }
.inst-list { position: absolute; right: 0; top: calc(100% + 12px); z-index: 31; width: 230px; padding: 10px; border-radius: 24px 24px 18px 18px; background: var(--bg); box-shadow: -6px -6px 14px var(--hi), 12px 18px 32px var(--deep); display: flex; flex-direction: column; gap: 4px; }
.inst-list[hidden] { display: none; }
.inst-lab { padding: 6px 12px 8px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--olive); }
.inst-list button { display: flex; justify-content: space-between; align-items: center; border: 0; cursor: pointer; background: none; font-family: var(--serif); font-size: 21px; text-align: left; padding: 7px 14px; border-radius: 14px; transition: box-shadow .25s, color .25s; }
.inst-list button:hover { box-shadow: var(--raise); color: var(--coral2); }
.inst-list button.on { color: var(--coral2); box-shadow: var(--press); }
.inst-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 10px var(--coral); }
.vol { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; box-shadow: var(--press); font-size: 12px; color: #b4adbf; }
.vol-lab { letter-spacing: .14em; text-transform: uppercase; }
.vol input { width: 80px; }
.midi-btn { border: 0; cursor: pointer; background: var(--bg); display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; box-shadow: var(--raise); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); white-space: nowrap; transition: transform .25s, filter .25s, color .25s; }
.midi-btn::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4a4d60; }
.midi-btn.on::before { background: var(--olive); box-shadow: 0 0 10px var(--olive); }
.midi-btn:hover { transform: translateY(-2px); filter: brightness(1.18); color: var(--coral2); }
.stop-btn { width: 40px; height: 40px; border-radius: 12px; font-size: 14px; color: var(--coral2); }

/* range sliders: pressed track, coral fill, gold knob */
input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; --pct: 0%; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--rust), var(--coral)) 0 0 / var(--pct) 100% no-repeat, var(--bg); box-shadow: inset -1px -1px 3px var(--hi), inset 2px 2px 3px var(--lo); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--bg); box-shadow: inset -1px -1px 3px var(--hi), inset 2px 2px 3px var(--lo); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--rust), var(--coral)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fbe7c8, var(--gold) 70%); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--coral), 0 0 10px rgba(224, 176, 80, .45), 2px 3px 5px var(--deep); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fbe7c8, var(--gold) 70%); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--coral), 0 0 10px rgba(224, 176, 80, .45); }
input[type=range]:hover { filter: brightness(1.2); }

/* ---------- drawer (course menu) ---------- */
.drawer-wrap { position: fixed; inset: 0; z-index: 40; background: rgba(8, 9, 14, .6); backdrop-filter: blur(4px); }
.drawer-wrap[hidden] { display: none; }
.drawer { position: absolute; left: 0; top: 0; bottom: 0; width: 360px; max-width: 88vw; overflow: auto; padding: 24px 22px 40px; background: var(--bg); box-shadow: 14px 0 40px var(--deep); display: flex; flex-direction: column; gap: 10px; animation: drawer-in .35s var(--ease); }
@keyframes drawer-in { from { transform: translateX(-30px); opacity: 0; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-family: var(--serif); font-size: 26px; }
.drawer-x { width: 38px; height: 38px; font-size: 15px; border-radius: 12px; }
.side-part summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: baseline; padding: 8px 10px; border-radius: 12px; }
.side-part summary::-webkit-details-marker { display: none; }
.side-part summary:hover { box-shadow: var(--raise); }
.pnum { font-size: 11px; letter-spacing: .22em; color: var(--olive); flex: none; }
.ptitle { font-family: var(--serif); font-size: 22px; line-height: 1.15; color: var(--part); flex: 1; }
.pcount { font-size: 11px; color: var(--fg4); }
.side-part ol { list-style: none; margin: 2px 0 10px; padding: 0; }
.side-part li a { display: block; padding: 6px 10px 6px 42px; font-size: 14px; line-height: 1.4; color: var(--fg2); border-radius: 10px; transition: box-shadow .2s, color .2s; }
.side-part li a:hover { box-shadow: var(--raise); color: var(--coral2); }
.side-part li a.on { color: var(--coral2); box-shadow: var(--press); }
.side-part li a.done::before { content: '✓ '; color: var(--olive); margin-left: -16px; }
.side-extra { display: flex; flex-direction: column; gap: 4px; border-top: 1.5px dotted #3a3446; padding-top: 16px; margin-top: 8px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
.side-extra a { padding: 8px 10px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; }
.side-extra a.on { color: var(--coral2); box-shadow: var(--press); }
.side-badge { font-size: 11px; letter-spacing: 0; background: var(--c-tension); color: #151320; padding: 1px 8px; border-radius: 999px; }

/* ---------- layout ---------- */
main { max-width: var(--wide); margin: 0 auto; padding: 0 48px 80px; min-height: 70vh; }
.site-foot { max-width: var(--wide); margin: 0 auto; padding: 30px 48px 48px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13px; letter-spacing: .14em; color: #b4adbf; border-top: 1.5px dotted #3a3446; }
.foot-brand { font-family: var(--serif); font-size: 20px; letter-spacing: 0; color: var(--fg); }
.foot-brand em { color: var(--coral); }
.site-foot nav { display: flex; gap: 24px; text-transform: uppercase; flex-wrap: wrap; }

/* ---------- home ---------- */
.home { display: flex; flex-direction: column; gap: 56px; }
.sky { position: relative; margin: 0 -48px; padding: 40px 48px 0; height: 1120px; background: linear-gradient(var(--bg) 0%, #1c2033 55%, #2c2432 79%, var(--bg) 79.2%); overflow: hidden; }
.moon { position: absolute; right: 110px; top: 30px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 38% 36%, var(--cream), #d4b596 72%); box-shadow: 0 0 90px rgba(246, 236, 216, .2); animation: moon 12s ease-in-out infinite alternate; }
@keyframes moon { to { transform: translateY(8px); } }
.cloud { position: absolute; left: 50%; top: 140px; width: 240px; height: 50px; border-radius: 50%; background: #f6f2ea; filter: blur(16px); opacity: .1; }
.hero-text { position: relative; display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.hero-h1 { margin: 0; font-weight: 300; font-size: clamp(56px, 9vw, 96px); line-height: .98; letter-spacing: -.02em; }
.hero-small { font-family: var(--sans); font-weight: 400; font-size: .2em; letter-spacing: .24em; text-transform: uppercase; vertical-align: 1.6em; color: var(--gold); }
.hero-h1 em { font-size: 1.2em; color: var(--coral); }
.hero-lede { margin: 0; font-size: 17px; line-height: 1.8; letter-spacing: .02em; color: var(--fg2); max-width: 480px; }
.hero-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.pill-stat { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg2); padding: 9px 14px; border-radius: 999px; box-shadow: var(--raise); }
.pill-stat.lit { color: var(--gold); }
.pill-stat.due { color: var(--c-tension); }
.pill-stat.quiet { box-shadow: var(--press); color: var(--fg3); }
.doors { position: absolute; left: 48px; right: 48px; top: 79%; transform: translateY(-100%); display: grid; gap: 16px; align-items: end; }
.door { position: relative; box-sizing: border-box; padding: 0 6px 18px; border-radius: 50% 50% 4px 4px / 22% 22% 4px 4px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; transition: transform .5s var(--ease), filter .3s; }
.door:hover { transform: translateY(-12px); color: inherit; }
.door-n { font-size: 11px; letter-spacing: .22em; }
.door-t { font-family: var(--serif); font-size: clamp(11px, 1.4vw, 21px); line-height: 1.05; white-space: nowrap; }
.door-sphere { position: absolute; left: 50%; top: 70px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #e5b5a0; box-shadow: 0 24px 18px -8px rgba(0, 0, 0, .6); }
.door-notes { position: absolute; left: 48px; right: 48px; top: calc(79% + 22px); display: grid; gap: 16px; }
.door-notes span { font-size: 12px; line-height: 1.55; color: #b4adbf; }
.mode-card { padding: 28px; border-radius: 32px; box-shadow: var(--raise-lg); display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: stretch; }
.mc-side { display: flex; flex-direction: column; gap: 14px; }
.mc-title { font-family: var(--serif); font-style: italic; font-size: 34px; line-height: 1; }
.mc-formula { font-size: 13px; letter-spacing: .2em; color: var(--gold); }
.mc-side .btn { margin-top: auto; align-self: flex-start; }
.mode-card .piano { margin: 0; }
.home-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.home-card { display: flex; flex-direction: column; gap: 6px; padding: 26px 28px; border-radius: 24px; box-shadow: -6px -6px 14px var(--hi), 8px 8px 18px var(--lo); transition: transform .25s, filter .25s, color .25s, box-shadow .25s; }
.home-card:hover { transform: translateY(-2px); filter: brightness(1.18); color: var(--coral2); }
.home-card:active { box-shadow: inset -6px -6px 14px var(--hi), inset 8px 8px 18px var(--lo); }
.hc-lab { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.hc-t { font-family: var(--serif); font-size: 28px; line-height: 1.1; }

/* ---------- chapter (lesson) layout ---------- */
.chapter { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; padding-top: 44px; align-items: start; }
.ch-aside { position: sticky; top: calc(var(--top) + 30px); display: flex; flex-direction: column; gap: 22px; max-height: calc(100vh - var(--top) - 50px); overflow-y: auto; padding: 4px 14px 20px 4px; margin: -4px -14px 0 -4px; scrollbar-width: thin; }
.back-link { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #b4adbf; transition: transform .25s, color .25s; align-self: flex-start; }
.back-link:hover { transform: translateY(-2px); }
.door.big { padding: 0 22px 24px; border-radius: 50% 50% 6px 6px / 26% 26% 6px 6px; gap: 6px; flex: none; }
.door.big:hover { transform: translateY(-6px); }
.door.big .door-n { font-size: 12px; letter-spacing: .24em; }
.door.big .door-t { font-size: 40px; line-height: 1; }
.door.big .door-sphere { top: 70px; width: 40px; height: 40px; margin-left: -20px; }
.ch-blurb { margin: 0; font-size: 15px; line-height: 1.7; color: var(--fg2); }
.ch-lessons summary { list-style: none; cursor: pointer; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--olive); padding: 4px 0 10px; }
.ch-lessons summary::-webkit-details-marker { display: none; }
.ch-list { display: flex; flex-direction: column; gap: 10px; }
.ch-item { display: flex; gap: 14px; align-items: baseline; padding: 12px 16px; border-radius: 16px; box-shadow: var(--raise); color: var(--fg); transition: transform .25s, filter .25s, color .25s, box-shadow .25s; }
.ch-item:hover { transform: translateY(-2px); filter: brightness(1.18); color: var(--coral2); }
.ch-item.on { box-shadow: var(--press-md); color: var(--coral2); }
.ch-n { font-size: 11px; letter-spacing: .2em; color: var(--olive); flex: none; }
.ch-t { font-size: 15px; line-height: 1.35; }
.ch-item.done .ch-n::after { content: ' ✓'; color: var(--olive); }

/* ---------- lesson article ---------- */
.lesson { min-width: 0; }
.lesson > .eyebrow { margin-top: 4px; }
.lesson > h1 { margin: 18px 0 24px; text-wrap: balance; }
.chapter .lesson > h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.02; }
main > .lesson { padding-top: 48px; }
main > .lesson > h1 { font-size: clamp(48px, 7vw, 80px); line-height: 1; margin-top: 10px; }
.crumb { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #b4adbf; }
.crumb a { color: #b4adbf; }
.crumb a:hover { color: var(--coral2); }
.crumb span { color: var(--part); }
.lesson-body { margin-top: 6px; }
.lesson-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 60px; padding-top: 26px; border-top: 1.5px dotted #3a3446; flex-wrap: wrap; }
.foot-link { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg2); transition: transform .25s, color .25s; }
.foot-link.next { color: var(--coral2); }
.foot-link:hover { transform: translateY(-2px); color: var(--coral2); }
.next-door { margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 30px; border-radius: 26px; box-shadow: inset -5px -5px 12px var(--hi), inset 6px 6px 14px var(--lo); transition: transform .25s, filter .25s, color .25s; }
.next-door:hover { transform: translateY(-2px); filter: brightness(1.18); }
.nd-text { display: flex; flex-direction: column; gap: 4px; }
.nd-t { font-family: var(--serif); font-size: 36px; line-height: 1; }
.nd-door { width: 44px; height: 60px; flex: none; border-radius: 50% 50% 4px 4px / 40% 40% 4px 4px; background: linear-gradient(var(--rust2), var(--rust)); box-shadow: inset 0 0 0 4px var(--gold); }

.prose { font-size: 17px; line-height: 1.8; }
.prose p, .prose li { color: var(--fg2); }
.prose > p:first-child { font-size: 18px; }
.prose strong, .prose b { color: var(--fg); font-weight: 500; }
.prose h2 { color: var(--fg); font-size: 36px; margin-top: 1.5em; }
.prose h3 { color: var(--part); font-size: 26px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 5px 0; }
.prose li::marker { color: var(--part); }
.prose a { color: var(--coral2); border-bottom: 1px dotted var(--coral); }
.ch, .prose .ch { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.12em; color: var(--part); white-space: nowrap; }
.prose blockquote { margin: 20px 0; padding: 14px 22px; color: var(--fg2); border-radius: 18px; box-shadow: var(--press-md); }
.err { color: var(--bad); white-space: pre-wrap; font-size: 12px; background: #2a1618; padding: 12px; border-radius: 12px; }

/* ---------- widgets ---------- */
.panel { background: transparent; border-radius: var(--radius); padding: 26px; margin: 26px 0; box-shadow: var(--raise-lg); }
.panel > h3:first-child, .panel > h4:first-child { margin-top: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; background: var(--bg); color: var(--coral2); font: 500 12px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 13px 22px; border-radius: 999px; box-shadow: var(--raise-md); text-decoration: none; transition: transform .25s, filter .25s, color .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.18); color: var(--coral2); }
.btn:active { box-shadow: inset -4px -4px 10px var(--hi), inset 5px 5px 12px var(--lo); transform: none; }
.btn.primary, .btn.play { background: var(--rust); color: #fbf3e8; box-shadow: 0 0 22px rgba(224, 138, 100, .3); }
.btn.primary:hover, .btn.play:hover { filter: brightness(1.15); color: #fbf3e8; }
.btn.primary:active, .btn.play:active { transform: scale(.97); }
.btn.on { box-shadow: var(--press-md); color: var(--olive); }
.btn.ghost { color: var(--fg2); }
.btn.big { padding: 16px 28px; font-size: 13px; }
.btn .ico { font-size: 10px; letter-spacing: 0; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.chip { border: 0; cursor: pointer; background: var(--bg); color: var(--fg2); font: 400 13px/1.2 var(--sans); letter-spacing: .06em; padding: 9px 13px; border-radius: 12px; box-shadow: var(--raise); transition: transform .25s, filter .25s, color .25s, box-shadow .25s; }
.chip:hover { transform: translateY(-2px); filter: brightness(1.18); color: var(--coral2); }
.chip:active { box-shadow: var(--press); transform: none; }
.chip.on { color: var(--coral2); box-shadow: var(--press); }
.chip.right { background: var(--olive); color: #1c1f10; font-weight: 500; box-shadow: 0 0 20px rgba(185, 189, 132, .35); }
.chip.wrong { color: var(--rose); box-shadow: var(--press); text-decoration: line-through; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 18px; box-shadow: var(--press-md); }
.seg button { border: 0; cursor: pointer; background: none; color: var(--fg2); font: 400 12.5px var(--sans); letter-spacing: .1em; padding: 9px 14px; border-radius: 13px; transition: color .2s, box-shadow .2s; }
.seg button:hover { color: var(--coral2); }
.seg button.on { background: var(--bg2); color: var(--coral2); box-shadow: -3px -3px 7px var(--hi2), 4px 4px 8px var(--lo); }
.field { max-width: 100%; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #b4adbf; }
.field select, .field input[type=number], .field input[type=text], .lesson select, .lesson input[type=number], .lesson input[type=text], .lesson input[type=search], .lesson textarea {
  max-width: 100%; min-width: 0; background: var(--bg); color: var(--fg); border: 0; border-radius: 12px; padding: 9px 12px; font: 400 14px var(--sans); letter-spacing: .02em; text-transform: none; box-shadow: var(--press);
}
.lesson select { cursor: pointer; }
.field.slider output, .field output { min-width: 3ch; font-family: var(--serif); font-style: italic; font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--coral2); font-variant-numeric: tabular-nums; }
.lesson input[type=checkbox], .lesson input[type=radio] { accent-color: var(--coral); }
.pill { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12px; letter-spacing: .08em; color: var(--fg2); box-shadow: var(--press); }
.progression { margin: 14px 0; }
.callout { border-radius: 22px; padding: 18px 22px; margin: 26px 0; box-shadow: var(--press-md); }
.callout-title { font-family: var(--serif); font-size: 22px; font-style: italic; margin-bottom: 4px; color: var(--part); }
.callout.try .callout-title { color: var(--olive); }
.callout.exercise .callout-title { color: var(--gold); }
.callout.idea .callout-title { color: var(--c-tension); }
.callout.warn .callout-title { color: var(--bad); }
.callout p { margin: 6px 0; color: var(--fg2); }

/* piano: arched raised keys in a pressed case */
.piano { position: relative; user-select: none; touch-action: none; margin: 16px 0; border-radius: 22px; background: var(--bg); box-shadow: inset -5px -5px 12px var(--hi), inset 6px 6px 14px var(--lo); }
.piano-in { position: absolute; inset: 12px; }
.key { position: absolute; top: 0; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; transition: background .2s, color .2s, box-shadow .2s; }
.key.white { height: 100%; background: #1d2030; border-radius: 50% 50% 10px 10px / 14% 14% 10px 10px; box-shadow: -3px -3px 7px var(--hi2), 4px 4px 9px var(--lo); border: 2.5px solid var(--bg); z-index: 1; color: #b4adbf; }
.key.black { height: 58%; top: 6px; background: var(--lo); border-radius: 50% 50% 8px 8px / 18% 18% 8px 8px; box-shadow: 0 10px 14px -6px #000; z-index: 2; color: #8f889c; }
.key.white:hover { background: #262a3d; color: var(--coral2); }
.key.black:hover { background: #262a3d; }
.key.white.down { background: #2b2438; box-shadow: inset 3px 3px 8px var(--lo), 0 0 24px rgba(224, 138, 100, .35); }
.key.black.down { background: #3a2b2a; }
.klabel { font-size: 10.5px; padding-bottom: 8px; pointer-events: none; letter-spacing: .04em; }
.kmark { width: 60%; max-width: 22px; aspect-ratio: 1; border-radius: 50%; margin-bottom: 8px; display: none; place-items: center; font: 600 9.5px var(--sans); color: #171923; pointer-events: none; }
.key.marked .kmark { display: grid; }
.key.black .kmark { margin-bottom: 9px; }
.key.user.white { background: #26293b; }
.key.user.black { background: #2a2d40; }
.key.user-ok.white, .key.user-ok.black { background: rgba(185, 189, 132, .55); box-shadow: 0 0 22px rgba(185, 189, 132, .45); }
.key.user-bad.white, .key.user-bad.black { background: rgba(232, 131, 122, .5); box-shadow: 0 0 22px rgba(232, 131, 122, .45); }

/* pitch circle */
.pcircle { width: 100%; display: block; margin: 12px auto; }
.pc-ring { fill: none; stroke: #2a2d3d; stroke-width: 1.5; }
.pc-node circle { fill: #1b1e2a; stroke: #262a3a; stroke-width: 1; filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, .55)); transition: fill .2s; }
.pc-node text { fill: var(--fg2); font: 400 13px var(--sans); text-anchor: middle; pointer-events: none; }
.pc-node.on circle { fill: var(--part); stroke: var(--part); filter: drop-shadow(0 0 6px var(--part)); }
.pc-node.on text { fill: #171923; font-weight: 600; }
.pc-node:hover circle { stroke: var(--coral2); }

/* piano roll */
.proll { width: 100%; display: block; border-radius: 18px; margin: 14px 0; box-shadow: var(--press-md); }
.pr-row { fill: #1a1c27; }
.pr-row.black { fill: #15171f; }
.pr-bar { stroke: #34374a; stroke-width: 1.2; }
.pr-beat { stroke: #22253a; stroke-width: 1; }
.pr-lab { fill: var(--fg4); font: 9px var(--sans); }
.pr-note { stroke: rgba(0, 0, 0, .45); stroke-width: 1; }
.pr-head { stroke: var(--cream); stroke-width: 2; opacity: .8; }

/* tables */
.tbl { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 14.5px; }
.tbl th, .tbl td { border-bottom: 1.5px dotted #34303f; padding: 9px 12px; text-align: left; }
.tbl th { font: 500 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--olive); }
.tbl td { color: var(--fg2); }
.tbl-wrap { overflow-x: auto; }

/* quiz */
.quiz { border-radius: var(--radius); padding: 26px; margin: 26px 0; box-shadow: var(--raise-lg); }
.quiz-head { display: flex; justify-content: space-between; align-items: baseline; }
.quiz-head strong { font: 500 12px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--olive); }
.quiz-score { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--gold); }
.quiz-prompt { margin: 14px 0; font-family: var(--serif); font-size: 28px; line-height: 1.2; }
.quiz-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz-choices .chip { font-size: 14px; padding: 12px 16px; border-radius: 14px; }
.quiz-fb { min-height: 28px; margin-top: 12px; font-size: 15px; color: var(--fg2); }
.quiz-fb.ok { color: var(--ok); }
.quiz-fb.no { color: var(--rose); }

/* layout helpers for lessons */
.row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.row > * { flex: 1 1 280px; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.big-readout { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 48px; line-height: 1.05; color: var(--coral2); }
.cell { border-radius: 16px; padding: 12px 14px; box-shadow: var(--raise); }
.tools-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 28px; }
.tools-nav a.chip.on { color: var(--coral2); box-shadow: var(--press); }

/* ---------- MIDI menu and feedback card ---------- */
.midi-menu { position: fixed; top: calc(var(--top) + 4px); right: max(16px, calc((100vw - var(--wide)) / 2 + 48px)); z-index: 40; width: 300px; background: var(--bg); border-radius: 24px 24px 18px 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: -6px -6px 14px var(--hi), 12px 18px 32px var(--deep); font-size: 14px; }
.midi-menu[hidden] { display: none; }
.midi-menu p { margin: 0; color: var(--fg2); }
.midi-err { color: var(--bad) !important; }
.midi-opt { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--fg2); }
.midi-opt.col { flex-direction: column; align-items: stretch; gap: 6px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--olive); }
.midi-opt input { accent-color: var(--coral); }
.midi-opt select { background: var(--bg); border: 0; border-radius: 12px; padding: 9px 12px; box-shadow: var(--press); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--fg); }
.midi-card { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: min(340px, calc(100vw - 40px)); background: rgba(23, 25, 35, .97); border-radius: 22px; padding: 14px 16px; box-shadow: -6px -6px 14px var(--hi), 12px 18px 32px var(--deep); font-size: 14px; }
.midi-card[hidden] { display: none; }
.midi-card.flash { box-shadow: 0 0 0 2px var(--bad), 12px 18px 32px var(--deep); animation: midi-shake .3s; }
@keyframes midi-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.mc-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--olive); }
.mc-right { display: flex; align-items: center; gap: 10px; }
.mc-score { color: var(--gold); }
.mc-close { background: none; border: 0; color: var(--fg4); font-size: 18px; line-height: 1; cursor: pointer; }
.mc-close:hover { color: var(--coral2); }
.mc-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; min-height: 30px; }
.mc-note { font-size: 13px; padding: 5px 10px; border-radius: 10px; box-shadow: var(--press); }
.mc-note.ok { background: var(--olive); color: #1c1f10; box-shadow: 0 0 14px rgba(185, 189, 132, .4); }
.mc-note.bad { color: var(--rose); text-decoration: line-through; }
.mc-chord { font-family: var(--serif); font-style: italic; font-size: 26px; margin-left: 6px; color: var(--coral2); }
.mc-msg { font-size: 13.5px; margin-top: 4px; color: var(--fg2); }
.mc-msg.ok { color: var(--ok); }
.mc-msg.bad { color: var(--rose); }

/* ---------- search ---------- */
.s-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(8, 9, 14, .72); backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: flex-start; padding: 110px 20px 20px; }
.s-overlay[hidden] { display: none; }
.s-box { width: min(640px, 100%); max-height: 76vh; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 28px; background: var(--bg); box-shadow: -8px -8px 18px var(--hi), 14px 20px 40px var(--deep); }
.s-bar { display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 18px; border-radius: 18px; box-shadow: var(--press-md); }
.s-bar input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-family: var(--serif); font-size: 26px; padding: 8px 0; }
.s-close { border: 0; background: none; cursor: pointer; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg4); }
.s-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.s-empty { padding: 14px 16px; color: #b4adbf; }
.s-item { display: block; padding: 12px 16px; border-radius: 14px; transition: box-shadow .2s; }
.s-item.on { box-shadow: var(--raise); }
.s-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.s-num { font-size: 11px; letter-spacing: .2em; color: var(--olive); }
.s-title { font-size: 16px; color: var(--fg); }
.s-head { font-size: 14px; color: var(--part); }
.s-head::before { content: '› '; color: var(--fg4); }
.s-snip { font-size: 13.5px; color: var(--fg3); margin-top: 3px; line-height: 1.55; }
.s-part { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #b4adbf; margin-top: 4px; }
.s-list mark { background: rgba(224, 138, 100, .28); color: var(--fg); border-radius: 3px; padding: 0 1px; }
.s-flash { animation: s-flash 1.8s; }
@keyframes s-flash { 0%, 40% { color: var(--coral2); text-shadow: 0 0 18px rgba(224, 138, 100, .6); } }
#main h2, #main h3 { scroll-margin-top: calc(var(--top) + 20px); }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .topbar-in { gap: 10px; padding: 14px 28px; }
  main { padding: 0 28px 70px; }
  .sky { margin: 0 -28px; padding: 36px 28px 0; }
  .doors, .door-notes { left: 28px; right: 28px; gap: 10px; }
  .search-btn { flex: 0 0 44px; padding: 10px; justify-content: center; }
  .search-btn .s-label, .search-btn kbd { display: none; }
  .topnav { gap: 14px; letter-spacing: .1em; }
  .vol input { width: 60px; }
  .vol-lab { display: none; }
  .site-foot { padding: 28px 28px 44px; }
}
@media (max-width: 1060px) {
  .top-status { display: none; }
  .door-t { font-size: clamp(10px, 1.55vw, 18px); }
}
@media (max-width: 900px) {
  :root { --top: 68px; }
  .topnav { display: none; }
  .vol { display: none; }
  .brand { margin-right: auto; }
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 24px; }
  .ch-aside { position: static; max-height: none; overflow: visible; padding: 0; margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px 18px; align-items: end; }
  .ch-aside .back-link { grid-column: 1 / -1; }
  .ch-aside .door.big { height: 170px !important; padding: 0 10px 14px; }
  .ch-aside .door.big .door-t { font-size: 22px; }
  .ch-aside .door.big .door-sphere { top: 36px; width: 26px; height: 26px; margin-left: -13px; }
  .ch-lessons { grid-column: 1 / -1; }
  .mode-card { grid-template-columns: minmax(0, 1fr); }
  .home-cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sky { height: auto; padding-bottom: 36px; background: linear-gradient(var(--bg) 0%, #1c2033 60%, #2c2432 100%); }
  .moon { width: 120px; height: 120px; right: 24px; top: 22px; }
  .doors { position: relative; left: auto; right: auto; top: auto; transform: none; margin-top: 40px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px 4px 10px; align-items: flex-end; }
  .doors .door { flex: 0 0 104px; scroll-snap-align: start; height: 190px !important; }
  .doors .door:nth-child(even) { height: 230px !important; }
  .door-t { font-size: 17px; }
  .door-notes { display: none; }
}
@media (max-width: 600px) {
  .topbar-in { padding: 12px 16px; gap: 8px; }
  main { padding: 0 16px 60px; }
  .sky { margin: 0 -16px; padding: 28px 16px 28px; }
  .inst-btn { padding: 10px 11px; font-size: 12px; }
  .midi-btn { padding: 10px 11px; letter-spacing: .12em; }
  .brand { font-size: 17px; }
  .raise-btn { width: 40px; height: 40px; }
  .hero-h1 { font-size: 54px; }
  .panel, .quiz { padding: 18px; border-radius: 24px; }
  .mode-card { padding: 18px; }
  .site-foot { padding: 24px 16px 40px; }
  .ch-aside { grid-template-columns: 96px minmax(0, 1fr); }
  .ch-aside .door.big { height: 140px !important; }
  .ch-aside .door.big .door-t { font-size: 19px; }
}
@media (max-width: 420px) {
  .brand { display: none; }
  .search-btn { margin-right: auto; }
  .midi-btn { font-size: 11px; }
}
.lesson-body table { display: block; overflow-x: auto; max-width: 100%; }
.lesson-body table.tbl { width: max-content; min-width: 100%; }
.lesson svg { max-width: 100%; }
.kmark:empty { width: 11px; max-width: 11px; box-shadow: 0 0 12px var(--coral); }
@media (max-width: 900px) {
  .doors { scrollbar-width: none; }
  .doors::-webkit-scrollbar { display: none; }
}
@media (max-width: 600px) {
  .moon { width: 92px; height: 92px; right: 14px; top: 14px; opacity: .9; }
  .hero-text { padding-right: 60px; }
  .hero-lede { font-size: 15.5px; }
}

/* ---------- original typography: Poppins headings, Inter text ---------- */
h1, h2, h3, h4 { font-family: Poppins, Inter, sans-serif; font-style: normal; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-weight: 800; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 19px; font-weight: 600; }
.brand { font-weight: 800; font-size: clamp(16px, 1.6vw, 19px); }
.brand em, .foot-brand em { font-weight: 800; }
.foot-brand { font-weight: 800; font-size: 17px; }
.hero-h1 { font-weight: 800; font-size: clamp(44px, 6.4vw, 72px); line-height: 1.02; letter-spacing: -.02em; }
.hero-h1 em { font-size: 1.08em; font-weight: 800; }
.hero-small { font-family: Inter, sans-serif; font-weight: 600; }
.door-t { font-weight: 700; font-size: clamp(10px, 1.1vw, 16px); letter-spacing: -.01em; }
.door.big .door-t { font-weight: 800; font-size: 30px; }
.mc-title { font-style: normal; font-weight: 700; font-size: 26px; }
.hc-t { font-weight: 600; font-size: 21px; line-height: 1.25; }
.nd-t { font-weight: 800; font-size: 26px; }
.ptitle { font-weight: 600; font-size: 15px; line-height: 1.3; }
.drawer-head { font-weight: 800; font-size: 20px; }
.inst-list button { font-family: Inter, sans-serif; font-size: 15px; }
.ch, .prose .ch { font-family: Poppins, sans-serif; font-style: normal; font-weight: 700; font-size: 1em; }
.prose h2 { font-size: 24px; }
.prose h3 { font-size: 19px; }
.callout-title { font-style: normal; font-weight: 700; font-size: 16px; }
.quiz-head strong { font-family: Poppins, sans-serif; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--fg); }
.quiz-prompt { font-family: Inter, sans-serif; font-size: 17px; line-height: 1.5; }
.quiz-score { font-style: normal; font-weight: 700; font-size: 16px; }
.big-readout { font-style: normal; font-weight: 800; font-size: 34px; }
.field.slider output, .field output { font-family: Inter, sans-serif; font-style: normal; font-size: 14px; }
.mc-chord { font-style: normal; font-weight: 800; font-size: 18px; }
.s-bar input { font-family: Inter, sans-serif; font-size: 18px; }
.chip { font-family: Poppins, sans-serif; font-weight: 600; letter-spacing: 0; }
.btn { font-family: Poppins, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: none; }
.pill-stat, .ts-due, .midi-btn, .topnav, .side-extra, .foot-link, .back-link, .site-foot nav, .eyebrow, .hc-lab, .ch-lessons summary { letter-spacing: .08em; }

/* original lesson heading: breadcrumb, then numbered title */
.crumb { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--fg3); }
.crumb a { color: var(--fg3); text-decoration: underline; text-underline-offset: 3px; }
.crumb span { color: var(--part); }
.lesson > h1, .chapter .lesson > h1, main > .lesson > h1 { display: flex; align-items: baseline; gap: 14px; margin: 10px 0 22px; font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height: 1.2; }
.lnum { font-size: .5em; color: var(--part); border: 2px solid var(--part); border-radius: 999px; padding: 2px 12px; font-weight: 700; flex: none; }
@media (max-width: 900px) { .lesson > h1 { flex-direction: column; gap: 8px; } }
@media (max-width: 900px) { .doors .door-t { font-size: 13px; } }
.sky { height: 1000px; }
@media (max-width: 900px) { .sky { height: auto; } }

/* full course navigation in the lesson page's left column */
.ch-nav { gap: 2px; padding-right: 10px; }
.ch-nav .side-part summary { padding: 7px 10px; }
.ch-nav .side-extra { margin-top: 12px; }
@media (max-width: 900px) { .ch-nav { display: none; } .chapter { padding-top: 20px; } }

/* header: never squish the search field; below 1440px it becomes an icon button */
.topbar-in { max-width: 1440px; }
.search-btn { flex: 0 0 190px; max-width: 190px; }
.top-status, .sound, .topnav { flex: none; }
@media (max-width: 1439px) {
  .search-btn { flex: 0 0 44px; max-width: 44px; padding: 10px; justify-content: center; }
  .search-btn .s-label, .search-btn kbd, .vol-lab { display: none; }
}

/* every page: the page content is centered in the window; the course nav sits in the space to its left */
main { max-width: none; }
.chapter { --center: 820px; }
.chapter.page-tool { --center: 960px; }
.chapter.page-home { --center: 1040px; }
.chapter > :not(.ch-aside) { min-width: 0; }
@media (min-width: 901px) {
  .chapter { max-width: calc(var(--center) + 324px); margin: 0 auto; grid-template-columns: 280px minmax(0, 1fr); gap: 44px; }
}
@media (min-width: 1560px) {
  .chapter.page-lesson { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, var(--center)) minmax(0, 1fr); column-gap: 48px; }
  .chapter.page-lesson > .ch-aside { grid-column: 1; justify-self: end; width: min(320px, 100%); }
  .chapter.page-lesson > :not(.ch-aside) { grid-column: 2; }
}
@media (min-width: 1700px) {
  .chapter.page-tool { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, var(--center)) minmax(0, 1fr); column-gap: 48px; }
  .chapter.page-tool > .ch-aside { grid-column: 1; justify-self: end; width: min(320px, 100%); }
  .chapter.page-tool > :not(.ch-aside) { grid-column: 2; }
}
@media (min-width: 1780px) {
  .chapter.page-home { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, var(--center)) minmax(0, 1fr); column-gap: 48px; }
  .chapter.page-home > .ch-aside { grid-column: 1; justify-self: end; width: min(320px, 100%); }
  .chapter.page-home > :not(.ch-aside) { grid-column: 2; }
}
/* home inside the column: the sky becomes a rounded panel */
.chapter.page-home { padding-top: 28px; }
.chapter .sky { margin: 0; border-radius: 32px; padding: 36px 36px 0; }
.chapter .doors, .chapter .door-notes { left: 36px; right: 36px; gap: 10px; }
.chapter .moon { right: 48px; top: 28px; width: 160px; height: 160px; }
.chapter .door-t { font-size: clamp(10px, .95vw, 15px); }
.chapter.page-tool > .lesson { padding-top: 0; }
@media (max-width: 900px) { .chapter .sky { border-radius: 24px; padding: 24px 18px 24px; } .chapter .moon { width: 92px; height: 92px; right: 14px; top: 14px; } }
.chapter .doors .door { padding: 0 5px 16px; }
.chapter .doors .door-t { font-size: clamp(9px, .64vw, 12px); }
@media (max-width: 900px) { .chapter .doors .door-t { font-size: 13px; } }
/* home between 901 and 1250px: the column is too narrow for ten standing doors, so they scroll sideways */
@media (min-width: 901px) and (max-width: 1250px) {
  .chapter .sky { height: auto; padding-bottom: 30px; background: linear-gradient(var(--bg) 0%, #1c2033 60%, #2c2432 100%); }
  .chapter .doors { position: relative; left: auto; right: auto; top: auto; transform: none; margin-top: 36px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px 4px 10px; align-items: flex-end; scrollbar-width: none; }
  .chapter .doors::-webkit-scrollbar { display: none; }
  .chapter .doors .door { flex: 0 0 104px; scroll-snap-align: start; height: 190px !important; }
  .chapter .doors .door:nth-child(even) { height: 230px !important; }
  .chapter .doors .door-t { font-size: 13px; }
  .chapter .door-notes { display: none; }
}
@media (min-width: 901px) and (max-width: 1250px) { .chapter .moon { width: 110px; height: 110px; right: 24px; top: 20px; } .chapter .hero-text { padding-right: 100px; } }