:root {
  --bg: #05040a; --bg2: #0b0915; --card: rgba(22, 18, 40, .62); --line: rgba(var(--v-rgb), .22);
  --ink: #f4f1ff; --mute: #a49cc4; --dim: #6b6488;
  --g: #9dff2e; --g-rgb: 157, 255, 46; --v: #b26bff; --v-rgb: 178, 107, 255;
  --a2: 59, 232, 255;
  --c: #3be8ff; --p: #ff6fb5; --y: #ffd23b;
  --disp: 'Unbounded', system-ui, sans-serif;
  --body: 'Space Grotesk', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --r: 22px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--body); overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
b, strong { font-weight: 700; }
.mono { font-family: var(--mono); }
.g { color: var(--g); } .v { color: var(--v); } .c { color: var(--c); }
:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(var(--g-rgb),.28); }

/* ---- ambient: aurora blobs + grid + particles ---- */
body::before { content: ''; position: fixed; inset: -20%; z-index: -3; pointer-events: none;
  background: radial-gradient(40% 35% at 20% 20%, rgba(var(--v-rgb),.22), transparent 70%),
              radial-gradient(35% 30% at 85% 30%, rgba(var(--a2),.14), transparent 70%),
              radial-gradient(45% 40% at 60% 90%, rgba(var(--g-rgb),.16), transparent 70%);
  animation: aurora 22s ease-in-out infinite alternate; }
body::after { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(var(--g-rgb),.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(var(--g-rgb),.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 85%); }
@keyframes aurora { 0% { transform: translate(0,0) rotate(0); } 50% { transform: translate(4%,-3%) rotate(6deg); } 100% { transform: translate(-4%,3%) rotate(-5deg); } }
.fxc { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }

/* ---- custom cursor (desktop only) ---- */
@media (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
  .cur-dot, .cur-ring { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; border-radius: 50%; }
  .cur-dot { width: 6px; height: 6px; background: var(--g); }
  .cur-ring { width: 30px; height: 30px; border: 1.5px solid rgba(var(--g-rgb),.55); transition: width .18s, height .18s, border-color .18s; }
  .cur-ring.on { width: 44px; height: 44px; border-color: rgba(var(--v-rgb),.8); }
}

/* ---- layout ---- */
.wrap { width: min(880px, 100%); margin: 0 auto; padding: 16px 20px 64px; }

/* ---- top bar ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 4px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 13px var(--disp); letter-spacing: .08em; }
.mark img { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--g); }
.top-r { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--ink);
  text-decoration: none; font: 700 13px var(--body); transition: border-color .2s, background .2s; }
.pill:hover { border-color: var(--g); background: rgba(var(--g-rgb),.06); }
.pill.lang { font-family: var(--mono); font-weight: 700; }
.pill svg { width: 15px; height: 15px; }

/* ---- hero ---- */
.hero { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: center; margin: 44px 0 40px; }
.wake { position: relative; width: 240px; aspect-ratio: 1; display: grid; place-items: center; margin: 0 auto;
  border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(8px); border-radius: var(--r);
  transition: transform .25s ease-out, border-color .25s, box-shadow .25s; transform-style: preserve-3d; }
.wake:hover { border-color: rgba(var(--g-rgb),.5); box-shadow: 0 12px 44px rgba(var(--g-rgb),.12); }
.wake .head { width: 66%; height: auto; border-radius: 16%; z-index: 2; image-rendering: pixelated;
  box-shadow: 0 0 30px rgba(var(--g-rgb),.4);
  animation: breathe 4.6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes breathe { 0%,100% { transform: scale(1) rotate(-1deg); } 50% { transform: scale(1.04) rotate(1deg); } }
.corner { position: absolute; width: 22px; height: 22px; z-index: 3; border: 2.5px solid var(--g);
  filter: drop-shadow(0 0 6px rgba(var(--g-rgb),.6)); animation: cornerPulse 2.6s ease-in-out infinite; }
@keyframes cornerPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.c-tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.c-tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.c-bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.c-br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.idchip { position: absolute; z-index: 3; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.04);
  font: 700 10px var(--mono); letter-spacing: .14em; color: var(--mute); }
.idchip b { color: var(--g); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.zz { position: absolute; z-index: 2; right: 10%; top: 12%; display: flex; gap: 2px; pointer-events: none; }
.zz i { font: 800 16px var(--disp); font-style: normal; color: var(--mute); opacity: 0; animation: zz 3s ease-in-out infinite; }
.zz i:nth-child(1) { animation-delay: 0s; } .zz i:nth-child(2) { animation-delay: .5s; } .zz i:nth-child(3) { animation-delay: 1s; }
@keyframes zz { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateY(-14px); } }

.kicker { font: 700 12px var(--mono); letter-spacing: .14em; color: var(--mute); margin: 0 0 10px; text-transform: uppercase; }
.kicker b { color: var(--g); }
.kicker .live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 8px var(--g); margin-right: 7px; animation: blink 1.6s ease-in-out infinite; }
h1.title { font: 600 clamp(30px, 6vw, 52px)/1.12 var(--disp); letter-spacing: -.01em; margin: 0 0 16px; }
h1.title em { font-style: normal; color: var(--g); text-shadow: 0 0 24px rgba(var(--g-rgb),.45); }
.intro { color: var(--mute); font-size: 16.5px; margin: 0 0 22px; max-width: 46ch; }
.intro b { color: var(--ink); }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 22px; border-radius: 999px;
  font: 700 14px var(--body); text-decoration: none; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--ink);
  transition: transform .15s, border-color .2s, background .2s, box-shadow .2s; }
