/* =====================================================
   FORSYTHIA · main.css
   ①令牌 ②基础 ③背景 ④通用 ⑤顶栏 ⑥左栏 ⑦右栏
   ⑧底部 ⑨子页 ⑩FX小组件 ⑪动画 ⑫响应式
   原则：只强化 UI/艺术风格（参考 AK 式几何面板），
        不改动站点任何展示文字。
   ===================================================== */

/* ---------- ① 设计令牌（配色，改这里全局生效） ---------- */
:root{
  --bg:#ededeb;        --bg-dot:#d2d2cc;
  --ink:#1d1d1b;       --muted:#6d6d68;
  --block:#1d1d1b;     --block-2:#2c2c2a;      /* 黑色块 */
  --paper:#ffffff;     --line:#c9c9c3;
  --on-panel:#f2f2ee;  --on-dim:#9a9a94;
  --yellow:#ffd900;    --cyan:#4fd0d8;
  --red:#e0453a;       --magenta:#ff4fa0;
  --green:#a9c327;     --green-deep:#7f9c1e;   --green-bright:#c8ec55;
  --word-stroke:rgba(0,0,0,.08);
  --font-ui:"Rajdhani","DIN Alternate","Bahnschrift","PingFang SC","Microsoft YaHei",sans-serif;
  --skew:12px;
  --shadow:0 14px 34px rgba(20,20,18,.16);
  --ease:cubic-bezier(.2,.9,.25,1);
  --hud:rgba(255,255,255,.16);           /* HUD 细线 */
  --dot-glow:rgba(169,195,39,.16);       /* 绿色点阵 */

  --plate-bg:rgba(255,255,255,.66);   /* AK 式半透明白 */
  --plate-ink:#26261f;
  --plate-sub:#5b5b53;
  --plate-line:rgba(30,30,25,.28);
}
[data-theme="dark"]{
  --bg:#131311; --bg-dot:#242422; --ink:#eaeae4; --muted:#8f8f89;
  --paper:#1e1e1c; --line:#3a3a36; --word-stroke:rgba(255,255,255,.10);
  --shadow:0 14px 34px rgba(0,0,0,.55);

  --plate-bg:rgba(255,255,255,.14);
  --plate-ink:#f1f1ea;
  --plate-sub:#b9b9b0;
  --plate-line:rgba(255,255,255,.3);
}
/* 暗色专属微调：绿区降刺、装饰条减淡 */
[data-theme="dark"] .lab{background:linear-gradient(165deg,#93ad28,#556912)}
[data-theme="dark"] .bg-deco{opacity:.5}
[data-theme="dark"] .sep-strip{opacity:.55}
/* 暗色下一言扫描光线提亮（深底上 rgba 黄更醒目） */
[data-theme="dark"] .quote__src::after{background:linear-gradient(90deg,transparent,rgba(255,236,110,.78),transparent)}

/* ---------- ② 基础：全站防重叠的根基 ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:clamp(13px,.5vw + 11px,16px)}   /* 字号随视口线性缩放 */
body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);
     line-height:1.5;overflow-x:hidden;transition:background .4s}
img,svg{display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
svg{width:1em;height:1em}
b,strong{font-weight:800}

/* 跨页视图过渡（现代浏览器渐进增强）与平滑滚动 */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

::selection{background:var(--yellow);color:#111}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--block);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--green-deep)}

/* 粘性页脚根基：内容不足一屏时页脚贴底，超出时自然下推 */
.page{position:relative;z-index:1;max-width:1800px;margin:0 auto;
      padding:clamp(14px,2vw,34px) clamp(14px,3vw,56px) 26px;
      min-height:100vh;min-height:100svh;
      display:flex;flex-direction:column}
.page>*{min-width:0}
.layout{flex:1}

/* ---------- ③ 背景装饰 ---------- */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-dots{position:absolute;inset:0;
  background-image:radial-gradient(var(--bg-dot) 1.1px,transparent 1.6px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 60%,rgba(0,0,0,.12));
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 60%,rgba(0,0,0,.12))}
.bg-word{position:absolute;top:1.5vh;left:-.03em;white-space:nowrap;user-select:none;
  font-weight:800;font-size:clamp(72px,15.5vw,240px);letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:2px var(--word-stroke);
  animation:bgword 9s ease-in-out infinite}
.bg-deco{position:absolute;height:clamp(10px,1.4vw,20px);opacity:.9;transform:skewX(-30deg)}
.bg-deco--cyan  {top:15vh;right:6vw;width:15vw;background:var(--cyan);animation:drift 9s ease-in-out infinite alternate}
.bg-deco--yellow{top:30vh;left:45vw;width:6vw;background:var(--yellow);animation:drift 11s ease-in-out -4s infinite alternate}
.bg-deco--pink  {bottom:26vh;right:28vw;width:9vw;background:var(--magenta);animation:drift 13s ease-in-out -8s infinite alternate}
/* HUD 十字准星（纯装饰） */
.bg-crosshair{position:absolute;width:34px;height:34px;opacity:.5}
.bg-crosshair::before,.bg-crosshair::after{content:"";position:absolute;background:var(--green-deep)}
.bg-crosshair::before{left:50%;top:0;bottom:0;width:2px;translate:-50% 0}
.bg-crosshair::after{top:50%;left:0;right:0;height:2px;translate:0 -50%}
.bg-crosshair--tl{top:24vh;left:3vw;animation:pulse 4s ease-in-out infinite}
.bg-crosshair--br{bottom:12vh;right:4vw;animation:pulse 4s ease-in-out -2s infinite}

/* ---------- ④ 通用组件 ---------- */
.reveal{opacity:0}
.reveal.is-in{animation:rise .75s var(--ease) var(--d,0s) both}
.flash{animation:flash .8s ease 2}
/* 分区引导：斜纹分隔条（纯装饰，无文字） */
.sep-strip{height:6px;width:min(180px,32%);margin:22px 0 16px;opacity:.85;
  background:repeating-linear-gradient(-45deg,var(--green-deep) 0 7px,transparent 7px 14px)}
.sep-strip--b{background:repeating-linear-gradient(-45deg,var(--yellow) 0 7px,transparent 7px 14px);
  width:min(120px,22%);opacity:.6}

/* ---------- ⑤ 顶栏 ---------- */
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
        flex-wrap:wrap;margin-bottom:clamp(20px,3.5vh,48px)}
.quick-actions{display:flex;gap:clamp(8px,1vw,14px);flex-wrap:wrap}
.qa-item{position:relative}
.qa-btn{width:clamp(52px,4.6vw,72px);aspect-ratio:1.15;display:grid;place-items:center;
  background:var(--block);color:#fff;
  clip-path:polygon(var(--skew) 0,100% 0,calc(100% - var(--skew)) 100%,0 100%);
  transition:transform .25s var(--ease),color .25s}
.qa-btn svg{width:42%;height:42%}
.qa-btn:hover{transform:translateY(-4px) skewX(-3deg);color:var(--yellow);
  filter:drop-shadow(1.5px 0 var(--magenta)) drop-shadow(-1.5px 0 var(--cyan))}
.qa-btn:active{transform:translateY(-1px) scale(.96)}
/* 顶栏按钮 hover 时底部滑入的黄色基线（纯装饰微交互） */
.qa-item::after{content:"";position:absolute;left:18%;right:18%;bottom:-7px;height:2.5px;
  background:var(--yellow);transform:scaleX(0);transform-origin:center;transition:transform .28s var(--ease)}
.qa-item:hover::after{transform:scaleX(1)}
.notice-panel{position:absolute;top:calc(100% + 10px);left:0;z-index:60;min-width:min(340px,82vw);
  background:var(--block);color:var(--on-panel);padding:1rem 1.2rem;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s}
