/* new2coding, "Terminal": dark shell, one green accent, mono for structure and Plex Sans for reading. */
:root{
  --bg:#0d0f0e; --raise:#141716; --sunk:#111312; --hover:#1a1e1c;
  --line:#242a27; --line-2:#333a36; --line-hi:#4a524e;
  --fg:#e6ebe8; --soft:#c3ccc7; --muted:#8a958f; --dim:#5d6762;
  --accent:oklch(0.85 0.17 150);
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --max:1200px; --gut:24px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--accent)}
a:hover{color:var(--fg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input::placeholder{color:var(--dim)}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:max(var(--gut),env(safe-area-inset-left))}
.accent{color:var(--accent)}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.comment{font-family:var(--mono);font-size:14px;color:var(--accent);margin:0}
.h2{font-family:var(--mono);font-size:34px;font-weight:800;letter-spacing:-.04em;margin:0;line-height:1.1}
.lede{font-size:20px;line-height:1.55;color:var(--muted);max-width:500px;margin:0 0 36px;text-wrap:pretty}

/* header */
.head{position:sticky;top:0;z-index:10;background:rgba(13,15,14,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.head-in{padding-block:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--fg);text-decoration:none}
.logo:hover{color:var(--fg)}
.nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;font-family:var(--mono)}
.nav a{padding:8px 14px;border-radius:6px;font-size:15px;color:var(--soft);text-decoration:none}
.nav a:hover,.nav a[aria-current]{background:var(--raise);color:var(--fg)}
.nav a.nav-random{padding:7px 14px;font-weight:700;color:var(--accent);border:1.5px solid var(--accent);margin-left:6px}
.nav a.nav-random:hover{background:var(--accent);color:var(--bg)}

/* buttons */
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--mono);font-size:16px;padding:14px 22px;border-radius:6px;text-decoration:none;cursor:pointer}
.btn-solid{background:var(--accent);color:var(--bg);font-weight:700}
.btn-solid:hover{background:var(--fg);color:var(--bg)}
.btn-line{background:var(--raise);border:1px solid var(--line);color:var(--fg);font-weight:500}
.btn-line:hover{border-color:var(--line-hi);color:var(--fg)}

/* hero */
.hero{padding-block:88px 80px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:56px;align-items:center}
.hero-title{font-family:var(--mono);font-size:clamp(42px,6vw,78px);line-height:1.02;letter-spacing:-.05em;font-weight:800;margin:18px 0 26px;text-wrap:balance}
.term{background:var(--raise);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-family:var(--mono)}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.term-bar i{width:11px;height:11px;border-radius:50%;background:#3a403d}
.term-bar span{flex:1;text-align:center;font-size:13px;color:var(--dim);padding-right:57px}
.term-body{padding:24px 22px 28px;font-size:15px;line-height:1.9;display:flex;flex-direction:column;white-space:pre-wrap;overflow-wrap:anywhere}
.term-body .gap{height:12px}
.prompt{display:flex;align-items:center;gap:8px}
.cursor{display:inline-block;width:10px;height:19px;background:var(--accent);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* sections */
.block{padding-block:40px 80px}
.block-last{padding-bottom:96px}
.block-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:28px;flex-wrap:wrap;font-family:var(--mono)}
.block-head a{font-size:15px;text-decoration:none}
.block-title{margin-bottom:28px}

/* article cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.card{background:var(--raise);border:1px solid var(--line);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:12px;color:var(--fg);text-decoration:none;transition:border-color .15s}
.card:hover{border-color:var(--accent);color:var(--fg)}
.card-path{font-family:var(--mono);font-size:13px;color:var(--accent);margin:0;overflow-wrap:anywhere}
.card-title{font-size:21px;font-weight:600;line-height:1.25;letter-spacing:-.01em;text-wrap:pretty}
.card-hook{font-size:16px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.card-meta{font-family:var(--mono);font-size:13px;color:var(--dim);margin-top:auto}

/* topics */
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px}
.topic{border-radius:8px;padding:22px;background:var(--sunk);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-height:170px;color:var(--fg);text-decoration:none}
.topic:hover{background:var(--hover);color:var(--fg)}
.topic-hex,.topic-count{font-family:var(--mono);font-size:13px;color:var(--dim)}
.topic-slug{font-family:var(--mono);font-size:21px;font-weight:700;letter-spacing:-.03em;margin-top:auto;color:var(--accent);overflow-wrap:anywhere}
.topic-desc{font-size:15px;line-height:1.45;color:var(--muted)}

