:root {
  --ink: #111111;
  --dark-grey: #2b2b2b;
  --mid-grey: #858585;
  --paper: #f7f7f4;
  --white: #ffffff;
  --red: #ff3b30;
  --blue: #2563ff;
  --green: #b6ff00;
  --border: #d4d4d4;
  --tier-s1: #00c9a7;
  --tier-s2: #7c3aed;
  --tier-llm: #2563ff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: Arial, Helvetica, sans-serif; background: var(--paper); color: var(--ink); min-height: 100vh; }
a { color: inherit; text-decoration: none; }

.site-header {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: 86px; padding: 0 5vw;
  background: var(--paper); border-bottom: 3px solid var(--red);
}
.brand { font-size: clamp(1.15rem, 2vw, 1.7rem); font-weight: 800; letter-spacing: -0.07em; white-space: nowrap; }
.brand .first { color: var(--dark-grey); }
.brand .last { color: var(--mid-grey); }
.brand .domain { color: var(--red); }
.site-header nav { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 2.2rem); text-transform: uppercase; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; }
.site-header nav a { position: relative; padding: 11px 0; white-space: nowrap; }
.site-header nav a::after { position: absolute; right: 100%; bottom: 3px; left: 0; height: 2px; content: ""; background: var(--blue); transition: right 0.25s ease; }
.site-header nav a:hover::after { right: 0; }
.lang-switch {
  position: absolute; z-index: 40; top: calc(100% + 10px); left: 5vw;
  display: flex; align-items: center; gap: 14px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.lang-switch button { border: 0; background: transparent; padding: 0; color: var(--mid-grey); font: inherit; letter-spacing: inherit; cursor: pointer; }
.lang-switch button.active { color: var(--ink); }
.mobile-menu { display: none; border: 0; background: transparent; color: var(--ink); font-size: 1.5rem; cursor: pointer; }

.container { max-width: 1200px; margin: 0 auto; padding: 24px 5vw 60px; }
.nav-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.nav-row a { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.nav-row a:hover { color: var(--red); }

.header { margin-bottom: 24px; }
.header h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.04em; }
.header p { color: var(--mid-grey); font-size: 0.95rem; margin-top: 6px; max-width: 700px; }
.intro {
  font-size: 1.2rem; line-height: 1.7; color: var(--ink); font-weight: 600;
  border-left: 4px solid var(--red); padding: 12px 0 12px 18px; margin-top: 18px; margin-bottom: 20px; max-width: 780px;
}
.section-intro {
  font-size: 1.0rem; line-height: 1.7; color: var(--dark-grey); font-weight: 500;
  border-left: 4px solid var(--blue); padding: 8px 0 8px 14px; margin-bottom: 22px; max-width: 780px;
}

.badge { display: inline-block; font-size: 0.6rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-free { background: var(--green); color: var(--ink); }
.badge-s1 { background: var(--tier-s1); color: var(--ink); }
.badge-llm { background: var(--tier-llm); color: var(--white); }
.badge-s2 { background: var(--tier-s2); color: var(--white); }

.chart-container {
  background: var(--white); border: 1px solid var(--border); border-radius: 8px;
  padding: 24px 24px 28px; margin-bottom: 20px;
}
.chart-container h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.chart-container .subtitle { font-size: 0.8rem; color: var(--mid-grey); margin-bottom: 18px; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px;
}
.stat-card .label { font-size: 0.7rem; color: var(--mid-grey); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-card .value { font-size: 1.4rem; font-weight: 800; margin-top: 4px; }
.stat-card .sub { font-size: 0.75rem; color: var(--mid-grey); margin-top: 2px; }

.tier-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tier-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px; border-top: 3px solid var(--border);
}
.tier-card.tier-s1 { border-top-color: var(--tier-s1); }
.tier-card.tier-llm { border-top-color: var(--tier-llm); }
.tier-card.tier-s2 { border-top-color: var(--tier-s2); }
.tier-card h4 { font-size: 0.9rem; font-weight: 700; margin-bottom: 8px; }
.tier-card .model-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.8rem; border-bottom: 1px solid #eee; }
.tier-card .model-row:last-child { border-bottom: 0; }
.tier-card .model-name { font-weight: 600; }
.tier-card .model-price { color: var(--mid-grey); }

.controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; align-items: flex-end; }
.control-group { display: flex; flex-direction: column; gap: 4px; }
.control-group label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mid-grey); }
.control-group select, .control-group input[type="number"], .control-group input[type="range"] {
  border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px;
  font-size: 0.85rem; background: var(--white); min-width: 140px;
}
.control-group input[type="range"] { min-width: 200px; padding: 0; }
.control-group .range-val { font-size: 0.8rem; font-weight: 700; }

