@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/media/h-funnel-display-latin-96468ae77275.woff2) format("woff2"); }
  html { overflow-x: clip; background-color: #28302f; }
  html.light { background-color: #fafbfa; }
  html:not(.light) body { background: #4b504f; }
  body {
    margin: 0;
    overflow-x: clip;
    background: #fafbfa url(/media/h-terrain-08960b442847.jpg) 0 0 / 1600px 1600px repeat;
    color: #000;
    font: 500 clamp(18px, 2.3vw, 34px)/1.2 "Funnel Display", system-ui, sans-serif;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  .stage { position: fixed; left: 0; top: 0; width: 100%; height: calc(100vh + 160px); height: calc(100lvh + 160px); overflow: hidden; z-index: 0; pointer-events: none; }
  .ground { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 1600px); background: #fafbfa url(/media/h-terrain-08960b442847.jpg) 0 0 / 1600px 1600px repeat; }
  .dock { position: absolute; inset: 0; }
  .stage.paged { position: absolute; }
  .track, .more, .end { position: relative; z-index: 1; }
  .media {
    position: absolute; left: 0; top: 0; width: var(--w0, 100vw); height: var(--h0, 56.25vw); transform-origin: 0 0;
    transform: translate(var(--x0, 0px), var(--y0, 0px));
  }
  .lens { position: absolute; inset: 0; }
  .lens > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .lens .rewind { opacity: 0; }
  .lens .plate { inset: auto; left: 26.302%; top: 6.481%; width: 48.776%; height: 86.713%; object-fit: fill; animation: reveal 90ms linear both paused; }
  .zooming .media { mix-blend-mode: multiply; }
  .lens .hops { inset: auto; left: 26.302%; top: 6.481%; width: 48.776%; height: 86.713%; pointer-events: none; }
  .media.masked { -webkit-mask-image: radial-gradient(circle var(--mr) at 50.68% 49.81%, #000 97%, transparent 100%); mask-image: radial-gradient(circle var(--mr) at 50.68% 49.81%, #000 97%, transparent 100%); }
  .ground { visibility: hidden; }
  .zooming .ground { visibility: visible; }
  .rest .lens > video { opacity: 0 !important; }
  .lens .seq { width: 100%; height: 100%; }
  .seqmode .lens > video { visibility: hidden; }
  .seqmode:not(.rest) .lens .first { visibility: visible; }
  .rest .lens .first, .played .lens .first { visibility: hidden; }
  @keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
  @keyframes leave { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
  .slot { position: relative; }
  .wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .still { position: absolute; left: 50%; top: 50%; width: 101.999%; height: 101.999%; transform: translate(-50%, -50%); visibility: hidden; pointer-events: none; }
  .docked .still { visibility: visible; }
  .docked .stage { opacity: 0; }
  .hud { position: fixed; left: 12px; bottom: 12px; z-index: 9; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.78); color: #fff; font: 12px/1.45 ui-monospace, Menlo, monospace; letter-spacing: 0; white-space: pre; pointer-events: none; }

  .over { position: relative; z-index: 2; height: 100vh; height: 100svh; color: #fff; }
  .light .over { color: var(--ink); }
  .stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6, 20, 12, 0.62) 0%, rgba(6, 20, 12, 0.34) 38%, rgba(6, 20, 12, 0) 68%), linear-gradient(0deg, rgba(6, 20, 12, 0.4) 0%, rgba(6, 20, 12, 0) 55%); }
  .ready .stage::after { transition: opacity 0.25s ease; }
  .light .stage::after { opacity: 0; }
  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: clamp(14px, 2vw, 30px); padding: clamp(16px, 2.4vh, 28px) 5vw; font-size: clamp(14px, 1.05vw, 17px); font-weight: 400; letter-spacing: 0; color: #fff; background: rgba(255, 255, 255, 0); }
  .nav::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(6, 20, 12, 0.55), rgba(6, 20, 12, 0)); }
  .light .nav { color: var(--ink); background: #fafbfa; box-shadow: 0 1px 0 var(--line); }
  .light .nav::before { display: none; }
  .light .nav .go { background: var(--ink); color: #fff; }
  .light .nav .go:hover { background: var(--leaf); }
  .nav a { color: inherit; text-decoration: none; }
  .nav a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
  .nav .go { padding: 0.55em 1em; border-radius: 99px; background: #fff; color: #10281a; }
  .nav .go:hover { text-decoration: none; background: #e9f2ec; }
  @media (max-width: 640px) { .nav a:not(.go) { display: none; } }
  .hero { position: absolute; left: 5vw; right: 5vw; bottom: clamp(28px, 6vh, 72px); }
  #name { margin: 0 0 0.1em -0.04em; font-size: 15.5vw; font-weight: 500; line-height: 0.92; letter-spacing: 0; }
  #tag { margin: 0; }
  .landing { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 5vw; padding: 9vh 5vw 0; }
  .landing { color: #fff; }
  .light .landing { color: var(--ink); }
  .counts dt { color: rgba(255, 255, 255, 0.8); }
  .light .counts dt { color: #5d665f; }
  .landing .text { font-weight: 400; font-size: clamp(24px, 3.3vw, 52px); line-height: 1.15; letter-spacing: 0; }
  .landing p { margin: 0; max-width: 17em; }
  .landing p + p { margin-top: 0.8em; }
  .slot { justify-self: center; width: min(38vw, 64vh); aspect-ratio: 1; }
  @media (max-width: 760px) {
    .landing { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 4vh; }
    .slot { order: -1; width: min(64vw, 38vh); }
  }

  #sub { margin: 0.25em 0 0; font-weight: 400; font-size: max(0.72em, 15px); opacity: 0.86; max-width: 26em; }
  .landing h2 { margin: 0 0 0.35em; font-size: clamp(30px, 4.4vw, 68px); font-weight: 500; line-height: 1; letter-spacing: 0; max-width: 9em; }
  .landing .text p { font-size: clamp(18px, 1.75vw, 27px); line-height: 1.25; letter-spacing: 0; max-width: 24em; }
  .counts { display: flex; flex-wrap: wrap; gap: clamp(20px, 3.4vw, 56px); margin: clamp(22px, 4vh, 44px) 0 0; }
  .counts div { display: flex; flex-direction: column; }
  .counts dd { margin: 0; font-size: clamp(30px, 3.6vw, 56px); font-weight: 500; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .counts dt { margin-top: 0.5em; font-size: clamp(13px, 1vw, 16px); font-weight: 400; letter-spacing: 0; }

  :root { --ink: #0b0f0c; --soft: #5d665f; --line: #dfe4df; --leaf: #335e45; --wash: #f3f5f1; }
  .more { color: var(--ink); }
  .landing .all { margin: clamp(24px, 4.5vh, 44px) 0 0; }
  .more section { padding: clamp(56px, 11vh, 132px) 5vw 0; }
  .more h2 { margin: 0 0 clamp(24px, 4.5vh, 52px); font-size: clamp(30px, 4.4vw, 68px); font-weight: 500; line-height: 1; letter-spacing: 0; max-width: 12em; }
  .arrow { display: inline-block; font-size: clamp(16px, 1.3vw, 20px); font-weight: 400; letter-spacing: 0; color: var(--leaf, #335e45); text-decoration: none; }
  .arrow::after { content: "\2192"; display: inline-block; margin-left: 0.4em; transition: transform 0.2s; }
  .arrow:hover::after { transform: translateX(0.25em); }
  .arrow:hover { text-decoration: underline; text-underline-offset: 0.25em; }
  .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
  .code { margin: 0; padding: clamp(18px, 2.2vw, 30px); border-radius: 14px; background: var(--wash); border: 1px solid var(--line); overflow-x: auto; font: 400 clamp(13px, 1.05vw, 16px)/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0; color: var(--ink); }
  .code:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
  .steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .steps li { display: grid; grid-template-columns: 3.2em minmax(0, 0.42fr) minmax(0, 1fr); gap: 0 clamp(12px, 2vw, 28px); align-items: baseline; padding: clamp(16px, 2.6vh, 26px) 0; border-bottom: 1px solid var(--line); }
  .steps span { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--leaf); font-variant-numeric: tabular-nums; }
  .steps h3 { margin: 0; font-size: clamp(22px, 2.2vw, 34px); font-weight: 500; line-height: 1.1; letter-spacing: 0; }
  .steps p { margin: 0; font-size: clamp(16px, 1.3vw, 20px); font-weight: 400; line-height: 1.35; letter-spacing: 0; color: var(--soft); }
  .steps code { font: 0.9em ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); }
  .quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .npx { white-space: pre-wrap; overflow-wrap: anywhere; }
  .close .npx { margin-top: clamp(40px, 7vh, 80px); }
  .npx { display: inline-block; max-width: 100%; font-size: clamp(13px, 1vw, 15px); padding: 14px 20px; border-radius: 10px; }
  .schemas { margin: clamp(28px, 4.5vh, 52px) -5vw 0; padding: 0 5vw; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .reel { display: flex; align-items: flex-start; gap: 48px; width: max-content; will-change: transform; }
  .schemas { cursor: grab; touch-action: pan-y; }
  .schemas.over-text { cursor: text; }
  .schemas.dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
  .schema { flex: none; width: min(340px, 78vw); margin: 0; }
  .schema .code { padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
  .schema figcaption { margin: 0 0 8px; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
  .schema .ln { display: block; padding-left: 6ch; text-indent: -6ch; }
  .schema .code .k { color: rgba(11, 15, 12, 0.66); }
  .schema .code .s { color: rgba(51, 120, 76, 0.78); }
  .schema .code .t { color: rgba(56, 96, 160, 0.72); }
  .schema .code .o { color: rgba(150, 110, 60, 0.6); }
  .schema .code .b { color: rgba(11, 15, 12, 0.34); }
  .schema .code .p { color: rgba(11, 15, 12, 0.4); }
  .code .k { color: var(--ink); }
  .code .s { color: var(--leaf); }
  .code .p { color: var(--soft); }
  .agents { list-style: none; display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 3.4vw, 56px); margin: 0 0 clamp(24px, 4.5vh, 48px); padding: 0; font-size: clamp(26px, 3.4vw, 52px); font-weight: 500; line-height: 1.15; letter-spacing: 0; }
  .agents li + li { color: color-mix(in srgb, var(--ink) 78%, #fff); }
  .connect { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 14px; margin-bottom: clamp(18px, 3vh, 30px); }
  .more .close { padding-bottom: clamp(64px, 13vh, 150px); }
  .acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
  .btn { display: inline-block; padding: 0.8em 1.35em; border: 1px solid var(--ink); border-radius: 99px; font-size: clamp(16px, 1.3vw, 20px); font-weight: 500; letter-spacing: 0; color: var(--ink); text-decoration: none; }
  .btn:hover { border-color: var(--leaf); color: var(--leaf); }
  .btn.solid { background: var(--ink); color: #fff; }
  .btn.solid:hover { background: var(--leaf); color: #fff; }
  html:not(.light) .landing .btn.solid { background: #fff; color: #10281a; }

  @media (max-width: 760px) {
    .cols, .connect { grid-template-columns: minmax(0, 1fr); }
    .steps li { grid-template-columns: 2.4em minmax(0, 1fr); }
    .steps p { grid-column: 2; margin-top: 0.3em; }
  }

  .end { padding: clamp(40px, 7vh, 72px) 5vw 5vw; border-top: 1px solid #dfe4df; }
  .sitemap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 3vw, 48px); margin-bottom: clamp(48px, 9vh, 96px); font-size: 15px; font-weight: 400; line-height: 1.3; letter-spacing: 0; }
  .sitemap h2 { margin: 0 0 14px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: #5d665f; }
  .sitemap a { display: block; padding: 5px 0; text-decoration: none; }
  .sitemap a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
  @media (max-width: 760px) { .sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .lockup { display: inline-flex; align-items: baseline; gap: 0.3em; font-size: clamp(38px, 4.4vw, 68px); line-height: 1; letter-spacing: 0; color: #000; text-decoration: none; }
  #print { display: block; height: 0.675em; aspect-ratio: 62 / 89; fill: #000; flex: none; }
  .by { margin: 0 0 12px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: #5d665f; }

  .scroller { display: contents; }
  @media (hover: none) and (pointer: coarse) {
    html, body { height: 100%; overflow: hidden; }
    .scroller { display: block; position: absolute; left: 0; top: 0; width: 100%; height: calc(100vh + 120px); height: calc(100lvh + 120px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; background: #fafbfa url(/media/h-terrain-08960b442847.jpg) 0 0 / 1600px 1600px repeat; background-attachment: local; }
    html:not(.light) .scroller { background: #4b504f; }
    .scroller > .end { padding-bottom: calc(5vw + 140px); }
    .stage { position: sticky; top: 0; margin-bottom: calc(-100vh - 120px); margin-bottom: calc(-100lvh - 120px); height: calc(100vh + 120px); height: calc(100lvh + 120px); }
    .stage.paged { position: relative; }
  }