/* One modular scale (1.25), one accent role, local system fonts only. */
:root {
  --cream: #fff9f2; --cream-deep: #f1e6d9; --brown: #30251f; --brown-soft: #68554b; --rust: #923d22;
  --surface: var(--cream); --surface-alt: var(--cream-deep); --ink: var(--brown); --muted: var(--brown-soft); --accent: var(--rust); --on-accent: #ffffff; --border: #8a7769;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-body); --font-code: ui-monospace, "SF Mono", Menlo, monospace;
  --text-small: .875rem; --text-body: clamp(1rem, .95rem + .2vw, 1.125rem); --text-h3: clamp(1.25rem, 1.1rem + .5vw, 1.563rem); --text-h2: clamp(1.953rem, 1.4rem + 1.7vw, 3.052rem); --text-h1: clamp(2.441rem, 1.5rem + 3.5vw, 4.768rem);
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 5rem; --space-section: clamp(3.5rem, 7vw, 6.5rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--surface); color: var(--ink); font: var(--text-body)/1.65 var(--font-body); }
:lang(ko) { word-break: keep-all; line-height: 1.8; }
a { color: var(--accent); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, .commands:focus-visible, .sample-box:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
button, a { -webkit-tap-highlight-color: transparent; }
.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 100px; border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: .7rem; font-size: 1.125rem; font-weight: 700; letter-spacing: -.035em; }
.mark { width: 24px; height: 30px; border: 2px solid var(--accent); border-left-width: 6px; position: relative; }
.mark::after { content: ""; position: absolute; left: 5px; right: 3px; top: 7px; height: 8px; border-block: 1px solid var(--accent); }
.language { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 600; }
.endorsement { color: var(--muted); font-size: var(--text-small); margin: .4rem 0 0; }
.hero { display: grid; grid-template-columns: 1.4fr .6fr; gap: 4rem; padding-block: var(--space-section); align-items: center; }
.demo { margin: 0 0 var(--space-section); }
.demo-play { position: relative; display: block; color: var(--on-accent); text-decoration: none; }
.demo img { display: block; width: 100%; height: auto; border: 1px solid var(--border); background: var(--ink); }
.demo-play-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; min-height: 44px; padding: .65rem 1.25rem; border: 2px solid var(--surface); background: var(--accent); color: var(--on-accent); font-weight: 650; white-space: nowrap; }
.demo-play:hover .demo-play-label { text-decoration: underline; }
.demo figcaption { max-width: 78ch; margin-top: 1rem; color: var(--muted); font-size: var(--text-small); }
h1,h2,h3 { line-height: 1.15; letter-spacing: -.04em; margin: 0; text-wrap: balance; }
h1 { font: 700 var(--text-h1)/1.13 var(--font-display); max-width: 17ch; letter-spacing: -.055em; }
:lang(ko) h1 { max-width: 12ch; line-height: 1.25; }
h2 { font-size: var(--text-h2); max-width: 24ch; }
h3 { font-size: var(--text-h3); line-height: 1.35; }
:lang(ko) h2, :lang(ko) h3 { line-height: 1.45; }
p { margin: 1rem 0 0; }
.eyebrow { margin: 0 0 1.5rem; color: var(--accent); font-size: var(--text-small); font-weight: 650; }
.lede { max-width: 58ch; margin-top: 1.75rem; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.primary { background: var(--accent); color: var(--on-accent); padding: .85rem 1.4rem; border: 1px solid var(--accent); text-decoration: none; font-weight: 650; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.secondary { padding-block: .75rem; min-height: 44px; display: inline-flex; align-items: center; }
.ledger-art { height: 330px; position: relative; border: 1px solid var(--border); background: var(--surface-alt); transform: rotate(3deg); }
.ledger-art::before { content: ""; position: absolute; inset: 28px -12px -12px 28px; border: 1px solid var(--border); z-index: -1; }
.ledger-art i { display: block; height: 1px; background: var(--border); margin: 25px 30px; }
.ledger-art i:first-child { height: 55px; width: 48px; border: 2px solid var(--accent); background: transparent; margin-block: 36px; }
.ledger-art i:nth-child(3) { width: 55%; }
.ledger-art i:nth-child(5) { width: 68%; }
section { padding-block: var(--space-section); border-top: 1px solid var(--border); }
.section-intro { max-width: 70ch; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-top: 2.5rem; }
.card { padding-top: 1.5rem; border-top: 2px solid var(--accent); }
.card p { color: var(--muted); }
.flow { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.flow li { display: grid; grid-template-columns: .85fr 1.4fr; gap: 2rem; position: relative; padding: 1.5rem 0 1.5rem 2rem; }
.flow li::before { content: ""; position: absolute; left: 0; top: 1.8rem; width: 12px; height: 12px; border: 2px solid var(--accent); border-radius: 50%; background: var(--surface); }
.flow li::after { content: ""; position: absolute; left: 5px; top: 2.55rem; bottom: -1.8rem; width: 2px; background: var(--border); }
.flow li:last-child::after { display: none; }
.flow p { margin: 0; color: var(--muted); }
.output { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.output ul { margin: 0; padding-left: 1.3rem; }
.output li { padding-bottom: 1rem; }
.output li::marker { color: var(--accent); }
.output .section-intro { grid-column: 1 / -1; margin: 0; }
.trust { background: var(--surface-alt); padding: 2.5rem; }
.trust .grid { grid-template-columns: 1fr 1fr; }
.trust .card { border-top-width: 1px; }
.who { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.who p { color: var(--muted); }
.install { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.install p { color: var(--muted); }
.commands { background: var(--ink); color: var(--surface); padding: 2rem; align-self: start; }
.commands code { display: block; white-space: pre; overflow-wrap: normal; font: .875rem/1.8 var(--font-code); padding-block: 1rem; border-bottom: 1px solid currentColor; }
.commands code:last-child { border: 0; }
.status { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.status p { color: var(--muted); }
.faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: 3rem; }
.faq-item { padding-block: 1.5rem; border-top: 1px solid var(--border); }
.faq-item:first-child { padding-top: 0; border: 0; }
.faq-item p { color: var(--muted); }
.samples > article { margin-top: 3rem; min-width: 0; }
.samples > article > p { max-width: 78ch; color: var(--muted); }
.sample-box { margin: 1.5rem 0 0; padding: 1.5rem; max-width: 100%; min-width: 0; overflow-x: auto; border: 1px solid var(--border); background: var(--surface-alt); }
.sample-box pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: .875rem/1.75 var(--font-code); word-break: keep-all; }
.sample-box + .sample-box { margin-top: 1rem; }
.match-key, .pack-parts { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 2rem; margin: 1rem 0 0; padding-left: 1.25rem; font-size: 1rem; color: var(--muted); }
.pack-parts { grid-template-columns: repeat(3, 1fr); margin-top: 1.5rem; }
.candidate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 2rem; }
.candidate { margin: 0; min-width: 0; padding: 1.5rem; border: 1px solid var(--border); background: var(--surface-alt); }
.candidate h4 { margin: 0; font-size: var(--text-body); line-height: 1.45; letter-spacing: -.02em; text-wrap: balance; }
.candidate .sample-box { padding: 0; margin-top: 1rem; border: 0; background: transparent; }
.candidate .sample-box pre:lang(ko) { font-family: var(--font-body); }
.blocked-samples { border-left: 3px solid var(--accent); padding-left: 1.5rem; }
.feedback { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.feedback p, .data-notice { color: var(--muted); }
.data-notice { margin: 0; padding: 2rem 0; font-size: 1rem; border-top: 1px solid var(--border); }
footer { border-top: 1px solid var(--border); padding-block: 2rem 3rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: var(--text-small); }
footer p { margin: 0; }
footer a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  header { min-height: 88px; }
  .brand { font-size: 1rem; }
  .hero { grid-template-columns: 1fr; gap: 3rem; padding-block: 3.5rem; }
  .ledger-art { display: none; }
  .hero .actions { align-items: stretch; flex-direction: column; gap: .5rem; }
  .hero .secondary { justify-content: center; }
  .grid, .trust .grid, .output, .who, .install, .status, .faq, .feedback { grid-template-columns: 1fr; gap: 2rem; }
  .flow li { grid-template-columns: 1fr; gap: .75rem; padding-left: 1.5rem; }
  .match-key, .pack-parts, .candidate-grid { grid-template-columns: 1fr; }
  .sample-box { padding: 1rem; }
  .trust { padding: 2rem 1.25rem; }
  .commands { padding: 1.25rem; min-width: 0; }
  footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Keyboard users can inspect unbroken CLI tokens without page-level overflow. */
.commands { overflow-x: auto; max-width: 100%; min-width: 0; }
.email { white-space: nowrap; }
.skip-link { position: fixed; z-index: 10; left: 1rem; top: 1rem; transform: translateY(-180%); padding: .65rem 1rem; min-height: 44px; background: var(--surface); font-weight: 650; }
.skip-link:focus { transform: translateY(0); }