.toggle-group { display: flex; gap: 4px; }
.toggle-group button {
  border: 1px solid var(--border); background: var(--white); padding: 6px 14px;
  font-size: 0.8rem; font-weight: 600; cursor: pointer; border-radius: 4px;
}
.toggle-group button.active { background: var(--ink); color: var(--white); border-color: var(--ink); }

.route-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.route-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--ink); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.route-table td { padding: 8px 10px; border-bottom: 1px solid #eee; }
.route-table tr.recommended { background: #f0fdf4; }
.route-table .cost { font-weight: 700; }
.route-table .na { color: var(--mid-grey); font-style: italic; }

.insight-box {
  background: #fffbeb; border: 1px solid #f59e0b; border-radius: 8px;
  padding: 16px; margin-bottom: 20px;
}
.insight-box h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; color: #92400e; }
.insight-box p { font-size: 0.85rem; color: #78350f; }

.saturation-bar { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.saturation-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }

@media (max-width: 768px) {
  .site-header nav { display: none; }
  .site-header nav.open {
    display: flex; flex-direction: column; position: absolute;
    top: 100%; left: 0; right: 0; background: var(--white);
    padding: 16px 5vw; gap: 12px; border-bottom: 3px solid var(--red);
  }
  .mobile-menu { display: block; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-cards { grid-template-columns: 1fr; }
}

.section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.section-header h3 { margin-bottom: 0; }

.data-badge { font-size: 0.6rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.badge-sim { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.badge-ex { background: #e0e7ff; color: #3730a3; border: 1px solid #6366f1; }
.badge-appr { background: #d1fae5; color: #065f46; border: 1px solid #10b981; }
.badge-real { background: #f0fdf4; color: #166534; border: 1px solid #22c55e; }
.badge-below { background: #fee2e2; color: #991b1b; }

.data-note { font-size: 0.75rem; color: var(--mid-grey); font-style: italic; margin: 6px 0; }

.model-hint { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 0.65rem; font-weight: 700; background: #e5e5e5; border-radius: 50%; cursor: help; color: var(--mid-grey); }

.route-table tr.below-threshold { opacity: 0.5; }
.route-table tr.below-threshold td { text-decoration: line-through; text-decoration-color: #ff3b30; }

.section-block { margin-bottom: 32px; }
.section-block .section-header { margin-bottom: 8px; }

.arch-diagram {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 20px; background: var(--white); border: 1px solid var(--border); border-radius: 8px;
}
.arch-col { display: flex; flex-direction: column; gap: 6px; }
.arch-box {
  background: #f0f0f0; border: 1px solid var(--border); border-radius: 4px;
  padding: 8px 12px; font-size: 0.78rem; font-weight: 600; text-align: center; min-width: 120px;
}
.arch-box small { display: block; font-weight: 400; color: var(--mid-grey); font-size: 0.65rem; }
.arch-box.highlight { background: var(--ink); color: var(--white); border-color: var(--ink); }
.arch-box.highlight small { color: #999; }
.arch-arrow { font-size: 1.2rem; color: var(--mid-grey); font-weight: 700; }

.pipe-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 12px; }
.pipe-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--ink); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.pipe-table td { padding: 10px 12px; border-bottom: 1px solid #eee; vertical-align: top; }
.pipe-table .mono { font-family: monospace; font-size: 0.78rem; }

.code-block {
  background: #1a1a1a; color: #e8e8e8; border-radius: 8px; padding: 18px 20px;
  font-family: "SF Mono", "Fira Code", monospace; font-size: 0.78rem; line-height: 1.6;
  overflow-x: auto; margin-top: 12px;
}
.code-block code { font-family: inherit; }

.range-val { font-size: 0.8rem; font-weight: 700; color: var(--ink); }