@charset "UTF-8";
/* ============================================================================
   site.css —— 闫文洁 · 个人作品集
   方向：「柔光」—— 粉彩渐变底 + 玻璃卡片 + 大圆角 + 漂浮胶囊导航。
   气质：暖、轻、友好，但版式和信息层级仍然克制，不花哨。
   换肤方法：改下面 :root 里的变量，全站生效。
   ========================================================================== */

/* ---------------------------------------------------------------- 变量 */
:root{
  /* 纸：底色是一层固定的柔和渐变（见 body::before），这里是兜底纯色 */
  --bg:          #FBFBF8;

  /* 表面：玻璃卡片 */
  --surface:     rgba(255,255,255,.70);   /* 玻璃层 */
  --surface-2:   rgba(255,255,255,.46);   /* 更淡的玻璃 */
  --card:        #FFFFFF;                 /* 实心卡片 */

  /* 墨 */
  --ink:         #3A3542;
  --ink-2:       #6E6878;
  --ink-3:       #9C96A6;

  --line:        rgba(88,78,110,.10);
  --line-2:      rgba(88,78,110,.18);
  --glass-edge:  rgba(255,255,255,.75);   /* 玻璃卡片的亮边 */

  /* 强调色：珊瑚粉。--accent 用于图形与大字号，--accent-ink 用于正文里的彩色文字 */
  --accent:      #F0698C;
  --accent-ink:  #D2466C;
  --accent-soft: #FDE3EB;

  /* 次级色：薄荷 */
  --mint:        #3FB79A;
  --mint-ink:    #2A8672;
  --mint-soft:   #DDF3EC;

  --butter-soft: #FCF3D6;
  --sky-soft:    #E3EFFB;

  /* 字体：全部走系统字体，不加载任何网络字体 */
  --font-display: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:    var(--font-display);
  --font-mono:    ui-monospace,"Cascadia Mono","SF Mono",Consolas,"JetBrains Mono",Menlo,monospace;
  /* 只在文学性的段落里用衬线（写作页的引文与节选） */
  --font-serif:   "Songti SC","STSong","Source Han Serif SC","Noto Serif SC","SimSun",Georgia,serif;

  /* 版心与圆角 */
  --maxw:   1080px;
  --narrow: 760px;
  --pad:    clamp(20px, 5vw, 52px);

  --r-xl: 32px;
  --r-lg: 24px;
  --r:    18px;
  --r-sm: 12px;
  --r-pill: 999px;

  /* 阴影：带一点紫调，不要死灰 */
  --sh-xs: 0 2px 8px -3px rgba(88,78,110,.16);
  --sh-sm: 0 10px 24px -14px rgba(88,78,110,.30);
  --sh:    0 22px 48px -26px rgba(88,78,110,.36);
  --sh-lg: 0 40px 86px -40px rgba(88,78,110,.46);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:          #16141C;
    --surface:     rgba(255,255,255,.055);
    --surface-2:   rgba(255,255,255,.035);
    --card:        #201D29;

    --ink:         #EFECF4;
    --ink-2:       #B3AEC0;
    --ink-3:       #837D92;

    --line:        rgba(255,255,255,.09);
    --line-2:      rgba(255,255,255,.16);
    --glass-edge:  rgba(255,255,255,.10);

    --accent:      #FF8FAC;
    --accent-ink:  #FFA6BE;
    --accent-soft: rgba(240,105,140,.16);

    --mint:        #55CFAF;
    --mint-ink:    #7BDDC4;
    --mint-soft:   rgba(63,183,154,.15);

    --butter-soft: rgba(242,201,76,.13);
    --sky-soft:    rgba(110,160,230,.15);

    --sh-xs: 0 2px 8px -3px rgba(0,0,0,.5);
    --sh-sm: 0 10px 24px -14px rgba(0,0,0,.6);
    --sh:    0 22px 48px -26px rgba(0,0,0,.7);
    --sh-lg: 0 40px 86px -40px rgba(0,0,0,.8);
  }
}