.notice-panel.is-open{opacity:1;visibility:visible;transform:none}
.notice-panel__row{margin:.55rem 0;font-size:.88rem;color:#d5d5cf}
.status-bar{position:relative;background:var(--block);color:#fff;padding:.55rem 1.8rem .55rem 2.2rem;
  clip-path:polygon(var(--skew) 0,100% 0,100% 100%,0 100%)}
.status-bar::before{content:"";position:absolute;left:14px;right:14px;top:3px;height:2px;
  background:repeating-linear-gradient(90deg,var(--green) 0 10px,transparent 10px 16px);opacity:.7}
.status-bar__inner{display:flex;align-items:center;gap:.8rem;white-space:nowrap}
.status-bar__cube{width:.7rem;height:.7rem;background:var(--yellow);animation:blink 1.6s steps(2) infinite}
.status-bar time{font-size:clamp(1.1rem,1.8vw,1.7rem);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.status-bar .sep{opacity:.4}
.status-bar__weekday{font-size:.9rem}
.status-bar__mode{color:var(--yellow);font-size:.78rem;letter-spacing:.25em}
/* HUD 信号/电量（纯装饰图标） */
.status-bar__hud{display:flex;align-items:center;gap:.55rem;margin-left:auto;color:var(--green-bright,#8ab826);opacity:.9}
.status-bar__hud svg{display:block;height:.72rem;width:auto}
.hud-signal rect{fill:currentColor}
.hud-signal .hud-dim{opacity:.22;animation:hudblink 2.8s steps(2) infinite}
.hud-batt .hud-fill{fill:var(--yellow);animation:hudblink 3.6s steps(2) infinite}

/* ---------- ⑥ 主体两栏（minmax(0,x) 是防溢出关键） ---------- */
.layout{display:grid;grid-template-columns:minmax(320px,46fr) minmax(0,54fr);
        gap:clamp(18px,2.6vw,52px);align-items:start}
.col-left,.col-right{min-width:0}
.col-left{display:flex;flex-direction:column}

/* 季节圆 + GUEST 卡：Grid 受控重叠，任何宽度都不会错位 */
.intro{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start}
.season{position:relative;z-index:3;width:clamp(7rem,11vw,10.5rem);aspect-ratio:1;cursor:pointer;
  display:grid;place-content:center;text-align:center;border-radius:50%;
  background:var(--block);color:#fff;
  margin-right:calc(clamp(2rem,4vw,4rem) * -1);
  margin-bottom:calc(clamp(2rem,4vw,4rem) * -1);
  transition:transform .3s var(--ease)}
.season:hover{transform:scale(1.03)}
.season::before{content:"";position:absolute;inset:-11px;border:2px dashed var(--yellow);
  border-radius:50%;opacity:.9;animation:spin 26s linear infinite}
.season.is-spin{animation:seasonpop .8s var(--ease)}
.season__cn{font-size:clamp(2rem,3.2vw,3.2rem);font-weight:800}
.season__en{color:var(--yellow);letter-spacing:.3em;font-size:.7rem;margin-top:.35rem}
.identity{position:relative;z-index:2;min-width:0;background:var(--block);color:#fff;
  padding:calc(clamp(2rem,4vw,4rem) + .9rem) clamp(1.2rem,2.4vw,2.4rem) 1.5rem clamp(1.4rem,2.6vw,2.6rem);
  clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%)}
.identity::after{content:"";position:absolute;right:1.4rem;top:1.1rem;width:52px;height:16px;
  background-image:radial-gradient(var(--dot-glow) 2px,transparent 2.4px);
  background-size:9px 8px;pointer-events:none}
.identity__name{font-size:clamp(2.2rem,4.5vw,4rem);font-weight:800;letter-spacing:.06em;line-height:1}
.identity__tag{display:inline-block;margin-top:1rem;color:var(--yellow);
  border-bottom:2px solid var(--yellow);letter-spacing:.28em;font-size:.78rem;padding-bottom:.35rem}

/* 每日一言 */
.quote{position:relative;z-index:2;background:var(--block);color:var(--on-panel);
  margin-top:12px;padding:clamp(1.5rem,3vw,2.8rem) clamp(1.4rem,2.6vw,2.6rem) clamp(1.2rem,2vw,1.8rem);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
  transition:transform .32s var(--ease)}
/* 一言切换时整卡斜切微位移（故障感，与文字滑出同步） */
.quote.is-fading{transform:translateX(3px) skewX(-.7deg)}
.quote::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;
  background:linear-gradient(180deg,var(--yellow) 0 55%,var(--green) 55% 100%)}
.quote::after{content:"";position:absolute;right:1.2rem;top:1.1rem;width:64px;height:18px;
  background-image:radial-gradient(var(--dot-glow) 1.6px,transparent 2px);
  background-size:8px 9px;pointer-events:none}
.quote__text{font-size:clamp(1.12rem,1.9vw,1.65rem);font-weight:700;line-height:1.8;
  letter-spacing:.05em;min-height:3.6em;transition:opacity .32s,transform .32s var(--ease),filter .32s}
.quote__src{color:var(--yellow);text-align:right;margin-top:.8rem;transition:opacity .32s,transform .32s var(--ease);
  position:relative;overflow:hidden}
/* 一言切换时来源行菱形扫描光线（纯装饰） */
.quote__src::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:26%;
  transform:skewX(-30deg);opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,217,0,.4),transparent)}
.quote.is-fading .quote__src::after{animation:srcscan .64s var(--ease)}
.quote.is-fading .quote__text{opacity:0;transform:translateX(-16px);filter:blur(2px)}
.quote.is-fading .quote__src{opacity:0;transform:translateX(14px)}
.quote__foot{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.9rem;margin-top:1.4rem}
.quote__socials{display:flex;gap:.9rem}
.qa-circle{width:2.7rem;height:2.7rem;border:1.5px solid #55554f;border-radius:50%;
  display:grid;place-items:center;color:#b9b9b2;transition:.25s}
.qa-circle svg{width:46%;height:46%}
.qa-circle:hover{border-color:var(--yellow);color:var(--yellow);transform:translateY(-3px) rotate(8deg)}
.quote__hint{font-size:.72rem;letter-spacing:.35em;color:#8b8b85;cursor:pointer;transition:.25s}
.quote__hint:hover{color:var(--yellow)}
.quote__hint::after{content:" ▸";color:var(--yellow)}
/* 一言进度指示点（纯几何，点击直达） */
.quote__dots{display:flex;gap:.5rem;align-items:center;margin-inline:auto}
.quote__dot{width:.8rem;height:.8rem;padding:0;background:transparent;border:1.5px solid #6a6a63;
  transform:rotate(45deg);cursor:pointer;transition:.25s var(--ease)}
.quote__dot:hover{border-color:var(--yellow);transform:rotate(45deg) scale(1.18)}
.quote__dot.is-on{background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,217,0,.16)}
/* 季节圆点击联动：一言区黄光脉冲（跨模块纯装饰） */
.quote.is-flash{animation:quoteflash .72s var(--ease)}
/* 移动端拖拽跟手位移（松手回弹） */
.quote.is-drag-l .quote__text{transform:translateX(-14px)}
.quote.is-drag-r .quote__text{transform:translateX(14px)}

/* ---------- ⑥.5 左栏立绘区（连翘 + AK 半透明域名牌） ---------- */
.hero{position:relative;flex:1;min-height:clamp(280px,42vh,520px);
      margin-top:16px;pointer-events:none;z-index:1;
      transition:translate .4s ease-out,transform .22s ease-out}
.hero::after{content:"";position:absolute;right:2%;bottom:4%;width:90px;height:26px;opacity:.55;
  background-image:radial-gradient(var(--dot-glow) 2px,transparent 2.4px);background-size:10px 9px}
.hero__arc{position:absolute;left:-16%;top:-18%;width:52%;aspect-ratio:1;
  border:2.5px dashed var(--yellow);border-radius:50%;opacity:.8;
  animation:spin 46s linear infinite}
.hero__plant{position:absolute;left:-3%;bottom:-6px;width:clamp(250px,32vw,420px);height:auto;
  transform-origin:12% 96%;animation:sway 7s ease-in-out infinite alternate;
  filter:drop-shadow(0 12px 16px rgba(20,20,18,.18))}
.hero__plant .sw2{transform-box:fill-box;transform-origin:50% 85%;
  animation:sway 5.5s ease-in-out -2.5s infinite alternate-reverse}
/* 若 config 填了自定义立绘图片，走这条 */
.hero__img{position:absolute;left:0;bottom:0;max-width:min(72%,460px);max-height:96%;
  object-fit:contain;object-position:left bottom;
  filter:drop-shadow(0 12px 18px rgba(20,20,18,.25))}
/* 飘落的花瓣粒子 */
.hero__petal{position:absolute;top:-6%;aspect-ratio:1;background:var(--yellow);opacity:0;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:petalfall linear infinite}
/* ★ 白色半透明大字牌（毛玻璃 + 斜切角） */
.hero__plate{position:absolute;left:clamp(0px,3vw,36px);bottom:clamp(8px,3vh,36px);z-index:2;
  min-width:min(340px,82%);color:var(--plate-ink);padding:.95rem 1.3rem .85rem;
  background:var(--plate-bg);
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,14px 100%,0 calc(100% - 14px));
  box-shadow:0 12px 28px rgba(20,20,18,.12)}
.hero__plate-top{display:flex;align-items:center;gap:.5rem;font-size:.66rem;font-weight:700;
  letter-spacing:.3em;color:var(--plate-sub)}
.hero__plate-top i{width:.55rem;height:.55rem;background:var(--yellow)}
.hero__plate-en{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:800;line-height:1.1;
  letter-spacing:.02em;white-space:nowrap}
.hero__plate-sub{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.5rem;padding-top:.5rem;border-top:1.5px solid var(--plate-line);
  font-size:.7rem;letter-spacing:.24em;color:var(--plate-sub)}
.hero__barcode{flex:none;width:72px;height:12px;opacity:.75;
  background:repeating-linear-gradient(90deg,var(--plate-ink) 0 2px,transparent 2px 4px,
             var(--plate-ink) 4px 5px,transparent 5px 9px)}
.hero__chip{position:absolute;right:4%;top:8%;z-index:2;padding:.5rem .95rem;
  color:var(--plate-ink);background:var(--plate-bg);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.66rem;font-weight:800;letter-spacing:.28em;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
@keyframes sway{from{transform:rotate(-1.5deg)}to{transform:rotate(1.7deg)}}
@keyframes petalfall{
  0%{top:-6%;transform:translateX(0) rotate(0);opacity:0}
  8%{opacity:.95}
  48%{transform:translateX(28px) rotate(170deg)}
  86%{opacity:.9}
  100%{top:103%;transform:translateX(-16px) rotate(330deg);opacity:0}}

/* ---------- ⑦ 右栏 ---------- */
/* 统计条 */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.stat{position:relative;display:flex;align-items:center;gap:1rem;background:var(--block);color:#fff;
  padding:.7rem 3.2rem .7rem 1.3rem;overflow:hidden;
  clip-path:polygon(var(--skew) 0,100% 0,calc(100% - var(--skew)) 100%,0 100%);transition:.25s var(--ease)}
.stat::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:.3s var(--ease)}
.stat::after{content:"";position:absolute;top:0;bottom:0;right:1.9rem;width:2px;background:var(--hud)}
.stat:hover{background-color:#000;transform:translateX(6px)}
.stat:active{transform:translateX(6px) scale(.98)}
.stat:hover::before{transform:scaleX(1)}
.stat__diamond{color:var(--yellow);font-size:.65rem;transition:.3s var(--ease)}
.stat:hover .stat__diamond{transform:rotate(135deg) scale(1.35)}
.stat__num{font-size:1.9rem;font-weight:800;min-width:1.6ch;text-align:center;font-variant-numeric:tabular-nums}
.stat__label{font-size:.78rem;line-height:1.3;color:#c9c9c3;letter-spacing:.1em}
.stat__label b{display:block;font-size:1rem;color:#fff;letter-spacing:.2em}
.stat__plus{position:absolute;right:1.1rem;top:50%;translate:0 -50%;color:var(--yellow);
  font-size:1.5rem;font-weight:800;transition:.3s var(--ease)}
.stat:hover .stat__plus{transform:rotate(90deg) scale(1.2)}

/* 主面板：POSTS 环 + RECENT + 日历（flex 自动换行，永不挤压重叠） */
.panel-main{position:relative;margin-top:14px;background-color:var(--block-2);color:var(--on-panel);
  padding:clamp(1.2rem,2vw,2rem);display:flex;flex-wrap:wrap;gap:clamp(1rem,2vw,2rem);
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%);overflow:hidden}
.panel-main::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--cyan) 0 25%,var(--magenta) 25% 45%,var(--yellow) 45% 72%,var(--green) 72% 100%)}
.panel-main::after{content:"";position:absolute;left:0;right:0;top:-45%;height:36%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.05),transparent);animation:scan 6s linear infinite}
/* HUD 角标括号（四角，纯装饰） */
.panel-hud{position:absolute;inset:8px;pointer-events:none;opacity:.6}
.panel-hud i{position:absolute;width:12px;height:12px;border:1.5px solid var(--hud)}
.panel-hud i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.panel-hud i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.panel-hud i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.panel-hud i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.panel-ring{flex:0 1 210px;min-width:170px;display:grid;place-items:center}
.ring{position:relative;width:clamp(140px,12vw,180px)}
.ring::before{content:"";position:absolute;inset:-9px;border:1.5px dashed #4a4a45;border-radius:50%;
  animation:spin 40s linear infinite reverse}
.ring svg{width:100%;height:auto;animation:spin 26s linear infinite}
.ring circle{fill:none;stroke-width:3}
.ring__track{stroke:#41413d;stroke-dasharray:3 7}
.ring__bar{stroke:var(--yellow);stroke-dasharray:3 7}
.ring__center{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring__num{font-size:clamp(2.3rem,4vw,3.5rem);font-weight:800;font-variant-numeric:tabular-nums}
.ring__num i{font-style:normal;color:var(--yellow);font-size:.5em;vertical-align:.7em}
.ring__label{letter-spacing:.42em;color:var(--on-dim);font-size:.8rem;margin-top:.2rem}
.ring__sub{color:var(--on-dim);font-size:.85rem}
.panel-recent{flex:1 1 340px;min-width:0}
.panel-recent__head{display:flex;align-items:baseline;gap:1rem;margin-bottom:.6rem}
.panel-recent__head h3{font-size:1.45rem;letter-spacing:.14em;font-weight:800}
.panel-recent__head span{color:var(--on-dim);font-size:.82rem;letter-spacing:.25em}
.panel-recent__head::after{content:"";flex:1;height:2px;background:#41413d;align-self:center}
.recent-item{display:flex;align-items:center;gap:.9rem;min-width:0;padding:.66rem .4rem;
  border-bottom:1px solid #3a3a35;transition:.22s}
.recent-item:last-of-type{border-bottom:0}
.recent-item:hover{background:#33332f;padding-left:.9rem}
.recent-item__no{flex:none;background:var(--yellow);color:#111;font-weight:800;font-size:.76rem;
  padding:.16rem .55rem;font-variant-numeric:tabular-nums;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.recent-item__title{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent-item__tag{flex:none;font-size:.72rem;letter-spacing:.15em;border:1px solid #6a6a63;color:#cfcfc9;padding:.12rem .6rem;transition:.22s}
.recent-item:hover .recent-item__tag{border-color:var(--yellow);color:var(--yellow)}
/* 悬停时编号块左侧弹出的旋转菱形（纯装饰） */
.recent-item{position:relative}
.recent-item__dia{position:absolute;left:-2px;top:50%;width:8px;height:8px;margin-top:-4px;
  background:var(--yellow);opacity:0;scale:.3;transition:.3s var(--ease)}
.recent-item:hover .recent-item__dia{opacity:1;scale:1;rotate:135deg}
.recent-item:hover .recent-item__no{transform:skewX(-8deg) translateX(3px);box-shadow:-2px 2px 0 rgba(0,0,0,.35)}
.panel-recent__more{display:inline-block;margin-top:.8rem;color:var(--yellow);
  font-size:.78rem;font-weight:700;letter-spacing:.25em;transition:letter-spacing .25s}
.panel-recent__more:hover{letter-spacing:.45em}
.panel-cal{flex:0 1 190px;min-width:158px;display:flex;flex-direction:column;gap:.55rem;
  background:linear-gradient(160deg,#e4483d,#a92a20);color:#fff;padding:.95rem;
  clip-path:polygon(14px 0,100% 0,100% 100%,0 100%)}
.panel-cal__title{font-weight:800;letter-spacing:.5em;text-align:center;font-size:1.05rem;
  border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:.4rem}
.panel-cal__month{text-align:center;font-size:.75rem;opacity:.85;letter-spacing:.2em}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
  font-size:.64rem;text-align:center;font-variant-numeric:tabular-nums}
.cal-grid .dow{opacity:.7}
.cal-grid .day{padding:.16rem 0;transition:background .18s}
.cal-grid .day.is-today{background:var(--yellow);color:#111;font-weight:800;
  animation:todaybreath 2.6s ease-in-out infinite}
.cal-grid .day.is-blank{visibility:hidden}
/* 日历格悬停微高亮（今天格除外） */
.cal-grid .day:not(.is-blank):not(.is-today):hover{background:rgba(255,255,255,.24);font-weight:700}

/* 导航黑卡（方舟式菜单磁贴：菱形徽章 + 光刃 + 故障角标） */
.nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:16px}
.nav-card{position:relative;display:flex;align-items:center;gap:1.2rem;overflow:hidden;
  background-color:var(--block);background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 18px);
  color:#fff;padding:1.25rem 1.4rem;min-width:0;min-height:96px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);transition:.28s var(--ease)}
.nav-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--green);
  transform:scaleY(.35);transition:.28s}
.nav-card::after{content:"";position:absolute;top:0;right:0;border-style:solid;
  border-width:0 34px 34px 0;border-color:transparent var(--yellow) transparent transparent;
  transform:translate(110%,-110%);transition:.32s var(--ease)}
.nav-card:hover{transform:translateY(-4px);background-color:#111}
.nav-card:hover::before{transform:scaleY(1)}
.nav-card:hover::after{transform:translate(0,0)}
.nav-card:active{transform:translateY(-1px) scale(.985)}
/* 菱形徽章底座 */
.nav-card__icon{flex:none;width:3.1rem;height:3.1rem;display:grid;place-items:center;
  color:var(--green);position:relative;transition:.28s var(--ease)}
.nav-card__icon::before{content:"";position:absolute;inset:4px;transform:rotate(45deg) scale(.88);
  border:2px solid var(--green);background:rgba(169,195,39,.08);transition:.28s}
.nav-card__icon::after{content:"";position:absolute;left:50%;top:-7px;width:7px;height:7px;
  translate:-50% 0;rotate:45deg;background:var(--yellow);opacity:0;transition:.28s}
.nav-card__icon svg{width:48%;height:48%;position:relative;z-index:1}
.nav-card:hover .nav-card__icon{color:#111;transform:scale(1.06)}
.nav-card:hover .nav-card__icon::before{background:var(--green);border-color:var(--green-bright)}
.nav-card:hover .nav-card__icon::after{opacity:1;top:-10px}
/* 右下点阵 */
.nav-card .nav-card__dots{position:absolute;right:12px;bottom:9px;width:56px;height:16px;
  background-image:radial-gradient(rgba(255,255,255,.22) 1.4px,transparent 1.8px);
  background-size:9px 8px;pointer-events:none;transition:.3s}
.nav-card:hover .nav-card__dots{background-image:radial-gradient(var(--green) 1.4px,transparent 1.8px)}
.nav-card__cn{display:block;font-size:clamp(1.25rem,1.9vw,1.75rem);font-weight:800;letter-spacing:.1em;line-height:1.2}
.nav-card__en{display:block;font-size:.76rem;letter-spacing:.3em;color:#9c9c95}
.nav-card__badge{position:absolute;top:8px;right:8px;background:var(--yellow);color:#111;
  font-weight:800;font-size:.74rem;padding:.08rem .55rem;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.nav-card:hover .nav-card__badge{animation:badgebump .55s var(--ease)}

/* 绿色交互实验区 */
.lab{position:relative;margin-top:0;background:var(--green);
  padding:2.5rem 1.2rem 1.2rem;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)}
.lab::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:repeating-linear-gradient(-45deg,rgba(0,0,0,.22) 0 8px,transparent 8px 16px)}
.lab__head{position:absolute;top:0;left:1.2rem;background:#fff;color:#111;font-weight:800;
  font-size:.8rem;letter-spacing:.18em;padding:.5rem 1.2rem;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.lab__head i{font-style:normal;color:var(--green-deep)}
.lab__bg{position:absolute;right:1.4rem;top:.5rem;font-weight:800;font-size:2.1rem;
  letter-spacing:.04em;color:rgba(255,255,255,.3);white-space:nowrap;pointer-events:none}
.lab__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.lab-item{position:relative;display:flex;align-items:center;gap:1rem;overflow:hidden;
  background:rgba(22,26,6,.85);color:#fff;padding:1.15rem 1.4rem;min-width:0;
  clip-path:polygon(var(--skew) 0,100% 0,calc(100% - var(--skew)) 100%,0 100%);transition:.28s var(--ease)}
.lab-item::before{content:"";position:absolute;inset:0;opacity:0;transition:.3s;
  background:repeating-linear-gradient(-55deg,rgba(255,255,255,.06) 0 10px,transparent 10px 20px)}
.lab-item::after{content:"▸▸";position:absolute;right:1rem;color:var(--yellow);
  opacity:0;transform:translateX(-14px);transition:.28s}
.lab-item:hover{background:#12150a;transform:translateY(-3px)}
.lab-item:hover::before{opacity:1}
.lab-item:hover::after{opacity:1;transform:none}
.lab-item:active{transform:translateY(-1px) scale(.985)}
.lab-item__icon{flex:none;width:2.7rem;height:2.7rem;border:2px solid #fff;border-radius:50%;
  display:grid;place-items:center;transition:.28s}
.lab-item__icon svg{width:50%;height:50%}
.lab-item:hover .lab-item__icon{background:var(--yellow);border-color:var(--yellow);color:#111;transform:rotate(-8deg)}
.lab-item__cn{display:block;font-size:1.3rem;font-weight:800;letter-spacing:.12em}
.lab-item__en{display:block;font-size:.7rem;letter-spacing:.4em;color:#d8e49c}

/* 待开放 */
.unknown-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:0}
.unknown{position:relative;display:flex;align-items:center;gap:1rem;cursor:not-allowed;overflow:hidden;
  color:#6b6b66;padding:1.2rem 1.4rem;min-width:0;
  background:repeating-linear-gradient(135deg,#232321 0 12px,#1b1b19 12px 24px);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.unknown::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:46%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.055),transparent);
  animation:sweep 5.5s var(--ease) infinite}
.unknown svg{width:1.8rem;height:1.8rem;flex:none}
.unknown__cn{display:block;font-size:1.2rem;font-weight:800;letter-spacing:.2em;color:#8e8e88}
.unknown__en{display:block;font-size:.7rem;letter-spacing:.35em;color:#63635e}
.unknown__soon{position:absolute;right:10px;bottom:8px;font-size:.62rem;letter-spacing:.25em;
  border:1px solid #55554f;color:#8e8e88;padding:.08rem .5rem}

/* ABOUT + 运行天数 */
.about-wrap{position:relative;margin-top:30px}
.runtime{position:absolute;top:-1rem;right:2rem;z-index:2;background:var(--yellow);color:#111;
  font-weight:800;font-size:.85rem;padding:.35rem 1.1rem;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.about{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;min-width:0;
  background:var(--block);color:#fff;padding:1.1rem 1.6rem;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.about__word{font-size:1.65rem;font-weight:800;letter-spacing:.14em}
.about__links{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.9rem;color:#cfcfc9}
.about__links a:hover{color:var(--yellow)}
.about__mail{margin-left:auto;color:var(--yellow);font-weight:700;letter-spacing:.04em;position:relative}
.about__mail::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;background:var(--yellow);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.about__mail:hover::after{transform:scaleX(1)}

/* ---------- ⑧ 底部 ---------- */
.footer{margin-top:clamp(20px,3vw,40px)}
.notice{position:relative;display:flex;align-items:center;gap:1rem;min-width:0;overflow:hidden;
  background:var(--paper);padding:.85rem 1.2rem .85rem 0;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);box-shadow:var(--shadow)}
.notice__tag{flex:none;background:var(--red);color:#fff;font-weight:800;letter-spacing:.3em;
  padding:.55rem 1.6rem .55rem 1.9rem;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.notice__text{flex:1;min-width:0;font-weight:600;transition:opacity .3s}
.notice__arrow{flex:none;font-size:1.6rem;line-height:1;font-weight:800;transition:.2s}
.notice__arrow:hover{color:var(--red);transform:translateX(4px)}
.notice__bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--red);
  transform-origin:left;animation:noticebar 6s linear infinite}
/* 通知轮播进度点（纯几何，点击直达） */
.notice__dots{position:absolute;right:3.2rem;bottom:.55rem;display:flex;gap:.42rem;z-index:2}
.notice__dot{width:.58rem;height:.58rem;padding:0;background:transparent;
  border:1.5px solid rgba(255,255,255,.55);transform:rotate(45deg);cursor:pointer;transition:.22s var(--ease)}
.notice__dot:hover{border-color:#fff;transform:rotate(45deg) scale(1.2)}
.notice__dot.is-on{background:var(--yellow);border-color:var(--yellow)}
.copyright{margin-top:1rem;font-size:.85rem;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:center}
.disclaimer{color:var(--red);font-weight:600}

/* ---------- ⑨ 子页（articles.html 等通用） ---------- */
.ak-back{display:inline-flex;align-items:center;background:var(--block);color:#fff;font-weight:700;
  letter-spacing:.15em;padding:.7rem 1.7rem;align-self:flex-start;
  clip-path:polygon(var(--skew) 0,100% 0,calc(100% - var(--skew)) 100%,0 100%);transition:.25s}
.ak-back:hover{color:var(--yellow);transform:translateX(-5px)}
/* 返回按钮 hover：右侧滑入的黄色菱形（与左侧箭头符号呼应） */
.ak-back{position:relative}
.ak-back::after{content:"";position:absolute;right:.7rem;top:50%;width:6px;height:6px;margin-top:-3px;
  background:var(--yellow);rotate:45deg;opacity:0;translate:9px 0;transition:.28s var(--ease)}
.ak-back:hover::after{opacity:1;translate:0 0}
.subpage{position:relative;z-index:1;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:stretch;
  padding:clamp(14px,2vw,34px) clamp(14px,3vw,56px) 110px}
.subpage__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin:1rem 0 1.8rem}
.subpage__title{font-size:clamp(1.8rem,3.4vw,3rem);font-weight:800;letter-spacing:.06em;line-height:1.15}
.subpage__title small{display:block;font-size:.34em;letter-spacing:.5em;color:var(--muted);margin-top:.4rem}
.subpage__count{font-weight:800;letter-spacing:.2em;border-bottom:3px solid var(--yellow);padding-bottom:.4rem}
.article-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
/* tag 筛选栏（"全部"为纯图标，chip 文字复用 config 既有 tag） */
.filter-bar{grid-column:1/-1;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.filter-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .95rem;background:var(--paper);
  border:1.5px solid var(--ink);font:inherit;font-weight:700;font-size:.82rem;letter-spacing:.12em;cursor:pointer;
  transition:.22s var(--ease);clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.filter-chip svg{width:.95rem;height:.95rem}
.filter-chip:hover{border-color:var(--green-deep);color:var(--green-deep);transform:translateY(-2px)}
.filter-chip:active{transform:translateY(0) scale(.95)}
.filter-chip.is-on{background:var(--block);border-color:var(--block);color:var(--yellow)}
.filter-chip--all{padding:.42rem .75rem}
/* 筛选栏聚焦指示：focus-within 时底部黄色虚线展开 */
.filter-bar{position:relative}
.filter-bar::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  background:repeating-linear-gradient(90deg,var(--yellow) 0 8px,transparent 8px 14px);
  transition:right .35s var(--ease)}
.filter-bar:focus-within::after{right:0}
.filter-chip:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}
.article-list__grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.post-card.pop{animation:rise .6s var(--ease) var(--d,0s) both}
.post-card:active{transform:translateY(-2px) scale(.985)}
.recent-item:active{background:#3a3a35}
.post-card{position:relative;display:flex;flex-direction:column;gap:.55rem;min-width:0;
  background:var(--paper);padding:1.2rem 1.2rem 1rem;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
  box-shadow:0 8px 20px rgba(20,20,18,.08);transition:.28s var(--ease)}
.post-card:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(20,20,18,.16)}
.post-card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:.3s var(--ease)}
.post-card:hover::before{transform:scaleX(1)}
.post-card__no{position:absolute;top:0;right:0;background:var(--block);color:var(--yellow);
  font-size:.7rem;font-weight:700;padding:.32rem .9rem;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%)}
/* 编号牌翻牌滚动（hover 触发一次，纯动画） */
.post-card:hover .post-card__no{animation:noflip .55s var(--ease)}
.post-card__title{font-size:1.1rem;font-weight:800;letter-spacing:.04em}
.post-card:hover .post-card__title{color:var(--green-deep)}
.post-card__meta{font-size:.8rem;color:var(--muted)}
.post-card__meta em{font-style:normal;background:var(--yellow);color:#111;
  font-size:.7rem;padding:.06rem .5rem;margin-left:.3rem;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.post-card__go{margin-top:auto;font-size:.78rem;font-weight:700;letter-spacing:.25em;color:var(--green-deep)}
/* 日期当年进度条：hover 填充；点击展开全年 12 格刻度（纯几何） */
.post-card__spark{position:relative;height:4px;margin-top:.1rem;background:var(--line);
  transform:skewX(-30deg);cursor:pointer;transition:height .28s var(--ease)}
.post-card__spark::before{content:"";position:absolute;inset:0;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease) .04s,opacity .2s;
  clip-path:polygon(0 0,100% 0,calc(100% - 2.6px) 100%,0 100%)}
.post-card__spark::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--yellow);
  transform:translateX(calc(var(--pct,0%) - 3px));opacity:0;transition:opacity .3s .3s}
.post-card:hover .post-card__spark::before{transform:scaleX(var(--pct,0%))}
.post-card:hover .post-card__spark::after{opacity:1}
/* 扩大点击热区（不擑布局） */
.post-card__spark-hit{position:absolute;left:0;right:0;top:-9px;bottom:-9px}
/* 展开态：12 格年度刻度，已过月份绿色点亮，逐格弹性入场 */
.post-card__ticks{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);gap:2px;
  opacity:0;pointer-events:none;transition:opacity .22s}
.post-card__ticks b{background:var(--muted);opacity:.22;transform:scaleY(.35);transform-origin:bottom;
  transition:transform .32s var(--ease) calc(var(--k)*16ms),opacity .3s,background .3s}
.post-card.is-ticks .post-card__spark{height:13px}
.post-card.is-ticks .post-card__ticks{opacity:1;pointer-events:auto}
.post-card.is-ticks .post-card__ticks b{transform:none;opacity:.3}
.post-card.is-ticks .post-card__ticks b.is-past{background:var(--green);opacity:.85}
/* 展开态下刻度格可悬停预览（黄色高亮） */
.post-card.is-ticks .post-card__ticks b:hover{background:var(--yellow);opacity:.95;transform:scaleY(1.18)}
.post-card.is-ticks .post-card__spark::before,.post-card.is-ticks .post-card__spark::after{opacity:0}
/* 空列表几何占位动画（纯装饰，无文字） */
.sub-empty{grid-column:1/-1;position:relative;height:130px;pointer-events:none;overflow:hidden}
.sub-empty i{position:absolute;left:50%;top:50%}
.sub-empty__ring{width:76px;aspect-ratio:1;translate:-50% -50%;border:2px dashed var(--accent,var(--green));
  border-radius:50%;opacity:.5;animation:spin 16s linear infinite}
.sub-empty__dia{width:14px;height:14px;translate:-50% -50%;background:var(--yellow);rotate:45deg;
  animation:pulse 2.2s ease-in-out infinite}
.sub-empty__strip{top:auto;bottom:6px;width:140px;height:6px;translate:-50% 0;opacity:.3;transform:skewX(-30deg);
  background:repeating-linear-gradient(-45deg,var(--accent,var(--green)) 0 8px,transparent 8px 16px);
  animation:emptyslide 1.6s linear infinite}
/* 文章详情页 */
.post{max-width:780px;margin:0 auto;background:var(--paper);padding:clamp(1.4rem,4vw,3rem);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);box-shadow:var(--shadow)}
.post h1{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:.04em;padding-bottom:1rem;border-bottom:3px solid var(--ink)}
.post time{color:var(--muted);font-size:.9rem}
.post__body{margin-top:1.4rem;line-height:1.95}

/* ---------- ⑩ FX 小组件（纯装饰，无文字） ---------- */
/* 阅读进度条 */
.fx-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:210;pointer-events:none}
.fx-progress span{display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--yellow) 0 62%,var(--green) 62% 100%)}
/* 开机扫描 */
.fx-boot{position:fixed;inset:0;z-index:300;background:var(--bg);
  display:grid;place-content:center;justify-items:center;gap:16px;
  animation:bootout .45s ease .8s forwards}
.fx-boot__diamond{width:34px;height:34px;border:3px solid var(--ink);position:relative;
  transform:rotate(45deg);animation:bootspin 1s linear infinite}
.fx-boot__diamond::after{content:"";position:absolute;inset:8px;background:var(--yellow);
  animation:blink 1s steps(2) infinite}
.fx-boot__bar{width:130px;height:4px;background:var(--line);overflow:hidden;transform:skewX(-30deg)}
.fx-boot__bar i{display:block;height:100%;width:42%;background:var(--green);
  animation:bootslide .8s ease-in-out infinite}
/* 光标菱形拖尾（仅精确指针） */
.fx-trail{position:fixed;left:-4px;top:-4px;width:8px;height:8px;pointer-events:none;z-index:220;
  background:var(--yellow);rotate:45deg;opacity:0;transition:opacity .35s;will-change:transform}
.fx-trail:nth-child(2n){background:var(--green)}
.fx-trail:nth-child(3n){background:var(--cyan)}
/* 点击碎裂粒子 */
.fx-burst{position:fixed;z-index:219;pointer-events:none}
.fx-burst i{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;
  animation:shard .62s var(--ease) forwards}
/* 返回顶部 */
.to-top{position:fixed;right:clamp(14px,3vw,34px);bottom:clamp(18px,4vh,40px);z-index:150;
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--block);color:var(--yellow);border:1.5px solid var(--hud);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  opacity:0;visibility:hidden;transform:translateY(16px);transition:.3s var(--ease)}
.to-top svg{width:44%;height:44%}
.to-top.is-show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:#000;color:var(--green);transform:translateY(-3px)}
/* 返回顶部阅读进度环（纯几何，滚动时黄色环逐渐点亮） */
.to-top .to-top__ring{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px)}
.to-top .to-top__ring circle{fill:none;stroke-width:2.4}
.to-top .to-top__ring-track{stroke:var(--hud);opacity:.55}
.to-top .to-top__ring-bar{stroke:var(--yellow);stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .12s linear}
.to-top:hover .to-top__ring-bar{stroke:var(--green)}
/* 移动端底部导航（文案全部来自 config.js） */
.dock{position:fixed;left:12px;right:12px;z-index:160;display:none;
  bottom:calc(10px + env(safe-area-inset-bottom));
  grid-auto-flow:column;justify-content:space-around;align-items:center;
  background:rgba(24,24,22,.94);color:#e7e7e0;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:.45rem .5rem;border:1px solid rgba(255,255,255,.12);
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 100%,0 100%);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
  transition:transform .38s var(--ease),opacity .38s var(--ease)}
.dock.dock--hide{transform:translateY(150%);opacity:.35}
.dock a{position:relative;display:grid;justify-items:center;gap:.2rem;
  min-width:58px;min-height:50px;place-content:center;color:#b9b9b2;
  padding:.3rem .5rem;transition:.22s var(--ease)}
.dock a svg{width:1.45rem;height:1.45rem}
.dock a span{font-size:.64rem;letter-spacing:.14em;font-weight:700}
.dock a:active{transform:scale(.92)}
.dock a:hover svg,.dock a:active svg{animation:badgebump .55s var(--ease)}
.dock a.is-active{color:var(--yellow);text-shadow:0 0 14px rgba(255,217,0,.4);
  animation:dockbreath 2.6s ease-in-out infinite}
.dock a.is-active::before{content:"";position:absolute;top:-2px;left:50%;translate:-50% 0;
  width:7px;height:7px;rotate:45deg;background:var(--yellow)}

/* Konami 彩蛋花瓣雨（纯装饰） */
.fx-storm{position:fixed;inset:0;z-index:215;pointer-events:none;overflow:hidden}
.fx-storm i{position:absolute;top:-5vh;width:var(--fs,9px);aspect-ratio:1;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  animation:stormfall var(--fd,3s) linear var(--fdel,0s) forwards}
/* 子页页脚（复用首页通知条/版权模块） */
.subpage .footer{margin-top:auto;padding-top:clamp(1.6rem,3.5vh,2.6rem)}

/* ---------- ⑩.8 子页几何横幅（纯装饰，无文字） ---------- */
.sub-hero{position:relative;height:clamp(84px,13vw,148px);margin-top:1.1rem;overflow:hidden;pointer-events:none}
.sub-hero i{position:absolute}
.sub-hero__ring{left:5%;top:50%;translate:0 -50%;width:clamp(52px,7vw,76px);aspect-ratio:1;
  border:2px dashed var(--accent,var(--green));border-radius:50%;opacity:.7;animation:spin 24s linear infinite}
.sub-hero__ring--b{left:auto;right:13%;width:clamp(26px,3.4vw,38px);border-width:1.5px;opacity:.5;
  animation-duration:15s;animation-direction:reverse}
.sub-hero__dia{left:20%;top:18%;width:13px;height:13px;background:var(--yellow);transform:rotate(45deg);
  animation:pulse 3.2s ease-in-out infinite}
.sub-hero__dia--b{left:auto;right:24%;top:56%;width:9px;height:9px;background:var(--accent,var(--green));animation-delay:-1.4s}
.sub-hero__scan{left:0;right:0;top:-32%;height:30%;opacity:.14;
  background:linear-gradient(90deg,transparent,var(--accent,var(--green)) 50%,transparent);
  animation:subscan 4.6s linear infinite}
.sub-hero__dotted{right:7%;top:14%;width:72px;height:18px;opacity:.55;
  background-image:radial-gradient(var(--muted) 1.3px,transparent 1.7px);background-size:9px 6px}
.sub-hero__edge{left:0;right:0;bottom:0;height:3px;opacity:.65;
  background:repeating-linear-gradient(-45deg,var(--accent,var(--green)) 0 8px,transparent 8px 16px)}
body[data-page="games"] .sub-hero{--accent:var(--yellow)}
body[data-page="tools"] .sub-hero{--accent:var(--cyan)}
body[data-page="collections"] .sub-hero{--accent:var(--green)}

/* ---------- ⑩.9 子页弹性装饰填充区（自动注入，纯几何，无文字） ---------- */
.sub-fill{position:relative;flex:1 1 auto;min-height:88px;pointer-events:none;overflow:hidden}
.sub-fill i{position:absolute}
.sub-fill__ring{right:5%;bottom:-52px;width:190px;aspect-ratio:1;
  border:2px dashed var(--accent,var(--green));border-radius:50%;opacity:.26;animation:spin 32s linear infinite}
.sub-fill__ring--b{right:calc(5% + 210px);bottom:-24px;width:92px;opacity:.16;
  animation:spin 20s linear infinite reverse}
.sub-fill__dia{left:7%;bottom:36px;width:10px;height:10px;background:var(--yellow);rotate:45deg;opacity:.35;
  animation:pulse 3s ease-in-out infinite}
.sub-fill__dots{left:13%;bottom:22px;width:78px;height:26px;opacity:.3;
  background-image:radial-gradient(var(--muted) 1.5px,transparent 2px);background-size:10px 9px}
.sub-fill__strip{right:32%;bottom:20px;width:112px;height:7px;opacity:.22;transform:skewX(-30deg);
  background:repeating-linear-gradient(-45deg,var(--accent,var(--green)) 0 7px,transparent 7px 14px)}
.sub-fill__scan{left:0;right:0;bottom:0;height:1.5px;opacity:.25;
  background:linear-gradient(90deg,transparent,var(--accent,var(--green)) 50%,transparent);
  transform-origin:left;animation:fillscan 5.2s ease-in-out infinite}

/* Konami 收尾：中心菱形 + 双色冲击波（纯几何） */
.fx-finale{position:fixed;inset:0;z-index:216;pointer-events:none;display:grid;place-items:center}
.fx-finale i{position:absolute}
.fx-finale__ring{width:64px;height:64px;border:3px solid var(--yellow);border-radius:50%;
  animation:finaleRing 1.05s var(--ease) both}
.fx-finale__ring--b{border-color:var(--green);border-style:dashed;animation-delay:.14s}
.fx-finale__dia{width:26px;height:26px;background:var(--yellow);box-shadow:0 0 26px rgba(255,217,0,.85);
  animation:finaleDia 1.15s var(--ease) both}

/* ---------- ⑪ 动画 ---------- */
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{50%{opacity:.25}}
@keyframes drift{from{transform:skewX(-30deg) translateX(-28px)}to{transform:skewX(-30deg) translateX(28px)}}
@keyframes scan{to{top:135%}}
@keyframes noticebar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes flash{50%{filter:brightness(1.65)}}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:.6;transform:scale(1)}}
@keyframes sweep{0%{left:-70%}55%,100%{left:130%}}
@keyframes seasonpop{0%{transform:scale(1)}35%{transform:scale(.9) rotate(-8deg)}70%{transform:scale(1.06) rotate(4deg)}100%{transform:scale(1)}}
@keyframes shard{from{opacity:1;transform:translate(0,0) rotate(45deg) scale(1)}
                 to{opacity:0;transform:translate(var(--tx,20px),var(--ty,20px)) rotate(220deg) scale(.15)}}
