/* ============================================================
   COLORS — Sticky Rice Bytes (hybrid)
   ------------------------------------------------------------
   DARK (default): "Fresh" chrome — deep nori charcoal + an
   ownable jade-mint "byte" accent (the brand's signature; byte
   is in the name). Warm rice-cream for dates.

   LIGHT ([data-theme="paper"] / .paper): "Rice Paper" reading
   surface — warm bone paper, near-black ink, nori-green primary
   with soy-rust warmth. Used for long-form article pages.

   Author UI against the SEMANTIC ALIASES at the bottom; they
   re-point per theme so most components restyle for free.
   ============================================================ */

:root {
  /* --- NORI: deep charcoal neutrals (dark base) --- */
  --nori-1000: #090a0c;   /* code wells, deepest */
  --nori-950:  #0b0d10;   /* vignette edge */
  --nori-900:  #0d0f12;   /* PAGE BACKGROUND */
  --nori-850:  #15181c;   /* surface — cards */
  --nori-800:  #1b1f24;   /* raised — chips, inputs */
  --nori-750:  #22272d;   /* hover surface */
  --nori-700:  #333a40;   /* strong border */
  --nori-600:  #454d54;   /* divider */

  --line-faint:  rgba(255, 255, 255, 0.05);
  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* --- BYTE: jade-mint signature accent --- */
  --byte-200: #c3f7e6;
  --byte-300: #86eecb;   /* glow halo */
  --byte-400: #5fe7bb;   /* links, bright */
  --byte-500: #4fe3b0;   /* PRIMARY accent */
  --byte-600: #36c194;   /* pressed / deep */
  --byte-700: #258b6b;   /* faint fills, borders */
  --byte-tint: rgba(79, 227, 176, 0.12);
  --byte-tint-strong: rgba(79, 227, 176, 0.20);

  /* --- RICE: warm cream (dates, warm details) --- */
  --rice-100: #f4eede;
  --rice-200: #ebe1c9;
  --rice-300: #e3d3ac;   /* dates / warm mono */
  --rice-400: #c9b88c;
  --rice-500: #b3a079;
  --rice-tint: rgba(227, 211, 172, 0.10);

  /* --- NORI-GREEN & RUST: the paper accents (defined here so
         they're available as tokens; used in the paper theme) --- */
  --nori-green-400: #138a74;
  --nori-green-500: #0f6b5b;
  --nori-green-600: #0c574a;
  --rust-400: #d2612f;
  --rust-500: #c0532a;
  --rust-600: #a8431f;
  --paper-bg:   #f6f1e7;
  --paper-surf: #fffdf6;
  --paper-ink:  #211e18;
  --paper-line: #ddd4c3;

  /* --- INK: text on dark --- */
  --ink-50:  #f3f6f4;
  --ink-100: #e8ebe9;
  --ink-200: #d2d6d3;    /* BODY (UI) */
  --ink-300: #9aa3a0;    /* secondary */
  --ink-400: #6b736e;    /* muted / meta */
  --ink-500: #565d58;    /* faint */
  --ink-600: #3e433f;    /* disabled */

  /* --- SEMANTIC --- */
  --fresh-400: #5fcf92;  /* success (distinct from accent) */
  --fresh-tint: rgba(95, 207, 146, 0.13);
  --soy-400:   #e5b567;  /* warning */
  --soy-tint:  rgba(229, 181, 103, 0.13);
  --chili-400: #ef6e7e;  /* danger */
  --chili-tint: rgba(239, 110, 126, 0.13);
  --info-400:  #6aa8ff;  /* info (cool blue) */
  --info-tint: rgba(106, 168, 255, 0.13);

  /* --- CODE SYNTAX (wells stay dark in both themes) --- */
  --code-bg:       #14171b;
  --code-keyword:  #f07a8a;
  --code-string:   #e5c07b;
  --code-func:     #5fe7bb;
  --code-number:   #e5b567;
  --code-comment:  #6c6d75;
  --code-punc:     #9a9ba3;
  --code-var:      #e8ebe9;

  /* ==========================================================
     SEMANTIC ALIASES (DARK) — author against these
     ========================================================== */
  --bg:              var(--nori-900);
  --bg-deep:         var(--nori-950);
  --surface:         var(--nori-850);
  --surface-raised:  var(--nori-800);
  --surface-hover:   var(--nori-750);
  --surface-well:    var(--nori-1000);

  --border:          var(--line);
  --border-faint:    var(--line-faint);
  --border-strong:   var(--line-strong);

  --accent:          var(--byte-500);
  --accent-bright:   var(--byte-400);
  --accent-deep:     var(--byte-600);
  --accent-tint:     var(--byte-tint);
  --on-accent:       #07221a;           /* dark ink on mint fill */

  --warm:            var(--rice-300);
  --warm-soft:       var(--rice-200);

  --text:            var(--ink-200);
  --text-strong:     var(--ink-100);
  --text-max:        var(--ink-50);
  --text-secondary:  var(--ink-300);
  --text-muted:      var(--ink-400);
  --text-disabled:   var(--ink-600);
  --link:            var(--byte-400);
  --link-hover:      var(--byte-300);

  --success:         var(--fresh-400);
  --warning:         var(--soy-400);
  --danger:          var(--chili-400);
  --info:            var(--info-400);
}

