:root {
  --paper: #fff4dd;
  --paper-deep: #f2dfc4;
  --ink: #30202e;
  --muted: #756073;
  --line: #ddc8bd;
  --orange: #693f72;
  --orange-light: #c986a4;
  --green: #f0bd5b;
  --night: #2f1d35;
  --mono: "DM Mono", ui-monospace, monospace;
  --sans: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 18% 5%, #fffbee 0, transparent 28%), var(--paper); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; }
code, pre { font-family: var(--mono); }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .16; z-index: 20; 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='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.site-header { width: min(1280px, calc(100% - 48px)); height: 84px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.brand svg { width: 34px; fill: #8f4c78; stroke: var(--ink); stroke-width: 1.4; }
.brand svg circle { fill: var(--paper); }
nav { display: flex; align-items: center; gap: 32px; font-size: 13px; font-weight: 600; }
nav a { text-decoration: none; color: var(--muted); transition: color .2s ease; }
nav a:hover { color: var(--ink); }
.nav-github { border-left: 1px solid var(--line); padding-left: 32px; color: var(--ink); }
.menu-button { display: none; }

.hero { min-height: 760px; display: grid; grid-template-columns: 1fr .9fr; gap: 86px; align-items: center; padding-block: 64px 105px; }
.eyebrow, .section-index { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(105,63,114,.14); }
h1 { margin: 28px 0 28px; color: #54305f; font-size: clamp(62px, 7.2vw, 106px); line-height: .88; letter-spacing: -.075em; font-weight: 700; }
h1 em { color: #a34f79; font-style: normal; font-weight: 600; }
.hero-lede { max-width: 620px; font-size: 20px; line-height: 1.6; color: var(--muted); }
.hero-actions { display: flex; gap: 12px; margin-top: 36px; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 0 20px; border: 1px solid var(--ink); text-decoration: none; font-size: 13px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 4px 4px 0 var(--ink); }
.button-primary { background: var(--orange); border-color: var(--orange); color: white; }
.button-secondary { background: transparent; }
.hero-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line); }
.hero-facts div { display: grid; gap: 7px; }
.hero-facts dt { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.hero-facts dd { margin: 0; font: 12px var(--mono); }

.compiler-visual { position: relative; padding: 46px 44px 32px; border: 1px solid rgba(82,47,65,.22); border-radius: 32px; background: rgba(255,249,230,.72); box-shadow: 18px 22px 55px rgba(87,43,74,.16), 7px 7px 0 rgba(105,63,114,.12); transform: rotate(.5deg); }
.visual-glow { position: absolute; width: 230px; height: 230px; right: -55px; top: -65px; border-radius: 50%; background: radial-gradient(circle, rgba(201,134,164,.32), transparent 68%); }
.visual-card { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; min-height: 112px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: #fffaf0; box-shadow: 0 10px 28px rgba(63,32,56,.08); }
.visual-card span { grid-column: 1 / -1; align-self: start; color: var(--muted); font: 9px var(--mono); letter-spacing: .11em; }
.visual-card strong { color: #59345f; font-size: 29px; letter-spacing: -.04em; }
.visual-card code { color: var(--muted); font-size: 10px; }
.ir-card { margin-inline: 22px; border-color: #c9a6bd; background: #f4e7ee; }
.native-card { border-color: #6d416f; background: var(--night); color: #fff8ed; }
.native-card span,.native-card code { color: #cdb5ca; }.native-card strong { color: #ffe3a0; }
.visual-connector { position: relative; height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #a06d91; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.visual-connector i { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed #c29caf; }.visual-connector span,.visual-connector b { position: relative; padding: 3px 6px; background: var(--paper); }.visual-connector b { font-size: 13px; }
.compiler-visual > p { margin: 25px 0 0; color: var(--muted); text-align: center; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.terminal-wrap { position: relative; }
.terminal { position: relative; z-index: 2; background: var(--night); color: #ecebdc; border: 1px solid #000; box-shadow: 16px 18px 0 #d9d0c3; transform: rotate(1deg); }
.terminal-bar { height: 48px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid #383d38; }
.terminal-bar span { width: 9px; height: 9px; border-radius: 50%; background: #4a4f49; }
.terminal-bar span:first-child { background: var(--orange); }
.terminal-bar p { margin: 0 auto; padding-right: 35px; font: 10px var(--mono); color: #858b82; }
.terminal pre { min-height: 390px; margin: 0; padding: 34px; font-size: 13px; line-height: 1.8; overflow: auto; }
.code-muted { color: #737a70; }.code-key { color: var(--green); }.code-string { color: #ffc09c; }.code-result { color: var(--green); }
.terminal-foot { height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 22px; border-top: 1px solid #383d38; color: #9ca198; font: 10px var(--mono); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.orbit { position: absolute; border: 1px solid var(--orange-light); border-radius: 50%; }
.orbit-one { width: 170px; height: 170px; right: -72px; top: -70px; }
.orbit-two { width: 95px; height: 95px; left: -48px; bottom: -45px; border-color: var(--line); }

.statement { border-top: 1px solid var(--line); padding-block: 120px 100px; }
.section-index { color: var(--orange); margin-bottom: 28px; }
.statement h2, .section-heading h2, .closing h2 { max-width: 880px; margin: 0; font-size: clamp(42px, 5.2vw, 72px); line-height: 1.03; letter-spacing: -.055em; }
.statement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; width: 72%; margin: 50px 0 0 auto; color: var(--muted); font-size: 16px; line-height: 1.75; }
.statement-grid p { margin: 0; }.statement-grid a { text-decoration-color: var(--orange); text-underline-offset: 4px; }.statement-grid code { font-size: .88em; color: var(--ink); }

.capabilities { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); margin-bottom: 120px; }
.capability { min-height: 380px; padding: 30px; position: relative; }
.capability + .capability { border-left: 1px solid var(--line); }
.cap-number { margin: 0; font: 10px var(--mono); color: var(--muted); }
.cap-icon { margin: 58px 0 48px; color: var(--orange); font: 40px var(--mono); }
.capability h3 { margin: 0 0 16px; font-size: 23px; letter-spacing: -.035em; }
.capability p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.pipeline { padding-block: 120px; background: var(--night); color: #f4f1e8; }
.section-heading { display: grid; grid-template-columns: 1fr 2.1fr 1fr; gap: 30px; align-items: start; }
.section-heading .section-index { margin-top: 12px; }
.section-heading h2 { font-size: clamp(40px, 4vw, 60px); }
.section-heading > p:last-child { margin: 10px 0 0; color: #979c94; font-size: 14px; line-height: 1.7; }
.pipeline-track { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: center; margin-top: 90px; }
.pipeline-track i { color: #5d625b; font-style: normal; }
.stage { min-height: 165px; display: flex; flex-direction: column; padding: 18px; border: 1px solid #424740; }
.stage span { font: 10px var(--mono); color: #777d74; }.stage strong { margin: auto 0 8px; font-size: 15px; }.stage small { color: #8f948d; font: 9px/1.5 var(--mono); }
.stage-accent { border-color: #a55a83; background: #a55a83; color: #fff8ed; }.stage-accent span,.stage-accent small { color: #f5d6e2; }

.status { padding-block: 120px; }
.status .section-heading { color: var(--ink); }
.status .section-heading > p:last-child { color: var(--muted); }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 80px; background: var(--line); border: 1px solid var(--line); }
.status-list { padding: 38px; background: var(--paper); }
.status-list h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 30px; font-size: 15px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }.supported { background: #79a900; }.experimental { background: var(--orange); }
.status-list ul { list-style: none; padding: 0; margin: 0; }
.status-list li { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-top: 1px solid var(--line); font-size: 13px; }
.status-list b { color: #648d00; font: 9px var(--mono); text-transform: uppercase; }.muted-list b { color: var(--orange); }

.quickstart { padding-block: 120px; background: #ad668c; color: #fff8ed; }
.quickstart-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; }
.quickstart .section-heading { display: block; }.quickstart .section-index { color: #41233f; }.quickstart .section-heading p:last-of-type { color: #f7deea; max-width: 480px; margin: 25px 0; }
.text-link { font-size: 13px; font-weight: 700; text-underline-offset: 5px; }
.command-card { position: relative; background: var(--night); color: #f1eee5; border: 1px solid #000; box-shadow: 12px 12px 0 rgba(70,30,60,.28); }
.command-tabs { height: 48px; display: flex; align-items: center; gap: 22px; padding: 0 22px; border-bottom: 1px solid #3d423c; color: #7d837b; font: 10px var(--mono); }.command-tabs .active { color: white; }
.command-card pre { margin: 0; padding: 30px; font-size: 12px; line-height: 1.8; overflow: auto; }
.copy-button { position: absolute; right: 12px; top: 10px; border: 1px solid #50554f; background: #292d29; color: #cacdc7; padding: 7px 10px; font: 9px var(--mono); cursor: pointer; }

.closing { padding-block: 140px; text-align: center; }.closing .eyebrow { justify-content: center; }.closing h2 { margin: 28px auto; }.closing > p:not(.eyebrow) { max-width: 600px; margin: auto; color: var(--muted); line-height: 1.7; }.closing .hero-actions { justify-content: center; }
footer { background: var(--night); color: white; padding-block: 50px; }.footer-inner { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; }.footer-inner p { margin: 0; color: #888e85; font-size: 11px; line-height: 1.7; }.footer-inner > div { display: flex; justify-content: flex-end; gap: 25px; }.footer-inner a { font-size: 11px; text-underline-offset: 4px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity: 1; transform: none; }.reveal-delay { transition-delay: .12s; }.reveal-delay-2 { transition-delay: .22s; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 55px; }.compiler-visual,.terminal-wrap { width: min(680px, 100%); margin: auto; }.statement-grid { width: 100%; }.capabilities { grid-template-columns: 1fr; }.capability { min-height: 290px; }.capability + .capability { border-left: 0; border-top: 1px solid var(--line); }.cap-icon { margin: 35px 0; }.section-heading { grid-template-columns: 1fr 2fr; }.section-heading > p:last-child { grid-column: 2; }.pipeline-track { grid-template-columns: 1fr; gap: 8px; }.pipeline-track i { transform: rotate(90deg); justify-self: center; }.stage { min-height: 110px; }.quickstart-grid { grid-template-columns: 1fr; gap: 55px; }
}

@media (max-width: 680px) {
  .shell,.site-header { width: min(100% - 30px, 1180px); }.site-header { height: 70px; }.menu-button { display: block; border: 0; background: transparent; font: 11px var(--mono); text-transform: uppercase; }.site-header nav { display: none; position: absolute; top: 70px; left: 0; right: 0; padding: 22px; background: var(--paper); border: 1px solid var(--line); flex-direction: column; align-items: flex-start; gap: 20px; }.site-header nav.open { display: flex; }.nav-github { border: 0; padding: 0; }.hero { min-height: auto; padding-block: 55px 85px; }h1 { font-size: clamp(58px, 18vw, 88px); }.hero-lede { font-size: 17px; }.hero-actions { flex-direction: column; }.button { width: 100%; }.hero-facts { gap: 14px; }.compiler-visual { padding: 25px 16px 22px; border-radius: 22px; }.visual-card { padding: 18px; }.visual-card strong { font-size: 23px; }.visual-card code { font-size: 8px; }.ir-card { margin-inline: 10px; }.terminal pre { min-height: 340px; padding: 22px; font-size: 11px; }.statement { padding-block: 85px; }.statement-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 35px; }.capabilities { margin-bottom: 85px; }.pipeline,.status,.quickstart { padding-block: 85px; }.section-heading { display: block; }.section-heading > p:last-child { margin-top: 22px; }.status-grid { grid-template-columns: 1fr; margin-top: 50px; }.status-list { padding: 26px 20px; }.status-list li { font-size: 12px; }.command-card pre { padding: 24px 18px; font-size: 10px; }.closing { padding-block: 95px; }.footer-inner { grid-template-columns: 1fr; gap: 28px; }.footer-inner > div { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; } }