/* ============================================================================
   NACMO · NeoAgentCyberMorphism — Stylesheet v1.2
   Drop-in CSS. Cool blue/cyan signal · rationed orange · chamfer-only corners ·
   IBM Plex · holographic + chromatic-aberration utilities.

   USAGE
   -----
   1. Load the type stack (or self-host and delete this @import):
        @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
   2. Wrap your app (or any subtree) in the theme root:
        <div class="nacmo"> ... </div>
      Design tokens live on :root, so they are available globally regardless.
   3. Use component + utility classes (all prefixed `nacmo-`).

   NOTES
   -----
   • Corners are never rounded. Surfaces use the chamfer via clip-path (.nacmo-cut).
   • clip-path clips box-shadow, so chamfered surfaces that need depth use
     filter: drop-shadow() instead.
   • The iridescent ring rotates fluidly via the registered @property --holo-angle.
   • Chromatic aberration is display-only (>=28px). Add `data-text` matching the
     element's text. It is removed entirely under prefers-reduced-motion.
   ========================================================================== */

/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); */

/* ----------------------------------------------------------------- TOKENS */
:root {
  /* space / void neutrals */
  --space-950:#04070F; --space-900:#060B17; --space-800:#0A1120;
  --space-700:#0B1426; --space-600:#101D33; --space-500:#16263F;
  --space-400:#1E3350; --space-300:#2A436A; --space-200:#37557F;

  /* cyan — primary signal */
  --cyan-100:#CFFAFE; --cyan-200:#A5F3FC; --cyan-300:#67E8F9;
  --cyan-400:#22D3EE; --cyan-500:#06B6D4; --cyan-600:#0891B2; --cyan-700:#0E7490;

  /* azure — structure */
  --blue-200:#BFDBFE; --blue-300:#93C5FD; --blue-400:#60A5FA;
  --blue-500:#3B82F6; --blue-600:#2563EB; --blue-700:#1D4ED8; --blue-steel:#3A5A86;

  /* orange — the rationed highlight */
  --orange-200:#FFD8B0; --orange-300:#FFB877; --orange-400:#FF9F45;
  --orange-500:#FF7A1A; --orange-600:#EA580C; --orange-700:#C2410C;

  /* nebula — atmosphere only */
  --nebula-indigo:#4F46E5; --nebula-violet:#7C3AED;
  --nebula-magenta:#C026D3; --nebula-pink:#DB2777;

  /* ink — cool whites */
  --ink-50:#F4F8FF; --ink-100:#EAF2FF; --ink-300:#B6C6E0;
  --ink-500:#7E92B4; --ink-700:#4A5C7E;

  /* semantic */
  --success:#2DD4A7; --success-bg:rgba(45,212,167,.12);
  --warning:#FFB020; --warning-bg:rgba(255,176,32,.12);
  --danger:#FF5470;  --danger-bg:rgba(255,84,112,.12);
  --info:var(--cyan-400); --info-bg:rgba(34,211,238,.12);

  /* lines & strokes */
  --line-soft:rgba(143,178,235,.10);
  --line:rgba(143,178,235,.18);
  --line-strong:rgba(143,178,235,.32);
  --line-cyan:rgba(34,211,238,.45);
  --line-orange:rgba(255,122,26,.55);

  /* glass */
  --glass:rgba(16,29,51,.55);
  --glass-blur:14px;

  /* gradients */
  --grad-primary:linear-gradient(135deg,var(--cyan-400) 0%,var(--blue-500) 100%);
  --grad-primary-soft:linear-gradient(135deg,rgba(34,211,238,.12),rgba(59,130,246,.12));
  --grad-highlight:linear-gradient(135deg,var(--orange-400) 0%,var(--orange-600) 100%);
  --grad-surface:linear-gradient(180deg,rgba(30,51,80,.45),rgba(11,20,38,.55));
  --grad-nebula:radial-gradient(120% 120% at 20% 0%,rgba(59,130,246,.20) 0%,rgba(79,70,229,.12) 40%,rgba(6,182,212,.06) 72%,transparent 100%);
  --grad-holo:conic-gradient(from var(--holo-angle,210deg) at 50% 50%,var(--cyan-300),var(--blue-500),var(--blue-steel),var(--blue-400),var(--cyan-300));

  /* chroma ghost tints */
  --chroma-red:#FF2D6B; --chroma-cyan:#22E6FF;

  /* type */
  --font-display:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --font-body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
  --fs-display:clamp(2.6rem,6vw,4rem);
  --fs-h1:clamp(2rem,4vw,2.5rem);
  --fs-h2:clamp(1.6rem,3vw,2rem);
  --fs-h3:1.5rem; --fs-h4:1.25rem;
  --fs-body-l:1.125rem; --fs-body:1rem; --fs-body-s:.875rem;
  --fs-caption:.8125rem; --fs-micro:.75rem;

  /* spacing (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-32:128px;

  /* corners — chamfer only, no rounding */
  --r:0; --chamfer:12px;
  --cut:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  --cut-sm:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));

  /* elevation */
  --e1:0 1px 2px rgba(0,0,0,.4);
  --e2:0 6px 18px rgba(0,0,0,.45);
  --e3:0 18px 48px rgba(0,0,0,.55);
  --glow-cyan:0 0 0 1px var(--line-cyan),0 0 28px rgba(34,211,238,.35);
  --glow-orange:0 0 0 1px var(--line-orange),0 0 26px rgba(255,122,26,.40);
  --glow-soft:0 0 24px rgba(34,211,238,.18);

  /* motion */
  --d-instant:80ms; --d-fast:160ms; --d-base:240ms; --d-slow:400ms; --d-deliberate:640ms;
  --ease-warp:cubic-bezier(.2,.8,.2,1);
  --ease-enter:cubic-bezier(.16,1,.3,1);
  --ease-exit:cubic-bezier(.4,0,1,1);

  /* layout */
  --container:1180px; --sidebar:264px;
}

/* registered angle so the conic ring can rotate fluidly (no background-position jank) */
@property --holo-angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }

/* ------------------------------------------------------------- KEYFRAMES */
@keyframes nacmo-holo-spin { to { --holo-angle:360deg; } }
@keyframes nacmo-foil { 0%{transform:translate3d(-30%,0,0) rotate(18deg)} 45%{transform:translate3d(520%,0,0) rotate(18deg)} 100%{transform:translate3d(520%,0,0) rotate(18deg)} }
@keyframes nacmo-holo-text { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes nacmo-chroma-r { 0%,100%{transform:translate(calc(var(--cx,2) * -1px),0)} 50%{transform:translate(calc(var(--cx,2) * -1.4px),.5px)} }
@keyframes nacmo-chroma-c { 0%,100%{transform:translate(calc(var(--cx,2) * 1px),0)} 50%{transform:translate(calc(var(--cx,2) * 1.4px),-.5px)} }
@keyframes nacmo-fade-up { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ------------------------------------------------------------------ BASE */
.nacmo {
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--ink-100);
  background:var(--space-700);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.nacmo h1,.nacmo h2,.nacmo h3,.nacmo h4 {
  font-family:var(--font-display); font-weight:600; line-height:1.18;
  letter-spacing:-.015em; color:var(--ink-50); margin:0;
}
.nacmo h1{font-size:var(--fs-h1)} .nacmo h2{font-size:var(--fs-h2)}
.nacmo h3{font-size:var(--fs-h3)} .nacmo h4{font-size:var(--fs-h4)}
.nacmo p{margin:0 0 var(--s-3);color:var(--ink-300);max-width:66ch}
.nacmo a{color:var(--cyan-300)}
.nacmo code,.nacmo .nacmo-mono{font-family:var(--font-mono)}
.nacmo ::selection{background:rgba(255,122,26,.35);color:var(--ink-50)}

.nacmo-eyebrow{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--orange-400)}
.nacmo-label{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}

/* keyboard focus — never removed, only restyled */
.nacmo :focus-visible{outline:2px solid var(--cyan-400);outline-offset:3px}

/* ------------------------------------------------------------- UTILITIES */
.nacmo-cut{clip-path:var(--cut)}
.nacmo-cut-sm{clip-path:var(--cut-sm)}
.nacmo-reveal{animation:nacmo-fade-up var(--d-slow) var(--ease-enter) both}

/* --------------------------------------------------------------- SURFACES */
.nacmo-panel{background:var(--grad-surface);border:1px solid var(--line);clip-path:var(--cut);padding:var(--s-4)}

.nacmo-glass{background:var(--glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--line);clip-path:var(--cut)}

/* Holographic panel — usage: <div class="nacmo-holo"><div class="nacmo-holo__inner"> ... </div></div> */
.nacmo-holo{position:relative;padding:1.5px;clip-path:var(--cut);
  background:var(--grad-holo);
  animation:nacmo-holo-spin 7s linear infinite}
.nacmo-holo__inner{position:relative;overflow:hidden;clip-path:var(--cut);padding:var(--s-4);
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(34,211,238,.08),transparent 55%),
    radial-gradient(120% 90% at 88% 100%,rgba(59,130,246,.10),transparent 55%),
    linear-gradient(180deg,var(--space-600),var(--space-700))}
