@layer reset, base, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-padding-top: 78px; }
  body, h1, h2, h3, h4, p, blockquote, dl, dd, ol, ul, figure { margin: 0; }
  button, input, textarea, select { font: inherit; }
  button { border: 0; }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    --bg: #090a0c;
    --bg-raised: #101216;
    --bg-soft: #15181d;
    --paper: #f4f1e9;
    --paper-dim: #b6b1a7;
    --paper-faint: #77746e;
    --line: rgba(244, 241, 233, 0.12);
    --line-strong: rgba(244, 241, 233, 0.23);
    --signal: #ff563f;
    --signal-soft: rgba(255, 86, 63, 0.14);
    --amber: #f6bd59;
    --green: #7ee09c;
    --blue: #8cb8ff;
    --state: var(--signal);
    --state-soft: var(--signal-soft);
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --max: 1260px;
    --radius: 18px;
    --shadow: 0 34px 100px rgba(0, 0, 0, 0.42);
  }

  html {
    color-scheme: dark;
    background: var(--bg);
    scroll-behavior: smooth;
  }

  body {
    min-width: 280px;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--paper);
    background:
      radial-gradient(circle at 78% -10%, rgba(255, 86, 63, 0.13), transparent 32rem),
      radial-gradient(circle at 8% 42%, rgba(140, 184, 255, 0.055), transparent 30rem),
      var(--bg);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
  }

  body[data-live-state="reset-today"],
  body[data-live-state="recent-reset"] { --state: var(--green); --state-soft: rgba(126, 224, 156, 0.13); }
  body[data-live-state="degraded"] { --state: var(--amber); --state-soft: rgba(246, 189, 89, 0.13); }

  ::selection { color: var(--bg); background: var(--paper); }
  :focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
  code, kbd { font-family: var(--mono); }
  code { padding: 0.1em 0.3em; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,0.04); font-size: 0.88em; }

  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    transform: translateY(-160%);
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--paper);
    color: var(--bg);
    font-weight: 800;
    text-decoration: none;
    transition: transform 160ms ease;
  }
  .skip-link:focus { transform: translateY(0); }

  .page-grid {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.28;
    background-image:
      linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, black, transparent 92%);
  }

  .eyebrow {
    color: var(--paper-faint);
    font: 700 0.68rem/1.2 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
  }
  .button:hover { transform: translateY(-1px); }
  .button-primary { background: var(--paper); color: var(--bg); }
  .button-primary:hover { background: #fffdf7; }
  .button-secondary { border-color: var(--line-strong); background: rgba(255,255,255,0.035); color: var(--paper); }
  .button-secondary:hover { border-color: rgba(244,241,233,0.4); background: rgba(255,255,255,0.06); }
  .text-button {
    padding: 6px 2px;
    background: transparent;
    color: var(--paper-dim);
    cursor: pointer;
    font-weight: 750;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
  }
  .text-button:hover { color: var(--paper); text-decoration-color: currentColor; }
  .text-button.danger { color: #ff8d7f; }
}

@layer components {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    min-height: 66px;
    padding: 10px max(24px, calc((100vw - var(--max)) / 2));
    border-bottom: 1px solid rgba(244,241,233,0.08);
    background: rgba(9, 10, 12, 0.86);
    backdrop-filter: blur(18px) saturate(120%);
  }
  .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); text-decoration: none; font-size: 0.9rem; }
  .brand strong { font-weight: 850; }
  .brand-with-avatar { gap: 9px; }
  .brand-avatar { width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255, 86, 63, 0.08); }
  .brand-mark { position: relative; width: 29px; height: 29px; border: 2px solid var(--signal); border-radius: 50%; }
  .brand-mark::before, .brand-mark::after, .brand-mark i::before, .brand-mark i::after { content: ""; position: absolute; background: var(--paper); }
  .brand-mark::before { width: 2px; height: 8px; left: 12px; top: -5px; }
  .brand-mark::after { width: 2px; height: 8px; left: 12px; bottom: -5px; }
  .brand-mark i::before { width: 8px; height: 2px; left: -5px; top: 12px; }
  .brand-mark i::after { width: 8px; height: 2px; right: -5px; top: 12px; }
  .primary-nav { display: flex; justify-content: center; gap: 24px; }
  .primary-nav a { color: var(--paper-dim); font-size: 0.76rem; font-weight: 750; text-decoration: none; }
  .primary-nav a:hover { color: var(--paper); }
  .header-tools { display: flex; align-items: center; gap: 12px; }
  .mini-state { display: inline-flex; align-items: center; gap: 7px; color: var(--paper-faint); font: 700 0.63rem var(--mono); text-transform: uppercase; }
  .mini-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--state); box-shadow: 0 0 14px var(--state); }
  .command-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--paper-dim); cursor: pointer; font-size: 0.7rem; }
  .command-trigger kbd { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--paper-faint); font-size: 0.6rem; }

  #main-content { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
  .calculator-hero { padding: 44px 0 72px; scroll-margin-top: 72px; }
  .live-ribbon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(16,18,22,0.68);
  }
  .live-ribbon-state { display: flex; min-width: 0; align-items: center; gap: 10px; color: var(--paper-faint); font: 600 0.68rem var(--mono); }
  .state-badge { display: inline-flex; flex: 0 0 auto; padding: 5px 7px; border: 1px solid var(--state); border-radius: 5px; background: var(--state-soft); color: var(--state); font: 800 0.64rem var(--mono); letter-spacing: 0.07em; }
  .live-ribbon > a { display: inline-flex; align-items: center; gap: 8px; color: var(--paper-dim); font-size: 0.72rem; text-decoration: none; }
  .live-ribbon > a span { color: var(--paper-faint); }
  .live-ribbon > a time { font-family: var(--mono); }
  .live-ribbon > a:hover { color: var(--paper); }

  .hero-heading { max-width: 920px; padding: 52px 0 34px; }
  .hero-heading h1 { margin-top: 12px; font-size: clamp(3.4rem, 7vw, 6.7rem); line-height: 0.91; letter-spacing: -0.075em; text-wrap: balance; }
  .hero-heading > p:last-child { max-width: 760px; margin-top: 20px; color: var(--paper-dim); font-size: clamp(1rem, 1.5vw, 1.2rem); }

  .decision-console {
    display: grid;
    grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.07fr);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 22px;
    background: rgba(16,18,22,0.82);
    box-shadow: var(--shadow);
  }
  .input-deck { min-width: 0; padding: 24px; border-right: 1px solid var(--line); }
  .result-deck { display: block; min-width: 0; padding: 30px; background: linear-gradient(145deg, rgba(255,255,255,0.025), transparent 58%), #0d0f12; }

  .scenario-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
  .scenario-tabs button { min-width: 0; min-height: 63px; padding: 10px 12px; border-radius: 8px; background: transparent; color: var(--paper-dim); cursor: pointer; text-align: left; }
  .scenario-tabs button span { display: block; font-weight: 850; }
  .scenario-tabs button small { display: block; margin-top: 3px; overflow: hidden; color: var(--paper-faint); font: 600 0.61rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
  .scenario-tabs button[aria-selected="true"] { background: var(--paper); color: var(--bg); }
  .scenario-tabs button[aria-selected="true"] small { color: #595750; }
  .mode-caption { min-height: 42px; margin-top: 10px; color: var(--paper-faint); font-size: 0.72rem; }

  .input-source-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .input-source-row > div { display: grid; gap: 2px; }
  .input-source-row span { color: var(--paper-faint); font: 600 0.6rem var(--mono); text-transform: uppercase; }
  .input-source-row strong { font-size: 0.76rem; }
  .status-import-button { padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--paper-dim); cursor: pointer; font-size: 0.72rem; font-weight: 750; }
  .status-import-button:hover { border-color: var(--paper-dim); color: var(--paper); }

  #worth-form { margin-top: 6px; }
  .primary-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .field-block { min-width: 0; padding: 18px 0; }
  .field-block label { display: block; margin-bottom: 8px; font-size: 0.78rem; font-weight: 800; }
  .field-block label span { color: var(--paper-faint); font-size: 0.65rem; text-transform: uppercase; }
  .field-block p { margin-top: 8px; color: var(--paper-faint); font-size: 0.68rem; }
  .field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .field-heading label { margin: 0; }
  .number-unit { display: inline-flex; min-width: 100px; align-items: center; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); }
  .number-unit.hours { min-width: 142px; }
  .number-unit.full { width: 100%; }
  .number-unit input { width: 68px; min-width: 0; padding: 9px 7px 9px 11px; border: 0; outline: 0; background: transparent; color: var(--paper); font: 800 0.96rem var(--mono); }
  .number-unit.hours input { width: 78px; }
  .number-unit.full input { flex: 1 1 auto; width: 80px; }
  .number-unit span { margin-left: auto; padding-right: 9px; color: var(--paper-faint); font: 700 0.65rem var(--mono); }
  #worth-used-range { width: 100%; margin-top: 13px; accent-color: var(--signal); cursor: pointer; }
  .quick-times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
  .quick-times button, .scenario-examples button { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--paper-dim); cursor: pointer; font: 700 0.65rem var(--mono); }
  .quick-times button:hover, .scenario-examples button:hover { border-color: var(--line-strong); color: var(--paper); }

  .advanced-inputs { border-top: 1px solid var(--line); }
  .advanced-inputs summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; color: var(--paper-dim); cursor: pointer; font-size: 0.75rem; font-weight: 800; list-style: none; }
  .advanced-inputs summary::-webkit-details-marker { display: none; }
  .advanced-inputs summary::after { content: "+"; color: var(--paper-faint); font: 700 1rem var(--mono); }
  .advanced-inputs[open] summary::after { content: "−"; }
  .advanced-inputs summary span { color: var(--paper-faint); font-size: 0.62rem; font-weight: 600; }
  .advanced-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding-bottom: 8px; }
  .advanced-grid .field-block { padding: 10px 0 14px; }
  .advanced-grid select, #worth-reset-at { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--paper); color-scheme: dark; }
  .five-hour-context { grid-column: 1 / -1; min-width: 0; margin: 8px 0 2px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
  .five-hour-context legend { padding: 0 7px; color: var(--paper-dim); font-size: 0.72rem; font-weight: 800; }
  .five-hour-context legend span { color: var(--paper-faint); font-size: 0.6rem; font-weight: 600; text-transform: uppercase; }
  .five-hour-fields { display: grid; grid-template-columns: 0.72fr 0.72fr 1.3fr; align-items: end; gap: 12px; }
  .five-hour-fields .field-block { padding: 4px 0; }
  .continue-toggle { display: flex !important; align-items: flex-start; gap: 10px; min-height: 60px; margin: 0 !important; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.018); cursor: pointer; }
  .continue-toggle input { flex: 0 0 auto; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--signal); }
  .continue-toggle > span { display: grid; gap: 3px; }
  .continue-toggle strong { color: var(--paper); font-size: 0.7rem; }
  .continue-toggle small { color: var(--paper-faint); font-size: 0.61rem; font-weight: 500; }
  .calculator-hero[data-mode="tibo"] .banked-only { display: none; }

  .form-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
  .scenario-examples { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px; color: var(--paper-faint); font-size: 0.64rem; }
  .form-error { margin-top: 10px; color: #ff8d7f; font-size: 0.72rem; }

  .result-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .worth-verdict { display: inline-flex; margin-top: 8px; padding: 6px 8px; border: 1px solid currentColor; border-radius: 5px; color: var(--signal); font: 850 0.72rem var(--mono); letter-spacing: 0.08em; }
  .worth-confidence { max-width: 190px; color: var(--paper-faint); font: 600 0.61rem/1.4 var(--mono); text-align: right; text-transform: uppercase; }
  .result-deck[data-state="good"] .worth-verdict,
  .result-deck[data-state="use-now"] .worth-verdict,
  .result-deck[data-state="use-later"] .worth-verdict { color: var(--green); }
  .result-deck[data-state="mixed"] .worth-verdict,
  .result-deck[data-state="hold"] .worth-verdict,
  .result-deck[data-state="use-soon"] .worth-verdict,
  .result-deck[data-state="expiry"] .worth-verdict { color: var(--amber); }
  .result-deck[data-state="wait"] .worth-verdict,
  .result-deck[data-state="watch"] .worth-verdict,
  .result-deck[data-state="neutral"] .worth-verdict { color: var(--blue); }
  .result-deck h2 { max-width: 720px; margin-top: 22px; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.05; letter-spacing: -0.045em; text-wrap: balance; }
  .result-detail { max-width: 720px; margin-top: 12px; color: var(--paper-dim); font-size: 0.88rem; }

  .runway-visual { margin-top: 28px; }
  .runway-labels { display: flex; justify-content: space-between; gap: 14px; color: var(--paper-faint); font: 600 0.6rem var(--mono); text-transform: uppercase; }
  .runway-labels span:last-child { text-align: right; }
  .runway-meter { position: relative; height: 10px; margin-top: 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,0.035); }
  .runway-meter i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--amber)); transition: width 240ms ease; }
  .runway-meter b { position: absolute; top: 50%; width: 2px; height: 24px; transform: translate(-1px, -50%); background: var(--signal); }
  .runway-meter b span { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); color: var(--signal); font: 700 0.55rem var(--mono); text-transform: uppercase; }
  .runway-visual > p { margin-top: 8px; color: var(--paper-faint); font-size: 0.68rem; }

  .result-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .result-metrics > div { min-width: 0; padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .result-metrics dt { color: var(--paper-faint); font: 600 0.57rem/1.35 var(--mono); text-transform: uppercase; }
  .result-metrics dd { margin-top: 4px; overflow-wrap: anywhere; color: var(--paper); font: 800 0.88rem var(--mono); }

  .decision-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
  .decision-compare > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; }
  .decision-compare span { color: var(--paper-dim); font-size: 0.72rem; }
  .decision-compare strong { font: 850 0.65rem var(--mono); }
  .decision-compare strong[data-state="good"], .decision-compare strong[data-state="use-now"], .decision-compare strong[data-state="use-later"] { color: var(--green); }
  .decision-compare strong[data-state="bad"] { color: var(--signal); }
  .decision-compare strong[data-state="mixed"], .decision-compare strong[data-state="hold"], .decision-compare strong[data-state="use-soon"], .decision-compare strong[data-state="expiry"] { color: var(--amber); }
  .decision-compare strong[data-state="wait"], .decision-compare strong[data-state="watch"], .decision-compare strong[data-state="neutral"] { color: var(--blue); }
  .result-explain { display: grid; gap: 7px; margin-top: 18px; padding: 13px 14px; border-left: 2px solid var(--line-strong); background: rgba(255,255,255,0.018); }
  .result-explain p { color: var(--paper-faint); font-size: 0.68rem; }
  .result-explain time { color: var(--paper-dim); }
  .result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 20px; }

  .trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .trust-strip > div { padding: 13px 16px; }
  .trust-strip > div + div { border-left: 1px solid var(--line); }
  .trust-strip strong { display: block; font-size: 0.73rem; }
  .trust-strip span { display: block; margin-top: 2px; color: var(--paper-faint); font-size: 0.64rem; }

  .intent-guides { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .intent-guides article { padding: 38px 40px 42px 0; }
  .intent-guides article + article { padding-left: 40px; border-left: 1px solid var(--line); }
  .intent-guides h2 { margin-top: 12px; font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.08; letter-spacing: -0.045em; }
  .intent-guides h3 { margin-top: 18px; color: var(--paper); font-size: 0.84rem; }
  .intent-guides article > p:last-child { max-width: 560px; margin-top: 8px; color: var(--paper-dim); font-size: 0.82rem; }

  .evidence-section, .method-section, .faq-section { padding: 86px 0; scroll-margin-top: 72px; }
  .evidence-section, .method-section { border-bottom: 1px solid var(--line); }
  .section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr); align-items: end; gap: 38px; }
  .section-heading h2 { margin-top: 10px; font-size: clamp(2.8rem, 6vw, 5.7rem); line-height: 0.94; letter-spacing: -0.065em; }
  .section-heading > p { color: var(--paper-dim); font-size: 0.88rem; }

  .evidence-board { display: grid; grid-template-columns: 1.35fr 0.8fr 1fr; gap: 12px; margin-top: 38px; }
  .tibo-signal-card, .forecast-card, .latest-signal-card { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: rgba(16,18,22,0.72); }
  .tibo-signal-card { padding: 20px; }
  .tibo-profile { display: flex; align-items: center; gap: 14px; }
  .tibo-profile img { width: 62px; height: 62px; border: 1px solid var(--line-strong); border-radius: 50%; object-fit: cover; }
  .tibo-profile > div { display: grid; }
  .tibo-profile span { color: var(--paper-faint); font: 600 0.56rem var(--mono); letter-spacing: 0.08em; }
  .tibo-profile strong { margin-top: 2px; font-size: 0.95rem; }
  .tibo-profile a { color: var(--paper-dim); font-size: 0.7rem; text-decoration: none; }
  .live-verdict-copy { margin-top: 18px; }
  .live-verdict-copy > strong { font-size: 1.15rem; line-height: 1.2; }
  .live-verdict-copy p { margin-top: 7px; color: var(--paper-dim); font-size: 0.76rem; }
  .reset-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 17px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .reset-facts > div { padding: 9px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .reset-facts dt { color: var(--paper-faint); font: 600 0.54rem var(--mono); text-transform: uppercase; }
  .reset-facts dd { margin-top: 3px; color: var(--paper-dim); font-size: 0.67rem; }
  .evidence-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
  .watch-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--paper-faint); }
  #watch-button[aria-pressed="true"] .watch-dot { background: var(--green); box-shadow: 0 0 11px var(--green); }
  .forecast-card, .latest-signal-card { padding: 18px; }
  .card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--paper-dim); font-size: 0.72rem; }
  .card-heading span { color: var(--paper-faint); font: 650 0.56rem var(--mono); text-transform: uppercase; }
  .forecast-row { margin-top: 20px; }
  .forecast-row > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .forecast-row span { color: var(--paper-faint); font-size: 0.68rem; }
  .forecast-row strong { font: 850 1.4rem var(--mono); }
  progress { display: block; width: 100%; height: 6px; margin-top: 8px; border: 0; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.04); }
  progress::-webkit-progress-bar { background: rgba(255,255,255,0.04); }
  progress::-webkit-progress-value { background: var(--state); }
  progress::-moz-progress-bar { background: var(--state); }
  .forecast-card > p { margin-top: 20px; color: var(--paper-faint); font-size: 0.66rem; }
  .latest-signal-card blockquote { margin-top: 25px; color: var(--paper); font-size: 0.9rem; line-height: 1.45; }
  .latest-signal-card > div:last-child { display: flex; justify-content: space-between; gap: 14px; margin-top: 22px; color: var(--paper-faint); font: 650 0.65rem var(--mono); }
  .latest-signal-card a { color: var(--paper-dim); text-decoration: none; }

  .timeline-heading { display: grid; grid-template-columns: 1fr minmax(260px, 0.55fr); align-items: end; gap: 30px; margin-top: 50px; }
  .timeline-heading h3 { margin-top: 7px; font-size: 2rem; letter-spacing: -0.04em; }
  .timeline-heading > p { color: var(--paper-dim); font-size: 0.8rem; }
  .timeline-viewport { margin-top: 22px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scroll-snap-type: x mandatory; }
  .timeline-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 31%); gap: 10px; padding: 0 0 10px; list-style: none; }
  .timeline-item { position: relative; scroll-snap-align: start; }
  .timeline-item article { display: flex; min-height: 188px; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(16,18,22,0.62); }
  .timeline-item article > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .event-chip { color: var(--paper-dim); font: 750 0.58rem var(--mono); text-transform: uppercase; }
  .timeline-item[data-kind="reset"] .event-chip { color: var(--green); }
  .timeline-item[data-kind="hint"] .event-chip { color: var(--amber); }
  .timeline-item time { color: var(--paper-faint); font: 650 0.62rem var(--mono); }
  .timeline-item p { margin-top: 25px; color: var(--paper-dim); font-size: 0.78rem; }
  .timeline-item a { margin-top: auto; padding-top: 18px; color: var(--paper); font-size: 0.7rem; font-weight: 750; text-decoration: none; }
  .timeline-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
  .timeline-controls button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--paper-dim); cursor: pointer; }
  .timeline-controls span { min-width: 112px; color: var(--paper-faint); font: 600 0.59rem var(--mono); text-align: center; }

  .formula-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 38px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 10px; background: rgba(16,18,22,0.55); }
  .formula-strip code { color: var(--paper-dim); font-size: 0.7rem; }
  .formula-strip span { color: var(--signal); }
  .method-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .method-grid article { min-width: 0; padding: 28px 24px 30px 0; }
  .method-grid article + article { padding-left: 24px; border-left: 1px solid var(--line); }
  .method-grid article > span { color: var(--signal); font: 750 0.62rem var(--mono); }
  .method-grid h3 { margin-top: 38px; font-size: 0.98rem; }
  .method-grid p { margin-top: 8px; color: var(--paper-dim); font-size: 0.74rem; }
  .official-rule { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 26px; margin-top: 28px; padding: 24px 26px; border: 1px solid rgba(140,184,255,0.3); border-radius: 12px; background: rgba(140,184,255,0.055); }
  .official-rule h3 { margin-top: 7px; font-size: 1.25rem; }
  .official-rule p:last-child { max-width: 820px; margin-top: 7px; color: var(--paper-dim); font-size: 0.78rem; }
  .official-rule a { color: var(--blue); font-size: 0.75rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
  .model-readout { display: grid; grid-template-columns: 1fr minmax(260px, 0.42fr); gap: 28px; margin-top: 24px; }
  .model-readout dl { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .model-readout dl > div { padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .model-readout dt { color: var(--paper-faint); font: 600 0.56rem var(--mono); text-transform: uppercase; }
  .model-readout dd { margin-top: 4px; font: 750 0.72rem var(--mono); }
  .model-readout > p { align-self: center; color: var(--paper-faint); font-size: 0.72rem; }

  .faq-list { margin-top: 32px; border-top: 1px solid var(--line); }
  .faq-list details { border-bottom: 1px solid var(--line); }
  .faq-list summary { position: relative; padding: 20px 50px 20px 0; cursor: pointer; font-size: 0.92rem; font-weight: 800; list-style: none; }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after { content: "+"; position: absolute; top: 18px; right: 5px; color: var(--paper-faint); font: 600 1.2rem var(--mono); }
  .faq-list details[open] summary::after { content: "−"; }
  .faq-list details p { max-width: 870px; padding: 0 50px 20px 0; color: var(--paper-dim); font-size: 0.8rem; }

  .site-footer { display: grid; grid-template-columns: 1fr auto; gap: 18px 30px; width: min(var(--max), calc(100% - 48px)); margin: 0 auto; padding: 40px 0 48px; border-top: 1px solid var(--line); }
  .site-footer > div { display: grid; gap: 3px; }
  .site-footer > div span, .site-footer > p { color: var(--paper-faint); font-size: 0.67rem; }
  .site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; }
  .site-footer nav a { color: var(--paper-dim); font-size: 0.7rem; text-decoration: none; }
  .site-footer > p { grid-column: 1 / -1; }

  dialog { width: min(760px, calc(100vw - 28px)); max-height: min(90vh, 900px); padding: 0; overflow: auto; border: 1px solid var(--line-strong); border-radius: 16px; color: var(--paper); background: #0d0f12; box-shadow: 0 40px 120px rgba(0,0,0,0.72); }
  dialog::backdrop { background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); }
  .dialog-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--line); background: rgba(13,15,18,0.96); }
  .dialog-head h2 { margin-top: 5px; font-size: 1.55rem; letter-spacing: -0.035em; }
  .icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--paper-dim); cursor: pointer; font-size: 1.25rem; }

  .status-dialog { width: min(1080px, calc(100vw - 28px)); }
  .privacy-lock { display: flex; gap: 12px; margin: 20px 22px 0; padding: 13px 14px; border: 1px solid rgba(126,224,156,0.28); border-radius: 10px; background: rgba(126,224,156,0.055); }
  .privacy-lock > span { color: var(--green); font: 800 1.25rem var(--mono); }
  .privacy-lock strong { color: var(--green); font-size: 0.76rem; }
  .privacy-lock p { margin-top: 3px; color: var(--paper-dim); font-size: 0.68rem; }
  .status-dialog-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; padding: 20px 22px 24px; }
  .paste-panel { min-width: 0; padding-right: 20px; border-right: 1px solid var(--line); }
  .paste-panel label { font-size: 0.76rem; font-weight: 800; }
  #status-input { width: 100%; min-height: 186px; margin-top: 8px; padding: 12px; resize: vertical; border: 1px solid var(--line-strong); border-radius: 9px; outline: 0; background: var(--bg); color: var(--paper); font: 0.7rem/1.55 var(--mono); }
  #status-input:focus { border-color: var(--paper-dim); }
  #status-input[aria-invalid="true"] { border-color: var(--signal); }
  .field-help { margin-top: 8px; color: var(--paper-faint); font-size: 0.67rem; }
  .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 13px; }
  .how-to { margin-top: 16px; border-top: 1px solid var(--line); }
  .how-to summary { padding: 12px 0; color: var(--paper-dim); cursor: pointer; font-size: 0.7rem; font-weight: 750; }
  .how-to ol { padding: 0 0 0 20px; color: var(--paper-faint); font-size: 0.68rem; }
  .quota-result { min-width: 0; padding-left: 20px; }
  .empty-result { display: grid; place-items: center; min-height: 310px; padding: 24px; text-align: center; }
  .empty-result > span { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--paper-faint); font: 800 1.3rem var(--mono); }
  .empty-result h3 { margin-top: 16px; }
  .empty-result p { max-width: 400px; margin-top: 6px; color: var(--paper-faint); font-size: 0.72rem; }
  .account-verdict { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,0.025); }
  .account-verdict h3 { margin-top: 6px; font-size: 1rem; }
  .account-verdict > p:last-child { margin-top: 6px; color: var(--paper-dim); font-size: 0.7rem; }
  .window-results { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
  .window-result { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 9px; }
  .window-result > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 0.74rem; }
  .window-result > div:first-child strong { font-family: var(--mono); }
  .gauge { height: 6px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.04); }
  .gauge i { display: block; width: 0; height: 100%; background: var(--green); }
  .window-result dl { display: grid; gap: 5px; margin-top: 11px; }
  .window-result dl > div { display: flex; justify-content: space-between; gap: 10px; }
  .window-result dt { color: var(--paper-faint); font-size: 0.6rem; }
  .window-result dd { overflow-wrap: anywhere; color: var(--paper-dim); font: 650 0.6rem var(--mono); text-align: right; }
  .parsed-at, .autofill-note { margin-top: 10px; color: var(--paper-faint); font-size: 0.65rem; }
  .autofill-note { color: var(--green); }

  .command-dialog { width: min(560px, calc(100vw - 28px)); }
  .command-list { display: grid; padding: 10px; }
  .command-list button { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 12px; padding: 12px; border-radius: 9px; background: transparent; color: var(--paper); cursor: pointer; text-align: left; }
  .command-list button:hover { background: rgba(255,255,255,0.045); }
  .command-list kbd { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--paper-faint); font-size: 0.62rem; }
  .command-list span { display: grid; }
  .command-list small { color: var(--paper-faint); font-size: 0.65rem; }

  .legal-tabs { display: flex; gap: 7px; padding: 16px 22px 0; }
  .legal-tabs button { padding: 7px 11px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--paper-faint); cursor: pointer; }
  .legal-tabs button[aria-selected="true"] { border-color: var(--line); background: rgba(255,255,255,0.04); color: var(--paper); }
  .legal-dialog article { padding: 18px 22px 28px; }
  .legal-dialog article h3 { font-size: 1.2rem; }
  .legal-dialog article h4 { margin-top: 20px; font-size: 0.82rem; }
  .legal-dialog article p { margin-top: 7px; color: var(--paper-dim); font-size: 0.75rem; }

  .toast { position: fixed; right: 18px; bottom: 18px; z-index: 300; max-width: min(360px, calc(100vw - 36px)); padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--paper); color: var(--bg); box-shadow: var(--shadow); font-size: 0.74rem; font-weight: 800; }
  [aria-busy="true"] { cursor: progress; }

  .error-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
  .error-box { max-width: 650px; text-align: center; }
  .error-box .eyebrow { color: var(--signal); }
  .error-box h1 { margin-top: 14px; font-size: clamp(2.8rem, 9vw, 5.5rem); line-height: 0.94; letter-spacing: -0.065em; }
  .error-box > p:not(.eyebrow) { margin-top: 18px; color: var(--paper-dim); }
  .error-box .button { margin-top: 24px; }
  .error-dial { position: relative; width: 116px; height: 116px; margin: 0 auto 30px; border: 7px solid var(--signal); border-radius: 50%; }
  .error-dial::before, .error-dial::after { content: ""; position: absolute; background: var(--paper); }
  .error-dial::before { width: 2px; height: 36px; left: 50px; top: -15px; }
  .error-dial::after { width: 36px; height: 2px; top: 50px; left: -15px; }
}