/* ---------------------------------------------------------------- 重置 */
*,*::before,*::after{ box-sizing:border-box }

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

/* 粉彩底：四个角各一团柔光，固定不随滚动。 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(880px 620px at 8% 0%,   #DDF3E7 0%, rgba(221,243,231,0) 60%),
    radial-gradient(820px 600px at 94% -2%, #FBE1EB 0%, rgba(251,225,235,0) 58%),
    radial-gradient(1000px 720px at 50% 28%, #FCF7E2 0%, rgba(252,247,226,0) 64%),
    radial-gradient(900px 700px at 10% 100%, #E3EEFB 0%, rgba(227,238,251,0) 60%),
    radial-gradient(760px 600px at 98% 88%,  #F0E7FB 0%, rgba(240,231,251,0) 60%),
    var(--bg);
}

@media (prefers-color-scheme: dark){
  body::before{
    background:
      radial-gradient(880px 620px at 8% 0%,   rgba(63,183,154,.17) 0%, transparent 60%),
      radial-gradient(820px 600px at 94% -2%, rgba(240,105,140,.16) 0%, transparent 58%),
      radial-gradient(1000px 720px at 50% 28%, rgba(242,201,76,.07) 0%, transparent 64%),
      radial-gradient(900px 700px at 10% 100%, rgba(110,160,230,.12) 0%, transparent 60%),
      var(--bg);
  }
}

body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(15.5px, 0.28vw + 14.7px, 16.5px);
  line-height:1.78;
  font-weight:400;
  letter-spacing:.005em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; height:auto; display:block }
button,input,textarea,select{ font:inherit; color:inherit }
hr{border:0}

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

:focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------------------------------------------------------------- 排版 */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.005em;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:clamp(28px, 4.4vw, 46px) }
h2{ font-size:clamp(21px, 2.5vw, 29px) }
h3{ font-size:clamp(17px, 1.7vw, 20px) }
h4{ font-size:1em }

p{ margin:0 0 1.05em }
p:last-child{ margin-bottom:0 }

a{ color:var(--accent-ink); text-decoration:none }
a:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }

em{ font-style:normal; background:linear-gradient(transparent 58%, var(--accent-soft) 58%) }
strong,b{ font-weight:600; color:var(--ink) }
.num,time,.folio,.mono{ font-family:var(--font-mono); font-feature-settings:"tnum" 1 }

/* 小标签：做成一颗软胶囊，带一个小圆点 */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0;
  padding:8px 17px 8px 14px;
  border-radius:var(--r-pill);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-xs);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  font-size:12.5px;
  letter-spacing:.05em;
  color:var(--ink-2);
  line-height:1;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  flex:0 0 auto;
}

.lead{ font-size:1.1em; line-height:1.75; color:var(--ink-2) }
.muted{ color:var(--ink-2) }
.dim{ color:var(--ink-3) }
.small{ font-size:.9em }
.tiny{ font-size:.8em }
.strike{ text-decoration:line-through; text-decoration-color:var(--accent); text-decoration-thickness:1.5px }

/* ---------------------------------------------------------------- 版心 */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
}

/* 旧的「稿纸竖线」在新风格里不适用，留成空规则以免旧页面报错 */
.ruled{ border:0; padding-left:var(--pad) }

.section{ padding:clamp(44px, 6.5vw, 84px) 0 }
.section--tight{ padding:clamp(26px, 4vw, 44px) 0 }

.rule{ height:1px; background:var(--line); margin:0 }
.rule--red{ background:var(--accent-soft) }

/* ------------------------------------------------------ 页眉（漂浮胶囊） */
.masthead{
  position:sticky;
  top:14px;
  z-index:60;
  padding:0 var(--pad);
  margin-bottom:clamp(8px, 1.6vw, 20px);
}
.masthead__in{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.glass{
  background:var(--surface);
  border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--sh-sm);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 20px;
  border-radius:var(--r-pill);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--sh-sm);
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
.brand:hover{ text-decoration:none }
.brand span{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--ink-3);
  font-weight:400;
}

