/* ══════════════════════════════════════════════════════════════════════
    freecoding.school · UNIFIED COMIC THEME
    one stylesheet shared by index.html, the 21 lane hubs and every one
    of the 1,168 static lesson pages — so the whole site is one look.

    art direction · GINTAMA (manga ink, screentone, focus lines)
                  × RICK AND MORTY (portal green, wobbly energy)
    ══════════════════════════════════════════════════════════════════ */
:root{
  /* manga paper + ink */
  --paper:#f7f4ea; --paper-2:#efe9d9; --card:#fffdf7;
  --ink:#0d0d0d; --ink-2:#2e2e33; --dim:#6d6a62; --hairline:#ddd6c4;
  /* gintama */
  --gin-red:#d7263d; --gin-silver:#c9d6e4; --gin-blue:#25355e;
  /* rick and morty */
  --portal:#97ce4c; --portal-2:#c6f24e; --slime:#39ff14;
  --rm-cyan:#24d3ee; --rm-yellow:#f0e14a; --rm-pink:#ff5ea8; --rm-lab:#0f1d24;
  /* platform accents */
  --g-blue:#4285F4; --g-red:#EA4335; --g-yellow:#FBBC05; --g-green:#34A853;
  --ig-soft:linear-gradient(45deg,#fa7e1e,#d62976,#962fbf);
  --pow:#ffd21f; --ok:#1fbf6b;
  --done:#2b7a1d; --done-2:#2b8c46; --done-bg:#eaffd8; --done-soft:#eaffd0; --done-txt:#3f8c1f;
  --dk-1:#0b0b10; --dk-2:#15151d; --dk-3:#26262f; --dk-txt:#e8e8f2; --dk-dim:#9a9aa3; --dk-dim-2:#6e6e7c;
  --tint-warm:#fffbe0; --tint-rose:#ffe4ea; --tint-grey:#ececf1; --bulb-2:#ff9d00;
  --frame:14px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --comic-font:'Bangers','Arial Black','Segoe UI',cursive;
  --mono:ui-monospace,'Cascadia Code','Consolas',Menlo,monospace;
  /* legacy aliases · older markup on these pages still names these */
  --bg:var(--paper); --panel:var(--card); --line:var(--ink);
  --text:var(--ink); --muted:var(--dim); --acc:var(--gin-blue);
  --good:var(--ok); --warn:var(--gin-red);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
body{margin:0;padding:var(--frame);background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(13,13,13,.055) 1.1px,transparent 1.1px);background-size:7px 7px}
::selection{background:var(--portal);color:var(--ink)}

/* the fixed comic page frame, same as the app */
body::before{content:'';position:fixed;inset:0;z-index:90;pointer-events:none;
  border:var(--frame) solid var(--ink);
  box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 5.5px var(--ink), inset 0 0 70px rgba(13,13,13,.09)}

.wrap{max-width:880px;margin:0 auto;padding:26px 20px 70px}
a{color:var(--gin-blue);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline;text-decoration-thickness:2px}

/* site bar */
.sitebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:3.5px solid var(--ink);border-radius:14px;background:var(--card);
  padding:9px 16px;box-shadow:5px 5px 0 var(--ink);margin-bottom:20px}