/* README */
.readme{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.readme-bar{padding:12px 20px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px;color:var(--dim);background:var(--raise)}
.readme-body{padding:clamp(28px,5vw,52px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:48px}
.readme-title{margin-bottom:18px}
.readme-body p{font-size:18px;line-height:1.6;color:var(--muted);margin:0;text-wrap:pretty}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.steps li{display:flex;gap:18px;align-items:flex-start}
.step-n{flex:none;font-family:var(--mono);font-weight:700;font-size:16px;color:var(--accent);padding-top:3px}
.steps b{display:block;font-size:20px;font-weight:600}
.steps span:not(.step-n){display:block;font-size:16px;color:var(--muted);margin-top:4px}

/* browse, topics, friends, 404 */
.page{padding-block:64px 96px}
.page-title{font-family:var(--mono);font-size:clamp(44px,6vw,68px);font-weight:800;letter-spacing:-.05em;margin:0 0 32px;line-height:1.05;overflow-wrap:anywhere}
.comment+.page-title{margin-top:14px}
.page-blurb{font-size:18px;color:var(--muted);margin:-16px 0 32px;max-width:640px}
.search{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;font-family:var(--mono)}
.search input{flex:1 1 280px;min-width:0;padding:14px 18px;border-radius:6px;background:var(--raise);border:1px solid var(--line);color:var(--fg);font:inherit;font-size:16px}
.search input:focus{border-color:var(--accent);outline:none}
.search .btn{font-size:15px;padding:12px 20px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px;font-family:var(--mono)}
.filters a{padding:8px 14px;border-radius:6px;font-weight:500;font-size:14px;background:var(--raise);color:var(--soft);border:1px solid var(--line);text-decoration:none;text-transform:lowercase}
.filters a:hover{border-color:var(--line-hi);color:var(--fg)}
.filters a[aria-current]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.results{font-family:var(--mono);font-size:14px;color:var(--dim);margin-bottom:16px}
.empty{padding:56px 24px;border-radius:8px;border:1px dashed var(--line-2);text-align:center;font-family:var(--mono)}
.empty p{font-size:18px;margin:0 0 12px}
.pages{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:48px;flex-wrap:wrap;font-family:var(--mono)}
.pages-step{padding:10px 16px;border-radius:6px;color:var(--soft);border:1px solid var(--line);text-decoration:none}
.pages-step.off{color:var(--dim)}
.pages-n{width:44px;height:44px;border-radius:6px;display:grid;place-items:center;font-weight:700;background:var(--raise);color:var(--soft);text-decoration:none}
.pages-n[aria-current]{background:var(--accent);color:var(--bg)}

/* article */
.intro{border-bottom:1px solid var(--line)}
.intro-in{padding-block:48px 36px}
.intro-in>*{max-width:880px}
.intro-in .card-path a{text-decoration:none}
.intro-title{font-family:var(--mono);font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-.045em;line-height:1.08;margin:14px 0 14px;text-wrap:balance}
.intro-meta{font-family:var(--mono);font-size:14px;color:var(--dim);margin:0}
.intro-hook{font-size:19px;line-height:1.6;color:var(--soft);margin-top:24px;max-width:68ch}
.intro-hook p{margin:0 0 .8em}
.intro-hook em{color:var(--fg)}
.tags{list-style:none;display:flex;gap:6px;flex-wrap:wrap;margin:20px 0 0;padding:0;font-family:var(--mono)}
.tags a{display:inline-block;padding:4px 10px;border-radius:4px;font-size:13px;background:var(--raise);color:var(--soft);text-decoration:none}
.tags a:hover{color:var(--accent)}
.dive-frame{display:block;width:100%;height:80vh;border:0;background:var(--bg)}
.dive-boxed{padding-block:40px}
.dive-boxed .dive-frame{max-width:760px;height:600px}
.quiz,.sources{padding-block:40px}
.quiz>*,.sources>*{max-width:820px}
.quiz .h2,.sources .h2{font-size:26px;margin-bottom:20px}
.q{border:1px solid var(--line);border-radius:8px;padding:20px;margin:0 0 14px;background:var(--raise)}
.q legend{font-size:18px;font-weight:600;padding:0 6px}
.opts{display:grid;gap:8px;margin-top:8px}
.opt{display:flex;gap:12px;align-items:center;text-align:left;font:inherit;font-size:16px;color:var(--fg);background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:12px 14px;cursor:pointer}
.opt:hover{border-color:var(--line-hi)}
.opt-key{font-family:var(--mono);font-size:13px;color:var(--dim)}
.opt.right{border-color:var(--accent)}
.opt.right .opt-key{color:var(--accent)}
.opt.wrong{border-color:#c4655a}
.why{color:var(--muted);margin:12px 0 0}
.sources ul{margin:0;padding-left:20px;color:var(--muted)}
.sources li{margin-bottom:8px}
.sources span{font-family:var(--mono);font-size:13px;color:var(--dim)}
.pager{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding-block:40px 64px;margin-top:24px}
.pager-link{display:flex;flex-direction:column;gap:4px;color:var(--fg);text-decoration:none;font-weight:600}
.pager-link small{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--dim)}
.pager-link:hover{color:var(--accent)}
.pager-link.next{text-align:right}
@media (max-width:700px){
  .pager{grid-template-columns:1fr}
  .pager-link.next{text-align:left}
  .hero{padding-block:56px 48px}
}

/* footer */
.foot{border-top:1px solid var(--line)}
.foot-in{padding-block:32px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:14px;color:var(--dim)}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a{color:var(--dim);text-decoration:none}
.foot-links a:hover{color:var(--fg)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}