/* Deferred home CSS — loaded after first paint */
    @media (prefers-reduced-motion: reduce) {
      .scroll-indicator,
      header .status-indicator {
        animation: none;
      }
    }

    /* Idea Section */
    #idea {
      min-height: auto;
      justify-content: flex-start;
      padding: clamp(48px, 8vh, 72px) clamp(16px, 5vw, 10%);
      position: relative;
      background: var(--idea-bg);
    }

    .idea-shell {
      width: 100%;
      max-width: min(980px, 100%);
      border: 2px solid var(--clr-fg);
      background: var(--clr-bg);
      box-shadow: 8px 8px 0 color-mix(in srgb, var(--clr-fg) 18%, transparent);
    }

    .idea-chrome {
      --idea-chrome-top: max(58px, calc(env(safe-area-inset-top) + 50px));
      position: fixed;
      top: var(--idea-chrome-top);
      left: 50%;
      z-index: 90;
      width: min(980px, calc(100vw - 32px));
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      padding: 18px 22px;
      border: 2px solid var(--clr-fg);
      background: var(--clr-bg);
      box-shadow: 8px 8px 0 color-mix(in srgb, var(--clr-fg) 18%, transparent);
      font-family: var(--font-mono);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(-50%) translateY(-10px);
      transition:
        opacity 220ms ease,
        visibility 220ms ease,
        transform 220ms ease;
    }

    .idea-chrome.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .idea-chrome-left {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
      flex: 1 1 200px;
    }

    .idea-chrome-title {
      margin: 0;
      font-size: clamp(1.25rem, 3.4vw, 1.65rem);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .idea-chrome-cta {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      min-height: 46px;
      padding: 10px 18px;
      border: 1px solid var(--clr-fg);
      color: var(--clr-fg);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background var(--transition-core), color var(--transition-core);
    }

    .idea-chrome-cta:hover {
      background: var(--clr-fg);
      color: var(--clr-bg);
    }

    .idea-chrome-cta[hidden] {
      display: none;
    }

    .content-box {
      width: 100%;
      position: relative;
      display: block;
      overflow: hidden;
    }

    @media (max-width: 860px) {
      .idea-shell {
        box-shadow: 5px 5px 0 color-mix(in srgb, var(--clr-fg) 18%, transparent);
      }

      .idea-chrome-title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    .idea-view-wrap {
      position: relative;
      min-width: 0;
      min-height: 0;
      touch-action: none;
    }

    @media (max-width: 860px) {
      html.mobile-scroll-snap .idea-view {
        min-height: 0;
        max-height: none;
      }
    }

    .idea-view-wrap::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 36px;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent, var(--clr-bg));
    }

    .idea-cta-wrap {
      display: flex;
      justify-content: center;
      margin-top: 28px;
      width: 100%;
    }
    .idea-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 46px;
      padding: 12px 22px;
      border: 2px solid var(--clr-fg);
      background: transparent;
      color: var(--clr-fg);
      font-family: var(--font-mono);
      font-size: 13px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background var(--transition-core), color var(--transition-core);
    }
    .idea-cta:hover {
      background: var(--clr-fg);
      color: var(--clr-bg);
    }
    #idea-scroll-guard {
      position: fixed;
      inset: 0;
      z-index: 95;
      display: flex;
      align-items: center;
      justify-content: center;
      background: color-mix(in srgb, var(--clr-bg) 88%, transparent);
      font-family: var(--font-mono);
      padding: 20px;
    }
    #idea-scroll-guard[hidden] {
      display: none;
    }
    .idea-scroll-guard__dialog {
      background: var(--clr-bg);
      border: 2px solid var(--clr-fg);
      box-shadow: 8px 8px 0 color-mix(in srgb, var(--clr-fg) 18%, transparent);
      padding: 28px 32px;
      max-width: 480px;
      width: 100%;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 18px;
      align-items: center;
    }
    .idea-scroll-guard__heading {
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin: 0;
      color: var(--clr-fg);
    }
    .idea-scroll-guard__body {
      font-size: 13px;
      opacity: 0.8;
      margin: 0;
      color: var(--clr-fg);
    }
    .idea-scroll-guard__actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .idea-scroll-guard__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 10px 18px;
      border: 1px solid var(--clr-fg);
      background: var(--clr-accent);
      color: #faf6f0;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      transition: background var(--transition-core), color var(--transition-core);
    }
    .idea-scroll-guard__btn:hover {
      filter: brightness(1.1);
    }
    .idea-scroll-guard__btn--secondary {
      background: transparent;
      color: var(--clr-fg);
    }
    .idea-scroll-guard__btn--secondary:hover {
      background: var(--clr-fg);
      color: var(--clr-bg);
    }
    @media (prefers-reduced-motion: reduce) {
      #idea-scroll-guard,
      .idea-scroll-guard__dialog,
      .idea-cta,
      .idea-scroll-guard__btn {
        transition: none;
        animation: none;
      }
    }

    /* Dynamic Idea Display Container (typography: src/doc-content.css + src/home-themes.css) */
    .idea-view .theme-h1:first-of-type {
      display: none;
    }

    .idea-view .theme-h2:first-of-type {
      margin-top: 0;
    }

    .idea-view {
      padding: 28px 32px 32px;
      min-height: min(540px, 62vh);
      max-height: min(760px, 78vh);
      position: relative;
      overflow-x: auto;
      overflow-y: auto;
      word-wrap: break-word;
      overflow-wrap: anywhere;
      transition: color var(--transition-core), background-color var(--transition-core);
      min-width: 0;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }

    .idea-view::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    .idea-view::-webkit-scrollbar-thumb {
      background: var(--clr-border-subtle);
      border-radius: 3px;
    }

    @media (max-width: 480px) {
      .idea-view {
        min-height: min(440px, 56vh);
        max-height: min(620px, 72vh);
        padding: 22px 20px 24px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .idea-chrome {
        transition: none;
      }
    }

    /* Art Section */
    #art {
      width: 100%;
      background: var(--art-bg);
    }
    .art-frame-wrapper {
      width: 100%;
      max-width: min(900px, 100%);
      border: 2px solid var(--clr-fg);
      background: var(--clr-bg);
      position: relative;
      overflow: hidden;
    }
    .art-header-bar {
      border-bottom: 2px solid var(--clr-fg);
      padding: 12px 24px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-transform: uppercase;
    }
    .art-status-ping {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .art-ping-dot {
      width: 6px;
      height: 6px;
      background: var(--clr-fg);
      border-radius: 50%;
      animation: blink 1s infinite alternate;
    }

    /* Art iframe viewport size setup */
    .art-canvas-container {
      width: 100%;
      aspect-ratio: 16 / 10;
      min-height: clamp(220px, 52vw, 280px);
      max-height: 500px;
      height: auto;
      background: var(--clr-bg);
      position: relative;
    }
    .art-iframe {
      width: 100%;
      height: 100%;
      border: none;
      background: transparent;
      display: block;
    }

    .art-footer-bar {
      border-top: 2px solid var(--clr-fg);
      padding: 12px clamp(16px, 4vw, 24px);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    /* Gateway Sections — Documents */
    #library {
      width: 100%;
      overflow-x: clip;
      padding: clamp(48px, 10vh, 80px) clamp(16px, 5vw, 10%);
      padding-bottom: clamp(72px, 12vh, 104px);
    }

    #library {
      background:
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--clr-fg) 5%, transparent), transparent 38%),
        var(--clr-bg);
    }

    .gateway-panel {
      --tilt-x: 0deg;
      --tilt-y: 0deg;
      --glow-x: 50%;
      --glow-y: 50%;
      width: 100%;
      max-width: min(980px, 100%);
      margin-inline: auto;
      position: relative;
      border: 2px solid var(--clr-fg);
      background: var(--clr-bg);
      box-shadow: 14px 14px 0 var(--clr-fg);
      transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
      transform-origin: center center;
      transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms ease;
      isolation: isolate;
    }

    @media (pointer: fine) and (min-width: 861px) {
      .gateway-panel:hover {
        box-shadow: 18px 18px 0 var(--clr-fg);
      }
    }

    .gateway-panel::before {
      content: attr(data-index);
      position: absolute;
      top: 50%;
      right: clamp(16px, 4vw, 36px);
      transform: translateY(-34%);
      font-family: var(--font-mono);
      font-size: clamp(3.5rem, 11vw, 8.5rem);
      line-height: 0.82;
      letter-spacing: -0.06em;
      opacity: 0.05;
      pointer-events: none;
      z-index: 0;
      max-width: 42%;
      overflow: hidden;
      text-align: right;
      white-space: nowrap;
    }

    .gateway-head {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 14px 22px;
      border-bottom: 2px solid var(--clr-fg);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      background: var(--clr-bg);
    }

    .gateway-head-title {
      display: flex;
      align-items: center;
    gap: 8px;
      min-width: 0;
    }

    .gateway-head-title span,
    .gateway-head-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .gateway-head-title::before {
      content: '';
      flex: 0 0 28px;
      width: 28px;
      height: 2px;
      background: var(--clr-fg);
    }

    .gateway-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
      border: 1px solid var(--clr-border-subtle);
      padding: 6px 10px;
      white-space: nowrap;
    }

    .gateway-status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--clr-fg);
      animation: blink 1s infinite alternate;
    }

    .gateway-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      align-items: stretch;
    }

    .gateway-grid--reverse {
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    }

    @media (max-width: 860px) {
      .gateway-grid,
      .gateway-grid--reverse {
        grid-template-columns: 1fr;
      }

      .gateway-grid .gateway-visual,
      .gateway-grid--reverse .gateway-visual {
        order: -1;
      }
    }

    .gateway-visual {
      position: relative;
      overflow: hidden;
      border-right: 2px solid var(--clr-fg);
      background:
        radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(127, 127, 127, 0.16), transparent 42%),
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 11px,
          var(--clr-border-subtle) 11px,
          var(--clr-border-subtle) 12px
        ),
        repeating-linear-gradient(
          90deg,
          transparent,
          transparent 11px,
          var(--clr-border-subtle) 11px,
          var(--clr-border-subtle) 12px
        );
      min-height: clamp(260px, 42vw, 360px);
      display: grid;
      place-items: center;
      padding: clamp(16px, 3vw, 28px);
    }

    .gateway-grid--reverse .gateway-visual {
      border-right: none;
      border-left: 2px solid var(--clr-fg);
    }

    @media (max-width: 860px) {
      .gateway-visual {
        border-right: none;
        border-bottom: 2px solid var(--clr-fg);
        min-height: clamp(240px, 58vw, 320px);
      }

      .gateway-grid--reverse .gateway-visual {
        border-left: none;
      }
    }

    .gateway-visual::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 0%, transparent 46%, rgba(255, 255, 255, 0.08) 50%, transparent 54%, transparent 100%);
      background-size: 100% 220%;
      animation: scan-sweep 5.5s linear infinite;
      pointer-events: none;
      mix-blend-mode: soft-light;
      opacity: 0.28;
    }

    [data-theme="light"] .gateway-visual::after {
      mix-blend-mode: multiply;
      opacity: 0.16;
    }

    @keyframes scan-sweep {
      0% { background-position: 0 -120%; }
      100% { background-position: 0 220%; }
    }

    .gateway-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(28px, 5vw, 52px);
      gap: 18px;
      min-width: 0;
      background: var(--clr-bg);
    }

    .gateway-tag {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      opacity: 0.72;
    }

    .gateway-title {
      font-family: var(--font-mono);
      font-size: clamp(1.55rem, 3.8vw, 2.65rem);
      line-height: 1.02;
      letter-spacing: -0.03em;
      text-transform: uppercase;
    }

    .gateway-title span {
      display: block;
    }

    .gateway-title span:last-child {
      margin-top: 0.08em;
      padding-left: clamp(18px, 4vw, 42px);
      opacity: 0.72;
    }

    .gateway-links {
      margin-top: 16px;
      font-size: 13px;
      opacity: 0.75;
    }

    .gateway-links a {
      color: inherit;
    }

    .gateway-lead {
      max-width: 36ch;
      font-size: 15px;
      line-height: 1.75;
      opacity: 0.86;
    }

    .gateway-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 4px;
    }

    .gateway-metric {
      border: 1px solid var(--clr-border-subtle);
      padding: 8px 10px;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .gateway-metric strong {
      display: block;
      font-size: 15px;
      letter-spacing: 0.04em;
      margin-bottom: 2px;
    }

    .gateway-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      align-self: flex-start;
      margin-top: 8px;
      min-height: 48px;
      padding: 12px 18px;
      border: 2px solid var(--clr-fg);
      background: var(--clr-fg);
      color: var(--clr-bg);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-decoration: none;
      text-transform: uppercase;
      transition: transform 220ms ease, background 220ms ease, color 220ms ease, box-shadow 220ms ease;
      box-shadow: 6px 6px 0 rgba(127, 127, 127, 0.35);
    }

    @media (pointer: fine) {
      .gateway-cta:hover {
        transform: translate(-3px, -3px);
        box-shadow: 9px 9px 0 var(--clr-fg);
        background: var(--clr-bg);
        color: var(--clr-fg);
      }

      .gateway-cta:hover .gateway-cta-arrow {
        transform: translateX(5px);
      }

      .gateway-panel--library:hover .doc-sheet--hacker {
        transform: translate(calc(-50% - 58px), calc(-50% - 48px)) rotate(-14deg);
      }

      .gateway-panel--library:hover .doc-sheet--editorial {
        transform: translate(calc(-50% + 18px), calc(-50% - 12px)) rotate(8deg);
      }

      .gateway-panel--library:hover .doc-sheet--notebook {
        transform: translate(calc(-50% - 20px), calc(-50% + 46px)) rotate(1deg);
      }
    }

    .gateway-cta-arrow {
      display: inline-block;
      transition: transform 220ms ease;
    }

    .gateway-foot {
      position: relative;
      z-index: 2;
      border-top: 2px solid var(--clr-fg);
      overflow: hidden;
      background: var(--clr-bg);
      mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    }

    .gateway-marquee {
      display: flex;
      width: max-content;
      animation: gateway-marquee 22s linear infinite;
    }

    .gateway-marquee-track {
      display: flex;
      gap: 28px;
      padding: 12px 24px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .gateway-marquee-track span {
      opacity: 0.72;
    }

    .gateway-marquee-track span::before {
      content: '///';
      margin-right: 12px;
      opacity: 0.45;
    }

    @keyframes gateway-marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .gateway-reveal {
      opacity: 0;
      transform: translateY(28px);
      transition:
        opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .gateway-panel.is-visible .gateway-copy .gateway-reveal {
      opacity: 1;
      transform: none;
    }

    .gateway-panel.is-visible .gateway-copy .gateway-reveal:nth-child(1) { transition-delay: 0ms; }
    .gateway-panel.is-visible .gateway-copy .gateway-reveal:nth-child(2) { transition-delay: 80ms; }
    .gateway-panel.is-visible .gateway-copy .gateway-reveal:nth-child(3) { transition-delay: 160ms; }
    .gateway-panel.is-visible .gateway-copy .gateway-reveal:nth-child(4) { transition-delay: 240ms; }
    .gateway-panel.is-visible .gateway-copy .gateway-reveal:nth-child(5) { transition-delay: 320ms; }
    .gateway-panel.is-visible .gateway-copy .gateway-reveal:nth-child(6) { transition-delay: 400ms; }
    .gateway-panel.is-visible .gateway-copy .gateway-reveal:nth-child(7) { transition-delay: 480ms; }

    /* Section personalities */
    .gateway-panel--library {
      box-shadow: 12px 12px 0 var(--clr-fg), -4px -4px 0 color-mix(in srgb, var(--clr-fg) 35%, transparent);
    }

    @media (pointer: fine) and (min-width: 861px) {
      .gateway-panel--library:hover {
        box-shadow: 16px 16px 0 var(--clr-fg), -6px -6px 0 color-mix(in srgb, var(--clr-fg) 35%, transparent);
      }
    }

    .gateway-panel--library .gateway-head {
      border-bottom-style: dashed;
    }

    .gateway-panel--library .gateway-title span:first-child {
      font-family: var(--font-serif);
      text-transform: none;
      letter-spacing: -0.01em;
    }

    .gateway-panel--library .gateway-title span:last-child {
      font-family: var(--font-sketch);
      text-transform: none;
      font-size: 1.12em;
      padding-left: clamp(24px, 5vw, 48px);
      opacity: 0.88;
      line-height: 0.9;
    }

    .gateway-panel--library .gateway-visual {
      background:
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 15px,
          var(--notebook-line) 15px,
          var(--notebook-line) 16px
        ),
        var(--clr-bg);
    }

    .gateway-epigraph {
      margin-top: -6px;
      max-width: 32ch;
      font-family: var(--font-sketch);
      font-size: clamp(1.15rem, 2.8vw, 1.45rem);
      line-height: 1.2;
      opacity: 0.78;
      transform: rotate(-1.5deg);
    }

    /* Documents visual */
    .doc-stage {
      position: relative;
      width: min(100%, 340px);
      height: min(100%, 300px);
      min-height: clamp(220px, 52vw, 280px);
      margin: 0 auto;
      border: 2px dashed var(--clr-border-subtle);
      padding: 18px 14px 14px;
    }

    .doc-stamp {
      position: absolute;
      top: 8px;
      right: 6px;
      z-index: 5;
      padding: 6px 10px;
      border: 2px solid var(--clr-fg);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      transform: rotate(12deg);
      opacity: 0.72;
      background: var(--clr-bg);
    }

    .doc-drawer-tabs {
      position: absolute;
      left: 0;
      top: 28px;
      bottom: 18px;
      width: 22px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      z-index: 0;
    }

    .doc-drawer-tabs span {
      flex: 1;
      border: 1px solid var(--clr-border-subtle);
      border-left: 2px solid var(--clr-fg);
      background: color-mix(in srgb, var(--clr-bg) 90%, var(--clr-fg));
      font-family: var(--font-mono);
      font-size: 7px;
      letter-spacing: 0.08em;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      display: grid;
      place-items: center;
      opacity: 0.55;
    }

    .doc-sheet {
      position: absolute;
      top: 50%;
      left: 54%;
      width: min(54%, 178px);
      aspect-ratio: 0.76;
      border: 2px solid var(--clr-fg);
      background: var(--clr-bg);
      padding: 12px 10px;
      box-shadow: 6px 6px 0 color-mix(in srgb, var(--clr-fg) 22%, transparent);
      transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .doc-sheet-label {
      display: inline-block;
      margin-bottom: 12px;
      padding: 4px 8px;
      border: 1px solid var(--clr-fg);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .doc-lines span {
      display: block;
      height: 4px;
      margin-bottom: 8px;
      background: var(--clr-border-subtle);
    }

    .doc-lines span:nth-child(1) { width: 88%; }
    .doc-lines span:nth-child(2) { width: 72%; }
    .doc-lines span:nth-child(3) { width: 92%; }
    .doc-lines span:nth-child(4) { width: 54%; margin-bottom: 0; }

    .doc-sheet--hacker {
      transform: translate(calc(-50% - 48px), calc(-50% - 40px)) rotate(-11deg);
      z-index: 1;
    }

    .doc-sheet--hacker .doc-sheet-label {
      font-family: var(--font-pixel);
      font-size: 10px;
    }

    .doc-sheet--editorial {
      transform: translate(calc(-50% + 10px), calc(-50% - 6px)) rotate(6deg);
      z-index: 2;
      background:
        linear-gradient(var(--clr-border-subtle) 1px, transparent 1px) 0 38px / 100% 16px,
        var(--clr-bg);
    }

    .doc-sheet--editorial .doc-sheet-label {
      font-family: var(--font-serif);
      font-style: italic;
      text-transform: none;
      letter-spacing: 0.02em;
    }

    .doc-sheet--notebook {
      transform: translate(calc(-50% - 16px), calc(-50% + 38px)) rotate(-2deg);
      z-index: 3;
      background:
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 14px,
          var(--notebook-line) 14px,
          var(--notebook-line) 15px
        ),
        var(--clr-bg);
    }

    .doc-sheet--notebook .doc-sheet-label {
      font-family: var(--font-sketch);
      font-size: 14px;
      letter-spacing: 0;
      text-transform: none;
      border-style: dashed;
    }

    .doc-index {
      position: absolute;
      top: 0;
      left: 28px;
      right: auto;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      opacity: 0.65;
      z-index: 4;
    }

    @media (max-width: 640px) {
      .gateway-head {
        flex-direction: column;
        align-items: flex-start;
      }

      .gateway-head-title,
      .gateway-head-title span {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
      }

      .gateway-status {
        align-self: stretch;
        justify-content: center;
      }

      .gateway-title span:last-child {
        padding-left: 12px;
      }

      .gateway-cta {
        align-self: stretch;
      }

      .gateway-panel::before {
        font-size: clamp(3rem, 18vw, 4.5rem);
        top: auto;
        bottom: 14%;
        right: 8%;
        transform: none;
        max-width: 55%;
      }

      .doc-sheet {
        width: min(58%, 150px);
      }

      .doc-drawer-tabs {
        display: none;
      }

      .doc-index {
        left: 0;
      }

      .doc-sheet--hacker {
        transform: translate(calc(-50% - 24px), calc(-50% - 24px)) rotate(-10deg);
      }

      .doc-sheet--editorial {
        transform: translate(calc(-50% + 4px), calc(-50% - 2px)) rotate(6deg);
      }

      .doc-sheet--notebook {
        transform: translate(calc(-50% - 6px), calc(-50% + 22px)) rotate(-2deg);
      }
    }

    @media (max-width: 860px) {
      .gateway-panel {
        transform: none;
        box-shadow: 8px 8px 0 var(--clr-fg);
        margin-inline: auto;
        width: 100%;
      }
    }

    @media (max-width: 480px) {
      .gateway-panel {
        box-shadow: 5px 5px 0 var(--clr-fg);
        margin-bottom: 5px;
        margin-right: 5px;
      }

      .gateway-head {
        padding: 12px 16px;
        font-size: 10px;
      }

      .gateway-copy {
        padding: 20px 16px;
        gap: 14px;
      }

      .gateway-lead {
        font-size: 14px;
        max-width: none;
      }

      .gateway-metric {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
      }

      .gateway-metric strong {
        font-size: 13px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .gateway-panel,
      .gateway-cta,
      .doc-sheet,
      .gateway-marquee,
      .gateway-visual::after {
        animation: none;
        transition: none;
      }

      .gateway-panel {
        transform: none;
      }

      .gateway-reveal {
        opacity: 1;
        transform: none;
      }
    }

    /* ============ PORTAL & WORLD ============ */
    #portal {
      min-height: clamp(120vh, 160vh, 180vh);
      padding: clamp(48px, 8vh, 80px) clamp(16px, 5vw, 10%) 0;
      background: rgba(var(--portal-bg-rgb), 0.85);
    }

    @media (max-width: 860px) {
      html.mobile-scroll-snap #idea,
      html.mobile-scroll-snap #art,
      html.mobile-scroll-snap #library {
        padding: var(--snap-pad-y) var(--snap-pad-x) var(--snap-pad-bottom);
        min-height: auto;
        height: auto;
        max-height: none;
        justify-content: center;
      }

      html.mobile-scroll-snap #idea {
        padding-top: max(56px, calc(env(safe-area-inset-top, 0px) + 48px));
      }

      html.mobile-scroll-snap .idea-view {
        min-height: 0;
        max-height: none;
      }

      html.mobile-scroll-snap #library .gateway-panel {
        margin-bottom: 0;
        box-shadow: 8px 8px 0 var(--clr-fg);
      }

      html.mobile-scroll-snap #library .gateway-visual {
        min-height: 0;
      }

      html.mobile-scroll-snap #services-teaser {
        min-height: 100dvh;
        height: 100dvh;
        max-height: 100dvh;
        padding: 0;
      }

      html.mobile-scroll-snap #portal {
        min-height: 130dvh;
        height: auto;
        max-height: none;
        padding: var(--snap-pad-y) var(--snap-pad-x) var(--snap-pad-bottom);
      }
    }
    .portal-direct-entry {
      margin: 0;
      padding-top: clamp(24px, 6vh, 48px);
      text-align: center;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .portal-direct-link {
      color: var(--clr-fg);
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    /* World overlay container — fills viewport, sits above #canvas-container.
       Pointer events stay disabled until the engine takes over. */
    #world-container {
      position: fixed;
      inset: 0;
      z-index: 50;
      pointer-events: none;
      overflow: hidden;
    }
    #world-container.world-container--interactive { pointer-events: auto; }

    #world-loading {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--clr-bg);
      pointer-events: auto;
    }
    #world-loading[hidden] { display: none !important; }
    .world-loading-panel {
      width: min(420px, 90vw);
      padding: clamp(16px, 4vw, 28px);
      text-align: center;
      font-family: var(--font-mono);
      color: var(--clr-fg);
    }
    .world-loading-tag {
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      opacity: 0.7;
      margin-bottom: 16px;
    }
    .world-loading-title {
      margin: 0 0 22px;
      font-weight: inherit;
      font-size: clamp(1rem, 4vw, 1.35rem);
      line-height: 1.2;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border: 2px solid var(--clr-fg);
      padding: clamp(14px, 3vw, 20px);
      background: var(--clr-bg);
    }
    .world-loading-bar {
      height: 4px;
      border: 1px solid var(--clr-fg);
      overflow: hidden;
      background: transparent;
    }
    .world-loading-bar-fill {
      display: block;
      height: 100%;
      width: 100%;
      transform: scaleX(var(--world-load-pct, 0));
      transform-origin: left center;
      background: var(--clr-fg);
      transition: transform 0.28s ease;
    }
    .world-loading-hint {
      margin: 18px 0 0;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      opacity: 0.75;
    }
    html.settings-reduce-motion .world-loading-bar-fill {
      transition: none;
    }

    /* HUD shown only when world is active */
    #world-hud {
      position: fixed;
      inset: 0;
      z-index: 60;
      pointer-events: none;
      display: none;
      font-family: var(--font-mono);
      color: var(--clr-fg);
    }
    html.world-active #world-hud { display: block; }
    html.world-active #canvas-container { opacity: 0; transition: opacity 280ms ease; }
    html.world-active .progress-bar,
    html.world-active .site-header,
    html.world-active .site-header__drawer,
    html.world-active .site-header__drawer-backdrop,
    html.world-active .privacy-toggle-btn,
    html.world-active .privacy-panel {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    html.world-active, html.world-active body { overflow: hidden; }
    html.world-active main { pointer-events: none; }

    .world-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; touch-action: none; transition: opacity 280ms ease; }
    .world-canvas--visible { opacity: 1; }
    .world-canvas--interactive { pointer-events: auto; }
    .world-canvas--crosshair { cursor: crosshair; }
    .world-visual-scrim { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #000; z-index: 2; }
    .settings-panel__header-row { display: flex; align-items: center; justify-content: space-between; }

    .hud-crosshair {
      position: absolute;
      top: 50%; left: 50%;
      width: 14px; height: 14px;
      margin: -7px 0 0 -7px;
      border: 1px solid var(--clr-fg);
      opacity: 0.55;
      transform: rotate(45deg);
    }
    .hud-corner {
      position: absolute;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      opacity: 0.85;
    }
    .hud-top-left {
      top: max(16px, env(safe-area-inset-top));
      left: max(16px, env(safe-area-inset-left));
      max-width: calc(50vw - 24px);
    }
    .hud-top-right {
      top: max(16px, env(safe-area-inset-top));
      right: max(16px, env(safe-area-inset-right));
      pointer-events: auto;
    }
    .hud-bottom {
      bottom: max(16px, env(safe-area-inset-bottom));
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      max-width: calc(100vw - 32px);
      white-space: normal;
      line-height: 1.45;
    }
    #world-biome-cue {
      position: fixed;
      top: max(3.5rem, calc(env(safe-area-inset-top) + 2.5rem));
      left: 50%;
      transform: translateX(-50%);
      padding: 0.35rem 0.75rem;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      opacity: 0;
      transition: opacity 240ms ease;
      pointer-events: none;
      background: color-mix(in srgb, var(--clr-bg) 72%, transparent);
      border: 1px solid color-mix(in srgb, var(--clr-fg) 18%, transparent);
    }
    #world-biome-cue.is-visible { opacity: 0.9; }

    #world-metrics {
      position: fixed;
      top: max(2.5rem, calc(env(safe-area-inset-top) + 1.8rem));
      left: max(16px, env(safe-area-inset-left));
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      opacity: 0.7;
      pointer-events: none;
      line-height: 1.5;
      transition: opacity 160ms ease;
    }
    #world-metrics[hidden] { display: none; }
    .metrics-sep { opacity: 0.35; margin: 0 0.2rem; }



    #world-hud-help-panel {
      position: fixed;
      left: 50%;
      bottom: max(4rem, calc(env(safe-area-inset-bottom) + 3rem));
      transform: translateX(-50%);
      max-width: 28rem;
      padding: 0.75rem 1rem;
      font-size: 12px;
      line-height: 1.5;
      background: color-mix(in srgb, var(--clr-bg) 88%, transparent);
      border: 1px solid color-mix(in srgb, var(--clr-fg) 22%, transparent);
      pointer-events: auto;
    }
    .hud-exit-btn {
      background: var(--clr-bg);
      color: var(--clr-fg);
      border: 1px solid var(--clr-fg);
      padding: 8px 14px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .hud-exit-btn:hover { background: var(--clr-fg); color: var(--clr-bg); }

    #world-minimap {
      position: fixed;
      left: 18px;
      bottom: 18px;
      z-index: 70;
      pointer-events: auto;
      user-select: none;
      transition: transform var(--transition-core, 0.3s cubic-bezier(0.25, 0.8, 0.25, 1));
      transform-origin: bottom left;
      font-family: var(--font-mono);
    }
    #world-minimap .minimap-frame {
      position: relative;
      width: 200px;
      height: 200px;
      border: 1.5px solid var(--clr-border, #2a2520);
      background: var(--clr-bg, #0a0a0a);
      box-shadow: 0 4px 18px rgba(0,0,0,0.45);
      overflow: hidden;
      transition: width var(--transition-core, 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)),
                  height var(--transition-core, 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)),
                  border-color var(--transition-core, 0.3s cubic-bezier(0.25, 0.8, 0.25, 1));
    }
    #world-minimap .minimap-canvas {
      display: block;
      width: 100%;
      height: 100%;
      image-rendering: pixelated;
    }
    #world-minimap .minimap-compass {
      position: absolute;
      top: 6px; left: 50%;
      transform: translateX(-50%);
      font-size: 11px;
      font-weight: 700;
      color: var(--clr-fg, #f1ead8);
      background: rgba(0,0,0,0.55);
      padding: 1px 6px;
      border-radius: 3px;
      letter-spacing: 0.06em;
      pointer-events: none;
    }
    #world-minimap .minimap-toggle {
      position: absolute;
      top: -10px; right: -10px;
      width: 28px; height: 28px;
      border-radius: 50%;
      border: 1.5px solid var(--clr-border, #2a2520);
      background: var(--clr-bg, #0a0a0a);
      color: var(--clr-fg, #f1ead8);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      padding: 0;
      line-height: 1;
      transition: transform 0.18s ease, background var(--transition-core, 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)), color var(--transition-core, 0.3s cubic-bezier(0.25, 0.8, 0.25, 1));
    }
    #world-minimap .minimap-toggle:hover { transform: scale(1.1); }
    #world-minimap .minimap-toggle[aria-pressed="true"] {
      background: var(--clr-accent, #f6a23a);
      color: var(--clr-bg, #0a0a0a);
    }
    #world-minimap.expanded {
      transform: scale(1.05);
    }
    #world-minimap.expanded .minimap-frame {
      width: 520px;
      height: 400px;
    }

    @media (max-width: 768px) {
      .hud-bottom {
        font-size: 9px;
        letter-spacing: 0.08em;
      }

      .hud-exit-btn {
        min-height: 44px;
        padding: 10px 14px;
      }
    }

    @media (pointer: coarse) {
      .site-header__menu-btn,
      .privacy-toggle-btn,
      .privacy-btn,
      .gateway-cta,
      .hud-exit-btn {
        min-height: 44px;
      }
    }
  /* === WORLD SETTINGS PANEL === */
  #world-settings-panel-root {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  #world-settings-panel-root.is-open {
    display: flex;
    pointer-events: auto;
  }
  .settings-panel {
    width: min(880px, 92vw);
    max-height: min(80vh, 640px);
    background: var(--clr-bg, #1a1816);
    color: var(--clr-fg, #e8e0d8);
    border: 1px solid var(--clr-border, rgba(232,224,216,0.5));
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font-sans, system-ui, sans-serif);
    animation: settings-fade-in 160ms ease-out;
  }
  @keyframes settings-fade-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .settings-panel__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px 0;
    flex-shrink: 0;
  }
  .settings-panel__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    flex: 1;
  }
  .settings-panel__close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--clr-border-subtle, rgba(232,224,216,0.15));
    background: transparent;
    color: var(--clr-fg, #e8e0d8);
    border-radius: 8px;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms, border-color 120ms;
  }
  .settings-panel__close:hover {
    background: var(--clr-accent-subtle, rgba(212,131,90,0.15));
    border-color: var(--clr-accent, #d4835a);
  }
  .settings-panel__close:focus-visible {
    outline: 2px solid var(--clr-accent, #d4835a);
    outline-offset: 2px;
  }
  .settings-panel__tabs {
    display: flex;
    gap: 4px;
    padding: 16px 24px 0;
    border-bottom: 1px solid var(--clr-border-subtle, rgba(232,224,216,0.15));
    flex-shrink: 0;
    overflow-x: auto;
  }
  .settings-panel__tabs [data-tab] {
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--clr-fg, #e8e0d8);
    opacity: 0.55;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: opacity 120ms, border-color 120ms;
    white-space: nowrap;
  }
  .settings-panel__tabs [data-tab]:hover { opacity: 0.85; }
  .settings-panel__tabs [data-tab].is-active {
    opacity: 1;
    border-bottom-color: var(--clr-accent, #d4835a);
  }
  .settings-panel__tabs [data-tab]:focus-visible {
    outline: 2px solid var(--clr-accent, #d4835a);
    outline-offset: -2px;
    border-radius: 4px;
  }
  .settings-panel__main {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .settings-control {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .settings-control__label {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
    border: 1px solid var(--clr-border-subtle, rgba(232,224,216,0.15));
  }
  .segmented.segmented--wide .segment {
    flex: 1 1 0;
    min-width: 100px;
  }
  .segment {
    flex: 1 1 auto;
    min-width: 48px;
    padding: 8px 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--clr-fg, #e8e0d8);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background 120ms, color 120ms, border-color 120ms;
    opacity: 0.6;
  }
  .segment:hover { opacity: 0.85; background: rgba(255,255,255,0.04); }
  .segment.is-active {
    background: var(--clr-accent, #d4835a);
    color: var(--clr-bg, #1a1816);
    opacity: 1;
    font-weight: 600;
  }
  .segment:focus-visible {
    outline: 2px solid var(--clr-accent, #d4835a);
    outline-offset: 1px;
  }
  .settings-control select {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0,0,0,0.15);
    border: 1px solid var(--clr-border-subtle, rgba(232,224,216,0.15));
    border-radius: 8px;
    color: var(--clr-fg, #e8e0d8);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23e8e0d8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
  }
  .settings-control select:focus-visible {
    outline: 2px solid var(--clr-accent, #d4835a);
    outline-offset: 1px;
  }
  .settings-control select option {
    background: #1a1816;
    color: #e8e0d8;
  }
  .toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 4px 0;
    position: relative;
  }
  .toggle::before {
    content: "";
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--clr-border-subtle, rgba(232,224,216,0.15));
    transition: background 160ms;
    flex-shrink: 0;
    position: relative;
  }
  .toggle::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--clr-fg, #e8e0d8);
    opacity: 0.6;
    transition: transform 160ms ease, opacity 160ms;
    pointer-events: none;
  }
  .toggle.is-on::before {
    background: var(--clr-accent, #d4835a);
  }
  .toggle.is-on::after {
    transform: translateX(20px);
    opacity: 1;
  }
  .toggle:focus-visible::before {
    outline: 2px solid var(--clr-accent, #d4835a);
    outline-offset: 2px;
  }
  .slider {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .slider input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0,0,0,0.25);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
  }
  .slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--clr-accent, #d4835a);
    border: 2px solid var(--clr-bg, #1a1816);
    cursor: pointer;
    transition: transform 120ms;
  }
  .slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
  .slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--clr-accent, #d4835a);
    border: 2px solid var(--clr-bg, #1a1816);
    cursor: pointer;
  }
  .slider input[type="range"]:focus-visible {
    outline: 2px solid var(--clr-accent, #d4835a);
    outline-offset: 4px;
  }
  .slider__value {
    font-size: 0.8125rem;
    font-weight: 500;
    opacity: 0.75;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  [data-stats] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .stat-card {
    padding: 20px;
    background: rgba(0,0,0,0.12);
    border: 1px solid var(--clr-border-subtle, rgba(232,224,216,0.15));
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .stat-card > span:first-child {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.5;
  }
  .stat-card [data-stat] {
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  .settings-map-canvas-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 400px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--clr-border-subtle, rgba(232,224,216,0.15));
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }
  .settings-map-canvas {
    width: 100%;
    height: 100%;
    display: block;
  }
  .settings-map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    opacity: 0.5;
  }
  .settings-panel__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--clr-border-subtle, rgba(232,224,216,0.15));
    flex-shrink: 0;
  }
  .settings-panel__btn {
    padding: 10px 18px;
    border: 1px solid var(--clr-border-subtle, rgba(232,224,216,0.15));
    background: transparent;
    color: var(--clr-fg, #e8e0d8);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
  }
  .settings-panel__btn:hover {
    background: var(--clr-accent-subtle, rgba(212,131,90,0.15));
    border-color: var(--clr-accent, #d4835a);
  }
  .settings-panel__btn:focus-visible {
    outline: 2px solid var(--clr-accent, #d4835a);
    outline-offset: 2px;
  }
  .settings-panel__hint {
    margin: 0 0 0 auto;
    font-size: 0.75rem;
    opacity: 0.4;
    letter-spacing: 0.03em;
  }
  @media (prefers-reduced-motion: reduce) {
    .settings-panel { animation: none; }
    .settings-panel *, .segment, .toggle::before, .toggle::after, .slider input[type="range"]::-webkit-slider-thumb {
      transition: none !important;
    }
  }
  html.settings-reduce-motion * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html.settings-high-contrast {
    --clr-fg: #ffffff;
    --clr-bg: #000000;
    --clr-border: rgba(255, 255, 255, 0.9);
    --clr-border-subtle: rgba(255, 255, 255, 0.5);
  }
  html.settings-cb-deuteranopia #world-container { filter: url(#svg-cb-deuteranopia); }
  html.settings-cb-protanopia #world-container { filter: url(#svg-cb-protanopia); }
  html.settings-cb-tritanopia #world-container { filter: url(#svg-cb-tritanopia); }
  .svg-cb-filters { position: absolute; width: 0; height: 0; }