/* pOqpOq education: shared look for education/ pages; derived from devlog/devlog.css.
   Near-black ground, brand red display type, Fredoka / Literata / JetBrains Mono.
   Pages load the Google fonts link used by devlog/index.html, then this file.
   Contrast (computed, WCAG): brand #cf0048 on ground 3.5:1 = large display type only;
   --brand-text #ff5c8a on ground 6.68:1, on panel 6.14:1 = small links, kickers, badges. */
:root{
  --ground:#0d0b0c; --stage:#141012; --panel:#1a1517; --panel-hover:#211a1d; --line:#2c2427;
  --ink:#efe8ea; --muted:#a99fa3; --brand:#cf0048; --brand-text:#ff5c8a; --brand-soft:#cf00482e;
  --display:'Fredoka','Arial Rounded MT Bold','Trebuchet MS',sans-serif;
  --body:'Literata',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.65}
img{max-width:100%}
a{color:var(--brand-text);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--brand-text);outline-offset:2px}
strong{font-weight:600}

/* hero: image at full strength, no overlay; title block sits below on the ground */
.hero-image{display:block;width:100%;aspect-ratio:3/1;object-fit:cover;object-position:70% 30%;background:var(--stage)}
.page-head{max-width:980px;margin:0 auto;padding:36px 16px 8px}
.page-head h1{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05;margin:0 0 14px;color:var(--brand);letter-spacing:-.02em;text-wrap:balance}
.page-head .subtitle{font-size:1.2rem;line-height:1.55;color:var(--ink);margin:0;max-width:680px}
.kicker{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:var(--muted)}

/* page body */
.page-main{max-width:980px;margin:0 auto;padding:32px 16px 64px}
.intro{max-width:780px;margin-bottom:48px}
.intro p{margin:0 0 12px}
.section-heading{font-family:var(--display);font-weight:600;font-size:1.6rem;line-height:1.15;color:var(--ink);margin:0 0 18px;padding-bottom:8px;border-bottom:1px solid var(--line);text-wrap:balance}

/* cards */
.card-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:48px}
.feature-card{display:block;color:inherit;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:14px;padding:18px 22px;transition:background .2s,border-color .2s}
.feature-card:hover{background:var(--panel-hover);border-color:var(--brand);text-decoration:none}
.card-chapter{display:inline-block;font-family:var(--mono);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-text);margin-bottom:4px}
.card-title{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.25;color:var(--ink);margin-bottom:6px}
.card-desc{font-size:.95rem;line-height:1.5;color:var(--muted)}

/* chips / status badges */
.status-badge{display:inline-block;font-family:var(--mono);font-size:.64rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:.15em .7em;border-radius:9999px;margin-left:8px;vertical-align:middle;position:relative;top:-1px;border:1px solid var(--line);color:var(--muted)}
.status-badge.live{background:rgba(76,175,80,.16);color:#6fcf73;border-color:rgba(76,175,80,.4)}
.status-badge.partial{background:rgba(255,170,0,.13);color:#ffb733;border-color:rgba(255,170,0,.35)}
.status-badge.coming-soon{background:rgba(255,255,255,.05);color:var(--muted);border-color:var(--line)}

/* audience tiles */
.audience-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:48px}
.audience-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center}
.audience-icon{display:block;font-family:var(--display);font-size:1.75rem;font-weight:700;color:var(--brand-text);margin-bottom:10px}
.audience-label{font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--ink);margin-bottom:4px}
.audience-desc{font-size:.9rem;line-height:1.5;color:var(--muted)}

/* footer */
.page-footer{font-family:var(--mono);font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding:24px 16px;text-align:center}
.page-footer .tagline{color:var(--ink);margin-bottom:6px}

@media (min-width:640px){
  .card-grid{grid-template-columns:1fr 1fr}
  .card-grid .feature-card:last-child:nth-child(odd){grid-column:1/-1}
  .card-grid .feature-card--wide{grid-column:1/-1}
}
@media (max-width:620px){
  body{font-size:17px}
  .hero-image{aspect-ratio:16/10}
  .page-head{padding-top:28px}
}

/* ======================================================================
   ARTICLE PAGES (chapters, creator guide, player guide): <body class="edu-article">
   Legacy variable names used by the page components are aliased onto the brand tokens,
   so every component recolors from one place. Small-text accents are lightened to >=4.5:1 on panel.
   ====================================================================== */
