/* The demo library (2026-09-30). The v7 language (website/next/v5/site.css): a living ground, film grain, Spectral over
   Hanken Grotesk, big editorial plates, glass only where you touch. Shared by the composer (index.html) and every demo. */
:root{--ground:#07090d;--ink:#f1efe9;--ink2:rgba(241,239,233,.72);--ink3:rgba(241,239,233,.48);--ink4:rgba(241,239,233,.3);
 --line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.18);--iris:#8fd0f2;--copper:#e2b28a;--sage:#a9c79a;
 --serif:'Spectral',Georgia,serif;--sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{background:var(--ground);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
 background:radial-gradient(1400px 900px at 85% -10%,rgba(46,78,122,.22),transparent 60%),radial-gradient(1100px 800px at -10% 105%,rgba(128,86,52,.14),transparent 60%),linear-gradient(180deg,#07090d 0%,#090c11 50%,#07090d 100%);background-attachment:fixed}
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}img{max-width:100%;display:block}button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.06;text-wrap:balance;margin:0}
h1 em,h2 em,h3 em{font-style:italic;font-weight:400;color:var(--ink2)}
p{text-wrap:pretty}
.big{font:500 clamp(40px,6.2vw,96px)/1.0 var(--serif);letter-spacing:-.025em;text-wrap:balance;margin:0}
.big em{font-style:italic;font-weight:400;color:var(--ink2)}
.eyebrow{font:500 13px var(--sans);color:var(--ink3);display:block;margin-bottom:14px}
.lead{font-size:18.5px;color:var(--ink2);max-width:34em;margin:20px 0 0}
.note{font:500 12.5px var(--sans);color:var(--ink3)}
.glass2{background:linear-gradient(155deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 42%,rgba(255,255,255,.07)),rgba(14,18,24,.5);
 border:1px solid rgba(255,255,255,.16);border-radius:26px;box-shadow:0 40px 100px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.04);
 -webkit-backdrop-filter:blur(28px) saturate(160%);backdrop-filter:blur(28px) saturate(160%)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:600 15px var(--sans);text-decoration:none;border-radius:999px;padding:13px 22px;cursor:pointer;border:0;transition:transform .25s var(--ease),background .25s,opacity .25s}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--ink);color:#0b0d10}.btn.pri:hover{background:#fff}
.btn.ghost{color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--line2)}.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the mark: the FP iris, breathing, a copper and cyan light on the rim (from the connector rooms) */
.fpmark{position:relative;display:block;flex-shrink:0;width:30px;height:30px}
.fpmark img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;animation:irbreathe 6s ease-in-out infinite}
.fpmark i{position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 52%,rgba(226,150,96,.9) 60%,transparent 68%,transparent 82%,rgba(110,205,240,.9) 90%,transparent 97%);-webkit-mask:radial-gradient(closest-side,transparent 78%,#000 83%,#000 90%,transparent 100%);mask:radial-gradient(closest-side,transparent 78%,#000 83%,#000 90%,transparent 100%);filter:blur(.6px);opacity:.75;animation:irspin 11s linear infinite}
@keyframes irspin{to{rotate:360deg}}
@keyframes irbreathe{0%,100%{scale:1;filter:brightness(1)}50%{scale:1.03;filter:brightness(1.12)}}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .wm{height:17px;width:auto}
/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .fpmark img,.fpmark i{animation:none} html{scroll-behavior:auto} }