/* ==========================================================
   PAPER THEME — warm light reading surface.
   Apply data-theme="paper" (or class .paper) to a container.
   ========================================================== */
[data-theme="paper"],
.paper,
body.paper-page {
  --bg:             var(--paper-bg);
  --bg-deep:        #efe8da;
  --surface:        var(--paper-surf);
  --surface-raised: #f1eadb;
  --surface-hover:  #ece3d2;
  --surface-well:   #14171b;        /* code wells stay dark */

  --border:         var(--paper-line);
  --border-faint:   #e7dfce;
  --border-strong:  #cabea8;

  --accent:         var(--nori-green-500);
  --accent-bright:  var(--nori-green-400);
  --accent-deep:    var(--nori-green-600);
  --accent-tint:    rgba(15, 107, 91, 0.10);
  --on-accent:      #fffdf6;

  --warm:           var(--rust-500);
  --warm-soft:      var(--rust-400);

  --text:           #332f27;
  --text-strong:    var(--paper-ink);
  --text-max:       #1a1813;
  --text-secondary: #5c5648;
  --text-muted:     #8a8273;
  --text-disabled:  #b3a98f;
  --link:           var(--nori-green-500);
  --link-hover:     var(--nori-green-400);

  --success:        #157a5a;
  --warning:        #a8761f;
  --danger:         #c0392b;
  --info:           #2c6fb0;

  --fresh-tint:     #dff0e6;
  --soy-tint:       #f6ead3;
  --chili-tint:     #f7e0dd;
  --info-tint:      #e1ecf3;

  /* paper has no glow / vignette */
  --text-glow:      none;
  --text-glow-soft: none;
  --glow-byte:       none; /* @kind shadow */
  --glow-byte-soft:  none; /* @kind shadow */
  --glow-byte-faint: none; /* @kind shadow */
  --vignette:       none; /* @kind other */
}
/* ============================================================
   TYPOGRAPHY — Sticky Rice Bytes
   ------------------------------------------------------------
   Three voices:
     display / sans (Space Grotesk) -> wordmark, headings, UI
     serif (Spectral)               -> long-form reading prose
     mono (JetBrains Mono)          -> terminal labels, code, dates
   ============================================================ */

