/* ============================================================
   个人作品集 · 纸质手账风
   ------------------------------------------------------------
   视觉基调：米色纸 + 铅笔墨 + 赭橙印记 + 美纹纸胶带
   所有颜色/字体在 :root 里，改一处全站跟着走
   ============================================================ */

/* ============================================================
   字体：霞鹜文楷（开源楷体）已子集化到 assets/fonts/
   —— 不依赖网络，双击本地文件打开也能正常显示
   ============================================================ */
@font-face {
  font-family: "WenKai Site";
  src: url("fonts/lxgw-wenkai-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* —— 纸张与墨色 —— */
  --paper: #f6efe2;
  --paper-2: #fdf9f1;
  --paper-3: #ece0cb;
  --ink: #3b342c;
  --ink-2: rgba(59, 52, 44, 0.74);
  --ink-3: rgba(59, 52, 44, 0.52);
  --ink-4: rgba(59, 52, 44, 0.24);
  --line: rgba(59, 52, 44, 0.16);

  /* —— 强调 —— */
  --accent: #c05f2c;
  --accent-2: #2e7d6d;
  --marker: #f5dd93;
  --marker-soft: rgba(245, 221, 147, 0.8);
  --stamp: #b93f34;

  /* 带透明度的纸色要拆成通道值 */
  --paper-rgb: 246 239 226;
  --paper-2-rgb: 253 249 241;
  --paper-3-rgb: 236 224 203;

  /* 兼容旧变量名（脚本里读的是这两个） */
  --bg: var(--paper);
  --bg-soft: var(--paper-2);
  --bg-deep: var(--paper-3);
  --card: var(--paper-2);
  --card-solid: var(--paper-2);

  /* —— 阴影：留一丝「纸边」硬影，再叠柔和悬浮影，像被精心摆好的纸 —— */
  --shadow-paper: 1px 2px 0 rgba(59, 52, 44, 0.05), 0 14px 30px -14px rgba(59, 52, 44, 0.16);
  --shadow-paper-lg: 2px 4px 0 rgba(59, 52, 44, 0.06), 0 26px 52px -18px rgba(59, 52, 44, 0.22);
  --r-hand: 15px 6px 16px 5px / 5px 16px 6px 15px;
  --r-hand-sm: 10px 4px 11px 3px / 4px 11px 3px 10px;
  /* 玻璃模糊半径（顶部导航等） */
  --blur: 18px;

  /* —— 字体 —— */
  /* 正文：拉丁用 Segoe UI（Windows 自带、笔画干净），中文落到系统黑体 */
  --font: "Segoe UI", "Inter", "MiSans", "PingFang SC", "Microsoft YaHei",
    system-ui, sans-serif;

  /* 标题/名字：统一改为无衬线黑体（微软雅黑 / PingFang 优先），
     现代简洁，甩掉衬线与楷体的"老气"感；中文落系统黑体，英文落 Segoe UI */
  --hand: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;

  --serif: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "Consolas", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* 头像内联成 data URI：双击打开本地文件时 mask 才不会被拦截 */
  --mask-avatar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%0A%20%20%20%20%20stroke%3D%22%23000%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20role%3D%22img%22%20aria-label%3D%22%E6%89%8B%E7%BB%98%E5%A4%B4%E5%83%8F%22%3E%3Ctitle%3E%E6%89%8B%E7%BB%98%E5%A4%B4%E5%83%8F%3C%2Ftitle%3E%3C%21--%20%E7%8C%AB%E8%80%B3%20--%3E%3Cpath%20d%3D%22M63%2074C56%2056%2056%2038%2064%2035c8-3%2020%2011%2025%2027%22%20%2F%3E%3Cpath%20d%3D%22M137%2074c7-18%207-36-1-39-8-3-20%2011-25%2027%22%20%2F%3E%3Cpath%20d%3D%22M69%2060c-1-7%200-12%202-14%22%20opacity%3D%22.4%22%20%2F%3E%3Cpath%20d%3D%22M131%2060c1-7%200-12-2-14%22%20opacity%3D%22.4%22%20%2F%3E%3C%21--%20%E8%84%B8%20--%3E%3Cpath%20d%3D%22M48%20102c0-30%2022-50%2052-50s52%2020%2052%2050-22%2050-52%2050-52-20-52-50z%22%20%2F%3E%3C%21--%20%E5%88%98%E6%B5%B7%EF%BC%9A%E5%88%86%E7%BC%95%EF%BC%8C%E4%B8%8D%E6%A8%AA%E7%A9%BF%E5%A4%B4%E9%A1%B6%20--%3E%3Cpath%20d%3D%22M60%2080c4-17%2020-27%2040-27%22%20%2F%3E%3Cpath%20d%3D%22M100%2053c20%200%2036%2010%2040%2027%22%20%2F%3E%3Cpath%20d%3D%22M78%2062c3%2010%209%2016%2017%2019%22%20%2F%3E%3Cpath%20d%3D%22M122%2062c-3%2010-9%2016-17%2019%22%20%2F%3E%3C%21--%20%E5%91%86%E6%AF%9B%20--%3E%3Cpath%20d%3D%22M100%2050c1-9%207-14%2013-12%22%20opacity%3D%22.9%22%20%2F%3E%3C%21--%20%E9%97%AD%E7%9C%BC%E7%AC%91%20--%3E%3Cpath%20d%3D%22M70%20108c5-8%2014-8%2019%200%22%20%2F%3E%3Cpath%20d%3D%22M111%20108c5-8%2014-8%2019%200%22%20%2F%3E%3C%21--%20%E5%98%B4%20--%3E%3Cpath%20d%3D%22M94%20128c4%206%208%206%2012%200%22%20%2F%3E%3C%21--%20%E8%85%AE%E7%BA%A2%20--%3E%3Cpath%20d%3D%22M60%20122l7-2M61%20128l7-2%22%20opacity%3D%22.45%22%20%2F%3E%3Cpath%20d%3D%22M140%20122l-7-2M139%20128l-7-2%22%20opacity%3D%22.45%22%20%2F%3E%3C%21--%20%E8%80%B3%E6%9C%BA%20--%3E%3Crect%20x%3D%2238%22%20y%3D%2296%22%20width%3D%2213%22%20height%3D%2228%22%20rx%3D%226.5%22%20%2F%3E%3Crect%20x%3D%22149%22%20y%3D%2296%22%20width%3D%2213%22%20height%3D%2228%22%20rx%3D%226.5%22%20%2F%3E%3C%2Fsvg%3E");

  /* —— 结构 —— */
  --maxw: 1120px;
  --pad: 28px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* —— 另外两张"纸"：牛皮纸 / 淡蓝纸 —— */
html[data-theme="kraft"] {
  --paper: #e9dcc3;
  --paper-2: #f3ead7;
  --paper-3: #d8c7a6;
  --ink: #3b2f21;
  --ink-2: rgba(59, 47, 33, 0.76);
  --ink-3: rgba(59, 47, 33, 0.54);
  --ink-4: rgba(59, 47, 33, 0.26);
  --line: rgba(59, 47, 33, 0.18);
  --accent: #a8522b;
  --accent-2: #5c6b3e;
  --marker: #e9cf8b;
  --marker-soft: rgba(233, 207, 139, 0.8);
  --stamp: #9c3b2c;
  --paper-rgb: 233 220 195;
  --paper-2-rgb: 243 234 215;
  --paper-3-rgb: 216 199 166;
}

html[data-theme="blue"] {
  --paper: #e7eff4;
  --paper-2: #f5f9fc;
  --paper-3: #d3e1ea;
  --ink: #2e3a46;
  --ink-2: rgba(46, 58, 70, 0.76);
  --ink-3: rgba(46, 58, 70, 0.54);
  --ink-4: rgba(46, 58, 70, 0.24);
  --line: rgba(46, 58, 70, 0.16);
  --accent: #38618c;
  --accent-2: #4a8a7b;
  --marker: #bcd7ee;
  --marker-soft: rgba(146, 188, 226, 0.55);
  --stamp: #3f5d7a;
  --paper-rgb: 231 239 244;
  --paper-2-rgb: 245 249 252;
  --paper-3-rgb: 211 225 234;
}

/* —— 深色模式：保留纸感，换成夜色纸 —— */
html[data-theme="dark"] {
  --paper: #1e1a16;
  --paper-2: #2a241e;
  --paper-3: #14110d;
  --ink: #f1e6d4;
  --ink-2: rgba(241, 230, 212, 0.80);
  --ink-3: rgba(241, 230, 212, 0.58);
  --ink-4: rgba(241, 230, 212, 0.32);
  --line: rgba(241, 230, 212, 0.16);
  --accent: #e07b46;
  --accent-2: #52b29f;
  --marker: #f0c95a;
  --marker-soft: rgba(240, 201, 90, 0.20);
  --stamp: #dd5d4b;
  --paper-rgb: 30 26 22;
  --paper-2-rgb: 42 36 30;
  --paper-3-rgb: 20 17 13;
  --shadow-paper: 1px 2px 0 rgba(0, 0, 0, 0.35), 0 16px 34px -14px rgba(0, 0, 0, 0.55);
  --shadow-paper-lg: 2px 4px 0 rgba(0, 0, 0, 0.40), 0 26px 50px -16px rgba(0, 0, 0, 0.62);
}

/* 深色下，写死白色的小部件改成夜色纸 */
html[data-theme="dark"] .work { background: var(--card); }
html[data-theme="dark"] .media-slot { background: var(--paper-3); }
html[data-theme="dark"] .work__tags span { background: var(--paper-3); border-color: var(--line); }
html[data-theme="dark"] .exp-logo { background: rgba(241, 230, 212, 0.10); }
html[data-theme="dark"] .key { background: rgba(241, 230, 212, 0.12); }
html[data-theme="dark"] .levelbar__track { background: rgba(241, 230, 212, 0.10); }
html[data-theme="dark"] .dino {
  background-color: #15110d;
  background-image: linear-gradient(rgba(241, 230, 212, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 230, 212, 0.07) 1px, transparent 1px);
}

/* 胶带与占位文字：深色下不再发白 */
html[data-theme="dark"] .work__thumb span {
  background: rgba(241, 230, 212, 0.14);
  color: var(--ink-2);
}
html[data-theme="dark"] .work__thumb span.work__thumb-tag {
  background: rgba(241, 230, 212, 0.18);
}
html[data-theme="dark"] .tape {
  border-left-color: rgba(241, 230, 212, 0.16);
  border-right-color: rgba(241, 230, 212, 0.16);
}
html[data-theme="dark"] .tape::after {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(241, 230, 212, 0.22) 0 3px,
    rgba(241, 230, 212, 0) 3px 8px
  );
}

/* 深色下玻璃胶囊：压低不透明度 + 加强顶边高光，让磨砂感更明确 */
html[data-theme="dark"] .site-header.is-stuck .header-inner {
  background: rgb(var(--paper-rgb) / 0.72);
  border-color: var(--ink-3);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  background-color: var(--paper);
  /* 纸面横纹：很淡，像横线本 */
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 27px,
    rgba(59, 52, 44, 0.035) 27px 28px
  );
  overflow-x: hidden;
}

