/* Kalos451 — design-system styles, extracted from the approved prototype. */
/* ==========================================================================
   KALOS451 — built against the Kalos451 Design System
   Token values below are copied from tokens/{colors,typography,spacing,
   effects,motion}.css. Chamfer, never radii. Brackets only on 90° corners.
   One live panel and one glitch headline per screen. Max two ambient loops.
   ========================================================================== */

:root {
  /* ---- Base / void ---- */
  --void:#08080A;
  --ink-900:#0B0C0F; --ink-850:#0F1014; --ink-800:#14151A; --ink-700:#1B1D23;
  --ink-600:#23262E; --ink-500:#2C303A; --ink-400:#3A3F4B; --ink-300:#4E5460;

  /* ---- Neutral type ramp ---- */
  --fg-0:#FFFFFF; --fg-1:#F2F3F6; --fg-2:#C3C7D1;
  --fg-3:#8A909D; --fg-4:#616773; --fg-5:#464C57;

  /* ---- Brand fuchsia ---- */
  --fuchsia-100:#FFE3FB; --fuchsia-200:#FFB8F7; --fuchsia-300:#FF80FF;
  --fuchsia-400:#F45BEC; --fuchsia-500:#DF52E0; --fuchsia-600:#BE41C4;
  --fuchsia-700:#A045A0; --fuchsia-800:#6E2B70; --fuchsia-900:#3C1740;

  /* ---- Secondary cool accents ---- */
  --violet-400:#9B7BFF; --violet-500:#7B5CFF;
  --blue-400:#5FA0FF;   --blue-500:#3D8BFF;
  --cyan-400:#5BE9F0;   --cyan-500:#26D2DC;
  --green-500:#3ED598;  --amber-500:#FFB347; --red-500:#FF4D5E;

  /* ---- Alpha utilities ---- */
  --white-a04:rgba(255,255,255,.04); --white-a06:rgba(255,255,255,.06);
  --white-a08:rgba(255,255,255,.08); --white-a12:rgba(255,255,255,.12);
  --white-a20:rgba(255,255,255,.20);
  --black-a40:rgba(8,8,10,.40); --black-a70:rgba(8,8,10,.70);
  --fuchsia-a08:rgba(223,82,224,.08); --fuchsia-a16:rgba(223,82,224,.16);
  --fuchsia-a32:rgba(223,82,224,.32); --fuchsia-a48:rgba(223,82,224,.48);

  /* ---- Semantic aliases ---- */
  --bg-canvas:var(--ink-900); --bg-deep:var(--void);
  --surface-1:var(--ink-850); --surface-2:var(--ink-800); --surface-3:var(--ink-700);
  --surface-raised:var(--ink-600);
  --surface-glass:rgba(20,21,26,.62); --surface-glass-strong:rgba(11,12,15,.82);
  --surface-inset:rgba(0,0,0,.32); --surface-inset-solid:#07080A;

  --text-heading:var(--fg-1); --text-body:var(--fg-2); --text-muted:var(--fg-3);
  --text-faint:var(--fg-4); --text-disabled:var(--fg-5);
  --text-accent:var(--fuchsia-300); --text-on-accent:#12060F; --text-meta:var(--fg-3);

  --border-hairline:var(--white-a06); --border-subtle:var(--white-a08);
  --border-default:var(--ink-500); --border-strong:var(--ink-400);
  --border-accent:var(--fuchsia-500); --border-accent-soft:var(--fuchsia-a32);
  --border-focus:var(--fuchsia-400);

  --accent:var(--fuchsia-500); --accent-hover:var(--fuchsia-400);
  --accent-press:var(--fuchsia-600); --accent-quiet:var(--fuchsia-a16);
  --accent-ink:var(--fuchsia-300);

  --state-success:var(--green-500); --state-warning:var(--amber-500);
  --state-danger:var(--red-500); --state-info:var(--blue-500);

  --grid-line:rgba(255,255,255,.045); --grid-line-strong:rgba(255,255,255,.09);
  --grid-cell:56px;
  --scrim-bottom:linear-gradient(to top,rgba(8,8,10,.94) 0%,rgba(8,8,10,.72) 38%,rgba(8,8,10,0) 100%);
  --scrim-top:linear-gradient(to bottom,rgba(8,8,10,.88) 0%,rgba(8,8,10,0) 100%);
  --gradient-accent:linear-gradient(135deg,var(--fuchsia-400) 0%,var(--fuchsia-600) 52%,var(--violet-500) 100%);
  --gradient-accent-quiet:linear-gradient(135deg,rgba(244,91,236,.16) 0%,rgba(123,92,255,.10) 100%);
  --gradient-edge:linear-gradient(90deg,transparent,var(--fuchsia-a48),transparent);

  /* ---- Typography ---- */
  --font-display:"Archivo","Archivo Expanded",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-display-2xl:88px; --fs-display-xl:68px; --fs-display-lg:52px;
  --fs-display-md:40px;  --fs-display-sm:30px;
  --fs-title-lg:24px; --fs-title-md:20px; --fs-title-sm:17px;
  --fs-body-lg:17px; --fs-body:15px; --fs-body-sm:13.5px;
  --fs-meta:12px; --fs-micro:10.5px;

  --lh-tight:.94; --lh-display:1.02; --lh-snug:1.2; --lh-body:1.55; --lh-loose:1.7;
  --ls-display:-0.03em; --ls-display-tight:-0.04em; --ls-title:-0.015em;
  --ls-body:0em; --ls-meta:.06em; --ls-label:.16em;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;
  --wdth-display:112; --wdth-normal:100;

  /* ---- Spacing ---- */
  --space-1:2px;  --space-2:4px;  --space-3:8px;  --space-4:12px; --space-5:16px;
  --space-6:20px; --space-7:24px; --space-8:32px; --space-9:40px; --space-10:56px;
  --space-11:72px; --space-12:96px; --space-13:128px; --space-14:180px;
  --gutter-page:32px; --gutter-page-lg:56px;
  --section-y:var(--space-13); --section-y-sm:var(--space-11);
  --measure:64ch; --measure-narrow:44ch;
  --content-max:1440px; --content-mid:1120px; --content-text:720px;
  --control-h-sm:30px; --control-h:38px; --control-h-lg:46px;

  /* ---- Effects ---- */
  --chamfer-xs:5px; --chamfer-sm:8px; --chamfer-md:12px; --chamfer-lg:18px; --chamfer-xl:26px;
  --clip-chamfer-xs:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));
  --clip-chamfer-sm:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  --clip-chamfer-md:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  --clip-chamfer-lg:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  --clip-chamfer-xl:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));

  --shadow-md:0 12px 28px -8px rgba(0,0,0,.6);
  --shadow-lg:0 24px 56px -16px rgba(0,0,0,.7);
  --shadow-xl:0 40px 96px -24px rgba(0,0,0,.8);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-inset-ring:inset 0 0 0 1px rgba(255,255,255,.05);

  --glow-xs:0 0 8px rgba(223,82,224,.28);
  --glow-sm:0 0 16px rgba(223,82,224,.30);
  --glow-md:0 0 28px rgba(223,82,224,.32),0 0 2px rgba(255,128,255,.55);
  --glow-lg:0 0 56px rgba(223,82,224,.28),0 0 4px rgba(255,128,255,.5);
  --glow-cyan:0 0 20px rgba(38,210,220,.28);
  --glow-text:0 0 18px rgba(255,128,255,.45);
  --ring-focus:0 0 0 1px var(--fuchsia-400),0 0 0 4px rgba(223,82,224,.22);

  --drop-glow-xs:drop-shadow(0 0 5px rgba(223,82,224,.35));
  --drop-glow-sm:drop-shadow(0 0 10px rgba(223,82,224,.38));
  --drop-glow-md:drop-shadow(0 0 18px rgba(223,82,224,.42)) drop-shadow(0 0 2px rgba(255,128,255,.5));
  --drop-glow-lg:drop-shadow(0 0 32px rgba(223,82,224,.40)) drop-shadow(0 0 3px rgba(255,128,255,.45));

  --blur-glass:14px;
  --backdrop-glass:blur(14px) saturate(140%);
  --texture-grid:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  --texture-scanline:repeating-linear-gradient(to bottom,rgba(255,255,255,.022) 0px,rgba(255,255,255,.022) 1px,transparent 1px,transparent 3px);
  --noise-opacity:.035;

  /* ---- Motion ---- */
  --dur-instant:80ms; --dur-fast:140ms; --dur-base:220ms;
  --dur-slow:380ms; --dur-cinematic:640ms; --dur-reveal:900ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-technical:cubic-bezier(.2,.8,.2,1);
  --transition-ui:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-out);
  --transition-card:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out),border-color var(--dur-base) var(--ease-standard);
  --lift-hover:translateY(-2px);
  --press-scale:.985;
  --anim-orbit:k-orbit 5s linear infinite;
  --anim-orbit-slow:k-orbit 11s linear infinite;
  --anim-pulse:k-pulse 3s ease-in-out infinite;
  --anim-breathe:k-breathe 4.5s ease-in-out infinite;
  --anim-scan:k-scan 5s linear infinite;
  --anim-sweep:k-sweep 3.6s cubic-bezier(.55,0,.3,1) infinite;
  --anim-hazard:k-hazard 1.2s linear infinite;
  --anim-hazard-slow:k-hazard 3s linear infinite;
  --anim-glitch:k-glitch 6s steps(1,end) infinite;
  --anim-blink:k-blink 1.6s steps(1,end) infinite;
  --anim-flicker:k-flicker 7s steps(1,end) infinite;
  --anim-dash:k-dash 1.1s linear infinite;
  --anim-shimmer:k-shimmer 2.8s linear infinite;
  --anim-trace:k-trace 2.4s linear infinite;
  --anim-rise:k-rise 2.2s ease-in-out infinite;
  --anim-orbit-slow:k-orbit 11s linear infinite;
  /* added in the current design-system version */
  --anim-breathe-soft:k-breathe-soft 7s ease-in-out infinite;
  --anim-vein:k-vein 3.2s linear infinite;
  --anim-vein-slow:k-vein 6.4s linear infinite;
}

