/* ═══════════════════════════════════════════════════════════
   AWESOME — Personal OS design system (see DESIGN.md in Charlie0113-T.github.io)
   Black & White · Semi-Transparent · Structured · 2px radius
   Tokens copied from stickmancharles.com style.css:36-88 (dark, light)
   and the noise overlay from style.css:128-136; keep in sync.
   ═══════════════════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:           #000000;
  --text-primary: #FFFFFF;
  --text-secondary: #AAAAAA;
  --text-muted:   #555555;
  --border:       rgba(255, 255, 255, 0.12);
  --border-hover: rgba(255, 255, 255, 0.25);
  --glass-bg:     rgba(255, 255, 255, 0.055);
  --glass-hover:  rgba(255, 255, 255, 0.085);
  --font:         'Inter', 'Helvetica Neue', Arial, sans-serif;
  --max-w:        1120px;
  --pad:          clamp(24px, 5vw, 64px);
  --radius:       2px;
  --transition:   0.25s ease;
  /* theme-sensitive surfaces */
  --nav-bg:              rgba(0, 0, 0, 0.75);
  --panel-bg:            #0a0a0a;
  --reader-bg:           #000000;
  --efr-bar-bg:          rgba(0, 0, 0, 0.92);
  --backdrop-bg:         rgba(0, 0, 0, 0.72);
  --scrollbar-track:     #000;
  --scrollbar-thumb:     #333;
  --scrollbar-thumb-h:   #555;
  --selection-bg:        rgba(255, 255, 255, 0.15);
  --social-icon:         #FFFFFF;
  /* org launcher: radial hover bloom + lift shadow */
  --bloom:               rgba(255, 255, 255, 0.13);
  --tile-glow:           0 6px 28px rgba(0, 0, 0, 0.55);
}

/* ─── LIGHT THEME OVERRIDES ─── */
[data-theme="light"] {
  --bg:                  #F5F4F0;
  --text-primary:        #0A0A0A;
  --text-secondary:      #555555;
  --text-muted:          #9A9A94;
  --border:              rgba(0, 0, 0, 0.10);
  --border-hover:        rgba(0, 0, 0, 0.22);
  --glass-bg:            rgba(0, 0, 0, 0.04);
  --glass-hover:         rgba(0, 0, 0, 0.07);
  --nav-bg:              rgba(245, 244, 240, 0.88);
  --panel-bg:            #EEEDE9;
  --reader-bg:           #F5F4F0;
  --efr-bar-bg:          rgba(238, 237, 233, 0.95);
  --backdrop-bg:         rgba(0, 0, 0, 0.42);
  --scrollbar-track:     #F5F4F0;
  --scrollbar-thumb:     #C8C7C2;
  --scrollbar-thumb-h:   #A8A8A2;
  --selection-bg:        rgba(0, 0, 0, 0.10);
  --social-icon:         #000000;
  --bloom:               rgba(0, 0, 0, 0.07);
  --tile-glow:           0 6px 24px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

ul { list-style: none; }

/* ── NOISE OVERLAY ── */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

/* ═══ Awesome components. Everything below uses tokens only (DESIGN.md iron law 3). ═══ */

::selection { background: var(--selection-bg); }
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-h); }

/* Chinese key terms: <span lang="zh">值域</span> */
:lang(zh) { font-family: 'Noto Sans SC', var(--font); }

[hidden] { display: none !important; }

