/* leibler.dev */
  :root { --bg: #000; --fg: #fff; --fg-2: #a3a3a3; --fg-3: #8a8a8a; --line: #1f1f1f; --line-2: #2e2e2e; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font-family: "Geist Mono", ui-monospace, Menlo, monospace; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  main { flex: 1; }
  a { color: inherit; text-decoration: none; }
  a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  h1, h2, h3 { font-weight: 500; letter-spacing: -0.04em; text-wrap: balance; }
  p { text-wrap: pretty; }
  .mono { font-family: "Geist Mono", ui-monospace, Menlo, monospace; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 8px; font-weight: 500; font-size: 14px; letter-spacing: -0.01em; border: 1px solid transparent; transition: background-color 150ms ease, border-color 150ms ease; touch-action: manipulation; }
  .btn-w { background: var(--fg); color: #000; } .btn-w:hover { background: #e5e5e5; }
  .btn-o { border-color: var(--line-2); color: var(--fg); } .btn-o:hover { border-color: #fff; }
  .skip { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 12px; z-index: 100; } .skip:focus { left: 8px; }
  .sub b { color: var(--fg); font-weight: 500; }
  .read { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-2); }
  .read b { color: #fff; font-weight: 500; }
  @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .fig [class] { animation: none; } .fig .eB, .fig .f1l, .fig .f2t.c3 { transform: none; opacity: 1; } .fig .att { stroke-dashoffset: 0; } .fig .att.c1, .fig .att.c2, .fig .f2d, .fig .f2t.c1, .fig .f2t.c2, .fig .f2r, .fig .f2ring, .fig .sBin, .fig .sBout, .fig .sBl, .fig .rBd { opacity: 0; } .fig .sBb { opacity: 1; } .fig .sBbox { fill-opacity: 0; } .fig .rBl { stroke-dashoffset: 0; } .fig .goal { fill-opacity: .9; } }
  .paused .fig * { animation-play-state: paused !important; }
  .fig .st { stroke: #fff; stroke-width: 1.4; fill: none; }
  .fig .dim { stroke: #3a3a3a; stroke-width: 1.2; fill: none; }
  .fig .lbl { fill: #8a8a8a; font: 10px "Geist Mono", ui-monospace, monospace; }
  .fig .flow { stroke-dasharray: 4 6; animation: flow 1.6s linear infinite; }
  .fig .spin { transform-box: fill-box; transform-origin: center; animation: spin 6s linear infinite; }

  .fig .f1l { animation: f1lbl 6s ease-in-out infinite; }
  @keyframes f1lbl { 0%, 60% { opacity: 0; } 68%, 92% { opacity: 1; } 100% { opacity: 0; } }

  .fig .att { stroke-dasharray: 100; stroke-dashoffset: 100; }
  .fig .att.c1 { animation: f2c1 9s linear infinite; } .fig .att.c2 { animation: f2c2 9s linear infinite; } .fig .att.c3 { animation: f2c3 9s linear infinite; }
  @keyframes f2c1 { 0% { stroke-dashoffset: 100; opacity: 1; } 20%, 30% { stroke-dashoffset: 0; opacity: 1; } 36%, 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes f2c2 { 0%, 36% { stroke-dashoffset: 100; opacity: 1; } 56%, 64% { stroke-dashoffset: 0; opacity: 1; } 70%, 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes f2c3 { 0%, 70% { stroke-dashoffset: 100; opacity: 1; } 90%, 97% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  .fig .f2d.c1 { animation: f2d1 9s linear infinite; } .fig .f2d.c2 { animation: f2d2 9s linear infinite; } .fig .f2d.c3 { animation: f2d3 9s linear infinite; }
  @keyframes f2d1 { 0% { offset-distance: 0%; opacity: 1; } 20%, 30% { offset-distance: 100%; opacity: 1; } 36%, 100% { offset-distance: 100%; opacity: 0; } }
  @keyframes f2d2 { 0%, 36% { offset-distance: 0%; opacity: 0; } 37% { opacity: 1; } 56%, 64% { offset-distance: 100%; opacity: 1; } 70%, 100% { offset-distance: 100%; opacity: 0; } }
  @keyframes f2d3 { 0%, 70% { offset-distance: 0%; opacity: 0; } 71% { opacity: 1; } 90%, 97% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
  .fig .f2r { animation: f2ret 9s linear infinite; }
  @keyframes f2ret { 0%, 21% { opacity: 0; } 25%, 33% { opacity: 1; } 37%, 57% { opacity: 0; } 61%, 67% { opacity: 1; } 71%, 100% { opacity: 0; } }
  .fig .f2ring { transform-box: fill-box; transform-origin: center; animation: f2ring 9s ease-out infinite; }
  @keyframes f2ring { 0%, 33% { transform: scale(1); opacity: 0; } 34% { transform: scale(1); opacity: .7; } 40%, 67% { transform: scale(1.5); opacity: 0; } 68% { transform: scale(1); opacity: .7; } 74%, 100% { transform: scale(1.5); opacity: 0; } }
  .fig .f2t { animation: 9s linear infinite; }
  .fig .f2t.c1 { animation-name: f2t1 } .fig .f2t.c2 { animation-name: f2t2 } .fig .f2t.c3 { animation-name: f2t3 }
  @keyframes f2t1 { 0%, 20% { opacity: 0; } 22%, 33% { opacity: 1; } 36%, 100% { opacity: 0; } }
  @keyframes f2t2 { 0%, 56% { opacity: 0; } 58%, 67% { opacity: 1; } 70%, 100% { opacity: 0; } }
  @keyframes f2t3 { 0%, 90% { opacity: 0; } 92%, 100% { opacity: 1; } }

  .fig .eB { transform-box: fill-box; transform-origin: left; animation: eBfill 6s ease-in-out infinite; }
  @keyframes eBfill { 0%, 10% { transform: scaleX(0); } 40%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
  .fig .sBin { animation: sBin 4s ease-in-out infinite; }
  @keyframes sBin { 0% { offset-distance: 0%; opacity: 0; } 5% { opacity: 1; } 35% { offset-distance: 100%; opacity: 1; } 42%, 100% { offset-distance: 100%; opacity: 0; } }
  .fig .sBbox { animation: sBbox 4s linear infinite; }
  @keyframes sBbox { 0%, 42% { fill-opacity: 0; } 46% { fill-opacity: .9; } 54%, 100% { fill-opacity: 0; } }
  .fig .sBout { animation: sBout 4s ease-in-out infinite; }
  @keyframes sBout { 0%, 50% { offset-distance: 0%; opacity: 0; } 52% { opacity: 1; } 75% { offset-distance: 100%; opacity: 1; } 80%, 100% { offset-distance: 100%; opacity: 0; } }
  .fig .sBl { animation: sBl 4s linear infinite; }
  .fig .sBb { animation: sBb 4s linear infinite; }
  @keyframes sBb { 0%, 44% { opacity: 1; } 48%, 62% { opacity: 0; } 66%, 100% { opacity: 1; } }
  @keyframes sBl { 0%, 44% { opacity: 0; } 48%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
  .fig .rBd { animation: rBd 8s ease-in-out infinite; }
  @keyframes rBd { 0% { offset-distance: 0%; opacity: 0; } 3% { opacity: 1; } 25% { offset-distance: 100%; opacity: 1; } 30%, 100% { offset-distance: 100%; opacity: 0; } }
  .fig .rBl { stroke-dasharray: 100; stroke-dashoffset: 100; animation: rBl 8s linear infinite; }
  @keyframes rBl { 0%, 4% { stroke-dashoffset: 100; } 25%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
  .fig .goal { animation: goal 9s linear infinite; }
  @keyframes goal { 0%, 88% { fill-opacity: 0; } 90%, 97% { fill-opacity: .9; } 100% { fill-opacity: 0; } }
  @keyframes flow { to { stroke-dashoffset: -20; } }
  @keyframes spin { to { transform: rotate(360deg); } }

  h1, h2, h3 { letter-spacing: -0.02em; font-weight: 500; }
  .wrap { max-width: 960px; margin: 0 auto; padding: 0 28px; padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); }
  header { border-bottom: 1px solid var(--line); }
  .nav { display: flex; align-items: center; justify-content: space-between; height: 56px; font-size: 13px; }
  .nav nav { display: flex; gap: 24px; align-items: center; color: var(--fg-2); }
  .nav .btn { min-height: 34px; font-family: inherit; font-size: 13px; border-radius: 4px; }
  @media (pointer: coarse) { .nav .btn { min-height: 40px; } .nav nav a, footer a { padding: 8px 0; display: inline-block; } }
  .brand { color: #fff; } .brand span { color: var(--fg-3); }
  .btn { font-family: inherit; border-radius: 4px; }
  .hero { padding: 96px 0 80px; }
  .prompt { color: var(--fg-3); font-size: 13px; }
  .prompt b { color: #fff; font-weight: 500; }
  h1 { font-size: clamp(30px, 4.6vw, 58px); line-height: 1.12; margin: 36px 0 24px; max-width: 24ch; }
  h1 .g { color: var(--fg-3); }
  .sub { color: var(--fg-2); max-width: 66ch; line-height: 1.7; font-size: 15px; }
  .cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
  .snip { margin-top: 56px; max-width: 100%; overflow-x: auto; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 6px; font-size: 14px; line-height: 1.8; color: var(--fg-2); display: inline-block; min-width: min(100%, 420px); }
  .snip b { color: #fff; font-weight: 500; } .snip .c { color: var(--fg-3); }
  .sec { border-top: 1px solid var(--line); padding: 72px 0; }
  .h { display: flex; gap: 24px; align-items: baseline; margin-bottom: 28px; }
  .h .n { color: var(--fg-3); font-size: 13px; min-width: 40px; }
  .h h2 { font-size: clamp(22px, 3vw, 32px); line-height: 1.2; }
  .lead { color: var(--fg-2); max-width: 66ch; line-height: 1.7; margin-left: 64px; }
  .diagram { margin: 32px 0 0 64px; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
  .diagram canvas { display: block; width: 100%; height: 420px; }
  @media (max-width: 720px) { .wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .hero { padding: 56px 0 56px; } .sec { padding: 52px 0; } .close { padding: 64px 0; } .h { gap: 16px; margin-bottom: 20px; } .h .n { min-width: 28px; } .lead, .diagram, .step { margin-left: 0; } .diagram canvas { height: 300px; } .snip { margin-top: 36px; padding: 14px 16px; font-size: 13px; } .read { font-size: 12px; gap: 10px 16px; padding: 12px 14px; } .nav { height: 52px; } }
  @media (max-width: 400px) { .nav nav { gap: 14px; } h1 { font-size: 27px; } .cta .btn { width: 100%; } .diagram canvas { height: 260px; } .close h2 { font-size: 24px; } }
  @media (min-width: 721px) and (max-width: 900px) { .step { grid-template-columns: 1fr 200px; gap: 24px; } .step .fig { width: 200px; } }
  @media (max-height: 480px) and (orientation: landscape) { .hero { padding: 40px 0; } .diagram canvas { height: 260px; } }
  .step { margin-left: 64px; display: grid; grid-template-columns: 1fr 240px; gap: 32px; padding: 28px 0; border-top: 1px dashed var(--line-2); align-items: center; }
  .step:last-child { border-bottom: 1px dashed var(--line-2); }
  .step h3 { font-size: 17px; margin-bottom: 8px; } .step h3 span { color: var(--fg-3); margin-right: 12px; }
  .step p { color: var(--fg-2); line-height: 1.7; max-width: 62ch; }
  .step .fig { width: 240px; max-width: 100%; aspect-ratio: 2 / 1; justify-self: end; } .step .fig svg { width: 100%; height: 100%; overflow: visible; }
  @media (max-width: 720px) { .step { grid-template-columns: 1fr; } .step .fig { justify-self: start; } }
  .close { border-top: 1px solid var(--line); padding: 96px 0; }
  .close h2 { font-size: clamp(26px, 4vw, 44px); line-height: 1.15; max-width: 22ch; margin-bottom: 16px; }
  .close p { color: var(--fg-2); max-width: 60ch; margin-bottom: 28px; line-height: 1.7; }
  footer { border-top: 1px solid var(--line); padding: 24px 0; font-size: 12.5px; color: var(--fg-3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

  /* team page */
  .person { margin-left: 0; grid-template-columns: 120px 1fr; gap: 28px; align-items: start; }
  .person img { display: block; width: 120px; height: 120px; border: 1px solid var(--line-2); border-radius: 4px; object-fit: cover; }
  .person h3 span { color: var(--fg-3); margin-left: 12px; }
  .person .links { margin-top: 14px; font-size: 13px; } .person .links a { color: #fff; }
  @media (max-width: 720px) { .person { grid-template-columns: 1fr; } }
  /* 404 */
  .nf { padding: 120px 0; } .nf h1 { margin: 0 0 16px; } .nf p { color: var(--fg-2); margin-bottom: 24px; }

  /* proof table */
  .proof { width: calc(100% - 64px); border-collapse: collapse; margin: 32px 0 0 64px; font-size: 13px; }
  .proof th, .proof td { text-align: left; padding: 12px 14px; border-top: 1px dashed var(--line-2); }
  .proof thead th { color: var(--fg-3); font-weight: 500; font-size: 12px; border-top: 0; }
  .proof td:first-child { color: #fff; }
  .proof th:last-child, .proof td:last-child { text-align: right; }
  .proof tbody tr:last-child td { border-bottom: 1px dashed var(--line-2); }
  .note { margin: 16px 0 0 64px; color: var(--fg-2); font-size: 13px; }

  /* faq */
  .faq { margin-left: 64px; }
  .faq details { border-top: 1px dashed var(--line-2); }
  .faq details:last-child { border-bottom: 1px dashed var(--line-2); }
  .faq summary { cursor: pointer; list-style: none; padding: 16px 0; color: #fff; font-size: 15px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::before { content: "+ "; color: var(--fg-3); }
  .faq details[open] summary::before { content: "− "; }
  .faq p { color: var(--fg-2); font-size: 14px; line-height: 1.7; padding: 0 0 18px; max-width: 60ch; }

  /* close extras */
  .cred { margin-top: 20px; color: var(--fg-3); font-size: 12.5px; }

  @media (max-width: 720px) { .proof, .note, .faq { margin-left: 0; } .proof { width: 100%; } }