@font-face {
  font-family: "Geist Serif";
  src: url(assets/GeistSerif.woff2) format("woff2");
  font-display: swap;
}
html, body { margin: 0; background: #f3f3f3; }
a { color: #0a0a0a; } a:hover { color: #5c5c5c; }

.lx {
  --paper: #f3f3f3;
  --ink: #0a0a0a;
  --soft: #595959;
  --line: rgba(0, 0, 0, 0.18);
  --serif: "Geist Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-variation-settings: "ELSH" var(--elsh, 0);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.lx *, .lx *::before, .lx *::after { box-sizing: border-box; }
.lx a { text-decoration: none; transition: color .3s ease; }
.lx a:focus-visible, .lx button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.lx h1, .lx h2, .lx h3, .lx p { margin: 0; font-weight: 400; }
.lx ::selection { background: #0a0a0a; color: #f3f3f3; }
.lx canvas { display: block; width: 100%; height: 100%; }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 64px); }
.label { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.h2 { font-size: clamp(42px, 6.6vw, 100px); line-height: .98; letter-spacing: -0.035em; text-wrap: balance; }
.lede { color: var(--soft); font-size: clamp(17px, 1.5vw, 20px); max-width: 32em; text-wrap: pretty; }
.sec { padding-block: clamp(96px, 12vw, 176px); }
.folio { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(40px, 5vw, 72px); }
.folio .rule { flex: 1; height: 1px; background: var(--ink); transform-origin: left center; }
.head { display: flex; flex-direction: column; gap: 26px; margin-bottom: clamp(48px, 6vw, 80px); }

@keyframes reveal { from { clip-path: inset(100% -10% 0 -10%); translate: 0 16%; } to { clip-path: inset(-30% -10% -30% -10%); translate: 0 0; } }
@keyframes up { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide { to { translate: -50% 0; } }
@keyframes serif-morph { 0%, 20% { font-variation-settings: "ELSH" 0; } 50%, 70% { font-variation-settings: "ELSH" 50; } 100% { font-variation-settings: "ELSH" 0; } }
@keyframes rv-in { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
@keyframes draw { from { scale: 0 1; } to { scale: 1 1; } }
@supports (animation-timeline: view()) {
  .rv { animation: rv-in linear both; animation-timeline: view(); animation-range: entry 0% entry 95%; }
  .folio .rule { animation: draw linear both; animation-timeline: view(); animation-range: entry 20% cover 32%; }
}

/* nav */
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 28px; padding-block: 14px; animation: fadein 1.4s ease .2s both; }
.brand { font-size: 26px; letter-spacing: -0.02em; min-height: 44px; display: inline-flex; align-items: center; }
.nav-links { display: flex; flex-wrap: wrap; gap: 0 clamp(16px, 2.6vw, 36px); }
.nav-links a { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; }
.nav-links a.cta { border-bottom: 1px solid var(--ink); min-height: 0; align-self: center; padding-block: 5px; }

/* hero */
.hero { position: relative; isolation: isolate; background: var(--paper); height: clamp(440px, 56vw, 760px); display: grid; place-items: center; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; animation: fadein 3s ease .2s both; }
.title { position: relative; font-size: min(26vw, 380px); line-height: .9; letter-spacing: -0.05em; color: #fff; mix-blend-mode: difference; display: flex; pointer-events: none; padding-bottom: .06em; }
.title span { display: inline-block; animation: reveal 1.5s cubic-bezier(.2, .75, .2, 1) both; }
.note { position: absolute; font-family: var(--mono); font-size: clamp(10px, 1.05vw, 12px); letter-spacing: .16em; text-transform: uppercase; color: var(--soft); animation: fadein 1.6s ease 1.8s both; }
.note.l { left: max(clamp(20px, 5vw, 64px), calc(50% - 576px)); bottom: 18px; }
.note.r { right: max(clamp(20px, 5vw, 64px), calc(50% - 576px)); bottom: 18px; }

.entry { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 44px clamp(40px, 7vw, 120px); padding-block: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--ink); }
.word { display: flex; flex-direction: column; gap: 14px; animation: up 1.4s cubic-bezier(.2, .7, .2, 1) 1.5s both; }
.word .w { font-size: clamp(44px, 5vw, 72px); line-height: 1; letter-spacing: -0.03em; }
.defs { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.defs li { display: flex; gap: 22px; padding-block: 12px; border-top: 1px solid var(--line); font-size: 20px; }
.defs li b { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .14em; color: var(--soft); padding-top: 8px; }
.offer { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; animation: up 1.4s cubic-bezier(.2, .7, .2, 1) 1.7s both; }
.offer h2 { font-size: clamp(34px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -0.03em; }
.offer p { color: var(--soft); max-width: 30em; text-wrap: pretty; }

.cmd { display: flex; flex-wrap: wrap; align-items: stretch; border: 1px solid var(--ink); max-width: 100%; transition: box-shadow .3s ease, translate .3s ease; }
.cmd:hover { box-shadow: 6px 6px 0 var(--ink); translate: -3px -3px; }
.cmd code { flex: 1 1 auto; font-family: var(--mono); font-size: clamp(11.5px, 3vw, 14.5px); padding: 13px 18px; display: flex; align-items: center; overflow-wrap: anywhere; }
.cmd code i { font-style: normal; color: #6b6b6b; margin-right: 10px; }
.cmd button { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; min-height: 46px; min-width: 96px; padding: 0 20px; border: 0; border-radius: 0; background: var(--ink); color: var(--paper); cursor: pointer; transition: background .3s ease; }
.cmd button:hover { background: #3a3a3a; }
.quiet { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; }
.quiet span { display: inline-block; transition: translate .3s ease; }
.quiet:hover span { translate: 5px 0; }

/* statement */
.say { text-align: center; }
.say .stem { width: 1px; height: clamp(70px, 9vw, 130px); background: var(--ink); margin: 0 auto 44px; transform-origin: center top; }
@supports (animation-timeline: view()) {
  .say .stem { animation: draw-y linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}
@keyframes draw-y { from { scale: 1 0; } to { scale: 1 1; } }
.say p.big { font-size: clamp(30px, 4.6vw, 68px); line-height: 1.1; letter-spacing: -0.03em; max-width: 17em; margin: 0 auto; color: #8a8a8a; text-wrap: balance; }
.say p.big strong { font-weight: 400; color: var(--ink); }

/* demo */
.stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.pane { background: #fafafa; min-width: 0; }
.fade { animation: d-fade 16s linear infinite; }
@keyframes d-fade { 0% { opacity: 0; } 3%, 95% { opacity: 1; } 100% { opacity: 0; } }
.pv { container-type: inline-size; }
.pv-in { position: relative; aspect-ratio: 4 / 3; overflow: hidden; font-size: 2.5cqw; }
.pv-bar { position: absolute; left: 0; right: 0; top: 0; height: 7cqw; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 1.2cqw; padding-inline: 3cqw; font-family: var(--mono); font-size: 2.1cqw; color: #5c5c5c; }
.pv-bar b { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; border: 1px solid #7a7a7a; }
.pv-bar span { margin-left: 2cqw; }
.pv .blk { position: absolute; background: #d6d6d6; }
.pv .logo { position: absolute; left: 8cqw; top: 11cqw; width: 4cqw; height: 4cqw; border-radius: 50%; border: 1px solid var(--ink); }
.pv .card { position: absolute; left: 60cqw; top: 24cqw; width: 32cqw; height: 28cqw; border: 1px solid var(--line); display: grid; place-items: center; background-image: repeating-linear-gradient(to right, transparent 0 1.5cqw, rgba(0, 0, 0, .1) 1.5cqw 1.6cqw); }
.pv .card i { width: 14cqw; height: 14cqw; border-radius: 50%; background: #fafafa; border: 1px solid var(--ink); }
.pv .ghost { position: absolute; left: 8cqw; top: 46cqw; width: 22cqw; height: 6.4cqw; border: 1px dashed rgba(0, 0, 0, .6); opacity: 0; animation: d-ghost 16s linear infinite; }
.pv .ins { position: absolute; left: 70.4cqw; top: 9.4cqw; width: 2px; height: 7.6cqw; background: var(--ink); opacity: 0; animation: d-ins 16s linear infinite; }
.pv .btn { position: absolute; left: 8cqw; top: 46cqw; width: 22cqw; height: 6.4cqw; background: var(--ink); color: #fafafa; display: grid; place-items: center; font-size: 2.5cqw; outline: 1px solid transparent; outline-offset: .9cqw; animation: d-btn 16s cubic-bezier(.65, 0, .25, 1) infinite, d-sel 16s linear infinite; }
.pv-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 9cqw; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding-inline: 4cqw; font-family: var(--mono); font-size: 2.1cqw; color: #4d4d4d; }
.pv-foot .count { display: inline-grid; margin-left: 1.4cqw; color: var(--ink); }
.pv-foot .count b { grid-area: 1 / 1; font-weight: 500; }
.pv-foot .count b:nth-child(1) { animation: d-c0 16s linear infinite; }
.pv-foot .count b:nth-child(2) { opacity: 0; animation: d-c1 16s linear infinite; }
.pv .send { width: 24cqw; height: 5.4cqw; border: 1px solid var(--ink); display: grid; place-items: center; color: var(--ink); animation: d-send 16s linear infinite; }
.pv .cur { position: absolute; left: 0; top: 0; width: 3.4cqw; height: 3.4cqw; translate: 70cqw 58cqw; animation: d-cur 16s cubic-bezier(.65, 0, .25, 1) infinite; }
@keyframes d-cur { 0%, 6% { translate: 70cqw 58cqw; } 14%, 18% { translate: 19cqw 49.6cqw; } 36%, 44% { translate: 83cqw 13.6cqw; } 54%, 61% { translate: 85cqw 70cqw; } 72%, 100% { translate: 70cqw 58cqw; } }
@keyframes d-btn { 0%, 16% { translate: 0 0; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 19% { translate: 0 0; box-shadow: 1cqw 1cqw 0 rgba(0, 0, 0, .22); } 36% { translate: 64cqw -36cqw; box-shadow: 1cqw 1cqw 0 rgba(0, 0, 0, .22); } 39%, 100% { translate: 64cqw -36cqw; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } }
@keyframes d-sel { 0%, 13% { outline-color: transparent; } 15%, 44% { outline-color: #0a0a0a; } 48%, 100% { outline-color: transparent; } }
@keyframes d-ghost { 0%, 19% { opacity: 0; } 22%, 36% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes d-ins { 0%, 24% { opacity: 0; } 27%, 36% { opacity: 1; } 39%, 100% { opacity: 0; } }
@keyframes d-c0 { 0%, 38% { opacity: 1; } 40%, 72% { opacity: 0; } 74%, 100% { opacity: 1; } }
@keyframes d-c1 { 0%, 38% { opacity: 0; } 40%, 72% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes d-send { 0%, 54% { background: transparent; color: #0a0a0a; } 56%, 61% { background: #0a0a0a; color: #fafafa; } 66%, 100% { background: transparent; color: #0a0a0a; } }

.cd { position: relative; display: flex; flex-direction: column; font-family: var(--mono); font-size: clamp(10px, 2.85vw, 13.5px); line-height: 2; overflow: hidden; }
.cd-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; padding: 12px 22px; border-bottom: 1px solid var(--line); color: #5c5c5c; font-size: 12px; line-height: 1.7; }
.cd-bar .st { display: inline-grid; color: var(--ink); text-align: right; }
.cd-bar .st b { grid-area: 1 / 1; font-weight: 400; opacity: 0; }
.cd-bar .st b:nth-child(1) { color: #5c5c5c; animation: d-s1 16s linear infinite; }
.cd-bar .st b:nth-child(2) { animation: d-s2 16s linear infinite; }
.cd-bar .st b:nth-child(3) { animation: d-s3 16s linear infinite; }
@keyframes d-s1 { 0%, 56% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes d-s2 { 0%, 57% { opacity: 0; } 59%, 71% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes d-s3 { 0%, 72% { opacity: 0; } 74%, 100% { opacity: 1; } }
.cd-body { position: relative; flex: 1; padding: 22px 0; }
.ln { display: flex; padding-inline: 22px; color: #2e2e2e; overflow: hidden; max-height: 2em; }
.ln .sg { flex: 0 0 2.2ch; color: var(--ink); }
.ln .tx { white-space: pre; }
.ln.dim { color: #6e6e6e; }
.ln.del { animation: d-del 16s linear infinite; }
.ln.add { max-height: 0; opacity: 0; color: var(--ink); animation: d-add 16s linear infinite; }
@keyframes d-del { 0%, 60% { max-height: 2em; opacity: 1; background: transparent; } 62% { max-height: 2em; opacity: .4; background: rgba(0, 0, 0, .06); } 65% { max-height: 2em; opacity: .4; } 69%, 100% { max-height: 0; opacity: 0; } }
@keyframes d-add { 0%, 63% { max-height: 0; opacity: 0; background: #0a0a0a; color: #fafafa; } 68% { max-height: 2em; opacity: 1; background: #0a0a0a; color: #fafafa; } 82%, 100% { max-height: 2em; opacity: 1; background: rgba(0, 0, 0, .08); color: #0a0a0a; } }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .05) 85%, rgba(0, 0, 0, .55) 100%); opacity: 0; animation: d-scan 16s linear infinite; pointer-events: none; }
@keyframes d-scan { 0%, 57% { opacity: 0; translate: 0 -100%; } 58% { opacity: 1; translate: 0 -100%; } 71% { opacity: 1; translate: 0 240%; } 72%, 100% { opacity: 0; translate: 0 240%; } }
.cd-foot { display: flex; gap: 26px; padding: 12px 22px; border-top: 1px solid var(--line); color: #5c5c5c; font-size: 12px; line-height: 1.7; }

.steps { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 40px clamp(32px, 5vw, 72px); }
.step { display: flex; flex-direction: column; gap: 10px; }
.step .n { font-size: clamp(64px, 7vw, 104px); line-height: .9; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px var(--ink); }
.step h3 { font-size: 34px; line-height: 1.1; letter-spacing: -0.025em; margin-top: 10px; }
.step p { color: var(--soft); font-size: 17px; text-wrap: pretty; }

/* seven pillars */
.cols { display: flex; height: 560px; border-block: 3px double var(--ink); }
.col { position: relative; flex: 1 1 0; min-width: 0; margin: 0; padding: 22px 20px 24px; border: 0; border-left: 1px solid var(--ink); border-radius: 0; font: inherit; font-variation-settings: inherit; color: inherit; text-align: left; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background-color: transparent; background-image: repeating-linear-gradient(to right, transparent 0 15px, rgba(0, 0, 0, .13) 15px 16px); transition: flex-grow .8s cubic-bezier(.2, .75, .2, 1), background-color .5s ease, color .5s ease; }
.col:first-child { border-left: 0; }
.col .n { display: block; font-size: 44px; line-height: 1; letter-spacing: -0.02em; }
.col .v { position: absolute; left: 20px; bottom: 24px; writing-mode: vertical-rl; rotate: 180deg; font-size: 23px; line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; background: var(--paper); padding: 10px 3px; transition: opacity .3s ease; }
.col .body { display: flex; flex-direction: column; gap: 14px; width: min(430px, 62vw); opacity: 0; transition: opacity .3s ease; }
.col .body .h { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.02; letter-spacing: -0.03em; }
.col .body .p { font-size: 17px; line-height: 1.55; color: #cfcfcf; text-wrap: pretty; }
.col.on { flex-grow: 5.2; background-color: var(--ink); background-image: none; color: var(--paper); cursor: default; }
.col.on .v { opacity: 0; }
.col.on .body { opacity: 1; transition: opacity .6s ease .35s; }
@media (max-width: 860px) {
  .cols { flex-direction: column; height: auto; }
  .col { flex: none; border-left: 0; border-top: 1px solid var(--ink); background-image: none; gap: 14px; flex-direction: row; align-items: baseline; padding: 24px 0; }
  .col:first-child { border-top: 0; }
  .col .n { flex: 0 0 64px; font-size: 32px; }
  .col .v { display: none; }
  .col .body { width: auto; opacity: 1; flex: 1; }
  .col .body .p { color: var(--soft); }
  .col.on { padding-inline: 16px; }
  .col.on .body .p { color: #cfcfcf; }
}

/* works with */
.belt { overflow: hidden; padding-block: 22px; border-block: 1px solid var(--ink); }
.belt-track { display: flex; width: max-content; animation: slide 64s linear infinite; }
.belt:hover .belt-track { animation-play-state: paused; }
.belt-set { display: flex; align-items: center; gap: clamp(28px, 4vw, 60px); padding-right: clamp(28px, 4vw, 60px); font-size: clamp(44px, 7vw, 104px); line-height: 1.1; letter-spacing: -0.035em; white-space: nowrap; }
.belt-set span:nth-child(4n + 3) { color: transparent; -webkit-text-stroke: 1px var(--ink); }
.belt-set i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--ink); }
.agents { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 28px clamp(32px, 5vw, 72px); margin-top: clamp(48px, 6vw, 72px); }
.agent { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 1px solid var(--ink); }
.agent h3 { font-size: 36px; line-height: 1.1; letter-spacing: -0.025em; }
.agent code { font-family: var(--mono); font-size: 13px; color: var(--soft); }

/* install, the dark band */
.night { position: relative; isolation: isolate; background: #0a0a0a; color: #f3f3f3; overflow: hidden; }
.night canvas { position: absolute; inset: 0; }
.night-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; padding-block: clamp(110px, 13vw, 190px); }
.night .label { color: #b0b0b0; }
.night h2 { font-size: clamp(96px, 21vw, 320px); line-height: .86; letter-spacing: -0.05em; padding-bottom: .14em; }
.night .lede { color: #c4c4c4; }
.night .cmd { border-color: #f3f3f3; background: #0a0a0a; }
.night .cmd:hover { box-shadow: 6px 6px 0 #f3f3f3; }
.night .cmd code i { color: #9a9a9a; }
.night .cmd button { background: #f3f3f3; color: #0a0a0a; }
.night .cmd button:hover { background: #fff; }
.needs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px; margin: 6px 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #c4c4c4; }
.needs li { display: flex; align-items: center; gap: 10px; background: #0a0a0a; padding: 2px 6px; }
.needs li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #f3f3f3; }

/* footer */
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 30px; padding-block: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--soft); }
.mark { display: block; text-align: center; font-size: min(31vw, 450px); line-height: .8; letter-spacing: -0.055em; height: .56em; overflow: hidden; animation: serif-morph 14s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .lx *, .lx *::before, .lx *::after { animation: none !important; transition: none !important; }
  .ln.add { display: none; }
}