:root {color-scheme:dark;--bg:#090d18;--ink:#f7f7ff;--muted:#9faabf;--s-blue:#a4bfff;--s-sky:#98f2dc;--s-music:#d4b2ff;--s-bca:#ffacd3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
* { box-sizing:border-box }
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
body{overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid #f5e0ff;outline-offset:8px;border-radius:4px}
.skip-link{position:fixed;z-index:50;left:12px;top:12px;transform:translateY(-150%);padding:12px;background:white;color:#111;text-decoration:none}
.skip-link:focus{transform:none}
.universe{position:relative;isolation:isolate;min-height:740px;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 48% 49%,#15213c 0%,#0d1325 34%,#090d18 72%)}
.starfield{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.nebula{position:absolute;inset:-18%;z-index:-1;pointer-events:none;opacity:.9;background:radial-gradient(ellipse 28% 28% at 21% 70%,rgba(108,79,178,.18),transparent 80%),radial-gradient(ellipse 28% 26% at 78% 26%,rgba(50,131,161,.13),transparent 78%),radial-gradient(ellipse 26% 26% at 79% 74%,rgba(183,72,135,.1),transparent 78%)}
.identity{position:absolute;top:11%;left:50%;transform:translateX(-50%);text-align:center;z-index:2;width:max-content;max-width:90%;pointer-events:none}
.identity-kicker{font-size:10px;letter-spacing:.33em;color:#92a1bc;font-weight:700}
.identity-spark{color:#9eafe9;margin-right:8px;font-size:15px}
h1{margin:18px 0 4px;font-size:clamp(2.5rem,5.2vw,5.8rem);font-weight:670;line-height:.98;letter-spacing:-.075em;text-shadow:0 0 80px #4a73c548}
h1 span:not(.period){font-weight:330}h1 .period{color:#9cbcff}
.identity p{margin:19px 0 0;font-size:12px;color:#b1bdd1;letter-spacing:.24em;text-transform:uppercase}
.identity p span{padding:0 12px;color:#63718d}
.constellation{position:absolute;inset:0;z-index:3}
.signal{--tone:#a4bfff;--dx:0px;--dy:0px;position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;flex-direction:column;gap:7px;width:max-content;max-width:min(32vw,350px);text-align:center;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)));padding:8px 12px 11px;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.signal-visual{display:flex;align-items:center;justify-content:center;position:relative;width:55px;height:55px;flex:none;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tone),transparent 68%))}
.signal-visual::before,.signal-visual::after{content:"";position:absolute;border:1px solid var(--tone);border-radius:50%;opacity:.35;transition:opacity .25s,transform .35s}
.signal-visual::before{width:32px;height:32px}.signal-visual::after{width:50px;height:50px;opacity:.14}
.signal-core{position:relative;width:9px;height:9px;border-radius:50%;background:var(--tone);box-shadow:0 0 12px 2px var(--tone),0 0 30px 5px color-mix(in srgb,var(--tone),transparent 72%);transform:rotate(45deg);transition:transform .35s}
.signal-core::after{content:"";position:absolute;left:-15px;top:3.5px;width:39px;height:1px;background:linear-gradient(90deg,transparent,var(--tone),transparent);opacity:.65}
.signal-category{color:var(--tone);font-size:9px;letter-spacing:.26em;font-weight:700;white-space:nowrap;text-transform:uppercase}
.signal-label{color:#f1f4ff;font-size:clamp(14px,1.45vw,21px);font-weight:650;letter-spacing:-.03em;white-space:nowrap;text-shadow:0 1px 24px #050714}
.signal-hint{font-size:11px;color:#a4aec2;letter-spacing:.03em;white-space:nowrap;opacity:.7;transition:opacity .25s}
.signal:hover .signal-visual::before,.signal:focus-visible .signal-visual::before{opacity:.9;transform:scale(1.2)}
.signal:hover .signal-visual::after,.signal:focus-visible .signal-visual::after{opacity:.4;transform:scale(1.3)}
.signal:hover .signal-core,.signal:focus-visible .signal-core{transform:rotate(45deg) scale(1.45)}
.signal:hover .signal-label,.signal:focus-visible .signal-label{color:white;text-shadow:0 0 20px var(--tone)}
.signal:hover .signal-hint,.signal:focus-visible .signal-hint{opacity:1}
.signal-personal{--x:22%;--y:37%;--tone:#a9beff}
.signal-sky{--x:78%;--y:33%;--tone:#91d9e3}
.signal-music{--x:26%;--y:70%;--tone:#d7b8ff}
.signal-youtube{--x:51%;--y:59%;--tone:#ffaea3}
.signal-bca-social{--x:78%;--y:65%;--tone:#f4a1c5}
.signal-bca{--x:77%;--y:87%;--tone:#ffd6ae}
.signal-bca .signal-core{border-radius:2px;box-shadow:0 0 14px 4px #f7a6cc,0 0 30px 4px #f4a1c555}
.signal-bca .signal-visual::before{border-radius:5px;transform:rotate(45deg)}
.signal-bca:hover .signal-visual::before{transform:rotate(45deg) scale(1.2)}
.signal-bca .signal-label{font-size:clamp(19px,2.1vw,29px);color:#ffe6ef}
.signal-bca-social .signal-label{font-size:clamp(12px,1.2vw,18px)}
.hintbar{position:absolute;top:55%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:1;color:#8591a9;font-size:9px;letter-spacing:.27em;white-space:nowrap;pointer-events:none}
.hint-numeral{color:#56647d;font-size:9px}
.hint-mobile{display:none}
.site-controls{position:absolute;left:5%;right:5%;bottom:4%;display:flex;align-items:center;justify-content:center;z-index:5}
.site-signature{font-size:10px;letter-spacing:.16em;color:#8d9ab1;white-space:nowrap}
.status-dot{display:inline-block;height:6px;width:6px;background:#a5d9c8;border-radius:50%;box-shadow:0 0 10px #a5d9c8;margin-right:10px;vertical-align:middle}
@media(max-width:750px){
  .universe{min-height:780px;min-height:100svh}
  .identity{top:7.5%}
  .identity-kicker{font-size:9px;letter-spacing:.22em}
  h1{font-size:clamp(2.15rem,9vw,3.2rem);white-space:nowrap;margin:15px 0 0}
  .identity p{font-size:10px;margin-top:14px;letter-spacing:.15em}
  .identity p span{padding:0 6px}
  .signal{max-width:80vw;gap:5px;padding:5px 5px 7px}
  .signal-visual{width:37px;height:37px}
  .signal-visual::before{width:24px;height:24px}.signal-visual::after{width:36px;height:36px}
  .signal-core{width:7px;height:7px}
  .signal-category{font-size:8px;letter-spacing:.16em}
  .signal-label{font-size:clamp(13px,3.9vw,18px)}
  .signal-hint{font-size:10px}
  .signal-personal{--x:28%;--y:31%}
  .signal-sky{--x:74%;--y:39%}
  .signal-music{--x:27%;--y:55%}
  .signal-youtube{--x:75%;--y:56%}
  .signal-youtube .signal-label{font-size:clamp(12px,3.4vw,16px)}
  .signal-bca-social{--x:29%;--y:75%}
  .signal-bca{--x:75%;--y:83%}
  .signal-bca-social .signal-label{font-size:clamp(11px,3.25vw,15px)}
  .signal-bca .signal-label{font-size:22px}
  .hintbar{display:none}.hint-desktop{display:none}.hint-mobile{display:block}.hint-numeral{display:none}
  .site-controls{bottom:2.8%;left:5%;right:5%}
  .site-signature{font-size:8px;letter-spacing:.08em}
  .status-dot{margin-right:5px}
}
@media(max-height:690px) and (min-width:751px){.identity{top:6%}.signal-personal{--y:34%}.signal-sky{--y:34%}.signal-music{--y:72%}.signal-youtube{--y:55%}.signal-bca-social{--y:65%}.signal-bca{--y:86%}.site-controls{bottom:2%}}
@media(max-height:680px) and (max-width:750px){.universe{min-height:760px}.site-controls{bottom:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.nebula{opacity:.65}}