/* ==========================================================================
   可见课堂 / Teacher OS —— 作品集站点设计系统
   Portfolio design system. Tokens inherited from the product's own app.wxss.
   ========================================================================== */

:root{
  /* 产品原生色板 / tokens lifted from the mini program */
  --brand:#7C5CFF;
  --brand-deep:#5B3FE0;
  --brand-lift:#9B6BFF;
  --brand-air:#B48BFF;
  --accent:#FFD84D;
  --accent-deep:#E8B713;

  /* 中性色带紫偏 / neutrals biased toward the accent */
  --text:#1B1C2E;
  --text-2:#5F6076;
  --text-3:#8B8AA0;
  --line:#E6E4F0;
  --line-soft:#F0EEF7;
  --bg:#F7F8FC;
  --surface:#FFFFFF;
  --surface-2:#FBFAFE;

  --soft-purple:#F4F0FF;
  --soft-yellow:#FFF7D6;
  --soft-blue:#EEF6FF;
  --soft-green:#EFFFF2;
  --soft-red:#FFF0F0;
  --danger:#D8433C;
  --ok:#12A150;

  /* 深色序幕：两个主题下都是深的 / the overture stays dark in both themes */
  --night:#0B0A16;
  --night-ink:#F2F0FF;
  --night-ink-2:#A9A5C4;
  --night-line:rgba(255,255,255,.12);

  /* 圆角尺度 / radius scale —— 全站唯一来源，不要再写死数值
     手机壳按 iPhone 16 的真实比例推：屏幕 393pt 宽 / 圆角 55pt = 0.1399
     内屏 272px × 0.1399 ≈ 38px；外框 = 内屏 + 边框厚度 9px = 47px（同心圆角） */
  --r-2xs:6px; --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:24px; --r-xl:30px;
  --r-pill:999px;
  /* iPhone 16：屏幕 393pt 宽、圆角 55pt → 55/393 */
  --ios-corner:.1399;
  --measure:42rem;

  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif;
  --font-serif:"Songti SC","Source Han Serif SC","Noto Serif CJK SC",Georgia,serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono","Liberation Mono",monospace;

  --shadow-sm:0 2px 10px rgba(27,28,46,.05);
  --shadow-md:0 10px 30px rgba(27,28,46,.09);
  --shadow-lg:0 24px 60px rgba(91,63,224,.18);
}

@media (prefers-color-scheme:dark){
  :root{
    --text:#EAE8F6; --text-2:#AFACC6; --text-3:#83809A;
    --line:#2A2840; --line-soft:#211F33;
    --bg:#0E0D18; --surface:#171624; --surface-2:#1D1B2C;
    --soft-purple:#221E38; --soft-yellow:#2B2415; --soft-blue:#16233A; --soft-green:#122A1D; --soft-red:#2E1719;
    --brand:#A48CFF; --brand-deep:#8B6BFF; --accent:#FFD84D;
    --danger:#F0837C; --ok:#3DD68C;
    --shadow-sm:0 2px 10px rgba(0,0,0,.4);
    --shadow-md:0 10px 30px rgba(0,0,0,.45);
    --shadow-lg:0 24px 60px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --text:#EAE8F6; --text-2:#AFACC6; --text-3:#83809A;
  --line:#2A2840; --line-soft:#211F33;
  --bg:#0E0D18; --surface:#171624; --surface-2:#1D1B2C;
  --soft-purple:#221E38; --soft-yellow:#2B2415; --soft-blue:#16233A; --soft-green:#122A1D; --soft-red:#2E1719;
  --brand:#A48CFF; --brand-deep:#8B6BFF; --accent:#FFD84D;
  --danger:#F0837C; --ok:#3DD68C;
  --shadow-sm:0 2px 10px rgba(0,0,0,.4);
  --shadow-md:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  --text:#1B1C2E; --text-2:#5F6076; --text-3:#8B8AA0;
  --line:#E6E4F0; --line-soft:#F0EEF7;
  --bg:#F7F8FC; --surface:#FFFFFF; --surface-2:#FBFAFE;
  --soft-purple:#F4F0FF; --soft-yellow:#FFF7D6; --soft-blue:#EEF6FF; --soft-green:#EFFFF2; --soft-red:#FFF0F0;
  --brand:#7C5CFF; --brand-deep:#5B3FE0; --accent:#FFD84D;
  --danger:#D8433C; --ok:#12A150;
  --shadow-sm:0 2px 10px rgba(27,28,46,.05);
  --shadow-md:0 10px 30px rgba(27,28,46,.09);
  --shadow-lg:0 24px 60px rgba(91,63,224,.18);
}

*{box-sizing:border-box;}
/* scroll-padding 必须大于 sticky nav 高度(59px)，且要为 .rv 进场的 translateY(22px) 留余量 */
html{scroll-behavior:smooth;scroll-padding-top:84px;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* 注意：这里绝不能用 overflow-x:hidden。overflow 只要不是 visible，body 就成为
     sticky 的滚动容器，.nav 会失去吸顶行为跟着页面沉下去。clip 不建立滚动容器，
     所以 sticky 仍然相对视口工作。溢出必须在源头修，不能靠 body 盖住。 */
  overflow-x:clip;
}
/* height:auto 让 width/height 属性只当作固有宽高比用（防 CLS），不锁死高度。
   .device-screen img 用更高特异性覆盖它。 */
img{max-width:100%;display:block;height:auto;}
a{color:var(--brand);text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-2xs);}

