/* NacTrack site design system - shared by every page.
   Generated by howto/unify_css.py. Edit here, not per page. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
            
            --teal-900:#042f2e; --teal-800:#115e59; --teal-700:#0f766e;
            --teal-600:#0d9488; --teal-500:#14b8a6; --teal-400:#2dd4bf;
            --lime-500:#84cc16; --lime-400:#a3e635; --lime-300:#bef264;

            
            --brand:#0d9488;            
            --brand-strong:#0f766e;
            --brand-contrast:#ffffff;   
            --signal:#0d9488;           
            --signal-bright:#2dd4bf;    
            --accent:#2563eb;           
            --accent-strong:#1d4ed8;
            --accent-soft:rgba(37,99,235,.10);

            
            --bg:#ffffff;
            --bg-subtle:#f1f5f9;
            --bg-elevated:#ffffff;
            --surface:#ffffff;
            --surface-2:#f8fafc;
            --text:#0b1220;            
            --text-2:#475569;          
            --text-3:#64748b;          
            --border:#e2e8f0;
            --border-strong:#cbd5e1;
            --ring: rgba(13,148,136,.35);
            --shadow-sm:0 1px 2px rgba(2,6,23,.06), 0 1px 3px rgba(2,6,23,.10);
            --shadow-md:0 4px 6px -1px rgba(2,6,23,.08), 0 10px 20px -8px rgba(2,6,23,.15);
            --shadow-lg:0 20px 40px -12px rgba(2,6,23,.25);

            
            --hero-from:#eef3f8; --hero-to:#ffffff;
            --hero-text:#334155; --hero-text-2:#475569; --hero-h1:#0b1220; --hero-grid:rgba(2,6,23,.05);

            --success:#15803d; --warning:#b45309; --danger:#dc2626;

            --radius:14px; --radius-sm:10px; --radius-lg:22px;
            --maxw:1200px;
            --space: clamp(4rem, 8vw, 7rem);
            --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        }

[data-theme="dark"] {
            --bg:#0a0f1a;
            --bg-subtle:#0f172a;
            --bg-elevated:#111c2e;
            --surface:#111c2e;
            --surface-2:#16233a;
            --text:#f1f5f9;            
            --text-2:#cbd5e1;          
            --text-3:#94a3b8;          
            --border:#243449;
            --border-strong:#33485f;
            --ring: rgba(45,212,191,.45);
            --brand:#2dd4bf;           
            --brand-strong:#14b8a6;
            --brand-contrast:#042f2e;
            --signal:#2dd4bf;
            --signal-bright:#5eead4;
            --accent:#60a5fa; --accent-strong:#93c5fd; --accent-soft:rgba(96,165,250,.16);
            --shadow-sm:0 1px 2px rgba(0,0,0,.4);
            --shadow-md:0 8px 24px -6px rgba(0,0,0,.55);
            --shadow-lg:0 24px 48px -12px rgba(0,0,0,.7);
            --hero-from:#031c1b; --hero-to:#0b3b38;
            --hero-text:#c7f5ee; --hero-text-2:#bfeee6; --hero-h1:#ffffff; --hero-grid:rgba(255,255,255,.05);
            --success:#4ade80; --warning:#fbbf24; --danger:#f87171;
        }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
            font-family:var(--font);
            background:var(--bg);
            color:var(--text);
            line-height:1.65;
            overflow-x:hidden;
            -webkit-font-smoothing:antialiased;
            transition: background .35s ease, color .35s ease;
        }

h1,h2,h3,h4 { line-height:1.15; letter-spacing:-.02em; font-weight:700; color:var(--text); }

a { color:inherit; }

img { max-width:100%; display:block; }

::selection { background:var(--brand); color:var(--brand-contrast); }

:focus-visible { outline:3px solid var(--ring); outline-offset:2px; border-radius:6px; }

.container { max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; }

.nav {
            position:fixed; top:0; left:0; right:0; z-index:1000;
            background:color-mix(in srgb, var(--bg) 85%, transparent);
            backdrop-filter:saturate(180%) blur(14px);
            border-bottom:1px solid var(--border);
            transition: box-shadow .3s, background .3s;
        }

.nav.scrolled { box-shadow:var(--shadow-sm); }

.nav-inner { max-width:var(--maxw); margin:0 auto; padding:.8rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.brand { display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.15rem; letter-spacing:-.03em; text-decoration:none; }

.brand img { height:34px; width:auto; }

.brand .dot { width:9px; height:9px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 25%,transparent); animation:pulse 2.4s infinite; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }

.nav-links { display:flex; gap:2rem; list-style:none; align-items:center; }

.nav-links a { text-decoration:none; color:var(--text-2); font-weight:500; font-size:.95rem; position:relative; transition:color .2s; }

.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--brand); transition:width .25s; }

.nav-links a:hover { color:var(--brand); }

.nav-links a:hover::after { width:100%; }

.nav-controls { display:flex; align-items:center; gap:.5rem; }

.ctrl {
            display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
            background:var(--surface-2); color:var(--text-2);
            border:1px solid var(--border); border-radius:10px;
            padding:.5rem .8rem; font-size:.85rem; font-weight:600; font-family:var(--font);
            transition:all .2s;
        }

.ctrl:hover { border-color:var(--brand); color:var(--brand); }

.seg { display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; }

.seg button { background:var(--surface-2); color:var(--text-3); border:none; padding:.5rem .7rem; font-size:.8rem; font-weight:700; cursor:pointer; font-family:var(--font); transition:all .2s; }

.seg button.active { background:var(--brand); color:var(--brand-contrast); }

.seg button:focus-visible { outline:2px solid var(--ring); outline-offset:-3px; border-radius:0; }

.nav-toggle { display:none; background:none; border:1px solid var(--border); border-radius:10px; padding:.45rem .6rem; cursor:pointer; color:var(--text); }

.btn { display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.5rem; border-radius:12px; font-weight:600; font-size:1rem; text-decoration:none; white-space:nowrap; cursor:pointer; border:1.5px solid transparent; transition:transform .2s, box-shadow .2s, background .2s, border-color .2s; }

.btn:active { transform:translateY(1px); }

.btn-primary { background:var(--brand); color:var(--brand-contrast); box-shadow:var(--shadow-sm); }

.btn-primary:hover { background:var(--brand-strong); transform:translateY(-2px); box-shadow:var(--shadow-md); }

.btn-ghost { background:transparent; color:var(--text); border-color:var(--border-strong); }

.btn-ghost:hover { border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }

.btn-on-dark-primary { background:var(--teal-400); color:#04211f; }

.btn-on-dark-primary:hover { filter:brightness(1.08); transform:translateY(-2px); box-shadow:var(--shadow-md); }

.btn-on-dark-ghost { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.35); }

.btn-on-dark-ghost:hover { background:rgba(255,255,255,.16); border-color:#fff; transform:translateY(-2px); }

.hero { position:relative; margin-top:62px; color:var(--hero-text); background:linear-gradient(150deg,var(--hero-from),var(--hero-to)); overflow:hidden; }

.hero::before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 18% 20%, color-mix(in srgb,var(--brand) 22%,transparent), transparent 42%), radial-gradient(circle at 85% 0%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 46%); }

.hero::after { content:""; position:absolute; inset:0; opacity:.6; background-image:linear-gradient(var(--hero-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hero-grid) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom, black, transparent 85%); }

.hero-inner { max-width:var(--maxw); margin:0 auto; padding:5.5rem 1.5rem 5rem; position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:3.5rem; align-items:center; }

.pill { display:inline-flex; align-items:center; gap:.5rem; background:color-mix(in srgb,var(--brand) 12%,transparent); border:1px solid color-mix(in srgb,var(--brand) 32%,transparent); padding:.4rem .9rem; border-radius:999px; font-size:.82rem; font-weight:600; margin-bottom:1.4rem; color:var(--brand); }

.pill .dot { width:7px;height:7px;border-radius:50%;background:var(--accent); box-shadow:0 0 8px var(--accent); }

.hero h1 { font-size:clamp(2.3rem,5vw,3.7rem); font-weight:800; color:var(--hero-h1); letter-spacing:-.03em; margin-bottom:1.2rem; }

/* One colour per sentence: a heading that changes colour mid-phrase reads as
   decoration rather than emphasis. The span is kept so markup need not change. */