/* 纸张颗粒：铺在最上层，正片叠底，只影响观感不影响点击 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

img {
  display: block;
  max-width: 100%;
}

/* ============================================================
   动态氛围背景：暖色光晕 + 墨点
   - 固定在最底层，纯装饰、不拦截事件
   - 光晕用大尺寸径向渐变 + 模糊，色相取自现有纸面令牌，透明度压得很低
   - 墨点由 JS 在 canvas 上绘制（数量受控、可暂停），这里只负责画布定位
   ============================================================ */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* 纸张颗粒：极淡的噪点纤维叠在底色上，去掉“平涂”的廉价感，
   让纸面有被摸过的温度。纯静态、不参与动效、也不拦截点击 */
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

.ambient__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  will-change: transform;
  /* 让光晕超出视口也看不出边缘 */
  transform: translateZ(0);
}

/* 三个光晕：赭橙 / 青绿 / 印记黄，错开位置缓慢漂移 */
.ambient__blob--a {
  width: 46vmax;
  height: 46vmax;
  top: -14vmax;
  left: -8vmax;
  background: radial-gradient(circle at 50% 50%, rgba(192, 95, 44, 0.30), transparent 68%);
  animation: ambient-drift-a 26s ease-in-out infinite;
}

.ambient__blob--b {
  width: 40vmax;
  height: 40vmax;
  top: 18vmax;
  right: -12vmax;
  background: radial-gradient(circle at 50% 50%, rgba(46, 125, 109, 0.26), transparent 68%);
  animation: ambient-drift-b 32s ease-in-out infinite;
}