/* Registered so the veil radius can be transitioned rather than snapped. */
@property --k-veil-r{syntax:"<length>";inherits:false;initial-value:0px}

@keyframes k-orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes k-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes k-breathe{0%,100%{opacity:.5;filter:var(--drop-glow-xs)}50%{opacity:1;filter:var(--drop-glow-md)}}
@keyframes k-scan{0%{background-position:0 -60%}100%{background-position:0 160%}}
@keyframes k-sweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@keyframes k-hazard{to{background-position:17px 0}}
@keyframes k-blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
@keyframes k-glitch{
  0%,92%,100%{transform:translate(0,0);clip-path:inset(0)}
  92.5%{transform:translate(-2px,1px);clip-path:inset(18% 0 62% 0)}
  93%{transform:translate(2px,-1px);clip-path:inset(58% 0 22% 0)}
  93.5%{transform:translate(-1px,0);clip-path:inset(0)}
  96%{transform:translate(1px,1px);clip-path:inset(72% 0 8% 0)}
  96.4%{transform:translate(0,0);clip-path:inset(0)}
}
@keyframes k-flicker{0%,96%,100%{opacity:1}96.5%{opacity:.25}97%{opacity:1}97.6%{opacity:.5}98.2%{opacity:1}}
@keyframes k-dash{to{background-position:12px 0}}
@keyframes k-shimmer{0%{background-position:-140% 0}100%{background-position:240% 0}}
@keyframes k-trace{to{stroke-dashoffset:-64}}
@keyframes k-rise{0%,100%{transform:scaleY(.35);opacity:.45}50%{transform:scaleY(1);opacity:1}}
@keyframes k-breathe-soft{0%,100%{opacity:.34}50%{opacity:1}}
@keyframes k-vein{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes k-beam{0%{transform:translateY(-45vh)}100%{transform:translateY(145vh)}}
@keyframes k-drift{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes k-caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ==========================================================================
   BASE
   ========================================================================== */
*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg-canvas);
  color:var(--text-body);
  font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{margin:0;font-family:var(--font-display);color:var(--text-heading);text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer}

:focus-visible{outline:none;box-shadow:var(--ring-focus)}

/* ---- HexBackdrop ----------------------------------------------------------
   Per the design system: one periodic SVG pattern tile (sqrt(3)s wide by 3s
   tall for hexagon side s) covers any viewport seamlessly from a single rect.
   The breathe is two stacked rects — a dim base and a glowing copy on
   mix-blend-mode:screen with a STATIC drop-shadow, where only opacity
   animates, because animating a filter across a full-page element repaints
   every frame. The veil is one masked div: the mask hole reveals the comb,
   and the veil closes back over it across the falloff.
   It replaces --texture-grid on this surface; the two never stack.
   -------------------------------------------------------------------------- */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg-deep)}
