/* The room is neon. The reading surface stays quiet. */
:root {
  --ink: #10121a;
  --deep: #090a13;
  --deep-2: #131222;
  --acid: #d9ff00;
  --cyan: #4de5df;
  --cyan-soft: #99f4e8;
  --magenta: #ff4d62;
  --violet: #9a82ff;
  --paper: #f6f2ea;
  --paper-2: #eee9df;
  --surface: #14141f;
  --surface-strong: #0d0e17;
  --line: rgba(236, 232, 244, .17);
  --shadow: 0 16px 44px rgba(0, 0, 0, .24);
  --pixel: 4px;
}

body {
  color: #f5f1e8;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(ellipse at 12% 0, rgba(220, 35, 70, .14), transparent 640px),
    radial-gradient(ellipse at 97% 260px, rgba(31, 189, 195, .09), transparent 570px),
    #090a13;
}

[hidden] { display: none !important; }

body::before {
  z-index: -1;
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .3) 3px 4px);
  mix-blend-mode: normal;
}

body::after {
  height: 150px;
  opacity: .08;
  clip-path: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, #ff4d62 79px 80px),
    repeating-linear-gradient(0deg, transparent 0 39px, #ff4d62 39px 40px);
  transform: perspective(190px) rotateX(38deg) scale(1.5);
  transform-origin: center bottom;
  mask-image: linear-gradient(transparent, #000);
}

.site-header { padding: 10px 22px; background: #090a13; }
.nav-shell {
  min-height: 60px;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  background: #0b0c14;
  box-shadow: none;
  backdrop-filter: none;
}
.brand { gap: 10px; font: 900 1rem ui-monospace, monospace; letter-spacing: -.05em; }
.brand img { width: 46px; height: 46px; object-fit: contain; }
/* Keep the reading indicator away from the header; no coloured halo above it. */
.reading-progress { top: auto; bottom: 0; height: 2px; background: transparent; }
.reading-progress span { background: var(--cyan); box-shadow: none; }
.nav-actions { gap: 3px; }
.nav-actions a {
  min-height: 38px;
  padding: .45rem .6rem;
  border-color: transparent;
  background: transparent;
  font-size: .77rem;
  font-weight: 750;
}
.nav-actions a:hover { background: #ffffff0b; border-color: #ffffff25; transform: none; }
.nav-actions .nav-cta {
  background: #ff4d62 !important;
  color: #11090e !important;
  border-color: #ff4d62 !important;
  box-shadow: 0 0 15px #ff4d6220;
  padding-inline: .75rem !important;
}
.nav-search span { color: var(--cyan); }

.arcade-deck {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: min(calc(100% - 44px), var(--max));
  margin: 0 auto 8px;
  padding: 4px 0 14px;
  border-bottom: 1px solid #ffffff18;
}
.arcade-deck-copy { display: grid; gap: 4px; min-width: 0; }
.arcade-deck-label {
  color: #b7afb8;
  font: 700 .61rem ui-monospace, monospace;
  letter-spacing: .16em;
}
.arcade-deck-label i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
.arcade-deck-copy > strong {
  font: 900 clamp(1.3rem, 2.8vw, 2.05rem)/1.05 "Arial Black", Impact, sans-serif;
  letter-spacing: -.045em;
  color: #fff1ec;
  text-shadow: 0 0 16px #ff4d6225;
}
.arcade-deck-copy strong span { color: #ff6374; }
.arcade-deck-copy strong b { color: var(--cyan); font-weight: 400; }
.arcade-deck-caption { color: #b7afb8; font-size: .75rem; }

.post-hero { padding-top: 22px; padding-bottom: 34px; margin-top: 14px; }
.post-hero::after { background: linear-gradient(90deg, #090a13b3, #090a1380), linear-gradient(0deg, #090a13, transparent 55%); }
.post-hero-panel { background: #10111be8; backdrop-filter: none; box-shadow: none; border-left: 3px solid #ff4d62; }
.post-hero-panel h1, .tag-hero h1, .course-hero h1, .contact-intro h1, .about-content h1 {
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.045em;
  text-shadow: none;
}
.post-hero-panel h1 { font-size: clamp(1.8rem, 4.1vw, 3.55rem); }
.post-hero-panel p { color: #ded9dd; }
.post-content { border-top: 3px solid #ff4d62; border-radius: 3px; }
.post-content a { color: #7a2549; }
.post-content a:focus-visible, .post-content summary:focus-visible { outline-color: #7a2549; }
.article-index { background: #eae5dc; }
.article-row, .featured-card, .side-panel, .tag-hero { background: #14141f; }
.article-row h3, .related-item h3 { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 800; letter-spacing: -.025em; }
.article-row h3 a { text-decoration: none; }
.article-row h3 a:hover { text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 4px; }
.row-body p { color: #c3bdc8; }
.row-meta { font-family: ui-monospace, monospace; }
.section-heading h2, .archive-toolbar h2 { color: #f5f1e8; text-shadow: none; font-family: "Arial Black", Arial, sans-serif; letter-spacing: -.04em; }
.tag-hero { border-left: 3px solid var(--cyan); }
.tag-hero h1 { margin-bottom: 12px; }
.course-start h2, .course-program > header h2,
.course-section-index, .course-phase-heading > span, .course-phase-heading h3 { color: #f5f1e8; text-shadow: none; }
.course-start-copy, .course-phase-heading p { color: #c3bdc8; }
.course-phase { border-color: #ffffff28; }
.course-section-index, .course-phase-heading > span { color: var(--cyan); }
.course-hero h1 { font-size: clamp(2.5rem, 5.8vw, 4.8rem); }
.course-console { box-shadow: none; }
.course-facts { background: #161923; color: #f5f1e8; border-color: #4de5df4a; }
.course-facts div { border-color: #ffffff20; }
.course-facts strong { color: var(--cyan); }
.contact-intro::after { opacity: .12; }
.about-content { background: var(--paper); }
.about-side-logo { width: min(100%, 300px); height: auto; }
.about-content a { color: #7a2549; }
.about-content a:focus-visible { outline-color: #7a2549; }
.post-content :is(.course-checkpoint,.course-lesson-intro,.course-lesson-nav) a { color: var(--cyan-soft); }
.post-content :is(.course-checkpoint,.course-lesson-intro,.course-lesson-nav) :is(a,summary):focus-visible { outline-color: var(--acid); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #656477; opacity: 1; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #7a2549; box-shadow: 0 0 0 3px #7a254940; }

.site-footer { border-top: 1px solid #ff4d624a; padding-top: 24px; }
.site-footer strong { color: #ff6374; font-family: ui-monospace, monospace; }
.site-footer p { color: #aaa3b2; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.site-footer a { color: #d5ced9; font-size: .8rem; }

.archive-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.archive-search-form label { grid-column: 1 / -1; color: var(--cyan-soft); font-size: .8rem; font-weight: 750; }
.archive-search-form input { width: 100%; min-width: 0; }
.archive-search-form .button { min-height: 44px; margin: 0; }
.archive-page .filter-chip { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.archive-pagination { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.archive-pagination .filter-chip { min-width: 40px; }
.search-page .archive-search-form { max-width: 720px; }
.search-page .article-list { margin-block: 22px; }
.search-result h3 { font: 800 clamp(1.1rem, 2vw, 1.5rem)/1.2 "Helvetica Neue", Arial, sans-serif; }
.search-result h3 a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.search-result p { color: #c3bdc8; }
.search-result .card-content { padding: 22px; }
.course-related-heading h2 { margin-top: 0; font-family: "Arial Black", Arial, sans-serif; }
.course-related-heading p { color: #c3bdc8; }

@media (max-width: 1100px) and (min-width: 901px) {
  .nav-actions a { padding-inline: .35rem; font-size: .7rem; }
  .brand { font-size: .9rem; gap: 6px; }
  .brand img { width: 42px; height: 42px; }
}
@media (max-width: 900px) {
  .site-header { padding: 8px 16px; }
  .nav-shell { min-height: 58px; padding: 7px 10px; }
  .brand img { width: 42px; height: 42px; }
  .nav-actions a { min-height: 42px; font-size: .92rem; padding-inline: 12px; }
  .js .nav-actions { background: #0d0e17fc; backdrop-filter: none; }
  .arcade-deck { width: calc(100% - 32px); }
  .post-hero { padding-top: 12px; }
}
@media (max-width: 600px) {
  .arcade-deck { justify-content: center; margin-bottom: 0; padding-bottom: 8px; gap: 0; }
  .arcade-deck-copy { display: none; }
  body::after { display: none; }
  .post-hero-panel { padding: 18px; }
  .post-hero-panel h1 { font-size: clamp(1.6rem, 7.2vw, 2rem); }
  .post-meta { font-size: .72rem; }
  .post-layout { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}