.ambient__blob--c {
  width: 34vmax;
  height: 34vmax;
  bottom: -12vmax;
  left: 22vmax;
  background: radial-gradient(circle at 50% 50%, rgba(245, 221, 147, 0.30), transparent 66%);
  animation: ambient-drift-c 38s ease-in-out infinite;
}

@keyframes ambient-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vmax, 5vmax, 0) scale(1.12); }
}
@keyframes ambient-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-5vmax, 7vmax, 0) scale(0.95); }
}
@keyframes ambient-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(4vmax, -6vmax, 0) scale(1.1); }
}

.ambient__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 减少动态效果：光晕定格，粒子由 JS 不再启动 */
@media (prefers-reduced-motion: reduce) {
  .ambient__blob {
    animation: none !important;
    opacity: 0.42;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

::selection {
  background: var(--marker);
  color: var(--ink);
}

:focus-visible {
  outline: none;
  border-radius: inherit;
  box-shadow: 0 0 0 2px rgb(var(--paper-rgb)), 0 0 0 4px var(--accent);
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  position: relative;
}

/* ============================================================
   手账小零件：胶带 / 印章 / 页码
   ============================================================ */

.tape {
  position: absolute;
  width: 92px;
  height: 27px;
  z-index: 4;
  pointer-events: none;
  background: rgb(var(--paper-3-rgb) / 0.82);
  border-left: 1px dashed rgba(59, 52, 44, 0.14);
  border-right: 1px dashed rgba(59, 52, 44, 0.14);
  box-shadow: 0 1px 2px rgba(59, 52, 44, 0.1);
  backdrop-filter: blur(0.5px);
}

.tape::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.4) 0 3px,
    rgba(255, 255, 255, 0) 3px 8px
  );
  opacity: 0.6;
}

.tape--tl {
  top: -13px;
  left: 24px;
  transform: rotate(-5deg);
}

.tape--tr {
  top: -13px;
  right: 24px;
  transform: rotate(4deg);
}

.tape--c {
  top: -14px;
  left: 50%;
  margin-left: -46px;
  transform: rotate(-2.5deg);
}

.stamp {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border: 2.5px solid var(--stamp);
  border-radius: 50%;
  color: var(--stamp);
  font-family: var(--hand);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-align: center;
  transform: rotate(-12deg);
  opacity: 0.62;
  pointer-events: none;
}

.stamp::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed currentColor;
  border-radius: 50%;
  opacity: 0.7;
}

.page-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  background: var(--paper-2);
  border: 1px solid var(--line);
  transform: rotate(-1deg);
}

/* ============================================================
   顶部导航
   ============================================================ */
.site-header {
  position: sticky;
  top: 14px;                 /* 滚动时浮在内容上方，不贴顶边 */
  z-index: 50;
  margin: 14px 0 0;          /* 顶部也留出悬浮间隙 */
  padding: 0 14px;           /* 左右留出悬浮边距 */
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: none;
  transition: top 0.4s var(--ease);
}

/* 胶囊长条：整条导航收进一枚悬浮的圆形玻璃条里 */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 10px 8px 22px;
  border-radius: 999px;
  background: rgb(var(--paper-rgb) / 0.66);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--ink-4);
  /* 一道极淡高光 + 柔和悬浮投影，像浮在内容之上的玻璃胶囊 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 14px 34px -18px rgba(59, 52, 44, 0.30);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.site-header.is-stuck .header-inner {
  background: rgb(var(--paper-rgb) / 0.82);
  border-color: var(--ink-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 18px 40px -16px rgba(59, 52, 44, 0.36);
}

html[data-theme="dark"] .site-header.is-stuck .header-inner {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px -16px rgba(0, 0, 0, 0.5);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* 左上角 logo：纯线条红花，透明底无方框，呼应 "RedFlower" */
.avatar-frame {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex: none;
  transform: rotate(-3.5deg);
}

.avatar-frame .logo-flower {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--ink);
  transform: scale(0.62);
  transform-origin: center;
}

/* 导航栏小花朵 logo：单色线条、透明底、跟随主题色 */
.nav-flower {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--ink);
  transform: rotate(-4deg);
  transition: transform 0.4s var(--ease), color 0.25s var(--ease);
}

.nav-flower:hover {
  transform: rotate(0deg) scale(1.14);
  color: var(--accent);
}

.nav-flower .logo-flower {
  width: 100%;
  height: 100%;
  display: block;
  color: currentColor;
}

.brand-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-1deg);
}

.brand-bar {
  width: 0;
  height: 22px;
  margin: 0 2px 0 4px;
  border-left: 1.5px dashed var(--ink-4);
}

.socials {
  display: flex;
  align-items: center;
  gap: 13px;
}

.socials a {
  color: var(--ink);
  opacity: 0.66;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.socials a:hover {
  opacity: 1;
  transform: translateY(-2px) rotate(-6deg);
}

.socials svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 等级条 = 手绘进度条 */
.levelbar {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.levelbar__lv {
  white-space: nowrap;
  padding: 0 6px;
  border: 1px solid var(--ink-4);
  border-radius: 3px 2px 4px 2px;
  background: var(--paper-2);
}

.levelbar__lv b {
  color: var(--ink);
  font-size: 11.5px;
}

.levelbar__track {
  position: relative;
  width: 112px;
  height: 9px;
  border: 1.5px solid var(--ink-3);
  border-radius: 6px 3px 5px 4px / 4px 5px 3px 6px;
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
}

.levelbar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: repeating-linear-gradient(
    -45deg,
    var(--marker) 0 6px,
    #f0d580 6px 12px
  );
  transition: width 0.5s var(--ease);
}

.levelbar__rate {
  color: var(--ink-3);
}

.mainnav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 1.04rem;
  font-weight: 700;
}