.hex-comb{position:absolute;inset:0;width:100%;height:100%}
.hex-comb .vein-dim path{fill:none;stroke:var(--fuchsia-600)}
.hex-comb .vein-hot path{fill:none;stroke:var(--fuchsia-300)}
.hex-comb .r-dim{opacity:.5}
.hex-comb .r-hot{
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 4px rgba(223,82,224,.55));
  animation:var(--anim-breathe-soft);
}
.hex-veil{
  position:absolute;inset:0;
  background:rgba(8,8,10,.86);
  --k-veil-x:50%; --k-veil-y:36%; --k-veil-r:0px;
  -webkit-mask-image:radial-gradient(circle var(--k-veil-r) at var(--k-veil-x) var(--k-veil-y),transparent 0%,transparent 44%,#000 100%);
  mask-image:radial-gradient(circle var(--k-veil-r) at var(--k-veil-x) var(--k-veil-y),transparent 0%,transparent 44%,#000 100%);
  transition:--k-veil-r var(--dur-cinematic) var(--ease-out);
}
.backdrop .scan{position:absolute;inset:0;background-image:var(--texture-scanline)}
.backdrop .vig{position:absolute;inset:0;background:radial-gradient(ellipse 120% 80% at 50% 0%,rgba(223,82,224,.07),transparent 60%),radial-gradient(ellipse at 50% 45%,transparent 30%,rgba(8,8,10,.92) 100%)}
/* a slow beam crossing the canvas — transform-driven, so it stays cheap */
.backdrop .beam{
  position:absolute;left:0;right:0;height:42vh;
  background:linear-gradient(to bottom,transparent,rgba(223,82,224,.055) 45%,rgba(255,184,247,.03) 52%,transparent);
  animation:k-beam 16s linear infinite;will-change:transform;
}

/* ==========================================================================
   CyberCursor — the brand pointer, geometry lifted from the supplied artwork.
   One corner is authored and mirrored into the other three. Each corner holds
   two bars of identical thickness (4.630208 units) sharing the pivot
   (22.092708, 30.294792). At rest the +y bar takes
   translate(10.822,10.822) rotate(-45deg) and the +x bar
   translate(27.357,27.357) rotate(45deg): both land collinear on the diagonal,
   staggered, so the bracket reads as a folded double dash. Lock-on removes
   both transforms — a true rigid motion, never a morph. The group zooms
   0.479 → 0.707, the two scales present in the source file.
   ========================================================================== */
.cur-wrap{position:fixed;top:0;left:0;z-index:9000;pointer-events:none;display:none;will-change:transform}
body.cur .cur-wrap{display:block}
body.cur,body.cur *{cursor:none !important}

.cur-svg{display:block;width:58px;height:58px;margin:-29px 0 0 -29px;overflow:visible}
.cur-zoom{
  transform-box:view-box;
  transform-origin:86.121872px 94.323952px;
  transform:scale(.479);
  transition:transform var(--dur-base) cubic-bezier(.22,1.42,.3,1);
}
.cur-wrap.hot .cur-zoom{transform:scale(.707)}
.cur-wrap.down .cur-zoom{transform:scale(.622)}   /* lock-on dipped 12% */
.cur-wrap.down:not(.hot) .cur-zoom{transform:scale(.421)}

.cur-arm{
  fill:var(--fuchsia-400);
  transform-box:view-box;
  transform-origin:22.092708px 30.294792px;
  transition:transform var(--dur-base) cubic-bezier(.22,1.42,.3,1),fill var(--dur-fast) linear;
}
.cur-arm.y{transform:translate(10.822px,10.822px) rotate(-45deg)}
.cur-arm.x{transform:translate(27.357px,27.357px) rotate(45deg)}
.cur-wrap.hot .cur-arm{transform:none;fill:var(--fuchsia-300)}
.cur-wrap.hot .cur-g{filter:var(--drop-glow-sm)}
.cur-g{transition:filter var(--dur-base) var(--ease-standard)}

.cur-pip{
  fill:var(--fuchsia-300);
  transform-box:view-box;transform-origin:86.121872px 94.323952px;
  transform:scale(1);
  transition:transform var(--dur-base) var(--ease-out);
}
.cur-wrap.hot .cur-pip{transform:scale(.55);animation:var(--anim-pulse)}

.cur-verb{
  position:fixed;top:0;left:0;z-index:9000;pointer-events:none;display:none;
  padding-left:34px;
  font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--fuchsia-200);white-space:nowrap;
  opacity:0;transition:opacity var(--dur-fast) var(--ease-standard);
}
body.cur .cur-verb{display:block}
.cur-verb.on{opacity:1}

/* ==========================================================================
   CHAMFER + BRACKET PRIMITIVES
   Brackets sit on the two 90° corners only (top-left, bottom-right),
   because the chamfer cuts top-right and bottom-left.
   ========================================================================== */
.plate{position:relative;background:var(--surface-1);clip-path:var(--clip-chamfer-md);box-shadow:var(--shadow-inset-ring)}
.plate-sm{clip-path:var(--clip-chamfer-sm)}
.plate-lg{clip-path:var(--clip-chamfer-lg)}

.brackets{position:absolute;inset:0;pointer-events:none}
.brackets::before,.brackets::after{
  content:"";position:absolute;width:14px;height:14px;
  border:1px solid var(--border-accent-soft);
}
.brackets::before{top:0;left:0;border-right:0;border-bottom:0}
.brackets::after{bottom:0;right:0;border-left:0;border-top:0}
.brackets.live::before,.brackets.live::after{border-color:var(--accent);animation:var(--anim-pulse)}
.brackets.breathe::before,.brackets.breathe::after{border-color:var(--accent);animation:var(--anim-breathe)}

/* ==========================================================================
   AMBIENCE — the always-on layer. Loops only touch borders, rules, glows
   and empty plate area; never the ground under body copy.
   ========================================================================== */

/* ---- EDGE RUNNER: a neon light travelling the chamfered border plate ---- */
.edge{position:relative;isolation:isolate;background:transparent !important}
.edge::before{
  content:"";position:absolute;top:50%;left:50%;z-index:-2;
  width:170%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,
    transparent 0 70%,
    rgba(244,91,236,.30) 80%,
    var(--fuchsia-300) 88%,
    var(--fuchsia-100) 90%,
    rgba(244,91,236,.30) 94%,
    transparent 99% 100%);
  animation:var(--anim-orbit-slow);
  will-change:transform;
}
.edge::after{
  content:"";position:absolute;inset:1px;z-index:-1;
  background:var(--surface-1);clip-path:inherit;
}
.edge.fast::before{animation:var(--anim-orbit)}
.edge.deep::after{background:var(--ink-900)}

/* ---- NEON DIVIDER: a loading-bar rule between sections ---- */
.divider{display:flex;align-items:center;gap:var(--space-5);padding-block:var(--space-8)}
.divider .d-label{
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-faint);white-space:nowrap;
}
.divider .d-track{
  position:relative;flex:1;height:3px;overflow:hidden;
  background-image:repeating-linear-gradient(90deg,var(--white-a08) 0 6px,transparent 6px 12px);
  background-size:12px 100%;
  animation:var(--anim-dash);
}
.divider .d-track::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--fuchsia-a48),transparent);
  opacity:.55;animation:var(--anim-breathe);
}
/* One continuous pass, left to right, constant speed. translateX is a
   percentage of the ELEMENT's own width, so the end value has to be
   100% / (element width as a fraction of the track) for the light to clear
   the right edge. --sweep-end carries that per element. */
@keyframes k-sweep-lin{
  from{transform:translateX(-100%)}
  to{transform:translateX(var(--sweep-end,400%))}
}
.divider .d-sweep{
  position:absolute;top:0;bottom:0;width:26%;
  --sweep-end:calc(100% / .26);
  background:linear-gradient(90deg,transparent 0%,rgba(255,184,247,.35) 30%,var(--fuchsia-100) 50%,rgba(255,184,247,.35) 70%,transparent 100%);
  filter:var(--drop-glow-sm);
  animation:k-sweep-lin 4.8s linear infinite;
  will-change:transform;
}
.divider .d-meta{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-meta);
  color:var(--accent-ink);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.divider .d-meta i{width:6px;height:11px;background:currentColor;animation:k-caret 1.1s steps(1,end) infinite}