.hero h1 .accent { color: inherit; }

.hero .tagline { font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--hero-text-2); max-width:42ch; margin-bottom:2rem; }

.hero-cta { display:flex; flex-wrap:wrap; gap:1rem; }

.hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; padding-top:2.2rem; border-top:1px solid rgba(255,255,255,.16); }

.hero-stat .num { font-size:clamp(1.7rem,3vw,2.4rem); font-weight:800; color:var(--signal-bright); font-family:var(--mono); }

.hero-stat .lbl { font-size:.85rem; color:#bfeee6; margin-top:.2rem; }

.panel { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-lg); padding:1.4rem; backdrop-filter:blur(8px); box-shadow:var(--shadow-lg); }

.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }

.panel-head .title { font-weight:700; color:#fff; font-size:.95rem; }

.panel-head .live { display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; color:var(--signal-bright); font-weight:700; }

.panel-head .live .dot { width:7px;height:7px;border-radius:50%;background:var(--signal-bright); animation:pulse 1.6s infinite; }

.rows { display:flex; flex-direction:column; gap:.5rem; }

.row { display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:10px; padding:.6rem .8rem; font-family:var(--mono); font-size:.8rem; color:#dafff8; }

.row .meta { color:#9fded4; }

.tag { font-size:.68rem; padding:.15rem .5rem; border-radius:6px; font-weight:700; font-family:var(--font); }

.tag.up { background:rgba(132,204,22,.2); color:var(--signal-bright); }

.tag.warn { background:rgba(251,191,36,.2); color:#fbbf24; }

.section { padding:var(--space) 0; }

.section.alt { background:var(--bg-subtle); }

.sec-head { text-align:center; max-width:680px; margin:0 auto 3.5rem; }

.eyebrow { display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); margin-bottom:.8rem; }

.sec-head h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); margin-bottom:1rem; }

.sec-head p { font-size:1.1rem; color:var(--text-2); }

.grid { display:grid; gap:1.4rem; }

.grid-3 { grid-template-columns:repeat(3,1fr); }

.grid-4 { grid-template-columns:repeat(4,1fr); }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; transition:transform .25s, box-shadow .25s, border-color .25s; position:relative; overflow:hidden; }