@layer responsive {
  @media (max-width: 1080px) {
    .decision-console { grid-template-columns: 1fr; }
    .input-deck { border-right: 0; border-bottom: 1px solid var(--line); }
    .result-metrics { grid-template-columns: repeat(4, 1fr); }
    .evidence-board { grid-template-columns: 1.15fr 0.85fr; }
    .latest-signal-card { grid-column: 1 / -1; }
    .method-grid { grid-template-columns: 1fr 1fr; }
    .method-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
    .method-grid article:nth-child(4) { border-top: 1px solid var(--line); }
    .model-readout { grid-template-columns: 1fr; }
  }

  @media (max-width: 800px) {
    .site-header { grid-template-columns: auto 1fr auto; padding-inline: 18px; }
    .primary-nav { display: none; }
    .mini-state { justify-self: end; }
    #main-content, .site-footer { width: calc(100% - 32px); }
    .calculator-hero { padding-top: 26px; }
    .hero-heading { padding: 38px 0 28px; }
    .hero-heading h1 { font-size: clamp(3rem, 12vw, 5rem); }
    .section-heading, .timeline-heading { grid-template-columns: 1fr; gap: 16px; }
    .intent-guides { grid-template-columns: 1fr; }
    .intent-guides article, .intent-guides article + article { padding: 30px 0; border-left: 0; }
    .intent-guides article + article { border-top: 1px solid var(--line); }
    .trust-strip { grid-template-columns: 1fr; }
    .trust-strip > div + div { border-top: 1px solid var(--line); border-left: 0; }
    .status-dialog-grid { grid-template-columns: 1fr; }
    .five-hour-fields { grid-template-columns: 1fr 1fr; }
    .continue-toggle { grid-column: 1 / -1; }
    .paste-panel { padding-right: 0; padding-bottom: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
    .quota-result { padding-top: 18px; padding-left: 0; }
    .empty-result { min-height: 220px; }
    .official-rule { grid-template-columns: 1fr; }
    .model-readout dl { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 620px) {
    html { scroll-padding-top: 64px; }
    .site-header { min-height: 58px; gap: 10px; padding-inline: 14px; }
    .brand { gap: 8px; }
    .brand-mark { width: 25px; height: 25px; }
    .brand-mark::before { left: 10px; }
    .brand-mark::after { left: 10px; }
    .brand-mark i::before, .brand-mark i::after { top: 10px; }
    .mini-state { display: none; }
    .command-trigger > span { display: none; }
    #main-content, .site-footer { width: calc(100% - 24px); }
    .calculator-hero { padding: 18px 0 54px; }
    .live-ribbon { align-items: flex-start; }
    .live-ribbon-state { display: grid; gap: 5px; }
    .live-ribbon > a { display: grid; gap: 1px; text-align: right; }
    .live-ribbon > a b { display: none; }
    .hero-heading { padding: 34px 0 24px; }
    .hero-heading h1 { font-size: clamp(2.85rem, 14vw, 4.25rem); }
    .hero-heading > p:last-child { font-size: 0.9rem; }
    .decision-console { border-radius: 15px; }
    .input-deck, .result-deck { padding: 17px 14px; }
    .scenario-tabs { grid-template-columns: 1fr; }
    .scenario-tabs button { min-height: 54px; }
    .primary-fields, .advanced-grid, .five-hour-fields { grid-template-columns: 1fr; }
    .continue-toggle { grid-column: auto; }
    .primary-fields .field-block + .field-block { border-top: 1px solid var(--line); }
    .field-heading { align-items: flex-start; }
    .form-bottom { align-items: stretch; }
    .form-bottom > .button { width: 100%; }
    .scenario-examples { justify-content: flex-start; }
    .result-topline { display: grid; }
    .worth-confidence { max-width: none; text-align: left; }
    .result-deck h2 { font-size: 1.85rem; }
    .result-metrics { grid-template-columns: 1fr 1fr; }
    .decision-compare { grid-template-columns: 1fr; }
    .evidence-section, .method-section, .faq-section { padding: 64px 0; }
    .section-heading h2 { font-size: clamp(2.6rem, 14vw, 4.2rem); }
    .evidence-board { grid-template-columns: 1fr; }
    .latest-signal-card { grid-column: auto; }
    .reset-facts { grid-template-columns: 1fr; }
    .reset-facts > div { display: flex; justify-content: space-between; gap: 12px; }
    .timeline-list { grid-auto-columns: minmax(260px, 84vw); }
    .method-grid { grid-template-columns: 1fr; }
    .method-grid article, .method-grid article + article { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line); }
    .method-grid article:first-child { border-top: 0; }
    .method-grid h3 { margin-top: 22px; }
    .formula-strip span { display: none; }
    .official-rule { padding: 19px; }
    .model-readout dl { grid-template-columns: 1fr; }
    .model-readout dl > div { display: flex; justify-content: space-between; gap: 14px; }
    .site-footer { grid-template-columns: 1fr; }
    .site-footer nav { justify-content: flex-start; }
    .window-results { grid-template-columns: 1fr; }
    dialog { width: calc(100vw - 14px); max-height: 94vh; border-radius: 12px; }
    .dialog-head { padding: 16px; }
    .privacy-lock { margin: 14px 16px 0; }
    .status-dialog-grid { padding: 16px; }
  }

  @media (max-width: 350px) {
    .calculator-hero { padding-top: 12px; }
    .live-ribbon { min-height: 36px; padding-block: 6px; }
    .live-ribbon-state > span:last-child, .live-ribbon > a span { display: none; }
    .hero-heading { padding: 24px 0 16px; }
    .hero-heading h1 { font-size: 2.38rem; line-height: 0.94; }
    .hero-heading > p:last-child { margin-top: 12px; font-size: 0.78rem; line-height: 1.42; }
    .input-deck { padding-top: 13px; }
    .scenario-tabs { grid-template-columns: 1fr 1fr; }
    .scenario-tabs button { min-height: 46px; padding: 7px 8px; font-size: 0.7rem; }
    .scenario-tabs button small, .mode-caption { display: none; }
    .input-source-row { align-items: flex-start; margin-top: 9px; padding-block: 8px; }
    .status-import-button { max-width: 128px; padding-block: 6px; }
    .primary-fields .field-block { padding-block: 13px; }
    .result-metrics { grid-template-columns: 1fr; }
    .quick-times button { flex: 1 1 42px; }
    .timeline-list { grid-auto-columns: 255px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; }
  }

  @media (forced-colors: active) {
    .button, .state-badge, .decision-console, .timeline-item article, .window-result { border: 1px solid CanvasText; }
    .mini-state i, .watch-dot, .runway-meter i { forced-color-adjust: none; }
  }
}