:root {
  /* --- families --- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  /* --- type scale (rem on 16px root) --- */
  --text-2xs:  0.6875rem;  /* 11 — tiny mono labels */
  --text-xs:   0.75rem;    /* 12 — tags, meta */
  --text-sm:   0.8125rem;  /* 13 — captions, nav */
  --text-base: 0.9375rem;  /* 15 — dense UI */
  --text-md:   1.0625rem;  /* 17 — UI body */
  --text-lg:   1.1875rem;  /* 19 — READING prose (serif) */
  --text-xl:   1.4375rem;  /* 23 — card / post titles */
  --text-2xl:  1.8125rem;  /* 29 — section lead */
  --text-3xl:  2.375rem;   /* 38 — article title */
  --text-4xl:  3rem;       /* 48 — big hero */

  /* fluid wordmark / hero */
  --text-hero:  clamp(2.25rem, 5vw, 3.5rem);
  --text-logo:  clamp(1.25rem, 2.6vw, 1.6rem);

  /* --- weights --- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* --- line heights --- */
  --leading-none:    1;
  --leading-tight:   1.14;   /* display / big titles */
  --leading-snug:    1.25;   /* card titles */
  --leading-normal:  1.55;   /* UI text */
  --leading-relaxed: 1.72;   /* READING prose */

  /* --- letter spacing --- */
  --tracking-tighter: -0.03em;  /* wordmark, large grotesk */
  --tracking-tight:   -0.015em; /* titles */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;   /* mono labels */
  --tracking-wider:   0.12em;   /* uppercase mono labels */
  --tracking-widest:  0.22em;   /* eyebrows / section ticks */
}
/* ============================================================
   SPACING, RADII & LAYOUT — Sticky Rice Bytes
   8px base grid with 4px half-steps for dense terminal UI.
   ============================================================ */

:root {
  /* --- spacing scale --- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 5rem;      /* 80 */
  --space-11: 6rem;      /* 96 */
  --space-12: 8rem;      /* 128 */

  /* --- radii (the site is tight & technical: small radii) --- */
  --radius-xs:   3px;
  --radius-sm:   5px;    /* chips, tags, inputs */
  --radius:      7px;    /* DEFAULT — buttons, cards */
  --radius-md:   10px;
  --radius-lg:   14px;   /* large panels */
  --radius-pill: 999px;

  /* --- layout widths --- */
  --content-width: 46rem;    /* 736 — reading measure */
  --prose-width:   42rem;    /* 672 — body prose */
  --wide-width:    68rem;    /* 1088 — home / list */
  --max-width:     82rem;    /* 1312 — full shell */

  /* --- gutters --- */
  --gutter:        clamp(1rem, 4vw, 3rem);   /* @kind spacing */
  --section-gap:   clamp(3rem, 7vw, 6rem);   /* @kind spacing */

  /* --- control sizing --- */
  --control-h-sm: 30px;
  --control-h:    38px;
  --control-h-lg: 46px;

  /* --- borders --- */
  --border-width: 1px;
  --border-width-strong: 2px;
  --accent-bar: 3px;     /* the left blue rule on cards / code */
}
/* ============================================================
   EFFECTS — shadows, glows, borders, textures
   ------------------------------------------------------------
   The signature glow is now a restrained JADE-MINT used on the
   cursor, focus ring, and subtle hover lift — not a heavy halo.
   Depth on the dark base comes mostly from hairline borders.
   ============================================================ */

:root {
  /* --- elevation shadows (subtle on dark) --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow:    0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  /* inset top highlight that reads as a raised surface */
  --inset-hi:  inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* --- jade-mint glows (restrained; the brand spark) --- */
  --glow-byte:       0 0 16px rgba(79, 227, 176, 0.50), 0 0 3px rgba(134, 238, 203, 0.55);
  --glow-byte-soft:  0 0 12px rgba(79, 227, 176, 0.26);
  --glow-byte-faint: 0 0 22px rgba(79, 227, 176, 0.13);
  --text-glow:       0 0 10px rgba(79, 227, 176, 0.40);
  --text-glow-soft:  0 0 7px rgba(79, 227, 176, 0.28);

  /* --- focus ring (keyboard) --- */
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), var(--glow-byte-soft);

  /* --- the left accent rule used on cards, code, callouts --- */
  --accent-rule: inset var(--accent-bar) 0 0 var(--accent);

  /* ==========================================================
     TEXTURES — set as background-image where wanted.
     ========================================================== */
  /* faint CRT scanlines — overlay at low opacity */
  --scanlines: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.018) 0px,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 3px
  ); /* @kind other */
  /* page vignette — warm center, deepening edges */
  --vignette: radial-gradient(
    120% 90% at 50% -10%,
    rgba(79, 227, 176, 0.05) 0%,
    transparent 46%
  ); /* @kind other */
  /* dotted grid for hero / empty states */
  --dot-grid: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); /* @kind other */
  --dot-grid-size: 22px 22px; /* @kind other */
}
/* ============================================================
   MOTION — Sticky Rice Bytes
   Calm and precise. Quick fades + small translates. The only
   looping motion is the terminal cursor blink. Everything
   respects prefers-reduced-motion.
   ============================================================ */