.card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--brand),var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform .3s; }

.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb,var(--brand) 50%,var(--border)); }

.card:hover::before { transform:scaleX(1); }

.ico { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; font-size:1.5rem; background:color-mix(in srgb,var(--brand) 14%, transparent); margin-bottom:1.1rem; }

.card h3 { font-size:1.2rem; margin-bottom:.6rem; }

.card p { color:var(--text-2); font-size:.97rem; margin-bottom:1rem; }

.flist { list-style:none; display:flex; flex-direction:column; gap:.45rem; }

.flist li { position:relative; padding-left:1.5rem; color:var(--text-2); font-size:.92rem; }

.flist li::before { content:"✓"; position:absolute; left:0; color:var(--signal); font-weight:800; }

.mod { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.3rem; transition:transform .2s, border-color .2s, box-shadow .2s; }

.mod:hover { transform:translateY(-3px); border-color:var(--brand); box-shadow:var(--shadow-sm); }

.mod h4 { font-size:1rem; margin-bottom:.35rem; display:flex; align-items:center; gap:.5rem; }

.mod h4 .k { width:7px; height:7px; border-radius:50%; background:var(--signal); flex:none; }

.mod p { color:var(--text-3); font-size:.86rem; }

.doc { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .25s, box-shadow .25s, border-color .25s; display:flex; flex-direction:column; }

.doc:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb,var(--brand) 50%,var(--border)); }

