:root{
      --bg0:#070b18;          /* midnight navy */
      --bg1:#0b1030;
      --panel:#0d1738;
      --panel2:#0a132e;
      --ink:#d7e6ff;
      --muted:#a9b6d8;

      --green:#2cff8c;        /* phosphor */
      --teal:#20d6e3;         /* teal cyan */
      --amber:#ffb23f;        /* warm amber */
      --purple:#8a63ff;       /* royal purple */
      --magenta:#ff4fd8;

      --line:rgba(208,230,255,.14);
      --line2:rgba(44,255,140,.25);
      --shadow: 0 18px 50px rgba(0,0,0,.55);
      --shadow2: 0 12px 28px rgba(0,0,0,.45);
      --radius: 18px;
      --radius2: 12px;

      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --grotesk: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      --ease: cubic-bezier(.2,.8,.2,1);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--ink);
      background:
        radial-gradient(1200px 700px at 20% 10%, rgba(32,214,227,.10), transparent 60%),
        radial-gradient(900px 600px at 80% 20%, rgba(138,99,255,.12), transparent 62%),
        radial-gradient(1100px 900px at 50% 110%, rgba(255,178,63,.10), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      font-family:var(--grotesk);
      overflow-x:hidden;
    }

    /* CRT: scanlines + subtle static */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(255,255,255,.035) 0px,
          rgba(255,255,255,.018) 1px,
          rgba(0,0,0,.06) 2px,
          rgba(0,0,0,.02) 4px
        );
      mix-blend-mode:overlay;
      opacity:.35;
      z-index:0;
    }
    body::after{
      content:"";
      position:fixed;
      inset:-40px;
      pointer-events:none;
      background:
        radial-gradient(circle at 30% 10%, rgba(44,255,140,.08), transparent 45%),
        radial-gradient(circle at 75% 25%, rgba(32,214,227,.07), transparent 48%),
        radial-gradient(circle at 60% 80%, rgba(255,178,63,.06), transparent 52%),
        url("https://placehold.co/1400x900/png?text= ") center/cover no-repeat;
      filter: saturate(.7) contrast(1.05);
      opacity:.06;
      z-index:0;
    }

    a{color:inherit}
    img{max-width:100%; height:auto; display:block}

    .wrap{
      position:relative;
      z-index:1;
      width:min(1180px, calc(100% - 2rem));
      margin-inline:auto;
    }

    /* Header / Nav (burger via CSS checkbox) */
    header{
      position:sticky;
      top:0;
      z-index:50;
      background: linear-gradient(180deg, rgba(7,11,24,.88), rgba(7,11,24,.62));
      backdrop-filter: blur(10px);
      border-bottom:1px solid var(--line);
    }
    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding: .9rem 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:.8rem;
      min-width: 220px;
    }
    .mark{
      width:44px;height:44px;
      border-radius: 12px;
      background:
        linear-gradient(145deg, rgba(32,214,227,.22), rgba(138,99,255,.10)),
        radial-gradient(circle at 30% 35%, rgba(44,255,140,.28), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
      border:1px solid rgba(32,214,227,.28);
      box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 16px 34px rgba(0,0,0,.45);
      position:relative;
      overflow:hidden;
    }
    .mark::before{
      content:"";
      position:absolute;
      inset:10px 8px 10px 8px;
      border-radius: 10px;
      border:1px dashed rgba(44,255,140,.55);
      transform: skewX(-10deg);
      opacity:.85;
    }
    .brand h2{
      margin:0;
      font-family:var(--mono);
      font-size: .92rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      line-height:1.2;
    }
    .brand small{
      display:block;
      color:var(--muted);
      font-size:.76rem;
      letter-spacing:.06em;
      margin-top:.15rem;
      font-family:var(--mono);
    }

    /* Required nav structure: nav > ul > li > a (nothing else inside nav) */
    nav ul{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      align-items:center;
      gap:.2rem;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    nav a{
      display:inline-flex;
      align-items:center;
      gap:.6rem;
      padding:.62rem .85rem;
      border-radius: 999px;
      text-decoration:none;
      font-family:var(--mono);
      font-size:.9rem;
      letter-spacing:.06em;
      color:rgba(215,230,255,.92);
      border:1px solid transparent;
      transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
      position:relative;
    }
    nav a::after{
      content:"";
      position:absolute;
      left:.85rem;
      right:.85rem;
      bottom:.42rem;
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(32,214,227,.75), transparent);
      opacity:.0;
      transition: opacity .35s var(--ease);
    }
    nav a:hover{
      background: rgba(32,214,227,.08);
      border-color: rgba(32,214,227,.25);
      box-shadow: 0 0 0 3px rgba(32,214,227,.10);
      transform: translateY(-1px);
    }
    nav a:hover::after{opacity:1}
    nav a:visited{color: rgba(138,99,255,.95)}
    nav a:active{transform: translateY(0)}
    nav a:focus-visible{
      outline: none;
      box-shadow: 0 0 0 3px rgba(255,79,216,.22), 0 0 0 1px rgba(255,255,255,.08) inset;
      border-color: rgba(255,79,216,.35);
    }

    /* Burger control lives OUTSIDE nav to comply with "nothing else inside nav" */
    .burger{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px;height:44px;
      border-radius: 12px;
      border:1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.14));
      box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 10px 22px rgba(0,0,0,.35);
      cursor:pointer;
      transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
    }
    .burger:hover{
      border-color: rgba(32,214,227,.35);
      box-shadow: 0 0 0 3px rgba(32,214,227,.12), 0 0 0 1px rgba(0,0,0,.25) inset, 0 12px 26px rgba(0,0,0,.35);
      transform: translateY(-1px);
    }
    .burger:focus-visible{
      outline:none;
      box-shadow: 0 0 0 3px rgba(255,79,216,.22), 0 0 0 1px rgba(255,255,255,.08) inset;
    }
    .burger .lines{
      width:18px;height:12px; position:relative;
    }
    .burger .lines::before,
    .burger .lines::after,
    .burger .lines span{
      content:"";
      position:absolute;
      left:0; right:0;
      height:2px;
      border-radius:2px;
      background: linear-gradient(90deg, rgba(32,214,227,.95), rgba(44,255,140,.95));
      box-shadow: 0 0 14px rgba(32,214,227,.18);
    }
    .burger .lines::before{top:0}
    .burger .lines span{top:5px}
    .burger .lines::after{bottom:0}

    #navToggle{ position:absolute; left:-9999px; }
    .navShell{
      display:flex;
      align-items:center;
      gap: .8rem;
      justify-content:flex-end;
      flex: 1;
    }

    /* Mobile menu behavior (<1200px): burger shows, nav collapses */
    @media (max-width: 1199px){
      nav{
        position:absolute;
        left:0; right:0;
        top:100%;
        border-bottom:1px solid var(--line);
        background: linear-gradient(180deg, rgba(7,11,24,.92), rgba(7,11,24,.72));
        backdrop-filter: blur(10px);
        max-height: 0;
        overflow:hidden;
        transition: max-height .55s var(--ease);
      }
      nav ul{
        padding: .6rem .9rem 1rem;
        flex-direction:column;
        align-items:stretch;
        gap:.35rem;
      }
      nav a{
        width:100%;
        border-radius: 14px;
        justify-content:space-between;
        border:1px solid rgba(255,255,255,.08);
        background: rgba(13,23,56,.45);
      }
      .navShell{justify-content:flex-end}
      #navToggle:checked ~ nav{ max-height: 420px; }
    }
    @media (min-width: 1200px){
      .burger{display:none}
      nav{position:static}
      nav ul{gap:.2rem}
    }

    /* HERO */
    .hero{
      position:relative;
      padding: 1.5rem 0 1.2rem;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      align-items:stretch;
    }
    .heroPanel{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)),
        radial-gradient(900px 320px at 15% 20%, rgba(44,255,140,.12), transparent 55%),
        radial-gradient(700px 300px at 85% 10%, rgba(32,214,227,.12), transparent 55%),
        radial-gradient(800px 380px at 55% 110%, rgba(255,178,63,.10), transparent 58%),
        rgba(13,23,56,.62);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .heroPanel::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(44,255,140,.08), transparent 35%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 14px);
      opacity:.22;
      pointer-events:none;
    }
    .chrome{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: .8rem;
      padding: .75rem .9rem;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12));
    }
    .chrome .title{
      display:flex;
      align-items:center;
      gap:.6rem;
      min-width:0;
    }
    .dots{
      display:inline-flex;
      gap:.3rem;
    }
    .dots i{
      width:8px;height:8px;border-radius:999px; display:inline-block;
      background: rgba(255,255,255,.18);
      border:1px solid rgba(255,255,255,.12);
      box-shadow: 0 0 18px rgba(32,214,227,.10);
    }
    .dots i:nth-child(1){background: rgba(255,178,63,.55)}
    .dots i:nth-child(2){background: rgba(32,214,227,.48)}
    .dots i:nth-child(3){background: rgba(138,99,255,.50)}
    .chrome .title span{
      font-family:var(--mono);
      font-size:.85rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      color: rgba(215,230,255,.92);
    }
    .chrome .sig{
      font-family:var(--mono);
      font-size:.82rem;
      color: rgba(44,255,140,.9);
      letter-spacing:.08em;
      text-transform:uppercase;
      display:flex;
      align-items:center;
      gap:.6rem;
    }
    .led{
      width:10px;height:10px;border-radius:999px;
      background: radial-gradient(circle at 30% 30%, rgba(44,255,140,1), rgba(44,255,140,.25));
      box-shadow: 0 0 16px rgba(44,255,140,.35);
      border:1px solid rgba(44,255,140,.25);
    }

    .heroBody{
      padding: 1.05rem .95rem 1.1rem;
      display:grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .heroText h1{
      margin:.15rem 0 .55rem;
      font-family:var(--mono);
      font-size: clamp(1.55rem, 3.8vw, 2.55rem);
      line-height:1.12;
      letter-spacing: .10em;
      text-transform:uppercase;
      font-style:oblique;
      text-shadow: 0 0 18px rgba(44,255,140,.12);
    }
    .heroText h1 .arrow{
      color: var(--green);
      text-shadow: 0 0 16px rgba(44,255,140,.25);
    }
    .heroText p{
      margin:0 0 .9rem;
      color: rgba(215,230,255,.84);
      font-family:var(--grotesk);
      max-width: 55ch;
      font-size: 1rem;
      line-height:1.5;
    }
    .metaRow{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      align-items:center;
    }
    .chip{
      font-family:var(--mono);
      font-size:.82rem;
      letter-spacing:.06em;
      padding:.4rem .6rem;
      border-radius: 999px;
      background: rgba(10,19,46,.55);
      border:1px dashed rgba(32,214,227,.28);
      color: rgba(32,214,227,.95);
      box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
    }
    .chip.amber{
      border-color: rgba(255,178,63,.30);
      color: rgba(255,178,63,.95);
    }
    .chip.purple{
      border-color: rgba(138,99,255,.30);
      color: rgba(138,99,255,.95);
    }

    .heroActions{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
      align-items:center;
      margin-top:.25rem;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.75rem .95rem;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.16));
      box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset, 0 12px 26px rgba(0,0,0,.35);
      text-decoration:none;
      color: rgba(215,230,255,.95);
      font-family:var(--mono);
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:.88rem;
      transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
      position:relative;
      overflow:hidden;
    }
    .btn::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, transparent, rgba(32,214,227,.10), transparent);
      transform: translateX(-60%);
      transition: transform .55s var(--ease);
      opacity:.9;
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(32,214,227,.35);
      box-shadow: 0 0 0 3px rgba(32,214,227,.12), 0 0 0 1px rgba(0,0,0,.3) inset, 0 14px 30px rgba(0,0,0,.42);
    }
    .btn:hover::before{ transform: translateX(60%); }
    .btn:active{ transform: translateY(0); }
    .btn:focus-visible{
      outline:none;
      box-shadow: 0 0 0 3px rgba(255,79,216,.22), 0 0 0 1px rgba(255,255,255,.08) inset, 0 14px 30px rgba(0,0,0,.42);
      border-color: rgba(255,79,216,.35);
    }
    .btn.primary{
      border-color: rgba(44,255,140,.30);
      color: rgba(7,11,24,.92);
      background:
        linear-gradient(180deg, rgba(44,255,140,.95), rgba(32,214,227,.65));
      box-shadow: 0 0 22px rgba(44,255,140,.12), 0 0 0 1px rgba(0,0,0,.35) inset, 0 16px 32px rgba(0,0,0,.40);
    }
    .btn.primary:hover{
      border-color: rgba(44,255,140,.45);
      box-shadow: 0 0 0 3px rgba(44,255,140,.18), 0 0 26px rgba(44,255,140,.14), 0 0 0 1px rgba(0,0,0,.35) inset, 0 18px 34px rgba(0,0,0,.45);
    }

    /* Slider (CSS-only) */
    .slider{
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(10,19,46,.45);
      overflow:hidden;
      position:relative;
      max-height: 600px;
      box-shadow: var(--shadow2);
    }
    .slides{
      display:flex;
      width:300%;
      animation: slide 18s var(--ease) infinite;
    }
    .slide{
      width:100%;
      aspect-ratio: 16/9;
      max-height: 600px;
      position:relative;
      overflow:hidden;
    }
    .slide img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter: contrast(1.05) saturate(.9) hue-rotate(-8deg);
      transform: scale(1.02);
    }
    .slide::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(900px 360px at 15% 20%, rgba(32,214,227,.18), transparent 58%),
        radial-gradient(700px 320px at 80% 15%, rgba(255,178,63,.16), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.45));
      pointer-events:none;
    }
    .slide .cap{
      position:absolute;
      left: .85rem;
      right: .85rem;
      bottom: .75rem;
      padding:.75rem .8rem;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.20));
      backdrop-filter: blur(8px);
      box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 18px 34px rgba(0,0,0,.35);
    }
    .cap strong{
      display:block;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.10em;
      font-size:.9rem;
      margin-bottom:.25rem;
      color: rgba(44,255,140,.95);
      text-shadow: 0 0 12px rgba(44,255,140,.15);
    }
    .cap span{
      display:block;
      color: rgba(215,230,255,.88);
      font-size:.95rem;
      line-height:1.35;
      max-width: 60ch;
    }

    @keyframes slide{
      0%, 28%{ transform: translateX(0%); }
      33%, 61%{ transform: translateX(-33.3333%); }
      66%, 94%{ transform: translateX(-66.6666%); }
      100%{ transform: translateX(0%); }
    }

    @media (min-width: 768px){
      .hero{padding: 2.1rem 0 1.6rem;}
      .heroBody{
        grid-template-columns: 1.05fr .95fr;
        align-items:center;
        gap:1.2rem;
      }
      .heroGrid{gap:1.2rem}
    }
    @media (min-width: 1200px){
      .heroBody{padding: 1.25rem 1.15rem 1.25rem;}
      .chrome{padding: .8rem 1.15rem;}
    }

    /* Section scaffolding */
    main{padding: 1.2rem 0 2.2rem;}
    section{
      margin-top: 1.4rem;
    }
    .sectionHead{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:.75rem;
    }
    .sectionHead h2{
      margin:0;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.10em;
      font-style:oblique;
      font-size: 1.1rem;
      color: rgba(215,230,255,.94);
    }
    .sectionHead p{
      margin:0;
      color: rgba(169,182,216,.9);
      font-family:var(--mono);
      font-size:.86rem;
      letter-spacing:.06em;
      max-width: 60ch;
    }

    .grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: .9rem;
    }
    @media (min-width: 768px){
      .grid{grid-template-columns: repeat(2, 1fr); gap: 1rem;}
    }
    @media (min-width: 1200px){
      .grid{grid-template-columns: repeat(3, 1fr); gap: 1.05rem;}
    }

    article.card{
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background: rgba(13,23,56,.55);
      box-shadow: 0 0 0 1px rgba(0,0,0,.28) inset, 0 18px 40px rgba(0,0,0,.28);
      overflow:hidden;
      position:relative;
      transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
      min-height: 250px;
      display:flex;
      flex-direction:column;
    }
    article.card:hover{
      transform: translateY(-3px);
      border-color: rgba(32,214,227,.26);
      box-shadow: 0 0 0 3px rgba(32,214,227,.10), 0 0 0 1px rgba(0,0,0,.28) inset, 0 22px 44px rgba(0,0,0,.35);
    }
    .thumb{
      position:relative;
      aspect-ratio: 16/9;
      background: rgba(10,19,46,.55);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter: contrast(1.05) saturate(.85);
    }
    .thumb::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 18px),
        linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.45));
      opacity:.35;
      pointer-events:none;
    }
    .cardBody{
      padding: .85rem .95rem 1rem;
      display:flex;
      flex-direction:column;
      gap:.6rem;
      flex:1;
    }
    .kicker{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.6rem;
      font-family:var(--mono);
      font-size:.8rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(169,182,216,.95);
    }
    .kicker b{
      font-weight:700;
      color: rgba(32,214,227,.95);
    }
    .card h3{
      margin:0;
      font-size:1.05rem;
      line-height:1.28;
      letter-spacing:.02em;
    }
    .card p{
      margin:0;
      color: rgba(215,230,255,.84);
      font-size:.95rem;
      line-height:1.45;
      max-width: 60ch;
    }
    .cardFooter{
      margin-top:auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      padding-top:.2rem;
      border-top:1px dashed rgba(255,255,255,.12);
      font-family:var(--mono);
      font-size:.85rem;
      letter-spacing:.06em;
    }
    .cardFooter a{
      text-decoration:none;
      color: rgba(32,214,227,.95);
      border-bottom:1px solid rgba(32,214,227,.55);
      padding-bottom:2px;
      transition: color .35s var(--ease), border-color .35s var(--ease), text-shadow .35s var(--ease);
    }
    .cardFooter a:hover{
      color: rgba(255,79,216,.95);
      border-color: rgba(255,79,216,.6);
      text-shadow: 0 0 18px rgba(255,79,216,.14);
    }
    .cardFooter a:focus-visible{
      outline:none;
      box-shadow: 0 0 0 3px rgba(255,79,216,.22);
      border-radius: 6px;
      border-bottom-color: transparent;
    }
    .badge{
      padding:.3rem .55rem;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(10,19,46,.6);
      color: rgba(215,230,255,.86);
      white-space:nowrap;
    }

    /* Section individuality */
    .sec1 .sectionHead h2{color: rgba(44,255,140,.95); text-shadow: 0 0 18px rgba(44,255,140,.12);}
    .sec1 article.card{ background: rgba(13,23,56,.55); }
    .sec1 article.card:hover{ border-color: rgba(44,255,140,.30); box-shadow: 0 0 0 3px rgba(44,255,140,.10), 0 0 0 1px rgba(0,0,0,.28) inset, 0 22px 44px rgba(0,0,0,.35); }

    .sec2{
      padding: 1rem;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(700px 320px at 10% 30%, rgba(32,214,227,.10), transparent 60%),
        radial-gradient(600px 300px at 90% 10%, rgba(138,99,255,.10), transparent 55%),
        rgba(10,19,46,.35);
      box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 18px 50px rgba(0,0,0,.22);
    }
    .sec2 .sectionHead h2{color: rgba(32,214,227,.98); text-shadow: 0 0 18px rgba(32,214,227,.12);}
    .sec2 article.card{
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)),
        rgba(13,23,56,.52);
    }
    .sec2 article.card:hover{
      transform: translateY(-4px) rotate(-.08deg);
      border-color: rgba(32,214,227,.32);
    }

    .sec3 .sectionHead h2{color: rgba(255,178,63,.95); text-shadow: 0 0 18px rgba(255,178,63,.10);}
    .sec3 article.card{
      background:
        linear-gradient(180deg, rgba(255,178,63,.06), rgba(0,0,0,.20)),
        rgba(13,23,56,.52);
    }
    .sec3 article.card:hover{
      border-color: rgba(255,178,63,.30);
      box-shadow: 0 0 0 3px rgba(255,178,63,.10), 0 0 0 1px rgba(0,0,0,.28) inset, 0 22px 44px rgba(0,0,0,.35);
    }

    /* Blog list block */
    .block{
      margin: 1.6rem auto 0;
      padding: 1rem;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background: rgba(13,23,56,.45);
      box-shadow: var(--shadow2);
    }
    .block h2{
      margin:.1rem 0 .2rem;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.10em;
      font-style:oblique;
      font-size:1.05rem;
      color: rgba(138,99,255,.95);
      text-shadow: 0 0 18px rgba(138,99,255,.12);
    }
    .block .sub{
      margin:0 0 .9rem;
      color: rgba(169,182,216,.92);
      font-family:var(--mono);
      font-size:.86rem;
      letter-spacing:.06em;
      max-width: 70ch;
    }
    .blogList{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      grid-template-columns: 1fr;
      gap:.8rem;
    }
    @media (min-width: 768px){
      .blogList{grid-template-columns: repeat(2, 1fr);}
    }
    .blogList li{
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(10,19,46,.48);
      overflow:hidden;
      transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
      box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 14px 30px rgba(0,0,0,.22);
    }
    .blogList li:hover{
      transform: translateY(-3px);
      border-color: rgba(138,99,255,.30);
      box-shadow: 0 0 0 3px rgba(138,99,255,.10), 0 0 0 1px rgba(0,0,0,.25) inset, 0 18px 38px rgba(0,0,0,.30);
    }
    .blogList a{
      display:grid;
      grid-template-columns: 120px 1fr;
      gap:.8rem;
      align-items:stretch;
      text-decoration:none;
      color: rgba(215,230,255,.92);
    }
    .blogList .pic{
      height:100%;
      min-height: 96px;
      border-right:1px dashed rgba(255,255,255,.12);
      background: rgba(13,23,56,.55);
      position:relative;
    }
    .blogList .pic img{
      width:100%; height:100%;
      object-fit:cover;
      filter: contrast(1.05) saturate(.85);
    }
    .blogList .pic::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 10px),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.38));
      opacity:.35;
      pointer-events:none;
    }
    .blogList .txt{
      padding:.75rem .85rem;
    }
    .blogList .txt strong{
      display:block;
      font-family:var(--mono);
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:.9rem;
      color: rgba(32,214,227,.92);
      margin-bottom:.25rem;
    }
    .blogList .txt span{
      display:block;
      color: rgba(215,230,255,.86);
      font-size:.95rem;
      line-height:1.35;
      max-width: 54ch;
    }
    .blogList a:hover strong{color: rgba(255,79,216,.95); text-shadow: 0 0 18px rgba(255,79,216,.12);}
    .blogList a:focus-visible{
      outline:none;
      box-shadow: 0 0 0 3px rgba(255,79,216,.22);
      border-radius: 16px;
    }

    /* Content block (centered, no side blocks) */
    .content{
      margin: 1.6rem auto 0;
      width: min(880px, calc(100% - 2rem));
    }
    .content .frame{
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)),
        rgba(13,23,56,.52);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .frameTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.8rem .95rem;
      border-bottom:1px solid rgba(255,255,255,.10);
      background: rgba(10,19,46,.35);
    }
    .frameTop .label{
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.10em;
      font-style:oblique;
      color: rgba(44,255,140,.92);
    }
    .frameTop .stamp{
      font-family:var(--mono);
      font-size:.85rem;
      letter-spacing:.12em;
      text-transform:uppercase;
      color: rgba(255,178,63,.92);
      border:1px solid rgba(255,178,63,.28);
      padding:.35rem .55rem;
      border-radius: 10px;
      background: rgba(255,178,63,.06);
    }

    .contentImg{
      padding: 1rem;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .contentImg img{
      width: 100%;
      max-width: 760px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.10);
      box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 18px 40px rgba(0,0,0,.35);
      filter: contrast(1.05) saturate(.88) hue-rotate(-10deg);
    }

    .rating{
      margin: 0 1rem 1rem;
      padding: .85rem .9rem;
      border-radius: 14px;
      border:1px dashed rgba(44,255,140,.30);
      background: rgba(10,19,46,.48);
      font-family:var(--mono);
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(215,230,255,.92);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .rating b{color: rgba(44,255,140,.95)}
    .divider{
      margin: 0 1rem 1rem;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(32,214,227,.55), rgba(138,99,255,.35), transparent);
    }

    .content article[itemscope]{
      padding: 0 1rem 1.1rem;
    }
    .content article h1{
      margin:.15rem 0 .4rem;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.10em;
      font-style:oblique;
      font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    }
    .byline{
      margin:0 0 .85rem;
      color: rgba(169,182,216,.92);
      font-family:var(--mono);
      font-size:.88rem;
      letter-spacing:.06em;
      display:flex;
      flex-wrap:wrap;
      gap:.6rem 1.1rem;
      align-items:center;
    }
    .byline span{
      border-left:1px dashed rgba(255,255,255,.14);
      padding-left:.8rem;
    }
    .byline span:first-child{border-left:none; padding-left:0}
    .content .bodyText{
      color: rgba(215,230,255,.86);
      line-height:1.6;
      max-width: 70ch;
      font-size: 1rem;
    }
    .terminalCallout{
      margin: 1rem 0;
      padding: .9rem .9rem;
      border-radius: 16px;
      border:1px solid rgba(255,178,63,.25);
      background:
        linear-gradient(90deg, rgba(255,178,63,.12) 0 14px, rgba(10,19,46,.50) 14px 100%);
      box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
      font-family:var(--mono);
      font-size:.92rem;
      letter-spacing:.03em;
      color: rgba(215,230,255,.90);
    }
    .terminalCallout strong{
      color: rgba(255,178,63,.95);
      text-transform:uppercase;
      letter-spacing:.10em;
      display:block;
      margin-bottom:.35rem;
    }
    .hopline{
      display:grid;
      grid-template-columns: 1fr;
      gap:.55rem;
      margin: .9rem 0 0;
      padding:0;
      list-style:none;
      font-family:var(--mono);
      font-size:.9rem;
      color: rgba(215,230,255,.88);
    }
    .hopline li{
      padding:.65rem .7rem;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(10,19,46,.42);
      position:relative;
      overflow:hidden;
    }
    .hopline li::before{
      content:"";
      position:absolute;
      left:14px; top:50%;
      width:10px;height:10px;border-radius:999px;
      transform: translateY(-50%);
      background: radial-gradient(circle at 30% 30%, rgba(32,214,227,1), rgba(32,214,227,.18));
      border:1px solid rgba(32,214,227,.35);
      box-shadow: 0 0 16px rgba(32,214,227,.18);
    }
    .hopline li::after{
      content:"";
      position:absolute;
      left:28px; right:10px; top:50%;
      height:1px;
      transform: translateY(-50%);
      background: repeating-linear-gradient(90deg, rgba(32,214,227,.45) 0 8px, transparent 8px 14px);
      opacity:.35;
    }
    .hopline code{
      position:relative;
      z-index:1;
      display:block;
      padding-left: 1.6rem;
      color: rgba(215,230,255,.90);
    }

    .prevnext{
      display:flex;
      flex-direction:column;
      gap:.6rem;
      padding: 0 1rem 1rem;
    }
    @media (min-width: 768px){
      .prevnext{flex-direction:row; justify-content:space-between; align-items:center;}
    }
    .prevnext a{
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      padding:.8rem .9rem;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(10,19,46,.42);
      font-family:var(--mono);
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(32,214,227,.95);
      transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
    }
    .prevnext a:hover{
      transform: translateY(-2px);
      border-color: rgba(32,214,227,.30);
      box-shadow: 0 0 0 3px rgba(32,214,227,.10);
      color: rgba(255,79,216,.95);
    }
    .prevnext a:focus-visible{outline:none; box-shadow: 0 0 0 3px rgba(255,79,216,.22); border-color: rgba(255,79,216,.35);}

    /* Comments */
    .comments{
      margin-top: .2rem;
      padding: 1rem;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background: rgba(13,23,56,.45);
      box-shadow: var(--shadow2);
    }
    .comments h2{
      margin:.15rem 0 .8rem;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.10em;
      font-style:oblique;
      font-size:1.05rem;
      color: rgba(255,178,63,.95);
    }
    .emptyWell{
      border-radius: 16px;
      border:1px dashed rgba(255,255,255,.16);
      background: rgba(10,19,46,.42);
      padding: 1rem;
      color: rgba(169,182,216,.92);
      font-family:var(--mono);
      font-size:.9rem;
      letter-spacing:.04em;
      min-height: 90px;
    }
    form{
      margin-top: .9rem;
      display:grid;
      grid-template-columns: 1fr;
      gap:.75rem;
    }
    @media (min-width: 768px){
      .formGrid{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:.75rem;
      }
    }
    label{
      display:block;
      font-family:var(--mono);
      font-size:.85rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(169,182,216,.95);
      margin-bottom:.35rem;
    }
    input, textarea{
      width:100%;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(10,19,46,.40);
      color: rgba(215,230,255,.92);
      padding:.75rem .85rem;
      font-family:var(--mono);
      letter-spacing:.03em;
      transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
    }
    textarea{min-height: 120px; resize:vertical}
    input:focus-visible, textarea:focus-visible{
      outline:none;
      border-color: rgba(32,214,227,.40);
      box-shadow: 0 0 0 3px rgba(32,214,227,.12);
      background: rgba(10,19,46,.52);
    }

    /* Related */
    .related{
      margin-top: 1rem;
      padding: 1rem;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(800px 340px at 15% 40%, rgba(138,99,255,.10), transparent 60%),
        rgba(13,23,56,.45);
      box-shadow: var(--shadow2);
    }
    .related h2{
      margin:.15rem 0 .8rem;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.10em;
      font-style:oblique;
      font-size:1.05rem;
      color: rgba(138,99,255,.95);
    }
    .relGrid{
      display:grid;
      grid-template-columns: 1fr;
      gap:.8rem;
    }
    @media (min-width: 768px){
      .relGrid{grid-template-columns: repeat(3, 1fr);}
    }
    .relItem{
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.10);
      overflow:hidden;
      background: rgba(10,19,46,.42);
      transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
      box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 14px 30px rgba(0,0,0,.22);
    }
    .relItem:hover{
      transform: translateY(-3px);
      border-color: rgba(138,99,255,.32);
      box-shadow: 0 0 0 3px rgba(138,99,255,.10), 0 0 0 1px rgba(0,0,0,.25) inset, 0 18px 38px rgba(0,0,0,.30);
    }
    .relItem a{
      text-decoration:none;
      color: rgba(215,230,255,.92);
      display:block;
    }
    .relItem .rpic{
      aspect-ratio: 16/10;
      border-bottom:1px dashed rgba(255,255,255,.12);
      position:relative;
    }
    .relItem .rpic img{
      width:100%; height:100%;
      object-fit:cover;
      filter: contrast(1.05) saturate(.85);
    }
    .relItem .rpic::after{
      content:"";
      position:absolute;
      inset:0;
      background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 16px),
                  linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.42));
      opacity:.35;
      pointer-events:none;
    }
    .relItem .rtxt{
      padding:.75rem .85rem;
      font-family:var(--mono);
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size:.9rem;
      color: rgba(32,214,227,.92);
    }
    .relItem:hover .rtxt{color: rgba(255,79,216,.95); text-shadow: 0 0 18px rgba(255,79,216,.12);}
    .relItem a:focus-visible{outline:none; box-shadow: 0 0 0 3px rgba(255,79,216,.22);}

    /* Contacts block */
    .contacts{
      margin: 1.6rem auto 0;
      padding: 1rem;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(900px 360px at 20% 30%, rgba(32,214,227,.10), transparent 62%),
        radial-gradient(700px 320px at 85% 25%, rgba(255,178,63,.10), transparent 60%),
        rgba(13,23,56,.45);
      box-shadow: var(--shadow2);
    }
    .contacts h2{
      margin:.15rem 0 .2rem;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.10em;
      font-style:oblique;
      font-size:1.05rem;
      color: rgba(32,214,227,.95);
      text-shadow: 0 0 18px rgba(32,214,227,.12);
    }
    .contacts p{
      margin:.2rem 0 .9rem;
      color: rgba(215,230,255,.84);
      max-width: 75ch;
      line-height:1.55;
    }
    .contactGrid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      align-items:start;
    }
    @media (min-width: 768px){
      .contactGrid{grid-template-columns: 1.15fr .85fr;}
    }
    .address{
      border-radius: 16px;
      border:1px dashed rgba(255,255,255,.14);
      background: rgba(10,19,46,.42);
      padding: .9rem;
      font-family:var(--mono);
      letter-spacing:.04em;
      color: rgba(215,230,255,.88);
    }
    .address b{color: rgba(255,178,63,.95)}
    .map{
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.10);
      overflow:hidden;
      background: rgba(10,19,46,.42);
      min-height: 240px;
      position:relative;
      box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
    }
    .map iframe{
      width:100%;
      height:100%;
      border:0;
      filter: saturate(.8) contrast(1.05);
    }

    /* Aside: promo links + modal */
    aside{
      margin: 1.6rem auto 0;
      padding: 1rem;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background: rgba(13,23,56,.40);
      box-shadow: var(--shadow2);
    }
    .promo{
      display:grid;
      grid-template-columns: 1fr;
      gap:.75rem;
      margin-bottom: 1rem;
    }
    @media (min-width: 768px){
      .promo{grid-template-columns: repeat(4, 1fr);}
    }
    .promo a{
      text-decoration:none;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(10,19,46,.42);
      padding: .85rem .85rem;
      display:block;
      font-family:var(--mono);
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(44,255,140,.92);
      transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), color .45s var(--ease);
      box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 14px 30px rgba(0,0,0,.22);
      position:relative;
      overflow:hidden;
    }
    .promo a::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, transparent, rgba(44,255,140,.10), transparent);
      transform: translateX(-70%);
      transition: transform .55s var(--ease);
    }
    .promo a:hover{
      transform: translateY(-3px);
      border-color: rgba(44,255,140,.30);
      box-shadow: 0 0 0 3px rgba(44,255,140,.10), 0 0 0 1px rgba(0,0,0,.25) inset, 0 18px 38px rgba(0,0,0,.30);
      color: rgba(255,79,216,.95);
    }
    .promo a:hover::after{transform: translateX(70%)}
    .promo a:focus-visible{outline:none; box-shadow: 0 0 0 3px rgba(255,79,216,.22);}

    /* Pure CSS modal via :target */
    .modal{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      padding: 1.2rem;
      z-index:80;
    }
    .modal:target{display:flex}
    .modal .backdrop{
      position:absolute;
      inset:0;
      background: rgba(0,0,0,.62);
      backdrop-filter: blur(6px);
    }
    .modal .dialog{
      position:relative;
      width: min(520px, 100%);
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.18)),
        rgba(13,23,56,.82);
      box-shadow: 0 28px 80px rgba(0,0,0,.60);
      overflow:hidden;
    }
    .modal .dialog header{
      position:relative;
      top:auto;
      background: transparent;
      backdrop-filter:none;
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .modal .dialog .top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      padding: .85rem .95rem;
    }
    .modal .dialog h3{
      margin:0;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.10em;
      font-style:oblique;
      font-size:1rem;
      color: rgba(44,255,140,.95);
    }
    .modal .close{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:40px;height:40px;
      border-radius: 12px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(10,19,46,.42);
      text-decoration:none;
      color: rgba(215,230,255,.92);
      font-family:var(--mono);
      transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
    }
    .modal .close:hover{
      transform: translateY(-2px);
      border-color: rgba(255,79,216,.35);
      box-shadow: 0 0 0 3px rgba(255,79,216,.14);
    }
    .modal .close:focus-visible{outline:none; box-shadow: 0 0 0 3px rgba(255,79,216,.22);}
    .modal .content{
      width:100%;
      margin:0;
      padding: .95rem;
    }

    /* Footer */
    footer{
      margin-top: 2rem;
      border-top:1px solid var(--line);
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 22px),
        radial-gradient(1200px 500px at 50% 0%, rgba(32,214,227,.10), transparent 60%),
        rgba(7,11,24,.78);
    }
    .footerInner{
      padding: 1.2rem 0 1.4rem;
      display:grid;
      grid-template-columns: 1fr;
      gap: .9rem;
    }
    @media (min-width: 768px){
      .footerInner{grid-template-columns: 1.1fr .9fr; align-items:start;}
    }
    .statusbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 1rem;
      padding: .8rem .9rem;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(10,19,46,.42);
      box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
      font-family:var(--mono);
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size:.85rem;
      color: rgba(169,182,216,.95);
    }
    .ticks{
      display:flex; gap:.45rem; align-items:center;
    }
    .ticks i{
      width:10px;height:10px;border-radius:999px; display:inline-block;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.10);
    }
    .ticks i.on{
      background: radial-gradient(circle at 30% 30%, rgba(44,255,140,1), rgba(44,255,140,.20));
      border-color: rgba(44,255,140,.30);
      box-shadow: 0 0 14px rgba(44,255,140,.22);
    }
    .throughput{
      color: rgba(44,255,140,.92);
      white-space:nowrap;
    }

    .footTitle{
      font-family:var(--mono);
      font-size:1rem;
      letter-spacing:.10em;
      text-transform:uppercase;
      font-style:oblique;
      margin: 0 0 .35rem;
      color: rgba(32,214,227,.95);
    }
    .about{
      margin:0;
      color: rgba(215,230,255,.84);
      line-height:1.55;
      max-width: 70ch;
    }
    .social{
      display:flex;
      gap:.7rem;
      flex-wrap:wrap;
      margin-top:.75rem;
    }
    .social a{
      text-decoration:none;
      font-family:var(--mono);
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:.88rem;
      padding:.6rem .75rem;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(10,19,46,.42);
      color: rgba(215,230,255,.90);
      transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
    }
    .social a:hover{
      transform: translateY(-2px);
      border-color: rgba(32,214,227,.32);
      box-shadow: 0 0 0 3px rgba(32,214,227,.12);
      color: rgba(255,79,216,.95);
    }
    .social a:focus-visible{outline:none; box-shadow: 0 0 0 3px rgba(255,79,216,.22); border-color: rgba(255,79,216,.35);}
    .copyright{
      margin: .2rem 0 0;
      font-family:var(--mono);
      font-size:.85rem;
      letter-spacing:.06em;
      color: rgba(169,182,216,.92);
    }