@layer reset, tokens, base, layout, component, utilities, accessibility;

    @layer reset {
      *,*::before,*::after { box-sizing: border-box; }
      html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
      body { margin: 0; }
      img,svg { max-width: 100%; }
      button,select,input,textarea { font: inherit; }
      button { cursor: pointer; }
      :where(h1,h2,h3,p,ul,ol,pre) { margin-block: 0; }
    }
    @layer tokens {
      :root {
        /* ZSS static design system; selected values are JSON-overridable below. */
        --z-font-ui: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
        --z-font-code: ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
        --z-space-unit: .25rem;
        --z-s1: calc(var(--z-space-unit) * 1);
        --z-s2: calc(var(--z-space-unit) * 2);
        --z-s3: calc(var(--z-space-unit) * 3);
        --z-s4: calc(var(--z-space-unit) * 4);
        --z-s5: calc(var(--z-space-unit) * 5);
        --z-s6: calc(var(--z-space-unit) * 6);
        --z-s8: calc(var(--z-space-unit) * 8);
        --z-s10: calc(var(--z-space-unit) * 10);
        --z-s12: calc(var(--z-space-unit) * 12);
        --z-content-max: 75rem;
        --z-measure: 68ch;
        --z-radius-card: 1.5rem;
        --z-radius-control: .85rem;
        --z-radius-pill: 100vw;
        --z-border-width: 1px;
        --z-focus-width: 3px;
        --z-motion: 180ms ease;
        --z-shadow: 0 18px 60px rgb(5 14 31 / 12%);
        --z-bg:#F3F6FC; --z-surface:#FFFFFF; --z-surface-alt:#E8EFF9;
        --z-text:#112139; --z-muted:#475A75; --z-border:#B7C7DC;
        --z-primary:#2449BC; --z-on-primary:#FFFFFF; --z-accent:#00695E;
        --z-on-accent:#FFFFFF; --z-focus:#92216D;
        --z-primary-soft:#E3EAFE; --z-accent-soft:#D6F5EE;
        --z-success:#006142; --z-warning:#7C4300;
      }
      html[data-z-theme="dark"] {
        --z-bg:#081120;--z-surface:#121F33;--z-surface-alt:#1C2D46;
        --z-text:#F2F6FF;--z-muted:#B8C6DE;--z-border:#4B607D;
        --z-primary:#B5C7FF;--z-on-primary:#122244;--z-accent:#86E7D3;
        --z-on-accent:#082E2A;--z-focus:#FFE28A;
        --z-primary-soft:#20345F;--z-accent-soft:#163D41;
        --z-success:#95ECC3;--z-warning:#FFD28A;
      }
      @media (prefers-color-scheme: dark) {
        html[data-z-theme="auto"] {
          --z-bg:#081120;--z-surface:#121F33;--z-surface-alt:#1C2D46;
          --z-text:#F2F6FF;--z-muted:#B8C6DE;--z-border:#4B607D;
          --z-primary:#B5C7FF;--z-on-primary:#122244;--z-accent:#86E7D3;
          --z-on-accent:#082E2A;--z-focus:#FFE28A;
          --z-primary-soft:#20345F;--z-accent-soft:#163D41;
          --z-success:#95ECC3;--z-warning:#FFD28A;
        }
      }
      /* Generated from JSON: allowlisted names/values only. */
      /* Dynamic JSON token overrides are injected from the PHP engine. */
    }
    @layer base {
      html { background: var(--z-bg); color-scheme: light; }
      html[data-z-theme="dark"] { color-scheme: dark; }
      @media (prefers-color-scheme: dark) {
        html[data-z-theme="auto"] { color-scheme: dark; }
      }
      body {
        font-family: var(--z-font-ui); color: var(--z-text); line-height: 1.58;
        min-height: 100vh;
        background: radial-gradient(ellipse 65rem 35rem at 85% 0%,var(--z-primary-soft), transparent 78%),var(--z-bg);
      }
      a { color: var(--z-primary); text-underline-offset: .18em; text-decoration-thickness: .08em; }
      a:hover { text-decoration-thickness: .14em; }
      a:focus-visible,button:focus-visible,select:focus-visible,[tabindex="0"]:focus-visible {
        outline: var(--z-focus-width) solid var(--z-focus); outline-offset: 4px;
      }
      h1,h2,h3 { line-height: 1.14; letter-spacing: -.04em; }
      h1 { font-size: clamp(3.4rem,9vw,6.8rem); font-weight: 850; }
      h2 { font-size: clamp(1.8rem,4vw,2.9rem); }
      h3 { font-size: clamp(1.12rem,2vw,1.35rem); }
      p { max-width: var(--z-measure); }
      ::selection { background: var(--z-primary); color: var(--z-on-primary); }
    }
    @layer layout {
      [data-z-layout="stack"] { display: grid; gap: var(--z-s4); }
      [data-z-layout="cluster"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--z-s3); }
      [data-z-width="measure"] { max-width: var(--z-measure); }
      [data-z-region="container"] { width: min(calc(100% - 2.25rem),var(--z-content-max)); margin-inline: auto; }
      [data-z-block="header"] { position: sticky; top: 0; z-index: 10; background: var(--z-surface); border-bottom: 1px solid var(--z-border); }
      [data-z-component="header-inner"] { display: flex; align-items: center; justify-content: space-between; gap: var(--z-s4); min-height: 4.75rem; }
      [data-z-component="nav"] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--z-s6); }
      [data-z-block="hero"] { padding-block: clamp(3rem,7vw,6rem); }
      [data-z-component="hero-grid"] { display: grid; grid-template-columns: 1.07fr .93fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
      [data-z-block="features"],[data-z-block="workbench"] { padding-block: var(--z-s10); }
      [data-z-component="cards"] { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--z-s4); margin-top: var(--z-s8); }
      [data-z-component="workbench-grid"] { display: grid; grid-template-columns: minmax(0,1fr) minmax(16rem,.34fr); gap: var(--z-s6); margin-top: var(--z-s6); }
      [data-z-block="a11y-summary"] { padding-block: var(--z-s10); }
      [data-z-block="footer"] { margin-top: var(--z-s12); border-top: 1px solid var(--z-border); padding-block: var(--z-s8); }
      @media (max-width: 930px) {
        [data-z-component="hero-grid"] { grid-template-columns: minmax(0,1fr); }
        [data-z-component="cards"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
        [data-z-component="workbench-grid"] { grid-template-columns: minmax(0,1fr); }
      }
      @media (max-width: 600px) {
        [data-z-component="header-inner"] { align-items: flex-start; padding-block: var(--z-s3); flex-direction: column; }
        [data-z-component="cards"] { grid-template-columns: minmax(0,1fr); }
        [data-z-component="tabs-list"] { gap: var(--z-s1); }
      }
    }
    @layer component {
      [data-z-part="brand"] { color: var(--z-text); text-decoration: none; display: inline-flex; align-items: center; gap: var(--z-s2); font-weight: 850; letter-spacing: -.04em; font-size: 1.22rem; }
      [data-z-part="brand-mark"] { background: var(--z-primary); color: var(--z-on-primary); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; font-family: var(--z-font-code); font-size: .85rem; }
      [data-z-component="nav"] a { text-decoration: none; color: var(--z-muted); font-weight: 650; font-size: .9rem; border-bottom: 2px solid transparent; }
      [data-z-component="nav"] a:hover,[data-z-component="nav"] a:focus-visible { color: var(--z-primary); border-bottom-color: currentColor; }
      [data-z-part="eyebrow"] { display: inline-flex; align-items: center; gap: var(--z-s2); padding: var(--z-s2) var(--z-s3); border: 1px solid var(--z-border); background: var(--z-surface); border-radius: var(--z-radius-pill); color: var(--z-primary); font-size: .79rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
      [data-z-part="signal-dot"] { display: inline-block; flex: 0 0 auto; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
      [data-z-part="hero-title"] { margin-block: var(--z-s5); }
      [data-z-part="hero-title"] strong { color: var(--z-primary); }
      [data-z-part="lede"] { color: var(--z-muted); font-size: clamp(1.03rem,1.7vw,1.22rem); }
      [data-z-component="actions"] { display: flex; gap: var(--z-s3); flex-wrap: wrap; margin-top: var(--z-s8); }
      [data-z-component="button"] { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--z-s2); padding: .72rem 1.05rem; border-radius: var(--z-radius-control); text-decoration: none; font-weight: 800; border: 2px solid var(--z-primary); transition: transform var(--z-motion),background var(--z-motion); }
      [data-z-component="button"]:hover { transform: translateY(-2px); }
      [data-z-component="button"][data-z-variant="primary"] { background: var(--z-primary); color: var(--z-on-primary); }
      [data-z-component="button"][data-z-variant="secondary"] { background: var(--z-surface); color: var(--z-primary); }
      [data-z-component="terminal"] { border: 1px solid var(--z-border); border-radius: var(--z-radius-card); overflow: hidden; background: var(--z-surface); box-shadow: var(--z-shadow); }
      [data-z-part="terminal-top"] { display: flex; align-items: center; gap: var(--z-s2); padding: var(--z-s3) var(--z-s4); background: var(--z-surface-alt); border-bottom: 1px solid var(--z-border); color: var(--z-muted); font: .78rem var(--z-font-code); }
      [data-z-part="window-dot"] { width: .65rem; height: .65rem; border-radius: 50%; background: var(--z-border); }
      [data-z-part="terminal-file"] { margin-left: auto; }
      [data-z-part="code"] { margin: 0; padding: var(--z-s6); font: 500 .9rem/1.85 var(--z-font-code); color: var(--z-text); overflow-x: auto; white-space: pre; tab-size: 2; }
      [data-z-part="code"] [data-z-variant="keyword"] { color: var(--z-primary); font-weight: 750; }
      [data-z-part="code"] [data-z-variant="comment"] { color: var(--z-muted); }
      [data-z-part="terminal-status"] { background: var(--z-primary-soft); padding: var(--z-s3) var(--z-s5); border-top: 1px solid var(--z-border); color: var(--z-text); font-size: .8rem; font-weight: 750; }
      [data-z-part="section-kicker"] { color: var(--z-accent); font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 850; margin-bottom: var(--z-s3); }
      [data-z-part="section-text"] { color: var(--z-muted); margin-top: var(--z-s3); }
      [data-z-component="feature-card"],[data-z-component="panel"],[data-z-component="settings"] { border: 1px solid var(--z-border); background: var(--z-surface); border-radius: var(--z-radius-card); }
      [data-z-component="feature-card"] { padding: var(--z-s6); min-height: 15.5rem; display: flex; flex-direction: column; gap: var(--z-s4); }
      [data-z-part="feature-no"] { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; background: var(--z-primary-soft); color: var(--z-primary); border: 1px solid var(--z-border); border-radius: .65rem; font-family: var(--z-font-code); font-weight: 850; }
      [data-z-part="feature-description"] { color: var(--z-muted); font-size: .94rem; }
      [data-z-part="feature-more"] { margin-top: auto; font-weight: 800; font-size: .85rem; }
      [data-z-component="panel"] { padding: clamp(1rem,3vw,1.7rem); min-width: 0; }
      [data-z-component="tabs-list"] { display: flex; flex-wrap: wrap; gap: var(--z-s2); padding-bottom: var(--z-s4); margin-bottom: var(--z-s6); border-bottom: 1px solid var(--z-border); }
      [data-z-part="tab"] { padding: var(--z-s3) var(--z-s4); min-height: 44px; min-width: 44px; border: 2px solid transparent; border-radius: var(--z-radius-control); background: transparent; color: var(--z-muted); text-decoration: none; font-weight: 800; }
      [data-z-part="tab"]:hover { color: var(--z-primary); background: var(--z-primary-soft); }
      [data-z-part="tab"][aria-selected="true"] { background: var(--z-primary-soft); color: var(--z-primary); border-color: var(--z-primary); text-decoration: underline; text-underline-offset: .25em; }
      [data-z-part="tabpanel"] { min-width: 0; }
      [data-z-part="tabpanel"]:not(:last-child) { margin-bottom: var(--z-s6); }
      [data-z-part="tabpanel"][hidden] { display: none; }
      [data-z-part="tabpanel"] h3 { margin-bottom: var(--z-s3); }
      [data-z-part="tabpanel"] p { color: var(--z-muted); }
      [data-z-part="tabpanel"] ul { padding-inline-start: 1.3em; }
      [data-z-part="tabpanel"] li + li { margin-top: var(--z-s2); }
      [data-z-component="settings"] { padding: var(--z-s6); align-self: start; }
      [data-z-part="settings-title"] { font-size: 1.27rem; margin-bottom: var(--z-s2); }
      [data-z-part="settings-help"] { color: var(--z-muted); font-size: .86rem; margin-bottom: var(--z-s5); }
      [data-z-component="field"] { margin-top: var(--z-s5); }
      [data-z-part="label"] { display: block; font-weight: 800; margin-bottom: var(--z-s2); }
      [data-z-part="select"] { width: 100%; min-height: 44px; padding: var(--z-s3) var(--z-s4); border: 2px solid var(--z-border); border-radius: var(--z-radius-control); background: var(--z-bg); color: var(--z-text); }
      [data-z-part="field-hint"] { color: var(--z-muted); font-size: .83rem; margin-top: var(--z-s2); }
      [data-z-component="swatch-strip"] { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--z-s2); margin-top: var(--z-s5); }
      [data-z-part="swatch"] { height: 1.2rem; border: 1px solid var(--z-border); border-radius: .3rem; }
      [data-z-part="swatch"][data-z-variant="primary"] { background: var(--z-primary); }
      [data-z-part="swatch"][data-z-variant="accent"] { background: var(--z-accent); }
      [data-z-part="swatch"][data-z-variant="bg"] { background: var(--z-bg); }
      [data-z-part="swatch"][data-z-variant="text"] { background: var(--z-text); }
      [data-z-component="live-test"] { margin-top: var(--z-s5); padding: var(--z-s4); border-radius: var(--z-radius-control); background: var(--z-accent-soft); border-left: .35rem solid var(--z-accent); }
      [data-z-part="live-description"] { margin-block: var(--z-s2); }
      [data-z-part="live-result"] { color: var(--z-text); margin-block: var(--z-s3); overflow-wrap: anywhere; font-family: var(--z-font-code); font-size: .82rem; }
      [data-z-part="live-result"][data-z-state="error"] { border-bottom: 2px solid var(--z-warning); }
      [data-z-component="footer-links"] { display: flex; gap: var(--z-s5); flex-wrap: wrap; margin-top: var(--z-s3); }
      [data-z-component="footer-links"] a { font-weight: 750; }
    }
    @layer utilities {
      [data-z-utility~="muted"] { color: var(--z-muted); }
      [data-z-utility~="small"] { font-size: .87rem; }
      [data-z-utility~="mt"] { margin-top: var(--z-s4); }
      [data-z-utility~="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;
      }
    }
    @layer accessibility {
      [data-z-part="skip"] { position: fixed; z-index: 100; top: var(--z-s3); left: var(--z-s3); transform: translateY(-250%); background: var(--z-primary); color: var(--z-on-primary); padding: var(--z-s3) var(--z-s4); border-radius: var(--z-radius-control); }
      [data-z-part="skip"]:focus { transform: none; }
      :target { scroll-margin-top: 7.5rem; }
      @media (prefers-reduced-motion: reduce) {
        *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
      }
      @media (prefers-contrast: more) {
        [data-z-component="feature-card"],[data-z-component="panel"],[data-z-component="settings"] { border-width: 2px; }
        [data-z-part="tab"]:focus-visible { outline-width: 4px; }
      }
      @media (forced-colors: active) {
        [data-z-component="button"],[data-z-part="tab"][aria-selected="true"],[data-z-part="select"] { border: 2px solid ButtonText; forced-color-adjust: auto; }
        [data-z-part="tab"][aria-selected="true"] { text-decoration: underline; }
        [data-z-part="signal-dot"] { border: 2px solid CanvasText; }
      }
      @media print {
        [data-z-block="header"],[data-z-component="settings"],[data-z-component="actions"],[data-z-component="live-test"] { display: none !important; }
        body { background: white; color: black; }
        [data-z-part="tabpanel"][hidden] { display: block; }
      }
    }
  
/* Explicit full-document theme propagation */
@layer component {
 body,main,section,header,footer,article,nav,aside { color: inherit; }
 [data-z-block="hero"] { background-color: var(--z-bg); }
 [data-z-component="terminal"] { border-color: var(--z-border); }
}

@layer accessibility {
 @media (prefers-reduced-motion: no-preference) {
  body, [data-z-component="feature-card"], [data-z-component="settings"], [data-z-component="panel"], [data-z-component="terminal"] { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
 }
}