.doc-top { background:linear-gradient(135deg,var(--teal-800),var(--teal-600)); color:#fff; padding:2rem; text-align:center; }

.doc-top .ico2 { font-size:2.4rem; margin-bottom:.6rem; }

.doc-top h3 { color:#fff; font-size:1.3rem; }

.doc-top p { color:#c7f5ee; font-size:.9rem; margin-top:.2rem; }

.doc-body { padding:1.6rem; flex:1; display:flex; flex-direction:column; }

.doc-body ul { list-style:none; margin-bottom:1.4rem; display:flex; flex-direction:column; gap:.5rem; }

.doc-body li { position:relative; padding-left:1.5rem; color:var(--text-2); font-size:.92rem; }

.doc-body li::before { content:"→"; position:absolute; left:0; color:var(--brand); font-weight:800; }

.doc-link { margin-top:auto; display:block; text-align:center; padding:.8rem; background:var(--brand); color:var(--brand-contrast); border-radius:10px; text-decoration:none; font-weight:600; transition:background .2s, transform .2s; }

.doc-link:hover { background:var(--brand-strong); transform:translateY(-1px); }

.doc-link.soon { background:var(--surface-2); color:var(--text-3); border:1px solid var(--border); cursor:default; }

.cta { background:linear-gradient(150deg,#042f2e,#0f766e); color:#fff; text-align:center; position:relative; overflow:hidden; }

.cta::before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 50% 0%, rgba(45,212,191,.22), transparent 55%); }

.cta-inner { position:relative; z-index:1; max-width:680px; margin:0 auto; padding:var(--space) 1.5rem; }

.cta h2 { color:#fff; font-size:clamp(1.8rem,3.5vw,2.6rem); margin-bottom:1rem; }

.cta p { color:#c7f5ee; font-size:1.15rem; margin-bottom:2rem; }

.cta .hero-cta { justify-content:center; }

footer { background:var(--teal-900); color:#cbeee7; }

[data-theme="dark"] footer { background:#06100f; }

.foot-inner { max-width:var(--maxw); margin:0 auto; padding:3.5rem 1.5rem 1.5rem; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; }

.foot-brand img { height:34px; margin-bottom:1rem; }

.foot-brand p { color:#8fc7bf; font-size:.92rem; max-width:34ch; }

.foot-col h3 { color:#fff; font-size:1rem; margin-bottom:1rem; }

.foot-col ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }

.foot-col a { color:#9fd3cb; text-decoration:none; font-size:.92rem; transition:color .2s; }

.foot-col a:hover { color:var(--signal-bright); }

.foot-bottom { max-width:var(--maxw); margin:0 auto; padding:1.5rem; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.85rem; color:#8fc7bf; }

.foot-bottom img { height:20px; filter:brightness(0) invert(1); opacity:.7; vertical-align:middle; }

.shot-tabs { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:1.6rem; }

.shot-tab { cursor:pointer; border:1px solid var(--border); background:var(--surface-2); color:var(--text-2); font:600 .9rem var(--font); padding:.55rem 1rem; border-radius:999px; transition:all .2s; display:inline-flex; align-items:center; gap:.45rem; }

.shot-tab:hover { border-color:var(--brand); color:var(--brand); }

.shot-tab[aria-selected="true"] { background:var(--brand); color:var(--brand-contrast); border-color:var(--brand); }

.shot-stage { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }

.shot-bar { display:flex; align-items:center; gap:.5rem; padding:.65rem 1rem; border-bottom:1px solid var(--border); background:var(--surface-2); }

.shot-bar .dots { display:flex; gap:.4rem; }

.shot-bar .dots i { width:11px; height:11px; border-radius:50%; display:block; }

.shot-bar .dots i:nth-child(1){background:#ff5f57}

.shot-bar .dots i:nth-child(2){background:#febc2e}

.shot-bar .dots i:nth-child(3){background:#28c840}

.shot-bar .url { flex:1; text-align:center; font:500 .8rem var(--mono); color:var(--text-3); background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:.25rem .8rem; max-width:360px; margin:0 auto; }

.shot-frame { position:relative; background:var(--bg-subtle); overflow:hidden; }

.shot-track { display:flex; align-items:flex-start; transition:transform .6s cubic-bezier(.4,0,.2,1); }

.shot-track img { min-width:100%; width:100%; height:auto; display:block; cursor:zoom-in; }

.shot-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; border-radius:50%; border:1px solid var(--border); background:color-mix(in srgb,var(--surface) 78%,transparent); color:var(--text); font-size:1.5rem; line-height:1; cursor:pointer; display:grid; place-items:center; backdrop-filter:blur(6px); box-shadow:var(--shadow-sm); transition:background .2s, color .2s, border-color .2s; }

.shot-arrow:hover { background:var(--brand); color:var(--brand-contrast); border-color:var(--brand); }

.shot-arrow.prev { left:.8rem; }

.shot-arrow.next { right:.8rem; }

@media (max-width:560px){ .shot-arrow{ width:34px; height:34px; font-size:1.2rem } }

@media (prefers-reduced-motion: reduce){ .shot-track{ transition:none } }

.shot-cap { text-align:center; color:var(--text-3); font-size:.9rem; padding:.9rem 1rem 0; }

.shot-hint { text-align:center; color:var(--text-3); font-size:.8rem; margin-top:.6rem; }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.lb { position:fixed; inset:0; background:rgba(2,6,23,.86); display:none; align-items:center; justify-content:center; z-index:2000; padding:2rem; }

.lb.open { display:flex; animation:fadeIn .2s ease; }

.lb img { max-width:96vw; max-height:90vh; border-radius:10px; box-shadow:var(--shadow-lg); }

.lb-close { position:absolute; top:1rem; right:1.2rem; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35); width:42px; height:42px; border-radius:50%; font-size:1.3rem; cursor:pointer; }

.lb-close:hover { background:rgba(255,255,255,.24); }

.pf { background:var(--bg-subtle); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.pf-inner { max-width:var(--maxw); margin:0 auto; padding:1.6rem 1.5rem; display:flex; flex-wrap:wrap; gap:1rem 2.4rem; justify-content:center; align-items:center; }

.pf-item { display:inline-flex; align-items:center; gap:.55rem; font-size:.95rem; color:var(--text-2); }

.pf-item b { color:var(--text); font-weight:700; }

.pf-item .pfi { color:var(--brand); font-size:1.1rem; }

.pf-sep { width:1px; height:22px; background:var(--border); }

.proto-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }

.proto { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem 1.5rem; transition:transform .2s, border-color .2s, box-shadow .2s; }

.proto:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--brand) 50%,var(--border)); box-shadow:var(--shadow-md); }

.proto h4 { font-size:1rem; margin-bottom:.7rem; display:flex; align-items:center; gap:.5rem; color:var(--text); }

.proto h4 .k { width:8px;height:8px;border-radius:2px;background:var(--signal); }

.proto .tags { display:flex; flex-wrap:wrap; gap:.4rem; }

.proto .tags span { font:600 .76rem var(--mono); color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:.2rem .55rem; }

@media (max-width:880px){ .proto-grid{grid-template-columns:repeat(2,1fr)} }

@media (max-width:560px){ .proto-grid{grid-template-columns:1fr} .pf-sep{display:none} }

.ven-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }

.ven-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); height:140px; padding:1rem; display:flex; align-items:center; justify-content:center; transition:transform .2s, border-color .2s, box-shadow .2s; }

.ven-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--brand) 50%,var(--border)); box-shadow:var(--shadow-md); }

.ven-card .vh { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }

.ven-card .vname { font-weight:700; font-size:1.1rem; color:var(--text); }

.ven-card .vcount { font:700 .72rem var(--font); color:var(--brand); background:color-mix(in srgb,var(--brand) 13%,transparent); padding:.18rem .55rem; border-radius:999px; }

.ven-os { display:flex; flex-wrap:wrap; gap:.4rem; }

.ven-os span { font:600 .78rem var(--mono); color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); border-radius:7px; padding:.25rem .6rem; }

.vbrand { display:flex; align-items:center; gap:.7rem; min-width:0; }

.ven-logo { height:90%; width:auto; max-width:82%; color:var(--text-2); opacity:.9; transition:color .2s, opacity .2s; }

.ven-card:hover .ven-logo { color:var(--brand); opacity:1; }

@media (max-width:880px){ .ven-grid{grid-template-columns:repeat(2,1fr)} }

@media (max-width:560px){ .ven-grid{grid-template-columns:1fr} }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }

.reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} *{animation:none!important} html{scroll-behavior:auto} }

@media (max-width:980px){
            .grid-3{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:repeat(2,1fr)}
            .hero-inner{grid-template-columns:1fr; gap:2.5rem}
            .foot-inner{grid-template-columns:1fr 1fr}
        }

@media (max-width:640px){
            .nav-links{ position:fixed; inset:62px 0 auto 0; flex-direction:column; background:var(--bg); border-bottom:1px solid var(--border); padding:1rem 1.5rem; gap:1rem; display:none; }
            .nav-links.open{ display:flex; }
            .nav-toggle{ display:inline-flex; }
            .grid-3,.grid-4{grid-template-columns:1fr}
            .hero-stats{grid-template-columns:1fr; gap:1.2rem}
            .foot-inner{grid-template-columns:1fr}
            .foot-bottom{flex-direction:column; text-align:center}
        }

.login-topo-window {
                width: 100%;
                max-width: 620px;
                margin: 4rem auto 0;
                background: linear-gradient(180deg, rgba(10,20,40,0.55), rgba(6,14,32,0.65));
                border: 1px solid rgba(255,255,255,0.08);
                border-radius: 12px;
                box-shadow: 0 20px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
                overflow: hidden;
                backdrop-filter: blur(4px);
            }

