/* Night on the Silk Road, then down through dirt, rock and magma. One light source on the surface: SILK, burning.
   Modern type and glass against an old, hand-drawn-in-characters world. */
:root{--seam:clamp(160px,24vh,260px);--blend:clamp(260px,50vh,520px);--hero-blend:clamp(140px,22vh,240px);--hero-fade:linear-gradient(#000,rgba(0,0,0,1.000) calc(100% - var(--hero-blend) * 1.000),rgba(0,0,0,0.957) calc(100% - var(--hero-blend) * 0.875),rgba(0,0,0,0.844) calc(100% - var(--hero-blend) * 0.750),rgba(0,0,0,0.684) calc(100% - var(--hero-blend) * 0.625),rgba(0,0,0,0.500) calc(100% - var(--hero-blend) * 0.500),rgba(0,0,0,0.316) calc(100% - var(--hero-blend) * 0.375),rgba(0,0,0,0.156) calc(100% - var(--hero-blend) * 0.250),rgba(0,0,0,0.043) calc(100% - var(--hero-blend) * 0.125),rgba(0,0,0,0.000) calc(100% - var(--hero-blend) * 0.000));--fade-out:linear-gradient(#000,rgba(0,0,0,1.000) calc(100% - var(--blend) * 1.000),rgba(0,0,0,0.957) calc(100% - var(--blend) * 0.875),rgba(0,0,0,0.844) calc(100% - var(--blend) * 0.750),rgba(0,0,0,0.684) calc(100% - var(--blend) * 0.625),rgba(0,0,0,0.500) calc(100% - var(--blend) * 0.500),rgba(0,0,0,0.316) calc(100% - var(--blend) * 0.375),rgba(0,0,0,0.156) calc(100% - var(--blend) * 0.250),rgba(0,0,0,0.043) calc(100% - var(--blend) * 0.125),rgba(0,0,0,0.000) calc(100% - var(--blend) * 0.000));color-scheme:dark;--night:#07080d;--text:#f4e7d2;--muted:#c2b098;--ember:#e7a768;--sans:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;--art-font:700 1em/1.1 Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono","Courier New",monospace;
--art-cols:340;--art-rows:105;--word-cols:64;--word-rows:28;--fire-at:.72;
--cell:calc(100vw / (var(--art-cols) * .602));
--surface-h:max(100svh,780px);
--word-top:clamp(66px,9vh,96px);
--word-size:min(calc(92vw / (var(--word-cols) * .602)),calc((var(--surface-h) - 500px) / (var(--word-rows) * 1.1)),14px);
--fire-y:calc(var(--word-top) + var(--word-rows) * 1.1 * var(--word-size) * var(--fire-at));--fire-bottom:calc(var(--word-top) + var(--word-rows) * 1.1 * var(--word-size))}
*{box-sizing:border-box}html{scrollbar-width:none;background:#0b0806;scroll-behavior:smooth}body{margin:0;color:var(--text);font:400 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}h1,h2,p{margin:0}a{color:inherit;-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--text);outline-offset:3px}html::-webkit-scrollbar{display:none}::selection{background:#ffb066;color:var(--night)}
.skip{position:absolute;left:16px;top:-80px;z-index:10;padding:10px 16px;background:var(--text);color:var(--night)}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* Character art. Glyphs and colour maps come from art.css and depth.css. */
.art,.strata{--tex-out:linear-gradient(#000,rgba(0,0,0,1.000) calc(100% - var(--b) * 1.0000),rgba(0,0,0,0.957) calc(100% - var(--b) * 0.9187),rgba(0,0,0,0.844) calc(100% - var(--b) * 0.8375),rgba(0,0,0,0.684) calc(100% - var(--b) * 0.7562),rgba(0,0,0,0.500) calc(100% - var(--b) * 0.6750),rgba(0,0,0,0.316) calc(100% - var(--b) * 0.5938),rgba(0,0,0,0.156) calc(100% - var(--b) * 0.5125),rgba(0,0,0,0.043) calc(100% - var(--b) * 0.4313),rgba(0,0,0,0.000) calc(100% - var(--b) * 0.3500));--tex-in:linear-gradient(transparent,rgba(0,0,0,0.000) calc(var(--in) * 0.3500),rgba(0,0,0,0.043) calc(var(--in) * 0.4312),rgba(0,0,0,0.156) calc(var(--in) * 0.5125),rgba(0,0,0,0.316) calc(var(--in) * 0.5938),rgba(0,0,0,0.500) calc(var(--in) * 0.6750),rgba(0,0,0,0.684) calc(var(--in) * 0.7562),rgba(0,0,0,0.844) calc(var(--in) * 0.8375),rgba(0,0,0,0.957) calc(var(--in) * 0.9187),rgba(0,0,0,1.000) calc(var(--in) * 1.0000),#000)}
.art,.wordmark,.stars,.strata{font:var(--art-font);white-space:pre;text-align:left;user-select:none;pointer-events:none}.art::before,.wordmark::before,.stars::before,.strata::before{display:block}
.art,.strata,.wordmark{color:transparent;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;image-rendering:pixelated}
/* Surface */
.surface{position:relative;z-index:4;height:var(--surface-h);isolation:isolate}
/* Darken the lower part of the scene so the hero text reads; it fades out with the scenery into the dirt. */
.surface::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(rgba(7,5,4,0) 42%,rgba(7,5,4,.55) 62%,rgba(7,5,4,.82) 80%,rgba(7,5,4,.9));-webkit-mask-image:var(--hero-fade);mask-image:var(--hero-fade)}
.surface>.sky,.surface>.glow,.surface>.stars{-webkit-mask-image:linear-gradient(transparent,#000 var(--seam)),var(--hero-fade);-webkit-mask-composite:source-in;mask-image:linear-gradient(transparent,#000 var(--seam)),var(--hero-fade);mask-composite:intersect;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.surface>.art{--b:var(--hero-blend);-webkit-mask-image:var(--tex-out);mask-image:var(--tex-out)}
.surface>.stars,.surface>.art{-webkit-mask-size:100% 100%;mask-size:100% 100%}
.sky{position:absolute;inset:0;z-index:-4;background:linear-gradient(#04050a,#0a0d16 52%,#0d0c10)}
.glow{position:absolute;inset:0;z-index:-3;background:radial-gradient(72vmax 50vmax at 50% var(--fire-y),rgba(255,138,52,.34),rgba(214,82,30,.11) 38%,rgba(0,0,0,0) 72%);will-change:opacity}
.stars{position:absolute;top:0;left:50%;z-index:-2;transform:translateX(-50%);font-size:var(--cell);width:calc(var(--cols) * 1ch);color:rgba(212,222,255,.5);-webkit-mask-image:linear-gradient(#000 25%,transparent 60%);mask-image:linear-gradient(#000 25%,transparent 60%)}
/* The painting's daylight colours (albedo) multiplied by the firelight: warm near SILK, falling to a cold night ambient. */
.art{position:absolute;left:50%;bottom:0;z-index:-1;transform:translateX(-50%);font-size:var(--cell);width:calc(var(--art-cols) * 1ch);height:calc(var(--art-rows) * 1.1em);overflow:hidden;background-image:radial-gradient(circle at 50% calc(var(--art-rows) * 1.1 * var(--cell) - var(--surface-h) + var(--fire-y)),#ffe9c6 0,#ffc07e 10vmax,#d9895a 24vmax,#8a6a6c 42vmax,#5a6284 64vmax,#46506e 95vmax),var(--albedo);background-size:100% 100%;background-blend-mode:multiply}
.scene{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;padding-top:var(--word-top)}
.wordmark{position:relative;flex:none;font-size:var(--word-size);width:calc(var(--word-cols) * 1ch);background-image:url("/wordmark.webp");background-size:100% 100%;filter:drop-shadow(0 0 3px rgba(255,170,70,.7)) drop-shadow(0 0 16px rgba(255,100,30,.5))}
.wordmark.live{background:none;color:inherit}.wordmark.live::before{display:none}.wordmark canvas{display:block}
.surface .copy{position:relative;flex:none;margin-top:auto;display:flex;flex-direction:column;align-items:center;padding:clamp(16px,3vh,28px) 20px clamp(30px,6vh,64px);text-align:center}
.kicker,.depth{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
h1{margin-top:10px;font-size:clamp(34px,4.6vw,60px);font-weight:600;line-height:1.04;letter-spacing:-.03em;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.8)}
.copy p:not(.kicker):not(.depth):not(.fine){max-width:560px;margin-top:12px;font-size:clamp(17px,1.6vw,20px);color:var(--muted);text-wrap:balance;text-shadow:0 1px 14px rgba(0,0,0,.85)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(18px,3vh,28px)}
/* Underground */
/* Layers overlap and crossfade, so the descent has no hard seams. */
.layer{position:relative;display:grid;align-content:center;justify-items:center;min-height:calc(max(100svh,560px) + var(--blend));padding-block:calc(var(--blend) * .8);margin-top:calc(var(--blend) * -1);overflow:hidden;isolation:isolate;-webkit-mask-image:var(--fade-out);mask-image:var(--fade-out)}
.surface .copy::before{display:none}.dirt{z-index:3;margin-top:calc(var(--hero-blend) * -1);min-height:calc(max(100svh,560px) + var(--hero-blend));padding-top:calc(var(--hero-blend) + 40px)}.rock{z-index:2;--scrim:rgba(6,7,9,.86)}.magma .copy{--scrim:rgba(30,9,4,.84)}.magma{z-index:1}

.dirt{background:#0d0906}.rock{background:#090a0d}.magma{background:#160604}
.strata{position:absolute;top:0;bottom:0;left:50%;z-index:-1;transform:translateX(-50%);overflow:hidden;font-size:calc(100vw / (var(--depth-cols) * .602));width:calc(var(--depth-cols) * 1ch);-webkit-mask-image:var(--tex-in),var(--tex-out);-webkit-mask-composite:source-in;mask-image:var(--tex-in),var(--tex-out);mask-composite:intersect}
.layer{--b:var(--blend);--in:var(--blend)}.dirt{--in:var(--hero-blend)}
.magma .strata{filter:drop-shadow(0 0 4px rgba(255,110,30,.5))}.strata canvas{position:absolute;top:0;left:0;display:block}.magma.live .strata{background:none}.magma.live .strata::before{visibility:hidden}
.magma::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(90% 70% at 50% 110%,rgba(255,120,40,.28),rgba(0,0,0,0) 70%);mix-blend-mode:screen}
.copy::before{content:"";position:absolute;inset:-28px -44px;z-index:-1;border-radius:48px;background:var(--scrim,rgba(7,5,4,.86));box-shadow:0 0 120px 90px var(--scrim,rgba(7,5,4,.86));pointer-events:none}
.layer .copy{position:relative;z-index:1;width:min(1120px,calc(100% - 48px))}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(32px,6vw,96px);text-align:left}
.split .text{display:flex;flex-direction:column;align-items:flex-start}.split .text p{margin-top:14px;font-size:clamp(16px,1.25vw,18px)}.split .actions{justify-content:flex-start}
h2{font-size:clamp(26px,2.5vw,36px);font-weight:600;line-height:1.08;letter-spacing:-.028em;text-wrap:balance;text-shadow:0 2px 20px rgba(0,0,0,.85)}
.rock .depth{color:#a9b4c4}
/* Proof in the dirt: four plain two-bar charts. Bars are worms that grow in. Same old-world palette as the scene. */
.chart{--glyph:clamp(7px,.62vw,9px);--max:64;margin:0}.chart figcaption{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.chart figcaption b{font-size:clamp(20px,1.9vw,28px);font-weight:700;line-height:1.2;letter-spacing:-.015em;color:var(--text)}
.better{flex:none;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ember)}
.chart table{width:100%;table-layout:fixed;border-collapse:collapse}.bars col.label{width:96px}
.bars th{padding:12px 12px 12px 0;font-size:19px;font-weight:700;text-align:left;color:var(--text)}.bars .other th{font-weight:500;color:#cdb79c}.bars td{padding:8px 0}
.meter{display:flex;align-items:center;gap:16px;min-height:52px}

.num{font-size:clamp(30px,3.4vw,52px);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}.other .num{font-weight:600;color:#b59a7c}
/* Bars are bands of tiny characters, three rows tall: a worm in the dirt, stone in the rock, lava in the magma. */
.band{display:flex;justify-content:flex-end;flex:none;overflow:hidden;font:700 var(--glyph)/1 Menlo,Consolas,"DejaVu Sans Mono",monospace;white-space:pre}.band>span{flex:none}
.band.worm{color:#f2a497;text-shadow:0 0 6px rgba(236,120,110,.45)}
.band.stone{color:#c9d1dc;text-shadow:0 0 5px rgba(170,190,215,.3)}
.band.lava{color:#ffb35a;text-shadow:0 0 6px rgba(255,120,30,.7),0 0 14px rgba(255,80,20,.4)}
.other .band{filter:saturate(.35) brightness(.75);text-shadow:none}
.axis{display:flex;justify-content:space-between;width:calc(var(--max) * 1ch);margin:8px 0 0 96px;padding-top:6px;border-top:1px solid rgba(231,167,104,.45);font:700 var(--glyph)/1 Menlo,Consolas,"DejaVu Sans Mono",monospace}.axis span{font:600 13px/1.3 var(--sans);color:#b0906f;white-space:nowrap}.axis span:last-child{margin-right:-.4em}
.rock .axis{border-top-color:rgba(190,200,215,.4)}.rock .axis span{color:#9aa6b6}
.proof .fine code{font:12px Menlo,Consolas,monospace;color:#d9c3a6}.magma .depth{color:#ffb070}
.fine{margin-top:18px;font-size:13px;color:var(--muted)}
/* Liquid glass, for interface elements only. Each rim catches light from where it comes from: the fire above, the magma below. */
.glass{position:relative;isolation:isolate;border-radius:999px;color:var(--text);background:linear-gradient(var(--lit,180deg),rgba(255,176,102,.2),rgba(255,255,255,.05) 55%,rgba(255,255,255,.08));border:1px solid rgba(255,222,186,.14);box-shadow:inset 0 1px 0 rgba(255,232,206,.2),inset 0 -1px 0 rgba(0,0,0,.3),0 16px 34px -16px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(14px) saturate(1.5) brightness(1.12);backdrop-filter:blur(14px) saturate(1.5) brightness(1.12)}
.glass::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(var(--lit,180deg),rgba(255,196,128,.95),rgba(255,160,90,.25) 30%,rgba(255,255,255,.08) 60%,rgba(255,255,255,.18));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.bar{position:fixed;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px clamp(16px,3vw,32px);pointer-events:none}.bar>*{pointer-events:auto}
.tag{--lit:270deg;padding:7px 14px;font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--muted)}
.links{--lit:90deg;display:flex;padding:4px}.links a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:500}.links a:hover{background:rgba(255,210,160,.12)}.links svg{fill:none;stroke:currentColor;stroke-width:1.4}
.button{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 24px;text-decoration:none;font-size:16px;font-weight:600}.button:hover{background:linear-gradient(var(--lit,180deg),rgba(255,176,102,.32),rgba(255,255,255,.1))}.button.quiet{font-weight:500;color:var(--muted)}
.magma .glass{--lit:0deg}
@media(max-aspect-ratio:3/4){:root{--word-top:max(clamp(66px,9vh,96px),calc(var(--surface-h) * .25))}}@media(max-width:820px){.split{grid-template-columns:1fr;gap:28px}.chart{--glyph:min(9px,calc((100vw - 48px - 96px - 110px) / 64 / .602))}.num{font-size:34px}}@media(max-width:600px){.copy::before{inset:-16px -12px;border-radius:32px;box-shadow:0 0 70px 40px var(--scrim,rgba(7,5,4,.86))}}@media(max-width:480px){.tag{font-size:12px;padding:6px 11px}.links a{padding:0 11px;font-size:14px}.button{padding:0 20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.glass{background:#1a1712;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--text)}.glass::before{display:none}:root{--muted:#e2d4bf}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(26,23,18,.9)}}
@media(forced-colors:active){.art,.stars,.strata,.sky,.glow,.surface::after,.magma::after{display:none}.wordmark{color:CanvasText;background:none;filter:none}.glass{border:1px solid CanvasText}.glass::before{display:none}}

.loop-strip{position:relative;z-index:0;height:var(--blend);margin-top:calc(var(--blend) * -1);background:#04050a}
/* Install commands in the magma layer: glass panel, left-aligned monospace. */
.install{margin:clamp(16px,2.6vh,24px) 0 0;max-width:100%;padding:14px 16px;border-radius:18px;text-align:left;font:500 11.5px/1.7 Menlo,Consolas,"DejaVu Sans Mono",monospace;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}.install code{font:inherit}
.split>*{min-width:0}.tag{white-space:nowrap}@media(max-width:480px){.links a[href="/llms.txt"]{display:none}.num{font-size:28px}}