:root{--g-hue-src:var(--p-accent);--g-L-lo:0.62;--g-L-hi:1;--g-hue:oklch(from var(--g-hue-src) clamp(var(--g-L-lo), l, var(--g-L-hi)) c
    calc(h + clamp(0, (h - 262) * 1000, 1) * clamp(0, (338 - h) * 1000, 1)
      * (250 + clamp(0, (h - 300) * 1000, 1) * 95 - h)));--g-hs:calc(30 - 60 * clamp(0, (h - 40) * 1000, 1) * clamp(0, (330 - h) * 1000, 1));--g-hue-b:oklch(from var(--g-hue) l c calc(h + var(--g-hs)));--g-hue-2:var(--ground-bg, #d9ccb7);--g-hue-t:oklch(from var(--g-hue-2) clamp(var(--g-L-lo), l, var(--g-L-hi)) c h);--g-acc:oklch(from var(--p-accent) 0.7 c calc(h + clamp(0, (h - 262) * 1000, 1) * clamp(0, (338 - h) * 1000, 1)
    * (250 + clamp(0, (h - 300) * 1000, 1) * 95 - h)));--g-away:oklab(from var(--p-ink) calc(1 - round(l)) 0 0);--g-k:1;--g-kl:1;--g-kd:1;--g-kp:1;--g-dark-bg:var(--p-inv-bg);--g-dark-surface:var(--p-inv-surface);--g-dark-ink:var(--p-inv-ink);--g-dark-muted:var(--p-inv-muted);--g-dark-accent:var(--p-inv-accent);--g-dark-accent-ink:var(--p-inv-accent-ink);--g-dark-action:var(--p-inv-action);--g-dark-action-ink:var(--p-inv-action-ink);--g-card:var(--p-bg);--g-fade:120px;--g-noise-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.6' intercept='.2'/%3E%3CfeFuncG type='linear' slope='0.6' intercept='.2'/%3E%3CfeFuncB type='linear' slope='0.6' intercept='.2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}html[data-mode="dark"]{--g-L-lo:0;--g-L-hi:0.55;--g-dark-bg:var(--p-bg);--g-dark-surface:var(--p-surface);--g-dark-ink:var(--p-ink);--g-dark-muted:var(--p-muted);--g-dark-accent:var(--p-accent);--g-dark-accent-ink:var(--p-accent-ink);--g-dark-action:var(--p-action);--g-dark-action-ink:var(--p-action-ink);--g-card:var(--p-surface)}html[data-tint="away"]{--g-hue-src:color-mix(in oklab, var(--p-bg) 58%, var(--g-away));--g-hue-2:color-mix(in oklab, color-mix(in oklab, var(--p-bg) 66%, var(--g-away)) 90%, var(--p-accent))}.bg-mist,.bg-halo,.bg-grain,.bg-dusk,.bg-ruled,.bg-dots,.bg-arcs,.bg-band,.bg-field,.bg-stage,.bg-photo,.bg-horizon,.bg-deep,.bg-liquid{position:relative;isolation:isolate;overflow:clip;--bg:var(--p-bg);--surface:var(--p-surface);--ink:var(--p-ink);--muted:color-mix(in oklab, var(--p-ink) 60%, var(--p-muted));--accent:var(--p-accent);--accent-ink:var(--p-accent-ink);--action:var(--p-action);--action-ink:var(--p-action-ink);--card:var(--g-card);--line:color-mix(in oklab, var(--ink) 11%, transparent);--line-strong:color-mix(in oklab, var(--ink) 20%, transparent);--fx-bg:var(--bg);--fx-surface:var(--surface);--fx-ink:var(--ink);--fx-muted:var(--muted);--fx-accent:var(--accent);--fx-accent-ink:var(--accent-ink);--ui-font:var(--font-text);--ui-mono:var(--font-mono);--ui-radius:var(--r-md);background-color:var(--bg);color:var(--ink)}:is(.bg-mist, .bg-halo, .bg-ruled, .bg-dots, .bg-arcs, .bg-liquid){background-color:transparent}:is(.bg-mist, .bg-halo, .bg-ruled, .bg-dots, .bg-arcs)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom, transparent, #000 var(--g-fade), #000 calc(100% - var(--g-fade)), transparent);mask-image:linear-gradient(to bottom, transparent, #000 var(--g-fade), #000 calc(100% - var(--g-fade)), transparent)}.bg-horizon,.bg-deep,.bg-photo{--bg:color-mix(in oklab, var(--g-dark-bg) 80%, black);--surface:color-mix(in oklab, var(--g-dark-surface) 80%, black);--ink:var(--g-dark-ink);--muted:color-mix(in oklab, var(--g-dark-ink) 60%, var(--g-dark-muted));--accent:var(--g-dark-accent);--accent-ink:var(--g-dark-accent-ink);--action:var(--g-dark-action);--action-ink:var(--g-dark-action-ink);--card:color-mix(in oklab, var(--bg) 88%, var(--ink))}.bg-inset,html[data-mode="dark"] :is(.bg-band, .bg-field):not(.bg-bleed){width:min(calc(100% - 2 * var(--pad)), var(--container));margin-inline:auto;margin-block:var(--s-5);border-radius:var(--r-lg)}.section:is(.bg-band, .bg-field, .bg-grain, .bg-horizon, .bg-deep, .bg-photo):not(.section--hero, .section--flush-top, .section--rule){padding-block:calc(var(--section-band) * 1.25)}.section:is(.bg-mist, .bg-halo, .bg-ruled, .bg-dots, .bg-arcs, .bg-liquid):not(.section--hero, .section--flush-top, .section--rule){padding-block:calc(var(--section) * 1.5)}.section--hero:is(.bg-band, .bg-field, .bg-grain, .bg-horizon, .bg-deep, .bg-photo){padding-bottom:calc(var(--section-band) * 1.25)}.section--hero:is(.bg-mist, .bg-halo, .bg-ruled, .bg-dots, .bg-arcs, .bg-liquid){padding-bottom:calc(var(--section) * 1.5)}.section:is(.bg-band, .bg-field, .bg-grain, .bg-dusk, .bg-horizon, .bg-deep):not(.section--hero){min-height:var(--g-screen, min(88svh, 860px));display:grid;align-content:center}.section:is(.bg-mist, .bg-halo, .bg-ruled, .bg-dots, .bg-liquid):not(.section--hero){min-height:var(--g-screen, min(76svh, 760px));display:grid;align-content:center}@media (max-width: 767px){.section:is(.bg-band, .bg-field, .bg-grain, .bg-dusk, .bg-horizon, .bg-deep, .bg-mist, .bg-halo, .bg-ruled, .bg-dots, .bg-liquid):not(.section--hero){min-height:var(--g-screen, 0px)}}main > section.section:is(.bg-band, .bg-field, .bg-grain, .bg-deep, .bg-photo):not(.section--hero):last-of-type{padding-bottom:calc(var(--section-band) * 1.25) !important}main > section.section:is(.bg-mist, .bg-halo, .bg-ruled, .bg-dots, .bg-arcs, .bg-liquid):not(.section--hero):last-of-type{padding-bottom:calc(var(--section) * 1.5) !important}.bg-stage{--st-src:var(--g-hue);--st-1:oklch(from var(--st-src) calc(0.64 + 0.12 * clamp(0, 1 - max(h - 90, 90 - h) / 45, 1)) clamp(0.07, c * 0.8, 0.14) calc(h - 8 * clamp(0, 1 - max(h - 90, 90 - h) / 45, 1)));--st-2:oklch(from var(--st-src) 0.8 clamp(0.05, c * 0.6, 0.1) calc(h + var(--g-hs)));--st-3:oklch(from var(--st-src) 0.95 0.035 h);--st-4:oklch(from var(--st-src) calc(0.44 + 0.1 * clamp(0, 1 - max(h - 90, 90 - h) / 45, 1)) clamp(0.05, c * 0.7, 0.12) calc(h - 24 * clamp(0, 1 - max(h - 90, 90 - h) / 45, 1)));--stage-pad:clamp(20px, 4.5vw, 64px);display:grid;place-items:center;padding:var(--stage-pad);border-radius:var(--r-lg);background-color:var(--st-1);background-image:var(--g-noise-soft),
    radial-gradient(58% 78% at 10% 4%, color-mix(in oklab, var(--st-3) 90%, transparent), transparent 72%),
    radial-gradient(48% 70% at 90% 12%, color-mix(in oklab, var(--st-2) 92%, transparent), transparent 74%),
    radial-gradient(70% 90% at 78% 112%, color-mix(in oklab, var(--st-4) 94%, transparent), transparent 74%),
    radial-gradient(46% 62% at 4% 100%, color-mix(in oklab, var(--st-2) 60%, transparent), transparent 72%);background-blend-mode:soft-light, normal, normal, normal, normal}html[data-tint="away"] .bg-stage{--st-src:var(--g-acc)}html[data-lowchroma] .bg-stage{--st-src:oklch(from var(--ground-accent) l c h)}.bg-stage > *{position:relative;width:min(100%, var(--stage-w, 520px))}.bg-photo{--scrim:color-mix(in oklab, var(--g-dark-bg) 70%, black);--scrim-a:color-mix(in oklab, var(--scrim) calc(100% - 12% * var(--g-kd)), transparent);--scrim-b:color-mix(in oklab, var(--scrim) calc(100% - 20% * var(--g-kd)), transparent);--scrim-c:color-mix(in oklab, var(--scrim) calc(100% - 24% * var(--g-kd)), transparent);--scrim-h:66%;--scrim-w:56%;min-height:clamp(520px, 52vw, 760px);display:grid;align-content:end;background:var(--g-photo, none) var(--g-photo-pos, center) / cover no-repeat, var(--scrim)}.bg-photo__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:var(--g-photo-pos, 50% 50%)}.bg-photo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top, var(--scrim-a), var(--scrim-b) calc(var(--scrim-h) * .45), var(--scrim-c) var(--scrim-h), transparent calc(var(--scrim-h) + 26%))}.bg-photo--left{align-content:center}.bg-photo--left::before{background:linear-gradient(to right, var(--scrim-a), var(--scrim-b) calc(var(--scrim-w) * .64), var(--scrim-c) var(--scrim-w), transparent calc(var(--scrim-w) + 26%))}@media (max-width: 767px){.bg-photo{--scrim-h:86%;min-height:640px;background-position:var(--g-photo-pos-m, var(--g-photo-pos, center))}.bg-photo__img{object-position:var(--g-photo-pos-m, var(--g-photo-pos, 50% 50%))}.bg-photo--left{align-content:end}.bg-photo--left::before{background:linear-gradient(to top, var(--scrim-a), var(--scrim-b) calc(var(--scrim-h) * .45), var(--scrim-c) var(--scrim-h), transparent calc(var(--scrim-h) + 12%))}}.bg-liquid::before,.bg-liquid::after{content:"";position:absolute;z-index:-1;pointer-events:none;top:0;bottom:0;left:-30%;right:-30%;will-change:transform}.bg-liquid::before{background:radial-gradient(ellipse 30% 36% at 30% 44%, color-mix(in oklab, var(--g-hue) calc(40% * var(--g-k)), transparent), transparent),
    radial-gradient(ellipse 22% 24% at 54% 74%, color-mix(in oklab, var(--g-hue-t) calc(44% * var(--g-k)), transparent), transparent);animation:g-liq-a 26s ease-in-out infinite alternate}.bg-liquid::after{background:radial-gradient(ellipse 28% 30% at 68% 38%, color-mix(in oklab, var(--g-hue-b) calc(32% * var(--g-k)), transparent), transparent),
    radial-gradient(ellipse 20% 20% at 44% 26%, color-mix(in oklab, var(--g-hue-t) calc(36% * var(--g-k)), transparent), transparent);animation:g-liq-b 34s ease-in-out infinite alternate}@keyframes g-liq-a{from{transform:translate3d(-7%, 0, 0) skewX(-7deg) scaleY(.94)}to{transform:translate3d(8%, 0, 0) skewX(6deg) scaleY(1.05)}}@keyframes g-liq-b{from{transform:translate3d(8%, 0, 0) skewX(6deg) scaleY(1.04)}to{transform:translate3d(-9%, 0, 0) skewX(-6deg) scaleY(.92)}}.bg-liquid.is-off::before,.bg-liquid.is-off::after,.bg-liquid.is-held::before,.bg-liquid.is-held::after{animation-play-state:paused}.bg-liquid > .loop-pause{right:max(var(--pad), calc((100% - var(--container)) / 2));bottom:16px}@media (prefers-reduced-motion: reduce){.bg-liquid::before,.bg-liquid::after{animation:none}}@media print{.bg-liquid::before,.bg-liquid::after{display:none}}