:root{color-scheme:dark;--ink:#030409;--text:#eef1f7;--soft:#a9b3c4;--faint:#6c778a;--warm:#ffc79a;--cool:#9fbaff;--font:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;--edge:clamp(20px,4.5vw,64px)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--warm);outline-offset:4px;border-radius:6px}
::selection{background:var(--warm);color:var(--ink)}
[hidden]{display:none!important}
.skip{position:absolute;left:16px;top:-80px;z-index:10;padding:12px 18px;border-radius:6px;background:var(--text);color:var(--ink)}
.skip:focus{top:12px}

/* Artwork fills the viewport behind everything. */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
.sky canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.sky.webgl-ready canvas{opacity:1}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(20deg,#030409e6 0%,#03040999 22%,transparent 50%),radial-gradient(140% 100% at 60% 50%,transparent 55%,#030409b3 100%)}

/* Page */
.page{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:calc(var(--edge)*.6) var(--edge) calc(var(--edge)*.55)}
.top{display:flex;align-items:center;justify-content:space-between}
.mark{display:grid;place-items:center;width:44px;height:44px;margin-left:-8px;border-radius:50%}
.mark svg{width:28px;height:28px;fill:none;stroke:var(--warm);stroke-width:1.3}
.mark circle{fill:#000;stroke:#ffffff55;stroke-width:1}
.motion{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 14px 0 12px;border:1px solid #ffffff1f;border-radius:18px;background:#05070c66;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--soft);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:color .2s,border-color .2s}
.motion:hover{color:var(--text);border-color:#ffffff4d}
.motion-icon{width:10px;height:10px;position:relative}
.motion-icon::before,.motion-icon::after{content:"";position:absolute;top:0;width:3px;height:10px;background:currentColor;border-radius:1px}
.motion-icon::before{left:1px}.motion-icon::after{right:1px}
.motion[aria-pressed="true"] .motion-icon::before{left:1px;width:0;height:0;background:none;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent currentColor;border-radius:0}
.motion[aria-pressed="true"] .motion-icon::after{display:none}

.hero{align-self:end;padding-bottom:clamp(8px,3vh,40px);max-width:min(100%,900px)}
h1{margin:0;font-weight:600;font-size:clamp(52px,9.2vw,148px);line-height:1;letter-spacing:-.045em;padding:.04em .06em .08em 0;white-space:nowrap}
.name{background:linear-gradient(180deg,#ffffff 30%,#c9d2e3);-webkit-background-clip:text;background-clip:text;color:transparent}
.tld{font-weight:300;letter-spacing:-.03em;margin-left:.04em;background:linear-gradient(100deg,var(--warm),#e7b3c6 55%,var(--cool));-webkit-background-clip:text;background-clip:text;color:transparent}
.line{margin:clamp(10px,1.6vw,22px) 0 0 .2em;color:var(--soft);font-size:clamp(15px,1.25vw,18px);line-height:1.6;letter-spacing:.005em}
.foot{display:flex;justify-content:flex-end;color:var(--faint);font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}

/* No-WebGL fallback: a quiet still of the same composition. */
.fallback{position:absolute;inset:0;transition:opacity 1.2s ease}
.sky.webgl-ready .fallback{opacity:0}
.fallback-stars{position:absolute;inset:0;opacity:.55;background-image:radial-gradient(#dfe7ff 1px,transparent 1.4px),radial-gradient(#ffe2c8 .8px,transparent 1.2px);background-size:173px 149px,97px 113px;background-position:13px 41px,61px 7px}
.fallback-galaxy{position:absolute;left:60%;top:44%;width:150vmax;height:34vmax;transform:translate(-50%,-50%) rotate(-9deg);border-radius:50%;background:radial-gradient(closest-side,#ffd6b0 0%,#c98a6a26 9%,#4d68c033 30%,#24336b1a 60%,transparent 100%);filter:blur(6px)}
.fallback-core{position:absolute;left:60%;top:44%;width:7vmin;height:7vmin;transform:translate(-50%,-50%);border-radius:50%;background:#000;box-shadow:0 0 0 1px #ffdcb455,0 0 4vmin 1vmin #ffb98033}

@media (max-width:700px),(orientation:portrait){
  .shade{background:linear-gradient(0deg,#030409f2 0%,#030409b3 26%,transparent 50%),radial-gradient(160% 90% at 50% 40%,transparent 50%,#030409b3 100%)}
  .fallback-galaxy,.fallback-core{left:50%;top:44%}
  .fallback-galaxy{width:220vmax;height:46vmax}
}
@media (max-width:520px){
  h1{font-size:clamp(44px,15.5vw,72px)}
  .line{font-size:15px}
  .foot{justify-content:flex-start;margin-top:10px}
}
@media (max-height:480px) and (orientation:landscape){h1{font-size:clamp(40px,12vh,72px)}}