.nav{
  display:flex;
  align-items:center;
  gap:2px;
  padding:5px;
  border-radius:var(--r-pill);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--sh-sm);
}
.nav a{
  display:block;
  padding:9px 16px;
  border-radius:var(--r-pill);
  font-size:13.5px;
  color:var(--ink-2);
  white-space:nowrap;
  transition:background .22s ease, color .22s ease;
}
.nav a:hover{ background:var(--surface-2); color:var(--ink); text-decoration:none }
.nav a[aria-current="page"]{ background:var(--ink); color:var(--bg); font-weight:500 }
@media (prefers-color-scheme: dark){
  .nav a[aria-current="page"]{ color:#16141C }
}

@media (max-width:640px){
  .masthead{ top:10px }
  .brand{ padding:10px 15px; font-size:14px }
  .brand span{ display:none }
  .nav{ padding:4px; gap:0 }
  .nav a{ padding:8px 11px; font-size:12.5px }
}

/* ---------------------------------------------------------------- 首屏 */
.hero{ padding:clamp(28px, 4.5vw, 60px) 0 clamp(30px, 4.5vw, 56px) }

/* 首页的两栏：左边自我介绍，右边一张插画卡 */
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(28px, 5vw, 56px);
  align-items:center;
}
@media (min-width:880px){
  .hero__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) }
}

.hero__hi{
  margin:0 0 6px;
  font-size:clamp(15px, 1.5vw, 18px);
  color:var(--ink-2);
  letter-spacing:.02em;
}
.hero h1{ margin:0 0 20px }
.hero__pitch{
  margin:0 0 8px;
  font-size:clamp(15px, 1.25vw, 17px);
  color:var(--ink-2);
  max-width:34ch;
}
.hero__pitch b{ color:var(--ink) }
.hero__lede{
  margin-top:22px;
  max-width:46ch;
  font-size:clamp(15px, 1.25vw, 16.5px);
  color:var(--ink-2);
}
.hero__meta{
  margin-top:26px;
  display:flex; flex-wrap:wrap; gap:9px 22px;
  font-size:13.5px; color:var(--ink-2);
}
.hero__meta b{
  font-weight:500; color:var(--ink-3);
  font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.06em; margin-right:7px;
}

/* 插画卡：首页右侧那张 */
.hero__art{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh);
}
.hero__art img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:top center;
}
.hero__art figcaption{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  margin:0;
  padding:9px 14px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-size:11.5px;
  line-height:1.5;
  color:#5A5464;
  text-align:center;
}
/* 放的是本人照片时不显示说明条 */
.hero__art figcaption:empty{ display:none }
@media (max-width:640px){
  .hero__art{ max-width:340px; margin:0 auto }
}

/* 首屏底部的下滑箭头 */
.scrollcue{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px; height:42px;
  margin:clamp(26px,4vw,44px) auto 0;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-sm);
  color:var(--ink-2);
  font-size:16px;
  line-height:1;
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  transition:transform .25s ease, color .25s ease;
}
.scrollcue:hover{ transform:translateY(4px); color:var(--accent-ink); text-decoration:none }

/* ---------------------------------------------------------- 数字条 */
.figures{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(18px,2.6vw,30px);
  margin-top:clamp(26px,3.6vw,40px);
}
.figures > div{
  padding:clamp(20px,2.6vw,28px);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-sm);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}
.figures b{
  display:block;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:clamp(28px,3.4vw,38px);
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.015em;
}
.figures b i{ font-style:normal; font-size:.46em; color:var(--accent-ink); margin-left:3px; letter-spacing:0 }
.figures span{ display:block; margin-top:11px; font-size:13px; line-height:1.68; color:var(--ink-2) }

/* ---------------------------------------------------------- 目录式列表 */
.toc{ list-style:none; margin:0; padding:0; display:grid; gap:14px }

.toc__item{ margin:0 }

.toc__link{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:clamp(15px,2.6vw,28px);
  padding:clamp(16px,2.2vw,22px);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-xs);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  color:var(--ink);
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.toc__link:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh);
  background:var(--card);
  text-decoration:none;
}

