/* Public "know more" page. Like the landing page it loads nothing else from
   the shell, because only /, /learn, /static/landing/* and fabricField.js are
   public. Fonts are copied here for the same reason.
   The plain page is the default: no JS, no WebGL, reduced motion and "Read as a
   page" all get it. html.lx-flight turns on the scroll flight and hides it. */
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexSans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url('../fonts/IBMPlexSans-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexSans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexSans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fira Code'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/FiraCode-Regular.woff2') format('woff2'); }
:root {
  color-scheme: dark;
  --lf-bg: #050708;
  --lm-panel: #0a0d0a;
  --lm-hair: #2a3026;
  --lm-ink: #f1f2ec;
  --lm-ink-2: #bcc0b4;
  --lm-ink-3: #8d9186;
  --lm-green: #95c23d;
  --lm-green-ink: #b6dc66;
  --lm-blue: #86bde6;
  --lm-focus: #d6f29a;
  --lm-data: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
  --lm-gutter: max(24px, 6vw);
}
* { box-sizing: border-box; }
html { background: var(--lf-bg); }
body { margin: 0; background: var(--lf-bg); color: var(--lm-ink); font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; overflow-x: hidden; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--lm-focus); outline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* Always on */
.lx-top { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px max(20px, 2vw); }
.lx-mark { white-space: nowrap; font-family: var(--lm-data); font-size: 12px; color: var(--lm-ink); text-decoration: none; }
.lx-talk { padding: 7px 18px; border: 1px solid var(--lm-ink-2); border-radius: 999px; font-family: var(--lm-data); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--lm-ink); text-decoration: none; white-space: nowrap; background: rgba(5, 7, 8, .5); transition: background .2s, color .2s, border-color .2s; }
.lx-talk:hover { background: var(--lm-green); border-color: var(--lm-green); color: #0a0d05; }
.lx-enter { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 999px; background: var(--lm-green); color: #0a0d05; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .18s ease, box-shadow .25s ease, background .2s; }
.lx-enter span { transition: transform .2s ease; }
.lx-enter:hover { background: #a8d44e; transform: translateY(-1px); box-shadow: 0 0 32px rgba(149, 194, 61, .45); }
.lx-enter:hover span { transform: translateX(4px); }
.lx-enter:active { transform: scale(.98); }
.lx-ghost { display: inline-flex; padding: 14px 24px; border-radius: 999px; border: 1px solid var(--lm-hair); color: var(--lm-ink); font-size: 15px; text-decoration: none; background: rgba(5, 7, 8, .6); transition: border-color .2s, color .2s; }
.lx-ghost:hover { border-color: var(--lm-green); color: var(--lm-green-ink); }

/* The flight's parts, off unless flying */
#lx-field, .lx-gate, .lx-world, .lx-close, .lx-dot, .lx-spacer, .lx-hud { display: none; }
.lx-foot { display: flex; justify-content: center; padding: 8px 0 32px; }
.lx-read { font-family: var(--lm-data); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--lm-ink-2); text-decoration: underline; text-underline-offset: 4px; }
.lx-read:hover { color: var(--lm-green-ink); }

/* Plain page */
.lm-intro { padding: 72px var(--lm-gutter) 16px; }
h1 { margin: 0; max-width: 16em; font-size: clamp(40px, 6.4vw, 92px); line-height: 1.02; font-weight: 400; letter-spacing: -.025em; text-wrap: balance; }
h1 em, .lm-close em, .lx-close em { font-style: italic; color: var(--lm-green-ink); }
.lm-intro p { margin: 22px 0 0; max-width: 34em; font-size: 18px; line-height: 1.5; color: var(--lm-ink-2); }
.lm-ch { padding: 64px var(--lm-gutter); }
.lm-copy { max-width: 35rem; }
.lm-kicker { margin: 0 0 14px; font-family: var(--lm-data); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lm-green-ink); }
h2 { margin: 0 0 22px; font-size: clamp(32px, 4vw, 56px); line-height: 1.06; font-weight: 400; letter-spacing: -.022em; text-wrap: balance; }
.lm-copy > p { margin: 0 0 16px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: var(--lm-ink-2); }
.lm-copy > .lm-kicker { font-size: 12px; color: var(--lm-green-ink); }
.lm-copy > .lm-small { margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--lm-ink-3); }
.lm-small b { color: var(--lm-ink-2); font-weight: 500; }
.lm-asks { margin-top: 24px; display: grid; gap: 10px; }
.lm-asks li { padding-left: 18px; border-left: 2px solid var(--lm-green); font-size: 17px; line-height: 1.35; color: var(--lm-ink); }
.lm-zones { margin: 22px 0 0; display: grid; }
.lm-zones div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--lm-hair); }
.lm-zones dt { font-family: var(--lm-data); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--lm-ink-3); padding-top: 3px; }
.lm-zones dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--lm-ink-2); }
.lm-zone-on dt { color: var(--lm-green-ink); }
.lm-zone-on dd { color: var(--lm-ink); }
.lm-exchange { margin: 22px 0; padding: 20px; background: var(--lm-panel); border: 1px solid var(--lm-hair); }
.lm-exchange figcaption { margin-bottom: 12px; font-family: var(--lm-data); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--lm-ink-3); }
.lm-q { margin: 0 0 10px; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--lm-ink); }
.lm-a { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--lm-ink-2); }
.lm-cite { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--lm-data); font-size: 11px; color: var(--lm-blue); }
.lm-cite span { padding: 3px 8px; border: 1px solid rgba(134, 189, 230, .35); }
.lm-traits { display: grid; gap: 6px; font-size: 15px; line-height: 1.45; color: var(--lm-ink-2); }
.lm-traits b { color: var(--lm-ink); font-weight: 500; }
.lm-rules { display: grid; margin-top: 8px; }
.lm-rules li { padding: 13px 0; border-top: 1px solid var(--lm-hair); font-size: 15px; line-height: 1.45; color: var(--lm-ink-2); }
.lm-rules b { display: block; margin-bottom: 2px; font-size: 16px; font-weight: 500; color: var(--lm-ink); }
.lm-hubs { display: grid; margin-top: 10px; }
.lm-hubs li { padding: 12px 0; border-top: 1px solid var(--lm-hair); }
.lm-hubs b { display: block; font-size: 16px; font-weight: 500; color: var(--lm-ink); }
.lm-hubs span { font-size: 15px; line-height: 1.4; color: var(--lm-ink-2); }
.lm-close { padding: 96px var(--lm-gutter); }
.lm-close-in { max-width: 56rem; margin: 0 auto; text-align: center; }
.lm-close h2 { font-size: clamp(38px, 6.4vw, 92px); line-height: 1.02; font-weight: 300; }
.lm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 12px; }
.lm-actions .lm-enter { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 999px; background: var(--lm-green); color: #0a0d05; font-size: 15px; font-weight: 600; text-decoration: none; }
.lm-actions .lm-ghost { display: inline-flex; padding: 14px 24px; border-radius: 999px; border: 1px solid var(--lm-hair); color: var(--lm-ink); font-size: 15px; text-decoration: none; }

/* Flight */
.lx-flight main, .lx-flight .lm-intro { display: none; }
.lx-flight .lx-top { position: fixed; left: 0; right: 0; }
.lx-flight #lx-field { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.lx-flight .lx-spacer { display: block; height: 1700vh; }
.lx-flight .lx-world { display: block; position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.lx-world > * { position: absolute; left: 0; top: 0; margin: 0; visibility: hidden; will-change: transform, opacity; transform-origin: 50% 50%; }
.lx-w { font-family: var(--lm-data); font-size: clamp(54px, 10vw, 150px); font-style: italic; font-weight: 400; letter-spacing: .24em; line-height: 1; white-space: nowrap; text-transform: uppercase; color: #e9f5c9; text-shadow: 0 0 8px rgba(182, 220, 102, .75), 0 0 34px rgba(149, 194, 61, .55), 0 0 90px rgba(149, 194, 61, .3); }
.lx-w-soft { font-size: clamp(22px, 3.4vw, 46px); letter-spacing: .16em; }
.lx-t { width: max-content; max-width: min(88vw, 34em); white-space: pre-line; font-family: var(--lm-data); font-size: clamp(13px, 1.25vw, 18px); line-height: 1.55; color: #e6edd2; text-shadow: 0 0 3px #050708, 0 0 8px #050708, 0 0 16px rgba(149, 194, 61, .5); }
.lx-n { font-family: var(--lm-data); font-size: clamp(14px, 1.6vw, 22px); color: #dfe8c8; white-space: nowrap; text-shadow: 0 0 12px rgba(149, 194, 61, .6), 0 1px 2px #050708; }
.lx-n-on { color: #d6f29a; }
.lx-n-q { color: #d6f29a; }
.lx-n-q em { display: block; margin-top: 4px; font-size: .62em; font-style: normal; color: var(--lm-ink-2); white-space: normal; width: 17em; }
.lx-card { width: min(84vw, 25rem); padding: 20px; display: grid; gap: 10px; color: var(--lm-ink); background: rgba(12, 18, 8, .86); border: 1px solid rgba(149, 194, 61, .55); border-radius: 14px; box-shadow: 0 0 44px rgba(149, 194, 61, .32), 0 0 140px rgba(149, 194, 61, .16); }
.lx-card small { font-family: var(--lm-data); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--lm-ink-3); }
.lx-card b { font-size: 16px; font-weight: 500; line-height: 1.3; }
.lx-card span { font-size: 14px; line-height: 1.45; color: var(--lm-ink-2); }
.lx-card i { font-style: normal; font-family: var(--lm-data); font-size: 10.5px; color: var(--lm-blue); }
.lx-flight .lx-gate { display: flex; position: fixed; inset: 0; z-index: 8; align-items: center; justify-content: center; background: var(--lf-bg); transition: opacity 1.1s ease; }
.lx-flight.lx-in .lx-gate { opacity: 0; pointer-events: none; }
.lx-gate-line { position: absolute; left: 50%; top: 50%; width: min(60vw, 560px); height: 1px; margin-left: calc(min(60vw, 560px) / -2); background: linear-gradient(90deg, transparent, rgba(182, 220, 102, .75) 28%, rgba(182, 220, 102, .75) 72%, transparent); transform: scaleX(.12); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.lx-ready .lx-gate-line { transform: scaleX(1); }
.lx-begin { position: relative; padding: 6px 14px; background: var(--lf-bg); font-family: var(--lm-data); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--lm-ink-3); cursor: default; transition: color .3s, text-shadow .3s; }
.lx-ready .lx-begin { color: var(--lm-ink); cursor: pointer; }
.lx-ready .lx-begin:hover { color: #d6f29a; text-shadow: 0 0 14px rgba(182, 220, 102, .9); }
.lx-flight .lx-close { display: block; position: fixed; left: 50%; top: 50%; z-index: 3; width: min(92vw, 56rem); text-align: center; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; }
.lx-close h2 { font-size: clamp(36px, 6.2vw, 88px); line-height: 1.02; font-weight: 400; text-shadow: 0 0 28px rgba(5, 7, 8, .9); }
.lx-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 12px; }
.lx-flight .lx-dot { display: block; position: fixed; left: 0; top: 0; z-index: 4; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #f1f7dc; box-shadow: 0 0 12px 3px rgba(214, 242, 154, .85), 0 0 46px 12px rgba(149, 194, 61, .3); pointer-events: none; }
.lx-flight .lx-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; justify-content: space-between; align-items: center; padding: 16px max(20px, 2vw); }
.lx-flight .lx-hud { display: block; font-family: var(--lm-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--lm-green-ink); }
@media (max-width: 819px) { .lx-t { max-width: 78vw; } }
@media (hover: none) { .lx-flight .lx-dot { opacity: .7; } }
.lm-legal { margin: 18px 0 0; font-size: 12px; color: var(--lm-ink-3); }
.lm-legal a { color: inherit; }
/* The needle: mouse only, added by the script on the first mouse move. Its tip is the hot spot. */
.lx-tool { display: none; }
.lx-flight.lx-in.lx-tool-on, .lx-flight.lx-in.lx-tool-on body { cursor: none; }
.lx-flight.lx-in.lx-tool-on a, .lx-flight.lx-in.lx-tool-on button { cursor: pointer; }
.lx-flight.lx-in.lx-tool-on .lx-tool { display: block; position: fixed; left: 0; top: 0; z-index: 7; width: 42px; height: 42px; margin: -2px 0 0 -2px; pointer-events: none; transition: opacity .15s ease; }
.lx-flight.lx-in.lx-tool-on .lx-dot { width: 0; height: 0; margin: 0; background: transparent; box-shadow: 0 0 46px 20px rgba(149, 194, 61, .13); }
.lx-tool.lx-away { opacity: 0; }
.lx-tool svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 2px 2px; transition: transform .35s ease; }
.lx-needle { fill: #d9dfcc; }
.lx-pulling .lx-tool svg { transform: rotate(-9deg); }
.lx-pulling, .lx-pulling * { user-select: none; -webkit-user-select: none; }