:root {
  /* durations */
  --dur-instant: 80ms; /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur:         220ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */
  --dur-slower:  560ms; /* @kind other */

  /* easings */
  --ease-out:    cubic-bezier(0.22, 0.8, 0.28, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-snap:   cubic-bezier(0.34, 1.4, 0.5, 1); /* @kind other */

  /* the terminal cursor cadence */
  --blink-rate: 1.05s; /* @kind other */
}

/* signature keyframes (available globally) */
@keyframes srb-blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes srb-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes srb-glow-pulse {
  0%, 100% { text-shadow: var(--text-glow-soft); }
  50%      { text-shadow: var(--text-glow); }
}

@keyframes srb-scan {
  from { background-position-y: 0; }
  to   { background-position-y: 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ============================================================
   BASE — light global reset + element defaults
   Applies the page background, reading defaults, selection,
   scrollbar and focus styling. Consumers get this for free.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--vignette);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* headings default to strong reading sans; brand pixel/mono
   are applied via utility classes / components, not globally */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

code, kbd, pre, samp { font-family: var(--font-mono); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--byte-tint-strong);
  color: var(--text-max);
}

hr {
  border: 0;
  border-top: var(--border-width) solid var(--border);
  margin: var(--space-6) 0;
}

/* terminal-flavoured scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--nori-700) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--nori-700);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--nori-600); }

/* ============================================================
   UTILITY CLASSES — small, brand-specific helpers
   ============================================================ */

/* the grotesk wordmark — tight, confident, low-key glow */
.srb-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--text-max);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
}

/* long-form reading prose (serif) */
.srb-read {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text);
}

/* mono terminal label, e.g. tagline, eyebrows */
.srb-mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
}

/* lowercase mono section mark, e.g. "// recent" */
.srb-section-mark {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-muted);
}
.srb-section-mark::before {
  content: "// ";
  color: var(--accent);
}

/* a blinking terminal cursor block */
.srb-cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  margin-left: 0.12em;
  vertical-align: text-bottom;
  background: var(--accent);
  box-shadow: var(--glow-byte-soft);
  animation: srb-blink var(--blink-rate) steps(1) infinite;
}

/* the "~/" prompt prefix */
.srb-prompt::before {
  content: "~/ ";
  color: var(--accent);
  font-family: var(--font-mono);
}

/* warm rice-cream mono detail (dates etc.) */
.srb-warm { color: var(--warm); font-family: var(--font-mono); }
/* ============================================================
   Sticky Rice Bytes — site component styles
   Pairs with styles.css (the design-system tokens). Load BOTH:
   styles.css first (tokens), then this. All colors reference the
   token variables so the two stay in sync.
   ============================================================ */

/* ---------- shell ---------- */
.srb-shell { max-width: var(--wide-width); margin: 0 auto; padding: 0 var(--gutter) var(--space-8); }
.srb-shell.paper { max-width: 100%; padding: 0 var(--gutter) var(--space-9); }