/* ── LAYOUT ── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

main, .site-footer { position: relative; z-index: 1; }
main { padding-top: calc(56px + clamp(48px, 9vw, 112px)); }

/* ── NAV ── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  height: 56px;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.site-logo { font-size: 13px; font-weight: 600; letter-spacing: 0.18em; }
.site-nav nav { display: flex; align-items: center; gap: 20px; }
.site-nav nav a {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  transition: color var(--transition);
}
.site-nav nav a:hover { color: var(--text-primary); }

.theme-toggle {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), transform var(--transition);
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--border-hover); transform: rotate(20deg); }
.theme-toggle svg { width: 13px; height: 13px; }

/* ── TYPE ── */
h1 { font-size: clamp(30px, 5vw, 48px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
h2 { font-size: clamp(19px, 2.6vw, 24px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
p { color: var(--text-secondary); }
strong { font-weight: 500; color: var(--text-primary); }
.lede { max-width: 60ch; margin-top: 16px; font-size: 17px; }
.eyebrow {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

/* ── GLASS CARD ── */
.card {
  position: relative;
  display: block;
  padding: 20px 22px;
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: background var(--transition), border-color var(--transition);
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.card:hover { background: var(--glass-hover); border-color: var(--border-hover); }
.card:hover::before { opacity: 1; }

.page-list { display: grid; gap: 12px; margin-top: 16px; }
.page-list p { font-size: 14px; margin-top: 4px; }

/* ── BUTTONS & INPUTS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  font: 500 13px/1.2 var(--font);
  letter-spacing: 0.04em;
  color: var(--bg);
  background: var(--text-primary);
  border: 1px solid var(--text-primary);
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity var(--transition), border-color var(--transition);
}
.btn:hover { opacity: 0.85; }
.btn-ghost { color: var(--text-primary); background: transparent; border-color: var(--border); }
.btn-ghost:hover { opacity: 1; border-color: var(--text-primary); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

input[type="text"], input[type="number"] {
  width: 7em;
  padding: 8px 10px;
  font: 400 15px var(--font);
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
input[type="range"] { width: 100%; accent-color: var(--text-primary); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 1px solid var(--text-primary);
  outline-offset: 2px;
}

/* ── INTERACTIVE PAGE PARTS ── */
.step { margin-top: 56px; }
.step > h2 + p { margin-top: 8px; max-width: 64ch; }
.stage {
  margin-top: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  touch-action: manipulation; /* pages scroll; draggable handles opt into touch-action: none */
}
.stage svg, .stage canvas { display: block; width: 100%; height: auto; }
.readout { font-family: 'Courier New', monospace; font-size: 13px; color: var(--text-secondary); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.feedback { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius); font-size: 14px; }
.feedback.is-right { color: var(--text-primary); border: 1px solid var(--text-primary); }
.feedback.is-wrong { color: var(--text-secondary); border: 1px dashed var(--text-secondary); }
.takeaway { padding-left: 16px; border-left: 2px solid var(--text-primary); color: var(--text-primary); font-size: 18px; }

/* ── FOOTER ── */
.site-footer { margin-top: 112px; padding: 28px 0 48px; border-top: 1px solid var(--border); }
.site-footer p {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── MOTION ── */
.fade-in { animation: fade-in 0.75s ease both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .theme-toggle:hover { transform: none; }
}

.empty { margin-top: 16px; font-size: 14px; color: var(--text-muted); }

/* ── SHARED PAGE CONTROLS (tokens only) ── */
.field {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Courier New', monospace; font-size: 13px; color: var(--text-secondary);
}
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg button {
  padding: 8px 12px;
  font: 400 12px/1.2 var(--font);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.seg button + button { border-left: 1px solid var(--border); }
.seg button:hover { color: var(--text-primary); }
.seg button[aria-pressed="true"] { color: var(--bg); background: var(--text-primary); }
.stage-square { max-width: 440px; }
.slider { display: block; max-width: 440px; margin-top: 16px; font-family: 'Courier New', monospace; font-size: 13px; color: var(--text-secondary); }
.slider input { display: block; margin-top: 6px; }
.readout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  margin-top: 16px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.readout-grid > div { padding: 10px 12px; background: var(--bg); }
.readout-grid dt {
  font-family: 'Courier New', monospace; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}
.readout-grid dd { font-size: 16px; font-weight: 500; color: var(--text-primary); }
.note { margin-top: 12px; max-width: 64ch; font-size: 14px; }
.case { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }

/* .seg clips outer outlines (overflow: hidden), so its focus ring is drawn inside the button. */
.seg button:focus-visible { outline-offset: -3px; }
.seg button[aria-pressed="true"]:focus-visible { outline-color: var(--bg); }