/* ── Navigation ────────────────────────────────────────── */
    nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(10,13,15,.93);
      -webkit-backdrop-filter: blur(14px); /* Safari <15.4 needs the prefix */
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
      height: var(--nav-h);
    }
    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
      nav { background: var(--bg); }
    }
    .nav-inner {
      max-width: 1240px; margin: 0 auto;
      display: flex; align-items: center;
      gap: 1.5rem; height: 100%;
      padding: 0 clamp(1rem,4vw,2.5rem);
    }
    .logo {
      font-family: var(--font-mono); font-weight: 800; font-size: 1.15rem;
      letter-spacing: -.02em; color: var(--green); text-decoration: none;
      display: flex; align-items: center; gap: .45rem; flex-shrink: 0;
      /* perspective lives on .logo-box now — cleaner scope */
    }
    /* ── KB logo — 3D cube + soldering ─────────────────────────
     * Architecture:
     *   .logo-box      → 3D scene container (perspective only, no clip)
     *   .cube          → what rotates; hosts all 6 faces via preserve-3d
     *   .face.front    → hero surface shell
     *   .face-screen   → clipped inner screen + solder sweep on ::before
     *   .face.top/right → revealed on hover (isometric corner view)
     *
     * Idle:  resting tilt barely hints at depth, "KB" stays legible.
     * Hover: cube swings to rotateX(-22°) rotateY(35°) — classic PCB
     *        corner — revealing front, top, and right faces.
     *
     * Tuning:
     *   --solder-speed    Sweep cycle. Default 5s. Higher = calmer.
     *   Idle tilt angles: rotateX/Y in @keyframes cube-rock
     *   Hover angle:      rotateX/Y in .logo:hover .cube
     * ─────────────────────────────────────────────────────────── */
    .logo-box {
      --solder-speed: 5s;

      width: 28px; height: 28px;
      position: relative;
      -webkit-perspective: 180px; /* Safari ≤14 prefix */
      perspective: 180px;   /* depth context for .cube's rotations */
      flex-shrink: 0;
    }

    .cube {
      position: relative;           /* positioning anchor for absolute faces */
      width: 100%; height: 100%;
      -webkit-transform-style: preserve-3d; /* Safari needs the prefix */
      transform-style: preserve-3d;
      /* Resting tilt: just enough depth hint, "KB" fully legible */
      transform: rotateX(-5deg) rotateY(10deg);
      transition: transform .45s cubic-bezier(.34, 1.28, .64, 1);
      animation: cube-rock var(--solder-speed) ease-in-out infinite;
    }

    /* Gentle idle rocking — component sitting on a vibrating workbench */
    @keyframes cube-rock {
      0%, 100% { transform: rotateX(-5deg) rotateY(10deg); }
      50%      { transform: rotateX(-7deg) rotateY(13deg); }
    }

    .face {
      position: absolute;
      inset: 0;                       /* all faces fill the 28×28 cube */
      border-radius: 3px;
      display: flex; align-items: center; justify-content: center;
      -webkit-backface-visibility: hidden; /* Safari prefix */
      backface-visibility: hidden;    /* clean rotations — no ghost faces */
    }

    /* Face offsets: half of 28px = 14px pushes each face to the cube boundary */
    .face.front  { transform: translateZ(14px); }
    .face.back   { transform: rotateY(180deg)  translateZ(14px); }
    .face.top    { transform: rotateX(90deg)   translateZ(14px); }
    .face.bottom { transform: rotateX(-90deg)  translateZ(14px); }
    .face.right  { transform: rotateY(90deg)   translateZ(14px); }
    .face.left   { transform: rotateY(-90deg)  translateZ(14px); }

    /* Front — hero surface: green border, "!" mark, solder sweep */
    .face.front {
      border: 2px solid var(--green);
      background: var(--bg);
      color: var(--green);
      animation: logo-heat var(--solder-speed) ease-in-out infinite;
    }

    .face.front .face-screen {
      position: relative;
      width: 100%; height: 100%;
      border-radius: 1px;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column;
      gap: 2px;
    }

    .mini-terminal {
      position: absolute;
      inset: 3px;
      z-index: 0;
      opacity: .56;
      pointer-events: none;
    }

    .mini-line,
    .mini-cursor {
      position: absolute;
      left: 2px;
      height: 1px;
      background: rgba(34, 197, 94, .68);
      box-shadow: 0 0 2px rgba(34, 197, 94, .30);
    }

    .mini-line {
      width: 0;
      transform-origin: left center;
      animation: tiny-type 3.4s steps(12, end) infinite;
    }

    .mini-line-1 { top: 4px;  animation-delay: .1s; }
    .mini-line-2 { top: 7px;  animation-delay: .8s; }
    .mini-line-3 { top: 10px; animation-delay: 1.5s; }

    /* Real code characters — typed as lines animate */
    .mini-line::before {
      font-family: var(--font-mono);
      font-size: 1.8px;
      position: absolute;
      left: 0;
      top: -0.6px;
      line-height: 1;
      white-space: nowrap;
    }
    .mini-line-1::before { content: 'x = 1'; }
    .mini-line-2::before { content: 'y++'; }
    .mini-line-3::before { content: 'fn()'; }

    .mini-cursor {
      top: 10px;
      width: 1px;
      height: 2px;
      animation: tiny-cursor 1s steps(1, end) infinite;
    }

    @keyframes tiny-type {
      0%, 12% { width: 0; }
      35% { width: 10px; }
      55% { width: 10px; opacity: .96; }
      75%, 100% { width: 0; opacity: .44; }
    }

    @keyframes tiny-cursor {
      0%, 45% { opacity: .95; transform: translateX(9px); }
      50%, 100% { opacity: .32; transform: translateX(2px); }
    }

    /* "!" split into two elements so the dot can animate independently */
    .mark-bar {
      display: block;
      width: 2px; height: 8px;
      background: currentColor;
      border-radius: 1px;
      position: relative;
      z-index: 1;
    }

    .mark-dot {
      display: block;
      width: 3px; height: 3px;
      background: currentColor;
      border-radius: 50%;
      position: relative;
      z-index: 1;
      /* spring return on unhover: browser transitions from mid-bounce back to rest */
      transition: transform .45s cubic-bezier(.34, 1.55, .64, 1),
                  background .2s;
    }

    /* Dot launches upward inside the cube — keep bouncing until cursor leaves */
    .logo:hover .mark-dot {
      background: var(--amber);    /* dot heats to amber while airborne */
      animation: dot-bounce .6s infinite;
    }

    /* Per-keyframe timing creates gravity physics without JS:
     * ease-in on launch (acceleration), ease-out on descent (deceleration).
     * The transition on .mark-dot spring-bounces it back to rest on unhover. */
    @keyframes dot-bounce {
      0%   { transform: translateY(0);     animation-timing-function: cubic-bezier(.5,0,.8,.8); }
      50%  { transform: translateY(-11px); animation-timing-function: cubic-bezier(.2,.25,.5,1); }
      100% { transform: translateY(0); }
    }

    /* Top + left — lit at an angle; subtle PCB surface tint */
    .face.top, .face.left {
      border: 1px solid var(--green-dim);
      background: rgba(34, 197, 94, .05);
    }

    /* Right + bottom — unlit sides; darkest, like PCB edge in shadow */
    .face.right, .face.bottom {
      border: 1px solid var(--border-mid);
      background: rgba(0, 0, 0, .55);
    }

    .face.back {
      border: 1px solid var(--green-dim);
      background: var(--bg-card);
    }

    /* Solder sweep — diagonal amber streak clipped to the screen glass */
    .face.front .face-screen::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        transparent 0%,
        transparent 28%,
        rgba(245, 158, 11, .30) 40%,
        rgba(255, 248, 200, .68) 50%,   /* near-white hot tip */
        rgba(245, 158, 11, .30) 60%,
        transparent 72%,
        transparent 100%
      );
      transform: translate(-100%, -100%);
      pointer-events: none;
      animation: solder-sweep var(--solder-speed) ease-in-out infinite;
    }

    /* Timeline at default 5s:
     *   0–2s     iron off-screen top-left (quiet)
     *   2–3.25s  diagonal pass across the face
     *   3.25s+   iron exits bottom-right, quiet until next cycle */
    @keyframes solder-sweep {
      0%, 40%   { transform: translate(-100%, -100%); opacity: 0; }
      43%       { opacity: 1; }
      62%       { transform: translate(100%, 100%); opacity: .6; }
      65%, 100% { transform: translate(120%, 120%); opacity: 0; }
    }

    /* Heat bloom — thermal lag: glow peaks slightly after the sweep midpoint */
    @keyframes logo-heat {
      0%, 36%   { box-shadow: none; }
      52%       { box-shadow: 0 0 8px 2px rgba(245, 158, 11, .36),
                              inset 0 0 4px rgba(245, 158, 11, .08); }
      68%, 100% { box-shadow: none; }
    }

    /* Hover: isometric reveal — rotateX(-22°) pulls top face toward viewer,
     * rotateY(35°) swings right face into view. Classic 3-face PCB corner. */
    .logo:hover .cube {
      transform: rotateX(-22deg) rotateY(35deg);
      animation: none;   /* stop rocking while inspecting */
    }

    .logo:hover .face.front {
      border-color: #d97706;
      box-shadow: 0 0 10px 2px rgba(245, 158, 11, .40),
                  inset 0 0 5px rgba(245, 158, 11, .10);
      animation: none;
    }

    .logo:hover .face.front .face-screen::before {
      animation: solder-hover .55s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    @keyframes solder-hover {
      from { transform: translate(-100%, -100%); opacity: 1; }
      to   { transform: translate(120%, 120%); opacity: 0; }
    }

    /* Accessibility — no geometry motion; static warmth on hover only */
    @media (prefers-reduced-motion: reduce) {
      .cube,
      .face.front,
      .face.front .face-screen::before,
      .mini-line,
      .mini-cursor,
      .mark-dot { animation: none !important; }

      .logo:hover .cube { transform: rotateX(-5deg) rotateY(10deg); }
      .logo:hover .face.front {
        border-color: var(--amber);
        box-shadow: 0 0 6px rgba(245, 158, 11, .28);
      }
    }

    .nav-links {
      display: flex; gap: .25rem; list-style: none; margin-left: .5rem;
    }
    .nav-links a {
      color: var(--text-muted); text-decoration: none;
      font-family: var(--font-mono); font-size: .76rem;
      letter-spacing: .04em; text-transform: uppercase;
      padding: .35rem .7rem; border-radius: var(--r);
      transition: color .18s, background .18s;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--green); background: var(--green-glow); }

    /* Nav search bar — right side */
    .nav-search-wrap {
      margin-left: auto; display: flex; align-items: center; gap: .6rem;
    }
    .nav-search {
      position: relative; display: flex; align-items: center;
    }
    .nav-search input {
      background: var(--bg-surface); border: 1px solid var(--border);
      border-radius: 20px; color: var(--text); font-family: var(--font-mono);
      font-size: .76rem; padding: .38rem .9rem .38rem 2.1rem;
      width: 200px; outline: none; transition: border-color .2s, width .25s;
    }
    .nav-search input:focus { border-color: var(--green); width: 260px; }
    .nav-search input::placeholder { color: var(--text-muted); }
    .nav-search .fa-magnifying-glass {
      position: absolute; left: .7rem; color: var(--text-muted); font-size: .75rem; pointer-events: none;
    }

    .btn-term {
      background: transparent; border: 1px solid var(--green-dim);
      color: var(--green); font-family: var(--font-mono); font-size: .74rem;
      padding: .38rem .85rem; border-radius: var(--r); cursor: pointer;
      text-decoration: none; transition: background .18s;
      white-space: nowrap;
    }
    .btn-term:hover { background: var(--green-glow); }

    .theme-toggle {
      background: none; border: none; cursor: pointer; padding: 0.5rem;
      display: flex; align-items: center; justify-content: center;
      width: 2.5rem; height: 2.5rem; border-radius: var(--r);
      color: var(--text); transition: background-color 0.2s ease;
      position: relative; flex-shrink: 0;
    }
    .theme-toggle:hover { background-color: var(--bg-surface); }
    .theme-toggle:focus { outline: 2px solid var(--green); outline-offset: 2px; }
    .sun-icon { display: none; width: 1.25rem; height: 1.25rem; }
    .moon-icon { width: 1.25rem; height: 1.25rem; }
    html[data-theme="light"] .sun-icon { display: block; }
    html[data-theme="light"] .moon-icon { display: none; }
    .theme-toggle svg { transition: transform 0.3s ease; }
    .theme-toggle:active svg { transform: scale(0.9) rotate(20deg); }

    .btn-sub {
      background: var(--green); color: var(--bg);
      font-family: var(--font-mono); font-size: .74rem; font-weight: 700;
      padding: .4rem 1rem; border-radius: var(--r); text-decoration: none;
      transition: opacity .18s; white-space: nowrap;
    }
    .btn-sub:hover { opacity: .85; }

    @media (max-width: 800px) {
      .nav-inner { gap: .75rem; }
      .logo { font-size: 1rem; }
      .nav-search-wrap { display: none; }
    }