@font-face {
  font-family: "Monocraft";
  src: url("/assets/Monocraft.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root { color-scheme: dark; --bg: #05050a; --ink: #e8e5f0; --muted: #898694; --violet: #ad83ff; --pink: #f08dcf; --mono: "Monocraft", "SFMono-Regular", Consolas, monospace; }
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100svh; overflow-x: hidden; color: var(--ink); background: var(--bg); font: 12px var(--mono); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
[hidden] { display: none !important; }

.ambient { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, #171322 0, #0b0b12 42%, #05050a 84%); }
.ambient__grid { position: absolute; inset: 0; opacity: .09; background-image: linear-gradient(#b7a3ff0c 1px, transparent 1px), linear-gradient(90deg, #b7a3ff0c 1px, transparent 1px); background-size: 76px 76px; mask-image: radial-gradient(ellipse, #000 12%, transparent 82%); }
.ambient__scanlines { position: absolute; inset: 0; opacity: .09; background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, #d8d4ff0b 4px); mix-blend-mode: screen; }
#particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; }


.hero { position: relative; z-index: 1; isolation: isolate; width: 100%; height: 100svh; min-height: 660px; overflow: hidden; }
.site-header { position: absolute; z-index: 5; top: clamp(14px, 2.5vh, 26px); left: clamp(16px, 3vw, 42px); }
.dashboard-shortcut { position: absolute; z-index: 6; top: clamp(14px, 2.5vh, 26px); right: clamp(16px, 3vw, 42px); display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #b99aff58; border-radius: 9px; background: #100d1bb8; color: #d8c9ff; font-size: 10px; letter-spacing: .02em; box-shadow: inset 0 0 12px #a779ff0c; transition: border-color .18s, color .18s, background .18s, box-shadow .18s; }
.dashboard-shortcut:hover, .dashboard-shortcut:focus-visible { border-color: #c4a1ffb5; background: #1a1328e8; color: #f0e8ff; box-shadow: 0 0 12px #a779ff35, inset 0 0 12px #a779ff18; }
.dashboard-shortcut:focus-visible { outline: 1px solid #d4b8ff; outline-offset: 3px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; color: #ded9ed; font-size: clamp(10px, 1vw, 13px); letter-spacing: .02em; }
.site-brand img { display: block; width: clamp(32px, 4vw, 46px); height: clamp(32px, 4vw, 46px); object-fit: contain; opacity: .92; filter: brightness(0) invert(1) drop-shadow(0 0 7px #a881ff80); }
.site-brand span { text-shadow: 0 0 18px #aa8aff25; }
.hero__copy { position: absolute; z-index: 4; top: clamp(70px, 12vh, 130px); left: 50%; width: min(920px, 88vw); transform: translateX(-50%); text-align: center; }
h1 { margin: 0; color: #a6a2af; opacity: .82; font-size: clamp(17px, 1.9vw, 25px); line-height: 1.65; font-weight: 400; letter-spacing: -.045em; text-wrap: balance; }
.hands-canvas { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.cube-stage { position: absolute; z-index: 3; top: 59%; left: 50%; width: min(34vw, 340px); height: min(34vw, 340px); min-width: 220px; min-height: 220px; transform: translate(-50%, -50%); display: grid; place-items: center; }
.cube-hint { position: absolute; top: calc(100% + 7px); left: 50%; z-index: 4; margin: 0; transform: translateX(-50%); color: #aaa2bd80; font-size: clamp(8px, .75vw, 10px); letter-spacing: .025em; white-space: nowrap; pointer-events: none; }

#cube-canvas { position: relative; z-index: 2; display: block; width: 100%; height: 100%; outline: none; touch-action: none; filter: drop-shadow(0 0 6px #e9c6ffcc) drop-shadow(0 0 19px #c084fc99) drop-shadow(0 0 34px #a855f74d); }
#cube-canvas:focus-visible { outline: 1px solid #c4aaff; outline-offset: -8px; border-radius: 24px; }

.cube-stage__fallback { position: relative; z-index: 3; width: 86%; padding: 24px 16px; border: 1px solid #c084fcaa; border-radius: 18px; background: #0d0b14; box-shadow: 0 0 12px #c084fc88, 0 0 28px #a855f755; text-align: center; }
.fallback-cube { display: block; color: #c7a3ff; font-size: 68px; text-shadow: 0 0 24px #ab5bff; }
.fallback-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.fallback-links a { padding: 7px 9px; border: 1px solid #c4b7ff36; border-radius: 99px; color: #e8e1ff; }
.face-links { position: absolute; z-index: 20; left: 50%; bottom: 5%; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.face-links:focus-within { width: max-content; height: auto; max-width: 90vw; overflow: visible; clip-path: none; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; padding: 10px; border: 1px solid #ad97ff45; border-radius: 12px; background: #101019f5; white-space: normal; }
.face-links a { padding: 7px 9px; border-radius: 99px; color: #ded8ef; }
.face-links a:focus-visible { outline: 1px solid #c39cff; }
.thanks { position: absolute; z-index: 10; right: clamp(16px, 3.2vw, 44px); bottom: clamp(15px, 2.4vh, 26px); }
.thanks__button { width: 46px; height: 46px; display: grid; place-items: center; padding: 6px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.thanks__button svg { width: 28px; height: 28px; overflow: visible; }
.thanks__button path { fill: #e969bd15; stroke: #f5a4dc; stroke-width: 1.35; filter: drop-shadow(0 0 5px #f264c8a0); transition: fill .25s, filter .25s, transform .25s; transform-origin: center; }
.thanks__button:hover path, .thanks__button[aria-expanded="true"] path { fill: #f276d64c; filter: drop-shadow(0 0 10px #f47bdc); transform: scale(1.07); }
.thanks__card { position: absolute; right: 0; bottom: 100%; width: 235px; padding: 17px 18px; border: 1px solid #b89cff55; border-radius: 14px; background: #11111bef; box-shadow: 0 12px 50px #0009, 0 0 30px #8e68ff19; backdrop-filter: blur(14px); animation: card-in .22s ease-out both; }
.thanks__card[hidden] { display: none; }
.thanks__card p { margin: 0 0 12px; color: #eee9fb; }
.thanks__card ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 11px; }
.thanks__card a { color: #b8b4c7; font-size: 9px; }
.thanks__card a:hover, .thanks__card a:focus-visible { color: #e9c6ff; }


@keyframes card-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .cube-stage { top: 59%; width: min(34vw, 310px); height: min(34vw, 310px); }
}
@media (max-width: 900px) and (orientation: portrait) {
  .hero { height: max(100svh, 720px); min-height: 720px; }
  .site-header { top: 12px; left: 14px; }
  .site-brand img { width: 34px; height: 34px; }
  .site-brand { font-size: 9px; }
  .hero__copy { top: 8%; width: 89vw; }
  h1 { font-size: clamp(16px, 4.6vw, 20px); line-height: 1.7; }
  .desktop-break { display: none; }
  .cube-stage { top: 54%; width: clamp(175px, 58vw, 230px); height: clamp(175px, 58vw, 230px); min-width: 0; min-height: 0; }
  .thanks { right: 10px; bottom: 10px; }
}
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .hero { height: max(100svh, 400px); min-height: 400px; }
  .hero__copy { top: 5%; width: min(86vw, 760px); }
  h1 { font-size: clamp(13px, 2.7vh, 18px); line-height: 1.5; }
  .cube-stage { top: 58%; width: clamp(140px, 38svh, 210px); height: clamp(140px, 38svh, 210px); min-width: 0; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}