.sitebar .logo-dots{display:flex;gap:3px}
.sitebar .logo-dots i{width:9px;height:9px;border-radius:50%;display:block;border:1.5px solid var(--ink)}
.sitebar .logo-dots i:nth-child(1){background:var(--g-blue)} .sitebar .logo-dots i:nth-child(2){background:var(--g-red)}
.sitebar .logo-dots i:nth-child(3){background:var(--g-yellow)} .sitebar .logo-dots i:nth-child(4){background:var(--g-green)}
.sitebar .bn{font-weight:900;letter-spacing:-.02em;font-size:16px;color:var(--ink)}
.sitebar .bn b{background:var(--ig-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
.sitebar .sp{flex:1}
.sitebar .tagpill{font-family:var(--comic-font);font-size:13px;letter-spacing:.08em;background:var(--pow);
  color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:1px 12px;box-shadow:2px 2px 0 var(--ink)}

/* breadcrumb */
nav.crumb{font-size:12.5px;color:var(--dim);margin-bottom:16px;font-weight:700}
nav.crumb a{color:var(--ink-2)} nav.crumb a:hover{color:var(--gin-red)}

/* headings */
h1{font-family:var(--comic-font);font-weight:400;font-size:clamp(30px,5.6vw,50px);line-height:1.02;
  letter-spacing:.02em;margin:0 0 14px;text-transform:uppercase;
  text-shadow:3px 3px 0 rgba(13,13,13,.19)}
h2{font-family:var(--comic-font);font-weight:400;font-size:26px;letter-spacing:.04em;text-transform:uppercase;
  margin:32px 0 10px;color:var(--ink)}
h3.chap{font-family:var(--comic-font);font-weight:400;font-size:21px;color:var(--ink);
  margin:28px 0 8px;text-transform:uppercase;letter-spacing:.05em}

/* issue plate (the comic cover strip on lesson pages) */
.plate{border:4px solid var(--ink);border-radius:20px;background:var(--lg,var(--ig-soft));color:#fff;
  position:relative;overflow:hidden;box-shadow:8px 8px 0 var(--ink);padding:22px 24px;margin:0 0 24px}
.plate::before{content:'';position:absolute;inset:0;opacity:.22;
  background-image:radial-gradient(rgba(255,255,255,.95) 1.5px,transparent 1.5px);background-size:12px 12px}
.plate .row{position:relative;display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.plate .series{font-family:var(--comic-font);font-size:15px;letter-spacing:.08em;background:#fff;color:var(--ink);
  padding:1px 13px;border-radius:999px;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg)}
.plate .issue{font-family:var(--comic-font);font-size:14px;letter-spacing:.07em;background:var(--pow);color:var(--ink);
  padding:1px 12px;border-radius:999px;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(2deg)}
.plate h1{position:relative;margin:0;color:#fff;text-shadow:3px 3px 0 var(--ink),6px 6px 0 rgba(0,0,0,.22)}
.plate .cast{position:relative;margin-top:12px;font-size:12.5px;font-weight:800}
.plate .cast .vs{font-family:var(--comic-font);font-size:18px;color:var(--pow);margin:0 6px}

/* tl;dr as the hero's speech bubble */
.tldr{position:relative;background:var(--card);border:4px solid var(--ink);border-radius:18px;
  padding:16px 20px;margin:20px 0;box-shadow:6px 6px 0 var(--ink);font-size:15.5px;font-weight:600;line-height:1.65}
.tldr b{display:block;font-family:var(--comic-font);font-weight:400;font-size:15px;letter-spacing:.09em;
  color:var(--gin-red);margin-bottom:4px;text-transform:uppercase}

/* story article = comic panel */
article{background:var(--card);border:4px solid var(--ink);border-radius:16px;box-shadow:7px 7px 0 var(--ink);
  padding:22px 24px;margin:26px 0;position:relative;font-size:15.5px;line-height:1.8;font-weight:500}
article::before{content:'THE STORY';position:absolute;top:-15px;left:16px;font-family:var(--comic-font);
  font-size:15px;letter-spacing:.08em;background:var(--pow);color:var(--ink);border:3px solid var(--ink);
  border-radius:8px;padding:0 13px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-1.5deg)}
article p{margin:12px 0} article p:first-child{margin-top:4px} article p:last-child{margin-bottom:0}
article code,.pts code{background:var(--rm-lab);color:var(--slime);padding:2px 8px;border-radius:6px;
  font-size:.87em;font-family:var(--mono)}
article em{font-style:normal;color:var(--gin-blue);font-weight:800}
article b{color:var(--gin-red)}

/* key points = power-ups */
ul.pts{margin:10px 0;padding:0;list-style:none}
ul.pts li{margin:9px 0;padding-left:30px;position:relative;font-size:14.5px;font-weight:600;line-height:1.6}
ul.pts li::before{content:'\26A1';position:absolute;left:0;top:0;font-size:17px}
h2+ul.pts{border:4px solid var(--ink);border-radius:18px;background:linear-gradient(150deg,var(--tint-warm),var(--card));
  box-shadow:7px 7px 0 var(--ink);padding:18px 22px}
/* common mistakes = villain attack */
ul.pts.mistakes{background:linear-gradient(150deg,#1a0710,#0d1a12);color:var(--tint-rose);
  border:4px solid var(--ink);box-shadow:7px 7px 0 var(--gin-red);border-radius:18px;padding:18px 22px}
ul.pts.mistakes li{font-weight:500}
ul.pts.mistakes li::before{content:'\1F4A5'}
ul.pts.mistakes code{background:#000;color:var(--slime)}

/* try-it = boss battle */
.challenge{border:5px solid var(--ink);border-radius:20px;padding:22px 24px;margin:26px 0;position:relative;
  color:#fff;background:var(--lg,linear-gradient(135deg,#962fbf,#d62976));box-shadow:9px 9px 0 var(--ink);
  overflow:hidden;font-size:15.5px;font-weight:600;line-height:1.7}
.challenge::before{content:'';position:absolute;inset:0;opacity:.17;
  background-image:radial-gradient(#fff 1.4px,transparent 1.4px);background-size:11px 11px}
.challenge b{position:relative;display:inline-block;font-family:var(--comic-font);font-weight:400;font-size:16px;
  letter-spacing:.08em;background:var(--gin-red);color:#fff;border:3px solid var(--ink);border-radius:8px;
  padding:0 12px;box-shadow:3px 3px 0 var(--ink);margin-right:8px;text-transform:uppercase}

/* example code = training ground */
pre{background:var(--dk-1);border:4px solid var(--ink);border-radius:16px;box-shadow:7px 7px 0 var(--ink);
  padding:18px;overflow-x:auto;font-size:13px;line-height:1.6;color:var(--dk-txt);font-family:var(--mono);
  position:relative;margin:22px 0}
pre code{background:none;border:none;padding:0;color:inherit;font-size:inherit}

/* CTA */
.cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(120deg,var(--portal),var(--slime));
  color:var(--ink);font-weight:800;font-size:15px;padding:12px 24px;border:3.5px solid var(--ink);border-radius:14px;
  box-shadow:5px 5px 0 var(--ink);margin:22px 0 8px;transition:transform .12s,box-shadow .12s}
.cta:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.cta:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}

/* prev / next */
.pn{display:flex;justify-content:space-between;gap:12px;margin-top:32px;padding-top:18px;
  border-top:3px dashed var(--ink);font-size:14px;font-weight:700;flex-wrap:wrap}
.pn a{display:inline-block;background:var(--card);border:3px solid var(--ink);border-radius:12px;
  padding:8px 14px;box-shadow:4px 4px 0 var(--ink);color:var(--ink)}
.pn a:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}

/* lane / chapter cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:16px 0}
.card{background:var(--card);border:3px solid var(--ink);border-radius:13px;padding:12px 14px;font-size:14px;
  font-weight:700;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.card:hover{transform:translate(-2px,-2px) rotate(-.7deg);box-shadow:6px 6px 0 var(--ink)}
.card a{color:var(--ink)}
.card .n{color:var(--gin-red);font-family:var(--comic-font);font-size:15px;letter-spacing:.04em;font-weight:400}

/* lane hub specifics */
.lane-plate{border:5px solid var(--ink);border-radius:24px;background:var(--lg);color:#fff;position:relative;
  overflow:hidden;box-shadow:10px 10px 0 var(--ink);padding:30px 28px;margin:0 0 26px}
.lane-plate::before{content:'';position:absolute;inset:0;opacity:.2;
  background-image:radial-gradient(rgba(255,255,255,.95) 1.5px,transparent 1.5px);background-size:12px 12px}
.lane-plate .lw{position:relative;font-family:var(--comic-font);font-size:15px;letter-spacing:.13em;
  text-transform:uppercase;background:rgba(0,0,0,.4);display:inline-block;padding:2px 14px;border-radius:999px;
  border:2.5px solid #fff}
.lane-plate h1{position:relative;color:#fff;margin:12px 0 8px;text-shadow:4px 4px 0 var(--ink)}
.lane-plate p{position:relative;font-size:15px;font-weight:600;max-width:600px;margin:0;line-height:1.6}
.stat-row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 24px}
.stat-row .s{background:var(--card);border:3px solid var(--ink);border-radius:13px;padding:10px 16px;
  box-shadow:4px 4px 0 var(--ink);text-align:center;min-width:104px}
.stat-row .s .v{font-family:var(--comic-font);font-size:26px;line-height:1;color:var(--gin-red)}
.stat-row .s .k{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:2px}

/* the crawlable all-lanes index every page carries */
.lanenav{border:3.5px dashed var(--ink);border-radius:18px;background:var(--card);padding:18px 20px;margin:32px 0 0;
  box-shadow:5px 5px 0 rgba(13,13,13,.16)}
.lanenav h2{margin:0 0 10px;font-size:20px}
.lanenav ul{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:6px}
.lanenav li{margin:0}
.lanenav a{font-size:13px;font-weight:700;color:var(--ink-2);display:block;padding:4px 8px;border-radius:8px}
.lanenav a:hover{background:var(--pow);color:var(--ink);text-decoration:none}

footer{color:var(--dim);font-size:12.5px;margin-top:36px;border-top:3px dashed var(--ink);padding-top:18px;
  font-weight:600;line-height:1.8}
footer b{color:var(--gin-red)}

@media(max-width:640px){
  h1{font-size:clamp(26px,8vw,38px)}
  article,.tldr,.challenge{padding:16px 16px}
  .plate,.lane-plate{padding:20px 18px}
}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }