/* ==========================================================================
   jinnn.xyz — "Cute by default, useful by design."
   hand-written CSS · no framework · 2026
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-roman.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* optional: 霞鹜文楷局部子集（构建脚本生成；缺失时自动回退系统楷/宋体） */
@font-face {
  font-family: "WenKai";
  src: url("../fonts/lxgw-wenkai-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --paper: #fbf6f1;
  --paper-2: #f6ece4;
  --paper-3: #fffdfb;
  --ink: #171114;
  --ink-2: #3a3036;
  --ink-3: #71626b;
  --line: rgba(23, 17, 20, 0.14);
  --line-strong: rgba(23, 17, 20, 0.32);
  --pink: #ff8fb8;
  --pink-2: #ffd6e4;
  --pink-3: #fff0f5;
  --hot: #e8275d;
  --butter: #ffd98e;
  --mint: #a8e6cf;
  --lilac: #d9c8ff;
  --blue: #a9c6ff;
  --shadow-soft: 0 30px 80px rgba(23, 17, 20, 0.12);
  --shadow-card: 0 2px 0 rgba(23, 17, 20, 0.04), 0 18px 44px rgba(23, 17, 20, 0.09);
  --font-display: "Bodoni Moda", "WenKai", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  --font-sans: "Space Grotesk", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-kai: "WenKai", "Kaiti SC", "KaiTi", "STKaiti", "Noto Serif SC", serif;
  --radius: 24px;
  --header-h: 74px;
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --paper: #120d12;
  --paper-2: #1a1219;
  --paper-3: #1f161e;
  --ink: #f7edf2;
  --ink-2: #dccbd5;
  --ink-3: #a6909d;
  --line: rgba(247, 237, 242, 0.15);
  --line-strong: rgba(247, 237, 242, 0.36);
  --pink: #ff9dbe;
  --pink-2: #532c3d;
  --pink-3: #2a1720;
  --hot: #ff7aa6;
  --butter: #e8c07a;
  --mint: #7fc9ad;
  --lilac: #b7a2e8;
  --blue: #8fb0e8;
  --shadow-soft: 0 30px 80px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* ---------- reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

body.menu-open,
body.palette-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
em { font-style: italic; }
::selection { background: var(--pink); color: var(--ink); }

:focus-visible {
  outline: 2px dashed var(--hot);
  outline-offset: 4px;
}

.container {
  width: min(100% - clamp(36px, 8vw, 128px), 1280px);
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: clamp(88px, 12vw, 168px);
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 400;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------- grain + custom cursor ---------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 250;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: 0.07; }

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  will-change: transform;
}
.cursor.is-visible { opacity: 1; }
.cursor__dot {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hot);
}
.cursor__ring {
  position: absolute;
  top: -19px;
  left: -19px;
  width: 38px;
  height: 38px;
  border: 1.4px solid var(--ink);
  border-radius: 50%;
  opacity: 0.65;
  transition: width 0.3s var(--ease), height 0.3s var(--ease), top 0.3s var(--ease), left 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.cursor.is-hot .cursor__ring {
  top: -30px;
  left: -30px;
  width: 60px;
  height: 60px;
  background: rgba(255, 143, 184, 0.22);
  border-color: var(--hot);
}
.cursor.is-card .cursor__ring {
  top: -42px;
  left: -42px;
  width: 84px;
  height: 84px;
  background: rgba(255, 143, 184, 0.3);
  border-color: transparent;
}
.cursor__label {
  position: absolute;
  top: 16px;
  left: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  white-space: nowrap;
}
.cursor.is-card .cursor__label { opacity: 1; transform: none; }
@media (pointer: fine) {
  html.has-cursor, html.has-cursor body, html.has-cursor a, html.has-cursor button { cursor: none; }
  html.has-cursor input, html.has-cursor textarea { cursor: text; }
}
@media (pointer: coarse) {
  .cursor { display: none; }
}

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 240;
  background: transparent;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--pink), var(--hot));
  border-radius: 0 3px 3px 0;
}

/* ---------- loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: grid;
  place-items: center;
  background: var(--paper);
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px;
}
.loader__kitten { width: 76px; height: 76px; color: var(--ink); }
.loader__kitten-face { animation: loaderFloat 2.4s ease-in-out infinite; }
.loader__bow { animation: bowWiggle 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.loader__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: 0.06em;
  line-height: 1;
}
.loader__title span { color: var(--hot); }
.loader__bar {
  width: min(300px, 62vw);
  height: 3px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.loader__bar span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--pink), var(--hot));
  transition: width 0.25s linear;
}
.loader__meta {
  display: flex;
  justify-content: space-between;
  width: min(300px, 62vw);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-color: var(--line);
}
.site-header__inner {
  width: min(100% - clamp(36px, 8vw, 128px), 1280px);
  margin-inline: auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand__mark {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand__dot { color: var(--hot); }
.brand__seal {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--hot);
  color: #fff6f8;
  font-family: var(--font-kai);
  font-size: 15px;
  line-height: 1;
  transform: rotate(-6deg);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
}
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  padding-block: 6px;
  transition: color 0.25s var(--ease);
}
.site-nav a span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--hot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); }

.site-tools { display: flex; align-items: center; gap: 12px; }
.clock {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--ink-3);
  min-width: 74px;
  text-align: right;
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.icon-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: rotate(-8deg); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

.tool-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.tool-link svg { width: 15px; height: 15px; }
.tool-link:hover { background: var(--ink); color: var(--paper); }

.menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  position: relative;
}
.menu-btn span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 1.6px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.menu-btn span:first-child { top: 16px; }
.menu-btn span:last-child { top: 22px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 19px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 19px; transform: rotate(-45deg); }

/* ---------- mobile menu ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--paper);
  padding: calc(var(--header-h) + 32px) clamp(24px, 8vw, 64px) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.mobile-menu.is-open { opacity: 1; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.1;
}
.mobile-menu__nav a span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--hot);
}
.mobile-menu__nav a em {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 13px;
  color: var(--ink-3);
  margin-left: auto;
  letter-spacing: 0.06em;
}
.mobile-menu__foot { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; }
.mobile-menu__foot a { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }

/* ---------- side rail ---------- */
.rail {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 180;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rail__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--ink-3);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.rail__dot span {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  pointer-events: none;
  white-space: nowrap;
}
.rail__dot:hover span { opacity: 1; transform: translateY(-50%); }
.rail__dot.is-active { background: var(--hot); border-color: var(--hot); transform: scale(1.35); }

/* ---------- typography helpers ---------- */
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kicker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hot); animation: pulse 2.4s ease-in-out infinite; }
.kicker__num {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 20px;
  padding-inline: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.kicker--small { font-size: 10px; letter-spacing: 0.14em; }

.section-head { margin-bottom: clamp(40px, 6vw, 76px); }
.section-head__row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
  gap: clamp(20px, 5vw, 80px);
  align-items: end;
  margin-top: 22px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.6vw, 5rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.section-title em {
  font-style: normal;
  font-family: var(--font-kai);
  color: var(--hot);
  position: relative;
  white-space: nowrap;
}
.section-title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.08em;
  background: var(--pink);
  opacity: 0.45;
  z-index: -1;
}
.section-head__lead {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-3);
  padding-bottom: 8px;
}

/* ---------- reveal ---------- */
.js [data-reveal],
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
}
.js [data-reveal].is-in,
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  font-size: 14px;
  letter-spacing: 0.03em;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn svg { width: 17px; height: 17px; transition: transform 0.3s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translate(2px, -2px); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--hot); border-color: var(--hot); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(28px, 6vw, 70px));
  padding-bottom: 28px;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
}
.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 560px at 82% 18%, rgba(255, 143, 184, 0.24), transparent 62%),
    radial-gradient(680px 520px at 4% 82%, rgba(217, 200, 255, 0.2), transparent 60%);
}
[data-theme="dark"] .hero__glow {
  background:
    radial-gradient(760px 560px at 82% 18%, rgba(255, 143, 184, 0.14), transparent 62%),
    radial-gradient(680px 520px at 4% 82%, rgba(217, 200, 255, 0.1), transparent 60%);
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__copy { position: relative; z-index: 2; min-width: 0; }
.hero__grid > * { min-width: 0; }
.hero__title {
  margin-top: clamp(16px, 3vw, 26px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.1rem, 8.4vw, 9.4rem);
  line-height: 0.82;
  letter-spacing: -0.035em;
}
.hero__line { display: block; }
.hero__line--accent em {
  font-style: italic;
  color: var(--hot);
  position: relative;
}
.hero__line--accent em::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 0.08em;
  height: 3px;
  background: var(--pink);
  border-radius: 99px;
  transform: rotate(-1.2deg);
  opacity: 0.6;
}
.hero__lead {
  margin-top: clamp(22px, 3vw, 34px);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 34em;
}
.hero__sub {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3.4vw, 38px);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 560px;
}
.hero__meta div { display: flex; flex-direction: column; gap: 2px; }
.hero__meta dt {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1;
}
.hero__meta dd {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  font-family: var(--font-mono);
}

.hero__stage { position: relative; z-index: 1; }
.mascot-wrap {
  position: relative;
  width: min(100%, 520px);
  margin-inline: auto;
  perspective: 1200px;
}
.mascot-card {
  position: relative;
  border: 1.5px solid var(--ink);
  border-radius: 26px;
  background: var(--paper-3);
  box-shadow: 10px 12px 0 var(--pink-2), var(--shadow-soft);
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(2deg);
  transition: transform 0.5s var(--ease);
  will-change: transform;
}
.mascot-card__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.mascot-card__dots { display: flex; gap: 5px; }
.mascot-card__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.mascot-card__dots i:first-child { background: var(--hot); opacity: 0.8; }
.mascot-card__name { color: var(--ink-2); }
.mascot-card__status { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.mascot-card__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(168, 230, 207, 0.28); }
.mascot-card__body { position: relative; padding: 4px 10px 0; }
.mascot { width: 100%; height: auto; cursor: pointer; }
.mascot__eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 6.4s infinite;
}
.mascot__pupil { transition: transform 0.25s ease-out; }
.mascot__bow { transform-box: fill-box; transform-origin: center; animation: bowWiggle 4.6s ease-in-out infinite; }
.mascot-card__hint {
  position: absolute;
  right: 16px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-3) 82%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  pointer-events: none;
}
.mascot-card__hint-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hot); animation: pulse 1.8s infinite; }

.sticker {
  position: absolute;
  z-index: 3;
  display: inline-block;
  padding: 8px 14px;
  border: 1.4px solid var(--ink);
  border-radius: 14px;
  background: var(--paper-3);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: center;
  box-shadow: 4px 5px 0 rgba(23, 17, 20, 0.12);
  transform: rotate(var(--rot, -4deg)) translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform 0.5s var(--ease);
}
.sticker--a { top: -18px; right: 44px; --rot: 7deg; font-size: 20px; padding: 4px 10px; background: var(--pink-2); }
.sticker--b { top: 88px; left: -22px; --rot: -7deg; background: var(--butter); }
.sticker--d { bottom: -20px; left: 38%; --rot: -3deg; background: var(--mint); }
.avatar-chip {
  position: absolute;
  top: -32px;
  left: -44px;
  z-index: 4;
  width: 104px;
  padding: 6px 6px 20px;
  background: #fffdfb;
  border: 1px solid var(--line);
  box-shadow: 5px 6px 0 rgba(23, 17, 20, 0.13);
  transform: rotate(-8deg) translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform 0.5s var(--ease);
}
.avatar-chip img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.avatar-chip figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  color: #5c4a53;
}
[data-theme="dark"] .avatar-chip { background: #fdf8f4; }

.hero__orbit {
  position: relative;
  width: min(100%, 520px);
  margin: 26px auto 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hero__orbit-text {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-3);
  animation: marquee 26s linear infinite;
}

.hero__footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(36px, 6vw, 70px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; transition: color 0.25s var(--ease); }
.scroll-cue:hover { color: var(--ink); }
.scroll-cue__line { display: block; width: 42px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden; }
.scroll-cue__line::after { content: ""; position: absolute; inset: 0; background: var(--hot); transform: translateX(-100%); animation: lineSweep 2.4s ease-in-out infinite; }
.hero__coords { display: none; }
.hero__now { display: inline-flex; align-items: center; gap: 8px; }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(168, 230, 207, 0.5); animation: pulseRing 2s infinite; }

.br-desk { display: inline; }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee-wrap {
  position: relative;
  overflow: hidden;
  z-index: 2;
  padding-block: 20px;
  margin-block: -14px;
}
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transform: rotate(-1.1deg) scale(1.02);
  margin-block: 0;
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  padding-block: 13px;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  letter-spacing: 0.06em;
  padding-inline: 14px;
  white-space: nowrap;
}
.marquee__sep { color: var(--pink); font-size: 0.9rem; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr) minmax(0, 0.72fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.polaroid {
  position: relative;
  background: #fffdfb;
  padding: 12px 12px 8px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transform: rotate(-2.4deg);
  transition: transform 0.5s var(--ease);
}
.polaroid:hover { transform: rotate(-1deg) translateY(-4px); }
.polaroid__tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 96px;
  height: 26px;
  transform: translateX(-50%) rotate(2deg);
  background: rgba(255, 143, 184, 0.45);
  border-left: 1px dashed rgba(23, 17, 20, 0.18);
  border-right: 1px dashed rgba(23, 17, 20, 0.18);
}
.polaroid img { aspect-ratio: 1; object-fit: cover; width: 100%; height: auto; }
.polaroid figcaption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 4px 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: #5c4a53;
}
.about-copy__lead {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.95;
  color: var(--ink);
}
.about-copy p + p { margin-top: 16px; }
.about-copy > p:not(.about-copy__lead):not(.about-copy__sign) { color: var(--ink-2); font-size: 15px; line-height: 1.95; }
.about-copy__sign {
  margin-top: 20px;
  font-family: var(--font-kai);
  font-size: 15px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}
.facts {
  margin-top: 30px;
  border-top: 1px solid var(--line);
}
.facts li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.facts__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-3); padding-top: 3px; }
.facts__v { color: var(--ink-2); }
.facts__v a { border-bottom: 1px solid var(--line-strong); transition: color 0.25s var(--ease), border-color 0.25s var(--ease); }
.facts__v a:hover { color: var(--hot); border-color: var(--hot); }

.seal-quote {
  position: relative;
  padding: 26px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-3);
  box-shadow: var(--shadow-card);
  transform: rotate(1.6deg);
  text-align: center;
}
.seal {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  border-radius: 10px;
  background: var(--hot);
  color: #fff5f8;
  font-family: var(--font-kai);
  font-size: 26px;
  line-height: 1;
  transform: rotate(-5deg);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.seal span { transform: translateY(-1px); }
.seal-quote blockquote {
  font-family: var(--font-kai);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.seal-quote__cite { margin-top: 14px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--ink-3); }
.seal-quote__en {
  margin-top: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-3);
  opacity: 0.85;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(40px, 6vw, 76px);
  border-block: 1px solid var(--line);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 20px;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  line-height: 1;
}
.stat__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-3); }

.timeline {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
  padding-left: 0;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 100px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(var(--line), var(--line-strong), var(--line));
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 36px;
  padding-block: 16px;
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: 96px;
  top: 30px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--hot);
  transition: background-color 0.3s var(--ease);
}
.timeline__item:hover::before { background: var(--hot); }
.timeline__date { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); padding-top: 4px; padding-right: 16px; text-align: right; }
.timeline__body h3 { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
.timeline__body p { font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }

/* ==========================================================================
   WORK
   ========================================================================== */
.work { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--paper-2) 55%, transparent) 18%, transparent 70%); }
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(24px, 4vw, 38px);
}
.filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.filter span { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); }
.filter:hover { transform: translateY(-1px); border-color: var(--ink); }
.filter.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter.is-active span { color: var(--pink); }

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.card {
  grid-column: span 4;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-3);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(23, 17, 20, 0.16); border-color: var(--line-strong); }
[data-theme="dark"] .card:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); }
.card.is-filtered { display: none; }
.card--wide { grid-column: span 7; }
.card--taskbar { grid-column: span 5; }
.card--medium { grid-column: span 5; }
.card--more { grid-column: span 3; }
.card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.card__visual {
  position: relative;
  height: clamp(190px, 17vw, 250px);
  padding: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.card--wide .card__visual { height: clamp(220px, 19vw, 290px); }
.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}
.card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.card__num { color: var(--hot); font-weight: 700; }
.card__status {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.card__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.card__title em { font-style: italic; color: var(--hot); }
.card__desc {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.card__tags li {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
.card__cta svg { width: 13px; height: 13px; transition: transform 0.35s var(--ease); }
.card:hover .card__cta svg { transform: translate(3px, -3px); }
.card:hover .card__cta { color: var(--hot); }

/* --- project visual: shared bits --- */
.viz { transition: transform 0.6s var(--ease); }
.card:hover .viz { transform: scale(1.015); }
.viz-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 10px;
  border: 1.2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink);
  box-shadow: 2px 2px 0 rgba(23, 17, 20, 0.16);
  transform: rotate(3deg);
}
.viz-badge--fav { background: var(--pink-2); right: auto; left: 14px; transform: rotate(-3deg); }
.viz-badge--edge { background: var(--blue); }
.viz-badge--green { background: var(--mint); }
.viz-badge--mint { background: var(--mint); }
.viz-tag {
  position: absolute;
  padding: 3px 8px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--paper-3);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  transform: rotate(-4deg);
}
.viz-tag--a { bottom: 14px; right: 18px; }
.viz-tag--b { bottom: 14px; left: 18px; transform: rotate(4deg); }

/* visual: kitty */
.viz--kitty {
  background:
    radial-gradient(120% 120% at 20% 0%, #fff3f8 0%, transparent 55%),
    linear-gradient(140deg, #ffe1ec 0%, #ffd0e2 48%, #ffeaf2 100%);
}
[data-theme="dark"] .viz--kitty { background: linear-gradient(140deg, #3a1f2c, #2a1622); }
.viz-window--pink {
  width: min(100%, 380px);
  border: 1.4px solid var(--ink);
  border-radius: 14px;
  background: #fffafc;
  box-shadow: 6px 7px 0 rgba(23, 17, 20, 0.16);
  overflow: hidden;
  transform: rotate(-1.4deg);
}
[data-theme="dark"] .viz-window--pink { background: #241820; }
.viz-window__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 214, 228, 0.6);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #6d4b59;
}
.viz-window__bar i { width: 7px; height: 7px; border-radius: 50%; background: #ffb3cd; }
.viz-window__bar i:nth-child(2) { background: #ffd98e; }
.viz-window__bar i:nth-child(3) { background: #a8e6cf; }
.viz-window__bar span { margin-left: 6px; }
.viz-window__body { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 14px 12px 16px; }
.viz-bubble {
  max-width: 82%;
  padding: 7px 11px;
  border-radius: 11px;
  font-size: 10.5px;
  line-height: 1.6;
  border: 1px solid rgba(23, 17, 20, 0.16);
}
.viz-bubble--l { align-self: flex-start; background: #fff; border-bottom-left-radius: 3px; }
.viz-bubble--r { align-self: flex-end; background: #ffc7db; border-bottom-right-radius: 3px; }
[data-theme="dark"] .viz-bubble--l { background: #2c1e28; }
.viz-bubble--typing { display: inline-flex; gap: 4px; padding: 9px 12px; }
.viz-bubble--typing i { width: 5px; height: 5px; border-radius: 50%; background: #d67f9e; animation: typing 1.3s infinite; }
.viz-bubble--typing i:nth-child(2) { animation-delay: 0.18s; }
.viz-bubble--typing i:nth-child(3) { animation-delay: 0.36s; }
.viz-kittymask { position: absolute; right: 10px; bottom: 8px; font-size: 34px; opacity: 0.85; transform: rotate(12deg); }

/* visual: win11 */
.viz--win11 {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(160deg, #24324f 0%, #3b4f7a 45%, #8fa5cf 100%);
}
.viz-desktop { padding: 22px 20px 18px; color: #eaf0ff; }
.viz-lyric { font-family: var(--font-kai); font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.6; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.viz-lyric__note { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; color: rgba(234, 240, 255, 0.66); }
.viz-taskbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(20, 26, 40, 0.72);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 10px;
  color: #dbe5ff;
}
.viz-taskbar__icons { display: flex; gap: 8px; }
.viz-taskbar__icons i { font-style: normal; opacity: 0.85; }
.viz-capsule {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.viz-capsule__wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.viz-capsule__wave i { width: 2px; height: 40%; background: #ffb3cd; border-radius: 2px; animation: wave 1.2s ease-in-out infinite; }
.viz-capsule__wave i:nth-child(2) { animation-delay: 0.15s; height: 70%; }
.viz-capsule__wave i:nth-child(3) { animation-delay: 0.3s; height: 100%; }
.viz-capsule__wave i:nth-child(4) { animation-delay: 0.45s; height: 55%; }
.viz-capsule__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; }
.viz-taskbar__clock { font-family: var(--font-mono); font-size: 8.5px; opacity: 0.7; }

/* visual: xxt */
.viz--xxt {
  background:
    radial-gradient(100% 100% at 100% 0%, rgba(169, 198, 255, 0.55), transparent 55%),
    linear-gradient(150deg, #eef2ff, #dfe7ff 60%, #eef2ff);
}
[data-theme="dark"] .viz--xxt { background: linear-gradient(150deg, #1b2233, #232d45); }
.viz-popup {
  width: min(100%, 252px);
  border: 1.4px solid var(--ink);
  border-radius: 12px;
  background: #fdfdff;
  box-shadow: 5px 6px 0 rgba(23, 17, 20, 0.15);
  overflow: hidden;
  transform: rotate(1.4deg);
}
[data-theme="dark"] .viz-popup { background: #1d2436; }
.viz-popup__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #eef2ff;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.03em;
}
[data-theme="dark"] .viz-popup__head { background: #232d45; }
.viz-popup__logo { font-size: 12px; }
.viz-popup__pill {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid #6c8cff;
  border-radius: 999px;
  color: #4560c9;
  font-size: 7px;
  letter-spacing: 0.06em;
}
.viz-popup__rows { display: flex; flex-direction: column; gap: 5px; padding: 9px 10px; }
.viz-popup__rows span { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: #3b3b55; }
[data-theme="dark"] .viz-popup__rows span { color: #c3cae4; }
.viz-popup__rows i { font-style: normal; font-family: var(--font-mono); font-size: 7.5px; color: #8a93b8; }
.viz-popup__rows b { margin-left: auto; color: #6c8cff; font-family: var(--font-mono); font-size: 9px; }
.viz-popup__actions { display: flex; gap: 5px; padding: 0 10px 10px; }
.viz-popup__actions span {
  padding: 2px 7px;
  border: 1px solid rgba(108, 140, 255, 0.5);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 7.5px;
  color: #4560c9;
  background: #f2f5ff;
}

/* visual: agri */
.viz--agri {
  padding: 0;
  background: linear-gradient(165deg, #eaf7e3, #dff2d4 55%, #f1f9ea);
}
[data-theme="dark"] .viz--agri { background: linear-gradient(165deg, #1c2a1c, #22351f); }
.viz-field { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-theme="dark"] .viz-field path { fill: #2b3f24; }
[data-theme="dark"] .viz-field path:nth-child(2) { fill: #23341e; }

/* visual: todo */
.viz--todo {
  background:
    radial-gradient(90% 90% at 20% 10%, rgba(168, 230, 207, 0.55), transparent 60%),
    linear-gradient(150deg, #f1fbf6, #e4f7ee);
}
[data-theme="dark"] .viz--todo { background: linear-gradient(150deg, #17261f, #1d3027); }
.viz-phone {
  width: 168px;
  padding: 14px 10px 10px;
  border: 1.4px solid var(--ink);
  border-radius: 22px;
  background: #fffdfb;
  box-shadow: 5px 6px 0 rgba(23, 17, 20, 0.15);
  transform: rotate(-2deg);
  position: relative;
}
[data-theme="dark"] .viz-phone { background: #22191f; }
.viz-phone__notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 44px; height: 5px; border-radius: 99px; background: var(--line-strong); }
.viz-phone__head { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 2px 8px; font-size: 10px; font-weight: 600; }
.viz-phone__time { font-family: var(--font-mono); font-size: 7.5px; color: var(--ink-3); }
.viz-todo { display: flex; flex-direction: column; gap: 6px; }
.viz-todo li { display: flex; align-items: center; gap: 6px; font-size: 8.5px; color: var(--ink-2); }
.viz-todo li i { width: 10px; height: 10px; border: 1.2px solid var(--line-strong); border-radius: 3px; flex: none; }
.viz-todo li.is-done { color: var(--ink-3); text-decoration: line-through; }
.viz-todo li.is-done i { background: var(--mint); border-color: var(--ink); }
.viz-phone__sync { margin-top: 9px; padding-top: 7px; border-top: 1px dashed var(--line); font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.03em; color: var(--ink-3); }

/* visual: agent */
.viz--agent { padding: 20px; background: linear-gradient(150deg, #f4efff, #e9e0ff 60%, #f8f4ff); }
[data-theme="dark"] .viz--agent { background: linear-gradient(150deg, #221c33, #2a2140); }
.viz-console {
  width: min(100%, 390px);
  border: 1.4px solid var(--ink);
  border-radius: 12px;
  background: #fffdfd;
  box-shadow: 5px 6px 0 rgba(23, 17, 20, 0.15);
  overflow: hidden;
}
[data-theme="dark"] .viz-console { background: #221a2e; }
.viz-console__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  background: #f1eaff;
  font-family: var(--font-mono);
  font-size: 8px;
  color: #6c5a8f;
}
[data-theme="dark"] .viz-console__bar { background: #2c2340; }
.viz-console__bar i { width: 6px; height: 6px; border-radius: 50%; background: #cdb8ff; }
.viz-console__body { padding: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 9px; line-height: 1.6; }
.viz-console__body p { display: flex; gap: 6px; align-items: flex-start; }
.viz-user, .viz-bot {
  flex: none;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 7px;
  color: #4a3a66;
  background: #e4d8ff;
}
.viz-bot { background: #d3f2e6; color: #2f5c4b; }
.viz-ai { color: #55466e; }
.viz-code { font-family: var(--font-mono); font-size: 7.5px; color: #8d7aab; border-top: 1px dashed var(--line); padding-top: 6px; }

/* visual: tsad */
.viz--tsad { background: linear-gradient(150deg, #fff7ec, #ffeeda 60%, #fff9f0); padding: 20px; }
[data-theme="dark"] .viz--tsad { background: linear-gradient(150deg, #2b1f16, #33261a); }
.viz-chart { width: min(100%, 420px); }
.viz-chart svg { width: 100%; height: auto; }
.viz-chart__line { stroke-dasharray: 900; stroke-dashoffset: 0; }
.card:hover .viz-chart__line { animation: dash 2.4s var(--ease) forwards; }
.viz-chart__dots circle { animation: blinkDot 2.6s ease-in-out infinite; }
.viz-chart__dots circle:nth-child(2) { animation-delay: 0.4s; }
.viz-chart__dots circle:nth-child(3) { animation-delay: 0.8s; }
.viz-chart__out { margin-top: 6px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.03em; color: #8a6a45; }
.viz-chart__out b { color: #e8275d; }

/* visual: more */
.card--more { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card--more .card__link { padding: 22px; position: relative; justify-content: flex-end; }
.card__more-inner { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.card__more-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--pink); }
.card__more-title { font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.3; }
.card__more-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--paper); opacity: 0.8; }
.card__more-cta svg { width: 12px; height: 12px; }
.card__more-emoji { position: absolute; right: 18px; bottom: 16px; font-size: 28px; opacity: 0.9; }
.card--more:hover { background: var(--hot); }
.card--more:hover .card__more-label { color: #fff; }

.work__note {
  margin-top: clamp(28px, 4vw, 44px);
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-3);
}
.work__note a { border-bottom: 1px solid var(--line-strong); color: var(--ink-2); }
.work__note a:hover { color: var(--hot); border-color: var(--hot); }

/* ==========================================================================
   LAB
   ========================================================================== */
.lab-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.terminal {
  grid-column: span 7;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #141014;
  color: #f4eaf0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #1d171d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono);
  font-size: 10px;
  color: #a793a1;
}
.terminal__dots { display: flex; gap: 6px; }
.terminal__dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a2d37; }
.terminal__dots i:first-child { background: #ff6f9e; }
.terminal__dots i:nth-child(2) { background: #ffd98e; }
.terminal__dots i:nth-child(3) { background: #7fd3b0; }
.terminal__title { color: #cbb6c4; }
.terminal__badge { margin-left: auto; padding: 1px 8px; border: 1px solid #3d2f3a; border-radius: 999px; font-size: 8.5px; }
.terminal__body {
  padding: 20px 20px 26px;
  min-height: 366px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 2;
  overflow-x: auto;
}
.terminal__line { white-space: pre-wrap; word-break: break-word; }
.terminal__line[data-line="cmd"]::before {
  content: "❯ ";
  color: #ff8fb8;
  font-weight: 700;
}
.terminal__line[data-line="out"] { color: #b9a6b4; padding-left: 1.55em; font-size: 11.5px; }
.terminal__line--cursor::after {
  content: "▊";
  color: #ff8fb8;
  animation: blinkCaret 1.1s steps(1) infinite;
}
.terminal__line .term-accent { color: #ffb3cd; }

.fm {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(255, 214, 228, 0.65), transparent 55%),
    var(--paper-3);
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .fm { background: radial-gradient(120% 100% at 80% 0%, rgba(83, 44, 61, 0.55), transparent 55%), var(--paper-3); }
.fm__head { display: flex; justify-content: space-between; align-items: center; }
.fm__status { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--ink-3); }
.fm__status.is-on { color: var(--hot); }
.fm__player { position: relative; display: grid; place-items: center; margin: 14px 0 6px; }
.fm__vinyl {
  position: relative;
  width: clamp(140px, 15vw, 176px);
  height: clamp(140px, 15vw, 176px);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center, #241b22 0 2px, #1a141a 2px 4px),
    #1a141a;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 16px 34px rgba(23, 17, 20, 0.24);
  animation: spin 8s linear infinite paused;
}
.fm__vinyl::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.fm.is-playing .fm__vinyl { animation-play-state: running; }
.fm__vinyl-label {
  display: grid;
  place-items: center;
  width: 44%;
  height: 44%;
  border-radius: 50%;
  background: var(--pink-2);
  border: 1.4px solid var(--ink);
  font-size: clamp(18px, 2.2vw, 26px);
}
.fm__btn {
  position: absolute;
  right: 8%;
  bottom: 2%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.4px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 3px 4px 0 var(--pink);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.fm__btn:hover { transform: scale(1.06) rotate(-4deg); background: var(--hot); }
.fm__btn svg { width: 22px; height: 22px; }
.fm__icon-pause { display: none; }
.fm.is-playing .fm__icon-play { display: none; }
.fm.is-playing .fm__icon-pause { display: block; }
.fm__eq { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 26px; margin: 6px 0 10px; }
.fm__eq i { width: 3px; height: 20%; background: var(--pink); border-radius: 2px; transition: height 0.2s; }
.fm.is-playing .fm__eq i { animation: eq 0.9s ease-in-out infinite alternate; }
.fm__eq i:nth-child(2n) { animation-delay: 0.12s; background: var(--hot); }
.fm__eq i:nth-child(3n) { animation-delay: 0.24s; background: var(--lilac); }
.fm__eq i:nth-child(5n) { animation-delay: 0.36s; }
.fm__meta { text-align: center; }
.fm__track { font-family: var(--font-display); font-size: 1.15rem; }
.fm__sub { margin-top: 3px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; color: var(--ink-3); }

.fortune {
  grid-column: span 6;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-3);
  box-shadow: var(--shadow-card);
}
.fortune__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.fortune__btn {
  padding: 5px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.fortune__btn:hover { background: var(--ink); color: var(--paper); }
.fortune__card { perspective: 1200px; height: 188px; }
.fortune__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease);
}
.fortune__card.is-flipped .fortune__inner { transform: rotateY(180deg); }
.fortune__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fortune__face--front { background: linear-gradient(160deg, var(--pink-3), var(--paper-3)); }
.fortune__face--back { background: linear-gradient(160deg, var(--paper-3), var(--pink-3)); transform: rotateY(180deg); }
.fortune__glyph {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--hot);
  color: #fff5f8;
  font-family: var(--font-kai);
  font-size: 21px;
}
.fortune__face p { font-family: var(--font-kai); font-size: 1.05rem; line-height: 1.7; }
.fortune__face em { color: var(--hot); font-style: normal; }
.fortune__num { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--ink-3); }
.fortune__hint { margin-top: 4px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; color: var(--ink-3); }

.toolbox {
  grid-column: span 6;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-3);
  box-shadow: var(--shadow-card);
}
.toolbox__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.toolbox__chips li {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  transform: rotate(var(--r, 0deg));
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.toolbox__chips li:nth-child(3n) { --r: -1.5deg; }
.toolbox__chips li:nth-child(4n) { --r: 1.2deg; }
.toolbox__chips li:hover { background: var(--pink-2); color: var(--ink); transform: rotate(0) translateY(-2px); }
.toolbox__note { margin-top: 16px; font-size: 12px; color: var(--ink-3); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pink-3) 70%, transparent) 40%, transparent); padding-bottom: clamp(60px, 7vw, 104px); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.contact-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); }
.email {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
  text-align: left;
  border-bottom: 1.5px solid var(--line-strong);
  padding-bottom: 8px;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.email:hover { border-color: var(--hot); color: var(--hot); }
.email__text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  word-break: break-all;
}
.email__copy { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 50%; flex: none; }
.email__copy svg { width: 17px; height: 17px; }
.contact-note { margin-top: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--ink-3); }
.contact-links { margin-top: clamp(30px, 5vw, 52px); border-top: 1px solid var(--line); }
.contact-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.35s var(--ease), background-color 0.35s var(--ease);
}
.contact-link:hover { padding-left: 12px; background: color-mix(in srgb, var(--pink-3) 60%, transparent); }
.contact-link__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  flex: none;
}
.contact-link__icon svg { width: 20px; height: 20px; }
.contact-link__icon--text { font-size: 11px; font-weight: 700; }
.contact-link__body { display: flex; flex-direction: column; gap: 1px; }
.contact-link__body strong { font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em; }
.contact-link__body small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em; color: var(--ink-3); }
.contact-link__arrow { margin-left: auto; font-family: var(--font-mono); color: var(--ink-3); transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
.contact-link:hover .contact-link__arrow { transform: translate(3px, -3px); color: var(--hot); }

.wechat-card {
  position: relative;
  padding: 12px 12px 18px;
  background: #fffdfb;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transform: rotate(2.2deg);
  transition: transform 0.5s var(--ease);
}
[data-theme="dark"] .wechat-card { background: #fdf8f4; color: #171114; }
.wechat-card:hover { transform: rotate(1deg) translateY(-4px); }
.wechat-card__tape {
  position: absolute;
  top: -13px;
  left: 24px;
  width: 92px;
  height: 26px;
  background: rgba(255, 217, 142, 0.6);
  transform: rotate(-4deg);
  border-left: 1px dashed rgba(23, 17, 20, 0.16);
  border-right: 1px dashed rgba(23, 17, 20, 0.16);
}
.wechat-card__imgwrap { background: #fff; padding: 8px; border: 1px solid var(--line); }
.wechat-card__imgwrap img { width: 100%; height: auto; }
.wechat-card__label { margin-top: 12px; font-family: var(--font-display); font-size: 1.1rem; text-align: center; }
.wechat-card__sub { margin-top: 2px; font-size: 11px; color: #71626b; text-align: center; }

.contact-sign {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(48px, 8vw, 96px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.contact-sign p { font-family: var(--font-kai); font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: 0.08em; }
.contact-sign span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-3); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  margin-top: clamp(18px, 2.5vw, 36px);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(40px, 6vw, 72px) 0 28px;
  overflow: hidden;
}
.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer__brand { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.site-footer__brand span { color: var(--pink); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: 13px; }
.site-footer__nav a { opacity: 0.72; transition: opacity 0.25s var(--ease), color 0.25s var(--ease); }
.site-footer__nav a:hover { opacity: 1; color: var(--pink); }
.site-footer__word {
  margin-top: clamp(30px, 5vw, 60px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 15.5vw, 14rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--pink) 55%, transparent);
  text-stroke: 1px color-mix(in srgb, var(--pink) 55%, transparent);
  white-space: nowrap;
  user-select: none;
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  margin-top: clamp(26px, 4vw, 48px);
  padding-top: 18px;
  border-top: 1px solid rgba(251, 246, 241, 0.16);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(251, 246, 241, 0.62);
}
.site-footer__hint { color: rgba(251, 246, 241, 0.44); }
.site-footer__hint kbd {
  padding: 1px 5px;
  border: 1px solid rgba(251, 246, 241, 0.26);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(251, 246, 241, 0.78);
}
.site-footer__hint code { color: var(--pink); font-family: var(--font-mono); }
.site-footer__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-badge {
  padding: 3px 9px;
  border: 1px solid rgba(251, 246, 241, 0.18);
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.04em;
}
.to-top {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(251, 246, 241, 0.24);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 15px;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.to-top:hover { background: var(--pink); color: var(--ink); border-color: var(--pink); transform: translateY(-3px); }

/* ==========================================================================
   PALETTE / TOAST / CONFETTI
   ========================================================================== */
.palette {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: start center;
  padding-top: min(18vh, 160px);
  background: rgba(23, 17, 20, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.palette.is-open { opacity: 1; }
.palette[hidden] { display: none; }
.palette__panel {
  width: min(92vw, 560px);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--paper-3);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.3s var(--ease);
}
.palette.is-open .palette__panel { transform: none; }
.palette__input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.palette__prompt { font-family: var(--font-mono); font-size: 13px; color: var(--hot); }
.palette__input input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
}
.palette__input input::placeholder { color: var(--ink-3); }
.palette__input kbd {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-3);
}
.palette__list { max-height: 320px; overflow-y: auto; padding: 6px; }
.palette__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px;
}
.palette__item span.palette__kind {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
}
.palette__item.is-active, .palette__item:hover { background: var(--pink-3); }
.palette__item .palette__icon { width: 18px; text-align: center; font-size: 12px; }
.palette__hint { padding: 9px 16px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; color: var(--ink-3); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 330;
  padding: 11px 20px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.confetti {
  position: fixed;
  inset: 0;
  z-index: 290;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.06); }
}
@keyframes bowWiggle {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(6deg); }
  70% { transform: rotate(-4deg); }
}
@keyframes loaderFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(168, 230, 207, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(168, 230, 207, 0); }
  100% { box-shadow: 0 0 0 0 rgba(168, 230, 207, 0); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes lineSweep {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
@keyframes typing {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
@keyframes wave {
  0%, 100% { height: 40%; }
  50% { height: 100%; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes eq {
  from { height: 16%; }
  to { height: 96%; }
}
@keyframes dash {
  from { stroke-dashoffset: 900; }
  to { stroke-dashoffset: 0; }
}
@keyframes blinkDot {
  0%, 100% { opacity: 0.4; r: 5; }
  50% { opacity: 1; r: 7; }
}
@keyframes blinkCaret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  .rail { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

@media (max-width: 1080px) {
  :root { --header-h: 68px; }
  .site-nav { display: none; }
  .menu-btn { display: block; }
  .clock { display: none; }
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero { min-height: auto; }
  .hero__title { font-size: clamp(3rem, 11vw, 7rem); }
  .hero__stage { max-width: 560px; margin-inline: auto; width: 100%; }
  .mascot-wrap { max-width: 480px; }
  .hero__footer { flex-wrap: wrap; }
  .about-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .seal-quote { grid-column: 1 / -1; max-width: 420px; }
  .card--wide, .card--taskbar { grid-column: span 6; }
  .card--medium { grid-column: span 6; }
  .card--more { grid-column: span 6; }
  .terminal, .fm, .fortune, .toolbox { grid-column: span 12; }
  .contact-grid { grid-template-columns: 1fr; }
  .wechat-card { max-width: 340px; margin-inline: auto; width: 100%; }
}

@media (max-width: 860px) {
  .site-tools .tool-link span { display: none; }
  .site-tools .tool-link { padding: 0; width: 38px; justify-content: center; }
  .section-head__row { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .section-head__lead { padding-bottom: 0; }
  .about-grid { grid-template-columns: 1fr; }
  .polaroid { max-width: 330px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .timeline::before { left: 78px; }
  .timeline__date { padding-right: 14px; }
  .timeline__item { grid-template-columns: 78px 1fr; gap: 26px; }
  .timeline__item::before { left: 74px; }
  .bento .card, .bento .card--wide, .bento .card--taskbar, .bento .card--medium, .bento .card--more { grid-column: span 12; }
  .card__visual, .card--wide .card__visual { height: 230px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; }
  .contact-sign { flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .to-top { display: none; }
}

@media (max-width: 620px) {
  .hero__title { font-size: clamp(2.7rem, 14vw, 4.4rem); line-height: 0.88; }
  .hero__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; }
  .hero__actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 16px; white-space: nowrap; justify-content: center; }
  .hero__actions { gap: 10px; }
  .hero__footer { gap: 12px; font-size: 9.5px; }
  .hero__coords { display: block; width: 100%; order: 3; }
  .scroll-cue__line { width: 28px; }
  .br-desk { display: none; }
  .sticker--b { left: -10px; }
  .avatar-chip { width: 82px; top: -20px; left: -12px; }
  .mascot-card__hint { display: none; }
  .sticker--d { left: 2%; bottom: -18px; }
  .mascot-wrap { width: calc(100% - 28px); }
  .seal-quote blockquote { font-size: 1.5rem; }
  .terminal__body { font-size: 11px; padding: 16px 14px 20px; min-height: 340px; }
  .terminal__line[data-line="out"] { font-size: 10px; }
  .fm__vinyl { width: 132px; height: 132px; }
  .email__text { font-size: clamp(1.15rem, 6vw, 1.6rem); }
  .email { gap: 12px; }
  .email__copy { width: 32px; height: 32px; }
  .site-footer__word { -webkit-text-stroke-width: 0.8px; }
  .palette { padding-top: 12vh; }
  .loader__title { font-size: 1.7rem; }
  .contact-link__body small { font-size: 9px; }
}

@media (max-width: 400px) {
  .hero__title { font-size: 2.5rem; }
  .site-header__inner { gap: 10px; }
  .brand__seal { display: none; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal], .js .reveal { opacity: 1; transform: none; }
  .marquee__track, .hero__orbit-text { animation: none; }
  .grain { display: none; }
  .cursor { display: none; }
}

/* ---------- screenshot / QA mode (?shot=1) ---------- */
html.shot-mode { scroll-behavior: auto; }
html.shot-mode .loader, html.shot-mode .cursor, html.shot-mode .grain { display: none !important; }
html.shot-mode [data-reveal], html.shot-mode .reveal { opacity: 1 !important; transform: none !important; }
html.shot-mode, html.shot-mode * { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }