@font-face{font-family:Oxanium;src:url('Oxanium.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:Manrope;src:url('Manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}
:root{color-scheme:dark;font-family:Manrope,Arial,sans-serif;background:#06090d;color:#e2e9e2}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:#06090d;overflow-x:clip}
body:before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,#02050908,#02050900 75%,#02050920)}
main{overflow:clip;position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 30px 95px;isolation:isolate}
h1{position:relative;margin:0 0 30px;padding-left:.16em;font-family:Oxanium,monospace;font-weight:300;font-size:clamp(42px,5.3vw,76px);letter-spacing:.16em;line-height:1.2;color:#d3dedc;text-shadow:0 1px 1px #000,0 0 32px #b2ded521}
.machine{position:relative;width:min(1040px,94vw);aspect-ratio:1919/820;container-type:inline-size;isolation:isolate}
.machine-art{display:block;width:100%;height:auto;position:relative;z-index:1;pointer-events:none;filter:drop-shadow(0 24px 22px #0009)}
.ambient{position:absolute;left:-7%;top:2%;width:55%;height:120%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#b1df9223,transparent 66%);opacity:.75;transition:opacity .5s,transform .7s}
.machine:has(.reliko:hover) .ambient,.machine:has(.reliko:focus-visible) .ambient{opacity:1.5;transform:scale(1.12)}
.project{position:absolute;z-index:2;top:27.5%;height:32.7%;width:14.5%;padding:0;border:0;border-radius:8%;background:transparent;text-decoration:none;-webkit-tap-highlight-color:transparent}
.reliko{left:11.35%;display:flex;align-items:center;justify-content:center;outline-offset:8px;transition:background .4s,box-shadow .4s}
.reliko:before{content:'';position:absolute;inset:-7%;border-radius:9%;background:radial-gradient(ellipse,#d9f7aa16,transparent 75%);opacity:.4;transition:opacity .4s}
.identity{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;color:#edf0d6;filter:drop-shadow(0 0 7px #d9ffc744);transition:filter .4s,transform .25s}
.identity img{display:block;width:73%;height:auto;aspect-ratio:1;margin-top:-9%;margin-bottom:-12%}
.identity>span{font-size:clamp(12px,2.65cqw,31px);font-weight:600;letter-spacing:-.04em;line-height:1.4}
.reliko:hover:before,.reliko:focus-visible:before{opacity:1}.reliko:hover,.reliko:focus-visible{background:#bbeba90b;box-shadow:inset 0 0 26px #c7eba312,0 0 32px #c7eba312}
.reliko:hover .identity,.reliko:focus-visible .identity{filter:drop-shadow(0 0 10px #e0ffc899);transform:translateY(-2px)}
.reliko:focus-visible{outline:2px solid #e1efbf}.reliko:active .identity{transform:translateY(1px)}
.dormant{cursor:default;opacity:1}.two{left:32.5%}.three{left:53.5%}.four{left:74.5%}
@media(max-width:600px){body{background-position:57% center}main{padding:65px 8px 90px}h1{font-size:clamp(32px,8.5vw,49px);letter-spacing:.12em;margin-bottom:36px}.machine{width:100%;max-width:560px}.identity>span{font-size:3.1cqw}.identity img{width:85%}.project{top:27.5%;height:33%}.ambient{width:66%;left:-12%;height:150%;top:-10%}}
.cosmos{position:fixed;inset:0;overflow:hidden;pointer-events:none;contain:strict}
.nebula{position:absolute;left:50%;top:50%;width:max(130vw,55vh);height:max(130vh,55vw);background:url('wallpaper.png') center/cover no-repeat;transform:translate(-50%,-50%) rotate(-7deg);animation:cosmic-orbit 90s linear infinite alternate;will-change:transform}
.stars{position:absolute;inset:0}.star{position:absolute;width:2px;height:2px;border-radius:50%;background:#e3edf7;opacity:.15;box-shadow:0 0 5px 1px #c8e4f166;animation:twinkle var(--duration) ease-in-out var(--delay) infinite}
.star:nth-child(3n){width:1px;height:1px;box-shadow:none}.star:nth-child(7n){background:#e3ddbd}
.machine{animation:station-drift 9s ease-in-out infinite;transform-origin:center}
.dormant:after{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;background:repeating-linear-gradient(0deg,#b3d8db08 0 1px,transparent 1px 5px),radial-gradient(ellipse,#add8da88,#75adb02b 75%);box-shadow:inset 0 0 14px #acdadc17;pointer-events:none}
.dormant.flicker:after{animation:screen-wake 1.1s ease-out both}
.ambient:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 48% 43%,#c8e6a817,transparent 60%);animation:core-breath 7s ease-in-out infinite}
@keyframes cosmic-orbit{to{transform:translate(-50%,-50%) rotate(7deg)}}
@keyframes station-drift{0%,100%{transform:translateY(0) rotate(-.12deg)}50%{transform:translateY(-9px) rotate(.2deg)}}
@keyframes twinkle{0%,40%,100%{opacity:.08}65%{opacity:var(--peak,.65)}80%{opacity:.2}}
@keyframes screen-wake{0%,100%{opacity:0}15%{opacity:.8}33%{opacity:.08}49%{opacity:.48}72%{opacity:.14}}
@keyframes core-breath{0%,100%{opacity:.25}50%{opacity:.9}}
body.resting *,body.resting *:before,body.resting *:after{animation-play-state:paused!important}
@media(max-width:600px){.nebula{background-position:57% center}.machine{animation-name:station-drift-mobile}}
@keyframes station-drift-mobile{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-height:500px) and (orientation:landscape){main{padding:24px 20px;justify-content:center}h1{font-size:clamp(30px,6vh,44px);margin-bottom:4px;letter-spacing:.13em}.machine{width:min(78vw,calc((100svh - 100px)*2.34),850px)}.identity>span{font-size:2.65cqw}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.nebula{will-change:auto;width:100%;height:100%;transform:none;left:0;top:0}.star{opacity:.25}}