/* ---------- header ---------- */
.srb-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-8); margin-bottom: var(--space-8); }
.srb-wm { font-family: var(--font-display); font-weight: 700; font-size: var(--text-logo); letter-spacing: var(--tracking-tighter); color: var(--text-max); text-decoration: none; }
.srb-wm .cur { display: inline-block; width: 8px; height: 0.85em; margin-left: 5px; vertical-align: -2px; background: var(--accent); box-shadow: var(--glow-byte-soft); animation: srb-blink var(--blink-rate) steps(1) infinite; }
.srb-nav { display: flex; gap: var(--space-5); }
.srb-nav a { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.srb-nav a:hover, .srb-nav a.active { color: var(--accent-bright); }

/* ---------- footer ---------- */
.srb-footer { margin-top: var(--space-11); padding: var(--space-5) 0 var(--space-8); border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }
.srb-footer .p { color: var(--accent); }
.srb-footer a { color: var(--text-muted); text-decoration: none; }
.srb-footer a:hover { color: var(--text-secondary); }

/* ---------- home landing (boot terminal + wordmark) ---------- */
.srb-landing { min-height: calc(100vh - 232px); display: flex; flex-direction: column; justify-content: center; padding: var(--space-8) 0; }
.srb-hero .srb-term { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); }
.srb-hero-reveal { margin-top: var(--space-8); opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out); }
.srb-hero-reveal.show { opacity: 1; transform: none; }
.srb-hero-wm { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 6.5vw, 4.5rem); letter-spacing: var(--tracking-tighter); line-height: 1.02; color: var(--text-max); margin: 0 0 var(--space-5); }
.srb-hero-tag { font-family: var(--font-mono); font-size: var(--text-md); color: var(--text-secondary); margin: 0 0 var(--space-6); display: flex; align-items: center; flex-wrap: wrap; }
.srb-hero-tag .p { color: var(--accent); margin-right: 8px; }
.srb-hero-tag .srb-cur { margin-left: 4px; }
.srb-hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.srb-btn { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); padding: 12px 20px; border-radius: var(--radius); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.srb-btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 500; box-shadow: var(--glow-byte-soft); }
.srb-btn-primary:hover { background: var(--accent-bright); color: var(--on-accent); transform: translateY(-1px); }
.srb-btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-strong); }
.srb-btn-ghost .p { color: var(--accent); }
.srb-btn-ghost:hover { border-color: var(--accent); color: var(--text-strong); }
.srb-titlebar { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.015); }
.srb-dots { display: flex; gap: 7px; }
.srb-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.srb-dots i:nth-child(1) { background: var(--chili-400); }
.srb-dots i:nth-child(2) { background: var(--soy-400); }
.srb-dots i:nth-child(3) { background: var(--accent); }
.srb-tt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); }
.srb-screen { padding: 18px 20px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.85; min-height: 252px; overflow-x: auto; }
.srb-ln { white-space: pre-wrap; word-break: break-word; }
.srb-pr { color: var(--accent); }
.srb-cmd { color: var(--text-strong); }
.srb-ok { color: var(--accent); margin-right: 2px; }
.srb-bar { color: var(--accent-deep); }
.srb-bannerwrap { margin: 12px 0 8px; overflow-x: auto; }
.srb-banner { color: var(--accent); display: block; white-space: pre; line-height: 1.05; font-size: clamp(7px, 1.05vw, 10px); text-shadow: 0 0 14px rgba(79,227,176,.3); }
.srb-ready { margin-top: 6px; color: var(--text-secondary); }
.srb-clock { color: var(--text-muted); margin-right: 4px; }
.srb-cur { display: inline-block; width: 8px; height: 15px; background: var(--accent); margin-left: 8px; vertical-align: -2px; box-shadow: var(--glow-byte-soft); animation: srb-blink var(--blink-rate) steps(1) infinite; }