/* ---- RISE: HUD equaliser bars ---- */
.rise{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
.rise i{display:block;width:2px;height:100%;background:var(--accent-ink);transform-origin:bottom;animation:var(--anim-rise)}
.rise i:nth-child(2){animation-delay:-.5s}
.rise i:nth-child(3){animation-delay:-1.1s}
.rise i:nth-child(4){animation-delay:-1.7s}

/* ---- SHIMMER: light passing along a mono label ---- */
.shimmer{
  background:linear-gradient(90deg,var(--text-muted) 0 40%,var(--fuchsia-200) 50%,var(--text-muted) 60% 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:var(--anim-shimmer);
}

/* ---- CircuitVeins as box decoration -------------------------------------
   Lanes are generated from a seeded PRNG, each lapped forever by a bright
   dash. Here they sit inside the box rather than as a full-bleed band: at
   most four lanes per box, under a semi-opaque veil so nothing competes with
   the text above it. The host's own children are lifted to z-index 1, so the
   decoration can never paint over content.
   ------------------------------------------------------------------------ */
.vn-host{position:relative;isolation:isolate}
.vn-host > *:not(.vn-bg){position:relative;z-index:1}
.vn-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.vn-bg svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.vn-bg::after{content:"";position:absolute;inset:0;background:rgba(11,12,15,.72)}

.vn-bg .vn{fill:none;stroke:var(--fuchsia-a32);stroke-width:1;vector-effect:non-scaling-stroke}
.vn-bg .vn-lap{
  fill:none;stroke:var(--fuchsia-300);stroke-width:1.4;
  stroke-dasharray:11 89;vector-effect:non-scaling-stroke;
  animation:var(--anim-vein-slow);
}
.vn-bg .vn-pad{fill:var(--fuchsia-a48)}
.vn-bg .vn-pad.lit{fill:var(--fuchsia-300);animation:var(--anim-pulse)}

/* ---- CyberArrow: two solid bars always lit, four hairline stripes filled by
        a wipe running from the tail toward the tip, outer pair first and the
        inner pair 90ms behind. Direction is one transform on the <svg>. ---- */
.aw{display:inline-block;height:1em;width:auto;overflow:visible;vertical-align:-.12em}
.aw .aw-bar{fill:var(--fuchsia-300)}
.aw .aw-ghost{fill:var(--fuchsia-a32)}
.aw .aw-lit{fill:var(--fuchsia-300)}
.aw .aw-wipe{
  transform-box:view-box;transform-origin:109.7px 105px;
  transform:scaleX(.001);
  transition:transform var(--dur-cinematic) var(--ease-technical);
}
.aw .aw-wipe.inner{transition-delay:90ms}
.aw-host:hover .aw .aw-wipe,
.aw-host:focus-visible .aw .aw-wipe{transform:scaleX(1)}
.aw-host:hover .aw .aw-group{filter:var(--drop-glow-sm)}
.aw .aw-group{transition:filter var(--dur-base) var(--ease-standard)}
.btn .aw{height:1.5em}
.back .aw{height:1.4em}
.aw.left{transform:scaleX(-1)}
.aw.down{transform:rotate(90deg)}
.aw.up{transform:rotate(-90deg)}
.btn.accent .aw .aw-bar,.btn.accent .aw .aw-lit{fill:#12060F}
.btn.accent .aw .aw-ghost{fill:rgba(18,6,15,.4)}

/* ---- FLICKER: a single unstable HUD element per screen ---- */
.flicker{animation:var(--anim-flicker)}

/* ---- header accent line: same linear left-to-right loop as the dividers ---- */
.header{overflow:hidden}
.header::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;
  width:28%;
  --sweep-end:calc(100% / .28);
  background:linear-gradient(90deg,transparent 0%,rgba(244,91,236,.3) 26%,var(--fuchsia-200) 50%,rgba(244,91,236,.3) 74%,transparent 100%);
  filter:var(--drop-glow-xs);
  animation:k-sweep-lin 7s linear infinite;
  will-change:transform;
}

/* ---- card ambience: brackets wake, light sweeps the render ---- */
.pcard{position:relative}
.pcard .shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,184,247,.16) 50%,transparent 65%);
  transition:opacity var(--dur-base) var(--ease-standard);
}
.pcard:hover .shot::after{opacity:1;animation:var(--anim-sweep)}
.pcard .cbr{position:absolute;inset:0;pointer-events:none}
.pcard .cbr::before,.pcard .cbr::after{
  content:"";position:absolute;width:12px;height:12px;
  border:1px solid var(--border-hairline);
  transition:border-color var(--dur-base) var(--ease-standard);
}
.pcard .cbr::before{top:0;left:0;border-right:0;border-bottom:0}
.pcard .cbr::after{bottom:0;right:0;border-left:0;border-top:0}
.pcard:hover .cbr::before,.pcard:hover .cbr::after{border-color:var(--accent);animation:var(--anim-pulse)}

/* ---- accent button breathes its glow ----
   clip-path clips box-shadow, so the glow has to be a drop-shadow filter:
   that one follows the chamfered silhouette. */
@keyframes k-glow-breathe{0%,100%{filter:var(--drop-glow-xs)}50%{filter:var(--drop-glow-md)}}
.btn.accent{box-shadow:none;animation:k-glow-breathe 4.5s ease-in-out infinite}
.btn.accent:hover{box-shadow:none;animation-duration:2.4s}

/* ---- live badge dot ---- */
.badge.accent .dot{animation:var(--anim-pulse)}

/* ==========================================================================
   TYPE ROLES
   ========================================================================== */
.label{
  font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);
}
.meta{
  font-family:var(--font-mono);font-size:var(--fs-meta);
  letter-spacing:var(--ls-meta);color:var(--text-meta);
  font-variant-numeric:tabular-nums;
}
.display{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-variation-settings:"wdth" var(--wdth-display);
  letter-spacing:var(--ls-display);line-height:var(--lh-display);
}
.h-hero{font-size:clamp(42px,7.4vw,var(--fs-display-2xl));line-height:var(--lh-tight);letter-spacing:var(--ls-display-tight)}
.h-1{font-size:clamp(34px,5.4vw,var(--fs-display-xl))}
.h-2{font-size:clamp(26px,3.4vw,var(--fs-display-md));line-height:var(--lh-snug)}
.h-3{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-title-lg);line-height:var(--lh-snug);letter-spacing:var(--ls-title)}
.body-lg{font-size:var(--fs-body-lg);line-height:var(--lh-loose);max-width:var(--measure)}
.muted{color:var(--text-muted)}

/* ---- SectionLabel: numbered mono eyebrow ---- */
.section-label{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6)}
.section-label .n{
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-label);
  color:var(--accent-ink);font-variant-numeric:tabular-nums;
}
.section-label .t{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.section-label .bar{flex:1;height:1px;background:var(--gradient-edge)}

/* ---- GlitchText: one per screen ---- */
.glitch{position:relative;display:inline-block;color:var(--fg-0)}
.glitch span{position:absolute;inset:0;pointer-events:none}
.glitch .g1{color:var(--cyan-400);transform:translate(-.018em,.012em);opacity:.55;mix-blend-mode:screen;animation:var(--anim-glitch)}
.glitch .g2{color:var(--fuchsia-400);transform:translate(.018em,-.012em);opacity:.6;mix-blend-mode:screen;animation:var(--anim-glitch);animation-delay:-2.4s}

/* ==========================================================================
   CHROME
   ========================================================================== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:400;
  height:72px;display:flex;align-items:center;
  padding-inline:var(--gutter-page);
  background:var(--surface-glass-strong);
  backdrop-filter:var(--backdrop-glass);-webkit-backdrop-filter:var(--backdrop-glass);
  border-bottom:1px solid var(--border-hairline);
}
.logo{display:flex;align-items:center;gap:var(--space-4);transition:var(--transition-ui)}
.logo img{width:34px;height:34px;display:block;filter:var(--drop-glow-xs)}
.logo .wm{font-family:var(--font-display);font-weight:var(--fw-bold);font-variation-settings:"wdth" 112;font-size:var(--fs-title-sm);letter-spacing:.04em;color:var(--fg-1)}
.logo:hover .wm{color:var(--accent-ink)}

/* Desktop: the nav floats in the header band from outside the header. */
.nav{
  position:fixed;top:0;right:var(--gutter-page);z-index:450;
  height:72px;display:flex;gap:var(--space-3);align-items:center;
}
.nav-scrim{
  position:fixed;inset:0;z-index:440;
  background:var(--black-a70);
  opacity:0;transition:opacity var(--dur-base) var(--ease-standard);
}
.nav-scrim.on{opacity:1}
.nav a{
  position:relative;padding:var(--space-3) var(--space-5);
  font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);
  transition:var(--transition-ui);
}
.nav a:hover{color:var(--fg-1)}
.nav a.on{color:var(--accent-ink)}
.nav a.on::after{content:"";position:absolute;left:var(--space-5);right:var(--space-5);bottom:2px;height:1px;background:var(--accent);box-shadow:var(--glow-xs)}

/* ---- hamburger as a horizontal equaliser: three bars whose lengths ride
        up and down out of phase, then lock into a cross when open ---- */