@keyframes bootout{to{opacity:0;visibility:hidden}}
@keyframes bootspin{to{transform:rotate(405deg)}}
@keyframes bootslide{from{transform:translateX(-130%)}to{transform:translateX(330%)}}
@keyframes hudblink{50%{opacity:.25}}
@keyframes subscan{to{top:118%}}
@keyframes finaleRing{from{transform:scale(.15);opacity:.95}to{transform:scale(13);opacity:0}}
@keyframes finaleDia{0%{transform:rotate(45deg) scale(0)}38%{transform:rotate(225deg) scale(1.3)}
  62%{transform:rotate(315deg) scale(.92)}82%{transform:rotate(405deg) scale(1)}
  100%{transform:rotate(405deg) scale(1);opacity:0}}
@keyframes stormfall{
  0%{transform:translate(0,0) rotate(0);opacity:0}
  6%{opacity:.95}
  100%{transform:translate(var(--drift,40px),114vh) rotate(560deg);opacity:.85}}
@keyframes quoteflash{
  0%{box-shadow:inset 0 0 0 0 rgba(255,217,0,0)}
  28%{box-shadow:inset 0 0 0 3px rgba(255,217,0,.6),inset 0 0 46px rgba(255,217,0,.22)}
  100%{box-shadow:inset 0 0 0 0 rgba(255,217,0,0)}}
