:root{color-scheme:dark;background:#050507;font-family:Arial,Helvetica,sans-serif;--pointer-x:0px;--pointer-y:0px}
*{box-sizing:border-box}
html,body{margin:0;min-width:240px;min-height:100%;background:#050507}
body{overflow:hidden}
.night{position:relative;display:grid;place-items:center;isolation:isolate;width:100%;height:100vh;height:100svh;min-height:240px;overflow:hidden}
.atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 48%,#101015 0%,#08080c 35%,#050507 68%)}
.halo{position:absolute;left:50%;top:50%;width:min(78vw,1080px);aspect-ratio:1;border:1px solid #b8a6f009;border-radius:50%;transform:translate(-50%,-50%) rotate(-28deg);background:conic-gradient(from 25deg,transparent 0deg,#7d5bc004 95deg,#a693de0b 135deg,transparent 170deg,transparent 260deg,#78739506 310deg,transparent);box-shadow:inset 0 0 80px #8970cb03,0 0 80px #8970cb03;animation:orbit 55s linear infinite}
.halo-two{width:min(60vw,830px);border-color:#ccc4ed05;animation-direction:reverse;animation-duration:70s;opacity:.6}
.horizon{position:absolute;width:120%;height:45%;left:-10%;top:32%;background:radial-gradient(ellipse at center,#8261c918,transparent 56%);filter:blur(32px);transform:translate(var(--pointer-x),var(--pointer-y));transition:transform 1.8s ease-out;animation:breathe 12s ease-in-out infinite}
.grain{position:absolute;inset:0;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");}
.identity{position:relative;width:min(76vw,1120px);margin:0;font-size:inherit;animation:reveal 2.4s cubic-bezier(.16,1,.3,1) both}
.wordmark{position:relative;display:block;width:100%;aspect-ratio:1522/138;overflow:hidden;background:linear-gradient(178deg,#f2f1f5 3%,#c9c8ce 39%,#98969f 74%,#bab7c3 100%);mask-image:url('assets/nightshift.png');mask-size:113.14% auto;mask-position:center;mask-repeat:no-repeat;-webkit-mask-image:url('assets/nightshift.png');-webkit-mask-size:113.14% auto;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}
.shine{position:absolute;inset:-70% -30%;background:linear-gradient(110deg,transparent 34%,#fff0 42%,#ffffffa6 49%,#fff0 56%,transparent 64%);transform:translateX(-85%);animation:sweep 10s 1.5s ease-in-out infinite}
.media{position:absolute;top:calc(100% + clamp(22px,3.1vw,44px));left:50%;transform:translateX(-50%);color:#a8a5b1;font-size:clamp(12px,1vw,14px);font-weight:400;line-height:1.5;letter-spacing:.85em;padding-left:.85em}
.motion{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff10;border-radius:50%;background:#ffffff02;color:#8b8795;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.motion:hover{color:#eeeaf7;border-color:#ffffff35;background:#ffffff05}
.motion:focus-visible{outline:2px solid #b5a1e2;outline-offset:5px}
.play-icon{display:none}
.paused .pause-icon{display:none}
.paused .play-icon{display:block}
.paused *{animation-play-state:paused!important}
@keyframes reveal{from{opacity:0;filter:blur(8px);transform:translateY(8px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes sweep{0%,12%{transform:translateX(-85%)}48%,100%{transform:translateX(85%)}}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes orbit{from{transform:translate(-50%,-50%) rotate(-28deg)}to{transform:translate(-50%,-50%) rotate(332deg)}}
@media(max-width:600px){.identity{width:86vw}.halo{width:140vw}.halo-two{width:110vw}.horizon{height:32%;top:36%;width:170%;left:-35%}.media{top:calc(100% + 26px);letter-spacing:.65em;padding-left:.65em}.motion{right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.shine{display:none}.motion{display:none}.horizon{transform:none!important}}