.btn.big { background: var(--g); border-color: var(--g); color: #06070a; box-shadow: 0 0 26px rgba(var(--g-rgb),.32); }
.btn.big:hover { transform: translateY(-2px); box-shadow: 0 6px 34px rgba(var(--g-rgb),.45); }
.btn.ghost:hover { border-color: var(--g); transform: translateY(-2px); }
.btn.disabled { color: var(--dim); border-style: dashed; pointer-events: none; }
.btn svg { width: 16px; height: 16px; }

/* ---- glitch hover on title ---- */
h1.title:hover { animation: glitch .35s linear infinite; }
@keyframes glitch {
  0%,100% { text-shadow: 2px 0 rgba(59,232,255,.7), -2px 0 rgba(255,111,181,.7); }
  50% { text-shadow: -2px 0 rgba(59,232,255,.7), 2px 0 rgba(255,111,181,.7); }
}

/* ---- ticker marquee ---- */
.ticker { border-block: 1px solid var(--line); background: rgba(22,18,40,.45); overflow: hidden;
  padding: 11px 0; margin: 32px 0 4px; position: relative; }
.ticker-in { display: flex; gap: 44px; width: max-content; animation: marquee 24s linear infinite;
  font: 700 12px var(--mono); letter-spacing: .18em; color: var(--mute); text-transform: uppercase; }
.ticker-in b { color: var(--g); }
.ticker:hover .ticker-in { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- stats strip ---- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 34px 0; }
.stats > div { border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 16px 18px; backdrop-filter: blur(8px); }
.stats .n { font: 600 26px var(--disp); color: var(--g); letter-spacing: -.01em; }
.stats .k { font: 700 11px var(--mono); letter-spacing: .14em; color: var(--dim); text-transform: uppercase; margin-top: 4px; }

/* ---- section head ---- */
.sec { margin: 52px 0 14px; display: flex; align-items: baseline; gap: 12px; }
.sec h2 { font: 600 22px var(--disp); margin: 0; }
.sec .idx { font: 700 12px var(--mono); color: var(--v); letter-spacing: .12em; }
.sec .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

/* ---- project cards ---- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.card { position: relative; border: 1px solid var(--line); background: var(--card); border-radius: var(--r);
  padding: 20px 20px 18px; backdrop-filter: blur(8px); text-decoration: none; overflow: hidden;
  transition: transform .18s, border-color .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); border-color: rgba(var(--g-rgb),.5); box-shadow: 0 8px 40px rgba(var(--g-rgb),.10); }
.card .tag { position: absolute; top: 16px; right: 16px; font: 700 10px var(--mono); letter-spacing: .12em;
  color: var(--c); border: 1px solid rgba(59,232,255,.3); border-radius: 999px; padding: 3px 9px; }
.card.hot .tag { color: var(--g); border-color: rgba(var(--g-rgb),.35); }
.card h3 { font: 600 17px var(--disp); margin: 0 0 6px; }
.card p { margin: 0; color: var(--mute); font-size: 14.5px; line-height: 1.55; }
.card .meta { margin-top: 12px; font: 700 11.5px var(--mono); color: var(--dim); letter-spacing: .06em; }
.card .bar { margin-top: 12px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.card .bar i { display: block; height: 100%; border-radius: 99px; background: var(--g); box-shadow: 0 0 8px rgba(var(--g-rgb),.7); }

/* ---- links list ---- */
.links { border: 1px solid var(--line); background: var(--card); border-radius: var(--r); backdrop-filter: blur(8px); overflow: hidden; }
.link-row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; text-decoration: none;
  border-bottom: 1px solid rgba(var(--v-rgb),.12); transition: background .2s; }