@keyframes emptyslide{to{background-position:22.6px 0}}
@keyframes fillscan{0%,100%{transform:scaleX(.16);opacity:.1}50%{transform:scaleX(1);opacity:.3}}
@keyframes dockbreath{0%,100%{filter:brightness(1)}50%{filter:brightness(1.28)}}
@keyframes todaybreath{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}50%{box-shadow:0 0 0 2.5px rgba(255,255,255,.26)}}
@keyframes badgebump{30%{transform:translateY(-4px) scale(1.14) rotate(-6deg)}62%{transform:translateY(1px) scale(.95) rotate(2deg)}}
@keyframes noflip{0%{transform:perspective(300px) rotateX(0)}42%{transform:perspective(300px) rotateX(88deg)}58%{transform:perspective(300px) rotateX(88deg)}100%{transform:perspective(300px) rotateX(0)}}
@keyframes qawave{32%{transform:translateY(-11px) rotate(-7deg)}68%{transform:translateY(2px) rotate(3deg)}}
@keyframes srcscan{0%{left:-40%;opacity:0}25%{opacity:1}100%{left:120%;opacity:0}}
@keyframes bgword{0%,100%{opacity:.9}50%{opacity:.55}}
/* ---------- 键盘可达性：全站统一 focus-visible 焦点框 ---------- */
a:focus-visible,button:focus-visible{outline:2.5px solid var(--green-deep);outline-offset:2px}
.nav-card:focus-visible,.post-card:focus-visible,.stat:focus-visible,.lab-item:focus-visible{outline:2.5px solid var(--green-deep);outline-offset:3px}
.recent-item:focus-visible{outline:2.5px solid var(--yellow);outline-offset:-2px}
.quote__dot:focus-visible,.notice__dot:focus-visible,.filter-chip:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.dock a:focus-visible{outline:2px solid var(--yellow);outline-offset:-3px}
.to-top:focus-visible,.ak-back:focus-visible{outline:2.5px solid var(--yellow);outline-offset:3px}
/* stat 卡菱形标 hover 翻转变绿 */
.stat__diamond{transition:rotate .32s var(--ease),color .32s}
.stat:hover .stat__diamond{rotate:45deg;color:var(--green)}
/* 季节圆 hover：虚线圈加速旋转（改变量重启后相位跳变在虚线对称下不可感知） */
.season::before{animation-name:spin;animation-duration:var(--ring-spd,26s)}
.season:hover{--ring-spd:6.5s}