/* cool prismatic foil glint, GPU transform, rests off-screen between passes */
.nacmo-holo__inner::before{content:"";position:absolute;top:-50%;left:-60%;width:45%;height:200%;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(207,250,254,.08) 38%,rgba(165,216,255,.12) 50%,rgba(103,232,249,.08) 62%,transparent);
  transform:translate3d(0,0,0) rotate(18deg);mix-blend-mode:screen;will-change:transform;
  animation:nacmo-foil 8s ease-in-out infinite}
.nacmo-holo__inner > *{position:relative;z-index:1}

/* ------------------------------------------------------ CHROMATIC ABERRATION */
/* display type only; element needs data-text matching its text content */
.nacmo-chroma{position:relative;isolation:isolate}
.nacmo-chroma::before,.nacmo-chroma::after{content:attr(data-text);position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.5}
.nacmo-chroma::before{color:var(--chroma-red);transform:translate(calc(var(--cx,1.5) * -1px),0)}
.nacmo-chroma::after{color:var(--chroma-cyan);transform:translate(calc(var(--cx,1.5) * 1px),0)}
.nacmo-chroma--strong::before,.nacmo-chroma--strong::after{opacity:.62;filter:blur(.4px)}
.nacmo-chroma--strong{--cx:3}
.nacmo-chroma.is-animated::before{animation:nacmo-chroma-r 3.8s var(--ease-warp) infinite}
.nacmo-chroma.is-animated::after{animation:nacmo-chroma-c 3.8s var(--ease-warp) infinite}
.nacmo-chroma--hover::before,.nacmo-chroma--hover::after{transition:transform var(--d-base) var(--ease-warp),opacity var(--d-base)}
.nacmo-chroma--hover:hover::before{transform:translate(-3px,0);opacity:.7}
.nacmo-chroma--hover:hover::after{transform:translate(3px,0);opacity:.7}
/* iridescent gradient display text (pair with .nacmo-chroma for the hero look) */
.nacmo-holo-text{
  background:linear-gradient(110deg,#F4F8FF,#A5D8FF 32%,#67E8F9 52%,#B6C6E0 74%,#F4F8FF);
  background-size:220% 220%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:nacmo-holo-text 8s ease-in-out infinite;
  filter:drop-shadow(0 0 16px rgba(34,211,238,.28))}
.nacmo-holo-text.nacmo-chroma::before,.nacmo-holo-text.nacmo-chroma::after{-webkit-text-fill-color:initial}

/* ------------------------------------------------------------- BUTTONS */
.nacmo-btn{font-family:var(--font-display);font-weight:600;font-size:var(--fs-body-s);letter-spacing:.02em;
  border:1px solid transparent;border-radius:0;padding:11px 20px;min-height:44px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:all var(--d-fast) var(--ease-warp);color:var(--space-950)}
.nacmo-btn svg{width:16px;height:16px}
.nacmo-btn--primary{background:var(--grad-primary);box-shadow:var(--glow-soft)}
.nacmo-btn--primary:hover{box-shadow:var(--glow-cyan);transform:translateY(-1px)}
.nacmo-btn--highlight{background:var(--grad-highlight);color:var(--space-950)}
.nacmo-btn--highlight:hover{box-shadow:var(--glow-orange);transform:translateY(-1px)}
.nacmo-btn--secondary{background:transparent;color:var(--cyan-200);border-color:var(--line-cyan)}
.nacmo-btn--secondary:hover{background:rgba(34,211,238,.10);box-shadow:var(--glow-soft)}
.nacmo-btn--ghost{background:transparent;color:var(--ink-300);border-color:var(--line)}
.nacmo-btn--ghost:hover{color:var(--ink-50);border-color:var(--line-strong)}
.nacmo-btn--danger{background:var(--danger);color:#2A0008}
.nacmo-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* --------------------------------------------------------------- FORMS */
.nacmo-field{margin-bottom:var(--s-4);max-width:380px}
.nacmo-field > label{display:block;font-size:var(--fs-body-s);font-weight:600;color:var(--ink-100);margin-bottom:6px}
.nacmo-field .nacmo-hint{font-size:var(--fs-caption);color:var(--ink-500);margin-top:5px}
.nacmo-input{width:100%;background:rgba(4,7,15,.5);border:1px solid var(--line);border-radius:0;
  color:var(--ink-50);font-family:var(--font-body);font-size:var(--fs-body);padding:11px 14px;
  transition:all var(--d-fast) var(--ease-warp)}
.nacmo-input::placeholder{color:var(--ink-700)}
.nacmo-input:hover{border-color:var(--line-strong)}
.nacmo-input:focus{outline:none;border-color:var(--cyan-400);box-shadow:0 0 0 3px rgba(34,211,238,.18)}
.nacmo-input.is-error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(255,84,112,.16)}

/* --------------------------------------------------------------- BADGES */
.nacmo-badge{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em;
  padding:4px 10px;border-radius:0;border:1px solid var(--line);color:var(--ink-300)}
.nacmo-badge--cyan{color:var(--cyan-200);background:var(--info-bg);border-color:var(--line-cyan)}
.nacmo-badge--orange{color:var(--orange-300);background:rgba(255,122,26,.12);border-color:var(--line-orange)}
.nacmo-badge--success{color:var(--success);background:var(--success-bg);border-color:rgba(45,212,167,.4)}
.nacmo-badge--warning{color:var(--warning);background:var(--warning-bg);border-color:rgba(255,176,32,.4)}
.nacmo-badge--danger{color:var(--danger);background:var(--danger-bg);border-color:rgba(255,84,112,.4)}

/* --------------------------------------------------------------- ALERTS */
.nacmo-alert{display:flex;gap:12px;padding:var(--s-4);clip-path:var(--cut-sm);border:1px solid;align-items:flex-start}
.nacmo-alert svg{width:20px;height:20px;flex:none;margin-top:2px}
.nacmo-alert b{display:block;color:var(--ink-50);font-family:var(--font-display);font-weight:600}
.nacmo-alert p{margin:2px 0 0;color:inherit;opacity:.9;font-size:var(--fs-body-s)}
.nacmo-alert--info{background:var(--info-bg);border-color:var(--line-cyan);color:var(--cyan-100)}
.nacmo-alert--success{background:var(--success-bg);border-color:rgba(45,212,167,.4);color:var(--success)}
.nacmo-alert--warning{background:var(--warning-bg);border-color:rgba(255,176,32,.4);color:var(--warning)}
.nacmo-alert--danger{background:var(--danger-bg);border-color:rgba(255,84,112,.4);color:var(--danger)}

/* ------------------------------------------------------------- PROGRESS */
.nacmo-progress{height:8px;background:var(--space-400);overflow:hidden;border:1px solid var(--line)}
.nacmo-progress > .nacmo-progress__fill{height:100%;background:var(--grad-primary);box-shadow:var(--glow-soft)}

/* --------------------------------------------------------------- SWITCH */
.nacmo-switch{position:relative;width:46px;height:26px;display:inline-block}
.nacmo-switch input{opacity:0;width:0;height:0}
.nacmo-switch .nacmo-switch__slider{position:absolute;inset:0;background:var(--space-400);border:1px solid var(--line);cursor:pointer;transition:all var(--d-base) var(--ease-warp)}
.nacmo-switch .nacmo-switch__slider::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:var(--ink-300);transition:all var(--d-base) var(--ease-warp)}
.nacmo-switch input:checked + .nacmo-switch__slider{background:var(--grad-primary);border-color:transparent;box-shadow:var(--glow-soft)}
.nacmo-switch input:checked + .nacmo-switch__slider::before{transform:translateX(20px);background:var(--space-950)}

