:root {
  --ink: #0b1119;
  --ink-soft: #111a25;
  --ink-lighter: #172333;
  --paper: #f4f6f0;
  --paper-dim: #dfe5dd;
  --muted: #8b99a8;
  --muted-dark: #536171;
  --line: rgba(152, 171, 188, .17);
  --line-dark: rgba(11, 17, 25, .13);
  --lime: #c7f36b;
  --lime-dark: #a8d94f;
  --blue: #8dd4f5;
  --coral: #fa9f7b;
  --yellow: #f7d37f;
  --purple: #bca7ff;
  --space: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--space); -webkit-font-smoothing: antialiased; }
body, button, input { font-family: var(--space); }
a { color: inherit; text-decoration: none; }
button { border: 0; color: inherit; cursor: pointer; }
code, .mono { font-family: var(--mono); }
.site-shell { overflow: hidden; }
.section-pad { padding-left: clamp(24px, 7vw, 112px); padding-right: clamp(24px, 7vw, 112px); }
.topbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; height: 78px; justify-content: space-between; padding: 0 clamp(24px, 7vw, 112px); position: relative; z-index: 20; }
.brand { align-items: center; display: inline-flex; gap: 11px; }
.brand-mark { align-items: center; background: var(--lime); color: var(--ink); display: inline-flex; font: 600 12px var(--mono); height: 29px; justify-content: center; letter-spacing: -.06em; position: relative; width: 29px; }
.brand-mark::after { border: 1px solid var(--lime); content: ""; height: 29px; left: 4px; position: absolute; top: 4px; width: 29px; z-index: -1; }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: -.06em; }
.brand-name span { color: var(--lime); }
.desktop-nav { display: flex; gap: clamp(22px, 3vw, 44px); margin-left: 8%; }
.desktop-nav a { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .02em; position: relative; transition: color .2s ease; }
.desktop-nav a::after { background: var(--lime); bottom: -10px; content: ""; height: 1px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; width: 100%; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--paper); }
.desktop-nav a:hover::after { transform: scaleX(1); }
.top-actions { align-items: center; display: flex; gap: 16px; }
.icon-button { align-items: center; background: transparent; display: flex; padding: 8px; }
.icon-button svg, .search-box svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; width: 18px; }
.icon-button { color: var(--muted); transition: color .2s ease; }
.icon-button:hover { color: var(--lime); }
.button { align-items: center; display: inline-flex; font-size: 12px; font-weight: 600; gap: 16px; justify-content: center; letter-spacing: .01em; padding: 15px 20px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--lime); color: var(--ink); }
.button-primary:hover { background: #d7fa8a; }
.button-small { gap: 12px; padding: 11px 16px; }
.menu-toggle { background: transparent; display: none; flex-direction: column; gap: 5px; padding: 8px 0 8px 8px; }
.menu-toggle span { background: var(--paper); display: block; height: 1px; width: 22px; }
.hero { align-items: center; display: grid; gap: clamp(48px, 8vw, 120px); grid-template-columns: minmax(0, .9fr) minmax(390px, .95fr); min-height: 615px; padding-bottom: 74px; padding-top: 76px; }
.eyebrow, .section-kicker { color: var(--lime); font: 500 10px var(--mono); letter-spacing: .12em; }
.eyebrow { align-items: center; display: flex; gap: 9px; margin-bottom: 24px; }
.eyebrow-dot { background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 5px rgba(199,243,107,.1); height: 6px; width: 6px; }
.eyebrow-slash { color: var(--muted); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(48px, 6vw, 83px); font-weight: 600; letter-spacing: -.075em; line-height: .99; margin-bottom: 27px; max-width: 680px; }
h1 em, h2 em { color: var(--lime); font-style: normal; }
.hero-lede { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 510px; }
.hero-lede code { color: var(--paper); font-size: 13px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 25px; margin-top: 33px; }
.text-link { color: var(--paper); font-size: 12px; font-weight: 500; transition: color .2s ease; }
.text-link span { color: var(--lime); margin-left: 9px; }
.text-link:hover { color: var(--lime); }
.hero-note { align-items: center; color: var(--muted); display: flex; font: 10px var(--mono); gap: 11px; margin-top: 60px; }
.note-line { background: var(--lime); display: block; height: 1px; width: 24px; }
.hero-code { position: relative; }
.code-window, .pattern-window { background: #0f1924; border: 1px solid var(--line); box-shadow: 24px 30px 80px rgba(0,0,0,.22); }
.code-window { min-height: 315px; transform: rotate(1deg); }
.code-toolbar { align-items: center; border-bottom: 1px solid var(--line); color: var(--muted); display: flex; font: 10px var(--mono); gap: 15px; height: 43px; padding: 0 17px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { background: #334252; border-radius: 50%; display: block; height: 6px; width: 6px; }
.window-dots i:first-child { background: var(--coral); }.window-dots i:nth-child(2) { background: var(--yellow); }.window-dots i:nth-child(3) { background: var(--lime); }
.code-file { flex: 1; }.code-status { color: var(--lime); font-size: 9px; }
.code-body { color: #dbe5ec; font: 12px/2.1 var(--mono); padding: 25px 22px 20px; }
.line { display: grid; grid-template-columns: 28px 1fr; min-height: 25px; }.ln { color: #4e6071; user-select: none; }.tok-purple { color: #d4a9ff; }.tok-blue { color: #8fdbff; }.tok-string { color: var(--lime); }.tok-number { color: var(--coral); }.tok-comment { color: #5f7487; }
.code-footer { align-items: center; border-top: 1px solid var(--line); color: var(--muted); display: flex; font: 10px var(--mono); gap: 22px; padding: 13px 17px; }.code-footer > span:first-child { align-items: center; display: flex; gap: 7px; }.pulse { background: var(--lime); border-radius: 50%; display: inline-block; height: 6px; width: 6px; }.copy-button { background: transparent; color: var(--lime); font: 10px var(--mono); margin-left: auto; padding: 0; }.copy-button:hover { color: white; }
.hero-float-card { align-items: center; background: var(--lime); bottom: -33px; color: var(--ink); display: flex; gap: 10px; padding: 13px 15px; position: absolute; right: -20px; transform: rotate(-2deg); width: 188px; }.float-icon { font-size: 23px; }.hero-float-card b, .hero-float-card small { display: block; }.hero-float-card b { font-size: 10px; }.hero-float-card small { font: 9px var(--mono); opacity: .65; margin-top: 3px; }.hero-float-card strong { font: 700 21px var(--mono); margin-left: auto; }
.stats-strip { align-items: center; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); min-height: 125px; }.stat { align-items: baseline; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; padding-left: clamp(0px, 3vw, 40px); }.stat:first-child { padding-left: 0; }.stat:last-child { border: 0; }.stat strong { color: var(--paper); font: 500 27px var(--mono); letter-spacing: -.07em; }.stat span { color: var(--muted); font-size: 10px; }.stat-note { align-items: center; flex-direction: row; gap: 12px; }.stat-note b { color: var(--paper); font-weight: 500; }.mini-check { align-items: center; border: 1px solid var(--lime); color: var(--lime) !important; display: inline-flex; font: 14px var(--mono) !important; height: 27px; justify-content: center; width: 27px; }
.start-section, .library-section, .projects-section, .support-section { background: var(--paper); color: var(--ink); }.start-section { padding-bottom: 120px; padding-top: 119px; }.section-intro { max-width: 580px; }.section-kicker { color: #708c3b; display: inline-block; margin-bottom: 17px; }.section-intro h2, .section-heading-row h2, .code-section h2, .support-section h2 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -.065em; line-height: 1; margin-bottom: 17px; }.section-intro p, .heading-aside { color: var(--muted-dark); font-size: 14px; line-height: 1.7; max-width: 510px; }.starting-grid { display: grid; gap: 13px; grid-template-columns: 1.25fr 1fr 1fr; margin-top: 57px; }.start-card { border: 1px solid var(--line-dark); display: flex; flex-direction: column; min-height: 268px; padding: 22px; position: relative; transition: background .25s var(--ease), transform .25s var(--ease), border-color .25s ease; }.start-card:hover { background: white; border-color: rgba(11,17,25,.35); transform: translateY(-5px); }.start-card-featured { background: var(--ink); color: var(--paper); }.card-top { align-items: center; display: flex; justify-content: space-between; }.card-number, .card-meta, .track-level, .content-type, .filter-label, .support-label, .visual-label { font: 10px var(--mono); letter-spacing: .08em; }.card-number { color: var(--muted-dark); }.start-card-featured .card-number { color: var(--muted); }.card-arrow { color: var(--muted-dark); font-size: 18px; }.start-card-featured .card-arrow { color: var(--lime); }.start-icon { align-items: center; display: flex; font: 22px var(--mono); height: 37px; justify-content: center; margin-top: 28px; width: 37px; }.icon-lime { background: var(--lime); color: var(--ink); }.icon-blue { background: #cfeefd; color: #1e607c; }.icon-coral { background: #ffd8ca; color: #8d4935; }.icon-yellow { background: #f8e5ad; color: #806120; }.icon-purple { background: #e5ddff; color: #5b4b9e; }.start-card h3 { font-size: 20px; letter-spacing: -.045em; margin: 19px 0 8px; }.start-card p { color: var(--muted-dark); font-size: 12px; line-height: 1.6; margin: 0; max-width: 270px; }.start-card-featured p { color: var(--muted); }.card-foot { border-top: 1px solid var(--line-dark); color: var(--muted-dark); font: 10px var(--mono); margin-top: auto; padding-top: 14px; }.start-card-featured .card-foot { border-color: var(--line); color: var(--muted); }.card-foot b { color: var(--lime); float: right; font-size: 14px; }
.track-section { background: var(--ink-soft); padding-bottom: 130px; padding-top: 116px; }.section-heading-row { align-items: flex-end; display: flex; justify-content: space-between; }.track-section .section-kicker, .code-section .section-kicker, .final-cta .section-kicker { color: var(--lime); }.track-section h2, .code-section h2 { color: var(--paper); }.progress-overview { background: var(--ink-lighter); border: 1px solid var(--line); margin-top: 53px; padding: 19px 20px 15px; }.progress-label, .progress-meta { align-items: center; display: flex; font: 10px var(--mono); justify-content: space-between; }.progress-label { color: var(--muted); }.progress-label b { color: var(--lime); font-weight: 400; }.progress-bar { background: #263646; height: 5px; margin: 13px 0 12px; overflow: hidden; }.progress-bar span { background: var(--lime); display: block; height: 100%; transition: width .45s var(--ease); width: 0; }.progress-meta { color: #647687; }.progress-meta span { align-items: center; display: flex; gap: 7px; }.progress-dot { background: var(--lime); border-radius: 50%; display: inline-block; height: 5px; width: 5px; }.reset-progress { background: transparent; color: #647687; font: 10px var(--mono); padding: 0; }.reset-progress:hover { color: var(--paper); }.track-line { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 59px; position: relative; }.track-line::before { background: var(--line); content: ""; height: 1px; left: 8%; position: absolute; right: 8%; top: 22px; }.track-item { position: relative; }.track-node { align-items: center; background: var(--ink-soft); border: 1px solid #405264; color: var(--muted); display: flex; font: 11px var(--mono); height: 45px; justify-content: center; margin-bottom: 25px; position: relative; width: 45px; z-index: 1; }.track-item.is-current .track-node { background: var(--lime); border-color: var(--lime); color: var(--ink); }.track-item:not(:last-child)::after { color: #405264; content: "→"; font: 17px var(--mono); position: absolute; right: 15%; top: 14px; }.track-level { color: var(--lime); font-size: 9px; }.track-content h3 { color: var(--paper); font-size: 18px; letter-spacing: -.045em; margin: 10px 0 10px; }.track-content p { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 0; max-width: 210px; min-height: 58px; }.track-tags { display: flex; gap: 8px; margin-top: 18px; }.track-tags span { border: 1px solid var(--line); color: var(--muted); font: 9px var(--mono); padding: 6px 8px; }.lesson-toggle { background: transparent; color: var(--paper); font: 10px var(--mono); margin-top: 19px; padding: 0; }.lesson-toggle span { color: var(--lime); font-size: 16px; margin-left: 8px; }.lesson-panel { color: var(--muted); display: none; font: 11px/1.7 var(--mono); margin-top: 30px; padding: 18px; }.lesson-panel.is-open { border-left: 2px solid var(--lime); display: block; }
.library-section { padding-bottom: 126px; padding-top: 117px; }.library-count { align-items: flex-end; display: flex; gap: 11px; }.library-count strong { color: #82965e; font: 27px var(--mono); }.library-count span { color: var(--muted-dark); font: 10px/1.4 var(--mono); }.library-layout { display: grid; gap: 56px; grid-template-columns: 220px 1fr; margin-top: 56px; }.filters-panel { align-self: start; position: sticky; top: 25px; }.search-box { align-items: center; border-bottom: 1px solid var(--line-dark); display: flex; gap: 9px; padding: 0 0 13px; }.search-box svg { color: var(--muted-dark); height: 15px; width: 15px; }.search-box input { background: transparent; border: 0; color: var(--ink); font: 11px var(--mono); min-width: 0; outline: 0; width: 100%; }.search-box input::placeholder { color: #9ca7a8; }.search-box kbd { color: #94a09e; font: 10px var(--mono); }.filter-group { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 29px; }.filter-label { color: var(--muted-dark); display: block; margin-bottom: 3px; width: 100%; }.filter-chip { background: transparent; border: 1px solid var(--line-dark); color: var(--muted-dark); font: 10px var(--mono); padding: 7px 9px; transition: .2s ease; }.filter-chip:hover, .filter-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }.filter-tip { border-top: 1px solid var(--line-dark); display: flex; gap: 11px; margin-top: 34px; padding-top: 17px; }.filter-tip > span { color: #82965e; font-size: 22px; }.filter-tip p { color: var(--muted-dark); font: 10px/1.55 var(--mono); margin: 0; }.filter-tip b { color: var(--ink); font-weight: 500; }.library-results { display: grid; gap: 9px; grid-template-columns: repeat(2, 1fr); align-content: start; }.content-card { align-items: flex-start; border: 1px solid var(--line-dark); display: flex; gap: 15px; min-height: 176px; padding: 18px; position: relative; transition: background .25s ease, transform .25s ease; }.content-card:hover { background: white; transform: translateY(-3px); }.content-card-icon { align-items: center; display: flex; flex: 0 0 37px; font: 11px var(--mono); height: 37px; justify-content: center; }.content-card-main { min-width: 0; }.card-meta { color: var(--muted-dark); display: flex; gap: 13px; }.content-type { color: #708c3b; font-size: 9px; }.content-card h3 { font-size: 16px; letter-spacing: -.04em; margin: 15px 0 8px; }.content-card p { color: var(--muted-dark); font-size: 11px; line-height: 1.5; margin: 0; max-width: 250px; }.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 17px; }.card-tags span { color: var(--muted-dark); font: 9px var(--mono); }.card-tags span + span::before { color: #b1bcba; content: "·"; margin: 0 6px; }.content-arrow { color: #8a9a99; font-size: 17px; margin-left: auto; }.empty-state { grid-column: 1 / -1; padding: 55px 20px; text-align: center; }.empty-state > span { color: #82965e; font-size: 28px; }.empty-state h3 { font-size: 19px; margin: 10px 0 4px; }.empty-state p { color: var(--muted-dark); font: 11px var(--mono); }
.code-section { align-items: center; background: #111d29; display: grid; gap: 8vw; grid-template-columns: .75fr 1.25fr; padding-bottom: 120px; padding-top: 120px; }.code-section-copy h2 { margin-top: 0; }.code-section-copy > p { color: var(--muted); font-size: 13px; line-height: 1.65; max-width: 300px; }.code-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 26px; margin-top: 37px; width: max-content; }.code-tab { background: transparent; color: var(--muted); font: 10px var(--mono); padding: 0 0 12px; position: relative; }.code-tab.is-active { color: var(--lime); }.code-tab.is-active::after { background: var(--lime); bottom: -1px; content: ""; height: 1px; left: 0; position: absolute; right: 0; }.pattern-window { box-shadow: none; }.pattern-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 17px 21px; }.pattern-title { color: var(--paper); font-size: 12px; font-weight: 500; }.pattern-badge { color: var(--lime); font: 600 10px var(--mono); }.pattern-badge span { color: var(--muted); }.pattern-code { color: #dbe5ec; font: 12px/2.05 var(--mono); padding: 24px 25px; }.pattern-code > div { display: grid; grid-template-columns: 28px 1fr; }.code-line-number { color: #4e6071; }.pattern-explain { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: 27px 1fr auto; padding: 16px 21px; }.explain-icon { align-items: center; border: 1px solid #506273; border-radius: 50%; color: var(--blue); display: flex; font: 12px var(--mono); height: 22px; justify-content: center; width: 22px; }.pattern-explain p { color: var(--muted); font: 10px/1.55 var(--mono); margin: 0; }.pattern-explain p b { color: var(--paper); font-weight: 500; }.pattern-explain code { color: var(--lime); }.pattern-explain .copy-button { border: 1px solid #506273; padding: 10px 12px; }
.projects-section { padding-bottom: 126px; padding-top: 118px; }.heading-aside { margin-bottom: 5px; max-width: 235px; }.projects-grid { display: grid; gap: 12px; grid-template-columns: 1.24fr 1fr 1fr; margin-top: 55px; }.project-card { border: 1px solid var(--line-dark); }.project-visual { height: 181px; overflow: hidden; position: relative; }.visual-label { color: rgba(244,246,240,.65); left: 17px; position: absolute; top: 15px; }.visual-obby { background: #233241; }.obby-block { background: var(--lime); height: 44px; position: absolute; transform: skewY(-7deg); width: 125px; }.block-a { left: 16%; top: 46%; }.block-b { background: var(--blue); left: 47%; top: 30%; transform: skewY(7deg); }.block-c { background: var(--coral); left: 69%; top: 55%; transform: skewY(-7deg); }.obby-avatar { align-items: center; background: var(--paper); border: 4px solid #233241; border-radius: 50%; color: var(--ink); display: flex; font-size: 13px; height: 22px; justify-content: center; left: 49%; position: absolute; top: 58%; width: 22px; }.visual-shop { background: #25362c; }.shop-ring { border: 1px solid var(--lime); border-radius: 50%; height: 126px; left: 23%; position: absolute; top: 33px; width: 126px; }.shop-card-mini { background: var(--lime); color: var(--ink); padding: 10px 14px; position: absolute; right: 20%; top: 64px; transform: rotate(6deg); }.shop-card-mini span { display: block; font: 600 20px var(--mono); }.shop-card-mini small { font: 9px var(--mono); }.shop-line { background: var(--blue); height: 1px; left: 10%; position: absolute; top: 77%; transform: rotate(-19deg); width: 90%; }.visual-round { background: #2e293e; }.round-ring { border: 2px solid var(--purple); border-radius: 50%; height: 92px; left: 28%; position: absolute; top: 47px; width: 92px; }.round-ring::after { border: 1px solid var(--coral); border-radius: 50%; content: ""; inset: 13px; position: absolute; }.round-timer { color: var(--paper); font: 500 16px var(--mono); left: 37%; position: absolute; top: 84px; }.round-bars { bottom: 23px; display: flex; gap: 4px; left: 34%; position: absolute; }.round-bars i { background: var(--purple); display: block; height: 3px; width: 19px; }.round-bars i:nth-child(2) { background: var(--coral); width: 31px; }.round-bars i:nth-child(3) { background: var(--lime); width: 12px; }.project-body { padding: 20px 19px 17px; }.project-body h3 { font-size: 18px; letter-spacing: -.05em; margin: 14px 0 8px; }.project-body p { color: var(--muted-dark); font-size: 11px; line-height: 1.55; margin: 0; min-height: 36px; }.project-bottom { border-top: 1px solid var(--line-dark); display: flex; font: 10px var(--mono); justify-content: space-between; margin-top: 19px; padding-top: 14px; }.project-bottom > span { color: var(--muted-dark); }.project-bottom a { color: var(--ink); }.project-bottom a span { color: #708c3b; margin-left: 7px; }
.support-section { padding-bottom: 120px; padding-top: 113px; }.support-grid { display: grid; gap: 12px; grid-template-columns: 1.1fr 1fr 1fr; margin-top: 55px; }.support-card { border: 1px solid var(--line-dark); min-height: 360px; padding: 22px; }.support-card-head { align-items: center; display: flex; justify-content: space-between; }.support-icon { color: #708c3b; font: 19px var(--mono); }.support-count, .support-label { color: var(--muted-dark); font: 9px var(--mono); }.support-card h3 { font-size: 18px; letter-spacing: -.05em; margin: 24px 0 8px; }.support-card > p { color: var(--muted-dark); font-size: 11px; line-height: 1.5; margin-bottom: 26px; }.check-items { display: grid; gap: 12px; }.check-items label { align-items: center; color: var(--muted-dark); display: flex; font: 10px var(--mono); gap: 10px; }.check-items input { appearance: none; border: 1px solid #9da8a3; cursor: pointer; height: 15px; margin: 0; position: relative; width: 15px; }.check-items input:checked { background: var(--lime); border-color: var(--lime); }.check-items input:checked::after { color: var(--ink); content: "✓"; font: 11px var(--mono); left: 2px; position: absolute; top: -1px; }.check-items input:checked + span { color: var(--ink); text-decoration: line-through; text-decoration-color: #9bae70; }.glossary-list { border-top: 1px solid var(--line-dark); }.glossary-list details { border-bottom: 1px solid var(--line-dark); padding: 12px 0; }.glossary-list summary { align-items: center; color: var(--ink); cursor: pointer; display: flex; font: 10px var(--mono); justify-content: space-between; list-style: none; }.glossary-list summary::-webkit-details-marker { display: none; }.glossary-list summary code { color: #708c3b; }.glossary-list summary span { color: var(--muted-dark); }.glossary-list summary b { color: #708c3b; font-size: 15px; font-weight: 400; margin-left: 9px; }.glossary-list details[open] summary b { display: inline-block; transform: rotate(45deg); }.glossary-list p { color: var(--muted-dark); font: 10px/1.55 var(--mono); margin: 10px 0 0; }.glossary-card > .text-link { display: block; font-size: 10px; margin-top: 22px; }.glossary-card > .text-link { color: var(--muted-dark); }.resource-link { align-items: center; border-bottom: 1px solid var(--line-dark); color: var(--ink); display: flex; font: 11px var(--mono); justify-content: space-between; padding: 13px 0; }.resource-link b { color: #708c3b; font-weight: 400; }.resource-note { align-items: center; color: var(--muted-dark); display: flex; font: 9px var(--mono); gap: 7px; margin-top: 19px; }
.final-cta { background: var(--lime); color: var(--ink); padding-bottom: 84px; padding-top: 86px; }.final-cta .section-kicker { color: #5f762c; }.cta-grid { align-items: end; display: grid; gap: 60px; grid-template-columns: 1.2fr .8fr; }.final-cta h2 { font-size: clamp(38px, 5vw, 67px); letter-spacing: -.08em; line-height: .98; margin: 13px 0 0; }.final-cta h2 em { color: #637b30; }.cta-actions { max-width: 260px; }.cta-actions p { color: #5a6f35; font-size: 12px; line-height: 1.55; }.button-dark { background: var(--ink); color: var(--paper); margin-top: 13px; }.button-dark:hover { background: #263441; }
.footer { background: var(--ink); color: var(--paper); display: grid; gap: 60px; grid-template-columns: 1fr 1fr; padding-bottom: 31px; padding-top: 57px; }.footer-brand p { color: var(--muted); font-size: 11px; line-height: 1.55; margin: 19px 0 0; max-width: 220px; }.footer-links { display: flex; gap: clamp(50px, 9vw, 150px); justify-content: flex-end; }.footer-links div { display: flex; flex-direction: column; gap: 10px; }.footer-links span { color: var(--lime); font: 9px var(--mono); letter-spacing: .1em; margin-bottom: 5px; }.footer-links a { color: var(--muted); font: 11px var(--mono); }.footer-links a:hover { color: var(--paper); }.footer-bottom { border-top: 1px solid var(--line); color: #647687; display: flex; font: 9px var(--mono); grid-column: 1 / -1; justify-content: space-between; margin-top: 16px; padding-top: 20px; }.footer-heart { color: var(--lime); }
.toast { align-items: center; background: var(--paper); bottom: 24px; box-shadow: 0 8px 30px rgba(0,0,0,.25); color: var(--ink); display: flex; font: 11px var(--mono); gap: 10px; opacity: 0; padding: 13px 16px; pointer-events: none; position: fixed; right: 24px; transform: translateY(12px); transition: .25s ease; z-index: 50; }.toast > span:first-child { color: #708c3b; font-size: 16px; }.toast.is-visible { opacity: 1; transform: translateY(0); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 950px) { .hero { gap: 55px; grid-template-columns: 1fr; padding-bottom: 105px; padding-top: 68px; }.hero-copy { max-width: 700px; }.hero-code { max-width: 640px; width: 100%; }.starting-grid, .projects-grid, .support-grid { grid-template-columns: repeat(2, 1fr); }.start-card-featured, .project-featured, .checklist-card { grid-column: 1 / -1; }.support-card { min-height: auto; }.library-layout { gap: 32px; grid-template-columns: 185px 1fr; }.library-results { grid-template-columns: 1fr; }.code-section { gap: 50px; grid-template-columns: 1fr; }.code-section-copy > p { max-width: 500px; }.pattern-window { max-width: 700px; }.track-line { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }.track-line::before { display: none; }.track-item:not(:last-child)::after { display: none; } }
@media (max-width: 650px) { .topbar { height: 68px; }.desktop-nav { background: var(--ink-soft); border: 1px solid var(--line); display: none; flex-direction: column; gap: 0; left: 18px; padding: 8px 17px; position: absolute; right: 18px; top: 61px; }.desktop-nav.is-open { display: flex; }.desktop-nav a { padding: 13px 0; }.desktop-nav a::after { display: none; }.top-actions .button { display: none; }.menu-toggle { display: flex; }.hero { min-height: auto; padding-bottom: 88px; padding-top: 55px; }.eyebrow { font-size: 9px; }.eyebrow-slash { display: none; }.hero h1 { font-size: clamp(45px, 14vw, 67px); }.hero-lede { font-size: 14px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }.hero-note { margin-top: 38px; }.code-window { min-height: 280px; transform: none; }.code-toolbar { gap: 9px; padding: 0 10px; }.code-status { display: none; }.code-body { font-size: 10px; padding: 20px 10px 16px; }.code-footer { gap: 10px; padding-left: 10px; padding-right: 10px; }.code-footer > span:nth-child(2) { display: none; }.hero-float-card { bottom: -34px; right: 4px; }.stats-strip { gap: 22px; grid-template-columns: repeat(2, 1fr); padding-bottom: 28px; padding-top: 28px; }.stat { border: 0; padding-left: 0; }.stat:nth-child(3), .stat:nth-child(4) { margin-top: 4px; }.stat-note { align-items: flex-start; }.start-section, .library-section, .projects-section, .support-section { padding-bottom: 80px; padding-top: 80px; }.section-heading-row { align-items: flex-start; flex-direction: column; gap: 24px; }.section-intro h2, .section-heading-row h2, .code-section h2, .support-section h2 { font-size: 38px; }.starting-grid, .projects-grid, .support-grid { grid-template-columns: 1fr; }.start-card-featured, .project-featured, .checklist-card { grid-column: auto; }.start-card { min-height: 245px; }.track-section { padding-bottom: 85px; padding-top: 80px; }.progress-overview { margin-top: 35px; }.progress-meta { align-items: flex-start; flex-direction: column; gap: 14px; }.track-line { grid-template-columns: 1fr; row-gap: 35px; }.track-item { display: grid; gap: 15px; grid-template-columns: 45px 1fr; }.track-node { margin-bottom: 0; }.track-content h3 { margin-top: 7px; }.track-content p { min-height: 0; }.track-tags { margin-top: 13px; }.lesson-toggle { margin-top: 12px; }.library-layout { display: block; margin-top: 35px; }.filters-panel { position: static; }.filter-tip { display: none; }.library-results { margin-top: 28px; }.content-card { min-height: 155px; padding: 15px; }.content-card h3 { font-size: 15px; margin-top: 12px; }.content-card p { font-size: 10px; }.code-section { padding-bottom: 80px; padding-top: 80px; }.pattern-code { font-size: 9px; padding: 18px 12px; }.pattern-explain { align-items: start; grid-template-columns: 24px 1fr; padding: 15px 12px; }.pattern-explain .copy-button { grid-column: 2; justify-self: start; margin-top: 4px; }.project-visual { height: 165px; }.support-card { padding: 18px; }.final-cta { padding-bottom: 70px; padding-top: 70px; }.cta-grid { display: block; }.cta-actions { margin-top: 32px; }.footer { display: block; padding-top: 45px; }.footer-links { justify-content: flex-start; margin-top: 42px; }.footer-bottom { margin-top: 45px; }.footer-bottom span:last-child { text-align: right; }.toast { bottom: 15px; right: 15px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }.button, .content-card, .start-card { transition: none; } }

/* Camada didáctica adicionada: leitura guiada e explicações abertas. */
.how-section { background: #e8ede5; color: var(--ink); display: grid; gap: 8vw; grid-template-columns: .7fr 1.3fr; padding-bottom: 91px; padding-top: 88px; }
.how-intro h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.07em; line-height: 1; margin: 12px 0 15px; }
.how-intro p { color: var(--muted-dark); font-size: 13px; line-height: 1.65; max-width: 300px; }
.how-steps { border-top: 1px solid var(--line-dark); }
.how-step { align-items: flex-start; border-bottom: 1px solid var(--line-dark); display: grid; gap: 23px; grid-template-columns: 38px 1fr; padding: 20px 0; }
.how-index { color: #708c3b; font: 11px var(--mono); padding-top: 2px; }
.how-step h3 { font-size: 17px; letter-spacing: -.04em; margin: 0 0 7px; }
.how-step p { color: var(--muted-dark); font-size: 11px; line-height: 1.6; margin: 0; max-width: 540px; }
.content-card.is-expanded { background: white; transform: none; }
.content-card { flex-wrap: wrap; }
.card-more { background: transparent; border-top: 1px solid var(--line-dark); color: #708c3b; flex-basis: 100%; font: 10px var(--mono); margin-top: 4px; padding: 12px 0 0; text-align: left; }
.card-more span { font-size: 15px; margin-left: 7px; }
.card-detail { border-top: 1px dashed #b8c4bc; display: grid; flex-basis: 100%; gap: 14px; grid-template-columns: repeat(3, 1fr); padding-top: 15px; }
.card-detail b { color: #708c3b; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.card-detail p { color: var(--muted-dark); font: 10px/1.55 var(--mono); margin: 5px 0 0; max-width: none; }
@media (max-width: 950px) { .how-section { gap: 35px; grid-template-columns: 1fr; }.how-intro p { max-width: 500px; } }
@media (max-width: 650px) { .how-section { padding-bottom: 68px; padding-top: 68px; }.how-step { gap: 14px; grid-template-columns: 31px 1fr; }.how-step p { font-size: 10px; }.card-detail { grid-template-columns: 1fr; } }

.concepts-section { background: var(--paper); color: var(--ink); padding-bottom: 112px; padding-top: 96px; }
.concepts-head { align-items: end; display: grid; gap: 30px; grid-template-columns: 1fr .65fr; }
.concepts-head h2 { font-size: clamp(32px, 4vw, 51px); letter-spacing: -.07em; line-height: 1; margin: 11px 0 0; max-width: 610px; }
.concepts-head p { color: var(--muted-dark); font-size: 13px; line-height: 1.65; margin: 0 0 4px; max-width: 240px; }
.concepts-grid { display: grid; gap: 11px; grid-template-columns: repeat(3, 1fr); margin-top: 49px; }
.concept-card { border: 1px solid var(--line-dark); min-height: 292px; padding: 20px; position: relative; }
.concept-number { color: #708c3b; font: 9px var(--mono); letter-spacing: .08em; }
.concept-symbol { align-items: center; background: var(--lime); color: var(--ink); display: flex; font: 20px var(--mono); height: 42px; justify-content: center; margin-top: 29px; width: 42px; }
.concept-symbol.symbol-blue { background: #cfeefd; color: #1e607c; }.concept-symbol.symbol-coral { background: #ffd8ca; color: #8d4935; }
.concept-card h3 { font-size: 20px; letter-spacing: -.05em; margin: 17px 0 9px; }
.concept-card > p { color: var(--muted-dark); font-size: 11px; line-height: 1.6; margin: 0; max-width: 290px; }
.concept-example { border-top: 1px solid var(--line-dark); bottom: 19px; display: flex; flex-direction: column; gap: 5px; left: 20px; padding-top: 12px; position: absolute; right: 20px; }.concept-example b { color: #708c3b; font: 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }.concept-example span { color: var(--muted-dark); font: 10px var(--mono); }
@media (max-width: 950px) { .concepts-head { align-items: start; display: block; }.concepts-head p { margin-top: 17px; max-width: 480px; } }
@media (max-width: 650px) { .concepts-section { padding-bottom: 78px; padding-top: 75px; }.concepts-head h2 { font-size: 38px; }.concepts-grid { grid-template-columns: 1fr; margin-top: 36px; }.concept-card { min-height: 255px; } }