/* ---------- post list ---------- */
.srb-sec { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 12px; margin: 0 0 var(--space-5); }
.srb-sec::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.srb-filter { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-6); }
.srb-chip { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); background: none; border: none; padding: 3px 0; cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
.srb-chip::before { content: "/"; color: var(--byte-700); margin-right: 4px; }
.srb-chip:hover { color: var(--text-strong); }
.srb-chip:hover::before, .srb-chip.on::before { color: var(--accent); }
.srb-chip.on { color: var(--accent-bright); }
.srb-post { display: block; padding: var(--space-5) 0; border-top: 1px solid var(--border); cursor: pointer; text-decoration: none; }
.srb-post:first-of-type { border-top: none; }
.srb-post .meta { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); flex-wrap: wrap; }
.srb-post .date { color: var(--warm); letter-spacing: var(--tracking-wide); }
.srb-post .tags { display: flex; gap: 10px; color: var(--text-muted); }
.srb-post .tags span::before { content: "/"; color: var(--accent-deep); margin-right: 3px; }
.srb-post .pt { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: 0 0 9px; transition: color var(--dur-fast) var(--ease-out); }
.srb-post:hover .pt { color: var(--accent-bright); }
.srb-post .px { font-size: var(--text-base); line-height: 1.62; color: var(--text-secondary); margin: 0; max-width: 64ch; }
.srb-post .arrow { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); margin-top: 12px; opacity: 0; transform: translateX(-4px); transition: var(--dur-fast) var(--ease-out); }
.srb-post:hover .arrow { opacity: 1; transform: none; color: var(--accent); }

/* ---------- reading layout grid (rail | text | toc) ---------- */
.srb-reading {
  /* fluid: the text column (1fr) grows to fill the screen, capped by
     max-width, leaving only a slim ~40px margin. */
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 40px 80px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 210px;  /* rail | text | toc */
  column-gap: 80px;
  align-items: start;
}
.srb-railcol { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ---------- article (Rice Paper reading view) ---------- */
.srb-art { width: 100%; max-width: none; }
.srb-art .crumb { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--warm); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-3); }
.srb-art .meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); }
.srb-art .meta .date { color: var(--warm); letter-spacing: var(--tracking-wide); }
.srb-art .meta .rt { color: var(--text-muted); }
.srb-art h1 { font-family: var(--font-serif); font-size: var(--text-3xl); font-weight: 600; color: var(--text-strong); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0 0 var(--space-5); }
.srb-art .toprail { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 2px solid var(--text-strong); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.srb-art .toprail span::before { content: "/"; color: var(--accent); margin-right: 2px; }

/* prose — Hugo renders Markdown into .prose */
.prose { font-family: var(--font-serif); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text); max-width: none; }
.prose > * { margin: 0 0 var(--space-5); }
.prose h2 { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--accent); margin: var(--space-6) 0 0; scroll-margin-top: 80px; }
.prose h2::before { content: "# "; color: var(--warm); font-family: var(--font-mono); }
.prose em { color: var(--accent); }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose ul { padding-left: 0; list-style: none; }
.prose li { padding-left: var(--space-5); position: relative; }
.prose li::before { content: "→"; position: absolute; left: 0; color: var(--warm); font-family: var(--font-mono); }
.prose pre { background: var(--surface-well); color: var(--code-var); border-radius: var(--radius); border-left: var(--accent-bar) solid var(--accent); padding: 14px 16px; font-size: var(--text-base); line-height: 1.65; overflow-x: auto; }
.prose code { font-family: var(--font-mono); }
.prose :not(pre) > code { background: #ebe3d2; color: #7a3f1c; padding: 2px 6px; border-radius: 4px; font-size: 0.82em; }
.prose img, .prose video { display: block; max-width: 100%; height: auto; margin: var(--space-5) auto; border: 1px solid var(--border); border-radius: var(--radius); }
.prose figure { margin: var(--space-5) 0; }
.prose figure img { margin: 0 auto; }
.prose figcaption { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin-top: var(--space-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-base); margin: var(--space-5) 0; display: block; overflow-x: auto; }
.prose thead th { font-family: var(--font-sans); font-weight: 600; text-align: left; color: var(--text-strong); border-bottom: 2px solid var(--text-strong); padding: 8px 12px; }
.prose tbody td { border-bottom: 1px solid var(--border); padding: 8px 12px; vertical-align: top; }
.prose tbody tr:hover { background: var(--surface-raised); }
.srb-art .end { margin-top: var(--space-9); padding-top: var(--space-6); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }
.srb-art .end .more { color: var(--accent); text-decoration: none; }

/* ---------- static pages (Legal, Privacy) ---------- */
.srb-page { max-width: 680px; margin: 0 auto; }
.srb-page .srb-back { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; letter-spacing: var(--tracking-wide); display: inline-block; margin-bottom: var(--space-5); }
.srb-page .srb-back .a { color: var(--warm); }
.srb-page .srb-back:hover { color: var(--text-secondary); }
/* segmented toggle (privacy / legal) */
.srb-segtoggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-pill); margin-bottom: var(--space-6); }
.srb-segtoggle .seg { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); text-decoration: none; padding: 8px 16px; border-radius: var(--radius-pill); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); white-space: nowrap; }
.srb-segtoggle .seg:hover { color: var(--text-strong); }
.srb-segtoggle .seg.on { background: var(--accent); color: var(--on-accent); font-weight: 500; }
.srb-segtoggle .seg.on:hover { color: var(--on-accent); }
.srb-page .ruled { padding-bottom: var(--space-5); border-bottom: 2px solid var(--text-strong); margin-bottom: var(--space-3); }
.srb-page .ruled h1 { font-family: var(--font-serif); font-size: var(--text-3xl); font-weight: 600; color: var(--text-strong); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0; }
.srb-page .ruled .sub { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); letter-spacing: var(--tracking-wide); margin-top: var(--space-3); }
.srb-page-updated { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--border); line-height: 1.7; }
.prose .shout { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--warm); background: var(--surface-raised); border-left: var(--accent-bar) solid var(--warm); border-radius: var(--radius-sm); padding: 9px 14px; margin: 0 0 var(--space-4); display: block; }

