/* ZLang HDL - shared visual system. No external fonts or dependencies. */
@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, pre { margin: 0; }
  button, input, select, textarea { font: inherit; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  img, svg, video { display: block; max-width: 100%; }
  img, video { height: auto; }
  button { color: inherit; }
  [hidden] { display: none !important; }
  /* Templates may pre-mark inactive panels hidden; retain a readable no-JS page. */
  .workflow:not([data-workflow-enhanced]) [data-panel] { display: block !important; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --bg: #070d11;
    --surface: #0e181f;
    --surface-raised: #16252d;
    --gold: #f2c96d;
    --gold-light: #ffe19a;
    --teal: #1dd6dc;
    --text: #eef4f7;
    --muted: #adbfc9;
    --subtle: #90a7b4;
    --line: #213742;
    --line-strong: #42616e;
    --error: #ffb1a3;
    --success: #a6dfbb;
    --sans: "Inter", "Aptos", "Helvetica Neue", Arial, sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --radius: 14px;
    --radius-sm: 8px;
    --wrap: 1240px;
    --gutter: clamp(20px, 4vw, 64px);
    --section-space: clamp(72px, 9vw, 136px);
    --shadow: 0 24px 70px rgb(0 0 0 / 22%);
    --ease: cubic-bezier(.2, .7, .3, 1);
  }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: 110px; }
  body {
    min-width: 280px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  ::selection { background: var(--gold); color: var(--bg); }
  a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: .24em; }
  a:hover { text-decoration-color: var(--gold); }
  button, [role="tab"] { cursor: pointer; }
  button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .55; }
  :focus-visible { outline: 2px solid var(--teal); outline-offset: 5px; }
  :target { scroll-margin-top: 112px; }
  h1, h2, h3, h4 { font-weight: 650; text-wrap: balance; }
  h1 { font-size: clamp(3.5rem, 7.65vw, 6.875rem); line-height: .98; letter-spacing: -.065em; }
  h2 { font-size: clamp(2rem, 4.15vw, 3.625rem); line-height: 1.08; letter-spacing: -.045em; }
  h3 { font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.2; letter-spacing: -.025em; }
  h4 { font-size: 1.1rem; line-height: 1.35; letter-spacing: -.015em; }
  p { text-wrap: pretty; }
  p + p { margin-top: 1em; }
  strong { font-weight: 650; }
  small { font-size: .8125rem; }
  code, pre, kbd, samp { font-family: var(--mono); }
  :not(pre) > code { padding: .16em .38em; border: 1px solid var(--line); border-radius: 4px; color: var(--teal); background: var(--surface); font-size: .86em; overflow-wrap: anywhere; }
  hr { border: 0; border-top: 1px solid var(--line); margin-block: 2rem; }
}

@layer layout {
  .wrap { width: min(var(--wrap), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
  .section { padding-block: var(--section-space); }
  .section + .section { border-top: 1px solid var(--line); }
  .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(32px, 4.5vw, 56px); }
  .section-head > :first-child { max-width: 760px; }
  .section-head > p { max-width: 410px; color: var(--muted); }
  .section-head h2 + p { max-width: 640px; margin-top: 20px; color: var(--muted); font-size: 1.0625rem; }
  .grid { display: grid; gap: 24px; }
  .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid > *, .hero > *, .account-layout > *, .form-grid > * { min-width: 0; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 88px); }
}

