/* Ampixa Field components — class names are ax-*; every value comes from tokens.css */
.ax{background:var(--paper);color:var(--ink);font-family:var(--font-text);font-size:18px;line-height:1.6}
.ax *{box-sizing:border-box}
.ax a{color:var(--crimson)}
.ax :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ax-label{font:8px/1.8 var(--font-label);text-transform:uppercase;letter-spacing:.06em;color:var(--crimson)}

/* Nav — identical on every page */
.ax-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:14px 0;border-bottom:1px solid var(--rule)}
.ax-nav img{height:22px;display:block}
.ax-nav nav{display:flex;gap:var(--space-4);flex-wrap:wrap}
.ax-nav nav a{font:9px var(--font-label);text-transform:uppercase;color:var(--ink);text-decoration:none}
.ax-nav nav a:hover,.ax-nav nav a[aria-current]{color:var(--crimson)}

/* Buttons — the action, in label type */
.ax-btn{display:inline-block;font:9px/1.2 var(--font-label);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;padding:11px 13px;background:var(--ink);color:var(--card)}
.ax-btn:hover{background:var(--crimson);color:var(--on-crimson)}
.ax-btn.primary{background:var(--crimson);color:var(--on-crimson)} .ax-btn.primary:hover{background:var(--ink)}

/* DemoPanel — the one lifted object; honest state */
.ax-demo{background:var(--card);border:2px solid var(--ink);box-shadow:var(--lift);padding:var(--space-4);display:grid;gap:12px;max-width:460px}
.ax-demo .must{font:700 22px/1.35 var(--font-text);margin:0}
.ax-demo .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ax-state{font:13px/1.4 var(--font-mono);color:var(--ink-2);display:flex;gap:8px;align-items:baseline}
.ax-state b{font:8px var(--font-label);text-transform:uppercase;padding:4px 6px;border:1.5px solid currentColor;font-weight:400;white-space:nowrap;flex:none}
.ax-state[data-s="live"] b{color:var(--write-4)} .ax-state[data-s="login"] b{color:var(--ink)}
.ax-state[data-s="paused"] b{color:var(--speak-4)} .ax-state[data-s="none"] b,.ax-state[data-s="download"] b{color:var(--ink-2)}

/* ProofStrip — 2–4 numbers, each with its test set */
.ax-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.ax-proof div{padding:14px 16px 14px 0}
.ax-proof b{display:block;font:600 28px/1.1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--lane,var(--ink))}
.ax-proof span{font:13px/1.45 var(--font-mono);color:var(--ink-2)}

/* Receipts — every number on the page, with its source */
.ax-receipts{background:var(--paper-2);padding:var(--space-4);font:13px/1.55 var(--font-mono);color:var(--ink-2)}
.ax-receipts ul{margin:8px 0 0;padding-left:18px} .ax-receipts b{color:var(--ink);font-weight:600}

/* ProjectCard — identical anatomy for all 53 */
.ax-card{display:grid;grid-template-rows:auto 1fr;background:var(--card);border:2px solid var(--ink);box-shadow:var(--lift);color:var(--ink);text-decoration:none;transition:transform .12s steps(2),box-shadow .12s steps(2);max-width:340px}
.ax-card:hover{transform:translate(-2px,-2px);box-shadow:var(--lift-hover)}
.ax-card .art{aspect-ratio:3/2;border-bottom:2px solid var(--ink);background:var(--paper);display:block;width:100%}
.ax-card .in{padding:14px 16px 16px;display:grid;gap:6px}
.ax-card .lane{font:8px/1.8 var(--font-label);text-transform:uppercase;color:var(--lane,var(--crimson))}
.ax-card h3{font:700 20px/1.2 var(--font-text);margin:0;text-wrap:balance}
.ax-card .n{font:13px/1.45 var(--font-mono);color:var(--ink-2)} .ax-card .n b{color:var(--ink);font-weight:600}

/* Field — the live text-art canvas */
.ax-field{display:block;width:100%;aspect-ratio:3/2;background:var(--paper)}

/* Spectrogram strip — written at the right edge */
.ax-strip{position:relative;height:200px;background:var(--paper);border:2px solid var(--ink);box-shadow:var(--lift);overflow:hidden}
.ax-strip canvas{display:block;width:100%;height:100%}

@media (prefers-reduced-motion:reduce){.ax *{transition:none!important;animation:none!important}}