.burger{
  display:none;margin-left:auto;
  width:40px;height:40px;padding:0;
  border:1px solid var(--border-subtle);background:transparent;
  clip-path:var(--clip-chamfer-xs);
  display:none;place-items:center;
}
.burger .eq{display:flex;flex-direction:column;gap:5px;width:22px}
.burger i{
  display:block;height:2px;width:100%;
  background:var(--fg-2);transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out),background var(--dur-fast) linear,opacity var(--dur-fast) linear;
  animation:k-eq 1.9s ease-in-out infinite;
}
.burger i:nth-child(1){animation-delay:-.25s}
.burger i:nth-child(2){animation-delay:-.95s}
.burger i:nth-child(3){animation-delay:-1.5s}
.burger:hover i{background:var(--fuchsia-300)}
@keyframes k-eq{
  0%,100%{transform:scaleX(.46)}
  28%{transform:scaleX(1)}
  54%{transform:scaleX(.66)}
  78%{transform:scaleX(.92)}
}
/* open state: animation off, bars form a cross */
body.menu .burger .eq{width:22px}
body.menu .burger i{animation:none;transform-origin:center;background:var(--fuchsia-300)}
body.menu .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu .burger i:nth-child(2){opacity:0;transform:scaleX(0)}
body.menu .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

main{position:relative;z-index:2;padding-top:72px}
.wrap{width:min(var(--content-mid),100%);margin-inline:auto;padding-inline:var(--gutter-page)}
.section{padding-block:var(--section-y-sm)}
.view{display:none}
.view.on{display:block}

.footer{position:relative;z-index:2;border-top:1px solid var(--border-hairline);padding-block:var(--space-9)}
.footer .row{display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-8);align-items:center}
.footer .row .push{margin-left:auto}

/* ==========================================================================
   BUTTON
   ========================================================================== */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:var(--space-3);
  height:var(--control-h-lg);padding-inline:var(--space-7);
  font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--fg-1);background:var(--surface-2);
  border:1px solid var(--border-default);
  clip-path:var(--clip-chamfer-sm);
  transition:var(--transition-ui),transform var(--dur-fast) var(--ease-standard);
}
.btn:hover{color:var(--fg-0);border-color:var(--border-strong);background:var(--surface-3)}
.btn:active{transform:scale(var(--press-scale))}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent);font-weight:var(--fw-bold);box-shadow:var(--glow-sm)}
.btn.accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--glow-md)}
.btn.quiet{background:transparent;border-color:var(--border-subtle);color:var(--text-body)}

/* the orbiting runner — reserved for the one live CTA on a screen */
.runner{position:relative;isolation:isolate}
.runner::before{
  content:"";position:absolute;top:50%;left:50%;z-index:-1;
  width:180%;aspect-ratio:1;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 300deg,var(--fuchsia-300) 350deg,transparent 360deg);
  transform:translate(-50%,-50%);
  animation:var(--anim-orbit);
}
.runner::after{
  content:"";position:absolute;inset:1px;z-index:-1;
  background:var(--accent);clip-path:var(--clip-chamfer-sm);
}

/* ==========================================================================
   BADGE / TAG
   ========================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-4);
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-label);
  text-transform:uppercase;clip-path:var(--clip-chamfer-xs);
  border:1px solid var(--border-subtle);background:var(--surface-2);color:var(--text-muted);
}
.badge .dot{width:6px;height:6px;background:currentColor}
.badge.ok{color:var(--state-success);border-color:rgba(62,213,152,.3);background:rgba(62,213,152,.08)}
.badge.ok .dot{animation:var(--anim-blink)}
.badge.accent{color:var(--accent-ink);border-color:var(--border-accent-soft);background:var(--accent-quiet)}
.tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tag{padding:var(--space-2) var(--space-3);font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--text-faint);border:1px solid var(--border-hairline)}

/* ==========================================================================
   HAZARD RULE
   ========================================================================== */
.hazard{
  height:5px;
  background:repeating-linear-gradient(-45deg,var(--fuchsia-800) 0 8px,transparent 8px 17px);
  background-size:17px 100%;
}
.hazard.run{animation:var(--anim-hazard)}

/* ==========================================================================
   CYBERPANEL — the HUD hero container. One live panel per screen.
   ========================================================================== */
.cyber{position:relative;background:var(--surface-1);clip-path:var(--clip-chamfer-lg);border:1px solid var(--border-subtle)}
.cyber .wash{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.03) 0 50%,transparent 50% 100%);background-size:100% 4px;opacity:.5;animation:var(--anim-scan)}
.cyber .bar{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-hairline)}
.cyber .bar .push{margin-left:auto}
.cyber .body{padding:var(--space-5)}
.cyber .body.flush{padding:0}

/* ==========================================================================
   MEDIAFRAME — HUD corner ticks, mono caption, honest grid placeholder
   ========================================================================== */
.frame{position:relative;background:var(--surface-inset-solid);clip-path:var(--clip-chamfer-md);overflow:hidden}
.frame img{display:block;width:100%;height:auto}
.frame .ph{
  display:grid;place-items:center;aspect-ratio:16/9;
  background-image:var(--texture-grid);background-size:32px 32px;
  background-color:var(--ink-850);
}
.frame .ph .label{text-align:center;padding-inline:var(--space-5);color:var(--text-faint)}
.frame .cap{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  background:var(--scrim-bottom);
}
.frame .cap .push{margin-left:auto}
.frame .tick{position:absolute;width:10px;height:10px;border:1px solid var(--white-a20)}
.frame .tick.tl{top:8px;left:8px;border-right:0;border-bottom:0}
.frame .tick.br{bottom:8px;right:8px;border-left:0;border-top:0}

/* ==========================================================================
   PROJECTCARD
   ========================================================================== */
.grid-work{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-7)}
.pcard{display:flex;flex-direction:column;background:var(--surface-1);border:1px solid var(--border-hairline);clip-path:var(--clip-chamfer-md);transition:var(--transition-card)}
.pcard:hover{transform:var(--lift-hover);border-color:var(--border-accent-soft);box-shadow:var(--shadow-md)}
.pcard .shot{position:relative;overflow:hidden}
.pcard .shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform var(--dur-cinematic) var(--ease-out)}
.pcard:hover .shot img{transform:scale(1.03)}
.pcard .shot .ph{aspect-ratio:16/10}
.pcard .info{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5)}
.pcard .info h3{font-size:var(--fs-title-sm);font-weight:var(--fw-semibold);letter-spacing:var(--ls-title)}
.pcard .info p{font-size:var(--fs-body-sm);color:var(--text-muted);line-height:var(--lh-body)}

/* ==========================================================================
   SPECLIST / STATBLOCK
   ========================================================================== */
.spec{border:1px solid var(--border-hairline);background:var(--surface-1);clip-path:var(--clip-chamfer-md)}
.spec .row{display:flex;justify-content:space-between;gap:var(--space-5);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-hairline)}
.spec .row:last-child{border-bottom:0}
.spec .row dt{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint)}
.spec .row dd{margin:0;font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--fg-1);font-variant-numeric:tabular-nums;text-align:right}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-7)}
.stat .fig{font-family:var(--font-display);font-weight:var(--fw-bold);font-variation-settings:"wdth" 112;font-size:var(--fs-display-sm);line-height:1;color:var(--fg-0);font-variant-numeric:tabular-nums}
.stat .cap{margin-top:var(--space-3)}

/* ==========================================================================
   TIMELINE — motion-design track sheet driving the pipeline content
   ========================================================================== */