.mainnav a {
  position: relative;
  padding: 3px 2px;
  transition: color 0.2s var(--ease);
}

/* 选中/悬停：手绘马克笔划过去 */
.mainnav a::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: 2px;
  height: 9px;
  background: var(--marker);
  opacity: 0;
  transform: scaleX(0.4) rotate(-1deg);
  transform-origin: left;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  z-index: -1;
  border-radius: 40% 55% 45% 60%;
}

.mainnav a:hover::after,
.mainnav a.is-active::after {
  opacity: 0.75;
  transform: scaleX(1) rotate(-1deg);
}

.theme-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1.8px solid var(--ink);
  border-radius: 50% 45% 52% 48% / 48% 52% 45% 50%;
  box-shadow: var(--shadow-paper);
  transition: transform 0.4s var(--ease), background-color 0.25s var(--ease);
}

.theme-btn:hover {
  transform: rotate(-25deg) scale(1.06);
  background: var(--marker);
}

.theme-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
}

/* 太阳 / 月亮 图标随明暗切换 */
.theme-btn .ic-sun { display: block; }
.theme-btn .ic-moon { display: none; }
html[data-theme="dark"] .theme-btn .ic-sun { display: none; }
html[data-theme="dark"] .theme-btn .ic-moon { display: block; }

.menu-btn {
  display: none;
  font-size: 25px;
  line-height: 1;
  color: var(--ink);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-family: var(--hand);
  font-size: 1.9rem;
  font-weight: 700;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 33px,
    rgba(59, 52, 44, 0.05) 33px 34px
  );
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu a {
  color: var(--ink);
  transform: rotate(-1deg);
}

.mobile-menu .close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 32px;
  line-height: 1;
}

/* ============================================================
   首屏
   ============================================================ */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 44px 0 72px;
  text-align: center;
}

.kaomoji {
  position: relative;
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  transform: rotate(-2deg);
  user-select: none;
}

/* 颜文字旁的两笔手绘装饰 */
.kaomoji::before,
.kaomoji::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.5;
}

.kaomoji::before {
  left: -26px;
  top: 4px;
}

.kaomoji::after {
  right: -26px;
  bottom: 10px;
}

/* 便签：开始游戏 */
.start-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  background: var(--paper-2);
  border: 1.6px solid var(--ink-4);
  border-radius: var(--r-hand-sm);
  box-shadow: var(--shadow-paper);
  transform: rotate(-1.6deg);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.start-card:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: var(--shadow-paper-lg);
}

.start-card::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 74px;
  height: 20px;
  margin-left: -37px;
  background: rgb(var(--paper-3-rgb) / 0.85);
  transform: rotate(2deg);
  box-shadow: 0 1px 2px rgba(59, 52, 44, 0.08);
}

.keys {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.key {
  display: grid;
  place-items: center;
  width: 23px;
  height: 21px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  border: 1.6px solid var(--ink);
  border-radius: 4px 2px 5px 3px;
  background: rgba(255, 255, 255, 0.6);
}

.start-card__text {
  text-align: left;
  line-height: 1.35;
}

.start-card__title {
  display: block;
  font-family: var(--hand);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.start-card__sub {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   首屏小恐龙：一条跑道，跳到仙人掌上面
   ------------------------------------------------------------ */
.dino {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.dino__hud {
  position: absolute;
  top: 4px;
  right: 8px;
  z-index: 3;
  display: flex;
  gap: 18px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.dino__hud b {
  color: var(--ink);
  font-weight: 600;
}

.dino__hi {
  opacity: 0.7;
}

.dino__world {
  position: relative;
  height: 202px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 4px;
  /* 跑道底部一道手绘地平线 */
  background: linear-gradient(
    180deg,
    transparent 0,
    transparent 96%,
    rgba(59, 52, 44, 0.03) 100%
  );
}

.dino__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 2.5px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--ink) 0 16px,
    transparent 16px 26px
  );
  opacity: 0.55;
}

/* 恐龙 */
.dino__player {
  position: absolute;
  left: 74px;
  bottom: 12px;
  width: 46px;
  height: 53px;
  transform: translateY(0);
  will-change: transform;
}

.dino__player svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 兔子：主体与耳朵同色 */
.r-body,
.r-ear {
  fill: var(--ink);
}

.r-eye {
  fill: var(--paper);
  transform-box: fill-box;
  transform-origin: center;
  animation: dinoBlink 4.4s infinite;
}

@keyframes dinoBlink {
  0%, 95%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(0.15); }
}

/* 撞了之后整只暗下去 */
.dino.is-over .dino__player {
  opacity: 0.45;
}

/* 障碍物 */
.dino__obstacles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.obstacle {
  position: absolute;
  bottom: 14px;
  width: 22px;
  will-change: transform;
}

.obstacle svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.obstacle path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 遮罩提示 */
.dino__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  text-align: center;
  background: radial-gradient(
    ellipse 44% 92% at 54% 50%,
    rgb(var(--paper-rgb) / 0.94) 0%,
    rgb(var(--paper-rgb) / 0.7) 58%,
    transparent 80%
  );
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}

