/* ============================================================ R2 DIGITAL LLC — DESIGN TOKENS Light bluish-grey ground, dark navy ink, one signal red (#D62606) reserved for buttons, actions and the agent plane in diagrams. Ships light (default) + dark via data-theme on . ============================================================ */ :root{ --r2-navy:#002346; --r2-signal:#D62606; --r2-steel:#4A6684; --r2-mist:#BCC8D8; --font-display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-mono:ui-monospace,'SFMono-Regular','JetBrains Mono',Consolas,monospace; --step--2:clamp(.6944rem,.66rem + .17vw,.7813rem); --step--1:clamp(.8333rem,.79rem + .22vw,.9375rem); --step-0:clamp(1rem,.95rem + .27vw,1.0625rem); --step-1:clamp(1.15rem,1.09rem + .32vw,1.3rem); --step-2:clamp(1.4rem,1.30rem + .48vw,1.6rem); --step-3:clamp(1.7rem,1.56rem + .64vw,1.94rem); --step-4:clamp(2.05rem,1.86rem + .86vw,2.32rem); --display:clamp(2.5rem,1.75rem + 3.6vw,4.15rem); --f-xs:var(--step--2); --f-s:var(--step--1); --f-b:var(--step-0); --f-l:var(--step-1); --f-h3:var(--step-2); --f-h2:var(--step-4); --f-h1:var(--display); --tracking-caps:.16em; --r-s:8px; --r-m:12px; --r-l:18px; --r-xl:28px; --nav-h:72px; --maxw:1180px; --sp:clamp(1rem,.5rem + 2.4vw,2rem); --sec-y:clamp(3.2rem,1.8rem + 6.4vw,6.8rem); --dur-fast:140ms; --dur-base:240ms; --dur-slow:380ms; --ease:cubic-bezier(.2,0,.2,1); --ease-pop:cubic-bezier(.2,.9,.3,1.15); } /* ---------- LIGHT (default) ---------- */ :root,:root[data-theme="light"]{ --bg:#E8EDF4; --bg-2:#F2F5F9; --surface:#FFFFFF; --surface-2:#F4F7FB; --surface-3:#E8EDF4; --line:#D6DEE9; --line-2:#BCC8D8; --ink:#002346; --ink-2:#123E68; --muted:#4A6684; --faint:#7488A0; --accent:#D62606; --accent-2:#B31E04; --accent-soft:#FBDDD5; --accent-wash:#FDEEEA; --on-accent:#FFFFFF; --link:#A81B03; --link-hover:#7F1402; --steel:#1C5077; --steel-soft:#DCE7F1; --gold:#8A6608; --gold-soft:#F6EBCE; --ok:#0F7A57; --ok-soft:#D5EDE4; --warn:#A85A00; --crimson:#B0323C; --legacy:#8194AB; --legacy-soft:#E4E9F0; --focus-ring:0 0 0 3px color-mix(in srgb,var(--accent) 32%,transparent); --shadow-s:0 1px 2px rgba(0,35,70,.06); --shadow-md:0 8px 26px rgba(0,35,70,.09); --shadow-lg:0 20px 50px rgba(0,35,70,.13); --grid-line:rgba(0,35,70,.055); color-scheme:light; } /* ---------- DARK ---------- */ :root[data-theme="dark"]{ --bg:#00152B; --bg-2:#001B36; --surface:#002346; --surface-2:#04294F; --surface-3:#0A3260; --line:#123A5E; --line-2:#1C5077; --ink:#E9EFF7; --ink-2:#C3D2E3; --muted:#9BACBD; --faint:#6B8099; --accent:#D62606; --accent-2:#F0431E; --accent-soft:#4A1509; --accent-wash:#2A0D06; --on-accent:#FFFFFF; --link:#FF7A57; --link-hover:#FF9B7E; --steel:#7FB1D6; --steel-soft:#0E3457; --gold:#E2AC4A; --gold-soft:#3A2C0E; --ok:#54BE9A; --ok-soft:#0D3A2C; --warn:#E0954A; --crimson:#E06A72; --legacy:#7E93AC; --legacy-soft:#0E2A45; --focus-ring:0 0 0 3px color-mix(in srgb,var(--accent-2) 45%,transparent); --shadow-s:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 8px 26px rgba(0,0,0,.42); --shadow-lg:0 20px 50px rgba(0,0,0,.55); --grid-line:rgba(155,172,189,.07); color-scheme:dark; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font-body);font-size:var(--f-b);line-height:1.62; -webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background var(--dur-slow) var(--ease),color var(--dur-slow) var(--ease); } body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(880px 600px at 82% -10%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 62%), radial-gradient(740px 520px at 2% 10%,color-mix(in srgb,var(--steel) 12%,transparent),transparent 60%), linear-gradient(transparent 0,transparent calc(100% - 1px),var(--grid-line) 100%) 0 0/100% 44px; } h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.02em;margin:0} h1,h2{font-weight:700} p{margin:0 0 1em} a{color:var(--link);text-decoration:none;text-underline-offset:3px} a:hover{color:var(--link-hover);text-decoration:underline} .mono{font-family:var(--font-mono)} :focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-s)} ::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)} img,svg{max-width:100%} .wrap{width:min(100% - 2*var(--sp),var(--maxw));margin-inline:auto;position:relative;z-index:1} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ============ scroll progress ============ */ .progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:300; background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent)} /* ============ nav ============ */ .nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:250; display:flex;align-items:center; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent;transition:border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease)} .nav.stuck{border-bottom-color:var(--line);box-shadow:var(--shadow-s)} .nav-in{width:min(100% - 2*var(--sp),var(--maxw));margin-inline:auto;display:flex;align-items:center;gap:1rem} .brand{display:flex;align-items:center;gap:.65rem;flex-shrink:1;min-width:0;color:var(--ink);text-decoration:none} /* the tagline is a single 275px line: below 640px it alone pushes the nav past the viewport */ @media (max-width:640px){ .brand-txt span{display:none} .brand-txt b{font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brand-mark{width:34px;height:34px} } .brand:hover{text-decoration:none;color:var(--ink)} .brand-mark{width:40px;height:40px;flex-shrink:0;border-radius:9px;display:block} footer .brand-mark{width:46px;height:46px} .brand-txt{display:flex;flex-direction:column;line-height:1.05} .brand-txt b{font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:-.02em} .brand-txt span{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;white-space:nowrap} .nav-links{display:flex;gap:.15rem;margin-left:auto;align-items:center} .nav-links a{font-size:.79rem;font-weight:500;color:var(--muted);padding:.5rem .5rem;border-radius:var(--r-s);position:relative;white-space:nowrap;transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)} .nav-links a:hover{color:var(--ink);background:var(--surface-2);text-decoration:none} .nav-links a.active{color:var(--accent);font-weight:600} .nav-links a.active::after{content:"";position:absolute;left:.5rem;right:.5rem;bottom:.18rem;height:2px;border-radius:2px;background:var(--accent)} .nav-tools{display:flex;align-items:center;gap:.5rem;margin-left:.5rem} .icon-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-s);border:1px solid var(--line); background:var(--surface);color:var(--muted);cursor:pointer;transition:all var(--dur-fast) var(--ease)} .icon-btn:hover{color:var(--ink);border-color:var(--line-2)} .burger{display:none} @media (max-width:1220px){ .nav-links{display:none} .burger{display:grid} } /* mobile drawer */ .drawer{position:fixed;inset:var(--nav-h) 0 0 0;z-index:240;background:var(--bg); padding:1.4rem var(--sp) 2.4rem;overflow-y:auto;transform:translateX(100%); transition:transform var(--dur-base) var(--ease);visibility:hidden} .drawer.open{transform:translateX(0);visibility:visible} .drawer a{display:block;padding:.85rem .2rem;font-size:1.05rem;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line)} .drawer a:hover{color:var(--accent);text-decoration:none} /* ============ buttons ============ */ .btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-body);font-weight:600; font-size:.9rem;padding:.72rem 1.25rem;border-radius:var(--r-s);border:1px solid var(--accent); background:var(--accent);color:var(--on-accent);cursor:pointer;text-decoration:none; transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease); box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 26%,transparent)} .btn:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent);text-decoration:none; transform:translateY(-1px);box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 34%,transparent)} .btn:active{transform:translateY(0)} .btn.lg{font-size:.97rem;padding:.9rem 1.6rem} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2);box-shadow:none} .btn.ghost:hover{background:var(--surface-2);color:var(--ink);border-color:var(--accent);box-shadow:none} .nav-cta{padding:.5rem .85rem;font-size:.79rem;white-space:nowrap} @media (max-width:1400px){.nav-cta{display:none}} @media (max-width:1220px){.nav-cta{display:inline-flex}} @media (max-width:600px){.nav-cta{display:none}} /* ============ section furniture ============ */ section{padding-block:var(--sec-y);position:relative;z-index:1} .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:var(--f-xs); letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:.9rem} .eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px} h2.sec{font-size:var(--f-h2);max-width:20ch;margin-bottom:.7rem} .sub{color:var(--muted);font-size:var(--f-l);max-width:62ch;line-height:1.55} .sec-hd{margin-bottom:clamp(2rem,1rem + 3vw,3.4rem)} /* ============ cards ============ */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(1.1rem,.8rem + 1.2vw,1.7rem); box-shadow:var(--shadow-s);transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)} .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-2)} .card h3{font-size:var(--f-l);margin-bottom:.5rem} .card p{color:var(--muted);font-size:var(--f-s);margin:0} .card .kn{font-family:var(--font-mono);font-size:var(--f-xs);color:var(--accent);letter-spacing:.1em;font-weight:600;display:block;margin-bottom:.55rem} .grid{display:grid;gap:1rem} .g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))} /* stat tiles */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:1rem} .stat{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:var(--r-m);padding:1.15rem 1.2rem} .stat b{display:block;font-family:var(--font-display);font-size:clamp(1.75rem,1.4rem + 1.5vw,2.4rem); line-height:1;color:var(--ink);letter-spacing:-.03em;margin-bottom:.4rem} .stat span{display:block;font-size:var(--f-s);color:var(--muted);line-height:1.45} .stat cite{display:block;margin-top:.6rem;font-style:normal;font-family:var(--font-mono);font-size:var(--f-xs);color:var(--faint)} /* pills / chips */ .chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem} .chip{font-family:var(--font-mono);font-size:var(--f-xs);letter-spacing:.05em;padding:.28rem .6rem;border-radius:99px; border:1px solid var(--line-2);color:var(--muted);background:var(--surface-2)} .chip.hot{border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent);background:var(--accent-wash)} /* callouts */ .note{border-left:3px solid var(--accent);background:var(--accent-wash);padding:1rem 1.15rem;border-radius:0 var(--r-m) var(--r-m) 0; font-size:var(--f-s);color:var(--ink-2)} .note b{color:var(--ink)} .qa{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-m);padding:1.1rem 1.25rem} .qa .q{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:var(--f-b);margin-bottom:.45rem;display:block} .qa p{color:var(--muted);font-size:var(--f-s);margin:0} /* ============ tables ============ */ .tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-s)} table{width:100%;border-collapse:collapse;font-size:var(--f-s);min-width:680px} th{text-align:left;font-family:var(--font-mono);font-size:var(--f-xs);letter-spacing:.09em;text-transform:uppercase; color:var(--muted);font-weight:600;padding:.85rem 1rem;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap} td{padding:.85rem 1rem;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top} tbody tr:last-child td{border-bottom:none} tbody tr:hover td{background:var(--surface-2)} td b{color:var(--ink)} .tag{display:inline-block;font-family:var(--font-mono);font-size:var(--f-xs);padding:.16rem .45rem;border-radius:5px;font-weight:600;white-space:nowrap} .tag.a{background:var(--accent-wash);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)} .tag.s{background:var(--steel-soft);color:var(--steel);border:1px solid color-mix(in srgb,var(--steel) 28%,transparent)} .tag.o{background:var(--ok-soft);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 28%,transparent)} .tag.g{background:var(--gold-soft);color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent)} /* ============ tabs ============ */ .tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1.4rem;border-bottom:1px solid var(--line);padding-bottom:.7rem} .tab{font-family:var(--font-body);font-size:.83rem;font-weight:600;padding:.5rem .85rem;border-radius:var(--r-s); border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;transition:all var(--dur-fast) var(--ease)} .tab:hover{color:var(--ink);background:var(--surface-2)} .tab[aria-selected="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent); box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 25%,transparent)} .panel{display:none;animation:fadeUp .35s var(--ease)} .panel.show{display:block} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ============ accordion ============ */ .acc{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--surface);margin-bottom:.6rem} .acc-btn{width:100%;display:flex;align-items:center;gap:.8rem;text-align:left;padding:1rem 1.15rem;background:transparent; border:none;cursor:pointer;font-family:var(--font-display);font-size:var(--f-b);font-weight:600;color:var(--ink);transition:background var(--dur-fast) var(--ease)} .acc-btn:hover{background:var(--surface-2)} .acc-btn .n{font-family:var(--font-mono);font-size:var(--f-xs);color:var(--accent);font-weight:700;min-width:22px} .acc-btn .cv{margin-left:auto;color:var(--muted);font-size:1.2rem;transition:transform var(--dur-base) var(--ease);line-height:1} .acc.open .acc-btn .cv{transform:rotate(45deg);color:var(--accent)} .acc-body{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease)} .acc-in{padding:0 1.15rem 1.2rem;color:var(--muted);font-size:var(--f-s)} .acc-in ul{margin:.5rem 0 0;padding-left:1.1rem} .acc-in li{margin-bottom:.42rem} .acc-in li b,.acc-in p b{color:var(--ink)} /* ============ diagram primitives ============ */ .dia{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l); padding:clamp(1rem,.7rem + 1.4vw,1.9rem);box-shadow:var(--shadow-s);overflow:hidden} .dia-hd{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:1.2rem} .dia-hd b{font-family:var(--font-display);font-size:var(--f-l);color:var(--ink)} .dia-hd small{color:var(--muted);font-size:var(--f-s)} .legend{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:1.1rem;padding-top:1rem;border-top:1px dashed var(--line)} .lgd{display:flex;align-items:center;gap:.42rem;font-size:var(--f-xs);color:var(--muted);font-family:var(--font-mono)} .sw{width:11px;height:11px;border-radius:3px;flex-shrink:0} .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch} /* reveal on scroll */ .rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .rv.in{opacity:1;transform:none} /* ============ modal ============ */ .modal{position:fixed;inset:0;z-index:400;display:none;place-items:center;padding:var(--sp); background:color-mix(in srgb,var(--r2-navy) 66%,transparent);backdrop-filter:blur(8px)} .modal.open{display:grid} .modal-in{width:min(100%,560px);max-height:90svh;overflow-y:auto;background:var(--surface);border:1px solid var(--line-2); border-radius:var(--r-l);padding:clamp(1.3rem,1rem + 1.6vw,2.1rem);position:relative;animation:pop .3s var(--ease-pop);box-shadow:var(--shadow-lg)} @keyframes pop{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:none}} .modal-x{position:absolute;top:.9rem;right:.9rem;background:transparent;border:1px solid var(--line);color:var(--muted); width:32px;height:32px;border-radius:var(--r-s);cursor:pointer;font-size:.95rem;line-height:1} .modal-x:hover{color:var(--ink);border-color:var(--accent)} .field{margin-bottom:1rem} .field label{display:block;font-size:var(--f-s);font-weight:600;color:var(--ink);margin-bottom:.35rem} .field input,.field textarea{width:100%;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-s); padding:.7rem .85rem;color:var(--ink);font-family:var(--font-body);font-size:var(--f-s);transition:border-color var(--dur-fast) var(--ease)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)} .field textarea{min-height:130px;resize:vertical;line-height:1.55} .counter{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--f-xs);color:var(--faint);margin-top:.35rem} .counter.over{color:var(--crimson)} .formnote{font-size:var(--f-xs);color:var(--faint);margin:.9rem 0 0;line-height:1.5} .ok-msg,.err-msg{display:none;padding:.8rem 1rem;border-radius:var(--r-s);font-size:var(--f-s);margin-bottom:1rem} .ok-msg{background:var(--ok-soft);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 32%,transparent)} .err-msg{background:var(--accent-wash);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent)} .ok-msg.show,.err-msg.show{display:block} /* ============ toast ============ */ .toast{position:fixed;left:50%;bottom:24px;z-index:500;transform:translate(-50%,180%);opacity:0;pointer-events:none; background:var(--r2-navy);color:#fff;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent); border-radius:var(--r-m);padding:.9rem 1.3rem;font-size:var(--f-s);font-weight:500;max-width:min(92vw,540px); box-shadow:var(--shadow-lg);transition:transform var(--dur-slow) var(--ease-pop),opacity var(--dur-base) var(--ease)} .toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto} /* ============ footer ============ */ footer{border-top:1px solid var(--line);padding:3rem 0 2.4rem;background:var(--bg-2);position:relative;z-index:1} .foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2rem;margin-bottom:2.2rem} .foot-grid h4{font-size:var(--f-xs);font-family:var(--font-mono);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--muted);margin-bottom:.85rem} .foot-grid a{display:block;font-size:var(--f-s);color:var(--ink-2);padding:.22rem 0} .foot-grid a:hover{color:var(--accent)} .foot-bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.5rem;border-top:1px solid var(--line); font-size:var(--f-xs);color:var(--faint)} .refs li{margin-bottom:.75rem;font-size:var(--f-s);color:var(--muted);line-height:1.5} .refs li b{color:var(--ink);font-weight:600} /* ============ hero ============ */ .hero{padding-top:calc(var(--nav-h) + clamp(2.5rem,1rem + 6vw,5.5rem));padding-bottom:clamp(3rem,2rem + 5vw,6rem);position:relative;overflow:hidden} .hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(2rem,1rem + 4vw,4rem);align-items:center} @media (max-width:980px){.hero-grid{grid-template-columns:1fr}} .hero h1{font-size:var(--f-h1);letter-spacing:-.035em;margin-bottom:1.1rem} .hero h1 .hl{color:var(--accent);position:relative;white-space:nowrap} .hero .lede{font-size:clamp(1.05rem,.98rem + .4vw,1.25rem);color:var(--muted);max-width:56ch;line-height:1.6;margin-bottom:1.7rem} .byline{display:flex;align-items:center;gap:.75rem;margin-bottom:1.6rem;flex-wrap:wrap} .byline .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,var(--accent),#7F1402); display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:.9rem;flex-shrink:0; box-shadow:0 3px 12px color-mix(in srgb,var(--accent) 32%,transparent)} .byline .who{line-height:1.25} .byline .who b{display:block;font-size:var(--f-s);color:var(--ink);font-weight:600} .byline .who span{font-size:var(--f-xs);color:var(--muted)} .byline .dot{width:4px;height:4px;border-radius:50%;background:var(--line-2)} .byline .meta{font-family:var(--font-mono);font-size:var(--f-xs);color:var(--faint);letter-spacing:.05em} .hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.4rem} .hero-tags{display:flex;gap:.4rem;flex-wrap:wrap} /* hero orbital figure */ .orbit{width:100%;aspect-ratio:1/1;max-width:470px;margin-inline:auto;position:relative} .orbit svg{width:100%;height:100%;overflow:visible} @keyframes spin{to{transform:rotate(360deg)}} @keyframes spinr{to{transform:rotate(-360deg)}} @keyframes pulse{0%,100%{opacity:.9;r:36}50%{opacity:1;r:39}} @keyframes dash{to{stroke-dashoffset:-200}} .o-ring1{animation:spin 44s linear infinite;transform-origin:250px 250px} .o-ring2{animation:spinr 32s linear infinite;transform-origin:250px 250px} .o-ring3{animation:spin 60s linear infinite;transform-origin:250px 250px} .o-core{animation:pulse 4.5s var(--ease) infinite} .o-flow{stroke-dasharray:6 10;animation:dash 3.4s linear infinite} .o-lbl{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;fill:var(--muted)} .o-node{fill:var(--surface);stroke:var(--line-2);stroke-width:1.4} .o-node-a{fill:var(--accent-wash);stroke:var(--accent);stroke-width:1.6} /* ============ generic svg diagram type ============ */ .d-t{font-family:var(--font-display);font-weight:600;fill:var(--ink)} .d-l{font-family:var(--font-body);font-weight:500;fill:var(--ink)} .d-s{font-family:var(--font-body);font-weight:400;fill:var(--muted)} .d-m{font-family:var(--font-mono);font-weight:600;letter-spacing:.08em} .d-box{fill:var(--surface-2);stroke:var(--line-2);stroke-width:1.2} .d-box-a{fill:var(--accent-wash);stroke:var(--accent);stroke-width:1.5} .d-box-s{fill:var(--steel-soft);stroke:var(--steel);stroke-width:1.2} .d-box-o{fill:var(--ok-soft);stroke:var(--ok);stroke-width:1.2} .d-box-g{fill:var(--gold-soft);stroke:var(--gold);stroke-width:1.2} .d-arrow{stroke:var(--line-2);stroke-width:1.4;fill:none} .d-arrow-a{stroke:var(--accent);stroke-width:1.6;fill:none} .d-flow{stroke-dasharray:5 7;animation:dash 2.8s linear infinite} /* ============ ladder (autonomy tiers) ============ */ .ladder{display:grid;gap:.55rem} .rung{display:grid;grid-template-columns:70px 1fr;gap:1rem;align-items:stretch; border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);overflow:hidden; transition:border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)} .rung:hover{border-color:var(--accent);transform:translateX(4px)} .rung .lv{display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.15rem; color:var(--on-accent);background:var(--legacy);letter-spacing:-.02em} .rung[data-h="1"] .lv{background:#5F7C9B} .rung[data-h="2"] .lv{background:var(--steel)} .rung[data-h="3"] .lv{background:#C0501A} .rung[data-h="4"] .lv{background:var(--accent)} .rung .rb{padding:.9rem 1.1rem} .rung .rb b{display:block;font-family:var(--font-display);font-size:var(--f-b);color:var(--ink);margin-bottom:.22rem} .rung .rb p{margin:0 0 .5rem;font-size:var(--f-s);color:var(--muted)} .rung .rq{display:flex;flex-wrap:wrap;gap:.35rem} @media (max-width:560px){.rung{grid-template-columns:52px 1fr}} /* ============ control stack columns ============ */ .stack3{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1rem} .ctl{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);overflow:hidden;display:flex;flex-direction:column} .ctl-hd{padding:1rem 1.15rem;border-bottom:1px solid var(--line);background:var(--surface-2)} .ctl-hd .ph{font-family:var(--font-mono);font-size:var(--f-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:700;display:block;margin-bottom:.3rem} .ctl-hd b{font-family:var(--font-display);font-size:var(--f-l);color:var(--ink);display:block} .ctl-hd small{color:var(--muted);font-size:var(--f-s)} .ctl-b{padding:1rem 1.15rem;flex:1} .ctl-b ul{margin:0;padding-left:1.05rem} .ctl-b li{font-size:var(--f-s);color:var(--muted);margin-bottom:.5rem;line-height:1.5} .ctl-b li b{color:var(--ink);font-weight:600} .ctl.pre .ctl-hd{border-top:3px solid var(--steel)} .ctl.pre .ph{color:var(--steel)} .ctl.run .ctl-hd{border-top:3px solid var(--accent)} .ctl.run .ph{color:var(--accent)} .ctl.post .ctl-hd{border-top:3px solid var(--ok)} .ctl.post .ph{color:var(--ok)} /* ============ timeline / roadmap ============ */ .tl{position:relative;padding-left:2.1rem} .tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px; background:linear-gradient(180deg,var(--accent),var(--steel),var(--ok))} .tl-i{position:relative;margin-bottom:1.5rem} .tl-i::before{content:"";position:absolute;left:-2.1rem;top:5px;width:20px;height:20px;border-radius:50%; background:var(--surface);border:3px solid var(--accent);box-shadow:0 0 0 4px var(--bg)} .tl-i .ph{font-family:var(--font-mono);font-size:var(--f-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700} .tl-i h4{font-size:var(--f-l);margin:.25rem 0 .4rem} .tl-i p{font-size:var(--f-s);color:var(--muted);margin:0 0 .6rem} .tl-i:nth-child(2)::before{border-color:var(--steel)} .tl-i:nth-child(2) .ph{color:var(--steel)} .tl-i:nth-child(3)::before{border-color:var(--gold)} .tl-i:nth-child(3) .ph{color:var(--gold)} .tl-i:nth-child(4)::before{border-color:var(--ok)} .tl-i:nth-child(4) .ph{color:var(--ok)} /* ============ role matrix ============ */ .roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:.9rem} .role{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:1rem 1.1rem} .role .rt{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:var(--f-b);display:block;margin-bottom:.15rem} .role .rs{font-family:var(--font-mono);font-size:var(--f-xs);color:var(--accent);letter-spacing:.06em;display:block;margin-bottom:.55rem} .role p{font-size:var(--f-s);color:var(--muted);margin:0} /* ============ cta band ============ */ .cta-band{background:linear-gradient(135deg,var(--r2-navy),#00305F 62%,#4A1509);border-radius:var(--r-xl); padding:clamp(2rem,1.2rem + 4vw,3.6rem);text-align:center;position:relative;overflow:hidden} .cta-band::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(520px 300px at 78% 8%,rgba(214,38,6,.32),transparent 65%)} .cta-band h2{color:#fff;font-size:var(--f-h2);max-width:22ch;margin:0 auto .8rem;position:relative;z-index:1} .cta-band p{color:#C3D2E3;max-width:56ch;margin:0 auto 1.7rem;position:relative;z-index:1;font-size:var(--f-l)} .cta-band .btn{position:relative;z-index:1} /* ================================================== */ /* ============ evidence grade badges ============ */ .gr{display:inline-flex;align-items:center;gap:.32rem;font-family:var(--font-mono);font-size:.63rem;font-weight:700; letter-spacing:.09em;text-transform:uppercase;padding:.16rem .44rem;border-radius:5px;white-space:nowrap;vertical-align:middle} .gr::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0;background:currentColor} .gr-req{background:var(--steel-soft);color:var(--steel);border:1px solid color-mix(in srgb,var(--steel) 30%,transparent)} .gr-rec{background:var(--ok-soft);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)} .gr-emg{background:var(--gold-soft);color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 34%,transparent)} .gr-opn{background:var(--accent-wash);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)} h2.sec .gr,h3 .gr,.dia-hd .gr{transform:translateY(-3px)} /* ============ executive summary ============ */ .exec{display:grid;gap:.75rem;counter-reset:ex} .exec-i{display:grid;grid-template-columns:52px 1fr;gap:1.1rem;align-items:start; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:1.05rem 1.2rem; transition:border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)} .exec-i:hover{border-color:var(--accent);transform:translateX(4px)} .exec-i .nx{counter-increment:ex;font-family:var(--font-display);font-weight:700;font-size:1.9rem;line-height:1; color:var(--accent);letter-spacing:-.04em;opacity:.85} .exec-i .nx::before{content:"0" counter(ex)} .exec-i b{display:block;font-family:var(--font-display);font-size:var(--f-l);color:var(--ink);margin-bottom:.3rem} .exec-i p{margin:0;font-size:var(--f-s);color:var(--muted)} @media (max-width:520px){.exec-i{grid-template-columns:38px 1fr;gap:.8rem}.exec-i .nx{font-size:1.4rem}} /* ============ audience ============ */ .aud{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:.9rem} .aud-c{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:1rem 1.15rem} .aud-c .rl{font-family:var(--font-mono);font-size:var(--f-xs);letter-spacing:.08em;text-transform:uppercase; color:var(--accent);font-weight:700;display:block;margin-bottom:.45rem} .aud-c b{display:block;font-family:var(--font-display);font-size:var(--f-b);color:var(--ink);margin-bottom:.3rem} .aud-c p{margin:0;font-size:var(--f-s);color:var(--muted)} .aud-c.off{background:var(--surface-2);border-style:dashed} .aud-c.off .rl{color:var(--muted)} /* ============ assumptions / non-goals ============ */ .ang{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem} .ang-c{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);overflow:hidden} .ang-c .hd{padding:.9rem 1.15rem;border-bottom:1px solid var(--line);background:var(--surface-2);display:flex;align-items:center;gap:.6rem} .ang-c .hd b{font-family:var(--font-display);font-size:var(--f-l);color:var(--ink)} .ang-c .hd .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex-shrink:0} .ang-c.a .hd .ic{background:var(--steel-soft);color:var(--steel)} .ang-c.n .hd .ic{background:var(--accent-wash);color:var(--accent)} .ang-c ol,.ang-c ul{margin:0;padding:1rem 1.15rem 1.1rem 2.3rem} .ang-c li{font-size:var(--f-s);color:var(--muted);margin-bottom:.55rem;line-height:1.5} .ang-c li:last-child{margin-bottom:0} .ang-c li b{color:var(--ink);font-weight:600} /* ================================================== */ /* ============ anatomy grid ============ */ .anat{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.9rem} .anat-c{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:1.05rem 1.15rem;position:relative;overflow:hidden; transition:border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)} .anat-c::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-2);transition:background var(--dur-base) var(--ease)} .anat-c:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-2)} .anat-c:hover::before{background:var(--accent)} .anat-c .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent);margin-bottom:.7rem} .anat-c .ic svg{width:18px;height:18px} .anat-c b{display:block;font-family:var(--font-display);font-size:var(--f-b);color:var(--ink);margin-bottom:.3rem} .anat-c .cd{font-family:var(--font-mono);font-size:var(--f-xs);color:var(--faint);letter-spacing:.08em;display:block;margin-bottom:.5rem} .anat-c p{font-size:var(--f-s);color:var(--muted);margin:0 0 .55rem} .anat-c .gr{font-size:var(--f-xs);color:var(--ink-2);border-top:1px dashed var(--line);padding-top:.5rem;margin:0} .anat-c .gr em{font-style:normal;font-family:var(--font-mono);color:var(--accent);letter-spacing:.05em;font-weight:600} /* ============ reference architecture planes ============ */ .arch{display:grid;grid-template-columns:180px minmax(0,1fr) 180px;gap:.7rem;align-items:stretch;min-width:940px} @media (max-width:1000px){.arch{min-width:880px}} .rail{display:flex;flex-direction:column;gap:.5rem} .rail-hd{font-family:var(--font-mono);font-size:var(--f-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:700; color:var(--on-accent);background:var(--r2-navy);padding:.55rem .7rem;border-radius:var(--r-s);text-align:center} .rail.gov .rail-hd{background:var(--steel)} .rail.evi .rail-hd{background:var(--ok)} .rail-i{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);padding:.5rem .65rem; font-size:.72rem;color:var(--ink-2);line-height:1.35;flex:1;display:flex;align-items:center; transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)} .rail-i:hover{border-color:var(--accent);background:var(--accent-wash)} .rail-i b{color:var(--ink);font-weight:600} .planes{display:flex;flex-direction:column;gap:.55rem} .plane{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:.7rem .85rem; transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)} .plane:hover{border-color:var(--accent);box-shadow:var(--shadow-md)} .plane-hd{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.55rem;flex-wrap:wrap} .plane-hd .pn{font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.08em;padding:.14rem .4rem; border-radius:4px;background:var(--surface-3);color:var(--muted)} .plane-hd b{font-family:var(--font-display);font-size:.95rem;color:var(--ink)} .plane-hd small{color:var(--faint);font-size:.72rem;font-family:var(--font-mono);letter-spacing:.04em} .nodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:.42rem} .node{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:.45rem .55rem;font-size:.72rem; color:var(--ink-2);line-height:1.3;transition:all var(--dur-fast) var(--ease)} .node:hover{border-color:var(--line-2);background:var(--surface-3)} .node b{display:block;color:var(--ink);font-weight:600;font-size:.74rem;margin-bottom:.1rem} .node small{color:var(--faint);font-size:.66rem;display:block} .node em.pf{display:block;font-style:normal;font-family:var(--font-mono);font-size:.6rem;line-height:1.3; color:var(--faint);letter-spacing:.01em;margin-top:.25rem;padding-top:.25rem;border-top:1px dotted var(--line-2)} .rail-i em.pf{display:block;font-style:normal;font-family:var(--font-mono);font-size:.58rem;line-height:1.3; color:var(--faint);margin-top:.22rem;padding-top:.22rem;border-top:1px dotted var(--line-2)} .node.acc em.pf{color:color-mix(in srgb,var(--accent) 72%,var(--muted))} .node.acc{background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 42%,transparent)} .node.acc b{color:var(--accent)} .node.stl{background:var(--steel-soft);border-color:color-mix(in srgb,var(--steel) 38%,transparent)} .node.stl b{color:var(--steel)} .node.okk{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 38%,transparent)} .node.okk b{color:var(--ok)} .plane.hot{border-color:var(--accent);border-left:3px solid var(--accent);background:linear-gradient(90deg,var(--accent-wash),var(--surface) 34%)} .plane.hot .plane-hd .pn{background:var(--accent);color:var(--on-accent)} .arch-flow{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.15rem 0;color:var(--faint); font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase} .arch-flow::before,.arch-flow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--line-2),transparent)} /* ================================================== */ /* ============ action risk classes ============ */ .rk{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:.8rem} .rk-c{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);overflow:hidden} .rk-c .hd{padding:.7rem .95rem;display:flex;align-items:center;gap:.6rem;border-bottom:1px solid var(--line)} .rk-c .hd .bd{font-family:var(--font-display);font-weight:700;font-size:.85rem;color:#fff; padding:.16rem .5rem;border-radius:5px;letter-spacing:-.01em} .rk-c .hd b{font-family:var(--font-display);font-size:var(--f-s);color:var(--ink)} .rk-c.a1 .hd{background:var(--steel-soft)} .rk-c.a1 .bd{background:var(--steel)} .rk-c.a2 .hd{background:var(--ok-soft)} .rk-c.a2 .bd{background:var(--ok)} .rk-c.a3 .hd{background:var(--gold-soft)} .rk-c.a3 .bd{background:var(--gold)} .rk-c.a4 .hd{background:var(--accent-wash)} .rk-c.a4 .bd{background:var(--accent)} .rk-c .bd2{padding:.85rem .95rem} .rk-c .ex{font-size:var(--f-s);color:var(--ink-2);margin:0 0 .55rem;line-height:1.45} .rk-c .ex b{color:var(--ink)} .rk-c .cap{font-family:var(--font-mono);font-size:var(--f-xs);color:var(--muted);border-top:1px dashed var(--line); padding-top:.5rem;margin:0;line-height:1.4} .rk-c .cap em{font-style:normal;color:var(--accent);font-weight:700} /* ============ overlay strip ============ */ .ovl{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:.8rem;margin-top:1rem} .ovl-c{border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface-2);padding:.85rem 1rem} .ovl-c b{display:block;font-family:var(--font-display);font-size:var(--f-s);color:var(--ink);margin-bottom:.25rem} .ovl-c p{margin:0;font-size:var(--f-xs);color:var(--muted);line-height:1.45} /* ================================================== */ .prac{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:.9rem} .prac-i{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:1rem 1.15rem} .prac-i b{display:block;font-family:var(--font-display);font-size:var(--f-b);color:var(--ink);margin-bottom:.35rem} .prac-i p{font-size:var(--f-s);color:var(--muted);margin:0} .prac-i .num{font-family:var(--font-mono);font-size:var(--f-xs);color:var(--accent);font-weight:700;letter-spacing:.08em;display:block;margin-bottom:.4rem} .lead{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 var(--r-m) var(--r-m) 0; padding:1.1rem 1.3rem;margin-bottom:1.2rem} .lead .q{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:var(--f-l);display:block;margin-bottom:.4rem} .lead p{margin:0;color:var(--muted);font-size:var(--f-s)} .dodont{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:.8rem;margin-top:1.1rem} .dd{border-radius:var(--r-m);padding:.9rem 1.1rem;font-size:var(--f-s);line-height:1.5} .dd .h{font-family:var(--font-mono);font-size:var(--f-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:700;display:block;margin-bottom:.45rem} .dd.y{background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 32%,transparent);color:var(--ink-2)} .dd.y .h{color:var(--ok)} .dd.n{background:var(--accent-wash);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:var(--ink-2)} .dd.n .h{color:var(--accent)} .dd ul{margin:0;padding-left:1.05rem} .dd li{margin-bottom:.3rem} /* ================================================== */ /* ============ worked example stepper ============ */ .wex{display:grid;gap:0;position:relative} .wstep{display:grid;grid-template-columns:132px 1fr;gap:1.2rem;position:relative;padding-bottom:1.5rem} .wstep:last-child{padding-bottom:0} .wstep::before{content:"";position:absolute;left:131px;top:34px;bottom:-6px;width:2px;background:var(--line-2)} .wstep:last-child::before{display:none} .wstep.hot::before{background:linear-gradient(180deg,var(--accent),var(--line-2))} .wlane{text-align:right;padding-top:.5rem;position:relative} .wlane .ln{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);display:block} .wlane .sn{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink);display:block;margin-top:.1rem} .wlane::after{content:"";position:absolute;right:-9px;top:12px;width:16px;height:16px;border-radius:50%; background:var(--surface);border:3px solid var(--line-2);z-index:1} .wstep.hot .wlane::after{border-color:var(--accent)} .wstep.ok .wlane::after{border-color:var(--ok)} .wbody{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:1rem 1.2rem; min-width:0;transition:border-color var(--dur-base) var(--ease)} .wstep>*{min-width:0} .wstep:hover .wbody{border-color:var(--line-2)} .wstep.hot .wbody{border-left:3px solid var(--accent)} .wstep.ok .wbody{border-left:3px solid var(--ok)} .wbody b.t{display:block;font-family:var(--font-display);font-size:var(--f-b);color:var(--ink);margin-bottom:.4rem} .wbody p{margin:0 0 .6rem;font-size:var(--f-s);color:var(--muted)} .wbody p:last-child{margin-bottom:0} .wbody .who{font-family:var(--font-mono);font-size:var(--f-xs);color:var(--steel);letter-spacing:.05em;margin-bottom:.5rem;display:block} pre.cx{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-s);padding:.75rem .9rem; overflow-x:auto;font-family:var(--font-mono);font-size:.72rem;line-height:1.55;color:var(--ink-2);margin:.6rem 0 0} pre.cx .k{color:var(--steel);font-weight:600} pre.cx .v{color:var(--accent)} pre.cx .c{color:var(--faint);font-style:italic} pre.cx .g{color:var(--ok)} @media (max-width:640px){ .wstep{grid-template-columns:1fr;gap:.5rem} .wstep::before{display:none} .wlane{text-align:left;padding-top:0} .wlane::after{display:none} .wlane .sn{display:inline;margin-left:.5rem} } .variant{border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);background:var(--accent-wash); border-radius:var(--r-m);padding:1.1rem 1.25rem;margin-top:1.4rem} .variant b.t{display:block;font-family:var(--font-display);font-size:var(--f-l);color:var(--ink);margin-bottom:.5rem} .variant p{margin:0 0 .55rem;font-size:var(--f-s);color:var(--ink-2)} .variant ol{margin:.4rem 0 0;padding-left:1.2rem} .variant li{font-size:var(--f-s);color:var(--ink-2);margin-bottom:.35rem} .variant li b{color:var(--ink)} /* ================================================== */ /* ============ toolkit downloads ============ */ .kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:.9rem} .kit-c{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface); padding:1.1rem 1.2rem;text-decoration:none;color:var(--ink);position:relative;overflow:hidden; transition:border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)} .kit-c:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none;color:var(--ink)} .kit-c .top{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem} .kit-c .ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent);flex-shrink:0} .kit-c .ic svg{width:16px;height:16px} .kit-c .fmt{font-family:var(--font-mono);font-size:var(--f-xs);letter-spacing:.09em;color:var(--muted); border:1px solid var(--line-2);border-radius:4px;padding:.12rem .38rem;margin-left:auto} .kit-c b{display:block;font-family:var(--font-display);font-size:var(--f-b);margin-bottom:.3rem} .kit-c p{margin:0 0 .8rem;font-size:var(--f-s);color:var(--muted);flex:1} .kit-c .dl{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:var(--f-xs); letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--accent)} .kit-c:hover .dl{gap:.6rem} /* ============ glossary ============ */ .gl-tools{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-bottom:1.3rem} .gl-search{flex:1;min-width:220px;position:relative} .gl-search input{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-s); padding:.6rem .85rem .6rem 2.2rem;color:var(--ink);font-family:var(--font-body);font-size:var(--f-s)} .gl-search input:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)} .gl-search svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--faint);pointer-events:none} .gl-count{font-family:var(--font-mono);font-size:var(--f-xs);color:var(--faint);letter-spacing:.05em} .glossary{display:grid;grid-template-columns:repeat(auto-fit,minmax(322px,1fr));gap:.7rem 1.6rem} .gl-i{border-bottom:1px solid var(--line);padding:.75rem 0} .gl-i dt{font-family:var(--font-display);font-weight:600;font-size:var(--f-b);color:var(--ink);margin-bottom:.22rem; display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap} .gl-i dt .ab{font-family:var(--font-mono);font-size:var(--f-xs);color:var(--accent);letter-spacing:.06em;font-weight:700} .gl-i dd{margin:0;font-size:var(--f-s);color:var(--muted);line-height:1.5} .gl-i.hide{display:none} .gl-empty{display:none;padding:1.6rem 0;color:var(--muted);font-size:var(--f-s)} .gl-empty.show{display:block} /* ================================================== */ .refgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem 2.2rem} .refgrid ol{margin:0;padding-left:1.3rem} .srcnote{font-size:var(--f-xs);color:var(--faint);margin-top:1.2rem;padding-top:1rem;border-top:1px dashed var(--line)} .rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:.9rem} .rel a{display:block;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:1rem 1.15rem; color:var(--ink);text-decoration:none;transition:all var(--dur-base) var(--ease)} .rel a:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none} .rel a .k{font-family:var(--font-mono);font-size:var(--f-xs);color:var(--accent);letter-spacing:.08em;display:block;margin-bottom:.4rem} .rel a b{display:block;font-family:var(--font-display);font-size:var(--f-b);margin-bottom:.25rem} .rel a span{display:block;font-size:var(--f-s);color:var(--muted)} .rel a .go{font-family:var(--font-mono);font-size:var(--f-xs);color:var(--muted);margin-top:.6rem;display:block} /* ================================================== */ /* ============ MULTI-PAGE ADDITIONS ============ */ /* ---- home hero: animated reference architecture ---- */ .hero-arch{width:100%;max-width:470px;margin-inline:auto} .hero-arch svg{width:100%;height:auto;overflow:visible} .hero-arch .hb{fill:var(--surface);stroke:var(--line-2);stroke-width:1.3} @media (prefers-reduced-motion:reduce){.hero-arch animate,.hero-arch animateMotion{display:none}} /* ---- key takeaways ---- */ .takeaways{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:.9rem} .tk{position:relative;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface); padding:1.15rem 1.2rem 1.15rem 1.2rem;transition:border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)} .tk:hover{border-color:var(--accent);transform:translateY(-3px)} .tk-n{font-family:var(--font-mono);font-size:var(--f-xs);font-weight:700;letter-spacing:.1em;color:var(--accent); display:block;margin-bottom:.5rem} .tk b{display:block;font-family:var(--font-display);font-size:var(--f-b);color:var(--ink);margin-bottom:.35rem;line-height:1.25} .tk p{margin:0;font-size:var(--f-s);color:var(--muted)} /* ---- section heatmap ---- */ .heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:.85rem} .hcard{position:relative;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:var(--ink); border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:1.1rem 1.15rem 1rem; transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)} .hcard::before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(150deg,color-mix(in srgb,var(--accent) var(--heat,4%),transparent),transparent 62%)} .hcard.h1{--heat:3%}.hcard.h2{--heat:6%}.hcard.h3{--heat:10%}.hcard.h4{--heat:15%}.hcard.h5{--heat:21%} .hcard.h4,.hcard.h5{border-color:color-mix(in srgb,var(--accent) 26%,var(--line))} .hcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent);text-decoration:none;color:var(--ink)} .hcard>*{position:relative;z-index:1} .hc-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;margin-bottom:.75rem; background:var(--surface-2);border:1px solid var(--line);color:var(--muted); transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)} .hc-ic svg{width:19px;height:19px} .hcard.h4 .hc-ic,.hcard.h5 .hc-ic{background:var(--accent-wash);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%,transparent)} .hcard:hover .hc-ic{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .hc-n{position:absolute;top:1.05rem;right:1.15rem;font-family:var(--font-mono);font-size:var(--f-xs); font-weight:700;letter-spacing:.08em;color:var(--faint)} .hcard.h4 .hc-n,.hcard.h5 .hc-n{color:color-mix(in srgb,var(--accent) 62%,var(--faint))} .hcard b{display:block;font-family:var(--font-display);font-size:var(--f-b);margin-bottom:.35rem;line-height:1.22} .hcard p{margin:0 0 .85rem;font-size:var(--f-s);color:var(--muted);flex:1;line-height:1.5} .hc-go{font-family:var(--font-mono);font-size:var(--f-xs);letter-spacing:.06em;text-transform:uppercase; font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:.35rem} .hc-go::after{content:"→";transition:transform var(--dur-fast) var(--ease)} .hcard:hover .hc-go::after{transform:translateX(4px)} .heat-key{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem; font-family:var(--font-mono);font-size:var(--f-xs);color:var(--faint);letter-spacing:.04em} .hk{display:inline-flex;gap:3px} .hk i{width:16px;height:9px;border-radius:2px;display:block;border:1px solid var(--line)} .hk .s5{background:color-mix(in srgb,var(--accent) 34%,var(--surface))} .hk .s4{background:color-mix(in srgb,var(--accent) 24%,var(--surface))} .hk .s3{background:color-mix(in srgb,var(--accent) 16%,var(--surface))} .hk .s2{background:color-mix(in srgb,var(--accent) 9%,var(--surface))} .hk .s1{background:color-mix(in srgb,var(--accent) 4%,var(--surface))} .hk-sep{width:1px;height:13px;background:var(--line-2)} /* ---- child page hero ---- */ .phero{padding-top:calc(var(--nav-h) + clamp(1.6rem,1rem + 3vw,3rem)); padding-bottom:clamp(1.6rem,1rem + 2.4vw,2.8rem);position:relative;overflow:hidden} .phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent)} .phero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(1.6rem,1rem + 3vw,3.2rem);align-items:center} @media (max-width:900px){.phero-grid{grid-template-columns:1fr;gap:1.6rem}} .phero-txt h1{font-size:clamp(2rem,1.5rem + 2.2vw,3.1rem);letter-spacing:-.03em;margin-bottom:.85rem;max-width:17ch} .phero-txt .lede{font-size:clamp(1rem,.96rem + .3vw,1.14rem);color:var(--muted);line-height:1.58;margin:0;max-width:56ch} .phero-dia{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l); padding:clamp(.8rem,.5rem + 1vw,1.3rem);box-shadow:var(--shadow-s)} .phero-dia svg{width:100%;height:auto;display:block;overflow:visible} .crumb{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem; font-family:var(--font-mono);font-size:var(--f-xs);letter-spacing:.06em;color:var(--faint)} .crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--accent);text-decoration:none} .crumb b{color:var(--ink-2);font-weight:600} .pbody{padding-top:clamp(2.2rem,1.4rem + 3vw,3.6rem)} /* ---- prev / next ---- */ .pnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem; margin-top:clamp(2.4rem,1.6rem + 3vw,4rem);padding-top:1.8rem;border-top:1px solid var(--line)} .pnav a{display:block;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface); padding:1rem 1.15rem;text-decoration:none;color:var(--ink);transition:all var(--dur-base) var(--ease)} .pnav a:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none;color:var(--ink)} .pnav .lbl{display:block;font-family:var(--font-mono);font-size:var(--f-xs);letter-spacing:.09em; text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:.35rem} .pnav b{display:block;font-family:var(--font-display);font-size:var(--f-b)} .pnav.next{text-align:right} /* "All sections" sits slightly apart from the section links */ .nav-links a.nav-all{color:var(--accent);font-weight:600;margin-left:.3rem; border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);background:var(--accent-wash)} .nav-links a.nav-all:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .nav-links a.nav-all.active::after{display:none} /* ---- clickable framework boxes in the standards diagram ---- */ .std-hit{cursor:pointer} .std-hit rect{transition:filter var(--dur-fast) var(--ease)} .std-hit .std-dot{fill:var(--surface);stroke:var(--line-2);stroke-width:1} .std-hit .std-q{font-family:var(--font-mono);font-size:8px;font-weight:700;fill:var(--muted)} .std-hit:hover rect,.std-hit:focus-visible rect{filter:brightness(.97)} .std-hit:hover .std-dot,.std-hit:focus-visible .std-dot{fill:var(--accent);stroke:var(--accent)} .std-hit:hover .std-q,.std-hit:focus-visible .std-q{fill:var(--on-accent)} .std-hit:focus-visible{outline:none} .std-hit:focus-visible rect{stroke-width:2.4} /* ---- generic info popup ---- */ .info-kicker{font-family:var(--font-mono);font-size:var(--f-xs);letter-spacing:.1em;text-transform:uppercase; font-weight:700;color:var(--accent);display:block;margin-bottom:.5rem} #infomodal .modal-in{width:min(100%,560px)} #infomodal h3{font-size:var(--f-h3);margin-bottom:.3rem} .info-meta{font-family:var(--font-mono);font-size:var(--f-xs);color:var(--faint);margin:0 0 1rem} .info-body p{font-size:var(--f-s);color:var(--muted);margin:0 0 .8rem} .info-body p b{color:var(--ink)} .info-body ul{margin:.2rem 0 .9rem;padding-left:1.1rem} .info-body li{font-size:var(--f-s);color:var(--muted);margin-bottom:.35rem} .info-body li b{color:var(--ink)} .info-src{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}