/* 项目缩略图。编号压在图的左上角。 */
.toc__thumb{
  position:relative;
  display:block;
  width:172px;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--card);
  box-shadow:0 0 0 1px var(--line);
}
.toc__thumb img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  object-position:top center;
  display:block;
}
.toc__thumb .toc__num{
  position:absolute;
  left:9px; top:9px;
  width:29px; height:29px;
  background:rgba(255,255,255,.92);
  color:var(--accent-ink);
  font-size:11.5px;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 10px -2px rgba(60,50,80,.35);
}

.toc__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-ink);
  font-family:var(--font-mono);
  font-size:12.5px;
  align-self:start;
  flex:0 0 auto;
}
.toc__body{ min-width:0; padding-top:2px }
.toc__title{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(18px,2.1vw,24px);
  font-weight:600;
  line-height:1.35;
}
.toc__desc{
  display:block;
  margin-top:9px;
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.72;
  max-width:56ch;
}
.toc__year{
  display:block;
  margin-top:13px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-3);
  letter-spacing:.03em;
}
.toc__arrow{
  align-self:center;
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:50%;
  background:var(--surface-2);
  color:var(--accent-ink);
  font-size:15px;
  line-height:1;
  transition:transform .28s ease, background .28s ease;
}
.toc__link:hover .toc__arrow{ transform:translateX(4px); background:var(--accent-soft) }

@media (max-width:620px){
  .toc__link{ gap:13px; padding:16px 15px }
  .toc__thumb{ width:108px }
  .toc__thumb .toc__num{ width:24px; height:24px; font-size:10.5px; left:6px; top:6px }
  .toc__arrow{ display:none }
  .toc__desc{ font-size:14px }
  .toc__year{ margin-top:9px }
}

/* ------------------------------------------------------------ 页边批注 */
.row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,2.4vw,22px);
}
@media (min-width:940px){
  .row{
    grid-template-columns:minmax(0,1fr) 250px;
    column-gap:clamp(28px,3.6vw,48px);
    align-items:start;
  }
}

.mnote{
  padding:18px 20px;
  border-radius:var(--r);
  background:var(--mint-soft);
  border:1px solid var(--glass-edge);
  font-size:13px;
  line-height:1.72;
  color:var(--ink-2);
}
.mnote b{ color:var(--ink); font-weight:600 }
.mnote .num{ color:var(--ink-2) }

/* ---------------------------------------------------------------- 组件 */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px;
  border-radius:var(--r-pill);
  background:var(--ink); color:var(--bg);
  border:1px solid transparent;
  font-size:14.5px; line-height:1.4; font-weight:500;
  cursor:pointer;
  box-shadow:var(--sh-xs);
  transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-sm); text-decoration:none; color:var(--bg) }
.btn--red{ background:var(--accent); color:#fff }
.btn--red:hover{ color:#fff }
.btn--ghost{
  background:var(--surface); color:var(--ink);
  border-color:var(--glass-edge);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}
.btn--ghost:hover{ color:var(--ink) }
.btn--sm{ padding:9px 17px; font-size:13.5px }

.tagrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px }
.tag{
  font-size:12.5px;
  color:var(--ink-2);
  padding:6px 14px;
  border-radius:var(--r-pill);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-xs);
  white-space:nowrap;
}

.meta{
  margin:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:11px 20px;
  font-size:14px;
  padding:clamp(20px,2.6vw,28px);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-xs);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}
.meta dt{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding-top:.3em;
}
.meta dd{ margin:0; color:var(--ink-2) }

figure{ margin:0 }
figure img{ border-radius:var(--r-lg); background:var(--card); box-shadow:var(--sh-sm) }
figcaption{
  margin-top:11px;
  font-size:12.5px;
  color:var(--ink-3);
  line-height:1.6;
}
figcaption b{ font-family:var(--font-mono); color:var(--ink-2); font-weight:400; letter-spacing:.04em; margin-right:6px }

.figgrid{ display:grid; gap:clamp(20px,3vw,30px) }
.figgrid--2{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }

/* 数据条 */
.stats{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px }
.stats li{
  display:flex; align-items:baseline; gap:18px;
  padding:16px 20px;
  border-radius:var(--r);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-xs);
  font-size:14.5px;
}
.stats b{
  font-family:var(--font-mono); font-weight:400;
  font-size:18px; color:var(--accent-ink); min-width:5em;
  flex:0 0 auto;
}
.stats span{ color:var(--ink-2) }
@media (max-width:560px){
  .stats li{ flex-direction:column; gap:5px }
  .stats b{ min-width:0 }
}

/* 数据表 */
.tblbox{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:22px;
  border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--glass-edge);
  box-shadow:var(--sh-xs); -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%); }
.tblbox::-webkit-scrollbar{ height:6px }
.tblbox::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px }

.tbl{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  min-width:420px;
}
.tbl caption{
  text-align:left;
  font-size:12.5px;
  color:var(--ink-3);
  padding:16px 20px 4px;
  font-family:var(--font-mono);
  letter-spacing:.04em;
}
.tbl th,.tbl td{
  text-align:left;
  padding:13px 20px;
  border-bottom:1px solid var(--line);
  vertical-align:baseline;
}
.tbl thead th{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
}
.tbl td.n{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap }
.tbl .win{ color:var(--accent-ink); font-weight:500 }
.tbl .lose{ color:var(--ink-3) }
.tbl tbody tr:last-child td{ border-bottom:0 }

/* --------------------------------------------------- demo 面板（试玩区） */
.door{
  padding:clamp(14px,2.2vw,22px);
  border-radius:var(--r-xl);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
}
.door__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-bottom:14px;
  padding:0 6px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em;
  color:var(--ink-3); text-transform:uppercase;
}
.door__bar .dot{ display:flex; align-items:center; gap:8px }
.door__bar .dot::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--mint);
}
.door__stage{
  position:relative;
  background:var(--card);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex; justify-content:center; align-items:flex-start;
  box-shadow:inset 0 0 0 1px var(--line);
}
.door__stage iframe{ width:100%; border:0; display:block; background:#fff }
.door__stage--phone iframe{ width:390px; height:780px; flex:0 0 auto }
.door__stage--wide iframe{ aspect-ratio:16/10; height:auto; min-height:420px }

@media (max-width:820px){
  .door__stage--phone iframe{ width:100%; height:70vh; min-height:480px }
  .door__stage--wide iframe{ min-height:0; aspect-ratio:auto; height:62vh }
  .door__stage{ overflow:auto; -webkit-overflow-scrolling:touch }
}
.door__ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center; padding:clamp(30px,6vw,64px) 22px;
  color:var(--ink-3); font-size:13.5px; width:100%;
}
.door__ph .num{ font-size:11.5px; letter-spacing:.14em; color:var(--accent-ink) }

/* ------------------------------------------------------------ 立绘长廊 */
.strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(200px, 28%);
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:4px 4px 18px;
  -webkit-overflow-scrolling:touch;
}
.strip figure{ scroll-snap-align:start }
.strip img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top center }
.strip::-webkit-scrollbar{ height:6px }
.strip::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px }
.strip::-webkit-scrollbar-track{ background:transparent }

@media (max-width:620px){
  .strip{ grid-auto-columns:minmax(170px, 60%) }
}

/* ---------------------------------------------------------------- 简历 */
.rhead{ padding:clamp(26px,4vw,52px) 0 clamp(20px,2.6vw,32px) }
.rhead h1{ margin:16px 0 0 }
.rhead__line{ margin-top:14px; font-size:clamp(15px,1.3vw,16.5px); color:var(--ink-2); max-width:46ch }
.rhead__contacts{
  margin-top:24px;
  padding:clamp(16px,2.2vw,22px) clamp(18px,2.4vw,26px);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-xs);
  display:flex; flex-wrap:wrap; gap:10px 30px; font-size:14px;
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}
.rhead__contacts .k{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-right:8px;
}

.rsec{ padding:clamp(22px,3vw,34px) 0 }
.rsec__title{
  font-family:var(--font-mono);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 clamp(16px,2.2vw,22px);
  display:flex; align-items:center; gap:14px;
  font-weight:400;
}
.rsec__title::after{ content:""; flex:1; height:1px; background:var(--line) }

.entry{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:5px;
  padding:clamp(18px,2.4vw,24px);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-xs);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  break-inside:avoid;
  page-break-inside:avoid;
}
@media (min-width:720px){
  .entry{ grid-template-columns:140px minmax(0,1fr); column-gap:clamp(18px,2.6vw,30px) }
}
.entry__when{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--ink-3);
  letter-spacing:.02em;
  padding-top:.34em;
}
.entry__what{ min-width:0 }
.entry__hd{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  margin-bottom:10px;
}
.entry__org{ font-size:17px; font-weight:600 }
.entry__role{ color:var(--ink-2); font-size:14px }
.entry__role::before{ content:"·"; margin-right:8px; color:var(--ink-3) }
.entry ul{ margin:0; padding:0; list-style:none }
.entry li{
  position:relative;
  padding-left:16px;
  margin-bottom:7px;
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.75;
}
.entry li::before{
  content:"";
  position:absolute; left:2px; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.entry li b{ color:var(--ink); font-weight:600 }

.endmark{ display:flex; align-items:center; gap:14px; color:var(--ink-3); font-size:12px; font-family:var(--font-mono); letter-spacing:.16em }
.endmark::before,.endmark::after{ content:""; height:1px; background:var(--line); flex:1 }

/* -------------------------------------------------------- 引文 */
.pq{
  margin:clamp(26px,3.6vw,42px) 0;
  padding:clamp(22px,3vw,32px) clamp(22px,3vw,34px);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-sm);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  font-family:var(--font-serif);
  font-size:clamp(18px,2.1vw,24px);
  line-height:1.72;
  color:var(--ink);
  text-wrap:pretty;
  position:relative;
  overflow:hidden;
}
.pq::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:4px;
  background:linear-gradient(180deg, var(--accent), var(--mint));
}
.pq cite{
  display:block;
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  font-style:normal;
  color:var(--ink-3);
}

/* -------------------------------------------------------- 文字作品 */
.wcard{
  padding:clamp(22px,3vw,32px);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-xs);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  margin-bottom:16px;
}
.wcard[hidden]{ display:none }
.wcard__hd{ display:flex; flex-wrap:wrap; align-items:center; gap:9px 14px }
.wcard__no{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 8px;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  color:var(--accent-ink);
  font-family:var(--font-mono); font-size:12px;
}
.wcard__title{ font-family:var(--font-display); font-size:clamp(17px,2vw,22px); line-height:1.42; font-weight:600 }
.wcard__hook{ margin-top:13px; color:var(--ink-2); max-width:60ch; font-size:15px }
.wcard__ex{
  margin-top:17px;
  padding:clamp(18px,2.4vw,24px);
  border-radius:var(--r);
  background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--font-serif);
  font-size:14.5px;
  line-height:1.95;
  color:var(--ink-2);
  white-space:pre-line;
}
.wcard__ex p{ margin:0 0 .9em }
.wcard__ex p:last-child{ margin-bottom:0 }

