/* Self-hosted Silkscreen font for retro badges and accents */
    @font-face {
      font-family: 'Silkscreen';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('assets/silkscreen-400.woff2') format('woff2');
    }

    /* Glass & Hardware Design Tokens */
    :root {
      --bg: #000000;
      --bar-black: #000000;
      --deck-matte: #151519;
      --deck-well: #0c0c0f;
      --deep: #16161b;
      --surface: #1e1e26;
      --floor-line: #2a2a35;
      --silhouette: #343440;
      --steel: #4a4a58;
      --rim-light: #5a5a6c;
      --gray: #6b6b80;

      /* High-contrast WCAG AA text */
      --text-main: #eceef3;
      --text-muted: #b4bac8;
      --text-dim: #9aa1b2;

      --pix-white: #eceef3;
      --pix-cyan: #5ee6ff;
      --amber: #e3b341;
      --green: #7ee787;
      --coral: #ff7b72;

      --font-pixel: 'Silkscreen', monospace;
      --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
      --font-mono: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    }

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

    html {
      scroll-behavior: smooth;
      background-color: var(--bg);
      color: var(--text-main);
    }

    body {
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.6;
      background-color: var(--bg);
      color: var(--text-main);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    .pixel-font {
      font-family: var(--font-pixel);
      letter-spacing: 0; /* Silkscreen is drawn on an 8px grid: sizes in multiples of 8, no fractional spacing */
    }

    code, pre, .mono {
      font-family: var(--font-mono);
    }

    .cyan {
      color: var(--pix-cyan);
    }

    .pixelated {
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }

    a {
      color: var(--pix-cyan);
      text-decoration: none;
      transition: opacity 0.15s ease;
    }

    a:hover {
      text-decoration: underline;
    }

    :focus-visible {
      outline: 2px solid var(--pix-cyan);
      outline-offset: 4px;
    }

    .container {
      width: 100%;
      max-width: 980px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* Accessible Skip Link */
    .skip-link {
      position: absolute;
      top: -200px;
      left: 16px;
      background: var(--pix-cyan);
      color: #000000;
      font-family: var(--font-pixel);
      font-size: 13px;
      padding: 8px 16px;
      z-index: 1000;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(94, 230, 255, 0.4);
      transition: top 0.2s ease-in-out;
    }

    .skip-link:focus {
      top: 16px;
      outline: 2px solid #ffffff;
    }

    /* Top Sticky Navigation Bar */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(12, 12, 15, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--floor-line);
    }

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 56px;
      gap: 16px;
    }

    .header-logo {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: #ffffff;
    }

    .header-logo:hover {
      text-decoration: none;
    }

    .logo-text {
      font-size: 18px;
      letter-spacing: 0.05em;
      color: #ffffff;
      text-shadow: 0 0 12px rgba(94, 230, 255, 0.3);
    }

    .logo-badge {
      font-size: 10px;
      padding: 2px 6px;
      background: #1e1e26;
      border: 1px solid var(--silhouette);
      color: var(--pix-cyan);
    }

    .header-nav {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .header-nav a {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.15s ease;
    }

    .header-nav a:hover {
      color: var(--pix-cyan);
      text-decoration: none;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .btn-nav-gh {
      font-size: 12px;
      padding: 6px 12px;
      background: #181820;
      border: 1px solid var(--silhouette);
      color: var(--text-main);
      text-decoration: none;
      transition: all 0.15s ease;
    }

    .btn-nav-gh:hover {
      background: #252530;
      border-color: var(--rim-light);
      color: var(--pix-cyan);
      text-decoration: none;
    }

    .btn-nav-install {
      font-size: 12px;
      padding: 6px 14px;
      background: var(--pix-cyan);
      border: 1px solid var(--pix-cyan);
      color: #000000;
      text-decoration: none;
      font-weight: 700;
      box-shadow: 2px 2px 0 #000;
      transition: all 0.15s ease;
    }

    .btn-nav-install:hover {
      background: #ffffff;
      border-color: #ffffff;
      color: #000000;
      text-decoration: none;
      transform: translate(-1px, -1px);
      box-shadow: 3px 3px 0 #000;
    }

    .btn-nav-install:active {
      transform: translate(1px, 1px);
      box-shadow: 1px 1px 0 #000;
    }

    /* 1. Hero Section */
    .hero {
      padding: 88px 0 64px;
      text-align: center;
      position: relative;
    }

    .hero-title {
      font-family: var(--font-pixel);
      font-size: 64px;
      line-height: 1.15;
      font-weight: 400;
      margin-bottom: 22px;
      color: #ffffff;
      text-shadow: 0 0 24px rgba(94, 230, 255, 0.25);
    }

    .hero-sub {
      font-size: clamp(17px, 2.8vw, 21px);
      max-width: 660px;
      margin: 0 auto 38px;
      color: var(--text-muted);
      font-weight: 400;
    }

    /* Authentic MacBook Pro Keyboard Deck & Touch Bar Chassis */
    .macbook-deck {
      width: min(94vw, 1600px);
      margin: 0 auto 36px;
      background: var(--deck-matte);
      border: 1px solid #282832;
      border-radius: 16px 16px 8px 8px;
      padding: 14px 16px 16px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      position: relative;
    }

    .deck-touchbar-recess {
      background: var(--deck-well);
      border: 1px solid #141418;
      border-radius: 10px;
      padding: 6px;
      display: flex;
      align-items: center;
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9);
      position: relative;
    }

    .touchbar-oled-strip {
      flex: 1 1 auto;
      aspect-ratio: 2008 / 60;
      background: var(--bar-black);
      border: 1px solid #191922;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      align-items: center;
      position: relative;
      box-shadow: 0 0 16px rgba(94, 230, 255, 0.05);
    }

    .touchbar-picture {
      display: block;
      width: 100%;
      height: 100%;
    }

    .touchbar-picture img {
      width: 100%;
      height: 100%;
      display: block;
    }
    /* OLED Glass Sheen overlay */
    .touchbar-glass-sheen {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 30%, transparent 100%);
      pointer-events: none;
    }

    /* Subtle Top Keyboard Row Silhouette beneath the Bar */
    .deck-keyboard-silhouette {
      display: flex;
      gap: 6px;
      margin-top: 10px;
      opacity: 0.25;
      padding: 0 2px;
    }

    .deck-silhouette-key {
      height: 10px;
      background: #242430;
      border-radius: 3px;
      flex: 1;
    }

    /* Install Box */
    .install-box {
      max-width: 530px;
      margin: 0 auto 24px;
      background: #141419;
      border: 1px solid #282833;
      border-radius: 0;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-shadow: 4px 4px 0 #000;
    }

    .install-code {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #ffffff;
      font-size: 14px;
      overflow-x: auto;
      white-space: nowrap;
      text-align: left;
    }

    .install-prompt {
      color: var(--pix-cyan);
      user-select: none;
    }

    .btn-copy {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      padding: 8px 18px;
      background: #252530;
      border: 1px solid #363645;
      color: #eceef3;
      border-radius: 0;
      box-shadow: 2px 2px 0 #000;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.15s ease;
    }

    .btn-copy:active {
      transform: translate(2px, 2px);
      box-shadow: none;
    }

    .btn-copy:hover {
      background: #363645;
      border-color: #4a4a5c;
      color: var(--pix-cyan);
    }

    .btn-copy.copied {
      background: var(--pix-cyan);
      border-color: var(--pix-cyan);
      color: #000000;
    }

    .download-cta-group {
      margin: 0 auto 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .btn-download-dmg {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--pix-cyan);
      color: #000000;
      border: 2px solid var(--pix-cyan);
      padding: 12px 28px;
      font-size: 13px;
      text-decoration: none;
      box-shadow: 4px 4px 0 #000;
      transition: all 0.15s ease;
      font-weight: 700;
      cursor: pointer;
    }

    .btn-download-dmg:hover {
      background: #ffffff;
      border-color: #ffffff;
      color: #000000;
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 #000;
      text-decoration: none;
    }

    .btn-download-dmg:active {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0 #000;
    }

    .download-or {
      font-size: 13px;
      color: var(--text-muted);
    }

    .secondary-download {
      margin-bottom: 16px;
    }

    .secondary-download a {
      font-size: 14px;
      color: var(--text-muted);
    }

    .secondary-download a:hover {
      color: var(--pix-cyan);
    }

    .install-launch-hint {
      font-size: 13px;
      color: var(--text-dim);
      margin-top: -12px;
      margin-bottom: 20px;
      text-align: center;
      line-height: 1.5;
    }

    .install-launch-hint code {
      color: var(--pix-cyan);
      background: #111116;
      border: 1px solid #252532;
      padding: 2px 6px;
      font-size: 12px;
    }

    .install-launch-hint strong {
      color: #ffffff;
    }

    .hero-meta {
      font-size: 12px;
      color: var(--text-dim);
    }

    /* Section Structure */
    .section {
      padding: 80px 0;
      border-top: 1px solid var(--floor-line);
    }

    .section-head {
      margin-bottom: 40px;
    }

    .section-eyebrow {
      color: var(--pix-cyan);
      font-size: 16px;
      font-weight: 400;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .section-title {
      font-size: clamp(24px, 4vw, 34px);
      font-weight: 700;
      color: #ffffff;
      line-height: 1.25;
      letter-spacing: -0.01em;
    }

    .section-desc {
      color: var(--text-muted);
      margin-top: 12px;
      max-width: 680px;
      font-size: 16px;
    }

    /* 2. Timeline Grid: "It lives your day with you" */
    .timeline-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 18px;
    }

    .timeline-card {
      background: var(--deep);
      border: 1px solid var(--floor-line);
      border-radius: 0;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: border-color 0.15s ease, transform 0.15s ease;
      box-shadow: 4px 4px 0 #000;
    }

    .timeline-card:hover {
      border-color: var(--rim-light);
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 #000;
    }

    .timeline-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: var(--text-dim);
    }

    .timeline-time-badge {
      background: #111116;
      border: 1px solid #282833;
      padding: 2px 8px;
      border-radius: 0;
      color: var(--pix-cyan);
      font-size: 11px;
    }

    .timeline-preview {
      background: #000000;
      border: 1px solid var(--silhouette);
      border-radius: 0;
      overflow: hidden;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Pix drawn from the app's own art: a crop of the Room, the body sheet stepping through its frames, and the
       face on top (body sheets leave the face-screen blank). Positions are art pixels from ArtContract.swift;
       --px is one art pixel and stays whole so the art stays crisp. */
    .pix-stage {
      --px: 4px;
      position: relative;
      flex: none;
      width: calc(64 * var(--px));
      height: calc(30 * var(--px));
      background: url('assets/room-desk.png') no-repeat;
      background-size: calc(1004 * var(--px)) calc(30 * var(--px));
      background-position: calc(var(--room-x, 0) * -1 * var(--px)) 0;
      image-rendering: pixelated;
    }

    .pix-stage--bare {
      --px: 3px;
      width: calc(var(--w, 28) * var(--px));
      height: calc(27 * var(--px));
      background: none;
      border-bottom: var(--px) solid var(--floor-line);
    }

    /* Semantic room anchors */
    .pix-stage--desk { --room-x: 470; }
    .pix-stage--couch { --room-x: 160; }

    .pix, .pix-face, .pix-hat, .pix-emote {
      position: absolute;
      background-repeat: no-repeat;
      image-rendering: pixelated;
    }

    .pix {
      left: calc(var(--x, 2) * var(--px));
      top: calc(var(--y, 3) * var(--px));
      width: calc(24 * var(--px));
      height: calc(24 * var(--px));
      background-image: var(--sheet);
      background-size: auto 100%;
      animation: pix-frames-4 calc(4 / var(--fps, 4) * 1s) steps(4) infinite;
    }

    .pix--desk {
      --x: 10;
    }

    .pix--frames-6 {
      animation-name: pix-frames-6;
      animation-duration: calc(6 / var(--fps, 4) * 1s);
      animation-timing-function: steps(6);
    }

    @keyframes pix-frames-4 {
      to { background-position-x: calc(4 * -24 * var(--px)); }
    }

    @keyframes pix-frames-6 {
      to { background-position-x: calc(6 * -24 * var(--px)); }
    }

    .pix-face {
      left: calc(7 * var(--px));
      top: calc(4 * var(--px));
      width: calc(10 * var(--px));
      height: calc(7 * var(--px));
      background-image: var(--face-sheet, url('assets/pix-face.png'));
      background-size: calc(60 * var(--px)) 100%;
      background-position: calc(var(--face, 0) * -10 * var(--px)) 0;
    }

    .pix-hat {
      left: calc(4 * var(--px));
      top: calc(-3 * var(--px));
      width: calc(16 * var(--px));
      height: calc(6 * var(--px));
      background-image: url('assets/hats.png');
      background-size: calc(144 * var(--px)) 100%;
      background-position: calc(var(--hat, 0) * -16 * var(--px)) 0;
    }

    .pix-hat--cycle {
      animation: pix-hats 7.2s steps(9) infinite;
    }

    @keyframes pix-hats {
      from { background-position-x: 0; }
      to { background-position-x: calc(-144 * var(--px)); }
    }

    .pix-emote {
      left: calc(18 * var(--px));
      top: calc(-3 * var(--px));
      width: calc(8 * var(--px));
      height: calc(8 * var(--px));
      background-image: url('assets/emotes.png');
      background-size: calc(72 * var(--px)) 100%;
      background-position: calc(var(--emote) * -8 * var(--px)) 0;
      animation: pix-float 0.8s steps(1) infinite alternate;
    }

    @keyframes pix-float {
      to { transform: translateY(calc(-1 * var(--px))); }
    }

    @media (prefers-reduced-motion: reduce) {
      .pix, .pix--frames-6, .pix-hat--cycle, .pix-emote { animation: none; }
    }

    .timeline-caption {
      font-size: 14px;
      color: var(--text-main);
      font-weight: 500;
    }

    /* 3. AI Agent Status Light Section */
    .agent-card {
      background: var(--deep);
      border: 1px solid var(--floor-line);
      border-radius: 0;
      padding: 36px 32px;
      box-shadow: 4px 4px 0 #000;
    }

    /* Terminal pairing simulation */
    .agent-terminal-sim {
      background: #101014;
      border: 1px solid #252530;
      border-radius: 0;
      padding: 12px 16px;
      margin-bottom: 16px;
      text-align: left;
      font-size: 13px;
    }

    .agent-terminal-cmd {
      color: var(--green);
    }

    .agent-terminal-sim-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      border-bottom: 1px solid #1f1f28;
      padding-bottom: 6px;
      font-size: 11px;
      color: var(--text-dim);
    }

    .agent-terminal-sim-dots {
      display: flex;
      gap: 5px;
    }

    .agent-terminal-sim-dots span {
      width: 7px;
      height: 7px;
      border-radius: 0;
      background: #333340;
    }

    .agent-touchbar-preview {
      background: #000000;
      border: 1px solid #202028;
      border-radius: 0;
      overflow: hidden;
      margin-bottom: 24px;
      padding: 4px;
      box-shadow: 0 0 20px rgba(94, 230, 255, 0.08);
    }

    .agent-touchbar-preview .touchbar-picture {
      aspect-ratio: 2008 / 60;
      display: block;
      width: 100%;
    }

    .agent-touchbar-preview img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }

    .agent-copy {
      font-size: 18px;
      line-height: 1.6;
      color: var(--text-main);
      margin-bottom: 24px;
    }

    .agent-status-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 0;
      font-size: 13px;
      font-weight: 700;
      font-family: var(--font-mono);
      margin: 0 2px;
    }

    .badge-asking {
      background: rgba(227, 179, 65, 0.15);
      border: 1px solid var(--amber);
      color: var(--amber);
    }

    .badge-done {
      background: rgba(126, 231, 135, 0.15);
      border: 1px solid var(--green);
      color: var(--green);
    }

    .badge-oops {
      background: rgba(255, 123, 114, 0.15);
      border: 1px solid var(--coral);
      color: var(--coral);
    }

    /* Agent Hook Setup Showcase */
    .agent-configs {
      margin: 28px 0;
      background: #0d0d11;
      border: 1px solid var(--floor-line);
      box-shadow: 4px 4px 0 #000;
      text-align: left;
    }

    .agent-configs-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--floor-line);
      background: #14141a;
      padding: 8px 16px;
      gap: 12px;
      flex-wrap: wrap;
    }

    .agent-configs-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-dim);
    }

    .agent-tab-list {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .agent-tab {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-dim);
      font-family: var(--font-mono);
      font-size: 12px;
      padding: 5px 12px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .agent-tab:hover {
      color: var(--text-main);
      background: #1a1a24;
    }

    .agent-tab.active {
      background: #20202c;
      border-color: #383848;
      color: var(--pix-cyan);
      box-shadow: 2px 2px 0 #000;
    }

    .agent-panel {
      padding: 16px;
    }

    .agent-panel[hidden] {
      display: none;
    }

    .agent-panel-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      font-size: 12px;
      color: var(--text-dim);
      gap: 12px;
      flex-wrap: wrap;
    }

    .agent-panel-meta code {
      color: var(--text-main);
      background: #1a1a22;
      padding: 2px 6px;
      border: 1px solid #2b2b38;
    }

    .btn-copy-sm {
      font-size: 11px;
      padding: 5px 12px;
    }

    .agent-code-block {
      background: #08080a;
      border: 1px solid #1a1a22;
      padding: 14px 16px;
      font-size: 12px;
      line-height: 1.5;
      color: #c9d1d9;
      overflow-x: auto;
      max-height: 320px;
    }

    .agent-code-block code {
      font-family: var(--font-mono);
      color: inherit;
      display: block;
      white-space: pre;
    }

    .agent-link-row a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 500;
    }

    /* 4. A friend, not a widget */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }

    .feature-card {
      background: var(--deep);
      border: 1px solid var(--floor-line);
      border-radius: 0;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 4px 4px 0 #000;
    }

    .feature-title {
      font-size: 15px;
      font-weight: 600;
      color: #ffffff;
      line-height: 1.4;
    }

    .feature-text {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* 5. Light as a feather */
    .feather-box {
      background: var(--deep);
      border: 1px solid var(--floor-line);
      border-radius: 0;
      padding: 32px;
      box-shadow: 4px 4px 0 #000;
    }

    .stats-table-wrapper {
      overflow-x: auto;
      margin: 24px 0 20px;
    }

    .stats-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      font-size: 14px;
    }

    .stats-table th {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 700;
      color: var(--text-dim);
      padding: 10px 14px;
      border-bottom: 1px solid var(--silhouette);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .stats-table td {
      padding: 12px 14px;
      border-bottom: 1px solid var(--floor-line);
      color: var(--text-muted);
    }

    .stats-table tr:hover td {
      background: rgba(255, 255, 255, 0.02);
      color: var(--text-main);
    }

    .stats-table td strong {
      color: var(--pix-cyan);
    }

    .feather-note {
      font-size: 14px;
      color: var(--text-dim);
      margin-top: 12px;
    }

    /* 6. Privacy */
    .privacy-card {
      background: var(--deep);
      border: 1px solid var(--floor-line);
      border-radius: 0;
      padding: 28px 32px;
      font-size: 16px;
      line-height: 1.7;
      color: var(--text-muted);
      box-shadow: 4px 4px 0 #000;
    }

    .privacy-card p + p {
      margin-top: 16px;
    }

    .privacy-card strong {
      color: #ffffff;
    }

    /* 7. Install, again */
    .install-repeat {
      background: var(--deep);
      border: 1px solid var(--floor-line);
      border-radius: 0;
      padding: 44px 32px;
      text-align: center;
      box-shadow: 4px 4px 0 #000;
    }

    .install-repeat .install-box {
      margin: 28px auto 16px;
    }

    .req-list {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    /* Hardware Compatibility Drawer */
    .compat-details {
      max-width: 620px;
      margin: 0 auto 20px;
      text-align: center;
      font-size: 13px;
    }

    .compat-summary {
      cursor: pointer;
      color: var(--pix-cyan);
      user-select: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px 14px;
      background: rgba(94, 230, 255, 0.05);
      border: 1px solid rgba(94, 230, 255, 0.2);
      font-size: 12px;
      transition: all 0.15s ease;
      box-shadow: 2px 2px 0 #000;
    }

    .compat-summary:hover {
      background: rgba(94, 230, 255, 0.12);
      border-color: var(--pix-cyan);
    }

    .compat-summary::-webkit-details-marker {
      display: none;
    }

    .compat-summary {
      list-style: none;
    }

    .compat-content {
      margin-top: 14px;
      text-align: left;
      background: #0f0f13;
      border: 1px solid var(--floor-line);
      padding: 16px;
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
    }

    .compat-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }

    .compat-table td {
      padding: 8px 10px;
      border-bottom: 1px solid #1c1c24;
      color: var(--text-muted);
    }

    .compat-table tr:last-child td {
      border-bottom: none;
    }

    .compat-table td:first-child {
      color: #ffffff;
      font-weight: 500;
    }

    .compat-tag {
      display: inline-block;
      font-size: 10px;
      padding: 2px 6px;
      background: rgba(126, 231, 135, 0.1);
      border: 1px solid rgba(126, 231, 135, 0.3);
      color: var(--green);
    }

    .gatekeeper-note {
      font-size: 13px;
      color: var(--text-dim);
      max-width: 620px;
      margin: 0 auto;
      line-height: 1.5;
    }

    /* 8. Footer */
    .footer {
      padding: 48px 0 60px;
      border-top: 1px solid var(--floor-line);
      font-size: 13px;
      color: var(--text-dim);
    }

    .footer-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .footer-links a {
      color: var(--text-muted);
      font-size: 13px;
    }

    .footer-links a:hover {
      color: var(--pix-cyan);
    }

    .footer-author {
      color: var(--text-dim);
    }

    @media (max-width: 768px) {
      .header-nav {
        display: none;
      }
      .header-content {
        height: 50px;
      }
      .btn-nav-gh {
        display: none;
      }
      .agent-configs-header {
        flex-direction: column;
        align-items: stretch;
      }
      .agent-tab-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 4px;
      }
      .agent-tab {
        text-align: center;
        padding: 6px 4px;
      }
      .hero-title {
        font-size: 48px;
      }
      .touchbar-oled-strip,
      .agent-touchbar-preview .touchbar-picture {
        aspect-ratio: 400 / 60;
      }
      .hero {
        padding: 56px 0 40px;
      }
      .macbook-deck {
        padding: 10px 10px 12px;
      }
      .deck-keyboard-silhouette {
        display: none;
      }
      .install-box {
        flex-direction: column;
        align-items: stretch;
      }
      .install-code {
        justify-content: center;
      }
      .btn-copy {
        width: 100%;
        text-align: center;
      }
      .agent-card {
        padding: 20px;
      }
      .feather-box {
        padding: 20px;
      }
      .privacy-card {
        padding: 20px;
      }
      .install-repeat {
        padding: 28px 16px;
      }
    }

    @media (max-width: 480px) {
      .hero-title {
        font-size: 32px;
      }
      .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }
      .footer-links {
        flex-direction: column;
        gap: 10px;
      }
    }

    /* 404 Not Found Page */
    .not-found-main {
      min-height: 80vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 60px 24px;
    }

    .not-found-card {
      background: var(--deep);
      border: 1px solid var(--floor-line);
      padding: 48px 36px;
      max-width: 540px;
      width: 100%;
      box-shadow: 6px 6px 0 #000;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .not-found-code {
      font-size: 72px;
      color: var(--pix-cyan);
      line-height: 1;
      text-shadow: 0 0 24px rgba(94, 230, 255, 0.25);
    }

    .not-found-title {
      font-size: 22px;
      font-weight: 700;
      color: #ffffff;
    }

    .not-found-desc {
      color: var(--text-muted);
      font-size: 15px;
      line-height: 1.6;
    }

    .btn-home {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #252530;
      border: 1px solid #363645;
      color: #eceef3;
      padding: 10px 22px;
      font-size: 14px;
      font-weight: 500;
      box-shadow: 3px 3px 0 #000;
      transition: all 0.15s ease;
      text-decoration: none;
      margin-top: 10px;
    }

    .btn-home:hover {
      background: #363645;
      color: var(--pix-cyan);
      border-color: #4a4a5c;
      text-decoration: none;
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0 #000;
    }

    .btn-home:active {
      transform: translate(2px, 2px);
      box-shadow: none;
    }

    .ph-badge {
      display: inline-block;
      margin-top: 20px;
    }