:root { color-scheme: dark; --cyan:#63dcff; --violet:#b87cff; --rose:#ff5ca8; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; display: grid; place-items: center; overflow-x: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(25,110,145,.28), transparent 38%),
    radial-gradient(circle at 78% 76%, rgba(132,35,105,.24), transparent 42%),
    linear-gradient(145deg,#05070c,#0a0b13 48%,#05060b);
  color: #f6f4ff; font: 16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.2;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:48px 48px;
}
.identity {
  position: relative; isolation:isolate; width:min(92vw,760px); padding:clamp(2rem,5vw,4rem);
  text-align:center; border:1px solid rgba(184,124,255,.3); border-radius:32px;
  background:linear-gradient(145deg,rgba(12,14,24,.78),rgba(8,9,16,.6));
  box-shadow:0 30px 90px rgba(0,0,0,.58),0 0 55px rgba(99,220,255,.09),0 0 90px rgba(255,92,168,.08);
  backdrop-filter:blur(14px);
}
.halo {
  position:absolute; z-index:-1; width:min(70vw,500px); aspect-ratio:1; left:50%; top:42%; transform:translate(-50%,-50%);
  border-radius:50%; filter:blur(42px); opacity:.28;
  background:conic-gradient(from 40deg,var(--cyan),var(--violet),var(--rose),#ffd16b,var(--cyan));
  animation:halo-turn 28s linear infinite;
}
.head { display:block; width:min(68vw,430px); aspect-ratio:1; object-fit:contain; margin:0 auto -1.2rem; filter:drop-shadow(0 0 22px rgba(99,220,255,.24)); }
h1 { margin:0; font-size:clamp(2.6rem,8vw,5.8rem); font-weight:650; letter-spacing:.055em; text-transform:none;
  text-shadow:0 0 3px #fff,0 0 14px rgba(99,220,255,.72),0 0 34px rgba(184,124,255,.42),0 0 60px rgba(255,92,168,.23); }
p { margin:.7rem auto 1.7rem; color:#d8d4e7; letter-spacing:.13em; text-transform:uppercase; font-size:clamp(.68rem,1.5vw,.9rem); }
nav { display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; }
a { color:#fff; text-decoration:none; padding:.62rem 1.05rem; border:1px solid rgba(99,220,255,.28); border-radius:999px; background:rgba(7,10,17,.55); transition:.25s ease; }
a:hover, a:focus-visible { border-color:var(--cyan); box-shadow:0 0 18px rgba(99,220,255,.26); transform:translateY(-1px); }
@keyframes halo-turn { to { transform:translate(-50%,-50%) rotate(1turn); } }
@media (prefers-reduced-motion:reduce) { .halo { animation:none; } .head { display:none; } .identity::before { content:""; display:block; width:min(68vw,430px); aspect-ratio:1; margin:0 auto -1.2rem; background:url('/kryten-head.png') center/contain no-repeat; } }