/* ---------- ⑫ 响应式（三档降级，绝不重叠） ---------- */
@media (max-width:1180px){
  .layout{display:flex;flex-direction:column;gap:18px}   /* 单栏堆叠 */
  .col-left,.col-right{display:contents}
  /* 引导顺序：身份 → 一言 → 数据 → 内容 → 栏目 → 实验 → 待开放 → 立绘 → 关于 */
  .intro{order:1}.quote{order:2}.stats-row{order:3}.panel-main{order:4}
  .nav-grid{order:5}.sep-strip--a{order:6}.lab{order:7}.sep-strip--b{order:8}
  .unknown-grid{order:9}.hero{order:10}.about-wrap{order:11}
  .hero{flex:0 0 auto;min-height:280px;margin-top:6px}
  .sep-strip{margin:6px 0}
  .bg-word{font-size:24vw;opacity:.55}
  .about__mail{margin-left:0}
  .subpage{padding-bottom:26px}
}
@media (max-width:640px){
  .page{padding-bottom:calc(96px + env(safe-area-inset-bottom))}  /* 给底部导航留空间 */
  .dock{display:grid}
  .season{width:6.2rem;margin-right:-2rem;margin-bottom:-2rem}
  .identity{padding-left:1.2rem}
  .lab__bg,.bg-deco{display:none}
  .status-bar{padding:.45rem 1.1rem .45rem 1.6rem}
  .status-bar__weekday{display:none}
  .notice{padding-right:.9rem}
  .notice__tag{letter-spacing:.12em;padding:.5rem 1rem .5rem 1.3rem}
  .hero{min-height:300px}
  .hero__chip{display:none}
  .hero__plant{width:64vw}
  .hero__plate{min-width:88%;padding:.85rem 1rem .8rem}
  .hero__plate-top{letter-spacing:.16em;font-size:.6rem;white-space:nowrap}
  .hero__plate-en{font-size:1.55rem;white-space:nowrap}
  .hero__plate-sub{flex-wrap:wrap;gap:.3rem .8rem}
  .hero__plate-sub span{font-size:.64rem;letter-spacing:.14em}
  .hero__barcode{width:56px}
  .stat{padding:.8rem 2.6rem .8rem 1.1rem}
  .about{padding:1rem 1.1rem}
  .runtime{right:1rem}
  .to-top{bottom:calc(88px + env(safe-area-inset-bottom))}
}
/* 触屏设备：关闭光标特效层（JS 也不再启用） */
@media (hover:none){
  .fx-trail,.fx-burst{display:none}
  /* 触屏无 hover：日期进度条常亮显示（降透明度），信息不丢失 */
  .post-card__spark::before{transform:scaleX(var(--pct,0%));opacity:.5}
  .post-card__spark::after{opacity:.75}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1}
  .fx-boot{display:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- ⑬ 本轮新增的移动端适配 ---------- */
@media (max-width:640px){
  /* 状态栏 HUD 图标小屏收起，避免挤压时间 */
  .status-bar__hud{display:none}
  /* 筛选栏横滑（不换行），滑动条隐藏 */
  .filter-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:.35rem}
  .filter-bar::-webkit-scrollbar{display:none}
  .filter-chip{flex:none}
  /* 一言进度点在小屏移到来源行右侧，避免与社交圆钮挤一行 */
  .quote__dots{order:3;margin-inline:0;margin-left:auto}
  /* 通知进度点避开右侧箭头 */
  .notice__dots{right:2.6rem;bottom:.5rem}
  /* 子页填充区：小屏只保留圆环+菱形，避免拥挤 */
  .sub-fill{min-height:64px}
  .sub-fill__strip,.sub-fill__scan{display:none}
  .sub-fill__ring{width:120px;bottom:-36px}
  .sub-fill__ring--b{display:none}
  /* 筛选 chip 紧凑化：小屏一行可容纳更多 tag */
  .filter-chip{padding:.34rem .68rem;font-size:.76rem;letter-spacing:.08em}
  .filter-chip--all{padding:.34rem .52rem}
}

/* ---------- ⑭ 本轮新增的细节装饰（纯几何，零文字） ---------- */
/* 日历格点击涟漪：扩散圆圈在格内消散（today 黄底换深色圈保证可见） */
.cal-grid .day{position:relative;overflow:hidden}
.day-ripple{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  border:2px solid var(--green-deep);border-radius:50%;pointer-events:none;
  animation:dayrip .55s var(--ease) forwards}
.cal-grid .day.is-today .day-ripple{border-color:#111}
@keyframes dayrip{from{transform:scale(.4);opacity:.95}to{transform:scale(3.6);opacity:0}}

/* spark 刻度悬停月份指示：点阵条，宽度=月份格数（--mo），纯几何无文字。
   spark 容器 skewX(-30deg)，tooltip 反向 skew 抵消保持端正 */
.post-card__ticks b{position:relative}
.post-card__ticks b::after{content:"";position:absolute;bottom:calc(100% + 7px);left:50%;
  height:9px;width:calc(var(--mo,1) * 6px + 8px);
  background-color:#1d1d1b;clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);
  background-image:radial-gradient(circle,var(--yellow) 1.2px,transparent 1.5px);
  background-size:6px 6px;background-repeat:repeat-x;background-position:4px center;
  transform:translateX(-50%) skewX(30deg) translateY(3px);opacity:0;pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease)}
