/* Shared design system for the NewNormal site — the single source for the palette (:root vars),
   base reset, the NewNormal logo lockup (.nnl*), the target-frame reticle/notch keyline, nav-link
   underline, scrollbars, and shared page-type styles. Generated from the per-page <style> blocks;
   edit here, not in the pages. Loaded by every page via the shared <head> partial. */
*, *::before, *::after { border-radius: 0 !important; }
:root {
  --bg: #0B0E14;
  --surface: #161B22;
  --surface-2: #1C232D;
  --signal: #06B6D4;
  --signal-2: #22D3EE;
  --blue: #4D9FFF;
  --ink: #E6EDF3;
  --muted: #8B949E;
  --danger: #F85149;
  --line: #222A35;
  --reticle: #5b6675;
  --reticle-lock: #06B6D4;
  --reticle-glow: rgba(6,182,212,.55);
  --reticle-arm: 18px;
  --reticle-weight: 1.5px;
  --reticle-overrun: 4px;
}
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); font-family:'"IBM Plex Sans"',system-ui,sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.grid-bg { background-image: linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px); background-size: 48px 48px; }
.target-frame { position: relative; }
.target-frame > .tf { position:absolute; width:var(--reticle-arm); height:var(--reticle-arm); pointer-events:none; z-index:2; }
.target-frame > .tf::before, .target-frame > .tf::after { content:""; position:absolute; background:var(--reticle); transition: background .28s ease, box-shadow .28s ease; }
.target-frame > .tf::before { height:var(--reticle-weight); width:calc(var(--reticle-arm) + var(--reticle-overrun)); }
.target-frame > .tf::after  { width:var(--reticle-weight); height:calc(var(--reticle-arm) + var(--reticle-overrun)); }
.target-frame > .tf-tl { top:0; left:0; }
.target-frame > .tf-tl::before { top:0; left:calc(-1 * var(--reticle-overrun)); }
.target-frame > .tf-tl::after { left:0; top:calc(-1 * var(--reticle-overrun)); }
.target-frame > .tf-tr { top:0; right:0; }
.target-frame > .tf-tr::before { top:0; right:calc(-1 * var(--reticle-overrun)); }
.target-frame > .tf-tr::after { right:0; top:calc(-1 * var(--reticle-overrun)); }
.target-frame > .tf-bl { bottom:0; left:0; }
.target-frame > .tf-bl::before { bottom:0; left:calc(-1 * var(--reticle-overrun)); }
.target-frame > .tf-bl::after { left:0; bottom:calc(-1 * var(--reticle-overrun)); }
.target-frame > .tf-br { bottom:0; right:0; }
.target-frame > .tf-br::before { bottom:0; right:calc(-1 * var(--reticle-overrun)); }
.target-frame > .tf-br::after { right:0; bottom:calc(-1 * var(--reticle-overrun)); }
.target-frame:hover > .tf::before, .target-frame:hover > .tf::after { background: var(--reticle-lock); box-shadow: 0 0 6px var(--reticle-glow); }
.hair { height:1px; background:var(--line); }
.nav-link { position:relative; }
.nav-link::after { content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%; background:var(--signal); transform:scaleX(0); transform-origin:left; transition: transform .25s ease; }
.nav-link:hover::after { transform:scaleX(1); }
/* Mobile nav: hamburger toggles #navMenu into a full-width dropdown below md; hidden at md+ */
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:8px; border:1px solid var(--line); background:transparent; cursor:pointer; }
.nav-toggle span { display:block; height:2px; width:100%; background:var(--ink); transition:background .2s ease; }
.nav-toggle[aria-expanded="true"] span, .nav-toggle:hover span { background:var(--signal); }
@media (max-width:767px) {
  .nav-toggle { display:flex; }
  .nav-menu:not(.hidden) { display:block; position:absolute; top:64px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line); padding:16px 24px 20px; }
  .nav-menu:not(.hidden) > div { display:flex; flex-direction:column; align-items:stretch; gap:16px; }
  .nav-menu:not(.hidden) > div + div { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
}
.ring-focus:focus-visible { outline:1px solid var(--signal); outline-offset:2px; }
::selection { background: rgba(6,182,212,.25); color:#fff; }
/* === NewNormal highlight container (keyline): top-left notch + continuous stepped top line; colored by state === */
  .target-frame > .tf{display:none!important;}
.target-frame--crosshair > .tf-cross{display:none!important;}
.target-frame.bg-surface{position:relative;}
.target-frame.bg-surface::before{content:"";position:absolute;top:0;left:0;width:30px;height:8px;background:inherit;border-right:2px solid var(--reticle-lock);border-bottom:2px solid var(--reticle-lock);z-index:1;transition:height 1s ease;}
/* hover the box: the lower shelf lifts up inline with the top line (1s) */
  .target-frame.bg-surface:hover::before{height:2px;}
.target-frame.bg-surface::after{content:"";position:absolute;top:0;left:30px;right:0;height:2px;background:var(--reticle-lock);z-index:1;}
/* NewNormal logo: 2nd N + "Normal" raised one step (= the line's rise); rising cyan line */
  .nnl{--nnl-step:5px;display:inline-flex;align-items:flex-end;gap:14px;}
.nnl-mark{position:relative;display:inline-flex;align-items:flex-start;gap:4px;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:26px;line-height:1;color:var(--ink);padding-bottom:calc(var(--nnl-step, 5px) + 3px);}
.nnl-mark .n2{color:var(--signal);transform:translateY(calc(-1 * var(--nnl-step, 5px)));}
.nnl-word{position:relative;display:inline-flex;align-items:flex-start;white-space:nowrap;font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;font-size:16px;line-height:1;color:var(--ink);padding-bottom:calc(var(--nnl-step, 5px) + 3px);}
.nnl-word .hi{display:inline-block;transform:none;}
.nnl-word .nnl-rise{height:2px;bottom:var(--nnl-step, 5px);background:var(--signal);}
.nnl-rise{position:absolute;left:0;right:0;bottom:0;height:calc(var(--nnl-step, 5px) + 2px);pointer-events:none;background-image:linear-gradient(var(--signal),var(--signal)),linear-gradient(var(--signal),var(--signal)),linear-gradient(var(--signal),var(--signal));background-repeat:no-repeat;background-size:50% 2px,50% 2px,2px 100%;background-position:left bottom,right top,50% 0;transition:background-position 1s ease,background-size 1s ease;}
/* hover the logo lockup: the low-left line lifts up to meet the high line (1s) */
  :has(> .nnl-mark):hover .nnl-rise{background-position:left top,right top,50% 0;background-size:50% 2px,50% 2px,2px 0;}
.nnl-lg{--nnl-step:8px;}
.nnl-lg .nnl-mark{font-size:56px;}
.nnl-lg .nnl-word{font-size:36px;}
.nnl--unified{position:relative;padding-bottom:calc(var(--nnl-step, 5px) + 3px);}
.nnl--unified .nnl-mark,.nnl--unified .nnl-word{padding-bottom:0;}
.nnl--unified .nnl-rise{display:none;}
.nnl-rise--full{position:absolute;left:0;right:0;bottom:0;height:calc(var(--nnl-step, 5px) + 2px);pointer-events:none;background:linear-gradient(var(--signal),var(--signal)) left bottom/24% 2px no-repeat,linear-gradient(var(--signal),var(--signal)) right top/76% 2px no-repeat,linear-gradient(var(--signal),var(--signal)) 24% 0/2px 100% no-repeat;}
.target-frame:hover > .tf::before, .target-frame:hover > .tf::after,
  .target-frame:focus-within > .tf::before, .target-frame:focus-within > .tf::after,
  .target-frame.is-locked > .tf::before, .target-frame.is-locked > .tf::after {
    background: var(--reticle-lock); box-shadow: 0 0 6px var(--reticle-glow);
  }
/* color-coded corners — a frame can carry a state/severity that re-tints its lock color + glow */
  .target-frame.sev-low      { --reticle-lock:#D29922; --reticle-glow:rgba(210,153,34,.55); }
.target-frame.sev-medium   { --reticle-lock:#DB8C1A; --reticle-glow:rgba(219,140,26,.55); }
.target-frame.sev-high     { --reticle-lock:#F85149; --reticle-glow:rgba(248,81,73,.55); }
.target-frame.sev-critical { --reticle-lock:#FF5C8A; --reticle-glow:rgba(255,92,138,.55); }
.target-frame.lock-blue    { --reticle-lock:#4D9FFF; --reticle-glow:rgba(77,159,255,.55); }
/* re-acquire — corners fly in from outside, overshoot, settle (add class; remove on animationend) */
  .target-frame.reticle-acquire > .tf-tl { --fx:-1; --fy:-1; }
.target-frame.reticle-acquire > .tf-tr { --fx: 1; --fy:-1; }
.target-frame.reticle-acquire > .tf-bl { --fx:-1; --fy: 1; }
.target-frame.reticle-acquire > .tf-br { --fx: 1; --fy: 1; }
.target-frame.reticle-acquire > .tf { animation: reticle-acquire .4s cubic-bezier(.2,.9,.3,1) both; }
.target-frame.reticle-acquire > .tf::before, .target-frame.reticle-acquire > .tf::after {
    background: var(--reticle-lock); box-shadow: 0 0 6px var(--reticle-glow);
  }
@keyframes reticle-acquire {
    0%   { transform: translate(calc(var(--fx) * 14px), calc(var(--fy) * 14px)); opacity:0; }
    55%  { transform: translate(calc(var(--fx) * -2px), calc(var(--fy) * -2px)); opacity:1; }
    100% { transform: translate(0,0); }
  }
.target-frame--crosshair > .tf-cross { position:absolute; inset:0; pointer-events:none; z-index:1; }
.target-frame--crosshair > .tf-cross::before, .target-frame--crosshair > .tf-cross::after {
    content:""; position:absolute; top:50%; left:50%; background:var(--reticle); opacity:.5; transition: background .28s ease, opacity .28s ease;
  }
.target-frame--crosshair > .tf-cross::before { width:14px; height:1px; transform:translate(-50%,-50%); }
.target-frame--crosshair > .tf-cross::after  { width:1px; height:14px; transform:translate(-50%,-50%); }
.target-frame--crosshair:hover > .tf-cross::before, .target-frame--crosshair:hover > .tf-cross::after,
  .target-frame--crosshair:focus-within > .tf-cross::before, .target-frame--crosshair:focus-within > .tf-cross::after,
  .target-frame--crosshair.is-locked > .tf-cross::before, .target-frame--crosshair.is-locked > .tf-cross::after {
    background: var(--signal); opacity:1;
  }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#0b0e14; }
::-webkit-scrollbar-thumb { background:#2a3340; border:2px solid #0b0e14; }
::-webkit-scrollbar-thumb:hover { background:#3a4654; }
.legal { color: var(--muted); font-size:14px; line-height:1.75; }
.legal h2 { font-family:"Space Grotesk",system-ui,sans-serif; color:var(--ink); font-size:20px; font-weight:700; margin:2.5rem 0 0.75rem; padding-bottom:0.5rem; border-bottom:1px solid var(--line); }
.legal h3 { color:var(--ink); font-size:15px; font-weight:600; margin:1.5rem 0 0.5rem; }
.legal p { margin:0 0 1rem; }
.legal ul { margin:0 0 1rem; padding-left:1.25rem; list-style:disc; }
.legal li { margin:0 0 0.4rem; }
.legal a { color:var(--signal); }
.legal a:hover { color:var(--signal-2); }
.legal strong { color:var(--ink); font-weight:600; }
.legal code { font-family:"JetBrains Mono",ui-monospace,monospace; color:var(--ink); font-size:12.5px; }
.reseller { border-left:2px solid var(--signal); background:rgba(6,182,212,.05); padding:14px 18px; margin:0 0 1rem; }
/* Rendered markdown (blog posts). Tailwind's preflight strips heading sizes and list markers, so
   marked's output needs every element styled back — without this the page is one wall of text.
   Same idea as `.legal` above, with the extras long-form posts use: code, tables, quotes, images. */
.md-body { color:var(--ink); font-size:16px; line-height:1.8; }
.md-body > :first-child { margin-top:0; }
.md-body h1, .md-body h2, .md-body h3, .md-body h4 { font-family:"Space Grotesk",system-ui,sans-serif; color:var(--ink); font-weight:700; letter-spacing:-.02em; }
.md-body h1 { font-size:30px; margin:2.75rem 0 1rem; }
.md-body h2 { font-size:24px; margin:2.5rem 0 1rem; padding-bottom:.55rem; border-bottom:1px solid var(--line); }
.md-body h3 { font-size:18px; margin:2rem 0 .65rem; }
.md-body h4 { font-size:15px; margin:1.5rem 0 .5rem; }
.md-body p { margin:0 0 1.15rem; }
.md-body ul, .md-body ol { margin:0 0 1.15rem; padding-left:1.5rem; }
.md-body ul { list-style:disc; }
.md-body ol { list-style:decimal; }
.md-body li { margin:0 0 .45rem; }
.md-body li > ul, .md-body li > ol { margin:.45rem 0 0; }
.md-body li::marker { color:var(--signal); }
.md-body a { color:var(--signal); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(6,182,212,.4); }
.md-body a:hover { color:var(--signal-2); text-decoration-color:currentColor; }
.md-body strong { color:var(--ink); font-weight:600; }
.md-body em { font-style:italic; }
.md-body code { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; color:var(--ink); background:var(--bg); border:1px solid var(--line); padding:1px 5px; }
.md-body pre { background:var(--bg); border:1px solid var(--line); padding:1rem 1.15rem; margin:0 0 1.35rem; overflow-x:auto; }
.md-body pre code { border:0; padding:0; background:none; font-size:12.5px; line-height:1.7; }
.md-body blockquote { margin:0 0 1.35rem; padding:.15rem 0 .15rem 1.15rem; border-left:2px solid var(--signal); color:var(--muted); }
.md-body blockquote p:last-child { margin-bottom:0; }
.md-body hr { border:0; border-top:1px solid var(--line); margin:2.25rem 0; }
.md-body img { max-width:100%; height:auto; border:1px solid var(--line); }
/* display:block + max-content is the GitHub idiom: a wide table scrolls inside itself instead of
   pushing the whole page sideways on a phone. A short table shrinks to fit, which is the trade. */
.md-body table { display:block; width:max-content; max-width:100%; overflow-x:auto; border-collapse:collapse; margin:0 0 1.35rem; font-size:14px; }
.md-body th, .md-body td { border:1px solid var(--line); padding:8px 12px; text-align:left; vertical-align:top; }
.md-body th { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); background:var(--surface); font-weight:500; }
.md-body td { color:var(--ink); }

input, select, textarea { background:var(--bg); border:1px solid var(--line); color:var(--ink); font-family:inherit; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--signal); }
label.fld { display:block; font-size:11px; color:var(--muted); margin:14px 0 5px; text-transform:uppercase; letter-spacing:.08em; font-family:'"JetBrains Mono"',ui-monospace,monospace; }