.tl{background:var(--surface-1);border:1px solid var(--border-subtle);clip-path:var(--clip-chamfer-lg)}
.tl-bar{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-hairline)}
.tl-bar .push{margin-left:auto}
.tl-tp{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:var(--control-h-sm);padding:0;
  background:var(--surface-3);border:1px solid var(--border-default);
  clip-path:var(--clip-chamfer-xs);color:var(--fg-1);
  transition:var(--transition-ui);
}
.tl-tp:hover{border-color:var(--border-accent-soft);color:var(--accent-ink)}
.tl-tp[aria-pressed="true"]{color:var(--accent-ink);border-color:var(--accent)}
.tl-time{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--fg-1);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-meta)}
.tl-time b{color:var(--accent-ink);font-weight:var(--fw-medium)}

.tl-grid{position:relative;display:grid;grid-template-columns:132px 1fr}
.tl-rail{border-right:1px solid var(--border-hairline)}
.tl-rail .hd{height:26px;border-bottom:1px solid var(--border-hairline)}
.tl-rail button{
  display:block;width:100%;height:44px;padding-inline:var(--space-5);
  text-align:left;background:transparent;border:0;border-bottom:1px solid var(--border-hairline);
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-muted);transition:var(--transition-ui);
}
.tl-rail button:last-child{border-bottom:0}
.tl-rail button:hover{color:var(--fg-1);background:var(--white-a04)}
.tl-rail button[aria-pressed="true"]{color:var(--accent-ink);background:var(--accent-quiet)}

.tl-tracks{position:relative;overflow:hidden}
.tl-ruler{position:relative;height:26px;border-bottom:1px solid var(--border-hairline);background-image:linear-gradient(to right,var(--grid-line-strong) 1px,transparent 1px);background-size:10% 100%}
.tl-ruler span{position:absolute;top:6px;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-disabled);transform:translateX(4px);font-variant-numeric:tabular-nums}
.tl-row{position:relative;cursor:pointer;height:44px;border-bottom:1px solid var(--border-hairline);background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px);background-size:10% 100%}
.tl-row:last-child{border-bottom:0}
.tl-clip{
  position:absolute;top:9px;height:26px;
  background:var(--gradient-accent-quiet);
  border:1px solid var(--border-accent-soft);
  clip-path:var(--clip-chamfer-xs);
  transition:border-color var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard);
}
.tl-clip .fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--accent-quiet)}
.tl-clip .kf{position:absolute;top:50%;width:7px;height:7px;margin-top:-4px;background:var(--fuchsia-300);transform:rotate(45deg)}
.tl-clip .kf.a{left:-4px}
.tl-clip .kf.b{right:-4px}
.tl-row.act .tl-clip{border-color:var(--accent);background:var(--accent-quiet)}
.tl-row.act .tl-clip .kf{box-shadow:var(--glow-xs)}
.tl-row.done .tl-clip .fill{transform:scaleX(1)}

.tl-head{position:absolute;top:0;bottom:0;width:1px;background:var(--fuchsia-300);box-shadow:0 0 10px rgba(255,128,255,.7);pointer-events:none}
.tl-head::before{content:"";position:absolute;top:0;left:-5px;width:11px;height:9px;background:var(--fuchsia-300);clip-path:polygon(0 0,100% 0,50% 100%)}

.tl-read{display:grid;grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-6) var(--space-5);border-top:1px solid var(--border-hairline);background:var(--surface-inset)}
.tl-read h4{font-family:var(--font-display);font-size:var(--fs-title-md);font-weight:var(--fw-semibold);letter-spacing:var(--ls-title)}
.tl-read p{font-size:var(--fs-body-sm);color:var(--text-muted);max-width:var(--measure)}
.tl-read .out{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}

/* ==========================================================================
   SEQUENCED REVEAL — content enters on its own short timeline.
   Resting state is fully visible; JS arms the animation only for
   elements that start below the fold.
   ========================================================================== */
.seq>*{opacity:1;transform:none}
.seq.armed>*{opacity:0;transform:translateY(12px)}
.seq.play>*{
  animation:k-enter var(--dur-cinematic) var(--ease-out) both;
  animation-delay:calc(var(--i,0) * 70ms);
}
@keyframes k-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.wipe{position:relative;overflow:hidden}
.wipe.armed::after{content:"";position:absolute;inset:0;background:var(--bg-canvas);transform-origin:right}
.wipe.play::after{animation:k-wipe var(--dur-reveal) var(--ease-out) both}
@keyframes k-wipe{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ==========================================================================
   FORM (contact brief)
   ========================================================================== */
.field{display:flex;flex-direction:column;gap:var(--space-3)}
.input,.select,.textarea{
  width:100%;min-height:var(--control-h);
  padding:var(--space-4) var(--space-5);
  color:var(--fg-1);background:var(--surface-inset-solid);
  border:1px solid var(--border-default);
  clip-path:var(--clip-chamfer-xs);
  font-size:var(--fs-body-sm);
  transition:var(--transition-ui);
}
.textarea{min-height:118px;resize:vertical;font-family:inherit}
.input:hover,.select:hover,.textarea:hover{border-color:var(--border-strong)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--ring-focus)}
.input.bad{border-color:var(--state-danger);background:#170A0D}
.err{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-meta);color:var(--state-danger)}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat}

.toast{
  position:fixed;right:var(--space-7);bottom:var(--space-7);z-index:600;
  display:flex;align-items:center;gap:var(--space-5);
  min-width:290px;padding:var(--space-5) var(--space-6);
  background:var(--surface-raised);border:1px solid var(--border-subtle);
  clip-path:var(--clip-chamfer-sm);box-shadow:var(--shadow-lg);
  transform:translateY(140%);transition:transform var(--dur-slow) var(--ease-out);
}
.toast.on{transform:translateY(0)}
.toast .accentbar{position:absolute;left:0;top:0;bottom:8px;width:2px;background:var(--state-success)}

/* ==========================================================================
   FILTER BAR (work archive)
   ========================================================================== */
.filters{position:sticky;top:72px;z-index:300;display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;padding-block:var(--space-5);background:var(--surface-glass-strong);backdrop-filter:var(--backdrop-glass);-webkit-backdrop-filter:var(--backdrop-glass);border-bottom:1px solid var(--border-hairline)}
.tabs{display:flex;gap:var(--space-2)}
.tabs button{
  height:var(--control-h-sm);padding-inline:var(--space-5);
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-muted);
  background:transparent;border:1px solid var(--border-hairline);
  clip-path:var(--clip-chamfer-xs);transition:var(--transition-ui);
}
.tabs button:hover{color:var(--fg-1);border-color:var(--border-default)}
.tabs button[aria-pressed="true"]{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-quiet)}
.filters .select,.filters .input{width:auto;min-width:170px;min-height:var(--control-h-sm);padding-block:var(--space-2)}

.empty{padding:var(--space-12) var(--space-7);text-align:center;border:1px solid var(--border-hairline);background:var(--surface-1);clip-path:var(--clip-chamfer-md)}
.empty h3{font-size:var(--fs-title-md);font-weight:var(--fw-semibold);margin-bottom:var(--space-4)}
.empty p{color:var(--text-muted);max-width:46ch;margin-inline:auto;font-size:var(--fs-body-sm)}

/* ---- note: honest disclosure about placeholder content ---- */
.note{display:flex;gap:var(--space-4);padding:var(--space-5);background:var(--accent-quiet);border-left:2px solid var(--accent);font-family:var(--font-mono);font-size:var(--fs-meta);line-height:1.6;color:var(--text-body)}
.note b{color:var(--accent-ink);font-weight:var(--fw-medium)}