.dino__overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dino__title {
  margin: 0;
  font-family: var(--hand);
  font-size: 1.72rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.dino.is-over .dino__title {
  color: var(--stamp);
}

.dino__sub {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.dino__btn {
  display: none;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 7px 22px;
  font-family: var(--hand);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--paper-2);
  border: 1.6px solid var(--ink);
  border-radius: var(--r-hand-sm);
  box-shadow: var(--shadow-paper);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

/* 只有撞了之后才露出来 */
.dino.is-over .dino__btn {
  display: inline-flex;
  animation: fade-up 0.35s var(--ease) both;
}

.dino__btn:hover {
  background: var(--marker);
  transform: translateY(-2px) rotate(-1deg);
}

.dino__hint {
  margin: 10px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* 手绘波浪分割线 */
.hero-divider {
  height: 12px;
  margin: 0;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='12' viewBox='0 0 64 12'%3E%3Cpath d='M0 6.5Q8 1.5 16 6.5T32 6.5T48 6.5T64 6.5' fill='none' stroke='%233b342c' stroke-width='1.7' stroke-linecap='round' opacity='.42'/%3E%3C/svg%3E")
    repeat-x center / 64px 12px;
}

/* ============================================================
   通用区块
   ============================================================ */
.section {
  position: relative;
  padding: 96px 0;
}

.section-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 42px;
  font-family: var(--hand);
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transform: rotate(-0.8deg);
}

/* 标题下的马克笔划痕 */
.section-label span {
  position: relative;
  display: inline-block;
  padding: 0 2px;
}

.section-label::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 2px dashed var(--ink-4);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.mark {
  position: relative;
  display: inline-block;
  z-index: 0;
}

/* 荧光笔：垫在文字下面的一层半透明色块 */
.mark::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: 0.06em;
  height: 0.52em;
  background: var(--marker);
  opacity: 0.62;
  z-index: -1;
  transform: rotate(-0.8deg);
  border-radius: 45% 55% 50% 50%;
}

/* ============================================================
   关于：左栏 sticky + 右栏时间线
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.about-aside {
  position: sticky;
  top: 152px;
}

/* 左栏底部状态卡：填补侧栏空白，让「信息侧」有收束 */
.about-now {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1.5px dashed var(--line);
  border-radius: 4px;
  background: rgb(255 255 255 / 0.34);
  transform: rotate(-0.4deg);
}

.about-now__label {
  display: inline-block;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 9px;
}

.about-now ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.about-now li {
  position: relative;
  padding-left: 16px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.about-now li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--marker);
}

.big-name {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(36px, 4.2vw, 58px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  transform: rotate(-1deg);
  transform-origin: left bottom;
}

.slogan {
  margin: 12px 0 0;
  font-family: var(--hand);
  font-size: clamp(24px, 2.7vw, 36px);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -0.015em;
}

.slogan span {
  display: block;
}

.slogan span:nth-child(2) {
  padding-left: 10px;
}

.slogan span:nth-child(3) {
  padding-left: 20px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 30px 0 0;
}

.tag {
  padding: 5px 15px;
  font-family: var(--hand);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper-2);
  border: 1.7px solid var(--ink-3);
  border-radius: var(--r-hand-sm);
  box-shadow: 2px 2px 0 rgba(59, 52, 44, 0.07);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.tag:nth-child(2n) {
  transform: rotate(-1.2deg);
}

.tag:hover {
  background: var(--marker);
  border-color: var(--ink);
  transform: rotate(0) translateY(-2px);
}

/* 四个统计：像贴在页边的便签 */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  margin: 30px 0 0;
}

.stat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  background: var(--paper-2);
  border: 1.4px solid var(--line);
  border-radius: var(--r-hand-sm);
  box-shadow: var(--shadow-paper);
  transform: rotate(-0.7deg);
}

.stat:nth-child(2n) {
  transform: rotate(0.8deg);
}

/* 教育背景那张字较长，独占整行，避免「艺术设/计」尴尬断词 */
.stat--wide {
  grid-column: 1 / -1;
}

.stat > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.35;
}

.stat__icon {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--accent);
}

.stat__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stat__num {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* 用文字代替数字的那一格（教育背景） */
.stat__num--text {
  font-size: 0.74rem;
  line-height: 1.5;
  letter-spacing: 0;
  padding-bottom: 1px;
}

.stat__label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

.aside-figure {
  margin-top: 18px;
  width: 66%;
  margin-left: auto;
  opacity: 0.18;
  transform: rotate(4deg);
}

/* 时间线：虚线 + 手绘圈 */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
}

.timeline li {
  position: relative;
  padding: 0 0 30px 22px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-2);
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 0.62em;
  width: 11px;
  height: 11px;
  border-radius: 50% 45% 52% 48%;
  background: var(--paper);
  border: 2px solid var(--ink);
  z-index: 1;
}

/* 圆点之间的连接虚线：从本圆点中心连到下一个圆点中心，最后一项不画，收尾干净 */
.timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -32.5px;
  top: calc(0.62em + 5.5px);
  bottom: -16px;
  border-left: 2px dashed var(--ink-4);
}

.timeline strong {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(transparent 58%, var(--marker-soft) 58%);
}

/* ============================================================
   经历
   ============================================================ */
.exp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 56px;
  align-items: start;
}

.exp-panel {
  display: none;
}

.exp-panel.is-active {
  display: block;
  animation: fade-up 0.5s var(--ease) both;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px) rotate(-0.4deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.exp-company {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: var(--hand);
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  transform: rotate(-1.2deg);
}

/* 公司名下面一记马克笔 */
.exp-company::after {
  content: "";
  position: absolute;
  left: -2%;
  bottom: 5px;
  width: 104%;
  height: 11px;
  opacity: 0.34;
  background: var(--marker);
  opacity: 0.55;
  transform: rotate(-0.8deg);
  border-radius: 45% 55% 50% 50%;
  z-index: -1;
}

.exp-company-sub {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.08em;
}

.exp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 24px 0 0;
  padding-bottom: 10px;
  border-bottom: 1.5px dashed var(--ink-4);
}

.exp-role {
  margin: 0;
  font-family: var(--hand);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.exp-date {
  flex: none;
  padding: 1px 9px;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  transform: rotate(1deg);
}

.exp-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.exp-list li {
  position: relative;
  padding-left: 24px;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-2);
}

/* 手绘小圆点代替项目符号 */
.exp-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50% 45% 55% 48%;
  background: var(--accent);
}

.tag-row--sm {
  margin-top: 20px;
}

.tag-row--sm .tag {
  padding: 3px 12px;
  font-size: 0.84rem;
  border-width: 1.4px;
}

