@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Caveat:wght@400&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;800&display=swap");
:root{--base-color:#fff;background:var(--base-color)!important}html,body,main,canvas{background:var(--base-color)}main{position:relative}main::after{display:none}canvas{position:relative;z-index:0}header{border-bottom:0!important}
.panel-toggle{position:fixed;z-index:5;top:14px;left:14px}
.panel-toggle[hidden]{display:none}
.panel-toggle .panel{position:static;width:284px;margin-top:36px;padding:16px;background:rgba(255,255,255,.82);border:0;border-radius:12px;box-shadow:0 0 0 1px rgba(22,22,20,.04),0 2px 6px rgba(22,22,20,.05),0 10px 28px rgba(22,22,20,.07);backdrop-filter:blur(16px) saturate(1.2);animation:panel-in .22s ease}
@keyframes panel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.panel-toggle .panel{font-size:11px}
.panel-toggle .panel label{grid-template-columns:92px 1fr 40px;gap:10px;margin:13px 0}
.panel-toggle .panel label>span{color:rgba(22,22,20,.62)}
.panel-toggle .panel label output{text-align:right;color:rgba(22,22,20,.72)}
.panel-toggle .panel label:nth-last-of-type(-n+2){grid-template-columns:92px auto;margin:10px 0}
.panel-toggle .panel label:first-of-type{margin-top:0}
.panel-toggle .panel label:last-of-type{margin-bottom:0}
.panel-toggle .panel input[type="checkbox"]{accent-color:#3b76f6}
.panel-toggle .panel input[type="range"]{-webkit-appearance:none;appearance:none;height:16px;background:transparent;cursor:pointer}
.panel-toggle .panel input[type="range"]::-webkit-slider-runnable-track{height:2px;border-radius:1px;background:rgba(22,22,20,.14)}
.panel-toggle .panel input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;margin-top:-5px;border-radius:50%;background:#3b76f6;border:0;box-shadow:0 1px 2.5px rgba(22,22,20,.18)}
.panel-toggle .panel input[type="range"]::-moz-range-track{height:2px;border-radius:1px;background:rgba(22,22,20,.14)}
.panel-toggle .panel input[type="range"]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#3b76f6;border:0;box-shadow:0 1px 2.5px rgba(22,22,20,.18)}
.background-picker{margin:13px 0}
.panel-toggle .background-picker-toggle{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:8px;margin:0;padding:0;color:rgba(22,22,20,.62);background:transparent;border:0;border-radius:0;font:inherit;letter-spacing:inherit;text-transform:none}
.panel-toggle .background-picker-toggle:hover{color:rgba(22,22,20,.82);background:transparent}
#background-swatch{display:block;width:14px;height:14px;background:#fff;box-shadow:0 1px 3px rgba(22,22,20,.18)}
.background-picker-popover{position:fixed;z-index:30;width:268px;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);overflow:auto;padding:12px;color:rgba(22,22,20,.68);background:rgba(255,255,255,.94);border-radius:8px;box-shadow:0 2px 8px rgba(22,22,20,.08),0 16px 44px rgba(22,22,20,.12);font:10px "DM Mono",monospace;letter-spacing:.025em;backdrop-filter:blur(18px) saturate(1.2)}
.background-picker-header{display:flex;height:24px;align-items:center;justify-content:space-between;margin-bottom:8px;color:rgba(22,22,20,.55)}
.background-picker-header select,.background-picker-fields select{height:23px;padding:0 5px;color:rgba(22,22,20,.68);background:transparent;border:1px solid rgba(22,22,20,.16);border-radius:3px;font:10px "DM Mono",monospace;outline:none;cursor:pointer}
.background-picker-header select:hover,.background-picker-fields select:hover{color:#161614;border-color:rgba(22,22,20,.28)}
.background-picker-controls{display:flex;width:100%;gap:8px}
.background-picker-plane{position:relative;min-width:0;flex:1;height:auto;aspect-ratio:1;overflow:hidden;border-radius:3px;background:#f5f5f5 repeating-linear-gradient(10deg,transparent 0 4px,rgba(100,100,100,.18) 4px 5px);cursor:crosshair;touch-action:none}
.background-picker-rail{position:relative;width:16px;align-self:stretch;overflow:hidden;border-radius:3px;cursor:ns-resize;touch-action:none}
.background-picker canvas{position:absolute;inset:0;display:block;width:100%;height:100%;background:transparent;cursor:inherit;touch-action:none}
.background-picker-plane i,.background-picker-rail i{position:absolute;z-index:1;display:block;pointer-events:none;background:transparent}
#background-picker-point{width:12px;height:12px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.45);transform:translate(-50%,-50%)}
#background-picker-hue-point{right:2px;left:2px;height:6px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.45);transform:translateY(-50%)}
.background-picker-fields{display:flex;min-width:0;align-items:center;gap:7px;margin-top:8px;color:rgba(22,22,20,.55)}
.background-picker-fields>div{min-width:0;flex:1}
.background-picker-fields input{width:100%;height:24px;padding:0 3px;color:#161614;background:transparent;border:0;border-bottom:1px solid rgba(22,22,20,.14);border-radius:0;font:11px "DM Mono",monospace;outline:none}
#background-lch-fields{display:flex;gap:6px}
#background-lch-fields[hidden]{display:none}
#background-lch-fields label{display:flex;min-width:0;flex:1;align-items:center;gap:2px;font:10px "DM Mono",monospace}
:root{font-family:"Manrope",sans-serif;color:#161614;background:#bbb8b0;font-synthesis:none}*{box-sizing:border-box}html,body,main{width:100%;height:100%;margin:0;overflow:hidden}canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}canvas:active{cursor:grabbing}header{position:fixed;z-index:3;inset:0 0 auto;display:flex;justify-content:space-between;padding:20px 27px;border-bottom:1px solid rgba(22,22,20,.18);pointer-events:none}header a,header span,.intro p,.panel,footer{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.07em}header a{color:inherit;text-decoration:none;pointer-events:auto}header span{color:rgba(22,22,20,.46)}.intro{position:fixed;z-index:2;top:92px;left:27px;pointer-events:none}.intro p{margin:0 0 11px;color:rgba(22,22,20,.48);text-transform:uppercase}.intro h1{margin:0;font-size:clamp(42px,6vw,84px);font-weight:600;line-height:.88;letter-spacing:-.065em}.intro span{display:block;width:235px;margin-top:18px;color:rgba(22,22,20,.5);font-size:11px;line-height:1.5}.panel{position:fixed;z-index:4;top:92px;right:27px;width:266px;padding:14px;background:rgba(218,216,209,.76);border:1px solid rgba(22,22,20,.18);backdrop-filter:blur(12px)}.panel>div{display:flex;justify-content:space-between;margin-bottom:14px}.panel output{color:rgba(22,22,20,.48);font-variant-numeric:tabular-nums}.panel label{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:8px;margin:11px 0}.panel label:nth-last-of-type(-n+2){grid-template-columns:80px auto;justify-content:start}.panel input[type="range"]{width:100%;height:12px;margin:0;accent-color:#222}.panel input[type="checkbox"]{width:12px;height:12px;margin:0;accent-color:#222}.panel button{margin-top:10px;padding:0 0 3px;color:#161614;background:transparent;border:0;border-bottom:1px solid #161614;font:9px "DM Mono",monospace;cursor:pointer}footer{position:fixed;z-index:3;right:27px;bottom:20px;left:27px;display:flex;justify-content:space-between;color:rgba(22,22,20,.47);pointer-events:none}@media(max-width:720px){header{padding:15px}.intro{top:70px;left:15px}.intro span{display:none}.panel{top:auto;right:15px;bottom:48px;width:min(266px,calc(100vw - 30px))}footer{display:none}}

/* scrollable content over fixed scene */
html,body{height:100%;overflow:hidden}
main{position:fixed;inset:0;height:100vh;height:100dvh}
.content{position:relative;z-index:1;width:100vw;height:auto;margin-top:120vh;margin-top:120dvh;padding:0;background:transparent;font-family:"Manrope",sans-serif;font-size:16px;letter-spacing:0;will-change:transform}
.title-section,.essay-section{position:relative;width:100vw;height:100vh;height:100dvh}
.content-inner{width:100%;margin:0}
.content .kicker{margin:0 0 18px;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(22,22,20,.45)}
.content h1{margin:0 0 28px;font-family:"Archivo Black",Manrope,sans-serif;font-size:clamp(64px,11vw,170px);font-weight:400;line-height:1.02;letter-spacing:0}
.content .lede{margin:0 0 72px;font-size:21px;line-height:1.5;color:rgba(22,22,20,.62);font-weight:400}
.content h2{margin:64px 0 18px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(22,22,20,.5)}
.content p{margin:0 0 22px;line-height:1.75;color:rgba(22,22,20,.8)}
.content h1{color:transparent;position:relative;pointer-events:none;user-select:none}
.content h1>span{display:block}
.glow-text{position:absolute;inset:0;width:100%;height:100%;background:transparent;pointer-events:none}
.title-lockup{position:relative;padding-bottom:24px}
.title-lockup h1{margin-bottom:0}
.content .stuff-line{position:relative;width:max-content}
.essay-section{padding:0}
.signup-block{position:absolute;top:64%;left:50%;display:flex;width:min(620px,88vw);flex-direction:column;align-items:center;pointer-events:auto;transform:translate(-50%,-50%)}
.coming-soon{margin:24px 0 0;color:#3b76f6;font:400 40px/.95 "Caveat",cursive;letter-spacing:-.025em;text-align:center;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-thickness:3px;text-decoration-skip-ink:none;text-underline-offset:8px;user-select:none;transform:rotate(-3deg);transform-origin:center}
@media(max-width:320px){.panel-toggle .panel{width:calc(100vw - 30px)}}
.devtools-reveal{position:fixed;z-index:8;top:0;left:0;width:150px;height:150px}
.devtools-reveal button{display:grid;width:28px;height:28px;margin:10px;padding:0;place-items:center;color:rgba(22,22,20,.5);background:transparent;border:0;border-radius:50%;font:17px/1 sans-serif;opacity:0;cursor:pointer;transition:opacity .22s,background .18s,color .18s}
.devtools-reveal:hover button,.devtools-reveal:focus-within button{opacity:1}
.devtools-reveal button:hover,.devtools-reveal button[aria-expanded="true"]{color:rgba(22,22,20,.8);background:rgba(22,22,20,.065)}
.scroll-completion{position:fixed;z-index:7;right:-2px;bottom:5px;width:24px;height:48px;margin:0;padding:0;appearance:none;background:transparent;border:0;opacity:0;pointer-events:none;transform:scale(var(--completion-scale,1));transform-origin:12px 36px}
.scroll-completion svg{display:block;width:100%;height:100%;overflow:visible;background:transparent}
.scroll-completion svg>g{transform-box:view-box;transform-origin:12px 36px}
.scroll-completion circle{fill:#d2e1f0}
.scroll-completion.is-complete{pointer-events:none}
.scroll-completion.is-complete svg>g{animation:completion-wiggle .9s ease-out}
@keyframes completion-wiggle{0%{transform:scale(1)}18%{transform:scale(1.45)}34%{transform:scale(.88)}49%{transform:scale(1.28)}63%{transform:scale(.95)}76%{transform:scale(1.12)}88%{transform:scale(.99)}100%{transform:scale(1)}}
.content{pointer-events:none}
.content-inner{pointer-events:none}