/* ---------------------------------------------------------------- RANGE */
.nacmo-range{-webkit-appearance:none;appearance:none;width:260px;height:4px;background:var(--space-400);outline:none}
.nacmo-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--cyan-400);box-shadow:var(--glow-cyan);cursor:pointer}
.nacmo-range::-moz-range-thumb{width:16px;height:16px;border:none;background:var(--cyan-400);box-shadow:var(--glow-cyan);cursor:pointer}

/* ----------------------------------------------------------------- TABS */
.nacmo-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.nacmo-tab{font-family:var(--font-display);font-weight:500;font-size:var(--fs-body-s);background:none;border:none;
  color:var(--ink-500);padding:10px 16px;cursor:pointer;position:relative;transition:color var(--d-fast)}
.nacmo-tab:hover{color:var(--ink-100)}
.nacmo-tab.is-active{color:var(--cyan-200)}
.nacmo-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad-primary);box-shadow:var(--glow-soft)}

/* -------------------------------------------------------------- TOOLTIP */
.nacmo-tip{position:relative;cursor:help;border-bottom:1px dashed var(--cyan-500)}
.nacmo-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--space-900);border:1px solid var(--line-cyan);color:var(--ink-100);font-family:var(--font-mono);font-size:var(--fs-micro);
  padding:6px 10px;white-space:nowrap;opacity:0;pointer-events:none;transition:all var(--d-fast) var(--ease-warp);box-shadow:var(--e2)}
