@charset "UTF-8";
/* Loaded only by ai.html; shared palette and font tokens come from styles.css. */
/* Native HTML popover: no JavaScript and no external requests until a link is followed. */
.image-credit-toggle { display: inline-grid; place-items: center; min-width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 15px; vertical-align: middle; cursor: pointer; }
.image-credit-toggle:hover { background: rgba(21,36,44,.08); }
.image-credit-toggle:focus-visible, .attribution-close:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.asset-attribution { --attribution-bottom: 96px; position: fixed; inset: auto auto var(--attribution-bottom) calc(var(--rail) + 14px); margin: 0; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - var(--attribution-bottom) - 24px); max-height: calc(100dvh - var(--attribution-bottom) - 24px); overflow: auto; padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-soft); font: 400 15px/1.6 var(--font-text); }
.asset-attribution h2 { margin: 12px 30px 18px 0; font-size: 26px; font-weight: 500; letter-spacing: -.5px; }
.asset-attribution p + p { margin-top: 16px; }
.asset-attribution cite { font-style: normal; }
.attribution-changes { color: var(--muted); font-size: 13px; }
.attribution-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: 400 24px/1 var(--font-text); cursor: pointer; }
.attribution-close:hover { background: rgba(21,36,44,.08); }
/* A single twenty-second cameo, after ten seconds; the final frame stays hidden. */
.theme-ai .site-sidebar nav { position: relative; }
.hal-cameo { --hal-type-start: 12.2s; --hal-type-step: .085s; position: absolute; z-index: -1; top: calc(100% + 18px); left: calc((var(--rail) - 60px) / 2); width: 60px; pointer-events: none; -webkit-user-select: none; user-select: none; visibility: hidden; opacity: 0; animation: hal-visit 20s ease-in-out 10s both; }
.hal-cameo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 5px 9px rgba(35,22,30,.18)); }
.hal-caption { width: 60px; margin-top: 10px; padding: 6px 2px; border-radius: 7px; background: var(--orange); color: #181916; box-shadow: none; font: 400 10px/1.5 var(--font-mono); text-align: center; }
.hal-text { display: block; }
.hal-character { position: relative; opacity: 0; animation: hal-type 0s step-end calc(var(--hal-type-start) + var(--hal-character) * var(--hal-type-step)) both; }
.hal-character::after { content: ""; position: absolute; left: 100%; top: .12em; width: .8ch; height: 1em; background: currentColor; visibility: hidden; animation: hal-cursor-slot var(--hal-type-step) step-end calc(var(--hal-type-start) + var(--hal-character) * var(--hal-type-step)) forwards, hal-cursor-blink .8s step-end 10s 25 both; }
.hal-character:last-child::after { animation-name: hal-cursor-rest, hal-cursor-blink; animation-duration: 0s, .8s; animation-fill-mode: both, both; }
@keyframes hal-visit {
  0% { visibility: visible; opacity: 0; transform: translateY(28px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { visibility: visible; opacity: 1; transform: translateY(0); }
  100% { visibility: hidden; opacity: 0; transform: translateY(0); }
}
@keyframes hal-type { from { opacity: 0; } to { opacity: 1; } }
@keyframes hal-cursor-slot { from { visibility: visible; } to { visibility: hidden; } }
@keyframes hal-cursor-rest { from { visibility: hidden; } to { visibility: visible; } }
@keyframes hal-cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes hal-visit-still {
  0%, 100% { visibility: hidden; opacity: 0; }
  1%, 90% { visibility: visible; opacity: 1; }
}
@media (min-width: 651px) and (max-height: 740px) {
  .hal-cameo { display: none; animation: none; }
  .hal-character { animation: none; }
  .hal-character::after { display: none; animation: none; }
}

/* The effect starts beyond the reading column and reaches the viewport edge. */
.theme-ai main { position: relative; isolation: isolate; }
.matrix-background { position: absolute; z-index: -1; top: 0; bottom: 0; left: 712px; right: calc((100% - (100vw - var(--rail))) / 2); overflow: hidden; pointer-events: none; -webkit-user-select: none; user-select: none; background: linear-gradient(to right, transparent, rgba(3,66,49,.075) 40%, rgba(3,48,37,.22)); -webkit-mask-image: linear-gradient(to right, transparent, #000 18%); mask-image: linear-gradient(to right, transparent, #000 18%); }
.matrix-columns { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); }
.matrix-column { position: relative; min-width: 0; overflow: hidden; }
.matrix-stream { position: absolute; inset: 0 0 auto; height: 200%; display: flex; flex-direction: column; color: #7affc1; opacity: var(--rain-opacity); font: 400 clamp(12px, 1.2vw, 18px)/1 var(--font-mono); text-align: center; filter: blur(.35px); animation: matrix-rain var(--rain-duration) linear var(--rain-delay) infinite; }
.matrix-group { flex: 0 0 50%; min-height: 0; display: flex; flex-direction: column; justify-content: space-around; -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 75%, #000 92%, transparent); mask-image: linear-gradient(to bottom, transparent 2%, #000 75%, #000 92%, transparent); }
.matrix-group > span { display: block; }
.matrix-group > span:nth-last-child(3) { color: #c1ffd8; }
.matrix-control { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding-block: 8px; margin-top: 8px; color: var(--muted); font-size: 12px; cursor: pointer; }
.matrix-control input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.matrix-control input:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.theme-ai main:has(#matrix-paused:checked) .matrix-stream { animation-play-state: paused; }
@keyframes matrix-rain { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (min-width: 901px) and (max-width: 1100px) {
  .matrix-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .matrix-column:nth-child(n + 7) { display: none; }
}
@media (max-width: 900px) {
  .matrix-background, .matrix-control { display: none; }
  .matrix-stream { animation: none; filter: none; }
}

@media (max-width: 650px) {
  .asset-attribution { --attribution-bottom: 90px; left: 16px; padding: 24px; }
  .hal-cameo { left: 0; width: 48px; }
  .hal-caption { margin-left: -6px; font-size: 9px; line-height: 1.4; }
  .theme-ai .site-topbar { padding-left: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .matrix-stream { animation: none !important; transform: translateY(-25%); }
  .matrix-control { display: none; }
  .hal-cameo { animation-name: hal-visit-still; }
  .hal-character { opacity: 1; animation: none; }
  .hal-character::after { display: none; animation: none; }
}
@media print {
  .asset-attribution, .image-credit-toggle { display: none; }
  .matrix-background, .matrix-control, .hal-cameo { display: none; }
}