.wrap{max-width:72rem;margin:0 auto;padding:0 24px;}
.narrow{max-width:var(--measure);}

/* ===== 顶部导航 / sticky nav ================================================= */
.nav{
  position:sticky;top:0;z-index:60;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  border-bottom:1px solid var(--line);
}
.nav.on-night{background:rgba(11,10,22,.62);border-bottom-color:var(--night-line);}
.nav-in{display:flex;align-items:center;gap:16px;height:58px;}
.nav-brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.01em;white-space:nowrap;color:inherit;text-decoration:none;}
.nav-brand:hover{text-decoration:none;}
.nav.on-night .nav-brand{color:var(--night-ink);}
/* 标志：一张卷子 + 一道荧光笔高亮——与正文里 .mark 的高亮手法同源。
   底板故意用 CSS 盒子而不是 SVG rect，这样它和全站共用同一条 corner-shape 规则，
   圆角风格永远不会跟其它方框走散。 */
.nav-mark{
  flex:none;width:27px;height:27px;border-radius:var(--r-xs);
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-air) 100%);
  filter:drop-shadow(0 3px 10px rgba(124,92,255,.38));
}
.nav-mark svg{height:64%;width:auto;display:block;}
.nav-brand:hover .nav-mark{transform:rotate(-3deg) scale(1.05);}
@media (prefers-reduced-motion:no-preference){
  .nav-mark{transition:transform .3s cubic-bezier(.2,.8,.25,1);}
}
.nav-seg{
  margin-left:auto;display:flex;gap:2px;padding:3px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);
}
.nav.on-night .nav-seg{border-color:var(--night-line);background:rgba(255,255,255,.06);}
.nav-seg a{
  padding:5px 14px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;
  color:var(--text-2);text-decoration:none;white-space:nowrap;transition:.18s;
}
.nav.on-night .nav-seg a{color:var(--night-ink-2);}
.nav-seg a:hover{color:var(--text);text-decoration:none;}
.nav.on-night .nav-seg a:hover{color:var(--night-ink);}
.nav-seg a[aria-current="page"]{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(124,92,255,.35);}
.nav.on-night .nav-seg a[aria-current="page"]{color:#fff;}
.nav-mail{font-size:13px;color:var(--text-3);white-space:nowrap;}
.nav.on-night .nav-mail{color:var(--night-ink-2);}
@media (max-width:720px){.nav-mail{display:none;}}

/* ===== 深色序幕 / the dark overture ========================================= */
.overture{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--night);color:var(--night-ink);
  padding:clamp(56px,9vw,110px) 0 clamp(60px,8vw,96px);
}
.overture::before{ /* 网格 */
  content:"";position:absolute;inset:-10% -10% auto -10%;height:130%;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 78%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 78%);
  z-index:-2;animation:gridDrift 90s linear infinite;
}
.aurora{position:absolute;border-radius:50%;filter:blur(70px);z-index:-1;pointer-events:none;}
.aurora.a1{width:56vw;height:56vw;max-width:720px;max-height:720px;left:-12vw;top:-18vw;background:radial-gradient(circle,rgba(124,92,255,.62),transparent 66%);animation:drift1 26s ease-in-out infinite alternate;}
.aurora.a2{width:44vw;height:44vw;max-width:560px;max-height:560px;right:-8vw;top:6vw;background:radial-gradient(circle,rgba(255,216,77,.30),transparent 68%);animation:drift2 32s ease-in-out infinite alternate;}
.aurora.a3{width:40vw;height:40vw;max-width:520px;max-height:520px;left:34vw;bottom:-22vw;background:radial-gradient(circle,rgba(180,139,255,.42),transparent 68%);animation:drift1 38s ease-in-out infinite alternate-reverse;}
@keyframes gridDrift{to{background-position:56px 56px,56px 56px;}}
@keyframes drift1{to{transform:translate3d(7%,5%,0) scale(1.12);}}
@keyframes drift2{to{transform:translate3d(-8%,7%,0) scale(1.16);}}

.overture-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:center;}
@media (max-width:900px){.overture-grid{grid-template-columns:1fr;}}

.eyebrow{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--night-ink-2);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);}
.overture h1{
  font-size:clamp(1.95rem,4.1vw,3.05rem);line-height:1.2;letter-spacing:-.02em;
  font-weight:800;margin:20px 0 0;text-wrap:balance;
}
.grad{
  background:linear-gradient(100deg,#fff 6%,var(--brand-air) 42%,var(--accent) 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:sheen 9s ease-in-out infinite;
}
@keyframes sheen{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.overture .dek{max-width:34rem;color:var(--night-ink-2);font-size:1.05rem;margin:20px 0 0;}
.overture .dek b{color:var(--night-ink);font-weight:600;}

.pillrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.pill{
  display:inline-flex;align-items:baseline;gap:8px;padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid var(--night-line);background:rgba(255,255,255,.05);
  font-size:13px;color:var(--night-ink-2);backdrop-filter:blur(6px);
}
.pill b{color:var(--night-ink);font-family:var(--font-mono);font-size:15px;font-variant-numeric:tabular-nums;}
.pill.live b{color:var(--accent);}
.pill.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(18,161,80,.22);align-self:center;animation:blip 2.4s ease-in-out infinite;}
@keyframes blip{50%{opacity:.35;}}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:var(--r-pill);
  font-weight:700;font-size:14.5px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,background .18s,color .18s;
  font-family:inherit;text-decoration:none;
}
.btn:hover{text-decoration:none;transform:translateY(-2px);}
.btn-primary{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-air) 100%);color:#fff;box-shadow:0 10px 30px rgba(124,92,255,.42);}
.btn-primary:hover{box-shadow:0 16px 40px rgba(124,92,255,.55);}
.btn-gold{background:var(--accent);color:#231B00;box-shadow:0 10px 30px rgba(255,216,77,.3);}
.btn-gold:hover{box-shadow:0 16px 40px rgba(255,216,77,.42);}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--night-ink);border-color:var(--night-line);}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
.btn-line{background:var(--surface);color:var(--text);border-color:var(--line);box-shadow:var(--shadow-sm);}
.btn-line:hover{border-color:var(--brand);color:var(--brand);}
.btn[disabled]{opacity:.42;pointer-events:none;}
.btn small{font-weight:500;opacity:.75;}

/* ===== 手机壳 / device frame =============================================== */
.device{
  /* 圆角完全由 iPhone 16 的比例推出，改宽度时圆角自动跟着走 */
  --dev-w:min(290px,74vw);
  --dev-pad:9px;
  --dev-r-in:calc((var(--dev-w) - 2 * var(--dev-pad)) * var(--ios-corner));
  position:relative;width:var(--dev-w);margin:0 auto;
  border-radius:calc(var(--dev-r-in) + var(--dev-pad));padding:var(--dev-pad);
  background:linear-gradient(160deg,#3A3752,#15132A 55%,#2B2842);
  box-shadow:0 34px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.09) inset;
}
.device::after{ /* 玻璃反光 */
  content:"";position:absolute;inset:var(--dev-pad);border-radius:var(--dev-r-in);pointer-events:none;
  background:linear-gradient(128deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 68%,rgba(255,255,255,.07) 100%);
  z-index:3;
}
.device-screen{position:relative;border-radius:var(--dev-r-in);overflow:hidden;background:#F7F8FC;aspect-ratio:1179/2379;}
.device-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;}
.device-notch{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:96px;height:22px;border-radius:var(--r-pill);background:#0B0A16;z-index:4;
}
.device-float{animation:floaty 7s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-.6deg);}50%{transform:translateY(-14px) rotate(.5deg);}}
.device-glow{position:absolute;inset:-14% -18%;border-radius:50%;filter:blur(52px);background:radial-gradient(circle,rgba(124,92,255,.55),transparent 68%);z-index:-1;}
.device-wrap{position:relative;}

/* ===== 通用版式 / sections ================================================== */
section{padding:clamp(64px,8vw,112px) 0;}
section.tight{padding:clamp(44px,5vw,72px) 0;}
.sec-head{max-width:var(--measure);margin-bottom:clamp(26px,3.4vw,44px);}
.kicker{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);
  padding:5px 11px;border-radius:var(--r-pill);background:var(--soft-purple);margin-bottom:14px;
}
h2{font-size:clamp(1.6rem,3.3vw,2.35rem);line-height:1.24;letter-spacing:-.015em;font-weight:800;margin:0;text-wrap:balance;}
h3{font-size:clamp(1.05rem,1.7vw,1.22rem);font-weight:700;margin:0 0 8px;letter-spacing:-.005em;}
h4{font-size:.95rem;font-weight:700;margin:0 0 6px;}
p{margin:0 0 14px;max-width:var(--measure);}
.sec-head p{color:var(--text-2);font-size:1.04rem;margin-top:14px;}
.lead{font-size:1.06rem;color:var(--text-2);}
ul,ol{padding-left:1.2em;max-width:var(--measure);margin:0 0 16px;}
li{margin:6px 0;}
strong{font-weight:700;}
code{font-family:var(--font-mono);font-size:.87em;background:var(--soft-purple);color:var(--brand-deep);padding:2px 6px;border-radius:var(--r-2xs);}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

.mark{
  background-image:linear-gradient(180deg,transparent 56%,rgba(255,216,77,.62) 56%,rgba(255,216,77,.62) 94%,transparent 94%);
  padding:0 .06em;
}

.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);margin:0;}

/* ===== 卡片 / cards ======================================================== */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow-sm);
}
.grid{display:grid;gap:16px;}
/* grid/flex 子项默认 min-width:auto，内含长 token 或可横滚容器时会撑破轨道 */
.grid>*,.metrics>*,.shelf>*,.gates>*,.annots>*,.slots>*{min-width:0;}
.card{min-width:0;}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));}

.quote{
  font-family:var(--font-serif);font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.55;
  border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin:0;color:var(--text);
  max-width:var(--measure);
}
.quote cite{display:block;font-family:var(--font);font-size:.82rem;font-style:normal;color:var(--text-3);margin-top:12px;letter-spacing:.02em;}

.note{
  border-left:2px solid var(--brand);background:var(--surface);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:16px 18px;margin:20px 0;max-width:var(--measure);font-size:.95rem;color:var(--text-2);
}
.note .tag{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:7px;}
.note.warn{border-left-color:var(--danger);background:var(--soft-red);}
.note.warn .tag{color:var(--danger);}
.note.gold{border-left-color:var(--accent-deep);background:var(--soft-yellow);}
.note.gold .tag{color:var(--accent-deep);}
.note b{color:var(--text);}

/* ===== 数据 / data viz ===================================================== */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.metric{background:var(--surface);padding:18px 18px 16px;}
.metric .v{display:block;font-family:var(--font-mono);font-size:1.7rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1;}
.metric .v em{font-style:normal;font-size:.62em;color:var(--text-3);margin-left:3px;}
.metric .k{font-size:.82rem;color:var(--text-3);margin-top:4px;display:block;}

.bars{display:flex;flex-direction:column;gap:12px;max-width:var(--measure);}
.bar-row{display:grid;grid-template-columns:7.2rem 1fr 4.2rem;gap:12px;align-items:center;font-size:.9rem;}
.bar-track{height:11px;border-radius:var(--r-pill);background:var(--line-soft);overflow:hidden;}
.bar-fill{height:100%;border-radius:var(--r-pill);width:0;background:linear-gradient(90deg,var(--brand),var(--brand-air) 60%,var(--accent));transition:width 1.1s cubic-bezier(.2,.8,.25,1);}
.bar-val{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-2);}

.unitgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(112px,100%),1fr));gap:8px;}
.unit{
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--surface);
  display:flex;flex-direction:column;gap:2px;
}
.unit b{font-family:var(--font-mono);font-size:.92rem;}
.unit span{font-size:.76rem;color:var(--text-3);font-variant-numeric:tabular-nums;}
.unit.dim{opacity:.5;border-style:dashed;}

.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);}
table{border-collapse:collapse;width:100%;min-width:32rem;font-size:.91rem;}
th,td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:top;}
thead th{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);background:var(--surface-2);font-weight:700;}
tbody tr:last-child td{border-bottom:0;}
td.num,th.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* ===== 进场动画 / reveal =================================================== */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.25,1),transform .7s cubic-bezier(.2,.8,.25,1);}
.rv.in{opacity:1;transform:none;}
.rv.d1{transition-delay:.07s;} .rv.d2{transition-delay:.14s;} .rv.d3{transition-delay:.21s;} .rv.d4{transition-delay:.28s;}

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

/* ===== 页脚 / footer ======================================================= */
footer.site{background:var(--night);color:var(--night-ink-2);padding:52px 0 60px;position:relative;overflow:hidden;}
footer.site .aurora{filter:blur(80px);opacity:.55;}
footer.site h3{color:var(--night-ink);}
/* 必须排除 .btn：footer.site a 的特异性(0,1,1)会压过 .btn-gold(0,1,0)，
   把按钮文字染成和底色一样的黄，整个按钮看起来是空的 */
footer.site a:not(.btn){color:var(--accent);}
.foot-grid{display:flex;flex-wrap:wrap;gap:26px 48px;align-items:flex-end;justify-content:space-between;}
.foot-note{font-size:.82rem;max-width:34rem;line-height:1.7;}

/* ==========================================================================
   组件层 / components
   ========================================================================== */

