@font-face{font-family:Michroma;src:url('/fonts/michroma.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;background:#040810;color:#d9ebf7;font-family:"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:radial-gradient(ellipse at 50% 77%,#163550 0%,#07101c 40%,#040810 75%)}
canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}
main{position:fixed;inset:0;pointer-events:none;display:flex;justify-content:center;align-items:flex-start;padding-top:calc(45vh - clamp(115px,14vw,190px));perspective:1000px}
h1{width:92vw;margin:0;color:#e5f2ff;text-align:center;font-weight:400;transform:translate3d(var(--title-x,0px),var(--title-y,0px),0) rotateX(4deg);text-shadow:0 0 24px #a0c6ff30}
.wordmark{display:block;font-family:Michroma,sans-serif;font-size:clamp(30px,8.3vw,120px);font-weight:400;letter-spacing:.025em;line-height:1.3}
.project{display:block;margin-top:17px;padding-left:.62em;font-size:12px;letter-spacing:.62em;color:#c0d5e9}
::selection{background:#4b709a;color:#fff}
@media(max-width:600px){main{padding-top:calc(45vh - 110px)}.wordmark{font-size:11vw}.project{margin-top:16px;font-size:10px}}
@media(max-height:480px){main{padding-top:calc(45vh - 95px)}.wordmark{font-size:min(7vw,64px)}.project{margin-top:8px;font-size:10px}}