:root {
  --bg: #FBF8F3;
  --bg-elev: #F6F1E8;
  --bg-sunk: #F2ECE0;
  --bg-deep: #2A2620;
  --ink: #2A2620;
  --ink-soft: #5C544A;
  --ink-mute: #8B8276;
  --line: #E8E0D5;
  --line-soft: #EFE8DB;
  --line-strong: #D6CCBA;
  --accent: #8B2D1A;
  --accent-soft: #B85A45;
  --hl-yellow: #E8C547;
  --hl-red:    #C03B2C;
  --hl-blue:   #3D5A80;
  --hl-green:  #5C8A4E;
  --hl-pink:   #D08FA9;
}
.dark {
  --bg: #1A1815;
  --bg-elev: #221F1B;
  --bg-sunk: #14120F;
  --bg-deep: #0E0D0B;
  --ink: #ECE4D6;
  --ink-soft: #B8AE9C;
  --ink-mute: #7A7164;
  --line: #2C2823;
  --line-soft: #25221E;
  --line-strong: #3A352E;
  --accent: #C0563E;
  --accent-soft: #8B2D1A;
}
html, body { background: var(--bg); }
body {
  font-family: Inter, ui-sans-serif, system-ui;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
.num { font-variant-numeric: tabular-nums; }
.serif { font-family: "Crimson Pro", Georgia, serif; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

.paper {
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(42,38,32,0.025) 1px, transparent 1px),
    radial-gradient(rgba(42,38,32,0.018) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}
.dark .paper {
  background-image:
    radial-gradient(rgba(236,228,214,0.018) 1px, transparent 1px),
    radial-gradient(rgba(236,228,214,0.012) 1px, transparent 1px);
}

.hl-chip { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

.btn-primary {
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink);
  padding: 11px 20px; border-radius: 8px;
  font-weight: 500; font-size: 14px;
  transition: transform .08s, opacity .15s, background .15s;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.btn-primary:hover { background: #1d1a15; }
.dark .btn-primary { background: var(--ink); color: #1A1815; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }

.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 10px 18px; border-radius: 8px;
  font-weight: 500; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--bg-elev); }

.ulink { color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.ulink:hover { color: var(--accent-soft); }

.hairline { border-top: 1px solid var(--line); }

.dropcap::first-letter {
  font-family: "Crimson Pro", serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  padding-right: 10px;
  padding-top: 6px;
}

.marker {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.marker-num { color: var(--accent); }

.marg-yellow { background: linear-gradient(transparent 55%, rgba(232,197,71,0.55) 55%); padding: 0 1px; }
.marg-red    { background: linear-gradient(transparent 55%, rgba(192,59,44,0.28) 55%);  padding: 0 1px; }
.marg-blue   { background: linear-gradient(transparent 55%, rgba(61,90,128,0.28) 55%);  padding: 0 1px; }
.marg-green  { background: linear-gradient(transparent 55%, rgba(92,138,78,0.32) 55%);  padding: 0 1px; }

.mac-window {
  background: var(--bg);
  border-radius: 10px;
  box-shadow:
    0 0 0 0.5px rgba(0,0,0,0.25),
    0 30px 60px -20px rgba(0,0,0,0.45),
    0 12px 24px -12px rgba(0,0,0,0.30);
  overflow: hidden;
  border: 1px solid var(--line);
}
.titlebar {
  height: 30px;
  background: linear-gradient(to bottom, var(--bg-elev), var(--bg));
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 10px;
}
.traffic { display:flex; gap:6px; }
.dot { width: 10px; height: 10px; border-radius: 9999px; }
.dot.r { background:#FF5F57; } .dot.y { background:#FEBC2E; } .dot.g { background:#28C840; }

.nav-blur {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

@keyframes slide {
  0% { transform: translateX(-40%); }
  100% { transform: translateX(140%); }
}
.progress-track { position: relative; height: 2px; background: var(--line); overflow: hidden; }
.progress-bar { position: absolute; inset: 0; width: 30%; background: var(--accent); animation: slide 1.6s ease-in-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1.4s linear infinite; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.pulse { animation: pulse-dot 1.6s ease-in-out infinite; }

.pull {
  font-family: "Crimson Pro", serif;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.ornament {
  color: var(--accent);
  font-family: "Crimson Pro", serif;
  font-style: italic;
}

details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] .faq-caret { transform: rotate(45deg); }
.faq-caret { transition: transform .2s; display: inline-block; }

.dest-row:hover { background: var(--bg-elev); }

em.acc { color: var(--accent); font-style: italic; font-weight: 500; }

* { -webkit-tap-highlight-color: transparent; }

.hero-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.input-mono {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.input-mono:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139,45,26,0.15);
}

.panel {
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.panel-elev {
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.panel-deep {
  background: var(--bg-deep);
  color: var(--bg);
}

.dark .panel-deep { background: #0E0D0B; }

.step-num {
  font-family: "Crimson Pro", serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  font-size: 30px;
  line-height: 1;
}

.success-card {
  border: 1px solid var(--accent);
  background: var(--bg-elev);
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink);
}
.success-card strong { color: var(--accent); }