.genre{
  font-size:11.5px;
  padding:5px 13px;
  border-radius:var(--r-pill);
  background:var(--mint-soft);
  color:var(--mint-ink);
  white-space:nowrap;
  font-weight:500;
}
.genre--red{ background:var(--accent-soft); color:var(--accent-ink) }
.genre--seal{ background:var(--butter-soft); color:#9A7418 }
@media (prefers-color-scheme: dark){ .genre--seal{ color:#E8C766 } }

.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px }
.filter{
  font-size:13px;
  padding:9px 17px;
  border-radius:var(--r-pill);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-xs);
  color:var(--ink-2);
  cursor:pointer;
  transition:background .22s ease, color .22s ease, transform .22s ease;
}
.filter:hover{ transform:translateY(-2px); color:var(--ink) }
.filter[aria-pressed="true"]{ background:var(--ink); border-color:transparent; color:var(--bg); font-weight:500 }
@media (prefers-color-scheme: dark){ .filter[aria-pressed="true"]{ color:#16141C } }

/* -------------------------------------------------------- 试一下 */
.try{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(26px,4vw,44px); align-items:center }
@media (min-width:760px){ .try{ grid-template-columns:250px minmax(0,1fr) } }

.try__case{
  width:100%; max-width:240px; margin:0 auto;
  padding:16px;
  border-radius:var(--r-xl);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}
.try__case svg{ display:block; width:100%; height:auto; border-radius:var(--r); overflow:hidden }

.swatches{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px }
.swatch{
  width:48px; height:48px; padding:0;
  border:2px solid var(--glass-edge);
  border-radius:var(--r-sm);
  background:var(--card); cursor:pointer; overflow:hidden;
  box-shadow:var(--sh-xs);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.swatch:hover{ transform:translateY(-3px); box-shadow:var(--sh-sm) }
.swatch[aria-pressed="true"]{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.swatch svg{ display:block; width:100%; height:100%; border-radius:0 }

/* ------------------------------------------------ 工作之外（关于我） */
/* 两栏：MBTI 那张竖着跨两行，游戏和动漫叠在右边。
   这样三张卡的高度刚好齐，不会有谁下面空一大块。 */
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,2.2vw,22px);
  margin-top:clamp(26px,3.4vw,38px);
}
@media (min-width:820px){
  .about-grid{ grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) }
  .acard--feature{ grid-row:span 2 }
}
.acard{
  padding:clamp(20px,2.6vw,28px);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-xs);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}
.acard__k{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.acard h3{ margin-top:15px; font-size:clamp(17px,1.8vw,20px) }
.acard p{ margin-top:12px; color:var(--ink-2); font-size:14.5px; line-height:1.78 }
.acard p:first-of-type{ margin-top:12px }

/* MBTI 那张卡 */
.mbti{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:clamp(30px,3.6vw,40px);
  letter-spacing:.07em;
  line-height:1;
  color:var(--accent-ink);
}
.mbti-letters{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:7px;
  margin-top:20px;
  max-width:290px;
}
.mbti-letters span{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  padding:7px 10px;
  border-radius:var(--r-sm);
  background:var(--surface-2);
  border:1px solid var(--glass-edge);
  font-size:12px;
  color:var(--ink-2);
}
.mbti-letters b{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:13px;
  color:var(--accent-ink);
}

/* 「玩什么 / 看什么」那种小清单 */
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px }
.chips span{
  font-size:12.5px;
  padding:6px 13px;
  border-radius:var(--r-pill);
  background:var(--surface-2);
  border:1px solid var(--glass-edge);
  color:var(--ink-2);
}

/* 还没放东西的占位格（虚线框，不是裂图） */
.slot{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  aspect-ratio:3/4;
  padding:22px;
  border-radius:var(--r-lg);
  border:1.5px dashed var(--line-2);
  background:var(--surface-2);
  color:var(--ink-3);
  font-size:12.5px;
  line-height:1.7;
}
.slot b{ color:var(--ink-2); font-weight:500; font-size:14px }
.slot i{ font-style:normal; font-size:20px; opacity:.5 }

/* MBTI 卡上那张角色图 */
.acard__fig{
  margin:16px 0 0;
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 0 0 1px var(--line);
  background:var(--surface-2);
}
.acard__fig img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
}

/* COS 长廊：等高、宽度自适应 —— 所以横幅和竖幅能混在一条里 */
.cosstrip{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:4px 4px 16px;
  margin-top:22px;
  -webkit-overflow-scrolling:touch;
}
.cosstrip figure{
  flex:0 0 auto;
  position:relative;
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-sm);
  scroll-snap-align:start;
  background:var(--surface-2);
}
.cosstrip img{
  display:block;
  height:clamp(210px, 25vw, 300px);
  width:auto;
  max-width:none;
}
.cosstrip figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  margin:0;
  padding:32px 15px 12px;
  background:linear-gradient(transparent, rgba(20,16,30,.88));
  color:#fff;
  font-size:12.5px;
  line-height:1.5;
  letter-spacing:.02em;
}
.cosstrip figcaption b{ color:#fff; font-weight:600; margin-right:5px }
.cosstrip figcaption span{ opacity:.75 }
.cosstrip::-webkit-scrollbar{ height:6px }
.cosstrip::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px }
.cosstrip::-webkit-scrollbar-track{ background:transparent }