.nacmo-tip:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* ------------------------------------------------------------ TOAST/CARD */
.nacmo-toast{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;
  filter:drop-shadow(0 12px 32px rgba(4,7,15,.6))} /* combine with .nacmo-glass */

/* --------------------------------------------------------- ATMOSPHERE BG */
.nacmo-bg-nebula{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 50% at 84% 6%,rgba(59,130,246,.12),transparent 62%),
    radial-gradient(55% 45% at 10% 90%,rgba(6,182,212,.09),transparent 62%)}

/* ====================================================== SIGNATURE SYSTEM
   NACMO is recognizable by FORM. Use these consistently.

   MONOGRAM (drop-in SVG — the chamfered "N node", orange top-right):
   <svg viewBox="0 0 48 48" fill="none" width="32" height="32">
     <path d="M6 6H33L42 15V42H15L6 33Z" stroke="#22D3EE" stroke-width="2.5" stroke-linejoin="miter"/>
     <path d="M17 33V16L31 33V16" stroke="#67E8F9" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="miter"/>
     <path d="M33 6L42 15" stroke="#FF7A1A" stroke-width="2.5"/>
     <rect x="37" y="9" width="5.5" height="5.5" fill="#FF7A1A"/>
   </svg>
   ====================================================================== */

/* HUD corner brackets — top-right is ALWAYS orange (the signature tell).
   Usage: <div class="nacmo-hud"> ...content... <div class="hud-marks"></div></div> */
