@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Geist:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --sans: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --paper: #111217;
  --surface: #191a22;
  --ink: #f8f7fa;
  --muted: #b9b9c5;
  --line: #343440;
  --accent: #c1b4ff;
  --on-accent: #151027;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.55 var(--sans); }
h1, h2, h3, p, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.skip { position: fixed; left: 12px; top: -100px; z-index: 10; padding: 10px 14px; background: var(--accent); color: var(--on-accent); }
.skip:focus { top: 10px; }
.label { font: 500 .72rem/1.5 var(--mono); letter-spacing: .075em; text-transform: uppercase; color: var(--muted); }
.identity { display: inline-flex; align-items: center; gap: 12px; font-weight: 650; }
.identity b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 600 .82rem var(--mono); }
.gallery-shell, .site-shell { width: min(1320px, calc(100% - 80px)); margin-inline: auto; }
.gallery-top, .site-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.gallery-top > a, .site-nav nav { font-size: .88rem; color: var(--muted); }
.gallery-intro { margin-block: 62px 35px; }
.gallery-intro h1 { max-width: 12ch; font-size: clamp(3.2rem, 8vw, 6.9rem); line-height: .92; letter-spacing: -.09em; font-weight: 650; }
.gallery-intro p { margin-top: 24px; font-size: 1.13rem; color: var(--muted); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: 70px; }
.concept { background: #191a22; color: #f8f7fa; border: 1px solid #343440; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.concept-cover { display: flex; flex-direction: column; justify-content: space-between; height: 235px; position: relative; isolation: isolate; overflow: hidden; background: var(--paper); color: var(--ink); padding: 21px; }
.concept-cover strong { font-size: clamp(1.48rem, 2.6vw, 2.45rem); line-height: 1; letter-spacing: -.06em; font-weight: 680; z-index: 1; }
.concept-cover:hover strong { text-decoration: underline; text-decoration-thickness: .04em; text-underline-offset: .14em; }
.concept-copy { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.concept-copy .label { color: #b9b9c5; }
.concept-copy h2 { margin-block: 4px 8px; font-size: 1.65rem; letter-spacing: -.045em; }
.concept-copy > p:not(.label) { color: #b9b9c5; font-size: .93rem; margin-bottom: 20px; }
.concept-links { display: flex; gap: 15px; flex-wrap: wrap; margin-top: auto; font-size: .86rem; }
.concept-links a { border-bottom: 1px solid #6c6880; }
.teaser-bars, .teaser-stack { display: grid; gap: 6px; width: min(190px, 85%); align-self: end; }
.teaser-bars b { font-size: 2rem; letter-spacing: -.05em; }
.teaser-bars span { height: 8px; background: var(--accent); border-radius: 2px; }
.teaser-bars span:last-child { width: 22%; }
.teaser-stack span { border-bottom: 1px solid var(--line); padding: 4px 6px; font: 500 .72rem var(--mono); }
.teaser-relay { display: flex; gap: 4px; align-self: end; }
.teaser-relay span { color: var(--on-accent); background: var(--accent); padding: 6px; border-radius: 5px; font: 500 .64rem var(--mono); }
.teaser-stack span { transform: skewX(-12deg); background: var(--accent); color: var(--on-accent); }
.instrument { --paper:#171319; --surface:#231b25; --ink:#fff5f3; --muted:#ccb8c4; --line:#4b3948; --accent:#ff9f87; --on-accent:#2c1017; }
.build-relay { --paper:#e9e2ff; --surface:#f5f1ff; --ink:#251940; --muted:#594975; --line:#bcafd6; --accent:#5632b4; --on-accent:#fffaff; }
.cutaway { --paper:#102496; --surface:#1831ae; --ink:#fff9ea; --muted:#d6dbff; --line:#687bd1; --accent:#fff492; --on-accent:#142459; }
.site-nav nav, .preview-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-nav nav a:hover, .preview-links a:hover, .text-link:hover { color: var(--accent); }
.preview-links { justify-content: space-between; padding: 13px 0 0; color: var(--muted); font: .74rem var(--mono); }
.hero { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 82px); padding: clamp(36px, 6vw, 98px) 0; }
.hero-copy { min-width: 0; }
.hero h1 { font-size: clamp(2.75rem, 5.6vw, 6.4rem); line-height: .93; letter-spacing: -.085em; font-weight: 650; margin-block: 22px 23px; }
.hero h1 em { color: var(--accent); font-style: normal; }
.lede { font-size: clamp(1rem, 1.6vw, 1.22rem); max-width: 38ch; color: var(--muted); margin-bottom: 25px; }
.button { display: inline-flex; align-items: center; gap: 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); padding: 11px 17px; font-size: .9rem; font-weight: 650; }
.button:hover { filter: brightness(.9); }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); margin: 0 0 20px; }
.metrics > div { padding: clamp(13px, 3vw, 31px); border-left: 1px solid var(--line); }
.metrics > div:first-child { border-left: 0; }
.metrics dt { font-size: clamp(2.2rem, 4.2vw, 4rem); font-weight: 600; letter-spacing: -.085em; line-height: 1; }
.metrics dd { font-size: .86rem; color: var(--muted); margin-top: 8px; }
.section { padding: 62px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.section > h2 { font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -.06em; margin-bottom: 24px; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.project { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; scroll-margin-top: 24px; }
.project h3 { font-size: clamp(1.12rem, 2vw, 1.68rem); letter-spacing: -.04em; line-height: 1.13; margin: 10px 0 12px; }
.project > p:not(.label), .competencies dd { color: var(--muted); font-size: .94rem; }
.project .stack { font: .73rem/1.5 var(--mono); margin-top: 20px; }
.competencies { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 36px; }
.competencies > div { border-top: 1px solid var(--line); padding: 15px 0; }
.competencies dt { font-weight: 650; margin-bottom: 4px; }
.repos { border-top: 1px solid var(--line); }
.repo { display: grid; grid-template-columns: minmax(110px,1fr) minmax(180px,2fr) minmax(75px, auto); align-items: center; gap: 20px; padding: 16px 10px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.repo:hover { background: var(--surface); }
.repo-name { font: 500 .85rem/1.4 var(--mono); overflow-wrap: anywhere; }
.repo span:nth-child(2) { color: var(--muted); }
.repo .label { text-align: right; }
.repo b { color: var(--accent); }
.contact { padding-bottom: 75px; border-bottom: 0; }
.contact p { color: var(--muted); margin-bottom: 20px; }
.text-link { margin-left: 14px; font-size: .9rem; text-decoration: underline; text-underline-offset: .2em; }
.benchmark { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(17px,3vw,31px); }
.bench-head, .demo-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.bench-head h2, .demo-top h2 { font-size: 1.18rem; letter-spacing: -.04em; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 17px 19px; }
.filters button, [data-readme-theme] { padding: 6px 11px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; }
.filters button:hover { border-color: var(--accent); }
.filters button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bar-row { display: grid; grid-template-columns: 51px 1fr 40px; align-items: center; gap: 10px; margin-block: 14px; font: .77rem var(--mono); }
.track { background: var(--paper); border-radius: 3px; overflow: hidden; }
.bar { height: 23px; background: var(--accent); transition: width .25s ease; }
.bar.before { opacity: .44; }
.bar.after { width: 22%; }
.bench-summary { color: var(--accent); margin-top: 20px; font-weight: 600; min-height: 3em; }
.instrument .project:first-child { border-color: var(--accent); }
.relay-demo { border-radius: 22px; background: var(--surface); padding: clamp(17px, 3vw, 30px); border: 1px solid var(--line); box-shadow: 8px 8px 0 #bdabd9; }
.relay-stages { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-top: 16px; }
.relay-stages > div { min-width: 0; min-height: 100px; border: 1px solid var(--line); padding: 9px; border-radius: 9px; display: flex; flex-direction: column; gap: 3px; }
.relay-stages small { font: .68rem var(--mono); color: var(--muted); }
.relay-stages strong { font-size: .81rem; }
.relay-stages span { font: .66rem/1.35 var(--mono); color: var(--accent); overflow-wrap: anywhere; }
.demo-summary { color: var(--muted); min-height: 4em; font-size: .89rem; }
.cutaway .hero h1 { font-family: "Barlow Condensed", var(--sans); font-size: clamp(3.6rem, 7vw, 7.8rem); letter-spacing: -.045em; line-height: .86; text-transform: uppercase; }
.cutaway-stack { display: grid; gap: 8px; padding: 5px 10px 0 0; }
.cutaway-stack a { display: grid; gap: 2px; grid-template-columns: 1fr 2fr; padding: 12px 19px; background: var(--accent); color: var(--on-accent); border-radius: 2px; box-shadow: 6px 6px 0 #071567; }
.cutaway-stack a:hover { background: white; }
.cutaway-stack a:nth-child(2) { margin-left: 13px; }
.cutaway-stack a:nth-child(3) { margin-left: 26px; }
.cutaway-stack a:nth-child(4) { margin-left: 39px; }
.cutaway-stack span, .cutaway-stack small { font: .73rem/1.4 var(--mono); }
.cutaway-stack small { grid-column: 2; }
.cutaway-stack strong { font-size: 1.05rem; line-height: 1.3; }
.cutaway .project { border-radius: 0; }
.readme { --paper:#0d1117; --surface:#161b22; --ink:#e6edf3; --muted:#9da9b7; --line:#30363d; --accent:#79c0ff; }
.readme.light { --paper:#ffffff; --surface:#f6f8fa; --ink:#1f2328; --muted:#59636e; --line:#d1d9e0; --accent:#0969da; }
.readme-shell { width: min(980px, calc(100% - 50px)); margin: 24px auto 60px; }
.readme-top, .readme-caption { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; }
.readme-top { font-size: .85rem; color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.readme-caption { margin-block: 28px 18px; }
.readme-caption h1 { font-size: 2.4rem; letter-spacing: -.055em; }
.markdown { border: 1px solid var(--line); border-radius: 6px; padding: clamp(18px,4vw,42px); font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.markdown > * + * { margin-top: 16px; }
.markdown h1, .markdown h2 { padding-bottom: .28em; border-bottom: 1px solid var(--line); }
.markdown h2 { margin-top: 28px; }
.markdown a { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.markdown ul { padding-left: 1.35rem; }
.markdown li + li { margin-top: 6px; }
.markdown pre { background: var(--surface); padding: 16px; border-radius: 6px; overflow: auto; font: .83rem/1.6 var(--mono); }
.markdown blockquote { color: var(--muted); margin-inline: 0; padding: 3px 16px; border-left: 4px solid var(--line); }
.markdown table { border-collapse: collapse; display: block; max-width: 100%; overflow-x: auto; font-size: .88rem; }
.markdown td, .markdown th { padding: 7px 13px; border: 1px solid var(--line); }
.markdown tr:nth-child(2n) { background: var(--surface); }
.markdown img { width: 100%; max-height: 310px; object-fit: cover; border-radius: 4px; }
@media (max-width: 1050px) {
  .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .gallery-shell, .site-shell { width: calc(100% - 38px); }
  .hero { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(3rem, 11vw, 5.7rem); }
  .project-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-intro { margin-top: 44px; }
  .concept-cover { height: 212px; }
  .site-nav, .gallery-top { padding-block: 15px; }
  .site-nav nav { justify-content: end; column-gap: 12px; font-size: .76rem; }
  .site-nav nav a:nth-child(2) { display: none; }
  .identity { gap: 7px; font-size: .85rem; }
  .identity b { width: 30px; height: 30px; }
  .preview-links { gap: 8px; font-size: .65rem; }
  .hero { padding-block: 35px; }
  .metrics, .competencies { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metrics > div:nth-child(3) { border-left: 0; }
  .metrics > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .competencies { gap: 8px 15px; }
  .section { padding-block: 42px; }
  .repo { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .repo span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .relay-stages { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .relay-stages > div { min-height: 76px; }
  .readme-shell { width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar { transition: none; }
}

.trace { --paper:#210c1e; --surface:#32132d; --ink:#fff2f8; --muted:#e3b8d2; --line:#764361; --accent:#ff8dbf; --on-accent:#3e0a27; }
.target-matrix { --paper:#cfff50; --surface:#e5ffa6; --ink:#152006; --muted:#3b501c; --line:#718e37; --accent:#192b07; --on-accent:#eaffbc; }
.shared-platform { --paper:#092026; --surface:#14363b; --ink:#edfff9; --muted:#b0d3cb; --line:#4c7373; --accent:#8fffd8; --on-accent:#082b26; }

.trace-board {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(16px, 4vw, 34px);
  background: radial-gradient(ellipse at 100% 0, #631c56, transparent 68%), var(--surface);
}
.trace-title { display: grid; gap: 12px; padding-bottom: 20px; }
.trace-title strong, .trace-teaser b { color: var(--accent); font-size: clamp(3rem, 6vw, 5.6rem); line-height: 1; letter-spacing: -.08em; }
.trace-title small { color: var(--ink); font-size: .87rem; letter-spacing: 0; }
.trace-board details { border-top: 1px solid var(--line); padding: 13px 0; }
.trace-board summary { cursor: pointer; font-size: .93rem; }
.trace-board summary span { color: var(--accent); margin-right: 8px; font: .72rem var(--mono); }
.trace-board details p { color: var(--muted); font-size: .9rem; margin: 9px 0 2px 17px; }
.trace-teaser { align-self: end; display: grid; gap: 7px; }
.trace-teaser b { font-size: 3rem; }
.trace-teaser span { font: .65rem var(--mono); color: var(--muted); }

.matrix-hero { padding: clamp(40px, 7vw, 96px) 0 34px; }
.matrix-hero h1 { max-width: 15ch; margin: 16px 0 20px; font: 700 clamp(3.25rem, 9vw, 8.5rem)/.87 "Barlow Condensed", var(--sans); letter-spacing: -.032em; }
.matrix-hero h1 em { font-style: normal; }
.matrix-board { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.matrix-row { display: grid; grid-template-columns: 1.12fr repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; padding: 16px 20px; background: var(--surface); }
.matrix-row strong { font-size: clamp(.84rem, 2vw, 1.35rem); }
.matrix-row strong span { color: var(--muted); font-size: .78rem; }
.matrix-board > a { padding: 12px 20px; background: var(--accent); color: var(--on-accent); font-size: .85rem; }
.matrix-board > a:hover { text-decoration: underline; }
.matrix-teaser { display: flex; flex-wrap: wrap; gap: 5px; align-self: end; }
.matrix-teaser span { border: 1px solid var(--line); padding: 5px 8px; font: .69rem var(--mono); }

.surface-diagram { background: radial-gradient(ellipse at 50% 45%, #204e50, transparent 75%), var(--paper); border: 1px solid var(--line); border-radius: 24px; display: grid; justify-items: center; padding: clamp(20px, 4vw, 44px); }
.surface-node { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 23px; font: .84rem var(--mono); text-align: center; }
.surface-line { height: 27px; width: 1px; background: var(--accent); }
.surface-api { padding: 14px 24px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-align: center; }
.surface-api:hover { text-decoration: underline; }
.surface-result { display: flex; align-items: baseline; gap: 12px; margin-top: 25px; flex-wrap: wrap; justify-content: center; }
.surface-result strong { color: var(--accent); font-size: 2.4rem; line-height: 1; letter-spacing: -.07em; }
.surface-result span { font-size: .82rem; color: var(--muted); }
.surface-teaser { align-self: end; text-align: center; display: grid; gap: 4px; width: 145px; }
.surface-teaser > * { padding: 4px; border-radius: 4px; background: var(--surface); font: .68rem var(--mono); }
.surface-teaser b { background: var(--accent); color: var(--on-accent); }
@media (max-width: 520px) {
  .matrix-row { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 13px; }
  .matrix-row > .label { grid-column: 1 / -1; }
  .matrix-row strong span { display: none; }
}

.gallery-group { font-size: 1.42rem; letter-spacing: -.04em; margin-bottom: 14px; }
.new-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 42px; }
.concept-copy h3 { margin-block: 4px 8px; font-size: 1.65rem; letter-spacing: -.045em; }
.round-hero { padding-block: clamp(38px, 6vw, 78px); }
.round-hero h1 { font-size: clamp(3rem, 8.8vw, 8rem); font-weight: 650; line-height: .89; letter-spacing: -.085em; margin: 16px 0 22px; }
.role-lens { --paper:#120b30; --surface:#241550; --ink:#fbf7ff; --muted:#d3c9ed; --line:#66549e; --accent:#f4b8ff; --on-accent:#32133f; }
.lens-heading { max-width: 900px; }
.lens-selector { display: flex; gap: 7px; flex-wrap: wrap; margin: 27px 0 10px; }
.lens-selector button, .lens-mini span { color: var(--ink); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 7px 13px; }
.lens-selector button[aria-pressed=true] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.lens-result { display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: 22px; background: linear-gradient(110deg, #34206c, #542565); border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 4vw, 45px); }
.lens-result h2 { font-size: clamp(1.5rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.055em; }
.lens-result p { color: var(--muted); margin-block: 12px; max-width: 50ch; }
.lens-result a, .parser-heading > a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.lens-number { display: grid; justify-items: end; }
.lens-number strong { font: 700 clamp(3.6rem, 9vw, 7.7rem)/.85 "Barlow Condensed", var(--sans); white-space: nowrap; color: var(--accent); }
.lens-number span { margin-top: 8px; font-size: .87rem; color: var(--muted); }
.lens-mini, .decision-mini { display: flex; flex-wrap: wrap; gap: 5px; }
.lens-mini span, .decision-mini span { font: .64rem var(--mono); padding: 5px 7px; }

.decision-record { --paper:#e9f4fb; --surface:#f7fbff; --ink:#142a45; --muted:#405b72; --line:#9bb9cf; --accent:#164979; --on-accent:#f2fbff; }
.decision-heading h1 { font-family: "Barlow Condensed", var(--sans); text-transform: uppercase; letter-spacing: -.025em; }
.decision-hero { background-image: linear-gradient(#8fb2cc32 1px, transparent 1px),linear-gradient(90deg,#8fb2cc32 1px,transparent 1px); background-size: 26px 26px; padding-inline: clamp(14px, 4vw, 45px); border-bottom: 1px solid var(--line); }
.decision-heading .lede { max-width: none; }
.decision-record .decision-record { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.decision-record .decision-record > div { background: var(--surface); padding: clamp(14px,2.5vw,28px); }
.decision-record .decision-record h2 { font-size: clamp(1.16rem,2vw,1.7rem); letter-spacing: -.045em; line-height: 1.1; margin: 8px 0; }
.decision-record .decision-record p { color: var(--muted); font-size: .9rem; }
.decision-record .decision-record > a { grid-column: 1/-1; padding: 11px 18px; color: var(--on-accent); background: var(--accent); font-size: .86rem; }
.decision-mini span { background: var(--surface); border: 1px solid var(--line); }

.parser-bench { --paper:#281404; --surface:#3a2109; --ink:#fff6da; --muted:#e5c79e; --line:#86542a; --accent:#ffc565; --on-accent:#2c1705; }
.parser-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(22px, 4vw, 60px); }
.parser-heading h1 { font-size: clamp(3rem, 6.5vw, 6.4rem); }
.parser-demo { padding: clamp(16px, 3vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: 17px; }
.parser-demo h2 { font-size: 1.42rem; letter-spacing: -.045em; }
.parser-demo p { font-size: .88rem; color: var(--muted); margin-top: 8px; }
.parser-form { margin-top: 16px; }
.parser-form label { font-size: .8rem; }
.parser-input { display: flex; gap: 6px; margin-top: 4px; }
.parser-input input { flex: 1; min-width: 0; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: var(--paper); font: 1.1rem var(--mono); }
.parser-input button, .parser-examples button { color: var(--on-accent); border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); padding: 7px 12px; }
.parser-examples { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.parser-examples button { color: var(--muted); background: var(--paper); border-color: var(--line); padding: 5px 8px; font-size: .72rem; }
.parser-output { border-top: 1px solid var(--line); min-height: 98px; }
.parser-output p, .parser-mini { color: var(--accent); }
.parser-output pre { overflow-x: auto; font: .88rem/1.35 var(--mono); }
.parser-mini { font: .86rem/1.2 var(--mono); }

.engineering-brief { --paper:#f7f6f3; --surface:#efede7; --ink:#252424; --muted:#5f5d56; --line:#bdb9ae; --accent:#962c36; --on-accent:#fff5f2; }
.brief-hero { display: grid; grid-template-columns: .7fr 1.3fr; gap: 28px; border-bottom: 1px solid var(--line); }
.brief-side { border-left: 5px solid var(--accent); padding-left: 20px; }
.brief-side h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(3.5rem, 9vw, 7.6rem); letter-spacing: -.035em; }
.brief-side > a, .brief-body > a { display: inline-block; color: var(--accent); text-decoration: underline; text-underline-offset: .2em; margin: 13px 12px 0 0; }
.brief-body h2 { max-width: 18ch; font-size: clamp(1.55rem, 4vw, 3.45rem); letter-spacing: -.05em; line-height: 1.06; }
.brief-body dl, .brief-mini { display: grid; grid-template-columns: repeat(2,minmax(0, 1fr)); gap: 1px; margin-top: 20px; border: 1px solid var(--line); background: var(--line); }
.brief-body dl div, .brief-mini b { padding: 12px; background: var(--surface); }
.brief-body dt { font-weight: 650; font-size: clamp(.98rem, 2vw, 1.45rem); color: var(--accent); }
.brief-body dd { color: var(--muted); font-size: .87rem; }
.brief-mini { align-self: end; margin-top: 10px; }
.brief-mini b { padding: 5px; color: var(--accent); font: .69rem var(--mono); }
@media (max-width: 1080px) { .new-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 740px) {
  .lens-result, .decision-record .decision-record, .parser-hero, .brief-hero { grid-template-columns: 1fr; }
  .lens-number { justify-items: start; }
  .round-hero h1 { font-size: clamp(3rem, 10.8vw, 5rem); }
}
@media (max-width: 520px) { .new-grid { grid-template-columns: 1fr; } }

.gallery-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; color: var(--muted); font-size: .88rem; }
.gallery-nav a:hover { color: var(--ink); text-decoration: underline; }
.markdown p, .markdown li { overflow-wrap: anywhere; }

/* Shared homepage controls when a studio design is selected. */
.site-shell > .design-switcher { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font: 12px var(--mono); }
.design-switcher select { max-width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); font: inherit; }
.design-switcher [role="status"] { margin-left: auto; }
.site-nav .monogram { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 600 .82rem var(--mono); }
.site-nav .identity small { display: block; color: var(--muted); font: .65rem var(--mono); }
.site-shell > footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
@media (max-width: 600px) {
  .design-switcher [role="status"] { width: 100%; margin-left: 0; }
  .site-nav .identity small { display: none; }
}