@layer components {
  /* .nav may itself be the header or sit inside .site-header. */
  .site-header, body > header:has(.nav) { position: relative; z-index: 30; border-bottom: 1px solid var(--line); background: var(--bg); }
  .nav { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 96px; }
  header.nav { display: block; position: relative; z-index: 30; border-bottom: 1px solid var(--line); background: var(--bg); }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 96px; }
  .nav .brand, .nav .logo, .nav > a:first-child { flex-shrink: 0; text-decoration: none; }
  .nav .brand img, .nav .logo img, .nav > a:first-child > img,
  .nav .brand svg, .nav .logo svg { width: 198px; height: 45px; object-fit: contain; }
  .nav-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 28px; margin: 0; padding: 0; list-style: none; }
  .nav-links > a, .nav-links > li > a { display: inline-flex; align-items: center; gap: 6px; padding-block: 12px; font-size: .875rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .18s var(--ease); }
  .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
  .nav-links a[aria-current="page"]:not(.button) { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 8px; }
  .nav-links .button { color: var(--bg); padding: 10px 18px; min-height: 42px; font-size: .8125rem; }
  .nav-links .button.secondary { color: var(--text); }
  .nav-toggle { display: none; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; font-family: var(--mono); font-size: .75rem; }
  .nav-toggle svg { width: 20px; height: 20px; }
  .nav-dropdown { position: relative; color: var(--muted); font-size: .875rem; }
  .nav-dropdown summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 12px; list-style: none; cursor: pointer; }
  .nav-dropdown summary::-webkit-details-marker { display: none; }
  .nav-dropdown summary::after { content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .nav-dropdown[open] summary { color: var(--text); }
  .nav-dropdown[open] summary::after { transform: translateY(2px) rotate(225deg); }
  .nav-dropdown > div { position: absolute; z-index: 40; top: calc(100% + 12px); left: -18px; display: grid; gap: 2px; width: 228px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: #0d1720; box-shadow: var(--shadow); }
  .nav-dropdown > div > a { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 10px 12px; border-radius: 5px; text-decoration: none; }
  .nav-dropdown > div > a:hover { background: var(--surface-raised); color: var(--text); }
  .nav-dropdown small { color: var(--teal); font-family: var(--mono); font-size: .5625rem; text-transform: uppercase; letter-spacing: .04em; }
  .hero { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: clamp(24px, 4vw, 64px); padding-block: clamp(64px, 7.5vw, 112px) clamp(64px, 7vw, 100px); position: relative; isolation: isolate; }
  .hero-copy { position: relative; z-index: 1; }
  .hero-copy h1 { max-width: 800px; font-size: clamp(3.5rem, 6.1vw, 5.375rem); }
  .hero-copy h1 em, .hero-copy h1 .accent { color: var(--gold); font-style: normal; }
  .hero-copy > p:not(.eyebrow), .hero-copy .lead { max-width: 530px; margin-top: 28px; color: var(--muted); font-size: clamp(1rem, 1.45vw, 1.125rem); line-height: 1.75; }
  .hero-art { position: relative; display: grid; align-items: center; min-width: 0; isolation: isolate; background: var(--bg); }
  .hero-art::before { position: absolute; content: ""; inset: 4% 0; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, rgb(29 214 220 / 8%), transparent 67%); pointer-events: none; }
  .hero-art > img, .hero-art > picture, .hero-art > picture > img, .hero-art > svg { width: 100%; height: auto; object-fit: contain; }
  .hero-art > img, .hero-art > picture { mix-blend-mode: lighten; }
  .hero-art figcaption { margin-top: 16px; color: var(--subtle); font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-align: center; }
  .art-caption { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--subtle); font-family: var(--mono); font-size: .5625rem; line-height: 1.7; letter-spacing: .07em; }
  .product-hero h1 { margin-top: 24px; max-width: 620px; font-size: clamp(3rem, 5.1vw, 4.625rem); line-height: 1.04; letter-spacing: -.055em; overflow-wrap: break-word; }
  .hero-copy .caption { font-size: .75rem !important; line-height: 1.7; }
  .signal-strip { border-block: 1px solid var(--line); background: #0a1319; }
  .signal-strip > .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .signal-strip span { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 68px; padding: 16px 12px; border-right: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .6875rem; }
  .signal-strip span:first-child { border-left: 1px solid var(--line); }
  .signal-strip span::before { content: "+"; color: var(--teal); font-size: 1rem; }
  .status-dot { display: inline-block !important; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgb(29 214 220 / 30%); }
  .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--teal); font-family: var(--mono); font-size: .6875rem; font-weight: 500; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; }
  .eyebrow::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; background: var(--teal); box-shadow: 0 0 12px rgb(29 214 220 / 18%); }
  .actions, .hero-actions, .button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
  .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 22px; border: 1px solid transparent; border-radius: 7px; background: var(--gold); color: var(--bg); font-size: .875rem; font-weight: 650; line-height: 1.4; text-align: center; text-decoration: none; transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
  .button:hover { background: var(--gold-light); color: var(--bg); transform: translateY(-2px); }
  .button.secondary { border-color: var(--line-strong); background: transparent; color: var(--text); }
  .button.secondary:hover { border-color: var(--muted); background: var(--surface); }
  .button svg { width: 17px; height: 17px; flex-shrink: 0; }
  .text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-size: .875rem; font-weight: 600; text-decoration: none; }
  .text-link:hover { text-decoration: underline; }
  button.text-link { min-height: 44px; padding: 10px 14px; border: 0; background: transparent; text-align: left; cursor: pointer; }
  .badge { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 9px; border: 1px solid #285363; border-radius: 4px; background: rgb(29 214 220 / 5%); color: var(--teal); font-family: var(--mono); font-size: .625rem; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; }
  .badge.gold { color: var(--gold); border-color: #68563a; background: rgb(242 201 109 / 6%); }
  .card { position: relative; padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .card h3 + p, .card h4 + p { margin-top: 16px; }
  .card h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.2; letter-spacing: -.03em; }
  .card h2 + p { margin-top: 16px; }
  .card p { color: var(--muted); font-size: .9375rem; }
  .card > .badge { margin-bottom: 24px; }
  .card > svg, .card .icon { width: 32px; height: 32px; margin-bottom: 28px; color: var(--teal); }
  .card > .text-link, .card > .button { margin-top: 24px; }
  .card-number { display: block; margin-bottom: 28px; color: var(--teal); font-family: var(--mono); font-size: .75rem; }
  a.card { text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); }
  a.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
  .product-card { display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .product-art { display: grid; place-items: center; overflow: hidden; background: #121716; border-bottom: 1px solid var(--line); aspect-ratio: 16 / 10; }
  .product-art img, .product-art svg, .product-art picture, .product-art picture img { width: 100%; height: 100%; object-fit: contain; }
  .product-card > :not(.product-art) { margin-inline: 28px; }
  .product-card > a:has(.product-art) { display: block; margin: 0; }
  .product-card img.product-art { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
  .product-card h3 a { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; }
  .product-card h3 a span { color: var(--subtle); font-size: 1rem; }
  .product-card > .badge { align-self: flex-start; margin-top: 28px; }
  .product-card > h3 { margin-top: 24px; }
  .product-card > .badge + h3 { margin-top: 16px; }
  .product-card > p { margin-top: 12px; color: var(--muted); font-size: .9375rem; }
  .product-card > .text-link, .product-card > .button { align-self: flex-start; margin-top: 24px; margin-bottom: 28px; }
  .product-card .product-body, .product-card .card-body { padding: 28px; margin: 0; flex: 1; }
  .product-body .badge, .card-body .badge { margin-bottom: 16px; }
  .product-body p, .card-body p { margin-top: 14px; color: var(--muted); }
  .product-body .text-link, .card-body .text-link { margin-top: 24px; }
  .code-window { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #060c10; box-shadow: var(--shadow); }
  .code-window-header, .code-header, .code-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 49px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: #181e1b; color: var(--muted); font-family: var(--mono); font-size: .6875rem; letter-spacing: .02em; }
  .code-dots { display: flex; gap: 6px; }
  .code-dots i, .code-dots span { display: block; width: 7px; height: 7px; border-radius: 50%; background: #42616e; }
  .code-dots :first-child { background: #b7925c; }
  .code-dots :last-child { background: #63a99b; }
  .code-header > span { display: inline-flex; align-items: center; gap: 9px; min-width: 0; overflow-wrap: anywhere; }
  .code-header i { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
  .code-window pre { max-width: 100%; overflow-x: auto; padding: clamp(20px, 3vw, 32px); color: #d8dfd3; font-size: clamp(.75rem, 1vw, .875rem); line-height: 1.9; tab-size: 2; scrollbar-color: var(--line-strong) #060c10; }
  .code-window pre code { font: inherit; }
  .code-window .comment, .code-window .token.comment { color: #899b8b; }
  .code-window .keyword, .code-window .token.keyword { color: var(--gold); }
  .code-window .string, .code-window .token.string { color: #a9d9ae; }
  .code-window .type, .code-window .function, .code-window .token.function { color: var(--teal); }
  .code-window .number, .code-window .token.number { color: #e3b49d; }
  .copy-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 54px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--muted); background: var(--surface); font-family: var(--mono); font-size: .6875rem; }
  .copy-button:hover { border-color: var(--teal); color: var(--teal); }
  .code-window > .copy-button { position: absolute; inset: 10px 12px auto auto; }
  .copy-status { padding: 12px 20px; border-top: 1px solid var(--line); color: var(--teal); font-size: .8125rem; }
  .copy-status.error { color: var(--error); }
  .workflow { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
  .workflow-tabs { display: flex; gap: 0; flex-wrap: wrap; padding: 8px; border-bottom: 1px solid var(--line); background: #0a1319; }
  .workflow-tabs [data-stage] { position: relative; flex: 1 1 140px; min-height: 58px; padding: 14px 20px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-family: var(--mono); font-size: .75rem; text-align: left; }
  .workflow-tabs [data-stage]:hover { color: var(--text); background: rgb(255 255 255 / 3%); }
  .workflow-tabs [aria-selected="true"] { border-color: #657060; color: var(--gold); background: rgb(242 201 109 / 7%); }
  .workflow-tabs [data-stage] > span { margin-right: 8px; opacity: .65; }
  .workflow-panel, .workflow [data-panel] { padding: clamp(24px, 4vw, 48px); }
  .workflow-panel [data-panel] { padding: 0; }
  .workflow-panel + .workflow-panel:not([hidden]) { border-top: 1px solid var(--line); }
  .workflow-panel h3 + p, .workflow [data-panel] h3 + p { margin-top: 16px; color: var(--muted); }
  .workflow-panel .code-window, .workflow [data-panel] .code-window { margin-top: 28px; }
  .workflow-panel > img, .workflow-panel > svg { width: 100%; margin-top: 24px; }
  .pipeline-line { margin-top: 28px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 6px; background: #0b141b; color: var(--teal); font-family: var(--mono); font-size: .8125rem; line-height: 1.9; overflow-wrap: anywhere; }
  .ecosystem-map { padding: clamp(12px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(ellipse at 50% 50%, #112833 0%, #0a1319 70%); }
  .ecosystem-map svg, svg.ecosystem-map { width: 100%; height: auto; overflow: visible; }
  .ecosystem-map text { font-family: var(--mono); }
  .ecosystem-map a:focus-visible { outline-offset: 3px; }
  .ecosystem-map figcaption { margin-top: 18px; color: var(--muted); font-size: .75rem; text-align: center; }
  .ecosystem-legend { display: none; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; }
  .ecosystem-legend > li { display: grid; align-content: start; gap: 6px; min-width: 0; color: var(--muted); font-size: .875rem; line-height: 1.65; overflow-wrap: anywhere; }
  .ecosystem-legend strong { color: var(--gold); font-family: var(--mono); font-size: .8125rem; font-weight: 500; }
  .page-hero { padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--line); }
  .page-hero h1 { max-width: 1050px; font-size: clamp(3.5rem, 6.5vw, 5.5rem); overflow-wrap: break-word; }
  .page-hero > p:not(.eyebrow), .page-hero .wrap > p:not(.eyebrow) { max-width: 720px; margin-top: 26px; color: var(--muted); font-size: 1.125rem; }
  .page-body { padding-block: clamp(40px, 5vw, 72px) 0; }
  .page-body > .example-card + .example-card { margin-top: 24px; }
  .page-body > .notice { margin-top: 24px; }
  .page-body > .notice:first-child { margin-top: 0; }
  .page-body > .section:first-child { padding-top: 0; }
  .section-tint { border-block: 1px solid var(--line); background: #0a1319; }
  .section.grid > div > h2 + p, .section > h2 + p { margin-top: 24px; color: var(--muted); }
  .section.grid > div > p + p { color: var(--muted); }
  .section.grid > div > .button, .section.grid > div > .text-link, .section > p + .button { margin-top: 26px; }
  .section > h2 + .grid { margin-top: 32px; }
  .caption { margin-top: 18px; color: var(--subtle); font-size: .75rem; line-height: 1.75; }
  .caption a { color: var(--muted); }
  .manual { display: flex; flex-direction: column; align-items: flex-start; }
  .manual > p { flex: 1; margin-bottom: 4px; }
  .manual .eyebrow { font-size: .5625rem; letter-spacing: .07em; }
  .breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; color: var(--muted); font-family: var(--mono); font-size: .6875rem; }
  .prose { max-width: 760px; color: var(--muted); font-size: 1.0625rem; line-height: 1.85; overflow-wrap: anywhere; }
  .prose > * + * { margin-top: 24px; }
  .prose h2, .prose h3, .prose h4 { margin-top: 48px; color: var(--text); }
  .prose h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
  .prose h3 { font-size: 1.4rem; }
  .prose h2:first-child, .prose h3:first-child { margin-top: 0; }
  .prose a { color: var(--gold); }
  .prose li + li { margin-top: 10px; }
  .prose ul, .prose ol { padding-left: 24px; }
  .prose blockquote { padding: 8px 0 8px 24px; border-left: 2px solid var(--gold); color: var(--text); }
  .prose pre { overflow-x: auto; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #060c10; color: var(--text); font-size: .8125rem; }
  .prose img { border-radius: var(--radius); }
  .prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .875rem; }
  .prose th, .prose td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; }
  .prose th { color: var(--text); }
  .feature-list { display: grid; gap: 14px; padding: 0; margin-block: 24px 0; list-style: none; }
  .feature-list li { position: relative; padding-left: 25px; color: var(--muted); font-size: .9375rem; }
  .feature-list li::before { position: absolute; left: 0; top: .42em; content: ""; width: 10px; height: 6px; border-bottom: 1.5px solid var(--teal); border-left: 1.5px solid var(--teal); transform: rotate(-45deg); }
  .feature-list:has(> article) { align-content: start; gap: 0; margin: 0; }
  .feature-list > article { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding-block: 24px; border-top: 1px solid var(--line); }
  .feature-list > article:first-child { padding-top: 0; border-top: 0; }
  .feature-list > article > span { padding-top: 3px; color: var(--teal); font-family: var(--mono); font-size: .6875rem; }
  .feature-list > article h3 { font-size: 1.25rem; }
  .feature-list > article p { max-width: 440px; margin-top: 10px; color: var(--muted); font-size: .9375rem; }
  .feature-list > .text-link { margin-top: 8px; }
  .account-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); align-items: start; gap: clamp(32px, 5vw, 72px); padding-block: 56px 96px; }
  .account-nav { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .account-nav a { padding: 10px 14px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); font-size: .875rem; text-decoration: none; }
  .account-nav a:hover { background: var(--surface-raised); color: var(--text); }
  .account-nav a[aria-current="page"] { border-color: #657060; background: rgb(242 201 109 / 7%); color: var(--gold); }
  .account-main > h1 { font-size: clamp(2.5rem, 4vw, 4rem); }
  .account-main > h1 + p, .account-main > h2 + p { margin-top: 18px; color: var(--muted); }
  .account-main > .card, .account-main > form, .account-main > .notice, .account-main > .form-card { margin-top: 28px; }
  .account-main > :first-child { margin-top: 0; }
  .account-main > .grid { margin-top: 24px; }
  .interest-card.selected { border-color: var(--gold); }
  .interest-card form { margin-top: 24px; }
  .auth-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(40px, 7vw, 100px); padding-block: clamp(56px, 8vw, 112px); }
  .auth-intro h1 { font-size: clamp(3rem, 5.5vw, 5rem); line-height: 1.04; letter-spacing: -.055em; overflow-wrap: break-word; }
  .auth-intro > p { max-width: 500px; margin-top: 26px; color: var(--muted); }
  .auth-intro > .caption { max-width: 420px; padding-top: 20px; border-top: 1px solid var(--line); }
  .form-card { width: min(100%, 600px); margin-inline: auto; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
  .form-card > h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.045em; }
  .form-card > h2 { font-size: 2rem; }
  .form-card > p { margin-top: 14px; color: var(--muted); font-size: .9375rem; }
  .form-card form, .form-card > .form-grid { margin-top: 28px; }
  .form-card > .notice { margin-top: 20px; }
  .form-card > :first-child { margin-top: 0; }
  .form-card form > .field + .field { margin-top: 20px; }
  .form-card form > .button, .form-card > .notice + .button { margin-top: 24px; }
  .form-card form > .button { width: 100%; }
  .form-card a:not(.button) { color: var(--gold); }
  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .field { display: grid; align-content: start; gap: 9px; min-width: 0; }
  .field.full, .form-grid > .full { grid-column: 1 / -1; }
  .field label, label.field-label { color: var(--text); font-size: .8125rem; font-weight: 500; }
  .field label small { color: var(--muted); font-weight: 400; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]), select, textarea { width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: #0b141b; color: var(--text); font-size: .9375rem; line-height: 1.5; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
  textarea { min-height: 144px; resize: vertical; }
  input::placeholder, textarea::placeholder { color: var(--subtle); opacity: 1; }
  input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: 2px; border-color: var(--teal); }
  input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }
  input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--teal); }
  input[type="file"] { font-size: .8125rem; }
  input::file-selector-button { padding: 6px 10px; margin-right: 12px; border: 0; border-radius: 4px; background: var(--surface-raised); color: var(--text); font: inherit; }
  .field small, .field .help, .form-help { color: var(--muted); font-size: .75rem; line-height: 1.6; }
  .field .error, .field-error { color: var(--error); font-size: .75rem; }
  .checkbox, .checkbox-field { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: .8125rem; }
  .checkbox input, .checkbox-field input { margin-top: 4px; }
  .checkbox.field { display: flex; }
  form > .checkbox { margin-top: 22px; }
  .honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
  .button.danger { border-color: #7e5149; background: #432923; color: var(--error); }
  .button.danger:hover { border-color: var(--error); background: #59332b; }
  .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
  .form-card .form-actions .button { flex: 1; }
  .form-footnote { margin-top: 24px; color: var(--muted); font-size: .8125rem; text-align: center; }
  .form-footnote a, .field a { color: var(--gold); }
  .password-wrap { position: relative; }
  .password-wrap input { padding-right: 78px !important; }
  [data-toggle-password] { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 5px; background: transparent; color: var(--teal); font-family: var(--mono); font-size: .6875rem; }
  .password-wrap [data-toggle-password] { position: absolute; right: 6px; top: 6px; min-height: 38px; border-color: transparent; }
  .notice { padding: 16px 20px; border: 1px solid #345c69; border-radius: var(--radius-sm); background: rgb(29 214 220 / 5%); color: var(--text); font-size: .875rem; line-height: 1.7; overflow-wrap: anywhere; }
  .notice.error { border-color: #7e5149; background: rgb(255 177 163 / 6%); color: var(--error); }
  .notice.success { border-color: #41684c; background: rgb(166 223 187 / 6%); color: var(--success); }
  .notice a { text-decoration: underline; }
  .notice ul { margin-bottom: 0; padding-left: 20px; }
  .cta-band { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: clamp(28px, 5vw, 64px); border: 1px solid #64705d; border-radius: var(--radius); background: radial-gradient(ellipse at 100% 100%, rgb(242 201 109 / 7%), transparent 65%), #0e1820; }
  .cta-band h2 { max-width: 750px; font-size: clamp(2rem, 3.5vw, 3rem); }
  .cta-band p { max-width: 620px; margin-top: 18px; color: var(--muted); }
  .cta-band .button { flex-shrink: 0; }
  .cta-band .actions { margin-top: 0; flex-shrink: 0; }
  .stat-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-block: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em; }
  .hero-copy .stat-line { justify-content: flex-start; margin-top: 36px; padding-block: 20px; border-bottom: 0; font-size: .625rem; gap: 12px 20px; }
  .stat-line strong { color: var(--text); font-weight: 500; }
  .stat-line > span, .stat-line > a { display: inline-flex; align-items: center; gap: 8px; }
  .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
  .stat { padding: 28px; border-right: 1px solid var(--line); }
  .stat:last-child { border-right: 0; }
  .stat strong { display: block; color: var(--gold); font-size: 2rem; letter-spacing: -.04em; }
  .stat span { color: var(--muted); font-family: var(--mono); font-size: .6875rem; }
  .roadmap { position: relative; padding-left: 30px; border-left: 1px solid var(--line-strong); }
  .roadmap-item { position: relative; padding: 0 0 40px 16px; }
  .roadmap-item:last-child { padding-bottom: 0; }
  .roadmap-item::before { content: ""; position: absolute; left: -36px; top: 8px; width: 11px; height: 11px; border: 2px solid var(--gold); border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 6px var(--bg); }
  .roadmap-item .badge { margin-bottom: 16px; }
  .roadmap-item p { max-width: 700px; margin-top: 14px; color: var(--muted); }
  .roadmap-item time { display: block; margin-bottom: 12px; color: var(--teal); font-family: var(--mono); font-size: .6875rem; }
  .roadmap-item:has(> div) { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; }
  .roadmap-item > span { padding-top: 4px; color: var(--teal); font-family: var(--mono); font-size: .75rem; }
  .roadmap-item h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
  .roadmap-item .text-link { margin-top: 20px; }
  .example-card { min-width: 0; }
  .example-card .code-window { margin-top: 24px; box-shadow: none; }
  .example-card .code-window pre { max-height: 360px; font-size: .75rem; }
  .example-card [data-category] { color: var(--teal); }
  .filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 32px; }
  .filter [data-filter] { min-height: 42px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font-family: var(--mono); font-size: .6875rem; }
  .filter [data-filter]:hover { color: var(--text); border-color: var(--line-strong); }
  .filter [aria-pressed="true"] { color: var(--gold); border-color: #7e6940; background: rgb(242 201 109 / 7%); }
  .filter-status { margin-block: 0 24px; color: var(--muted); font-family: var(--mono); font-size: .75rem; }
  .footer { margin-top: var(--section-space); border-top: 1px solid var(--line); padding-block: 56px 28px; background: #050b0f; }
  .footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 48px; }
  .footer-top { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 40px; }
  .footer-top > div > a:not(.brand) { display: block; width: fit-content; margin-top: 10px; color: var(--muted); font-size: .8125rem; text-decoration: none; overflow-wrap: anywhere; }
  .footer-top > div > a:hover { color: var(--text); }
  .footer-top > div > p { margin-top: 18px; color: var(--muted); font-size: .875rem; }
  .footer-top > div > .badge { margin-top: 22px; font-size: .5625rem; }
  .footer .brand img, .footer .logo img, .footer-brand img { width: 198px; height: auto; }
  .footer .brand + p, .footer-brand p { max-width: 320px; margin-top: 18px; color: var(--muted); font-size: .8125rem; }
  .footer h2, .footer h3, .footer h4 { margin-bottom: 18px; color: var(--subtle); font-family: var(--mono); font-size: .625rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
  .footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .footer li a, .footer-links a { color: var(--muted); font-size: .8125rem; text-decoration: none; }
  .footer a:hover { color: var(--text); }
  .footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
  .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--subtle); font-family: var(--mono); font-size: .625rem; letter-spacing: .02em; }
  .footer-bottom a { color: var(--muted); }
  .footer-bottom > div { display: flex; flex-wrap: wrap; gap: 12px 20px; }
  .skip-link { position: fixed; top: 10px; left: 16px; z-index: 100; padding: 12px 20px; border-radius: 6px; background: var(--gold); color: var(--bg); font-weight: 650; text-decoration: none; transform: translateY(-160%); }
  .skip-link:focus { transform: translateY(0); }
}

@layer utilities {
  .sr-only, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .muted { color: var(--muted); }
  .gold { color: var(--gold); }
  .teal { color: var(--teal); }
  .mono { font-family: var(--mono); }
  .text-center { text-align: center; }
  .text-center .eyebrow { justify-content: center; }
  .text-center > p { margin-inline: auto; }
  .text-center .actions { justify-content: center; }
  .flow > * + * { margin-top: 20px; }
  .full-width { width: 100%; }
  .no-wrap { white-space: nowrap; }
  .section.soft { background: #0a1319; }
  .section.compact { padding-block: clamp(40px, 5vw, 72px); }
}

@media (min-width: 1440px) {
  .hero { grid-template-columns: 1.03fr 1fr; }
  .hero-art { margin-right: -32px; }
  .product-hero h1 { font-size: 4.625rem; }
}

@media (max-width: 1100px) {
  .nav-links { gap: 18px; }
  .nav .brand img, .nav .logo img, .nav > a:first-child > img { width: 172px; }
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { gap: 24px; }
  .hero h1 { font-size: clamp(3.5rem, 6.1vw, 5.375rem); }
  .grid.three { gap: 16px; }
  .footer-grid { gap: 28px; }
  .footer-top { gap: 24px; }
}

@media (max-width: 800px) {
  :root { --gutter: 24px; }
  .ecosystem-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
  .nav { position: relative; flex-wrap: wrap; gap: 12px; min-height: 80px; padding-block: 16px; }
  header.nav { padding-block: 0; }
  .nav-inner { position: relative; flex-wrap: wrap; gap: 12px; min-height: 80px; padding-block: 16px; }
  .nav-toggle[data-nav-enhanced="true"] { display: inline-flex; }
  .nav-links { flex: 1 0 100%; justify-content: flex-start; gap: 4px 20px; padding-block: 12px 4px; border-top: 1px solid var(--line); }
  .nav-links[data-nav-enhanced="true"] { display: grid; gap: 2px; }
  .nav-links > a, .nav-links > li > a { min-height: 44px; padding: 10px 12px; }
  .nav-links .button { margin-top: 8px; }
  .nav-dropdown summary { padding: 10px 12px; }
  .nav-dropdown > div { position: static; width: 100%; margin-block: 2px 8px; border-color: var(--line); box-shadow: none; }
  .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; }
  .hero-copy { max-width: 720px; }
  .hero h1 { max-width: 720px; font-size: clamp(3.5rem, 11vw, 5.75rem); }
  .hero.product-hero h1 { font-size: clamp(3rem, 8.5vw, 4.5rem); }
  .hero-copy > p:not(.eyebrow), .hero-copy .lead { max-width: 570px; }
  .hero-art { width: min(100%, 650px); margin-inline: auto; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 20px; }
  .section-head > p { max-width: 620px; }
  .grid.three { grid-template-columns: 1fr; gap: 20px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .account-layout { grid-template-columns: 1fr; gap: 32px; padding-block: 32px 64px; }
  .auth-section { grid-template-columns: 1fr; gap: 32px; }
  .auth-intro { max-width: 620px; }
  .auth-section .form-card { margin-inline: 0; }
  .account-nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .account-nav a { flex: 1 0 auto; text-align: center; }
  .cta-band { align-items: flex-start; flex-direction: column; gap: 28px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .footer-top > :first-child { grid-column: 1 / -1; }
  .footer-brand, .footer-grid > :first-child { grid-column: 1 / -1; }
  .stat { padding: 20px; }
}

@media (max-width: 540px) {
  :root { --gutter: 20px; --radius: 10px; }
  .ecosystem-legend { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hero { padding-top: 44px; gap: 28px; }
  h1, .hero h1, .page-hero h1 { font-size: 3.5rem; letter-spacing: -.06em; }
  .hero.product-hero h1 { font-size: clamp(2.75rem, 10vw, 3.5rem); }
  .auth-intro h1 { font-size: 3rem; }
  .hero-copy > p:not(.eyebrow), .hero-copy .lead { margin-top: 24px; }
  .eyebrow { font-size: .625rem; letter-spacing: .1em; }
  .grid.two, .grid.four { grid-template-columns: 1fr; gap: 20px; }
  .actions, .hero-actions, .button-row { gap: 10px; }
  .hero-actions .button, .hero-copy > .actions .button { flex: 1 1 150px; }
  .form-grid { grid-template-columns: 1fr; gap: 20px; }
  .form-grid .field { grid-column: 1 / -1; }
  .form-card { padding: 24px 20px; }
  .workflow-tabs { gap: 4px; }
  .workflow-tabs [data-stage] { flex-basis: calc(50% - 4px); padding: 12px; font-size: .6875rem; min-height: 48px; }
  .workflow-panel, .workflow [data-panel] { padding: 24px 20px; }
  .workflow-panel [data-panel] { padding: 0; }
  .stat-line { justify-content: flex-start; gap: 14px 24px; }
  .hero-copy .stat-line { gap: 8px; font-size: .5625rem; letter-spacing: 0; }
  .art-caption { font-size: .5rem; }
  .signal-strip > .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal-strip span { min-height: 52px; padding-inline: 8px; font-size: .5625rem; gap: 8px; }
  .signal-strip span:nth-child(3) { border-left: 1px solid var(--line); }
  .signal-strip span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .footer { padding-top: 40px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { align-items: flex-start; flex-direction: column; margin-top: 32px; }
  .filter { gap: 6px; }
  .filter [data-filter] { padding-inline: 12px; }
  .roadmap { padding-left: 22px; }
  .roadmap-item { padding-left: 10px; }
  .roadmap-item::before { left: -28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .button:hover, a.card:hover { transform: none; }
}

@media (forced-colors: active) {
  .button, .card, .product-card, .notice, .badge, .filter [data-filter], .workflow-tabs [data-stage] { border: 1px solid ButtonText; }
  .filter [aria-pressed="true"], .workflow-tabs [aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -4px; }
  .eyebrow::before { background: CanvasText; }
}

@media print {
  body { background: white; color: black; }
  .nav-toggle, .nav-links, .copy-button, .filter, .account-nav, .skip-link, .footer { display: none !important; }
  .wrap { width: 100%; }
  .hero, .split, .account-layout { display: block; }
  .section, .page-hero, .hero { padding-block: 24px; }
  .card, .product-card, .code-window, .form-card, .notice { break-inside: avoid; background: white; color: black; box-shadow: none; }
  h1, .hero h1, .page-hero h1 { font-size: 40pt; }
  p, .muted, .card p, .hero-copy > p:not(.eyebrow), .prose, .code-window pre { color: black; }
  a { text-decoration: underline; }
}

/* Technical presentation: real artifacts, restrained surfaces, readable controls. */
@layer components {
  .home-hero h1 { font-size: clamp(2.75rem, 4.7vw, 4.4rem); line-height: 1.08; max-width: 17ch; }
  .home-hero .hero-description { max-width: 52ch; font-size: 1.0625rem; }
  .hero-art { border-radius: 14px; background: radial-gradient(ellipse at 60% 40%, rgb(29 214 220 / 5%), transparent 68%); }
  .hero-art img { border-radius: 14px 14px 0 0; }
  .card { background: linear-gradient(140deg, #12212a, var(--surface) 70%); }
  .card-number { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .grid.three > .card > h3 { font-size: 1.35rem; }
  .product-card { border-top-color: #42616e; }
  .product-card .badge { letter-spacing: .025em; }
  .recording { min-width: 0; border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; background: #0b161d; }
  .recording-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 18px 24px; border-bottom: 1px solid var(--line); color: var(--muted); font: .6875rem/1.7 var(--mono); }
  .recording-meta a { color: var(--teal); text-underline-offset: 4px; }
  .recording .workflow { border: 0; border-radius: 0; background: transparent; }
  .workflow:not([data-workflow-enhanced]) .workflow-tabs { display: none; }
  .workflow-tabs [data-stage] { transition: background .18s, border-color .18s, color .18s; }
  .workflow-tabs [data-stage] > span { opacity: 1; }
  .workflow-tabs [aria-selected="true"] { border-bottom: 2px solid var(--gold); background: #19282c; color: #ffe19a; }
  .demo-step-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
  .demo-step-head h3 { font-size: 1.35rem; }
  .recording .workflow-panel { padding: clamp(20px, 3vw, 32px); }
  .recording .code-window { margin-top: 20px; box-shadow: none; border-color: #34515f; }
  .recording .code-header { flex-wrap: wrap; gap: 10px; }
  .recording .code-header > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .recording .code-window pre { max-height: 420px; font-size: .8125rem; line-height: 1.85; padding: 24px; tab-size: 4; }
  .recording-footer { padding: 20px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; line-height: 1.8; }
  .recording-footer p { max-width: 95ch; }
  .recording-footer details { margin-top: 16px; }
  .recording-footer summary { width: fit-content; min-height: 34px; cursor: pointer; color: var(--teal); }
  .recording-footer pre { overflow: auto; margin-block: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; font-size: .75rem; }
  .ecosystem-browser { margin-top: 20px; }
  .ecosystem-heading { margin-top: 32px; font-size: 1.5rem; }
  .ecosystem-browser .workflow-panel > .badge { margin-bottom: 18px; }
  .ecosystem-browser .workflow-panel > p { max-width: 75ch; }
  .ecosystem-browser .text-link { margin-top: 22px; }
  .manual { border-top: 2px solid #42616e; }
  .copy-button { transition: color .16s, border-color .16s, background .16s; }
  .copy-button:not([data-copy-enhanced]) { display: none; }
  .copy-button:focus-visible, summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
}
@media (max-width: 760px) {
  .home-hero { gap: 36px; }
  .home-hero h1 { font-size: clamp(2.65rem, 8.2vw, 3.75rem); }
  .recording-meta { padding: 16px 20px; gap: 10px; }
  .compiler-demo .workflow-tabs [data-stage] { flex: 1 1 100%; text-align: left; }
  .recording .code-window pre { font-size: .75rem; padding: 18px; }
  .recording-footer { padding: 18px 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .is-arriving { animation: section-arrive .38s ease-out both; }
  .workflow[data-workflow-enhanced] [data-panel]:not([hidden]) { animation: panel-arrive .18s ease-out; }
  @keyframes section-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes panel-arrive { from { opacity: .5; } to { opacity: 1; } }
}

/* Cover-derived identity: blue/cyan light, warm gold, silver type, near-black surfaces. */
@layer components {
  .brand img { mix-blend-mode: screen; }
  .cover-banner { margin: 0 0 48px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #04090c; }
  .cover-banner img { width: 100%; height: auto; }
  .cover-banner figcaption { padding: 14px 20px; color: var(--muted); font-size: .75rem; border-top: 1px solid var(--line); }
  .home-hero .hero-art { border: 1px solid var(--line); overflow: hidden; background: #050b0f; }
  .home-hero .hero-art img { width: 100%; height: auto; object-fit: contain; }
  .home-hero .art-caption { margin-inline: 16px; }
  .hardware-intro { max-width: 85ch; color: var(--muted); font-size: 1.0625rem; line-height: 1.8; }
  .hardware-jump { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .hardware-jump a { padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--teal); text-decoration: none; font: .8125rem/1.6 var(--mono); }
  .hardware-jump a:hover { background: var(--surface-raised); border-color: var(--teal); }
  .hardware-kind { margin-bottom: 16px; color: var(--muted); font: .6875rem/1.8 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
  .hardware-card { display: flex; flex-direction: column; border-top: 2px solid var(--teal); }
  .hardware-card:nth-child(2) { border-top-color: #29aaff; }
  .hardware-card:nth-child(3) { border-top-color: var(--gold); }
  .hardware-card h3 a { color: var(--text); text-decoration: none; }
  .hardware-card p { flex: 1; }
  .hardware-card .badge { letter-spacing: .025em; }
  .hardware-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 48px; scroll-margin-top: 32px; }
  .hardware-title h2 { margin-block: 22px 12px; font-size: clamp(2rem, 4vw, 3rem); }
  .hardware-title > p { color: var(--teal); font: .8125rem/1.8 var(--mono); }
  .hardware-copy { min-width: 0; color: var(--muted); line-height: 1.85; }
  .hardware-copy > * + * { margin-top: 22px; }
  .hardware-summary { color: var(--text); font-size: 1.125rem; }
}
@media (max-width: 760px) {
  .hardware-detail { grid-template-columns: 1fr; gap: 24px; }
  .hardware-jump a { flex: 1 1 auto; text-align: center; }
}

/* Decorative signal paths traced over the existing concept illustrations. */
@layer components {
  .art-scene { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 14px; isolation: isolate; }
  .art-scene .art-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; transform-origin: 50% 50%; }
  .hero-art .art-image { mix-blend-mode: lighten; }
  .product-card > .art-scene.product-art { margin: 0; width: 100%; aspect-ratio: 3 / 2; border-radius: 0; background: #0b141b; }
  .art-scene .art-signals { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; opacity: 0; pointer-events: none; }
  .art-flow { stroke: #8ffff5; stroke-width: 4; stroke-dasharray: 7 93; }
  .art-flow-gold { stroke: #ffe19a; }
  .art-flow-glow { stroke: #1dd6dc; stroke-width: 15; opacity: .2; }
  .art-node { fill: #a4fff5; opacity: 0; transform-box: fill-box; transform-origin: center; }
  .art-halo { fill: none; stroke: #63fff1; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
  .art-scene:focus-visible { outline: 2px solid var(--teal); outline-offset: 5px; }
}
@media (prefers-reduced-motion: no-preference) {
  .art-scene.is-art-active .art-image { animation: art-camera 2s ease-in-out both; }
  .art-scene.is-art-active .art-signals { animation: art-overlay 2s ease-in-out both; }
  .art-scene.is-art-active .art-flow { animation: art-signal 2s linear both; }
  .art-scene.is-art-active .art-node { animation: art-light 2s ease-in-out both; }
  .art-scene.is-art-active .art-node:nth-of-type(even) { animation-direction: reverse; }
  .art-scene.is-art-active .art-halo { animation: art-halo 2s ease-out both; }
  @keyframes art-overlay { 0%, 100% { opacity: 0; } 15%, 80% { opacity: .85; } }
  @keyframes art-signal { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -7; } }
  @keyframes art-light { 0%, 100% { opacity: 0; transform: scale(.7); } 45% { opacity: .85; transform: scale(1.3); } }
  @keyframes art-halo { 0%, 100% { opacity: 0; transform: scale(.92); } 50% { opacity: .65; transform: scale(1.08); } }
  @keyframes art-camera { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012) translateY(-.3%); } }
}
@media (prefers-reduced-motion: reduce) {
  .art-scene .art-signals { display: none; }
  .art-scene .art-image { transform: none !important; }
  .cover-scene { cursor: default; }
}

/* Complete original cover logo, including its existing lettering. */
@layer components {
  .nav .brand img, .footer .brand img { width: 244px; height: auto; }
}
@media (max-width: 1100px) {
  .nav .brand img { width: 220px; }
}
@media (max-width: 800px) {
  .nav .brand img { width: 212px; }
}
@media (max-width: 380px) {
  .nav .brand img { width: 184px; }
}

/* Original cover stays still; only its existing technical paths are highlighted. */
@layer components {
  .art-scene.cover-scene, .art-scene.cover-scene .art-image { aspect-ratio: 1218 / 640; }
  .cover-scene { cursor: pointer; }
  .cover-stage, .cover-node, .cover-array-row { opacity: 0; stroke-width: 4; }
  .cover-source, .cover-matrix, .cover-shield { stroke: #ffe5a2; filter: drop-shadow(0 0 5px #f2c96d); }
  .cover-network, .cover-node, .cover-trace { stroke: #bdfff8; filter: drop-shadow(0 0 5px #1dd6dc); }
  .cover-node { fill: #42e6e0; fill-opacity: .28; }
  .cover-array-row rect { fill: #ffe5a2; fill-opacity: .32; }
  .cover-gates { stroke: #ffae91; filter: drop-shadow(0 0 5px #ff805b); }
  .cover-trace { stroke-width: 5; opacity: 0; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
  .hardware-visual { margin: 25px 0 0; }
  .hardware-visual figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 12px; color: var(--subtle); font: .6875rem/1.7 var(--mono); }
  .hardware-visual figcaption > span { margin-right: auto; }

}
@media (prefers-reduced-motion: no-preference) {
  .cover-scene.is-art-active .art-image { animation: none; }
  .cover-scene.is-art-active .art-signals { animation: cover-envelope 2s linear both; }
  .cover-scene.is-art-active .cover-source { animation: cover-illuminate .5s ease-out both; }
  .cover-scene.is-art-active .cover-input { animation: cover-reveal .4s .15s ease-out both; }
  .cover-scene.is-art-active .cover-network { animation: cover-illuminate .55s .35s ease-out both; }
  .cover-scene.is-art-active .cover-node { animation: cover-illuminate .45s .35s ease-out both; }
  .cover-scene.is-art-active .cover-node:nth-child(3n) { animation-delay: .5s; }
  .cover-scene.is-art-active .cover-node:nth-child(3n + 2) { animation-delay: .65s; }
  .cover-scene.is-art-active .cover-branch { animation: cover-reveal .5s .65s ease-out both; }
  .cover-scene.is-art-active .cover-array-row { animation: cover-illuminate .45s .9s ease-out both; }
  .cover-scene.is-art-active .cover-row-1 { animation-delay: .96s; }
  .cover-scene.is-art-active .cover-row-2 { animation-delay: 1.02s; }
  .cover-scene.is-art-active .cover-row-3 { animation-delay: 1.08s; }
  .cover-scene.is-art-active .cover-gates { animation: cover-illuminate .5s .95s ease-out both; }
  .cover-scene.is-art-active .cover-output { animation: cover-reveal .4s 1.2s ease-out both; }
  .cover-scene.is-art-active .cover-wave { animation: cover-reveal .5s 1.4s ease-out both; }
  .cover-scene.is-art-active .cover-shield { animation: cover-illuminate .4s 1.6s ease-out both; }
  @keyframes cover-envelope { 0%, 100% { opacity: 0; } 5%, 95% { opacity: 1; } }
  @keyframes cover-illuminate { 0%, 100% { opacity: 0; } 25%, 65% { opacity: 1; } }
  @keyframes cover-reveal { 0% { opacity: 0; stroke-dashoffset: 100; } 15% { opacity: 1; } 65% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
  @keyframes cpu-lamp { 0%, 100% { opacity: 0; } 45% { opacity: .9; } }
}
@layer components {
  .ztpu-visual { grid-column: 1 / -1; margin-top: 0; }
  .art-scene.ztpu-scene, .art-scene.ztpu-scene .art-image { aspect-ratio: 1672 / 941; }
  .ztpu-scene { border: 1px solid var(--line); }
  .ztpu-engine { stroke: #83e9ff; stroke-width: 3; opacity: 0; }
  .ztpu-engine.ztpu-channel-1 { stroke: #86ffc1; }
  .ztpu-engine.ztpu-channel-2 { stroke: #d8a4ff; }
  .ztpu-flow { stroke-width: 4; }
  .ztpu-flow.ztpu-channel-1 { stroke: #86ffc1; }
  .ztpu-flow.ztpu-channel-2 { stroke: #d8a4ff; }
  .ztpu-chip { stroke: #8edaff; stroke-width: 3; opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .ztpu-scene.is-art-active .art-image { animation: none; }
  .ztpu-scene.is-art-active .ztpu-flow { animation-duration: 1.1s; }
  .ztpu-scene.is-art-active .ztpu-engine { animation: cpu-lamp 1.1s ease-in-out both; }
  .ztpu-scene.is-art-active .ztpu-channel-0 { animation-delay: .1s; }
  .ztpu-scene.is-art-active .ztpu-channel-1 { animation-delay: .35s; }
  .ztpu-scene.is-art-active .ztpu-channel-2 { animation-delay: .6s; }
  .ztpu-scene.is-art-active .ztpu-chip { animation: cpu-lamp 1.4s .2s ease-in-out both; }
}

/* CPU project images share ZTPU's composition; lettering stays still. */
@layer components {
  .cpu-visual { grid-column: 1 / -1; margin-top: 0; }
  .art-scene.cpu-art-scene, .art-scene.cpu-art-scene .art-image { aspect-ratio: 1672 / 941; }
  .cpu-art-scene { border: 1px solid var(--line); background: #070d11; }
  .cpu-route { stroke: #b6faff; stroke-width: 4; }
  .cpu-art-64 .cpu-route { stroke: #8ffff0; }
  .cpu-art-64 .cpu-route.art-flow-gold { stroke: #ffe0a0; }
  .cpu-emblem-light { stroke: #dcffff; stroke-width: 4; opacity: 0; }
  .cpu-art-64 .cpu-emblem-light { stroke: #ffe9b5; }
  .cpu-terminal { fill: #e1ffff; opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .cpu-art-scene.is-art-active .art-image { animation: none; }
  .cpu-art-scene.is-art-active .cpu-route { animation-duration: 1.3s; }
  .cpu-art-scene.is-art-active .cpu-route-0 { animation-delay: .05s; }
  .cpu-art-scene.is-art-active .cpu-route-1 { animation-delay: .2s; }
  .cpu-art-scene.is-art-active .cpu-route-2 { animation-delay: .35s; }
  .cpu-art-scene.is-art-active .cpu-route-3, .cpu-art-scene.is-art-active .cpu-route-4 { animation-delay: .5s; }
  .cpu-art-scene.is-art-active .cpu-emblem-light { animation: cpu-lamp 1.2s .5s ease-in-out both; }
  .cpu-art-scene.is-art-active .cpu-terminal { animation: cpu-lamp .8s 1s ease-out both; }
}