:root {
  --ink: #151713;
  --paper: #f7f5ec;
  --paper-2: #ecebe1;
  --muted: #7a7c72;
  --line: #d7d6cc;
  --lime: #d7f36b;
  --cobalt: #3c5cff;
  --coral: #ff7a66;
  --white: #fffef8;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); overflow-x: hidden; }
body, button, input, select { font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.section-pad { padding-left: clamp(24px, 6vw, 96px); padding-right: clamp(24px, 6vw, 96px); }
.topbar { height: 76px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 clamp(24px, 6vw, 96px); justify-content: space-between; position: sticky; top: 0; z-index: 15; background: rgba(247,245,236,.93); backdrop-filter: blur(14px); }
.brand { display: inline-flex; gap: 11px; align-items: center; font-weight: 800; letter-spacing: .04em; font-size: 12px; }
.brand-type em { font-style: normal; color: var(--muted); margin: 0 3px; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: var(--lime); display: inline-flex; align-items: center; justify-content: center; position: relative; font: 700 20px Georgia, serif; overflow: hidden; }
.brand-mark span { transform: translate(-1px, 1px); }
.brand-mark i { position: absolute; height: 36px; width: 2px; background: var(--paper); right: 8px; transform: rotate(12deg); opacity: .82; }
.brand-mark.small { width: 22px; height: 22px; font-size: 16px; border-radius: 6px; }
.brand-mark.small i { height: 28px; right: 6px; }
.topnav { display: flex; gap: clamp(18px, 3vw, 42px); margin-left: auto; margin-right: clamp(24px, 4vw, 62px); }
.topnav a, .top-cta { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.topnav a { color: var(--muted); transition: color .2s ease; }
.topnav a:hover { color: var(--ink); }
.top-cta { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.top-cta span:last-child { font-size: 15px; }
.status-dot, .run-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(215,243,107,.2); }
.hero { min-height: 690px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); gap: clamp(38px, 8vw, 140px); align-items: center; padding-top: 68px; padding-bottom: 68px; }
.eyebrow, .section-kicker, .mini-label, .instrument-id, .console-label, .card-code, .source-meta, .footer-right, .pane-title, .run-dot + span, .select-wrap select { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { display: flex; gap: 11px; align-items: center; margin: 0 0 27px; color: var(--muted); }
.eyebrow-line { width: 38px; height: 1px; background: var(--ink); display: inline-block; }
.eyebrow-index { margin-left: auto; color: var(--ink); }
.hero h1 { font-size: clamp(54px, 7.2vw, 106px); line-height: .91; letter-spacing: -.075em; max-width: 750px; margin: 0; font-weight: 700; }
.hero h1 span, .section-heading em, .reference-head em { color: var(--muted); font-style: normal; }
.hero-lede { max-width: 520px; font-size: 18px; line-height: 1.5; color: #53564d; margin: 35px 0 30px; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.button { border: 0; display: inline-flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 12px; letter-spacing: .03em; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--ink); color: var(--paper); padding: 15px 18px 15px 20px; min-width: 170px; }
.button-primary span { color: var(--lime); font-size: 18px; }
.text-link { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.text-link span { color: var(--ink); font-size: 16px; margin-left: 7px; }
.hero-stats { display: flex; gap: 0; margin-top: 68px; }
.hero-stats div { min-width: 112px; padding-right: 24px; margin-right: 24px; border-right: 1px solid var(--line); }
.hero-stats div:last-child { border: 0; }
.hero-stats strong { font: 500 27px var(--mono); display: block; letter-spacing: -.1em; }
.hero-stats span { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: block; margin-top: 5px; }
.hero-instrument { max-width: 490px; width: 100%; background: var(--ink); color: var(--paper); box-shadow: 20px 24px 0 var(--lime); transform: rotate(1.3deg); justify-self: end; }
.instrument-head { min-height: 57px; border-bottom: 1px solid rgba(247,245,236,.18); display: flex; justify-content: space-between; padding: 0 24px; align-items: center; }
.instrument-head > div { display: flex; gap: 19px; align-items: center; }
.live-pill { display: inline-flex; gap: 8px; align-items: center; font: 600 10px var(--mono); color: var(--lime); letter-spacing: .09em; }
.instrument-id { color: #90958b; letter-spacing: .09em; }
.instrument-corner { color: var(--lime); font-size: 20px; }
.instrument-body { padding: 30px 34px 24px; }
.mini-label { color: #8f938b; margin-bottom: 20px; }
.matrix-bracket { display: inline-grid; position: relative; padding: 8px 23px; grid-auto-rows: 1fr; gap: 11px 16px; }
.matrix-bracket::before, .matrix-bracket::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.matrix-bracket::before { left: 0; border-left: 1px solid currentColor; }
.matrix-bracket::after { right: 0; border-right: 1px solid currentColor; }
.hero-matrix { grid-template-columns: repeat(2, 84px); color: var(--lime); margin-bottom: 26px; }
.matrix-cell { border: 0; outline: none; min-width: 0; background: transparent; color: inherit; text-align: center; font: 500 23px var(--mono); padding: 0; width: 100%; border-bottom: 1px solid transparent; transition: border-color .2s; }
.matrix-cell:focus { border-bottom-color: currentColor; }
.instrument-rule { height: 1px; background: rgba(247,245,236,.18); margin: 3px 0 19px; }
.result-row { display: grid; grid-template-columns: 90px 1fr; align-items: start; gap: 10px; margin: 16px 0; }
.result-row > span { color: #90958b; font: 11px var(--mono); }
.result-row strong { color: var(--lime); font: 500 17px var(--mono); }
.result-row pre { color: var(--paper); font: 12px/1.55 var(--mono); margin: -3px 0 0; white-space: pre; }
.instrument-foot { border-top: 1px solid rgba(247,245,236,.18); margin-top: 25px; padding-top: 14px; display: flex; justify-content: space-between; color: #777d74; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.instrument-note { background: var(--lime); color: var(--ink); padding: 16px 24px; font: 600 11px/1.45 var(--mono); }
.signal-strip { background: var(--ink); color: var(--paper); display: flex; justify-content: space-around; padding: 17px clamp(24px, 6vw, 96px); font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.signal-strip > div { display: flex; gap: 10px; align-items: center; }
.strip-number { color: var(--lime); }
.lab-section, .methods-section, .reference-section { padding-top: 112px; padding-bottom: 112px; }
.lab-section { background: var(--paper-2); }
.section-kicker { display: flex; align-items: center; gap: 13px; color: var(--muted); }
.section-kicker > span:first-child { color: var(--ink); }
.kicker-rule { height: 1px; background: var(--line); flex: 0 1 90px; }
.section-heading { margin-top: 33px; }
.split-heading { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(260px, .65fr); gap: 70px; align-items: end; }
.section-heading h2, .reference-head h2 { font-size: clamp(42px, 5.5vw, 74px); line-height: .96; letter-spacing: -.07em; margin: 0; }
.split-heading p { max-width: 420px; margin: 0 0 3px; color: #62655b; font-size: 15px; line-height: 1.55; }
.lab-console { background: var(--white); border: 1px solid var(--line); display: grid; grid-template-columns: 280px 1fr; margin-top: 58px; min-height: 670px; }
.console-sidebar { border-right: 1px solid var(--line); padding: 27px 16px 21px; display: flex; flex-direction: column; }
.console-label { color: var(--muted); padding: 0 13px 17px; }
.method-tab { display: grid; grid-template-columns: 25px 1fr 18px; align-items: center; gap: 8px; text-align: left; border: 0; border-top: 1px solid var(--line); background: transparent; min-height: 63px; padding: 10px 13px; transition: background .2s, padding .2s; }
.method-tab:hover, .method-tab.active { background: var(--ink); color: var(--paper); padding-left: 18px; }
.method-tab.active .tab-index, .method-tab.active .tab-arrow { color: var(--lime); }
.tab-index, .tab-arrow { font: 10px var(--mono); color: var(--muted); }
.method-tab strong { display: block; font-size: 12px; font-weight: 700; }
.method-tab small { display: block; color: var(--muted); font: 9px var(--mono); margin-top: 5px; }
.method-tab.active small { color: #90958b; }
.tab-arrow { text-align: right; font-size: 14px; }
.sidebar-note { border-top: 1px solid var(--line); margin-top: auto; padding: 19px 13px 0; display: flex; gap: 10px; color: var(--muted); }
.note-mark { color: var(--cobalt); font: 18px var(--mono); }
.sidebar-note p { font-size: 11px; line-height: 1.5; margin: 0; }
.sidebar-note strong { color: var(--ink); }
.console-main { min-width: 0; }
.console-toolbar { height: 68px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 0 26px; }
.console-toolbar > div { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.run-dot { width: 6px; height: 6px; box-shadow: 0 0 0 4px rgba(215,243,107,.3); background: var(--cobalt); }
.select-wrap { display: none; align-items: center; position: relative; }
.select-wrap select { border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 9px 28px 9px 11px; appearance: none; letter-spacing: .05em; }
.select-wrap > span:last-child { position: absolute; right: 9px; pointer-events: none; }
.console-grid { display: grid; grid-template-columns: minmax(230px, .85fr) minmax(300px, 1.15fr); min-height: 440px; }
.input-pane, .output-pane { padding: 27px 28px; }
.input-pane { border-right: 1px solid var(--line); }
.pane-title { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 34px; }
.pane-title span:first-child { color: var(--ink); }
.editor-matrix { color: var(--ink); grid-template-columns: repeat(3, 61px); gap: 13px 10px; display: inline-grid; }
.editor-matrix .matrix-cell { font-size: 17px; color: var(--ink); border-bottom-color: transparent; padding: 3px 1px; }
.editor-matrix .matrix-cell:focus { border-bottom-color: var(--cobalt); }
.input-hint { display: flex; gap: 8px; align-items: center; color: var(--muted); margin: 30px 0 38px; font: 10px var(--mono); }
.lime-key { width: 6px; height: 6px; background: var(--lime); display: inline-block; }
.hint-divider { height: 14px; width: 1px; background: var(--line); margin: 0 5px; }
.ghost-button { border: 0; padding: 0; background: transparent; color: var(--muted); font: 10px var(--mono); }
.ghost-button:hover { color: var(--ink); }
.button-run { width: 100%; background: var(--ink); color: var(--paper); padding: 14px 16px 14px 18px; }
.button-run .run-glyph { color: var(--lime); font: 20px var(--mono); }
.output-content { min-height: 250px; }
.trace-title { color: var(--cobalt); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.result-block { margin-bottom: 19px; }
.result-label { color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 7px; }
.matrix-output { font: 12px/1.6 var(--mono); white-space: pre; margin: 0; color: var(--ink); }
.scalar-output { font: 21px var(--mono); color: var(--ink); margin: 0; }
.trace-line { color: var(--muted); font: 10px/1.5 var(--mono); margin: 10px 0; }
.metrics { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 10px; }
.metric { border: 1px solid var(--line); padding: 8px 9px; min-width: 85px; }
.metric strong { display: block; font: 14px var(--mono); }
.metric span { display: block; margin-top: 4px; color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }
.visual-strip { border-top: 1px solid var(--line); min-height: 105px; padding: 18px 28px 20px; display: flex; align-items: end; gap: 5px; }
.visual-caption { align-self: center; margin-right: 15px; color: var(--muted); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; max-width: 110px; }
.visual-bars { display: flex; align-items: end; gap: 8px; height: 58px; flex: 1; }
.visual-bar { background: var(--cobalt); min-width: 12px; max-width: 46px; flex: 1; transition: height .3s ease; position: relative; }
.visual-bar:nth-child(2n) { background: var(--lime); }
.visual-bar::after { content: attr(data-label); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); color: var(--muted); font: 8px var(--mono); }
.method-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 57px; }
.method-card { background: var(--white); border: 1px solid var(--line); padding: 25px; min-height: 245px; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.method-card:hover { transform: translateY(-3px); box-shadow: 7px 8px 0 var(--lime); }
.card-top { display: flex; justify-content: space-between; color: var(--muted); }
.card-symbol { color: var(--cobalt); font: 20px var(--mono); }
.method-card h3 { font: 600 clamp(30px, 4vw, 50px) var(--sans); letter-spacing: -.07em; margin: 31px 0 11px; }
.method-card p { color: #696c62; font-size: 13px; line-height: 1.5; max-width: 300px; margin: 0; }
.card-foot { display: flex; justify-content: space-between; align-items: end; gap: 10px; border-top: 1px solid var(--line); margin-top: auto; padding-top: 17px; color: var(--muted); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.card-foot button { border: 0; background: transparent; font: inherit; color: var(--ink); padding: 0; white-space: nowrap; }
.card-foot button:hover { color: var(--cobalt); }
.featured-card { background: var(--ink); color: var(--paper); box-shadow: 8px 9px 0 var(--lime); }
.featured-card p, .featured-card .card-foot { color: #9aa095; }
.featured-card .card-foot { border-color: rgba(247,245,236,.2); }
.featured-card .card-foot button { color: var(--lime); }
.featured-card .card-symbol { color: var(--lime); }
.spectral-card { background: #e2e4fc; }
.wide-card { grid-column: span 2; min-height: 245px; display: grid; grid-template-columns: 1fr 1fr; background: var(--lime); }
.wide-card .card-symbol { color: var(--ink); }
.spectrum-art { height: 160px; align-self: end; display: flex; justify-content: center; align-items: end; gap: 8px; padding: 15px 30px 0; border-bottom: 1px solid rgba(21,23,19,.4); }
.spectrum-art i { display: block; width: 22px; background: var(--ink); position: relative; }
.spectrum-art i::after { content: ""; position: absolute; width: 100%; height: 1px; background: var(--paper); top: 15px; left: 0; opacity: .7; }
.reference-section { background: var(--paper-2); }
.reference-head { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-top: 34px; }
.reference-head p { max-width: 420px; color: #62655b; font-size: 15px; line-height: 1.55; margin: 29px 0 0; }
.source-meta { display: flex; flex-direction: column; gap: 13px; align-items: end; color: var(--muted); letter-spacing: .04em; }
.source-chip { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.source-meta a { color: var(--cobalt); text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 12px; }
.code-window { margin-top: 55px; background: #1b1d19; color: #edf0de; overflow: hidden; box-shadow: 12px 13px 0 var(--lime); }
.code-bar { height: 43px; display: flex; justify-content: space-between; align-items: center; padding: 0 17px; border-bottom: 1px solid rgba(247,245,236,.15); color: #90988d; font-size: 9px; }
.code-bar > span:first-child { display: flex; gap: 6px; }
.code-bar i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #4d5448; }
.code-bar i:first-child { background: var(--coral); }
.code-bar i:nth-child(2) { background: var(--lime); }
.code-window pre { max-height: 540px; overflow: auto; padding: 26px 28px 31px; margin: 0; font: 11px/1.65 var(--mono); tab-size: 4; }
.code-window code { white-space: pre; }
.footer { min-height: 100px; display: flex; align-items: center; gap: 20px; background: var(--ink); color: var(--paper); }
.footer-brand { display: flex; align-items: center; gap: 9px; font: 700 11px var(--mono); }
.footer p { margin: 0; color: #8f9589; font-size: 12px; }
.footer-right { display: flex; gap: 22px; align-items: center; margin-left: auto; color: #8f9589; letter-spacing: .04em; }
.footer-right a { color: var(--lime); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mono { font-family: var(--mono); }
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; padding-top: 63px; }
  .hero-instrument { justify-self: start; max-width: 520px; margin: 15px 0 20px 8%; }
  .topnav { margin-left: auto; margin-right: 20px; }
  .lab-console { grid-template-columns: 220px 1fr; }
  .console-grid { grid-template-columns: 1fr; }
  .input-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .method-map { grid-template-columns: repeat(2, 1fr); }
  .wide-card { grid-column: span 2; }
}
@media (max-width: 680px) {
  .topbar { height: 62px; padding: 0 18px; }
  .topnav { display: none; }
  .top-cta { font-size: 9px; }
  .hero { padding-top: 50px; padding-bottom: 58px; min-height: auto; }
  .hero h1 { font-size: clamp(48px, 15vw, 75px); }
  .hero-lede { font-size: 16px; margin-top: 25px; }
  .hero-actions { flex-wrap: wrap; gap: 18px; }
  .hero-stats { margin-top: 47px; gap: 0; }
  .hero-stats div { min-width: 86px; padding-right: 14px; margin-right: 14px; }
  .hero-stats strong { font-size: 22px; }
  .hero-stats span { font-size: 8px; }
  .hero-instrument { margin-left: 0; transform: none; box-shadow: 9px 10px 0 var(--lime); }
  .instrument-head { padding: 0 16px; }
  .instrument-head > div { gap: 11px; }
  .instrument-id { display: none; }
  .instrument-body { padding: 25px 22px 21px; }
  .hero-matrix { grid-template-columns: repeat(2, 70px); }
  .signal-strip { flex-direction: column; align-items: flex-start; gap: 11px; padding-top: 18px; padding-bottom: 18px; }
  .lab-section, .methods-section, .reference-section { padding-top: 76px; padding-bottom: 75px; }
  .section-kicker { font-size: 8px; gap: 8px; }
  .kicker-rule { flex-basis: 25px; }
  .split-heading { display: block; }
  .section-heading h2, .reference-head h2 { font-size: 50px; }
  .split-heading p { margin-top: 25px; font-size: 14px; }
  .lab-console { margin-top: 38px; display: block; }
  .console-sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 12px 10px; display: grid; grid-template-columns: 1fr 1fr; }
  .console-label, .sidebar-note { grid-column: 1 / -1; }
  .console-label { padding-bottom: 11px; }
  .method-tab { min-height: 55px; border-top: 0; border-bottom: 1px solid var(--line); padding: 8px 8px; }
  .method-tab:hover, .method-tab.active { padding-left: 12px; }
  .method-tab strong { font-size: 10px; }
  .method-tab small { font-size: 8px; }
  .sidebar-note { margin-top: 17px; padding: 17px 8px 6px; }
  .console-toolbar { padding: 0 17px; height: 62px; }
  .console-toolbar > div span:last-child { font-size: 8px; }
  .select-wrap { display: flex; }
  .console-grid { min-height: 0; }
  .input-pane, .output-pane { padding: 23px 19px; }
  .input-pane { min-height: 300px; }
  .editor-matrix { grid-template-columns: repeat(3, 55px); }
  .visual-strip { padding: 17px 19px 22px; }
  .method-map { grid-template-columns: 1fr; gap: 12px; }
  .wide-card { grid-column: auto; display: block; }
  .spectrum-art { margin-top: 24px; }
  .reference-head { display: block; }
  .source-meta { align-items: flex-start; margin-top: 30px; }
  .code-window { margin-top: 36px; box-shadow: 7px 8px 0 var(--lime); }
  .code-window pre { padding: 20px 17px 25px; font-size: 9px; }
  .footer { flex-wrap: wrap; padding-top: 27px; padding-bottom: 27px; }
  .footer p { width: 100%; order: 3; }
  .footer-right { margin-left: 0; font-size: 8px; width: 100%; justify-content: space-between; }
}