@layer base{:root{--sun-100:#fff18b;--sun-200:#ffe07a;--sun-300:#fdd06a;--sun-400:#febc5c;--sun-500:#f0a85a;--sun-600:#d9905b;--sun-700:#b97855;--sun-800:#8f614c;--sun-900:#5e4340}}@layer components{.halftone{pointer-events:none;position:absolute;inset:0;overflow:hidden}.halftone-canvas{opacity:0;width:100%;height:100%;transition:opacity 1.1s var(--ease-brand,cubic-bezier(.22, 1, .36, 1));display:block;position:absolute;inset:0}.halftone[data-halftone=webgl] .halftone-canvas{opacity:1}.halftone-fallback{background-image:radial-gradient(circle, var(--halftone-dot,#d9905b80) 0 1.3px, transparent 1.8px);background-size:var(--halftone-cell,14px) var(--halftone-cell,14px);-webkit-mask-image:var(--halftone-mask,radial-gradient(ellipse 74% 70% at 50% 46%, transparent 32%, #000 96%));mask-image:var(--halftone-mask,radial-gradient(ellipse 74% 70% at 50% 46%, transparent 32%, #000 96%));opacity:0;transition:opacity 1.1s var(--ease-brand,cubic-bezier(.22, 1, .36, 1));position:absolute;inset:0}.halftone:is([data-halftone=css],[data-halftone=lost]) .halftone-fallback{opacity:.75}@media (scripting:none){.halftone-fallback{opacity:.75}}.sun{aspect-ratio:1;display:block;position:absolute}.sun-glow{background:radial-gradient(closest-side,#febc5c4d,#d9905b1f 42%,#0000 74%);border-radius:9999px;position:absolute;inset:-150%}.sun-disc{background:linear-gradient(180deg, var(--sun-100) 0%, var(--sun-300) 28%, var(--sun-400) 50%, var(--sun-600) 68%, var(--sun-800) 84%, var(--sun-900) 100%);border-radius:9999px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 56%,#0000 97%);mask-image:linear-gradient(#000 56%,#0000 97%)}}
@layer components{.hk-mark{opacity:clamp(.16, calc((var(--lit,1) - var(--x,0)) * 1000 + 1), 1)}@media (min-width:48rem){.hk-stage{min-height:100svh}}@media (max-width:47.99rem){.hk-scroller{margin:-1rem calc(var(--gutter) * -1);padding:1rem var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right, transparent, black var(--gutter), black calc(100% - var(--gutter)), transparent);mask-image:linear-gradient(to right, transparent, black var(--gutter), black calc(100% - var(--gutter)), transparent);overflow-x:auto}.hk-scroller::-webkit-scrollbar{display:none}.hk-scroller>*{min-width:56rem}}@media (min-width:48rem) and (prefers-reduced-motion:no-preference){.hk-replay{height:240svh}.hk-stage{position:sticky;top:0}}@keyframes hk-axis-in{0%{transform:scaleX(0)}}@keyframes hk-mark-in{0%{transform:scaleY(0)}}@media (prefers-reduced-motion:no-preference){.hk-mark{transition:opacity .3s var(--ease-brand)}.hk-animate .hk-axis{animation:hk-axis-in .8s var(--ease-brand) .2s both}.hk-animate .hk-mark{animation:hk-mark-in .4s var(--ease-brand) both;animation-delay:calc(.2s + var(--x,0) * .8s)}.hk-animate .hk-mark[data-lane=above]{transform-origin:bottom}.hk-animate .hk-mark[data-lane=below]{transform-origin:top}}.mk-sky{--halftone-mask:linear-gradient(to top, #000 10%, transparent 82%)}.mk-dawn{z-index:-10;pointer-events:none;clip-path:inset(-100vh -100vw 0);position:absolute;inset:0}.mk-dawn .sun{width:clamp(9rem,22vw,20rem);bottom:0;left:50%;translate:-50% 78%}@media (min-width:64rem){.mk-dawn .sun{left:79%}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.mk-dawn .sun{animation:linear both mk-dawn;animation-timeline:view();animation-range:entry exit 40%}}}@keyframes mk-dawn{0%{translate:-50% 90%}to{translate:-50% 72%}}}