.login-topo-window .window-titlebar {
                display: flex; align-items: center; gap: 0.5rem;
                padding: 0.4rem 0.7rem;
                background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
                border-bottom: 1px solid rgba(255,255,255,0.08);
                font: 500 11px ui-sans-serif, system-ui, sans-serif;
                color: rgba(226,236,255,0.75);
            }

.login-topo-window .window-dots { display: inline-flex; gap: 6px; }

.login-topo-window .window-dots i {
                width: 10px; height: 10px; border-radius: 999px; display: inline-block;
                box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
            }

.login-topo-window .window-title {
                flex: 1; text-align: center; letter-spacing: 0.03em;
            }

.login-topo-window .window-badge {
                font: 600 9px ui-monospace, monospace;
                padding: 2px 6px; border-radius: 999px;
                background: rgba(110,231,183,0.15);
                color: #6ee7b7;
                border: 1px solid rgba(110,231,183,0.35);
                text-transform: uppercase; letter-spacing: 0.1em;
            }

.login-topo-window .window-badge::before {
                content: ""; display: inline-block; width: 5px; height: 5px;
                border-radius: 999px; background: #6ee7b7; margin-right: 4px;
                box-shadow: 0 0 6px #6ee7b7;
                animation: topoLiveBlink 1.6s ease-in-out infinite;
            }

@keyframes topoLiveBlink { 0%,100% {opacity:1;} 50% {opacity:0.35;} }

.login-topo-window .window-body { padding: 0.75rem 0.75rem 0.25rem; }

.login-topo-window svg { width: 100%; height: auto; display: block; overflow: visible; }

.login-topo-window .topo-node,
            .login-topo-window .topo-edge,
            .login-topo-window .topo-label,
            .login-topo-window .topo-chip {
                opacity: 0;
                animation: topoCycle 12s linear infinite;
                animation-delay: var(--delay, 0s);
            }

.login-topo-window .topo-seed {
                opacity: 1;
                animation: topoSeedCycle 1.6s ease-in-out infinite;
            }

@keyframes topoCycle {
                0%   { opacity: 0; }
                5%   { opacity: 1; }
                90%  { opacity: 1; }
                96%  { opacity: 0; }
                100% { opacity: 0; }
            }

@keyframes topoSeedCycle {
                0%, 100% { filter: drop-shadow(0 0 6px rgba(56,189,248,0.85)); }
                50%      { filter: drop-shadow(0 0 14px rgba(56,189,248,1)); }
            }