/* ----- 回放舞台 / replay stage ----- */
.stage{
  background:var(--night);border-radius:var(--r-xl);position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg);isolation:isolate;
}
.stage::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 60% 50% at 18% 0%,rgba(124,92,255,.34),transparent 62%),
             radial-gradient(ellipse 46% 46% at 92% 88%,rgba(255,216,77,.16),transparent 64%);
}
.stage-bar{
  display:flex;align-items:center;gap:12px;padding:13px 18px;
  border-bottom:1px solid var(--night-line);flex-wrap:wrap;
}
.stage-title{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--night-ink-2);}
.badge-real{
  display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:var(--r-pill);
  border:1px solid rgba(255,216,77,.4);background:rgba(255,216,77,.12);
  color:var(--accent);font-size:11.5px;font-family:var(--font-mono);letter-spacing:.04em;
}
.badge-real::before{content:"●";font-size:8px;}
.stage-ctl{margin-left:auto;display:flex;gap:8px;}
.sbtn{
  padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--night-line);
  background:rgba(255,255,255,.07);color:var(--night-ink);font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:.16s;
}
.sbtn:hover{background:rgba(255,255,255,.15);}
.sbtn.play{background:var(--accent);color:#241C00;border-color:transparent;}
.sbtn:disabled{opacity:.4;cursor:default;}

.stage-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(18px,3vw,34px);padding:clamp(18px,3vw,30px);align-items:start;}
/* grid item 是 .device-wrap，不是 .device——order 只对 grid item 生效 */
@media (max-width:880px){.stage-body{grid-template-columns:1fr;}.stage-body .device-wrap{order:-1;}}

/* 控制台 */
.console{font-family:var(--font-mono);font-size:13px;line-height:1.85;color:var(--night-ink-2);min-height:330px;}
.cline{display:flex;gap:10px;opacity:0;transform:translateX(-8px);transition:.34s cubic-bezier(.2,.8,.25,1);}
.cline.on{opacity:1;transform:none;}
.cline .ico{flex:none;width:1.2em;text-align:center;}
.cline .k{color:#8E86C8;flex:none;min-width:5.6em;}
.cline .v{color:var(--night-ink);font-weight:600;}
.cline .via{margin-left:auto;font-size:10.5px;letter-spacing:.06em;color:#6F6A94;white-space:nowrap;padding-left:12px;}
.cline.hit .ico{color:var(--ok);}
.cline.ask .ico{color:var(--accent);}
.cline.ask .v{color:var(--accent);}
.cline.sys{color:#6F6A94;}
.cgroup{border-top:1px dashed var(--night-line);margin-top:14px;padding-top:12px;}
.cgroup:first-child{border-top:0;margin-top:0;padding-top:0;}
.ctitle{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#5E5980;margin-bottom:8px;}

/* 抽题卡片飞入 */
.pickrow{display:flex;flex-direction:column;gap:7px;margin-top:4px;}
.pick{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-xs);
  background:rgba(255,255,255,.06);border:1px solid var(--night-line);
  font-size:12px;opacity:0;transform:translateY(10px) scale(.97);transition:.4s cubic-bezier(.2,.8,.25,1);
}
.pick.on{opacity:1;transform:none;}
.pick .no{width:20px;height:20px;border-radius:var(--r-2xs);background:var(--night-ink);color:var(--night);display:grid;place-items:center;font-weight:800;font-size:11px;flex:none;}
.pick .src{color:#8E86C8;}
.pick .mk{margin-left:auto;color:var(--accent);font-weight:700;}

/* 进度条 */
.prog{margin-top:16px;}
.prog-track{height:8px;border-radius:var(--r-pill);background:rgba(255,255,255,.09);overflow:hidden;}
.prog-fill{height:100%;width:0;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent),#FF8A3D 70%,#FF5A5F);transition:width .25s linear;}
.prog-meta{display:flex;justify-content:space-between;font-size:11.5px;color:#8E86C8;margin-top:7px;}

/* 屏幕内覆盖气泡（回放用） */
.screen-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;}

/* ----- 解析器试玩 / parser playground ----- */
.play{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-md);}
.play-head{padding:16px 20px;border-bottom:1px solid var(--line);background:var(--surface-2);display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.play-head .kicker{margin:0;}
.play-body{padding:20px;}
.play-input{display:flex;gap:10px;flex-wrap:wrap;}
.play-input input{
  flex:1 1 22rem;min-width:0;padding:13px 16px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--bg);color:var(--text);font-family:inherit;font-size:15px;
}
.play-input input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--soft-purple);}
.samples{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.sample{
  padding:6px 13px;border-radius:var(--r-pill);border:1px dashed var(--line);background:transparent;
  color:var(--text-2);font-size:12.5px;cursor:pointer;font-family:inherit;transition:.16s;
}
.sample:hover{border-style:solid;border-color:var(--brand);color:var(--brand);background:var(--soft-purple);}

.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(158px,100%),1fr));gap:10px;margin-top:22px;}
.slot{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;background:var(--surface-2);transition:.28s;}
.slot .lab{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-family:var(--font-mono);}
.slot .val{font-weight:700;font-size:1rem;margin-top:3px;}
.slot .via{font-size:10.5px;color:var(--text-3);margin-top:5px;font-family:var(--font-mono);}
.slot.hit{border-color:var(--brand);background:var(--soft-purple);}
.slot.hit .val{color:var(--brand-deep);}
.slot.miss .val{color:var(--text-3);font-weight:600;}
.slot.dflt{border-style:dashed;border-color:var(--brand);background:transparent;}
.slot.dflt .val{color:var(--text-2);}
.slot.ask{border-color:var(--accent-deep);background:var(--soft-yellow);}
.slot.ask .val{color:var(--accent-deep);}