.post-card.is-ticks .post-card__ticks b:hover::after{opacity:1;
  transform:translateX(-50%) skewX(30deg) translateY(0)}

/* 回顶按钮：点击时进度环反向收缩清空（keyframes 用 var(--ringC) 接 JS 周长） */
.to-top.is-going .to-top__ring-bar{animation:ringback .62s var(--ease)}
@keyframes ringback{from{stroke-dashoffset:0}to{stroke-dashoffset:var(--ringC,100.53)}}

/* 实验区悬停扫描光带：自上而下循环掠过（clip-path 自裁剪，无需 overflow） */
.lab::after{content:"";position:absolute;left:0;right:0;top:-16%;height:15%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.17) 45%,rgba(255,255,255,.05) 62%,transparent);
  transform:translateY(-130%)}
.lab:hover::after{animation:labscan 1.6s linear infinite}
@keyframes labscan{to{transform:translateY(820%)}}

/* 一言切换 → 季节圆微转（rotate 独立属性关键帧，不干扰 hover scale 与点击 spin） */
.season.is-nudge{animation:seasonnudge .58s var(--ease)}
@keyframes seasonnudge{30%{rotate:2.8deg}68%{rotate:-1.6deg}}

/* dock 非当前项 hover 弹入同款菱形指示（与 is-active 常亮菱形呼应） */
.dock a:not(.is-active):hover::before{content:"";position:absolute;top:-2px;left:50%;translate:-50% 0;
  width:7px;height:7px;rotate:45deg;background:var(--yellow);animation:dockdia .3s var(--ease)}
@keyframes dockdia{from{scale:0;opacity:0}}

/* 一言卡四角 HUD 括号（hover 时向外扩出） */
.quote__hud{position:absolute;inset:5px;z-index:3;pointer-events:none}
.quote__hud i{position:absolute;width:13px;height:13px;border:0 solid var(--yellow);
  opacity:.42;transition:transform .3s var(--ease),opacity .3s}
.quote__hud i:nth-child(1){top:0;left:0;border-width:2px 0 0 2px}
.quote__hud i:nth-child(2){top:0;right:0;border-width:2px 2px 0 0}
.quote__hud i:nth-child(3){bottom:0;left:0;border-width:0 0 2px 2px}
.quote__hud i:nth-child(4){bottom:0;right:0;border-width:0 2px 2px 0}
.quote:hover .quote__hud i{opacity:.95}
.quote:hover .quote__hud i:nth-child(1){transform:translate(-4px,-4px)}
.quote:hover .quote__hud i:nth-child(2){transform:translate(4px,-4px)}
.quote:hover .quote__hud i:nth-child(3){transform:translate(-4px,4px)}
.quote:hover .quote__hud i:nth-child(4){transform:translate(4px,4px)}

@media (max-width:640px){
  /* 小屏一言卡角标缩小内收，避免与斜切角打架 */
  .quote__hud{inset:3px}
  .quote__hud i{width:10px;height:10px}
}

/* ---------- ⑮ 本轮新增的细节装饰（纯几何，零文字） ---------- */
/* 月历天数点阵：当月每日一枚微点，今日黄点呼吸（红底挂历上的进度可视化） */
.panel-cal__days{display:flex;flex-wrap:wrap;gap:3px 4px;justify-content:center;
  padding-top:.5rem;margin-top:auto;border-top:1px dashed rgba(255,255,255,.35)}
.panel-cal__days i{width:4px;height:4px;background:rgba(255,255,255,.42);rotate:45deg;transition:.2s}
.panel-cal__days i:hover{background:#fff;scale:1.6}
.panel-cal__days i.is-now{background:var(--yellow);animation:pulse 2.2s ease-in-out infinite}

/* 导航卡点阵 hover 流动：沿网格周期(9×8px)推进，无缝循环 */
.nav-card:hover .nav-card__dots{animation:dotflow 1.05s linear infinite}
@keyframes dotflow{to{background-position:9px 8px}}

/* 通知条 hover 扫描光带（overflow:hidden 自裁剪，黄光斜切掠过） */
.notice::before{content:"";position:absolute;top:0;bottom:0;left:-30%;width:24%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,217,0,.15) 45%,rgba(255,217,0,.32) 50%,rgba(255,217,0,.15) 55%,transparent);
  transform:skewX(-14deg) translateX(-130%)}
.notice:hover::before{animation:noticescan 1.35s var(--ease) infinite}
@keyframes noticescan{to{transform:skewX(-14deg) translateX(560%)}}

/* 铭牌条形码扫描：hover 时黄光沿条码横扫 */
.hero__barcode{position:relative;overflow:hidden}
.hero__barcode::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,217,0,.9),transparent);
  transform:translateX(-110%)}
.hero__plate:hover .hero__barcode::after{animation:barscan 1.25s var(--ease) infinite}
@keyframes barscan{to{transform:translateX(360%)}}

/* 社交圆钮 hover 虚线外环旋转（外环常驻但 paused，hover 才转，省电不抢戏） */
.qa-circle{position:relative}
.qa-circle::after{content:"";position:absolute;inset:-5px;border:1.5px dashed var(--yellow);
  border-radius:50%;opacity:0;transition:opacity .25s;pointer-events:none;
  animation:spin 7s linear infinite paused}
.qa-circle:hover::after{opacity:.85;animation-play-state:running}