/* ------------------------------------------------------------ 上下篇导航 */
.pager{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:clamp(30px,4vw,48px);
}
.pager a{
  display:block;
  padding:clamp(20px,2.6vw,28px);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-xs);
  color:var(--ink-2);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}
.pager a:hover{ transform:translateY(-3px); box-shadow:var(--sh-sm); background:var(--card); text-decoration:none }
.pager .k{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:8px;
}
.pager .t{ font-size:16.5px; color:var(--ink); font-weight:600 }
.pager__next{ text-align:right }

/* ---------------------------------------------------------------- 页脚 */
.sitefoot{
  margin-top:clamp(48px,7vw,84px);
  padding:0 var(--pad) clamp(34px,5vw,54px);
  color:var(--ink-3);
  font-size:13.5px;
}
.sitefoot__in{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(22px,3vw,30px) clamp(20px,2.6vw,28px);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh-xs);
  display:flex; flex-wrap:wrap; gap:14px 32px; justify-content:space-between;
  align-items:flex-end;
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}
.sitefoot a{ color:var(--ink-2) }

/* ------------------------------------------------------------ 滚动淡入 */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .65s ease, transform .65s ease }
.reveal.is-in{ opacity:1; transform:none }
.reveal-d1{ transition-delay:.09s }
.reveal-d2{ transition-delay:.18s }
.reveal-d3{ transition-delay:.27s }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none; transition:none }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
}

.no-js .reveal{ opacity:1; transform:none }

/* ---------------------------------------------------------------- 打印 */
@media print{
  :root{
    --bg:#fff; --surface:#fff; --surface-2:#fff; --card:#fff;
    --ink:#000; --ink-2:#222; --ink-3:#555;
    --line:#ccc; --line-2:#bbb; --glass-edge:#ddd;
    --accent:#000; --accent-ink:#000; --accent-soft:#fff;
    --mint:#000; --mint-ink:#000; --mint-soft:#fff;
    --butter-soft:#fff; --sky-soft:#fff;
  }
  @page{ size:A4; margin:13mm 15mm }
  html,body{ background:#fff !important; font-size:10.5pt; line-height:1.5 }
  body::before{ display:none }
  .masthead,.sitefoot,.pager,.door,.no-print,.nav,.scrollcue{ display:none !important }
  .wrap,.masthead__in,.sitefoot__in{ max-width:none; padding:0 }
  .ruled{ padding-left:0 }
  .section,.rsec,.hero,.rhead{ padding:9pt 0 }
  /* 打印时不要卡片，压成纯文字 */
  .entry,.wcard,.meta,.stats li,.tblbox,.rhead__contacts,.reveal{
    background:none !important; border:0 !important; box-shadow:none !important;
    padding:0 !important; margin-bottom:8pt !important;
  }
  .entry,figure,li,ul{ break-inside:avoid; page-break-inside:avoid }
  h1{ font-size:19pt } h2{ font-size:14pt } h3{ font-size:11.5pt }
  h1,h2,h3,.entry__org{ font-weight:700 }
  a{ color:#000; text-decoration:none }
  .pq{ padding:0 !important; font-size:11pt }
  .pq::before{ display:none }
  .entry__when{ color:#333 }
  .tag,.genre,.btn{ border:1px solid #999 !important; background:none !important; color:#000 !important }
  /* 打印时把链接地址以小字补在文字后 */
  .entry a[href^="http"]::after,
  .rhead__contacts a[href^="http"]::after,
  .rhead a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:8.5pt; color:#666; font-family:var(--font-mono);
  }
  .reveal{ opacity:1 !important; transform:none !important }
}