.verdict{margin-top:20px;padding:14px 16px;border-radius:var(--r-md);background:var(--soft-blue);border:1px solid var(--line);font-size:.93rem;}
.verdict b{color:var(--text);}

/* ----- 滚动叙事 / scrollytelling ----- */
.scrolly{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(24px,5vw,72px);align-items:start;}
.scrolly-sticky{position:sticky;top:96px;align-self:start;}
/* 窄屏：必须切 flex 而不是只加 order——单列 grid 里 sticky item 的包含块是它自己的
   grid area，吸附行程为 0，手机会一路排在九个步骤后面。改 flex 后包含块变成 .scrolly
   的内容盒，才真正吸得住。 */
@media (max-width:900px){
  .scrolly{display:flex;flex-direction:column;gap:0;}
  .scrolly-sticky{
    order:-1;position:sticky;top:64px;z-index:5;
    margin:0 0 12px;align-self:center;
    background:var(--bg);padding:8px 0;
  }
  .scrolly-sticky .device{--dev-w:min(150px,40vw);--dev-pad:6px;}
}
.scrolly-sticky .device-screen img{opacity:0;transition:opacity .45s ease;}
.scrolly-sticky .device-screen img.show{opacity:1;}
.steps{display:flex;flex-direction:column;gap:8px;}
.step{
  padding:22px 22px 22px 26px;border-radius:var(--r-lg);border:1px solid transparent;
  position:relative;transition:.4s cubic-bezier(.2,.8,.25,1);
}
.step::before{
  content:"";position:absolute;left:0;top:26px;bottom:26px;width:3px;border-radius:var(--r-pill);
  background:var(--line);transition:.4s;
}
.step.active{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-md);}
.step.active::before{background:linear-gradient(180deg,var(--brand),var(--accent));top:18px;bottom:18px;}
.step .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--brand);}
.step h3{margin:6px 0 8px;}
.step p{color:var(--text-2);margin:0;font-size:.95rem;}
.step .aside{
  margin-top:12px;padding:10px 13px;border-radius:var(--r-sm);background:var(--soft-yellow);
  font-size:.87rem;color:#5B4A00;border-left:2px solid var(--accent-deep);
}
:root[data-theme="dark"] .step .aside{color:#F3D98A;}
@media (prefers-color-scheme:dark){.step .aside{color:#F3D98A;}}
:root[data-theme="light"] .step .aside{color:#5B4A00;}
.step .aside b{font-weight:700;}

/* ----- PDF 陈列 / pdf shelf ----- */
.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr));gap:20px;}
.sheet{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  box-shadow:var(--shadow-md);transition:transform .3s cubic-bezier(.2,.8,.25,1),box-shadow .3s;
}
.sheet:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
/* 两份 PDF 首页高宽比不同（题目卷 1179×1649、答案卷 1179×2232），
   固定取景高度让两张卡等高、按钮对齐 */
.sheet-top{position:relative;background:var(--surface-2);border-bottom:1px solid var(--line);height:400px;overflow:hidden;}
.sheet-top img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center;}
/* 答案卷首页除页眉外几乎全白，取下半部分才看得到评分表 */
.sheet-top.tail img{object-position:bottom center;}
.sheet-tape{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-1.6deg);
  width:104px;height:20px;background:rgba(255,216,77,.55);border-radius:2px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.sheet-body{padding:16px 18px 18px;}
.sheet-body h4{display:flex;align-items:center;gap:8px;}
.sheet-body .meta{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);margin-bottom:12px;}
.sheet-actions{display:flex;gap:9px;flex-wrap:wrap;}
.sheet-actions .btn{padding:9px 16px;font-size:13px;}
.pdfview{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);margin-top:20px;display:none;}
.pdfview.on{display:block;}
.pdfview iframe{width:100%;height:min(78vh,760px);border:0;display:block;background:var(--surface-2);}
.pdfview-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:13px;}
.pdfview-bar b{font-family:var(--font-mono);}
.pdfview-bar .sbtn{color:var(--text);border-color:var(--line);background:var(--surface);}
.pdfview-bar .sbtn:hover{background:var(--soft-purple);}

/* 标注 callout：指着 PDF 上的设计 */
.annots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(206px,100%),1fr));gap:12px;margin-top:22px;}
.annot{border:1px dashed var(--line);border-radius:var(--r-md);padding:13px 15px;background:var(--surface-2);}
.annot b{display:block;font-size:.9rem;margin-bottom:4px;}
.annot span{font-size:.84rem;color:var(--text-2);}