/* ---------- reading progress: rail + toc + pill ---------- */
/* rail rides in the .railcol grid column (sticky), beside the text */
.srb-rail { display: flex; flex-direction: column; align-items: center; height: 60vh; }
.srb-rtrack { position: relative; flex: 1; width: 2px; background: var(--border); border-radius: 2px; }
.srb-rfill { position: absolute; top: 0; left: 0; width: 100%; background: var(--accent); border-radius: 2px; transition: height .1s linear; }
.srb-rtick { position: absolute; left: 50%; transform: translate(-50%, -50%); width: 7px; height: 7px; border-radius: 50%; background: var(--border); border: 1.5px solid var(--bg); cursor: pointer; transition: background .2s, box-shadow .2s; }
.srb-rtick.done { background: var(--accent); }
.srb-rtick.active { background: var(--warm); box-shadow: 0 0 0 3px rgba(192,83,42,.18); }
.srb-rpct { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--accent); margin-top: 12px; }
/* toc is the right grid column — sticky, beside the text */
.srb-toc { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.srb-toc .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); opacity: .7; margin-bottom: 8px; }
.srb-toc a { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.4; color: var(--text-muted); text-decoration: none; padding: 5px 0 5px 12px; border-left: 2px solid var(--border); cursor: pointer; transition: var(--dur-fast) var(--ease-out); }
.srb-toc a:hover { color: var(--text-secondary); }
.srb-toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 500; }
.srb-readout { position: fixed; bottom: 22px; right: 22px; z-index: 60; display: flex; align-items: center; gap: 9px; background: #15181c; color: #9aa3a0; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-pill); padding: 9px 15px; font-family: var(--font-mono); font-size: var(--text-xs); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.srb-readout .srb-ring { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#4fe3b0 calc(var(--p,0)*1%), rgba(255,255,255,.14) 0); }
.srb-readout .p { color: #4fe3b0; }
.srb-topbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; display: none; }
.srb-topbar .srb-topfill { height: 100%; width: 0; background: var(--accent); }

/* tablet: drop the TOC, keep the rail tight to the text */
@media (max-width: 1240px) {
  .srb-reading { grid-template-columns: 18px minmax(0, 1fr); column-gap: 48px; }
  .srb-toc { display: none; }
}
/* small tablet / large phone: single column, no rail, top progress bar */
@media (max-width: 920px) {
  .srb-reading { grid-template-columns: minmax(0, 1fr); }
  .srb-railcol { display: none; }
  .srb-topbar { display: block; }
}
/* phone: tighter padding, slightly smaller body */
@media (max-width: 560px) {
  .srb-reading { padding: 28px 20px 64px; }
  .prose { font-size: 17px; }
  .srb-readout { bottom: 12px; right: 12px; padding: 8px 12px; font-size: 11px; }
}

/* articles with fewer than 2 headings: no rail/toc, always top bar */
html.srb-flat .srb-railcol, html.srb-flat .srb-toc { display: none; }
html.srb-flat .srb-reading { grid-template-columns: minmax(0, 1fr); }
html.srb-flat .srb-topbar { display: block; }

/* ---------- about terminal ---------- */
.srb-about .srb-aterm { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); margin-top: 6px; }
.srb-ascreen { padding: 20px 20px 16px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.75; min-height: 340px; max-height: 444px; overflow-y: auto; }
.srb-aln { white-space: pre-wrap; word-break: break-word; }
.srb-acmdline { color: var(--text-strong); }
.apr { color: var(--accent); } .apath { color: var(--text-muted); }
.aout { color: var(--text-secondary); margin: 2px 0 14px; }
.aout .hl { color: var(--text-strong); }
.aout .amint, .amint { color: var(--accent); }
.aout .awarm, .awarm { color: var(--warm); }
.aout .aquote { color: var(--warm); font-style: italic; }
.aout .abul { color: var(--accent); }
.aout .abanner { color: var(--accent); display: block; white-space: pre; line-height: 1.05; font-size: clamp(7px, 1vw, 10px); overflow-x: auto; text-shadow: 0 0 14px rgba(79,227,176,.3); }
.aout a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted rgba(79,227,176,.4); }
.aout a:hover { border-bottom-style: solid; }
.aout .arow { display: flex; gap: 10px; }
.aout .ak { color: var(--accent-deep); min-width: 80px; }
.srb-ainrow { display: flex; align-items: center; gap: 8px; }
.srb-ainput { flex: 1; min-width: 40px; background: none; border: none; outline: none; color: var(--text-strong); font-family: var(--font-mono); font-size: 13.5px; caret-color: var(--accent); }
.srb-ainput:focus, .srb-ainput:focus-visible { outline: none; box-shadow: none; }
.srb-ablink { display: inline-block; width: 8px; height: 15px; background: var(--accent); vertical-align: -2px; box-shadow: var(--glow-byte-soft); animation: srb-blink var(--blink-rate) steps(1) infinite; }
.srb-acmds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.srb-acmds button { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 12px; cursor: pointer; transition: .15s var(--ease-out); }
.srb-acmds button:hover { color: var(--accent); border-color: var(--accent); }
.srb-acmds button .as { color: var(--text-muted); }
.srb-ahint { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); margin-top: 12px; }

/* ---------- code-block copy button (posts) ---------- */
.prose pre { position: relative; }
.copy-button {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 0;
  font-size: 0; background: rgba(255,255,255,.04); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); cursor: pointer; opacity: 0;
  transition: all var(--dur-fast) var(--ease-out); z-index: 10;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.copy-button::before {
  content: ''; display: block; width: 14px; height: 14px; background-size: contain;
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E");
}
.prose pre:hover .copy-button { opacity: .7; }
.copy-button:hover { opacity: 1 !important; border-color: var(--byte-500); background: var(--byte-tint); }
.copy-button:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234fe3b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E");
}
.copy-button:active { transform: scale(.95); }
.copy-button.copied { border-color: var(--byte-500); background: var(--byte-tint-strong); }
.copy-button.copied::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234fe3b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}