/* 右侧切换：像笔记本的索引标签 */
.exp-switch {
  display: grid;
  gap: 10px;
}

.exp-switch button {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 12px;
  text-align: left;
  border-radius: var(--r-hand-sm);
  border: 1.6px dashed var(--ink-4);
  opacity: 0.58;
  transition: opacity 0.3s var(--ease), background-color 0.3s var(--ease),
    border-color 0.3s var(--ease), transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.exp-switch button:hover {
  opacity: 0.9;
  transform: translateX(3px) rotate(-0.5deg);
}

.exp-switch button.is-active {
  opacity: 1;
  background: var(--paper-2);
  border-style: solid;
  border-color: var(--ink-3);
  box-shadow: var(--shadow-paper);
  transform: rotate(-0.8deg);
}

.exp-logo {
  display: grid;
  place-items: center;
  width: 54px;
  height: 38px;
  font-family: var(--hand);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  border: 1.6px dashed var(--ink-3);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35);
}

.exp-switch button.is-active .exp-logo {
  border-style: solid;
  border-color: var(--ink);
  background: var(--marker);
}

.exp-switch__role {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}

.exp-switch__co {
  display: block;
  margin-top: 1px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* ============================================================
   技能
   ============================================================ */
.skills-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 52px;
  align-items: start;
}

.skill-group {
  margin-bottom: 24px;
}

.skill-group:last-child {
  margin-bottom: 0;
}

.skill-group__title {
  margin: 0 0 10px;
  font-family: var(--hand);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}

.skill-group__title--lg {
  margin: 0 0 14px;
  font-size: 1.46rem;
  color: var(--ink);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 10px;
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--paper-2);
  border: 1.6px solid var(--ink-3);
  border-radius: var(--r-hand-sm);
  box-shadow: 1.5px 2px 0 rgba(59, 52, 44, 0.07);
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
    transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.chip:hover {
  background: var(--marker);
  border-color: var(--ink);
  transform: translateY(-2px) rotate(-1deg);
  box-shadow: 2.5px 3px 0 rgba(59, 52, 44, 0.1);
}

/* 虚线 = 还没那么熟 */
.chip--soft {
  border-style: dashed;
  border-color: var(--ink-4);
  background: transparent;
  box-shadow: none;
  color: var(--ink-2);
}

.chip__dot {
  width: 4px;
  height: 4px;
  flex: none;
  border-radius: 50% 45% 55% 48%;
  background: var(--ink-3);
  opacity: 0.7;
}

.chip--soft .chip__dot {
  background: var(--ink-4);
}

.legend {
  display: flex;
  gap: 20px;
  margin-top: 24px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-3);
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend i {
  width: 15px;
  height: 15px;
  border-radius: 50% 45% 52% 48%;
  border: 1.6px solid var(--ink-3);
  background: var(--paper-2);
}

.legend i.dashed {
  border-style: dashed;
  border-color: var(--ink-4);
  background: transparent;
}

/* 小游戏卡片：像钉在手账页上的卡片 */
.game-card {
  position: sticky;
  top: 152px;
  padding: 16px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--r-hand);
  box-shadow: var(--shadow-paper-lg);
  transform: rotate(-0.9deg);
  overflow: visible;
}

.game-card::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 68px;
  height: 19px;
  margin-left: -34px;
  background: rgb(var(--paper-3-rgb) / 0.9);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(59, 52, 44, 0.08);
}

.game-hud {
  display: flex;
  justify-content: space-between;
  padding: 0 2px 7px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.game-hud b {
  color: var(--ink);
}

.game-reset {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  font-family: var(--hand);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--ink-2);
  background: transparent;
  border: 1.2px solid var(--line-strong);
  border-radius: var(--r-hand-sm);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.3s var(--ease);
}

.game-reset:hover {
  color: var(--ink);
  background: var(--marker);
  border-color: var(--ink);
}

.game-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
}

/* 画布底下透出方格纸 */
#brickCanvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: none;
  touch-action: none;
  background-color: #fffdf7;
  background-image: linear-gradient(rgba(59, 52, 44, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 52, 44, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}

.game-veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 6px;
  border-radius: 3px;
  background: linear-gradient(
    180deg,
    rgb(var(--paper-2-rgb) / 0.9),
    rgb(var(--paper-2-rgb) / 0.97)
  );
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}

.game-veil.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.game-veil h3 {
  margin: 0;
  font-family: var(--hand);
  font-size: 2.15rem;
  font-weight: 700;
  color: var(--ink);
  transform: rotate(-2deg);
}

.game-veil p {
  margin: 2px 0 0;
  font-size: 0.74rem;
  color: var(--ink-3);
  letter-spacing: 0.03em;
}

.game-start {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 7px 14px;
  font-family: var(--hand);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-2);
  border: 1.5px solid var(--ink-3);
  border-radius: var(--r-hand-sm);
  box-shadow: var(--shadow-paper);
}

.game-kbd {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 3px;
  font-family: var(--mono);
  font-size: 0.6rem;
}

.game-kbd span {
  display: grid;
  place-items: center;
  width: 15px;
  height: 14px;
  border: 1.3px solid var(--ink-3);
  border-radius: 3px 2px 3px 2px;
}

.game-kbd span:first-child {
  grid-row: span 2;
  height: auto;
}

/* 结束画面里不需要键帽提示，只剩「再来一次」 */
.game-veil.is-over .game-kbd {
  display: none;
}

/* ============================================================
   作品集：拍立得相片墙
   ============================================================ */
/* 作品分类：左边一个标签，右边一排拍立得 */
.work-cat {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  padding: 32px 0;
  border-top: 1.5px dashed var(--line);
}

.work-cat:first-of-type {
  border-top: 0;
  padding-top: 2px;
}

.work-cat__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 4px;
}

.work-cat__title {
  margin: 0;
  font-family: var(--hand);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.work-cat__count {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-4);
}