/* ---- meters (about) ---- */
.meter{display:flex;flex-direction:column;gap:var(--space-3)}
.meter .track{height:6px;background:var(--surface-inset-solid);border:1px solid var(--border-hairline)}
.meter .val{height:100%;background:var(--gradient-accent);transform-origin:left;transform:scaleX(var(--v,0));transition:transform var(--dur-reveal) var(--ease-out)}
.meter .top{display:flex;justify-content:space-between;gap:var(--space-4)}

/* ---- viewport HUD (project) ---- */
.hud{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-hairline);background:var(--surface-inset)}
.hud .push{margin-left:auto}
.switch{display:inline-flex;align-items:center;gap:var(--space-3)}
.switch button{width:38px;height:20px;padding:0;background:var(--surface-inset-solid);border:1px solid var(--border-default);position:relative;transition:var(--transition-ui)}
.switch button::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--fg-3);transition:transform var(--dur-base) var(--ease-standard),background var(--dur-fast) linear}
.switch button[aria-pressed="true"]{border-color:var(--accent)}
.switch button[aria-pressed="true"]::after{transform:translateX(18px);background:var(--fg-0)}
.hud input[type="range"]{accent-color:var(--accent);width:120px}

.wireover{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen;transition:opacity var(--dur-base) var(--ease-standard);background-image:linear-gradient(rgba(244,91,236,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(244,91,236,.5) 1px,transparent 1px);background-size:24px 24px}
.frame.wire .wireover{opacity:1}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* ---- split layouts: one class per shape, so every one of them collapses.
        Inline grid styles cannot be reached by a media query. ---- */
.split-hero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.split-aside{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:var(--space-8);
  align-items:start;
}
.split-even{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(28px,4vw,56px);
}
.side-sticky{display:flex;flex-direction:column;gap:var(--space-7);position:sticky;top:96px}

@media (max-width:900px){
  :root{--gutter-page:20px;--section-y-sm:var(--space-10)}

  /* mobile drawer */
  .nav{
    top:0;right:0;height:100dvh;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    width:min(84vw,320px);gap:0;
    padding:calc(72px + var(--space-6)) var(--space-5) var(--space-7);
    background:var(--surface-glass-strong);
    backdrop-filter:var(--backdrop-glass);-webkit-backdrop-filter:var(--backdrop-glass);
    border-left:1px solid var(--border-subtle);
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform var(--dur-slow) var(--ease-out);
  }
  body.menu .nav{transform:translateX(0)}
  .nav a{
    width:100%;padding:var(--space-5) var(--space-4);
    font-size:var(--fs-body-sm);letter-spacing:.12em;
    border-bottom:1px solid var(--border-hairline);
  }
  .nav a.on::after{left:var(--space-4);right:var(--space-4);bottom:6px}
  .burger{display:grid}

  /* every split collapses to one column */
  .split-hero,.split-aside,.split-even{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .side-sticky{position:static;top:auto}

  /* hero panel comes after the copy on a phone */
  .split-hero > .cyber{order:2}

  .tl-grid{grid-template-columns:92px 1fr}
  .tl-rail button{padding-inline:var(--space-4);font-size:9px;height:40px}
  .tl-row{height:40px}
  .tl-clip{top:8px;height:24px}

  .filters{gap:var(--space-3)}
  .filters .select,.filters .input{flex:1 1 140px;min-width:0}
  .filters .tabs{flex:1 1 100%}
  .filters .tabs button{flex:1}
  .filters .push{margin-left:0;flex:1 1 100%}

  .grid-work{grid-template-columns:minmax(0,1fr)}
  .spec .row{flex-direction:column;gap:var(--space-1)}
  .spec .row dd{text-align:left}
  .hud{gap:var(--space-4)}
  .hud .push{margin-left:0}
  .footer .row .push{margin-left:0}
}

@media (max-width:560px){
  :root{--gutter-page:16px}
  .divider .d-label,.divider .d-meta{display:none}
  .divider{padding-block:var(--space-6)}
  .section-label .rise{display:none}
  .btn{padding-inline:var(--space-5);font-size:var(--fs-micro)}
  .cta-row .btn,.split-hero .btn{flex:1 1 100%;justify-content:center}
  .stat .fig{font-size:var(--fs-title-lg)}
  .empty{padding:var(--space-9) var(--space-5)}
  .tl-grid{grid-template-columns:78px 1fr}
  .tl-rail button{font-size:8.5px;letter-spacing:.08em}
  .tl-bar{flex-wrap:wrap}
  .tl-bar .push{margin-left:0}
  .cyber .bar{flex-wrap:wrap}
  .cyber .bar .push{margin-left:0}
  .frame .cap{padding:var(--space-3) var(--space-4)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:0ms !important}
  .seq.armed>*,.wipe.armed::after{opacity:1 !important;transform:none !important}
  .wipe.armed::after{display:none}
}

/* ==========================================================================
   WORDPRESS INTEGRATION
   Everything below exists only because the page now lives inside WordPress:
   the artifact wrapper used to supply some of it, and WooCommerce brings its
   own markup that has to be dressed in the design system.
   ========================================================================== */

[hidden]{display:none !important}

img{max-width:100%;height:auto}

.screen-reader-text{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:12px;left:12px;z-index:9500;
  width:auto;height:auto;clip-path:none;
  padding:var(--space-4) var(--space-5);
  background:var(--surface-raised);color:var(--fg-0);
  border:1px solid var(--border-accent);
  font-family:var(--font-mono);font-size:var(--fs-meta);
}

/* the admin bar pushes the fixed chrome down */
body.admin-bar .header,
body.admin-bar .nav{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .header,
  body.admin-bar .nav{top:46px}
}

/* the public "still a placeholder" notice */
.note.provisional{align-items:flex-start}

/* WordPress editor output inside .body-lg */
.body-lg p{margin:0 0 var(--space-5)}
.body-lg p:last-child{margin-bottom:0}
.body-lg a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.body-lg h2,.body-lg h3{margin:var(--space-8) 0 var(--space-4)}
.body-lg ul,.body-lg ol{margin:0 0 var(--space-5);padding-left:var(--space-7)}
.body-lg img{clip-path:var(--clip-chamfer-md)}

/* --------------------------------------------------------------------------
   WOOCOMMERCE
   The purchase flow stays WooCommerce's own; only its skin changes here.
   ------------------------------------------------------------------------ */
.kalos-woo{color:var(--text-body)}
.kalos-woo a{color:var(--accent-ink)}

.kalos-woo ul.products{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--space-7);margin:0;padding:0;list-style:none;
}
.kalos-woo ul.products::before,
.kalos-woo ul.products::after{content:none}
.kalos-woo ul.products li.product{
  float:none !important;width:auto !important;margin:0 !important;
  position:relative;
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-5);
  background:var(--surface-1);border:1px solid var(--border-hairline);
  clip-path:var(--clip-chamfer-md);
  transition:var(--transition-card);
}
.kalos-woo ul.products li.product:hover{
  transform:var(--lift-hover);
  border-color:var(--border-accent-soft);
  box-shadow:var(--shadow-md);
}
.kalos-woo ul.products li.product img{clip-path:var(--clip-chamfer-sm);margin-bottom:var(--space-3)}
.kalos-woo ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display);font-size:var(--fs-title-sm);
  font-weight:var(--fw-semibold);letter-spacing:var(--ls-title);
  color:var(--text-heading);padding:0;
}
.kalos-woo .price,
.kalos-woo ul.products li.product .price{
  font-family:var(--font-mono);font-size:var(--fs-meta);
  color:var(--accent-ink);font-variant-numeric:tabular-nums;
}
.kalos-woo .price del{color:var(--text-faint)}
.kalos-woo .onsale{
  position:absolute;top:var(--space-4);left:var(--space-4);
  padding:var(--space-2) var(--space-4);margin:0;
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-on-accent);
  background:var(--accent);border-radius:0;
  min-height:0;min-width:0;line-height:1.4;
}