/* ----- 演进轴 / evolution timeline ----- */
.tl{position:relative;padding-left:30px;max-width:var(--measure);}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--brand),var(--accent));border-radius:var(--r-pill);}
.tl-item{position:relative;padding:0 0 26px;}
.tl-item::before{
  content:"";position:absolute;left:-30px;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--surface);border:3px solid var(--brand);box-shadow:0 0 0 4px var(--bg);
}
.tl-item:last-child{padding-bottom:0;}
.tl-from{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--danger);text-decoration-thickness:2px;}
.tl-to{font-weight:700;}
.tl-why{color:var(--text-2);font-size:.93rem;margin-top:6px;}

/* ----- 漏斗 / funnel ----- */
.funnel{display:flex;flex-direction:column;gap:8px;max-width:var(--measure);}
.fstep{display:flex;align-items:center;gap:14px;padding:13px 18px;border-radius:var(--r-md);color:#fff;font-weight:600;font-size:.93rem;}
.fstep .fno{font-family:var(--font-mono);font-size:11px;opacity:.75;}
.fstep .fpct{margin-left:auto;font-family:var(--font-mono);font-size:.85rem;opacity:.9;}
.fstep.f1{background:linear-gradient(90deg,#5B3FE0,#7C5CFF);width:100%;}
.fstep.f2{background:linear-gradient(90deg,#7C5CFF,#9B6BFF);width:88%;}
.fstep.f3{background:linear-gradient(90deg,#9B6BFF,#B48BFF);width:74%;}
.fstep.f4{background:linear-gradient(90deg,#C9A227,#FFD84D);color:#241C00;width:58%;}
@media (max-width:600px){.fstep{width:100%!important;}}

/* ----- 管线 / pipeline ----- */
.pipe{display:flex;flex-direction:column;gap:6px;max-width:var(--measure);}
.pnode{
  display:flex;gap:14px;align-items:flex-start;padding:13px 16px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);border-left-width:4px;
}
.pnode .who{flex:none;width:4.4rem;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-3);padding-top:3px;text-transform:uppercase;}
.pnode .what{font-size:.94rem;font-weight:600;}
.pnode .what em{display:block;font-style:normal;font-weight:400;font-size:.85rem;color:var(--text-2);margin-top:2px;}
.pnode.human{border-left-color:var(--text);}
.pnode.model{border-left-color:var(--brand);}
.pnode.rule{border-left-color:var(--accent-deep);}
.parrow{color:var(--text-3);font-family:var(--font-mono);font-size:12px;padding-left:2.2rem;line-height:1;}
.legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;font-size:.8rem;color:var(--text-3);}
.legend span{display:inline-flex;align-items:center;gap:7px;}
.legend i{width:14px;height:3px;border-radius:2px;display:inline-block;}

/* ----- 门禁三档 / gate ----- */
.gates{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:12px;}
.gate{border-radius:var(--r-lg);padding:18px;border:1px solid var(--line);background:var(--surface);position:relative;overflow:hidden;}
.gate::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;}
.gate.a::after{background:var(--ok);} .gate.b::after{background:var(--accent-deep);} .gate.c::after{background:var(--danger);}
.gate .g{font-family:var(--font-mono);font-size:2rem;font-weight:800;line-height:1;}
.gate.a .g{color:var(--ok);} .gate.b .g{color:var(--accent-deep);} .gate.c .g{color:var(--danger);}
.gate h4{margin:8px 0 4px;}
.gate p{font-size:.86rem;color:var(--text-2);margin:0;}

/* ----- 图注 / figure caption ----- */
figure{margin:0;}
figcaption{font-size:.82rem;color:var(--text-3);margin-top:9px;line-height:1.6;}
figcaption b{color:var(--text-2);}
.shotcard{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm);}
.shotcard img{width:100%;}

/* ----- 小屏导航收窄 / compact nav on small screens ----- */
@media (max-width:560px){
  .nav-in{gap:10px;height:54px;}
  .nav-brand{font-size:14.5px;}
  .nav-brand .brand-long{display:none;}
  .nav-seg a{padding:5px 11px;font-size:12.5px;}
}
/* 三个导航项 + 品牌名在 360 以下放不下，只保留标志 */
@media (max-width:379px){
  .nav-in{gap:8px;}
  .nav-brand{font-size:0;}          /* 隐藏文字，标志本身有 aria-label */
  .nav-seg{gap:0;padding:2px;}
  .nav-seg a{padding:5px 9px;font-size:12px;}
}


/* ==========================================================================
   连续曲率圆角 / continuous-curvature corners
   border-radius 画的是圆弧(G1)：直线段接入圆角处曲率从 0 突跳到 1/r，眼睛能看出那个"折"。
   Apple 的圆角是超椭圆(G2)，曲率连续变化，所以看起来更"顺"。
   corner-shape 是原生方案；不支持的浏览器忽略它、退回普通圆弧，布局完全不受影响。
   squircle ≡ superellipse(4)，与 iOS「continuous」一致。
   ========================================================================== */
@supports (corner-shape: squircle){
  *{corner-shape:squircle;}

  /* 胶囊与正圆必须保持真圆弧——超椭圆会把半圆端头压扁成方肩 */
  .nav-seg,.nav-seg a,.pill,.btn,.sbtn,.kicker,.badge-real,.sample,
  .device-notch,.play-input input,.bar-track,.bar-fill,.prog-track,.prog-fill,
  .aurora,.device-glow,.legend i,.sheet-tape{corner-shape:round;}
  .tl::before,.step::before,.pill.live::before,.tl-item::before{corner-shape:round;}
}

/* ==========================================================================
   联系页 / contact —— iOS 11 的排版理念：超大标题 + 分组内嵌列表
   分组卡承载信息，行内分隔线从文字处起始（不贴卡片边），层级靠留白和分组建立
   ========================================================================== */
.bigname{
  font-size:clamp(3.2rem,11vw,6.5rem);line-height:1;font-weight:800;
  letter-spacing:-.04em;margin:14px 0 0;
}
.bigname .en{
  display:block;font-family:var(--font-mono);font-size:.17em;font-weight:400;
  letter-spacing:.3em;color:var(--night-ink-2);margin-top:22px;text-transform:uppercase;
}

/* 右列用确定宽度：写成 minmax(min(300px,100%),auto) 时，百分比在固有尺寸阶段
   与网格轨道互相依赖，Chrome 会把该轨道撑到 766px，把左边列表挤成 282px */
.ios-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(24px,4vw,56px);align-items:start;}
@media (max-width:860px){.ios-wrap{grid-template-columns:minmax(0,1fr);}}

.ios-label{
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);
  font-family:var(--font-mono);margin:0 0 10px 20px;
}
.ios-group{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:30px;
}
.ios-row{
  display:flex;align-items:center;gap:14px;padding:14px 18px;position:relative;
  min-height:62px;
}
/* 分隔线从文字处起（左侧留出图标宽度），这是 iOS 分组列表的标志性细节 */
.ios-row + .ios-row::before{
  content:"";position:absolute;left:64px;right:0;top:0;height:1px;background:var(--line);
}
.ios-ic{
  flex:none;width:32px;height:32px;border-radius:var(--r-xs);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;
}
.ios-ic svg{width:19px;height:19px;fill:currentColor;display:block;}
.ios-ic.wechat{background:#07C160;}
.ios-ic.phone{background:linear-gradient(135deg,var(--brand),var(--brand-air));}
.ios-ic.mail{background:#2F80ED;}
.ios-ic.github{background:#1B1230;}
.ios-ic.red{background:#FF2442;}
.ios-k{font-size:.95rem;font-weight:600;flex:none;min-width:4.4em;}
.ios-v{
  font-family:var(--font-mono);font-size:.92rem;color:var(--text-2);
  margin-left:auto;text-align:right;min-width:0;overflow-wrap:anywhere;
}
.ios-v a{color:var(--text-2);}
.ios-v a:hover{color:var(--brand);}
.ios-act{
  flex:none;margin-left:12px;padding:6px 13px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface-2);color:var(--text-2);
  font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:.16s;
  white-space:nowrap;
}
.ios-act:hover{border-color:var(--brand);color:var(--brand);background:var(--soft-purple);}
.ios-act.done{border-color:var(--ok);color:var(--ok);background:var(--soft-green);}
/* 窄屏不换行：值本身很短(最长 dmao6725@gmail.com)，缩字号就放得下，
   强行换行会让每行变成三行高，反而破坏列表的节奏 */
@media (max-width:560px){
  .ios-row{padding:13px 14px;gap:11px;min-height:58px;}
  .ios-k{min-width:0;}
  .ios-v{font-size:.84rem;}
  .ios-act{margin-left:10px;padding:5px 11px;font-size:12px;}
  .ios-row + .ios-row::before{left:57px;}
}
/* 项目行的描述是补充说明不是数据，窄屏直接收起，只留标题和 ›
   注意相邻选择器 .desc + .ios-chev 在 desc 被 display:none 时仍然匹配，
   所以必须在这里把 margin-left 改回 auto，否则 › 会贴在标题右边而不是靠右 */
@media (max-width:520px){
  .ios-v.desc{display:none;}
  .ios-v.desc + .ios-chev{margin-left:auto;}
}
.ios-chev{margin-left:auto;color:var(--text-3);font-size:1.15rem;line-height:1;flex:none;padding-left:10px;}
.ios-v.desc + .ios-chev{margin-left:10px;padding-left:0;}

/* 名片式二维码：始终白底，保证任何主题下都能扫 */
.qr-card{
  background:#fff;border-radius:var(--r-xl);padding:22px 22px 18px;
  box-shadow:var(--shadow-md);border:1px solid var(--line);
  text-align:center;width:100%;max-width:320px;
}
.qr-card img{width:100%;border-radius:var(--r-sm);}
.qr-card figcaption{
  margin-top:14px;font-size:.86rem;color:#5F6076;line-height:1.6;
}
.qr-card b{display:block;color:#1B1230;font-size:.95rem;margin-bottom:3px;}