/* Neuform rules shared by all 5 DESIGN.md files (same typography, spacing, motion and effects sections).
   DESIGN.md wins over the taste-skill house rules (Ralph, 10/21/2026). Each clash is listed in design/README.md and passed in d1/allow.txt. */
main { padding-top: 48px; padding-bottom: 80px; }                                   /* section-padding, trimmed at the top for the app shell */
h1 { font-size: 64px; line-height: 1.04; font-weight: 500; letter-spacing: 0; }       /* display-lg */
.title-row { margin-bottom: 32px; }
.sub { margin-top: 12px; }
/* label-md: JetBrains Mono 12/600/1.2 on labels and technical metadata */
.meta, .tag, .feed .t, .train .t, .step-d, .need .by, .kpis dt, .gl .num, .hud-l, .orb-state, .count, th {
  font-family: var(--mono); font-size: 12px; font-weight: 600; line-height: 1.2;
}
.hud-v, .kpis dd { font-family: var(--mono); }
.count { line-height: 20px; }
.stage h2 { font-family: var(--mono); font-size: 28px; font-weight: 600; letter-spacing: .02em; }
/* cards: subtle border plus shadow depth, and a hover lift */
.card, .hud { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -24px rgba(0, 0, 0, .8); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.card:not(.stage):hover { transform: translateY(-2px); border-color: var(--control); }
/* atmosphere: an accent bloom on the page top and behind the orb */
body { background: radial-gradient(1200px 500px at 50% -180px, color-mix(in srgb, var(--accent) 9%, var(--bg)), var(--bg) 70%) no-repeat, var(--bg); }
.stage { background: radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--accent) 14%, var(--surface)) 0%, var(--surface) 70%); }
[data-voice="speaking"] .stage { background: radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--accent-2) 16%, var(--surface)) 0%, var(--surface) 70%); }
.rail, .bar { background: color-mix(in srgb, var(--bg) 100%, transparent); }
/* masked reveal on the headline, staggered entrance. Only with JS, so content never stays hidden */
h1 { overflow: hidden; padding-bottom: .06em; }
h1 .m { display: inline-block; }
.js h1 .m { transform: translateY(105%); transition: transform .9s var(--ease); }
.js h1.in .m { transform: none; }
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .35s, box-shadow .35s; transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }
.js .card.rv.in:not(.stage):hover { transform: translateY(-2px); transition-delay: 0ms; }
@media (max-width: 760px) { h1 { font-size: clamp(40px, 11vw, 64px); } main { padding-top: 24px; } }
@media (prefers-reduced-motion: reduce) { .js h1 .m, .js .rv { opacity: 1; transform: none; } }