:root {
  color-scheme: dark;
  --bg: #0d1019;
  --panel: #171c2b;
  --line: #2b3347;
  --ink: #f4f1ea;
  --muted: #aeb7c7;
  --warm: #ff936b;
  --mint: #68d6b5;
  --blue: #83a5ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(900px 520px at 68% -10%, #273a67 0%, transparent 65%), var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 28px; }
.hero { max-width: 820px; padding: 40px 0 50px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--warm); font-weight: 800; letter-spacing: .14em; }
.brand span { font-size: 26px; }
.eyebrow, .kicker { color: var(--mint); font-size: 13px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
h1 { margin: 12px 0 14px; font-size: clamp(40px, 7vw, 76px); line-height: .98; letter-spacing: -.045em; }
.lead { max-width: 700px; color: var(--muted); font-size: clamp(17px, 2.4vw, 22px); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
h2 { margin: 5px 0 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.1; }
.cloud { color: var(--muted); font-size: 13px; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lesson { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, #1a2031, #131826); }
.lesson.featured { grid-column: span 2; display: grid; grid-template-columns: minmax(240px, .85fr) 1.4fr; }
.art { min-height: 190px; display: flex; align-items: center; justify-content: center; gap: 12px; background: #222b42; color: var(--blue); font-weight: 900; letter-spacing: .12em; }
.art.heart { min-height: 100%; background: radial-gradient(circle at center, rgba(255,147,107,.3), transparent 58%), #2a1d28; color: #ffc4af; }
.art.spine { background: linear-gradient(135deg, #182b39, #202845); color: var(--mint); }
.art.eeg { background: repeating-linear-gradient(110deg, #251d36 0 18px, #1b2235 18px 36px); color: #c9b6ff; }
.lesson-body { padding: 24px; }
.meta { display: flex; gap: 7px; flex-wrap: wrap; }
.meta span { border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; color: var(--muted); font-size: 12px; }
.lesson h3 { margin: 14px 0 8px; font-size: 26px; line-height: 1.1; }
.lesson p { color: var(--muted); margin: 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.actions a { border: 1px solid var(--line); border-radius: 11px; padding: 10px 14px; text-decoration: none; font-weight: 700; }
.actions a.primary { border: 0; color: #1a1010; background: linear-gradient(180deg, #ffad7d, var(--warm)); }
.how { margin-top: 54px; padding: 34px; border-radius: 24px; background: #111725; border: 1px solid var(--line); }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.how-grid p { display: grid; gap: 5px; color: var(--muted); }
.how-grid strong { color: var(--ink); font-size: 18px; }
footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 28px; color: var(--muted); font-size: 13px; }
footer a { color: var(--blue); }
@media (max-width: 720px) {
  .shell { width: min(100% - 24px, 680px); padding-top: 18px; }
  .hero { padding: 24px 0 36px; }
  .section-head { align-items: start; flex-direction: column; }
  .grid, .lesson.featured, .how-grid { grid-template-columns: 1fr; }
  .lesson.featured { grid-column: auto; }
  .art.heart { min-height: 210px; }
  .how { padding: 24px; }
}