/* The hero lab: one first screen per idea, on top of the site's own fonts, menu and buttons (site.css). */
body { overflow-x:hidden; }
.sky { position:fixed; inset:0; z-index:0;
       background:radial-gradient(120% 90% at 50% 38%, #fffefb 0%, #f4f1ea 42%, #e3ddd1 78%, #d6d0c4 100%); }
.sky.slate { background:radial-gradient(120% 90% at 50% 36%, #f6f8fb 0%, #e1e7ef 45%, #c5cfdc 80%, #b3bfce 100%); }
.sky.night { background:radial-gradient(110% 90% at 50% 40%, #2c2c2e 0%, #1b1b1c 55%, #0f0f10 100%); }
/* film grain over everything, the way a photograph has it */
.grain { position:fixed; inset:-50%; z-index:30; pointer-events:none; opacity:.07; mix-blend-mode:multiply;
         background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.night ~ .grain { mix-blend-mode:screen; opacity:.05; }
.word { position:fixed; left:50%; top:39%; transform:translate(-50%,-50%); z-index:1; white-space:nowrap; pointer-events:none;
        font:italic 300 min(46vw,700px)/1 Fraunces; letter-spacing:-.045em; color:rgba(74,88,112,.15); }
canvas.sky-gl { position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; }
canvas.gl { position:fixed; inset:0; width:100vw; height:100vh; z-index:2; }
.copy { position:fixed; left:64px; bottom:9vh; z-index:6; width:380px; }
.copy h1 { font:400 64px/1.02 Fraunces; letter-spacing:-.03em; font-variation-settings:"opsz" 144; margin-bottom:18px; }
.copy p { font:400 17px/1.5 Inter; color:var(--muted); margin-bottom:26px; width:300px; }
.copy .ghost { background:rgba(255,255,255,.55); color:var(--ink); margin-left:8px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.glass { position:fixed; z-index:7; border-radius:22px; padding:16px 18px; white-space:nowrap; color:var(--ink);
         background:linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.28));
         backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
         border:1px solid rgba(255,255,255,.7);
         box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.2), 0 24px 60px rgba(31,31,29,.14);
         font:500 14px/1.35 Inter; }
/* Glass that bends what is behind it: the backdrop is pushed sideways by noise (the #bend filter in the page),
   then lightly blurred; a 1px lit edge gives it thickness. Only Chromium applies an SVG filter to a backdrop. */
html.bend .glass { background:linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.1));
         backdrop-filter:url(#bend) blur(3px) saturate(1.5) brightness(1.04);
         box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 1px 0 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.25),
                    0 24px 60px rgba(31,31,29,.14); }
.glass .t { font:600 15px/1.2 Inter; margin-bottom:3px; }
.glass .big { font:300 54px/1 Fraunces; letter-spacing:-.03em; margin:2px 0 4px; }
html[data-dark] .glass { color:var(--light); background:linear-gradient(135deg, rgba(44,44,46,.72), rgba(28,28,30,.5));
         border-color:rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 24px 60px rgba(0,0,0,.45); }
html[data-dark] .glass .muted { color:rgba(232,232,232,.7); }
.rise { opacity:0; translate:0 22px; animation:rise .9s var(--ease) forwards; animation-delay:var(--d,0s); }
@keyframes rise { to { opacity:1; translate:0 0; } }
@media (prefers-reduced-motion: reduce) { .rise { animation:none; opacity:1; translate:0 0; } }
nav .links { color:var(--ink); }
html[data-dark] body { color:var(--light); }
html[data-dark] nav .btn, html[data-dark] .copy .btn:not(.ghost) { background:var(--bone); color:var(--ink); }
html[data-dark] .copy .ghost { background:rgba(255,255,255,.12); color:var(--light); }
html[data-dark] .copy p { color:rgba(232,232,232,.72); }
html[data-dark] .word { color:rgba(232,232,232,.06); }
.tag { position:fixed; right:32px; bottom:24px; z-index:40; font:500 12px Inter; opacity:.5; }
/* ?fx=light: a warm glow follows the cursor over the sky; buttons ease when they lean. */
.glow { position:fixed; inset:0; z-index:0; pointer-events:none;
        background:radial-gradient(520px circle at var(--x,50%) var(--y,40%), rgba(255,247,232,.85), rgba(255,247,232,0) 70%); }
.btn { transition:translate .35s var(--ease); }
/* ?fx=count: the counter's curtain, lifted from the bottom up; everything waits behind it. */
.loader { position:fixed; inset:0; z-index:50; background:var(--bone); display:flex; align-items:flex-end; padding:0 56px 40px;
          clip-path:inset(0 0 0 0); transition:clip-path 1.1s cubic-bezier(.76,0,.24,1); }
.loader.lift { clip-path:inset(0 0 100% 0); }
.loader .count { font:300 180px/1 Fraunces; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
html.wait .rise { animation-play-state:paused; }