:root {
  --bg0: #070613;
  --bg1: #161337;
  --ink: #f6f2ff;
  --muted: #c8c1ef;
  --cyan: #79f7ff;
  --pink: #ff4fd8;
  --gold: #ffd166;
  --green: #9cff7d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  background:
    radial-gradient(circle at 20% 10%, rgba(121,247,255,.28), transparent 28rem),
    radial-gradient(circle at 84% 26%, rgba(255,79,216,.24), transparent 24rem),
    linear-gradient(135deg, var(--bg0), var(--bg1) 55%, #08040d);
}
.page { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 46px 0 64px; }
.hero, .cabinet, .rooms article {
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}
.hero { border-radius: 34px; padding: clamp(24px, 5vw, 58px); }
.badge, .kicker { color: var(--cyan); letter-spacing: .16em; text-transform: uppercase; font-weight: 800; font-size: .78rem; }
h1 { font-size: clamp(2.6rem, 8vw, 6.9rem); line-height: .88; margin: 18px 0; max-width: 920px; }
.lede { color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.45rem); max-width: 760px; }
.hero-grid { display: grid; grid-template-columns: 330px 1fr; gap: 28px; align-items: center; margin-top: 34px; }
.avatar { width: 100%; border-radius: 30px; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 22px 48px rgba(0,0,0,.38); }
.manifesto { padding: 22px 28px; border-left: 5px solid var(--gold); background: rgba(0,0,0,.18); border-radius: 24px; }
.manifesto h2, .cabinet h2 { margin-top: 0; font-size: 2rem; }
li { margin: .75rem 0; color: var(--muted); }
.cabinet { margin-top: 30px; border-radius: 30px; padding: 30px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; align-content: start; }
button {
  cursor: pointer;
  border: 0;
  color: #130d20;
  background: linear-gradient(135deg, var(--gold), var(--pink));
  border-radius: 999px;
  padding: 13px 17px;
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  transition: transform .18s ease, filter .18s ease;
}
button:hover { transform: translateY(-2px) rotate(-1deg); filter: saturate(1.2); }
.sky {
  grid-column: 1 / -1;
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    rgba(0,0,0,.25);
  background-size: 34px 34px;
}
.hint { position: absolute; left: 22px; top: 18px; color: rgba(255,255,255,.5); }
.token {
  position: absolute;
  padding: 8px 12px;
  border-radius: 999px;
  font: 800 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #071018;
  animation: drift var(--dur) ease-in forwards;
  box-shadow: 0 0 24px rgba(121,247,255,.35);
}
@keyframes drift {
  0% { opacity: 0; transform: translateY(30px) scale(.8) rotate(-8deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -260px) scale(1.1) rotate(16deg); }
}
.rooms { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rooms article { border-radius: 24px; padding: 24px; }
.rooms h3 { margin-top: 0; color: var(--gold); }
.rooms p { color: var(--muted); }
code { color: var(--green); }
body.fog { --cyan: #d8fbff; --pink: #b8a7ff; }
body.spark { --gold: #fff36b; --pink: #ff7a18; }
body.moth { --cyan: #cfc6ff; --green: #f1ffb5; }
body.soup { --gold: #ffb84d; --pink: #ff6b6b; }
body.hinge { --cyan: #79f7ff; --gold: #e7d28a; }
@media (max-width: 820px) { .hero-grid, .cabinet, .rooms { grid-template-columns: 1fr; } .avatar { max-width: 330px; } }