.kalos-woo .button,
.kalos-woo button.button,
.kalos-woo input[type="submit"],
.kalos-woo a.button{
  display:inline-flex;align-items:center;gap:var(--space-3);
  height:var(--control-h-lg);padding-inline:var(--space-7);
  font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-on-accent);background:var(--accent);
  border:1px solid var(--accent);border-radius:0;
  clip-path:var(--clip-chamfer-sm);
  text-shadow:none;box-shadow:none;
  transition:var(--transition-ui);
}
.kalos-woo .button:hover,
.kalos-woo button.button:hover,
.kalos-woo input[type="submit"]:hover,
.kalos-woo a.button:hover{
  background:var(--accent-hover);border-color:var(--accent-hover);
  color:var(--text-on-accent);box-shadow:none;
}

.kalos-woo input[type="text"],
.kalos-woo input[type="email"],
.kalos-woo input[type="tel"],
.kalos-woo input[type="password"],
.kalos-woo input[type="number"],
.kalos-woo input[type="search"],
.kalos-woo select,
.kalos-woo textarea{
  width:100%;min-height:var(--control-h);
  padding:var(--space-4) var(--space-5);
  color:var(--fg-1);background:var(--surface-inset-solid);
  border:1px solid var(--border-default);border-radius:0;
  font-size:var(--fs-body-sm);
}
.kalos-woo label{
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);
}

.kalos-woo table.shop_table,
.kalos-woo table.cart{
  width:100%;border-collapse:collapse;
  border:1px solid var(--border-hairline);border-radius:0;
  background:var(--surface-1);
}
.kalos-woo table.shop_table th{
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);
  text-align:left;padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border-hairline);
}
.kalos-woo table.shop_table td{
  padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--border-hairline);
  color:var(--text-body);
}

.kalos-woo .woocommerce-message,
.kalos-woo .woocommerce-info,
.kalos-woo .woocommerce-error{
  padding:var(--space-5);margin:0 0 var(--space-7);
  background:var(--accent-quiet);border:0;border-left:2px solid var(--accent);
  color:var(--text-body);font-family:var(--font-mono);font-size:var(--fs-meta);
  list-style:none;
}
.kalos-woo .woocommerce-error{background:rgba(255,77,94,.08);border-left-color:var(--state-danger)}
.kalos-woo .woocommerce-message::before,
.kalos-woo .woocommerce-info::before,
.kalos-woo .woocommerce-error::before{content:none}

.kalos-woo .woocommerce-tabs ul.tabs{
  display:flex;flex-wrap:wrap;gap:var(--space-2);
  margin:0 0 var(--space-7);padding:0;border:0;list-style:none;
}
.kalos-woo .woocommerce-tabs ul.tabs::before{content:none}
.kalos-woo .woocommerce-tabs ul.tabs li{
  margin:0;padding:0;background:transparent;
  border:1px solid var(--border-hairline);border-radius:0;
}
.kalos-woo .woocommerce-tabs ul.tabs li::before,
.kalos-woo .woocommerce-tabs ul.tabs li::after{content:none}
.kalos-woo .woocommerce-tabs ul.tabs li a{
  display:block;padding:var(--space-3) var(--space-5);
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);
}
.kalos-woo .woocommerce-tabs ul.tabs li.active{border-color:var(--accent);background:var(--accent-quiet)}
.kalos-woo .woocommerce-tabs ul.tabs li.active a{color:var(--accent-ink)}

.kalos-woo .woocommerce-breadcrumb{
  font-family:var(--font-mono);font-size:var(--fs-meta);
  color:var(--text-faint);margin-bottom:var(--space-7);
}
.kalos-woo .product_title{
  font-family:var(--font-display);font-size:var(--fs-display-sm);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-display);
  color:var(--text-heading);
}
.kalos-woo .quantity input.qty{width:5.5em;text-align:center}
.kalos-woo .cart-collaterals,
.kalos-woo .cart_totals{margin-top:var(--space-8)}

/* Cart, checkout and account keep the native pointer: never make a purchase
   harder to operate for the sake of a custom cursor. */
body.kalos-native-pointer .cur-wrap,
body.kalos-native-pointer .cur-verb{display:none !important}
body.kalos-native-pointer,
body.kalos-native-pointer *{cursor:auto}

/* ==========================================================================
   BLOCK EDITOR CONTENT
   Styles for whatever you build on the "Kalos — Blank canvas" template, so
   plain blocks inherit the design system without any per-block work.
   ========================================================================== */
.kalos-content{display:flex;flex-direction:column;gap:var(--space-7)}
.kalos-content > *{margin-block:0}

.kalos-content p{
  max-width:var(--measure);
  font-size:var(--fs-body-lg);line-height:var(--lh-loose);
  color:var(--text-body);
}
.kalos-content a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.kalos-content h2{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-variation-settings:"wdth" var(--wdth-display);
  font-size:clamp(26px,3.4vw,var(--fs-display-md));
  line-height:var(--lh-snug);letter-spacing:var(--ls-display);
  color:var(--text-heading);margin-top:var(--space-8);
}
.kalos-content h3{
  font-family:var(--font-display);font-weight:var(--fw-semibold);
  font-size:var(--fs-title-lg);line-height:var(--lh-snug);
  letter-spacing:var(--ls-title);color:var(--text-heading);
  margin-top:var(--space-6);
}
.kalos-content ul,.kalos-content ol{
  max-width:var(--measure);margin:0;padding-left:var(--space-7);
  color:var(--text-body);
}
.kalos-content li{margin-bottom:var(--space-3)}

.kalos-content blockquote{
  margin:0;padding:var(--space-5) var(--space-6);
  border:0;border-left:2px solid var(--accent);
  background:var(--accent-quiet);
  font-size:var(--fs-body-lg);color:var(--text-body);
}

.kalos-content img,
.kalos-content .wp-block-image img{clip-path:var(--clip-chamfer-md);display:block}
.kalos-content figure{margin:0}
.kalos-content figcaption{
  margin-top:var(--space-3);
  font-family:var(--font-mono);font-size:var(--fs-meta);
  letter-spacing:var(--ls-meta);color:var(--text-faint);
}

.kalos-content .wp-block-gallery{gap:var(--space-4)}
.kalos-content .wp-block-columns{gap:var(--space-7)}
.kalos-content .wp-block-separator{
  border:0;height:1px;background:var(--gradient-edge);
  margin-block:var(--space-6);width:100%;max-width:none;opacity:1;
}
.kalos-content .wp-block-table table{
  width:100%;border-collapse:collapse;
  background:var(--surface-1);border:1px solid var(--border-hairline);
}
.kalos-content .wp-block-table th,
.kalos-content .wp-block-table td{
  padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--border-hairline);text-align:left;
}
.kalos-content .wp-block-table th{
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);
}

/* Core buttons pick up the design-system button, chamfer included. */
.kalos-content .wp-block-button__link{
  display:inline-flex;align-items:center;gap:var(--space-3);
  height:var(--control-h-lg);padding-inline:var(--space-7);
  font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none;
  color:var(--text-on-accent);background:var(--accent);
  border:1px solid var(--accent);border-radius:0;
  clip-path:var(--clip-chamfer-sm);
  transition:var(--transition-ui);
}
.kalos-content .wp-block-button__link:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.kalos-content .is-style-outline .wp-block-button__link{
  background:transparent;color:var(--text-body);border-color:var(--border-subtle);
}
.kalos-content .is-style-outline .wp-block-button__link:hover{
  color:var(--accent-ink);border-color:var(--accent-soft);background:transparent;
}