.link-row:last-child { border-bottom: 0; }
button.link-row { width: 100%; border: 0; border-bottom: 1px solid rgba(var(--v-rgb),.12); background: transparent; text-align: left; font-family: var(--body); }
.link-row:hover { background: rgba(var(--g-rgb),.05); }
.link-row .ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.link-row .ic svg { width: 17px; height: 17px; }
.link-row .tx { flex: 1; min-width: 0; }
.link-row .t { font: 700 14.5px var(--body); }
.link-row .d { font: 400 12.5px var(--body); color: var(--mute); margin-top: 1px; }
.link-row .url { font: 700 11.5px var(--mono); color: var(--dim); letter-spacing: .04em; }
.link-row .arr { color: var(--dim); transition: transform .18s, color .18s; }
.link-row:hover .arr { transform: translateX(4px); color: var(--g); }

/* copy toast */
.toast { position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 20px); z-index: 999;
  background: var(--g); color: #06070a; font: 700 13px var(--body); padding: 11px 20px; border-radius: 999px;
  box-shadow: 0 8px 30px rgba(var(--g-rgb),.4); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- footer ---- */
.foot { margin-top: 56px; text-align: center; }
.foot .safe { font: 700 12px var(--mono); color: var(--mute); letter-spacing: .1em; }
.foot .safe b { color: var(--g); }
.foot .cp { margin-top: 10px; font: 400 12px var(--mono); color: var(--dim); }
.foot .cp a { color: var(--dim); text-decoration: none; border-bottom: 1px dotted var(--dim); }

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; text-align: center; gap: 18px; margin-top: 30px; }
  .wake { width: 180px; }
  .intro { margin-inline: auto; }
  .cta { justify-content: center; }
  .grid, .stats { grid-template-columns: 1fr 1fr; }
  .stats { gap: 8px; }
  .top { flex-wrap: nowrap; }
  .top-r { flex-wrap: nowrap; white-space: nowrap; }
  .pill { height: 32px; padding: 0 10px; font-size: 12px; gap: 5px; flex: none; }
  .pill svg { width: 13px; height: 13px; }
  .mark { font-size: 11px; }
  .mark img { width: 28px; height: 28px; }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
  .stats .n { font-size: 20px; }
}

/* ---- theme: violet (cyber purple) ---- */
body[data-theme="violet"] {
  --g: #b26bff; --g-rgb: 178, 107, 255;
  --v: #3be8ff; --v-rgb: 59, 232, 255;
  --line: rgba(59, 232, 255, .22);
  --a2: 255, 111, 181;
  --card: rgba(26, 18, 46, .62);
}

/* ---- theme: gold (dark gold) ---- */
body[data-theme="gold"] {
  --g: #ffd23b; --g-rgb: 255, 210, 59;
  --v: #ff9d5c; --v-rgb: 255, 157, 92;
  --line: rgba(255, 210, 59, .20);
  --a2: 255, 111, 181;
  --card: rgba(34, 26, 14, .62);
}