.edu-article{
  --primary:var(--brand-text); --primary-dim:rgba(255,92,138,.15);
  --dark-bg:var(--ground); --card-bg:var(--panel); --text:var(--ink); --text-muted:var(--muted);
  --border:var(--line); --code-bg:var(--stage);
  --accent-green:#6fcf73; --accent-orange:#ffb733; --accent-purple:#d58be6; --accent-red:#ff7a73;
  --accent-yellow:#fdd835; --accent-blue:#64b5f6; --accent-pink:var(--brand-text);
  font-size:17px; line-height:1.7;
}
.edu-article .page-wrapper{max-width:900px;margin:0 auto;padding:2rem 16px 4rem;min-width:0}
.edu-article h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,5.5vw,3rem);line-height:1.1;margin:0 0 .75rem;color:var(--brand);letter-spacing:-.02em;text-wrap:balance}
.edu-article h2{font-family:var(--display);font-weight:600;font-size:1.6rem;line-height:1.2;color:var(--ink);margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--line);text-wrap:balance}
.edu-article h3{font-family:var(--display);font-weight:600;font-size:1.2rem;line-height:1.3;color:var(--ink);margin:1.5rem 0 .5rem}
.edu-article h4{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink);margin:1.25rem 0 .4rem}
.edu-article p{margin:0 0 1rem}
.edu-article em{font-style:italic;color:var(--brand-text)}
.edu-article ul,.edu-article ol{margin:.75rem 0 1.25rem 1.5rem;padding:0}
.edu-article li{margin-bottom:.3rem}
.edu-article .subtitle{font-size:1.2rem;line-height:1.55;color:var(--ink);margin:0 0 2.5rem;max-width:720px}
.edu-article .chapter-label{font-family:var(--mono);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--brand-text);margin-bottom:.5rem}
.edu-article img{max-width:100%;height:auto}
.edu-article :is(.example-pair,.behavior-grid,.challenge-stats,.card-grid,.feature-cards,.flywheel-steps)>*{min-width:0}

/* breadcrumb = the back-link to the docs index (first crumb) */
.edu-article .breadcrumb{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;color:var(--muted);margin:0 0 2.5rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.edu-article .breadcrumb a{color:var(--brand-text)}
.edu-article .breadcrumb .separator{margin:0 .5rem;color:var(--muted)}
.edu-article .breadcrumb .current{color:var(--ink)}
.edu-article>.breadcrumb{max-width:980px;margin:0 auto;padding:1rem 16px 0;border-bottom:0}

/* header / main / footer layout (guide indexes and the chapters that use header+main) */
.edu-article>header{background:var(--stage);border-bottom:1px solid var(--line);padding:2.5rem 0 1.75rem;margin-top:1rem}
.edu-article>header .container{max-width:980px;margin:0 auto;padding:0 16px}
.edu-article>header h1 span{color:inherit}
.edu-article>header h1{margin-bottom:.5rem}
.edu-article>header .subtitle{margin:0}
.edu-article>main{max-width:980px;margin:0 auto;padding:2rem 16px 4rem;min-width:0}
.edu-article>footer,.edu-article .page-footer{font-family:var(--mono);font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding:24px 16px;text-align:center;margin-top:3rem}
.edu-article>footer .tagline,.edu-article .page-footer .tagline{color:var(--ink);margin-bottom:6px}
.edu-article>footer a,.edu-article .page-footer a{color:var(--brand-text)}

/* previous / next chapter navigation */
.edu-article .chapter-nav{display:flex;justify-content:space-between;align-items:stretch;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);flex-wrap:wrap}
.edu-article .chapter-nav a{display:inline-flex;flex-direction:column;justify-content:center;gap:.15rem;color:var(--brand-text);font-size:.95rem;padding:.6rem 1rem;border:1px solid var(--line);background:var(--panel);border-radius:12px;transition:border-color .2s,background .2s;max-width:100%}
.edu-article .chapter-nav a:hover{border-color:var(--brand);background:var(--panel-hover);text-decoration:none}
.edu-article .chapter-nav .prev{margin-right:auto}
.edu-article .chapter-nav .next,.edu-article .chapter-nav .nav-next{margin-left:auto;text-align:right}
.edu-article .chapter-nav .nav-direction,.edu-article .chapter-nav .nav-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.edu-article .chapter-nav .nav-title{color:var(--ink);font-weight:600}
.edu-article .chapter-nav .disabled{color:var(--muted);pointer-events:none;opacity:.45}