/* ---------- ⑯ 本轮新增的细节装饰（纯几何，零文字） ---------- */
/* 月历点阵反向闪烁：点击日格时对应点弹跳放大（与 day-ripple 同节奏） */
.panel-cal__days i.is-blink{animation:dotblink .55s var(--ease)}
@keyframes dotblink{35%{scale:2.4;background:#fff}70%{scale:.9}}

/* hero 花瓣 hover 加速：立绘区悬停时飘落提速（覆盖 inline duration）。
   注意 .hero 自身 pointer-events:none（点击穿透装饰层），:hover 永不成立——
   与 15-a sub-hero 倾斜同款坑，改绑可交互的父容器 col-left */
.col-left:hover .hero__petal{animation-duration:3s!important}

/* 一言切换提示 hover：变黄 + 字距微扩（呼应 MORE 的 hover 节奏） */
.quote__hint:hover{color:var(--yellow);letter-spacing:.42em}

/* 分钟更迭时时间数字弹动（inline 元素需先转块级才能位移） */
time.is-tick{display:inline-block;animation:timetick .45s var(--ease)}
@keyframes timetick{30%{transform:translateY(-2px);color:var(--yellow)}}

/* 打印样式：剥离全部装饰层与固定件，白底黑字保内容 */
@media print{
  .fx-boot,.fx-trail,.fx-burst,.fx-storm,.fx-finale,.fx-progress,.dock,.to-top,
  .bg-layer,.bg-word,.bg-deco,.sep-strip,.bg-crosshair,.sub-fill,.sub-hero,
  .quote__hud,.day-ripple,.status-bar__hud,.quick-actions,.socials,
  .notice__dots,.quote__dots,.filter-bar,.post-card__spark,.hero__petal,
  .notice__bar,.lab::after,.notice::before{display:none!important}
  body{background:#fff!important;color:#111!important}
  .page{min-height:auto}
  .reveal,.post-card.pop{opacity:1!important}
  *{box-shadow:none!important;text-shadow:none!important;animation:none!important;transition:none!important}
  a{color:inherit;text-decoration:none}
}

/* ---------- ⑮ 细节增强 ⑮（花瓣迸发/空态彩蛋/长按徽章/翻牌/秒步进/满环闪光/hue 面纱/警示摇摆） ---------- */
/* 花瓣光标迸发：立绘区内移动时从光标处飘落一枚花瓣（独立 translate/rotate 属性动画） */
.fx-petal{position:fixed;width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--yellow);
  rotate:45deg;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);pointer-events:none;z-index:400;
  animation:petalpop 1.5s cubic-bezier(.4,.1,.6,1) forwards}
@keyframes petalpop{0%{translate:0 0;rotate:45deg;opacity:.95}
  100%{translate:var(--px,14px) 96px;rotate:315deg;opacity:0}}

/* 空态圆环点击加速彩蛋：spinup 动 rotate 独立属性，与既有 spin（transform）并列叠加互不覆盖；
   ring 单独重开 pointer-events（父层 sub-empty 保持点击穿透） */
.sub-empty__ring{pointer-events:auto;cursor:pointer}
.sub-empty__ring.is-spinup{animation:spinup .85s cubic-bezier(.5,0,.18,1),spin 16s linear infinite}
@keyframes spinup{from{rotate:0deg}to{rotate:360deg}}

/* dock 长按内容数徽章：黑底黄字数字 + 下缘菱形尖角，从图标上方弹入 */
.dock__badge{position:absolute;top:-1.3rem;left:50%;translate:-50% 0;padding:.12rem .45rem;
  background:var(--ink);color:var(--yellow);font-size:.62rem;font-weight:800;letter-spacing:.06em;
  border:1px solid rgba(255,217,0,.55);animation:badgein .28s var(--ease);pointer-events:none;z-index:5}
.dock__badge::after{content:"";position:absolute;top:100%;left:50%;translate:-50% -50%;
  border:4px solid transparent;border-top-color:var(--ink)}
@keyframes badgein{from{transform:scale(0)}60%{transform:scale(1.18)}to{transform:scale(1)}}

/* runtime 天数 hover 翻牌（配合 JS 数字重滚） */
.runtime b{display:inline-block}
.runtime b.is-reflip{animation:reflip .52s var(--ease)}
@keyframes reflip{0%{transform:rotateX(0)}45%{transform:rotateX(88deg)}100%{transform:rotateX(0)}}

/* 时钟黄菱秒步进：JS 每秒 +45°步进，transition 提供机械缓动感（与 blink 透明度动画分属不同属性） */
.status-bar__cube{transition:rotate .24s var(--ease)}

/* 页底满环闪光：首次滚到底时进度环描边提亮 + 辉光脉冲（stroke/filter 动画不碰 dashoffset） */
.to-top.is-full .to-top__ring-bar{animation:ringflash .9s var(--ease)}
@keyframes ringflash{0%,100%{filter:drop-shadow(0 0 0 rgba(255,217,0,0))}
  40%{stroke:#fff;filter:drop-shadow(0 0 8px rgba(255,217,0,.9))}}

/* Konami 第五层：全屏色相面纱（mix-blend-mode:color 染色层，渐变扫过不触发布局） */
.fx-hueveil{position:fixed;inset:0;z-index:999;pointer-events:none;mix-blend-mode:color;
  background:linear-gradient(115deg,rgba(255,217,0,.55),rgba(169,195,39,.55) 45%,rgba(79,208,216,.55) 82%);
  animation:hueveil 1.35s var(--ease) forwards}
@keyframes hueveil{0%{opacity:0}16%{opacity:.8}62%{opacity:.5}100%{opacity:0}}

/* 版权警示 ⚠ hover 摇摆（独立 rotate 属性，不碰排版） */
.disclaimer{display:inline-block}
.disclaimer:hover{animation:disclaimerway .8s var(--ease)}
@keyframes disclaimerway{0%,100%{rotate:0deg}25%{rotate:-7deg}55%{rotate:6deg}80%{rotate:-3deg}}

/* 打印补充：动态注入的临时层一律隐藏 */
@media print{
  .fx-petal,.fx-hueveil,.dock__badge{display:none!important}
}

/* ---------- ⑰ 手机端两栏布局（≤640px：窄屏不再单列堆叠） ---------- */
/* 根治既有缺陷：≤1180 转 flex column 后桌面 align-items:start 残留，
   模块收缩成内容宽（窄条）——恢复 stretch 让各栏真正通栏，两栏才有意义 */
@media (max-width:1180px){
  .layout{align-items:stretch}
}
@media (max-width:640px){
  /* 统计卡 2 列 */
  .stats-row{grid-template-columns:repeat(2,1fr);gap:9px}
  .stat{padding:.72rem 1.9rem .72rem .85rem;gap:.55rem}
  .stat__num{font-size:1.45rem}
  .stat__label{font-size:.64rem;letter-spacing:.05em}
  .stat__label b{font-size:.86rem;letter-spacing:.14em}
  .stat__plus{right:.8rem;font-size:1.2rem}
  /* 栏目黑卡 2 列（奇数张时最后一张通栏，避免右侧空格） */
  .nav-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
  .nav-card{min-height:76px;padding:.85rem .8rem;gap:.7rem}
  .nav-card__icon{width:2.4rem;height:2.4rem}
  .nav-card__cn{font-size:1.02rem;letter-spacing:.06em}
  .nav-card__en{font-size:.62rem;letter-spacing:.22em}
  .nav-card__dots{width:40px;height:12px;right:9px;bottom:7px}
  .nav-card:last-child:nth-child(odd){grid-column:1/-1}
  /* 实验区 2 列 */
  .lab__grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .lab{padding:2.2rem .9rem .9rem}
  .lab-item{padding:.9rem .8rem;gap:.7rem}
  .lab-item__icon{width:2.2rem;height:2.2rem}
  .lab-item__cn{font-size:.98rem;letter-spacing:.08em}
  .lab-item__en{font-size:.58rem;letter-spacing:.26em}
  .lab-item:only-child{grid-column:1/-1}
  /* 待开放 2 列 */
  .unknown-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .unknown{padding:.95rem .85rem;gap:.7rem}
  .unknown__cn{font-size:.95rem}
  .unknown svg{width:1.5rem;height:1.5rem}
  .unknown:only-child{grid-column:1/-1}
  /* 主面板：POSTS 环 + 日历并排一行，最新推文通栏收尾 */
  .panel-main{gap:.8rem;padding:1rem}
  .panel-ring{order:1;flex:1 1 44%;min-width:0}
  .panel-cal{order:2;flex:1 1 46%;min-width:0}
  .panel-recent{order:3;flex:1 1 100%}
  .ring{width:min(100%,150px)}
  .panel-cal__days{gap:2px 3px}
  /* 立绘 3D 舞台沿用旧立绘的小屏宽度策略 */
  .plant3d-wrap{width:64vw}
}

/* ---------- ⑱ 3D 模式（body.mode-3d：页面景深 + 连翘枝条可旋转） ---------- */
/* 枝条 3D 舞台：三层 SVG 同位叠放；无 perspective 时 translateZ 无视觉差，
   三层完全重合＝与原平面立绘一致；3D 模式下 hero 供透视、stage 可拖拽旋转 */
.plant3d-wrap{position:absolute;left:-3%;bottom:-6px;width:clamp(250px,32vw,420px);aspect-ratio:440/480;
  pointer-events:none;transform-origin:12% 96%;animation:sway 7s ease-in-out infinite alternate;
  filter:drop-shadow(0 12px 16px rgba(20,20,18,.18))}
body.mode-3d .plant3d-wrap{animation:none}
.plant3d-stage{position:absolute;inset:0;transform-style:preserve-3d;touch-action:pan-y;will-change:transform}
body.mode-3d .plant3d-stage{pointer-events:auto;cursor:grab}
body.mode-3d .plant3d-stage.is-drag{cursor:grabbing}
.plant3d-stage svg{position:absolute;inset:0;width:100%;height:100%}
.plant3d__back{transform:translateZ(-72px);filter:brightness(.78) saturate(.85)}
.plant3d__front{transform:translateZ(72px)}
body.mode-3d .hero{perspective:950px}

/* 3D 场景：主内容区成为可倾斜舞台（fixed 元素均在 .page 外，不受干扰；
   display:contents 的 col-* 在窄屏自然把卡片直挂到 layout 的 3D 上下文） */
body.mode-3d .page{perspective:1400px}
body.mode-3d .layout{transform-style:preserve-3d}
body.mode-3d .col-left,body.mode-3d .col-right{transform-style:preserve-3d}
body.mode-3d .intro,body.mode-3d .hero{transform-style:preserve-3d}

/* 卡片浮起分层（translate 独立属性三值写法，不碰各卡 hover/JS transform） */
body.mode-3d .identity{translate:0 0 24px}
body.mode-3d .season{translate:0 0 44px}
body.mode-3d .quote{translate:0 0 34px}
body.mode-3d .stat{translate:0 0 20px}
body.mode-3d .panel-main{translate:0 0 42px}
body.mode-3d .nav-card{translate:0 0 28px}
body.mode-3d .lab{translate:0 0 38px}
body.mode-3d .unknown{translate:0 0 24px}
body.mode-3d .about-wrap{translate:0 0 30px}
body.mode-3d .notice{translate:0 0 22px}
body.mode-3d .copyright{translate:0 0 10px}
body.mode-3d .sep-strip{translate:0 0 8px}
body.mode-3d .hero{translate:0 0 16px}
body.mode-3d .hero__plate{translate:0 0 42px}
body.mode-3d .hero__arc{translate:0 0 -28px}

/* 背景后退（scale/opacity 独立属性，与 JS translate 视差并存） */
body.mode-3d .bg-word{scale:.92}
body.mode-3d .bg-deco{opacity:.5}
body.mode-3d .bg-dots{opacity:.72}

/* translate 过渡：合并既有 transition 值逐条覆盖，避免破坏微交互 */
.identity,.panel-main,.lab,.unknown,.about-wrap,.notice,.copyright,.sep-strip,
.hero__plate,.hero__arc{transition:translate .55s var(--ease)}
.quote{transition:transform .32s var(--ease),translate .55s var(--ease)}
.stat{transition:.25s var(--ease),translate .55s var(--ease)}
.nav-card{transition:.28s var(--ease),translate .55s var(--ease)}
.season{transition:transform .3s var(--ease),translate .55s var(--ease)}
.bg-word{transition:scale .55s var(--ease),opacity .55s}
.bg-deco,.bg-dots{transition:opacity .55s}

/* 3D 开关按钮 on 态（黄块反色 + 微光） */
.qa-btn.is-on{background:var(--yellow);color:#111}
.qa-btn.is-on:hover{color:#111;filter:drop-shadow(1.5px 0 var(--green)) drop-shadow(-1.5px 0 var(--cyan))}

/* 进入 3D 的对焦框：四角黄色括号从外收拢后淡出（纯几何一次性） */
.fx-3dframe{position:fixed;inset:20px;z-index:214;pointer-events:none}
.fx-3dframe i{position:absolute;width:26px;height:26px;border:0 solid var(--yellow);
  animation:framein 1.1s var(--ease) forwards}
.fx-3dframe i:nth-child(1){top:0;left:0;border-width:3px 0 0 3px}
.fx-3dframe i:nth-child(2){top:0;right:0;border-width:3px 3px 0 0}
.fx-3dframe i:nth-child(3){bottom:0;left:0;border-width:0 0 3px 3px}
.fx-3dframe i:nth-child(4){bottom:0;right:0;border-width:0 3px 3px 0}
@keyframes framein{0%{opacity:0;scale:1.55}22%{opacity:1}68%{opacity:.9;scale:1}100%{opacity:0;scale:1}}

/* 打印重置：3D 状态不进纸面 */
@media print{
  body.mode-3d .page{perspective:none!important}
  body.mode-3d .layout,body.mode-3d .col-left,body.mode-3d .col-right{transform:none!important;transform-style:flat!important}
  .layout{transform:none!important}
  .identity,.season,.quote,.stat,.panel-main,.nav-card,.lab,.unknown,.about-wrap,
  .notice,.copyright,.sep-strip,.hero,.hero__plate,.hero__arc,.plant3d-stage,.plant3d-wrap{
    translate:0 0!important;transform:none!important;animation:none!important}
}