@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{color-scheme:dark;--bg:#090f14;--panel:#0d151c;--ink:#e9f0ee;--muted:#92a6ae;--mint:#67dfc2;--blue:#4d7cff;--line:#26343d;--mono:'IBM Plex Mono',monospace;--display:'Space Grotesk',sans-serif;--header-h:104px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px}a{color:inherit;text-decoration:none}a:hover{color:var(--mint)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--mint);outline-offset:5px}main,footer{max-width:1536px;margin:auto}header{height:104px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,calc((100vw - 1382px)/2));position:sticky;top:0;z-index:20;width:100vw;margin-left:calc(50% - 50vw);background:rgba(9,15,20,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}.wordmark{font-family:var(--display);font-weight:600;font-size:32px;letter-spacing:-1px;display:flex;align-items:center;gap:12px}.wordmark span{color:var(--mint);font-size:42px}.version{font-family:var(--mono);color:var(--mint);border:1px solid #345349;padding:7px 12px}.eyebrow{font:12px var(--mono);letter-spacing:1.8px;color:var(--mint);margin:0 0 26px}h1{font:500 clamp(56px,6.15vw,94px)/1.05 var(--display);letter-spacing:-5px;margin:0 0 28px;position:relative;z-index:1}h1 em{font-style:normal;color:var(--mint)}.hero-copy{position:relative;z-index:1}.lede{font-size:20px;line-height:1.6;color:var(--muted);max-width:425px;margin-bottom:34px}.hero-actions{display:flex;gap:30px;align-items:center}.button{background:var(--mint);color:#0a211b;display:flex;gap:36px;align-items:center;padding:16px 21px;font-weight:600;font-size:15px}.button:hover{background:#99f5de;color:#06130f}.text-link{font-size:14px;display:flex;gap:20px;align-items:center}.signature{display:flex;align-items:center;gap:12px;margin-top:46px;font:12px var(--mono);letter-spacing:1px;color:var(--muted)}.mini-wave{font-size:26px;color:var(--mint)}.replication{position:relative;min-width:0;margin-left:12px;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}.art-meta,.art-controls{font:12px var(--mono);letter-spacing:1px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:14px}.art-meta{padding-top:12px}.art-meta button{font:12px var(--mono);color:var(--muted);background:none;border:0;padding:8px}.art-controls{border-top:1px solid var(--line);padding-top:19px;flex-wrap:wrap}.art-controls label{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:0}input[type=range]{width:90px;accent-color:var(--mint)}output{width:30px}canvas{display:block;width:100%;height:440px;background:radial-gradient(ellipse,#112829 0%,#090f14 68%)}.divider{border-block:1px solid var(--line);display:flex;align-items:center;gap:24px;margin:0 5%;padding:26px 0}.divider>span:first-child{font-size:32px;color:var(--mint)}.divider p{margin:0;font-size:17px}.aside{margin-left:auto;color:var(--muted);font:12px var(--mono);letter-spacing:1px}.section{padding:110px 5% 0}.section-top{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:48px}h2{font:500 clamp(36px,3.5vw,54px)/1.1 var(--display);letter-spacing:-2px;margin:0}.section-top>p{line-height:1.8;color:var(--muted);font-size:16px;margin:0}.wizard-layout{display:grid;grid-template-columns:310px 1fr;gap:42px}.screen-nav{display:flex;flex-direction:column}.screen-nav button{background:none;border:0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:15px;padding:21px 0;text-align:left;color:var(--muted)}.screen-nav button>span{font:12px var(--mono);opacity:.6}.screen-nav button div{font-size:16px}.screen-nav small{display:block;font-size:12px;margin-top:6px;color:var(--muted)}.screen-nav b{margin-left:auto;font-weight:400;opacity:0}.screen-nav button[aria-selected=true]{color:var(--mint);border-color:var(--mint)}.screen-nav button[aria-selected=true] b{opacity:1}.screen-wrap{min-width:0;align-self:center}#screen{background:#0e1720;border:1px solid #2b3d49;box-shadow:0 20px 80px #0003}#screen img{width:100%;height:auto;display:block}.caption{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font:12px var(--mono);letter-spacing:.7px;margin-top:18px}.method-row{display:grid;grid-template-columns:80px 1fr 1.5fr 145px;gap:28px;align-items:start;border-top:1px solid var(--line);padding:32px 0}.number{color:var(--mint);font:13px var(--mono);padding-top:6px}h3{font:500 24px var(--display);margin:0}.method-row p{margin:0;line-height:1.7;color:var(--muted);max-width:510px}.tag{font:12px var(--mono);letter-spacing:1px;color:var(--muted);padding-top:8px;text-align:right}.start{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;padding-bottom:115px}.start>div>p:not(.eyebrow){line-height:1.8;color:var(--muted);margin:28px 0 0}.install{background:var(--panel);border:1px solid var(--line);padding:24px 28px;position:relative}.install-title{display:flex;justify-content:space-between;align-items:center;font:12px var(--mono);color:var(--muted);gap:12px}.install button{font:12px var(--mono);padding:8px 12px;color:var(--mint);border:1px solid #2d574d;background:transparent}.install pre{font:14px/1.7 var(--mono);color:var(--ink);overflow:auto;margin:28px 0}.comment{color:#798f99}.install p{color:var(--muted);font-size:13px;line-height:1.8;border-top:1px solid var(--line);padding-top:19px}.install p code{font:12px var(--mono);color:var(--mint)}#copy-status{font:12px var(--mono);color:var(--mint)}footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:30px;padding:34px 5%}footer p{font-size:14px;color:var(--muted)}footer>div{display:flex;gap:24px;align-items:center;font-size:13px}footer>div span{font:12px var(--mono);color:var(--muted)}@media(min-width:1600px){h1{font-size:94px}}@media(max-width:1050px){h1{letter-spacing:-3px;font-size:64px}.hero-actions{gap:18px}.button{gap:15px}.signature{font-size:12px;letter-spacing:0}.art-controls>span{display:none}.wizard-layout{grid-template-columns:260px 1fr;gap:24px}.aside{display:none}.method-row{grid-template-columns:40px 1fr 1.4fr}.tag{display:none}.start{gap:35px}}@media(max-width:760px){:root{--header-h:82px}header{height:82px}.hero-copy{max-width:600px}h1{font-size:clamp(47px,10vw,74px);letter-spacing:-2.8px}.lede{font-size:18px}.signature{margin-top:28px}.replication{margin:0}canvas{height:310px}.art-controls>span{display:block}.art-controls{font-size:12px}.divider{gap:14px}.divider p{font-size:15px;line-height:1.6}.section{padding-top:70px}.section-top{display:block;margin-bottom:30px}.section-top>p{margin-top:24px}.wizard-layout{display:flex;flex-direction:column;gap:25px}.screen-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}.screen-nav button{padding:16px 0;gap:12px}.screen-nav button div{font-size:14px}.screen-nav small{font-size:12px}.screen-nav b{display:none}.caption{font-size:12px}.method-row{grid-template-columns:35px 1fr;gap:15px;padding:26px 0}.method-row p{grid-column:2}.start{display:block;padding-bottom:65px}.install{margin-top:34px;padding:20px}.install pre{font-size:12px}footer{flex-wrap:wrap;gap:14px}footer>div{width:100%;padding-top:12px}.eyebrow{font-size:12px}h2{letter-spacing:-1.5px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.explanation{border-top:1px solid var(--line);margin:0 5%;padding:64px 0 0;display:grid;grid-template-columns:1.5fr 2fr;gap:50px}.explanation .eyebrow{padding-top:9px;margin:0 0 18px}.explanation-side{display:flex;flex-direction:column;gap:34px}.explanation-motto{margin:0;font:500 clamp(28px,2.6vw,42px)/1.3 var(--display);letter-spacing:-1px;color:var(--ink);max-width:480px}.explanation-motto span{color:var(--mint)}.prose{max-width:890px}.prose p{font-size:clamp(20px,1.8vw,27px);line-height:1.65;color:var(--ink);margin:0 0 28px}.prose p:last-child{color:var(--muted);margin-bottom:0}@media(max-width:760px){.explanation{display:block;padding-top:42px}.explanation-side{margin-bottom:28px}.explanation .eyebrow{margin-bottom:16px}}

/* Full-width replication field with scroll-driven slogan transition. */
body{overflow-x:clip}
.hero{position:relative;isolation:isolate;display:block;width:100vw;margin-left:calc(50% - 50vw);height:100vh;min-height:670px;padding:38px max(5vw,calc((100vw - 1382px)/2)) 42px;overflow:hidden}
.hero #field{position:absolute;inset:0;width:100%;height:100%;z-index:-2;background:#090f14}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(140deg,rgba(9,15,20,.65),transparent 50%,rgba(9,15,20,.55))}
.hero-copy{height:100%;display:flex;flex-direction:column;pointer-events:none;max-width:none}
.hero h1{position:relative;width:100%;margin:0}
.slogan-start{position:fixed;top:calc(var(--header-h) + 38px);left:max(5vw,calc((100vw - 1382px)/2));z-index:10;display:block;text-align:left;margin:0;font-size:clamp(58px,6.15vw,94px);line-height:1.04;letter-spacing:-.05em;text-shadow:0 3px 35px #090f14;color:var(--ink);pointer-events:none;will-change:opacity;transition:opacity .05s linear}
.slogan-start em{font-style:normal;color:var(--mint)}
.slogan-end{position:absolute;right:max(5vw,calc((100vw - 1382px)/2));bottom:0;left:auto;top:auto;display:block;max-width:680px;text-align:right;margin:0;font-size:clamp(58px,6.15vw,94px);line-height:1.04;letter-spacing:-.05em;text-shadow:0 3px 35px #090f14;color:var(--ink);opacity:0;pointer-events:none;will-change:opacity;transition:opacity .05s linear}
.slogan-end em{font-style:normal;color:var(--mint)}
.hero-bottom{margin:0 5%;padding:28px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.hero-bottom .signature{margin:0}
.explanation{margin-top:90px}
@media(max-width:760px){.hero{height:100vh;min-height:600px;padding:30px 5% 35px}.slogan-start,.slogan-end{font-size:clamp(44px,9.5vw,70px)}.slogan-end{max-width:320px;bottom:190px}.hero-bottom{align-items:flex-start;flex-direction:column;gap:20px}.explanation{margin-top:65px}}
@media(prefers-reduced-motion:reduce){.hero{height:auto;min-height:650px}.slogan-start{position:static;opacity:1}.slogan-end{position:static;opacity:1;margin-top:16px;text-align:left}}

.header-right{display:flex;align-items:center;justify-content:flex-end;gap:25px}.header-name{font:12px var(--mono);letter-spacing:1.4px;color:var(--mint)}.header-right .version{font-size:14px;white-space:nowrap}
.hero-cta{position:absolute;left:max(5vw,calc((100vw - 1382px)/2));bottom:48px;z-index:2;width:44%;max-width:470px}.hero-cta .hero-actions{gap:24px}.hero-cta .signature{display:block;margin:18px 0 0;max-width:390px;font:12px/1.7 var(--mono);letter-spacing:.6px;color:var(--muted)}.hero-cta .text-link{text-shadow:0 2px 10px #090f14}
@media(max-width:1000px){.hero-cta{width:90%;max-width:470px}.hero{min-height:680px}.hero-cta .hero-actions{flex-wrap:wrap}}
@media(max-width:600px){:root{--header-h:94px}header{gap:15px;height:94px}.header-right{gap:12px}.header-name{font-size:12px;line-height:1.6;letter-spacing:.4px;max-width:170px;text-align:right}.header-right .version{font-size:12px;padding:6px 8px}.hero-cta .signature{font-size:12px;max-width:310px}.hero-cta .hero-actions{flex-direction:column;align-items:flex-start;gap:14px}.hero-cta .button{padding:12px 14px;font-size:13px;gap:10px}.hero-cta .text-link{font-size:13px}}

.header-brand{display:flex;align-items:center;gap:26px;min-width:0}.header-brand .header-name{text-align:left;max-width:290px;line-height:1.6}.header-right{gap:18px;flex-shrink:0}.github-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--mint)}
@media(max-width:760px){.header-brand{gap:14px}.header-brand .header-name{max-width:190px;font-size:11px;letter-spacing:.4px}.header-right{gap:8px}}
@media(max-width:480px){.header-brand{flex-direction:column;align-items:flex-start;gap:1px}.header-brand .wordmark{font-size:26px;line-height:1}.header-brand .wordmark span{font-size:32px}.header-brand .header-name{font-size:10px;max-width:210px;letter-spacing:.15px}}

/* How it works: three diagrams on one clock (app.js); CSS only for the look. */
.how{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:64px}
.how figure{margin:0;background:var(--panel);border:1px solid var(--line);padding:14px 14px 18px;min-width:0}
.how svg{display:block;width:100%;height:auto;aspect-ratio:3/2;pointer-events:none;user-select:none}
.how figcaption{margin-top:12px}
.how figcaption b{display:block;font:12px var(--mono);letter-spacing:1.4px;color:var(--mint);font-weight:400;margin-bottom:8px}
.how figcaption span{display:block;font-size:13px;line-height:1.7;color:var(--muted)}
.how figcaption code{font:12px var(--mono);color:var(--mint)}
.how text{font-family:var(--mono);font-size:7.5px;fill:var(--muted);letter-spacing:.3px}
.how text.mint,.how text.date{fill:var(--mint)}
.how text.cap{letter-spacing:1.2px;text-transform:uppercase}
.how .panel{fill:#0b1219;stroke:var(--line)}
.how .grid{stroke:var(--line);stroke-opacity:.45}
.how .axis{stroke:#3a4b55}
.how .marker{stroke:var(--mint);stroke-dasharray:2 3}
.how .sweep{stroke:var(--mint)}
.how .q{fill:none;stroke:var(--blue)}
.how .think{fill:rgba(103,223,194,.05);stroke:var(--mint);stroke-dasharray:3 2}
.how .r{fill:none;stroke:#5b6f78}
.how .frame{fill:none;stroke:var(--mint)}
.how .link{fill:none;stroke:var(--ink)}
@media(max-width:1050px){.how{grid-template-columns:1fr;gap:18px;margin-top:44px}.how figure{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}.how figcaption{margin-top:0}}
@media(max-width:760px){.how figure{display:block}.how figcaption{margin-top:12px}}

/* Sources */
.sources .section-top{margin-bottom:24px}
.source-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.source{border-bottom:1px solid var(--line);padding:24px 20px 24px 0;min-width:0}
.source h3{font-size:18px;margin:0 0 8px}
.source-cmd{margin:0;font:12px/1.5 var(--mono);word-break:break-word}
.source-cmd code{color:var(--mint)}
.source-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.source-tags .tag{display:inline-block;font:10px/1.2 var(--mono);letter-spacing:.6px;padding:3px 6px;border-radius:2px;text-align:left}
.tag-conv{color:#8aa9ff;border:1px solid #293859}
.tag-ground{color:var(--mint);border:1px solid #28443d}
.sources-more{margin:26px 0 0;font-size:14px;color:var(--muted)}
.sources-more a,.example-note a,.install p a,.docs-link{color:var(--mint)}
@media(max-width:1050px){.source-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.source-grid{grid-template-columns:1fr}.source{padding-right:0}}

/* The gwern example */
.example{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
.example>div>p:not(.eyebrow){line-height:1.8;color:var(--muted);margin:28px 0 0}
.example .stats{display:flex;gap:28px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
.example .stats div{font:12px var(--mono);letter-spacing:1px;color:var(--muted)}
.example .stats b{display:block;font:500 26px var(--display);letter-spacing:-1px;color:var(--ink);margin-bottom:6px}
.example-note{margin-top:22px;font-size:13px;line-height:1.8;color:var(--muted)}
@media(max-width:1050px){.example{gap:35px}}
@media(max-width:760px){.example{display:block}.example .install{margin-top:34px}}

/* Header nav */
.header-right .docs-link{font:12px var(--mono);letter-spacing:1.4px}

/* Docs page */
.docs{padding:60px 5% 100px;max-width:1220px}
.docs-layout{display:grid;grid-template-columns:190px 1fr;gap:60px;align-items:start}
.docs-nav{position:sticky;top:calc(var(--header-h) + 34px);display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.docs-nav a{font:12px var(--mono);letter-spacing:1px;color:var(--muted);padding:8px 0 8px 15px;border-left:1px solid var(--line)}
.docs-nav a:hover{color:var(--ink)}
.docs-nav a.active{color:var(--mint);border-left-color:var(--mint)}
.docs-content{min-width:0}
.docs h1{font:500 clamp(40px,4.5vw,64px)/1.05 var(--display);letter-spacing:-2.5px;margin:0 0 18px}
.docs .lede{max-width:none;margin-bottom:0}
.docs h2{margin:72px 0 26px;padding-top:34px;border-top:1px solid var(--line)}
.docs h3{margin:36px 0 10px}
.docs p,.docs li{line-height:1.8;color:var(--muted);font-size:16px}
.docs p{margin:0 0 18px}
.docs ul{padding-left:22px;margin:0 0 18px}
.docs code{font:13px var(--mono);color:var(--mint)}
.docs pre{background:var(--panel);border:1px solid var(--line);padding:20px 24px;font:14px/1.7 var(--mono);color:var(--ink);overflow:auto;margin:0 0 24px}
.docs pre code{color:inherit;font-size:inherit}
.docs table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14px}
.docs th,.docs td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--line);line-height:1.6}
.docs th{font:12px var(--mono);letter-spacing:1px;color:var(--mint);font-weight:400}
.docs td{color:var(--muted)}
.docs td:first-child{color:var(--ink);white-space:nowrap}
@media(max-width:900px){.docs-layout{display:block}.docs-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:8px 22px;margin:0 0 40px;padding-bottom:20px;border-bottom:1px solid var(--line)}.docs-nav a{padding:0;border-left:0}.docs-nav a.active{border-left:0}}
@media(max-width:760px){.docs{padding:34px 5% 70px}.docs h2{margin-top:52px}.docs td:first-child{white-space:normal}}