.work-cat__body {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.work-cat__body .work {
  flex: 1 1 300px;
  max-width: 420px;
}

/* 比赛项目作为代表作：单卡整宽竖排，与下方普通卡片布局一致 */
.work-cat--featured .work-cat__body {
  display: block;
}

.work-cat--featured .work {
  flex: none;
  max-width: none;
  flex-direction: column;
  align-items: stretch;
}

.work-cat--featured .work__thumb {
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.work-cat--featured .work__body {
  flex: 1;
  padding: 26px 32px 28px;
  justify-content: center;
  gap: 11px;
}

.work-cat--featured .work__desc {
  font-size: 0.96rem;
  max-width: 54ch;
}

/* 还没有作品的分类：留一张虚线空位 */
.work-empty {
  flex: 1 1 300px;
  max-width: 420px;
  display: grid;
  place-items: center;
  min-height: 148px;
  padding: 22px;
  border: 1.5px dashed var(--ink-4);
  border-radius: 4px;
  background: rgb(255 255 255 / 0.28);
}

.work-empty p {
  margin: 0;
  max-width: 30ch;
  font-family: var(--hand);
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--ink-3);
  text-align: center;
  transform: rotate(-1deg);
}

/* 作品不多时，用一行手写提示收尾，免得看着空 */
.portfolio-more {
  margin: 26px 0 0;
  padding-left: 6px;
  font-family: var(--hand);
  font-size: 1.06rem;
  color: var(--ink-3);
  transform: rotate(-0.6deg);
}

.work {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 11px 11px 0;
  background: #fffdf8;
  border-radius: 5px;
  box-shadow: var(--shadow-paper);
  transform: rotate(-1deg);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.work:nth-child(3n + 2) {
  transform: rotate(0.9deg);
}

.work:nth-child(3n) {
  transform: rotate(-0.4deg);
}

.work:hover {
  transform: rotate(0) translateY(-8px);
  box-shadow: var(--shadow-paper-lg);
}

/* 缩略图里的画面在悬停时轻微放大，给一点苹果式景深 */
.work:hover .work__thumb img,
.work:hover .work__thumb video {
  transform: scale(1.05);
}

/* 相片上的胶带 */
.work::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 62px;
  height: 17px;
  margin-left: -31px;
  background: rgb(var(--paper-3-rgb) / 0.88);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(59, 52, 44, 0.08);
  z-index: 2;
}

.work__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(
    150deg,
    rgb(var(--paper-3-rgb) / 0.45),
    rgb(var(--paper-3-rgb) / 0.92)
  );
  border: 1px solid var(--line);
  border-radius: 2px;
}

.work__thumb img,
.work__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

/* 视频封面：画面按封面区域裁剪铺满，比例不变；点击穿透给卡片链接 */
.work__thumb--video video {
  pointer-events: none;   /* 播放前点击交给覆盖层按钮 */
}
.work__thumb--video.is-playing video {
  pointer-events: auto;   /* 播放后开放原生控制条交互 */
}

.work__thumb span.work__thumb-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 3px 10px;
  font-family: var(--hand);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #fdf9f1;
  background: rgba(28, 24, 20, 0.62);
  border: none;
  border-radius: 2px;
  transform: none;
  backdrop-filter: blur(2px);
  pointer-events: none;
}

/* 视频封面：整区可点播放，提示用左下角半透明「▶ DEMO」角标；播放后隐藏角标 */
.work__thumb--video {
  cursor: pointer;
}
.work__thumb--video.is-playing .work__thumb-tag {
  display: none;
}

.work__thumb--placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--ink-4) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-4) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.28;
}

.work__thumb span {
  position: relative;
  padding: 4px 12px;
  font-family: var(--hand);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  background: rgba(253, 249, 241, 0.85);
  border: 1.4px dashed var(--ink-4);
  transform: rotate(-4deg);
}

/* 媒体条：还没素材时是虚线占位，换成真图/视频后自动铺满 */
.work__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 0 2px;
}

.media-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  font-family: var(--hand);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.45);
  border: 1.2px dashed var(--ink-4);
  border-radius: 2px;
}

.work__strip img,
.work__strip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.work__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 5px 18px;
  flex: 1;
}

.work__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.work__meta span:first-child {
  color: var(--accent);
  font-weight: 600;
}

.work__title {
  margin: 0;
  font-family: var(--hand);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.work__desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--ink-2);
}

.work__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
  padding-top: 4px;
}

.work__tags span {
  padding: 1px 8px;
  font-size: 0.68rem;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
}

.work__arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 50% 45% 52% 48%;
  opacity: 0;
  transform: translate(-5px, 5px) rotate(-8deg);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  z-index: 3;
}

.work:hover .work__arrow {
  opacity: 1;
  transform: none;
}

/* ============================================================
   页脚
   ============================================================ */
.footer {
  position: relative;
  margin-top: 40px;
  border-top: 2px dashed var(--ink-4);
  background: rgb(var(--paper-3-rgb) / 0.55);
}

.footer-main {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 300px;
  gap: 44px;
  padding: 54px 0 38px;
  align-items: start;
}

.footer-avatar {
  width: 110px;
  opacity: 0.26;
  transform: rotate(-4deg);
}

.footer-title {
  margin: 4px 0 10px;
  font-family: var(--hand);
  font-size: 1.62rem;
  font-weight: 700;
  transform: rotate(-0.8deg);
}

.footer-text {
  margin: 0;
  max-width: 46ch;
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--ink-2);
}

.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 6px 16px;
  font-family: var(--hand);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-2);
  border: 1.7px solid var(--ink);
  border-radius: var(--r-hand-sm);
  box-shadow: var(--shadow-paper);
  transition: background-color 0.25s var(--ease), gap 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.btn-line:hover {
  background: var(--marker);
  gap: 13px;
  transform: translateY(-2px) rotate(-1deg);
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  padding-top: 8px;
  font-family: var(--hand);
  font-size: 1.02rem;
  font-weight: 700;
}