.nacmo-hud{position:relative}
.nacmo-hud .hud-marks{position:absolute;inset:10px;pointer-events:none;z-index:3;
  --hb:18px;--ht:2px;--hc:var(--cyan-400);--ho:var(--orange-500);
  background:
    linear-gradient(var(--hc),var(--hc)) 0 0/var(--hb) var(--ht) no-repeat,
    linear-gradient(var(--hc),var(--hc)) 0 0/var(--ht) var(--hb) no-repeat,
    linear-gradient(var(--ho),var(--ho)) 100% 0/var(--hb) var(--ht) no-repeat,
    linear-gradient(var(--ho),var(--ho)) 100% 0/var(--ht) calc(var(--hb) + 6px) no-repeat,
    linear-gradient(var(--hc),var(--hc)) 0 100%/var(--hb) var(--ht) no-repeat,
    linear-gradient(var(--hc),var(--hc)) 0 100%/var(--ht) var(--hb) no-repeat,
    linear-gradient(var(--hc),var(--hc)) 100% 100%/var(--hb) var(--ht) no-repeat,
    linear-gradient(var(--hc),var(--hc)) 100% 100%/var(--ht) var(--hb) no-repeat;
  filter:drop-shadow(0 0 4px rgba(34,211,238,.35))}

/* ruler tick strip */
.nacmo-rule{height:10px;opacity:.7;
  background:
    repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 11px) bottom/100% 6px no-repeat,
    repeating-linear-gradient(90deg,var(--cyan-500) 0 1.5px,transparent 1.5px 66px) bottom/100% 10px no-repeat}

/* mono signature tag: [ idx // LABEL ] — brackets cyan, index orange */
.nacmo-tag{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-300);display:inline-flex;align-items:center;gap:.5em}
.nacmo-tag .br{color:var(--cyan-400)}
.nacmo-tag .ix{color:var(--orange-400)}
.nacmo-tag .sl{color:var(--cyan-600)}

/* telemetry status strip */
.nacmo-statusbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5em var(--s-3);
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;color:var(--ink-500);
  padding:8px 12px;clip-path:var(--cut-sm);border:1px solid var(--line);background:rgba(4,7,15,.4)}
.nacmo-statusbar .dot{color:var(--success)}
.nacmo-statusbar .hl{color:var(--cyan-300)}
.nacmo-statusbar .or{color:var(--orange-400)}
.nacmo-statusbar .sep{color:var(--space-200)}

/* tagged section header (// NN // + top rule + orange tick) */
.nacmo-section-head{position:relative;padding-top:var(--s-4)}
.nacmo-section-head::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--cyan-500),var(--line) 22%,transparent 60%)}
.nacmo-section-head::after{content:"";position:absolute;top:-2px;left:0;width:5px;height:5px;background:var(--orange-500)}
.nacmo-section-head .idx{display:block;font-family:var(--font-mono);font-weight:600;color:var(--orange-400);
  font-size:var(--fs-body-s);letter-spacing:.14em;margin-bottom:6px}
.nacmo-section-head .idx::before{content:"// "}
.nacmo-section-head .idx::after{content:" //"}

/* ----------------------------------------------------------- A11Y / MOTION */
@media (prefers-reduced-motion: reduce){
  .nacmo *,.nacmo *::before,.nacmo *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;
  }
}