.login-topo-window .topo-edge {
                fill: none;
                stroke-width: 1.6;
                stroke-linecap: round;
                stroke-dasharray: 280;
                stroke-dashoffset: 280;
                animation: topoEdge 12s linear infinite;
                animation-delay: var(--delay, 0s);
            }

.login-topo-window .topo-edge-cdp  { stroke: #38bdf8; filter: drop-shadow(0 0 4px rgba(56,189,248,0.55)); }

.login-topo-window .topo-edge-lldp { stroke: #6ee7b7; filter: drop-shadow(0 0 4px rgba(110,231,183,0.45)); }

@keyframes topoEdge {
                0%   { stroke-dashoffset: 280; opacity: 0; }
                3%   { opacity: 0.95; }
                14%  { stroke-dashoffset: 0; opacity: 0.8; }
                90%  { stroke-dashoffset: 0; opacity: 0.8; }
                96%  { stroke-dashoffset: 280; opacity: 0; }
                100% { stroke-dashoffset: 280; opacity: 0; }
            }

.login-topo-window .topo-seed-halo {
                fill: none;
                stroke: rgba(56,189,248,0.55);
                stroke-width: 1.6;
                animation: topoHalo 1.6s ease-out infinite;
            }

@keyframes topoHalo {
                0%   { r: 22; opacity: 0.9; }
                100% { r: 46; opacity: 0; }
            }

.login-topo-window .topo-label {
                font: 600 9.5px ui-sans-serif, system-ui, -apple-system, sans-serif;
                fill: #e2ecff;
                text-anchor: middle;
                pointer-events: none;
            }

.login-topo-window .topo-chip {
                font: 500 7.5px ui-sans-serif, system-ui, sans-serif;
                fill: rgba(180,210,255,0.85);
                text-anchor: middle;
                letter-spacing: 0.04em;
                text-transform: uppercase;
            }

.login-topo-window .topo-proto {
                font: 600 6.5px ui-monospace, monospace;
                text-anchor: middle;
                letter-spacing: 0.08em;
            }

.login-topo-window .topo-proto-cdp  { fill: #bae6fd; }

.login-topo-window .topo-proto-lldp { fill: #bbf7d0; }

.login-topo-window .topo-packet-lldp { fill: #6ee7b7; filter: drop-shadow(0 0 4px rgba(110,231,183,0.9)); }

.login-topo-window .topo-packet-cdp  { fill: #38bdf8; filter: drop-shadow(0 0 4px rgba(56,189,248,0.9)); }

.login-topo-window .topo-legend {
                display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem;
                padding: 0.4rem 0.8rem 0.6rem;
                border-top: 1px solid rgba(255,255,255,0.06);
                font: 500 10px ui-sans-serif, system-ui, sans-serif;
                color: rgba(226,236,255,0.75);
                justify-content: center;
                background: rgba(0,0,0,0.15);
            }

.login-topo-window .topo-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }

.login-topo-window .topo-legend i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }

.login-topo-window .topo-legend .dot { width: 7px; height: 7px; border-radius: 999px; box-shadow: 0 0 6px currentColor; }

@media (prefers-reduced-motion: reduce) {
                .login-topo-window .topo-node,
                .login-topo-window .topo-edge,
                .login-topo-window .topo-label,
                .login-topo-window .topo-chip,
                .login-topo-window .topo-seed,
                .login-topo-window .topo-seed-halo,
                .login-topo-window .topo-packet-cdp,
                .login-topo-window .topo-packet-lldp,
                .login-topo-window .window-badge::before { animation: none !important; opacity: 1 !important; }
                .login-topo-window .topo-edge { stroke-dashoffset: 0; }
            }

.hero-visual .login-topo-window { margin: 0 auto; }

.stats-band { background:var(--bg-subtle); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.stats-inner { max-width:var(--maxw); margin:0 auto; padding:2.4rem 1.5rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }

.stat-b .n { font:800 clamp(1.8rem,3.4vw,2.6rem) var(--mono); color:var(--accent); letter-spacing:-.02em; }

.stat-b .l { font-size:.9rem; color:var(--text-2); margin-top:.2rem; }

.stat-b + .stat-b { border-left:1px solid var(--border); }

@media (max-width:640px){ .stats-inner{ grid-template-columns:repeat(2,1fr) } .stat-b + .stat-b{ border-left:none } }

.why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }

@media (max-width:760px){ .why-grid{ grid-template-columns:1fr } }

.why-grid .ico { background:var(--accent-soft); }

.cmp-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }

.cmp-table { width:100%; border-collapse:collapse; min-width:560px; background:var(--surface); }

.cmp-table th, .cmp-table td { padding:.95rem 1.1rem; text-align:left; border-bottom:1px solid var(--border); font-size:.95rem; }

.cmp-table thead th { background:var(--surface-2); font-weight:700; color:var(--text); }

.cmp-table th.col-nac { color:var(--brand); }

.cmp-table td.mark { text-align:center; font-weight:800; font-size:1.05rem; width:150px; }

.cmp-table td.yes { color:var(--success); }

.cmp-table td.no { color:var(--text-3); }

.cmp-table td.partial { color:var(--warning); }

.cmp-table .col-nac-cell { background:color-mix(in srgb,var(--brand) 6%,transparent); }

.cmp-table tbody tr:hover { background:var(--surface-2); }

.arch-chips { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:2.4rem; }

.arch-chips span { font:600 .82rem var(--font); color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:.45rem .9rem; }

.arch-chips span::before { content:"✓"; color:var(--brand); font-weight:800; margin-right:.4rem; }

.contact-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; max-width:640px; margin:2.4rem auto 0; }

@media (max-width:560px){ .contact-cards{ grid-template-columns:1fr } }

.contact-card { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); padding:1.3rem; text-align:center; }

.contact-card .ct { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:#9fded4; font-weight:700; }

.contact-card a { display:block; margin-top:.45rem; color:#fff; font-weight:600; text-decoration:none; font-family:var(--mono); font-size:.95rem; }

.contact-card a:hover { color:var(--teal-400); }

.cta .eyebrow { color:var(--teal-400); }

.nav-cta { padding:.5rem .95rem; font-size:.85rem; }

@media (max-width:880px){ .nav-cta{ display:none } }

.btn-hero-primary { background:var(--brand); color:var(--brand-contrast); box-shadow:var(--shadow-sm); }

.btn-hero-primary:hover { background:var(--brand-strong); transform:translateY(-2px); box-shadow:var(--shadow-md); }

.btn-hero-ghost { background:transparent; color:var(--hero-text); border-color:color-mix(in srgb,var(--hero-text) 35%,transparent); }

.btn-hero-ghost:hover { border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }

.cls-1{fill:none;}

.cls-2{fill:currentColor;}

.cls-3{fill:currentColor;}


/* ---- Document layout: two columns with a sticky table of contents.
   Shared by the reference manual and every how-to page. ---- */

.main-layout {display: grid;
    grid-template-columns: 280px 1fr;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 70px;
    gap: 2rem;}

.toc-sidebar {position: sticky;
    top: 90px;
    height: fit-content;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 2rem 1rem 2rem 2rem;}

.toc-sidebar h3 {font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-2);
    margin-bottom: 1rem;
    font-weight: 600;}

.toc-list {list-style: none;}

.toc-list li {margin-bottom: 0.5rem;}

.toc-list a {text-decoration: none;
    color: var(--text-2);
    font-size: 0.9rem;
    display: block;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    transition: all 0.2s ease;}

.toc-list a:hover {color: var(--accent);
    background: rgba(59, 130, 246, 0.1);
    padding-left: 1.2rem;}

.toc-list a:hover {background: rgba(13,148,136,0.10); color: var(--accent);}


/* Below 1024px the sidebar is dropped rather than stacked: a table of contents pushed above the
   article is a wall of links between the reader and the thing they came for. */
@media (max-width: 1024px) {
  .main-layout { grid-template-columns: 1fr; padding-top: 62px; gap: 0; }
  .toc-sidebar { display: none; }
}