.footer-links a {
  color: var(--ink-2);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.footer-links a:hover {
  color: var(--ink);
  transform: translateX(2px);
}

.footer-stamp {
  position: absolute;
  left: 4px;
  right: auto;
  bottom: 56px;
  display: block;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0 26px;
  border-top: 1.5px dashed var(--ink-4);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.footer-bottom .socials {
  gap: 14px;
}

/* ============================================================
   滚动入场
   ============================================================ */
html.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}

html.js-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1080px) {
  .about-grid {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 42px;
  }

  .exp-grid,
  .skills-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 34px;
  }

  .footer-main {
    grid-template-columns: 96px minmax(0, 1fr) 240px;
    gap: 30px;
  }

  .footer-stamp {
    right: 24px;
    bottom: 88px;
  }
}

@media (max-width: 900px) {
  .mainnav {
    display: none;
  }

  .menu-btn {
    display: block;
  }

  .about-grid,
  .exp-grid,
  .skills-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .about-aside {
    position: static;
  }

  .aside-figure {
    display: none;
  }

  .exp-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }

  .exp-switch button {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 11px 9px;
    text-align: center;
    justify-items: center;
  }

  .exp-logo {
    width: 100%;
  }

  .game-card {
    position: static;
    max-width: 400px;
    margin: 0 auto;
  }

  /* 作品分类改为上下排 */
  .work-cat {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 26px 0;
  }

  .work-cat__body .work,
  .work-empty {
    max-width: none;
  }

  /* 平板：代表作大卡改回竖排，避免横向挤压 */
  .work-cat--featured .work {
    flex-direction: column;
  }

  .work-cat--featured .work__thumb {
    flex: none;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .footer-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .footer-avatar,
  .footer-stamp {
    display: none;
  }

  .footer-links {
    padding-top: 0;
  }
}

@media (max-width: 620px) {
  :root {
    --pad: 18px;
  }

  body {
    font-size: 15px;
    background-image: repeating-linear-gradient(
      180deg,
      transparent 0 25px,
      rgba(59, 52, 44, 0.035) 25px 26px
    );
  }

  .avatar-frame {
    width: 44px;
    height: 44px;
  }

  .brand {
    gap: 10px;
  }

  .brand-name {
    font-size: 1.16rem;
  }

  .brand-bar {
    height: 18px;
  }

  .socials {
    gap: 9px;
  }

  .socials svg {
    width: 17px;
    height: 17px;
  }

  .levelbar {
    gap: 7px;
    font-size: 10px;
  }

  .levelbar__track {
    width: 60px;
    height: 8px;
  }

  .hero {
    padding: 24px 0 42px;
  }

  /* 手机上恐龙和跑道一起缩一点 */
  .dino__player {
    width: 40px;
    height: 46px;
    left: 44px;
  }

  .dino__title {
    font-size: 1.4rem;
  }

  .dino__hint {
    font-size: 0.62rem;
  }

  .kaomoji::before,
  .kaomoji::after {
    display: none;
  }

  .section {
    padding: 50px 0;
  }

  .section-label {
    font-size: 1.66rem;
    gap: 12px;
  }

  .stats {
    gap: 10px;
  }

  .stat {
    padding: 9px 11px;
    gap: 8px;
  }

  .stat__num--text {
    font-size: 0.74rem;
  }

  /* 教育背景两行字，窄屏给它整行 */
  .stat:last-child {
    grid-column: 1 / -1;
  }

  .timeline li {
    padding-left: 14px;
    font-size: 0.94rem;
  }

  .exp-head {
    flex-direction: column;
    gap: 6px;
  }

  .exp-role {
    font-size: 1.3rem;
  }

  .exp-switch {
    grid-template-columns: minmax(0, 1fr);
  }

  .exp-switch button {
    grid-template-columns: 50px minmax(0, 1fr);
    text-align: left;
    justify-items: start;
  }

  .exp-logo {
    width: 50px;
  }

  .footer-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
  }
}

/* 窄屏：社交图标 / 等级条收进抽屉，胶囊只留名字 + 菜单键 */
@media (max-width: 470px) {
  .header-inner .socials,
  .header-inner .brand-bar,
  .header-inner .levelbar {
    display: none;
  }
}

/* 首屏入场：苹果式轻柔上浮（reduce-motion 下由文件末尾规则整体关闭） */
body.is-loaded .hero .kaomoji {
  animation: hero-rise 0.9s var(--ease) both;
}
body.is-loaded .hero .dino {
  animation: hero-rise-plain 1s var(--ease) 0.08s both;
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(20px) rotate(-2deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-2deg); }
}
@keyframes hero-rise-plain {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 尊重「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html.js-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------
   作品卡底部的次级入口（六面 → 通关手册）
   ------------------------------------------------------------ */
.work__more {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
}

.work:hover .work__more {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   横屏（手机 / 小平板高度有限）：避免代表作大卡缩略图被 16:9 拉得过高、框变形
   - 断点原本只看宽度，横屏宽度大但高度小会留在横排大卡布局
   - 这里用 orientation + max-height 单独处理，给缩略图封顶高度
   ============================================================ */
@media (orientation: landscape) and (max-height: 600px) {
  .work__thumb {
    max-height: 42vh;
  }

  /* 横屏：回归潮汐代表作大卡与下方卡片竖屏一致，改为竖向堆叠 */
  .work-cat--featured .work {
    flex-direction: column;
  }

  .work-cat--featured .work__thumb {
    flex: none;
    aspect-ratio: 16 / 9;
    min-height: 0;
    max-height: 42vh;
  }
}

/* ============================================================
   开场进入动画：红花绽放 + 站点名淡入，随后整层淡出
   ============================================================ */
.page-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  gap: 16px;
  background: var(--paper-2);
  pointer-events: none; /* 纯视觉遮罩，不拦截交互 */
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}

.page-intro.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.page-intro__logo {
  width: 88px;
  height: 88px;
  color: var(--ink);
  animation: intro-bloom 0.9s var(--ease) both;
}

.page-intro__logo .logo-flower {
  width: 100%;
  height: 100%;
  display: block;
}

.page-intro__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0;
  animation: intro-name 0.7s var(--ease) 0.32s both;
}

@keyframes intro-bloom {
  0%   { transform: scale(0.6) rotate(-14deg); opacity: 0; }
  60%  { transform: scale(1.06) rotate(2deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0);        opacity: 1; }
}

@keyframes intro-name {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}