/* link-style cards on guide indexes (a.feature-card) */
.edu-article a.feature-card{display:block;color:inherit}
.edu-article a.feature-card:hover{text-decoration:none;background:var(--panel-hover)}
.edu-article div.feature-card{border-left:1px solid var(--line)}

/* tables and code scroll inside their own box, never the page */
.edu-article table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.edu-article pre,.edu-article .example-box{max-width:100%;overflow-x:auto}
.edu-article code,.edu-article kbd,.edu-article pre,.edu-article .example-box{font-family:var(--mono)}
.edu-article th,.edu-article td{vertical-align:top}
.edu-article caption{color:var(--muted);text-align:left;padding:.5rem 0}

/* inline notes and generic callouts used by a few chapters */
.edu-article blockquote{margin:1.25rem 0;padding:.9rem 1.25rem;border-left:4px solid var(--brand);background:var(--panel);border-radius:0 10px 10px 0;color:var(--ink)}
.edu-article blockquote p:last-child{margin-bottom:0}
.edu-article hr{border:0;border-top:1px solid var(--line);margin:2rem 0}

@media (max-width:620px){
  .edu-article{font-size:16px}
  .edu-article .page-wrapper{padding:1.25rem 14px 3rem}
  .edu-article h2{font-size:1.4rem}
  .edu-article .chapter-nav a{width:100%}
  .edu-article .chapter-nav .next,.edu-article .chapter-nav .nav-next{text-align:left}
}

/* ==== shared article components (generated from the 31 article pages; identical rules used on 3+ pages) ==== */
.edu-article .problem-block{background: var(--card-bg); border-left: 4px solid var(--primary); padding: 1.5rem 1.75rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0 2rem}
.edu-article .problem-block p:last-child{margin-bottom: 0}
.edu-article .challenge-stats{display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.5rem 0}
.edu-article .stat-item{background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; text-align: center}
.edu-article .feature-card-header{display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem}
.edu-article .feature-number{width: 32px; height: 32px; border-radius: 50%; background: var(--primary-dim); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0}
.edu-article .feature-card-header h3{margin: 0; font-size: 1.05rem}
.edu-article .feature-card .highlight{color: var(--text); font-weight: 500}
.edu-article .arch-diagram{margin: 2rem 0}
.edu-article .arch-layer{background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; margin-bottom: 0}
.edu-article .arch-layer:first-child{border-radius: 10px 10px 0 0}
.edu-article .arch-layer:last-child{border-radius: 0 0 10px 10px}
.edu-article .arch-layer:not(:last-child){border-bottom: none}
.edu-article .arch-layer-label{font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; margin-bottom: 0.5rem}
.edu-article .arch-layer-label.frontend{color: var(--accent-green)}
.edu-article .arch-layer-label.api{color: var(--accent-orange)}
.edu-article .arch-layer-label.storage{color: var(--accent-purple)}
.edu-article .arch-items{display: flex; flex-wrap: wrap; gap: 0.5rem}
.edu-article .arch-item{background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem 0.75rem; font-size: 0.85rem; color: var(--text)}
.edu-article .arch-connector{text-align: center; padding: 0.35rem 0; color: var(--border); font-size: 1.2rem; background: var(--card-bg); border-left: 1px solid var(--border); border-right: 1px solid var(--border)}
.edu-article .reading-guide{margin: 1.5rem 0}
.edu-article .reading-guide-item{display: flex; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); align-items: baseline}
.edu-article .reading-guide-item:last-child{border-bottom: none}
.edu-article .reading-guide-desc{color: var(--text-muted); font-size: 0.95rem}
.edu-article .mantra-block{background: var(--card-bg); border-left: 4px solid var(--accent-orange); padding: 1.5rem 1.75rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0 2rem; text-align: center}
.edu-article .mantra-block .mantra{font-size: 1.15rem; color: var(--ink); font-style: italic; font-weight: 500; line-height: 1.5}
.edu-article .mantra-block .mantra-caption{margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-muted)}
.edu-article figure.fig-wrap{margin: 1.75rem 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border)}
.edu-article figure.fig-wrap img{display: block; width: 100%; height: auto}
.edu-article figure.fig-wrap figcaption{font-size: 0.82rem; color: var(--text-muted); font-style: italic; text-align: center; padding: 0.7rem 1rem; background: var(--card-bg); line-height: 1.5}
.edu-article .diagram-wrap{background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1.75rem 1rem 1.25rem; margin: 1.75rem 0; text-align: center; overflow-x: auto}
.edu-article .diagram-wrap .mermaid{display: inline-block; min-width: 100%}
.edu-article .overview-block{background: var(--card-bg); border-left: 4px solid var(--primary); padding: 1.5rem 1.75rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0 2rem}
.edu-article .overview-block p:last-child{margin-bottom: 0}
.edu-article .feature-icon{width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; flex-shrink: 0}
.edu-article .feature-icon.shape{background: rgba(255,92,138,0.15); color: var(--primary)}
.edu-article .feature-icon.look{background: rgba(156, 39, 176, 0.15); color: var(--accent-purple)}
.edu-article .feature-icon.physics{background: rgba(66, 165, 245, 0.15); color: var(--accent-blue)}
.edu-article .feature-icon.code{background: rgba(253, 216, 53, 0.15); color: var(--accent-yellow)}
.edu-article .feature-icon.own{background: rgba(76, 175, 80, 0.15); color: var(--accent-green)}
.edu-article .ability-list{list-style: none; margin-top: 0.75rem; padding: 0}
.edu-article .ability-list li{padding: 0.35rem 0; font-size: 0.9rem; color: var(--text-muted); border-bottom: 1px solid rgba(239,232,234,0.07)}
.edu-article .ability-list li:last-child{border-bottom: none}
.edu-article .ability-list li strong{color: var(--text); font-weight: 600}
.edu-article .behavior-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0}
.edu-article .behavior-card{background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem}
.edu-article .behavior-card-title{font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-bottom: 0.35rem}
.edu-article .behavior-card-desc{font-size: 0.82rem; color: var(--text-muted); line-height: 1.5}
.edu-article .tips-block{background: var(--card-bg); border: 1px solid var(--primary); border-radius: 10px; padding: 1.5rem 1.75rem; margin: 1.5rem 0}
.edu-article .tips-block h3{color: var(--primary); margin: 0 0 0.5rem}
.edu-article .tips-block ul{list-style: none; padding: 0; margin-top: 0.5rem}
.edu-article .tips-block ul li{padding: 0.3rem 0; font-size: 0.9rem; color: var(--text-muted)}
.edu-article .tips-block ul li::before{content: "-- "; color: var(--primary)}
.edu-article .targeting-steps{list-style: none; padding: 0; margin: 1rem 0 1.5rem; counter-reset: step}
.edu-article .targeting-steps li{counter-increment: step; padding: 0.6rem 0 0.6rem 2.5rem; position: relative; font-size: 0.95rem; color: var(--text-muted); border-bottom: 1px solid rgba(239,232,234,0.07)}
.edu-article .targeting-steps li:last-child{border-bottom: none}
.edu-article .targeting-steps li::before{content: counter(step); position: absolute; left: 0; top: 0.55rem; width: 24px; height: 24px; border-radius: 50%; background: var(--primary-dim); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700}
.edu-article .targeting-steps li strong{color: var(--text)}
.edu-article .figure{background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; margin: 1.5rem 0; text-align: center}
.edu-article .figure-caption{font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-top: 0.85rem; text-align: center}
.edu-article .figure-caption strong{color: var(--primary); font-weight: 600}
.edu-article .intro{font-size: 1.05rem; color: var(--text); max-width: 780px; margin-bottom: 3rem}
.edu-article .intro p{margin-bottom: 0.75rem}
.edu-article .section-heading{font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border)}
.edu-article .card-grid{display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 3rem}
.edu-article .feature-card .card-title{font-size: 1.1rem; font-weight: 600; color: var(--ink); margin-bottom: 0.35rem}
.edu-article .feature-card .card-desc{font-size: 0.92rem; color: var(--text-muted); line-height: 1.5}
.edu-article .callout .callout-heading{font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 0.5rem}
.edu-article .flywheel{background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem 1.75rem; margin: 1.5rem 0; text-align: center}
.edu-article .flywheel-steps{display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; align-items: center}
.edu-article .flywheel-step{background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 1rem; font-size: 0.9rem; color: var(--text)}
.edu-article .flywheel-arrow{color: var(--primary); font-size: 1.2rem; font-weight: 700}
@media (max-width: 600px){
  .edu-article .challenge-stats{grid-template-columns: 1fr 1fr}
  .edu-article .behavior-grid{grid-template-columns: 1fr}
  .edu-article .flywheel-steps{flex-direction: column}
}
@media (min-width: 640px){
  .edu-article .card-grid{grid-template-columns: 1fr 1fr}
}