/* =========================================================
   知识库 · 星空立方体（Wiki Constellation）
   ---------------------------------------------------------
   主题变量与首页严格同源：直接从 index.html 抄来，
   四时辰 × 四天气，配色一个字没改，避免两页看起来不是一个站。

   页面结构 = 左上标题 + 中心一座大立方体 + 一圈小立方体（牵引线相连）。
   ========================================================= */

  :root{
    --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Courier New",monospace;
    --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;

    --bg1:#160e28; --bg2:#0b0714; --bg3:#06030d; --bg-flat:#0b0714;
    --ink:#eee9fb; --muted:#a294c6;
    --accent:#c9a6ff; --accent2:#9a76e0;
    --line:rgba(160,130,225,.26);

    --grid:#2a2044;
    --vig1:rgba(26,17,48,.55); --vig2:rgba(10,6,18,0); --vig3:rgba(4,2,10,.85);

    --face-a:#2b1b46; --face-b:#1b1129;
    /* 蓝晶顶面：与首页七座、知识库卡片同族（内页左栏 logo 立方体用） */
    --face-t1:#4d5c9c; --face-t2:#222a4e;
    --face-e:#a9bcf2; --cube-lb:#0d1122; --cube-rb:#161c34;
    --cube-l:#100a1c; --cube-r:#191029;
    --cube-edge:#cbaaff; --cube-stroke:#a184e8; --cube-num:#a889e0;
    --cast:rgba(0,0,0,.13);

    --card-bg:rgba(19,12,32,.92); --card-bg-hi:rgba(29,18,50,.97);
    --card-stroke:rgba(154,118,224,.42);
    --card-day:#f3eeff; --card-sub:#a294c6; --card-path:#6f6296; --card-arrow:#7d6ea6;
    --card-path-hi:#9a89c8;

    --today-bg:rgba(44,26,18,.9); --today-stroke:rgba(255,154,77,.75);
    --today-face:#33203a; --today-edge:#ffc79a;

    --tx-fig:#8f7fb8; --tx-sm:#5f5382; --tx-strong:#ded4f5;
    --tick:#4b3f6b; --tick-num:#544873;
    --contour:#a98cf0; --ribbon:#a98cf0; --band:#c3a6ff;
    --link:#8b6fc4; --warm:#ff9a4d;
    /* 扁平路线 */
    --deck-a:#4a3768; --deck-b:#241a3c;
    --deck-edge:#d9bcff; --deck-dash:#ffd9a0;

    --sky-top:rgba(62,42,104,.34);
    --sun-x:82%; --sun-y:9%; --sun-r:66% 46%;
    --sun-c:rgba(170,190,255,.20);
    --cloud:rgba(120,104,160,.50);
    --rain:#b9aee0; --snow:#ffffff; --rain-a:.88; --flow-c:#ffce95;
    --veil-bg:linear-gradient(180deg,rgba(38,48,78,.30),rgba(18,22,40,.14));
  }

  /* ============ 时辰：清晨 ============ */
  html[data-time="dawn"]{
    --bg1:#2d1a31; --bg2:#170d1c; --bg3:#0b0610; --bg-flat:#170d1c;
    --ink:#f8eef7; --muted:#c6a8c2;
    --accent:#f2b8d2; --accent2:#d78fb4;
    --line:rgba(228,162,198,.28);
    --grid:#3b2740;
    --vig1:rgba(48,26,46,.55); --vig2:rgba(20,10,20,0); --vig3:rgba(9,4,12,.85);
    --face-a:#3f2643; --face-b:#26162c;
    --face-t1:#5b6193; --face-t2:#272b48;
    --face-e:#b4baf0; --cube-lb:#141327; --cube-rb:#20203a;
    --cube-l:#1a0f20; --cube-r:#251531;
    --cube-edge:#f4c8dd; --cube-stroke:#d79dc0; --cube-num:#d3a6c4;
    --cast:rgba(0,0,0,.14);
    --card-bg:rgba(30,17,32,.93); --card-bg-hi:rgba(44,26,46,.97);
    --card-stroke:rgba(228,162,198,.45);
    --card-day:#fdf3f8; --card-sub:#c6a8c2; --card-path:#8a6d85; --card-arrow:#a5849f;
    --card-path-hi:#cba3c2;
    --today-bg:rgba(52,28,26,.92); --today-stroke:rgba(255,170,120,.78);
    --today-face:#3d2320; --today-edge:#ffd0a6;
    --tx-fig:#b58fa8; --tx-sm:#7d6076; --tx-strong:#f6e2ee;
    --tick:#57405b; --tick-num:#6b5268;
    --contour:#d79db8; --ribbon:#d79db8; --band:#f0bcd4;
    --link:#c08fae;
    --deck-a:#5c3c62; --deck-b:#2e1b36;
    --deck-edge:#f7cfe3; --deck-dash:#ffd9b0;
    --sky-top:rgba(128,62,94,.34);
    --sun-x:16%; --sun-y:88%; --sun-r:70% 52%;
    --sun-c:rgba(255,168,120,.34);
    --cloud:rgba(150,112,140,.48);
    --rain:#d5c8e2; --snow:#fff6fb; --rain-a:.92; --flow-c:#ffd3a4;
    --veil-bg:linear-gradient(180deg,rgba(66,40,64,.30),rgba(26,14,26,.14));
  }

  /* ============ 时辰：白天（纯白） ============ */
      html[data-time="day"]{
    --bg1:#f8fcfc; --bg2:#eef5f6; --bg3:#e2ecee; --bg-flat:#f1f7f8;
    --ink:#1a1a18; --muted:#535350;
    --accent:#3d6a7c; --accent2:#5b8b9c;
    --line:rgba(34,64,74,.24);
    --grid:#d7e3e6;
    --vig1:rgba(255,255,255,.55); --vig2:rgba(255,255,255,0); --vig3:rgba(146,172,178,.26);
    --face-a:#ffffff; --face-b:#eef2f2;
    --face-t1:#b4c6ef; --face-t2:#e8effc;
    --face-e:#3c4c72; --cube-lb:#dde4ef; --cube-rb:#f9fbfe;
    --cube-l:#dde4e4; --cube-r:#f9fcfc;
    --cube-edge:#29343a; --cube-stroke:#8b979d; --cube-num:#38403c;
    --cast:rgba(28,48,56,.15);
    --card-bg:rgba(255,255,255,.97); --card-bg-hi:#ffffff;
    --card-stroke:rgba(61,106,124,.42);
    --card-day:#1a1a18; --card-sub:#535350; --card-path:#66767f; --card-arrow:#5b6a72;
    --card-path-hi:#44627a;
    --today-bg:#fff4e8; --today-stroke:rgba(226,104,58,.85);
    --today-face:#f9e7d6; --today-edge:#e2683a;
    --tx-fig:#586c77; --tx-sm:#83919a; --tx-strong:#24241f;
    --tick:#d4dcde; --tick-num:#87929a;
    --contour:#5d7f8e; --ribbon:#4a6d7d; --band:#7fa0af;
    --link:#3f7387; --warm:#c85a2a;
    --deck-a:#eef4f5; --deck-b:#d8e4e7;
    --deck-edge:#4a6d7d; --deck-dash:#c8611f;
    --sky-top:rgba(255,255,255,.90);
    --sun-x:22%; --sun-y:6%; --sun-r:64% 46%;
    --sun-c:rgba(255,251,242,.30);
    --cloud:rgba(176,176,168,.30);
    --rain:#8b8c86; --snow:#ffffff; --rain-a:1.05; --flow-c:#b8791f;
    --veil-bg:linear-gradient(180deg,rgba(126,156,164,.14),rgba(176,192,196,.05));
  }

  /* ============ 时辰：傍晚 ============ */
  html[data-time="dusk"]{
    --bg1:#2c1622; --bg2:#180b12; --bg3:#0b0509; --bg-flat:#180b12;
    --ink:#fbeee4; --muted:#caa48f;
    --accent:#f0a878; --accent2:#c9835c;
    --line:rgba(226,168,128,.26);
    --grid:#3d281c;
    --vig1:rgba(48,24,16,.55); --vig2:rgba(20,10,8,0); --vig3:rgba(8,4,3,.85);
    --face-a:#3d2418; --face-b:#24120a;
    --face-t1:#535a90; --face-t2:#212540;
    --face-e:#a9aed6; --cube-lb:#170f18; --cube-rb:#1e1a2c;
    --cube-l:#1b0e0a; --cube-r:#2a160e;
    --cube-edge:#f0b98a; --cube-stroke:#c98f68; --cube-num:#d9a67e;
    --cast:rgba(0,0,0,.16);
    --card-bg:rgba(28,15,12,.93); --card-bg-hi:rgba(42,24,18,.97);
    --card-stroke:rgba(226,150,96,.45);
    --card-day:#fff2e8; --card-sub:#caa48f; --card-path:#8a6a58; --card-arrow:#a5846f;
    --card-path-hi:#d3a486;
    --today-bg:rgba(56,26,16,.92); --today-stroke:rgba(255,176,110,.82);
    --today-face:#412312; --today-edge:#ffd0a0;
    --tx-fig:#b08a72; --tx-sm:#7d5f4f; --tx-strong:#f8e4d6;
    --tick:#5c4436; --tick-num:#6d5242;
    --contour:#d69a6a; --ribbon:#c98a5c; --band:#f0b98a;
    --link:#b0805f;
    --deck-a:#5c3520; --deck-b:#2c170d;
    --deck-edge:#ffc9a0; --deck-dash:#ffd9a0;
    --sky-top:rgba(130,58,38,.34);
    --sun-x:76%; --sun-y:86%; --sun-r:74% 54%;
    --sun-c:rgba(255,150,80,.38);
    --cloud:rgba(140,100,92,.48);
    --rain:#dcc6b2; --snow:#fff4e6; --rain-a:.95; --flow-c:#ffd6ae;
    --veil-bg:linear-gradient(180deg,rgba(70,40,34,.30),rgba(28,14,12,.14));
  }

/* ---------- 基础 ---------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg-flat);color:var(--ink);font-family:var(--sans);
  overflow:hidden;
  transition:background .9s ease,color .5s ease;
}
/* 满屏点阵：跟首页同一张纸 */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,var(--grid) 1px,transparent 0);
  background-size:26px 26px;
}

/* ---------- 天空 / 云 / 雨幕 ---------- */
/* 背景一律纯色（body 的 --bg-flat），这里不再铺天光、不再渐变。
   淡蓝的上下渐变会让页面下半截发沉，看着像纸鼓起来，读长文最伤眼；
   想留氛围就交给云和雨幕，底子必须是平整的一张纸。 */
.sky{display:none}

.clouds{position:fixed;inset:-10% -20%;z-index:0;pointer-events:none;opacity:0;
  transition:opacity 1.4s ease}
.clouds i{position:absolute;display:block;border-radius:50%;background:var(--cloud);
  filter:blur(78px);opacity:.62}
.clouds i:nth-child(1){width:62vw;height:34vh;left:-8%;top:2%;animation:drift 96s linear infinite}
.clouds i:nth-child(2){width:54vw;height:30vh;left:38%;top:-4%;animation:drift 128s linear infinite reverse}
.clouds i:nth-child(3){width:48vw;height:28vh;left:76%;top:12%;animation:drift 112s linear infinite}
.clouds i:nth-child(4){width:72vw;height:26vh;left:14%;top:34%;opacity:.42;animation:drift 152s linear infinite reverse}
@keyframes drift{0%{transform:translate3d(-6%,0,0)}50%{transform:translate3d(6%,2%,0)}100%{transform:translate3d(-6%,0,0)}}
html[data-weather="cloudy"] .clouds{opacity:.62}
html[data-weather="overcast"] .clouds{opacity:.88}
html[data-weather="rain"] .clouds{opacity:.78}
html[data-weather="snow"] .clouds{opacity:.45}

.veil{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:var(--veil-bg);transition:opacity 1s ease}
html[data-weather="rain"] .veil{opacity:.38}
html[data-weather="cloudy"] .veil{opacity:.32}
html[data-weather="overcast"] .veil{opacity:.42}
html[data-weather="snow"] .veil{opacity:.35}

/* ---------- 舞台 ---------- */
.stage{position:fixed;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  transition:filter 1s ease}
/* 图里的字都是装饰（卡片名、小注、序号），不该被拖选 —— 点中心那盏灯时
   鼠标一动就会把最近的一个词选上，看着像页面出错 */
.stage svg{width:100%;height:100%;display:block;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
html[data-weather="cloudy"] .stage{filter:saturate(.52) brightness(.90)}
html[data-weather="overcast"] .stage{filter:saturate(.46) brightness(.94)}
html[data-weather="rain"] .stage{filter:saturate(.80) brightness(.95)}
html[data-weather="snow"] .stage{filter:saturate(.72) brightness(.94)}

/* ---------- 左上标题（位置与首页完全一致：x=100 y=220，竖线 x=74 180→330） ---------- */
.brand-g{pointer-events:none}
.brand-bar{stroke:var(--accent);stroke-opacity:.5;stroke-width:2;stroke-linecap:round}
.brand-name{font-family:var(--sans);font-size:56px;font-weight:700;fill:var(--ink);letter-spacing:.02em}
.brand-role{font-family:var(--sans);font-size:15.5px;fill:var(--muted)}
.brand-role .hi{fill:var(--ink);font-weight:700}
.brand-aside{font-family:var(--sans);font-size:14.5px;letter-spacing:.06em;fill:var(--muted);opacity:.95}
.brand-back{font-family:var(--sans);font-size:13px;letter-spacing:.06em;fill:var(--muted);
  opacity:.75;pointer-events:auto;cursor:pointer;transition:fill .18s,opacity .18s}
.brand-back:hover{fill:var(--accent);opacity:1}

/* ---------- 牵引线：一条实底 + 一条流动虚线 ---------- */
.links{pointer-events:none}
.link-base{fill:none;stroke:var(--link);stroke-width:1.2;stroke-opacity:.30}
.link-run{fill:none;stroke:var(--link);stroke-width:1.8;stroke-opacity:.7;
  stroke-dasharray:5 11;stroke-linecap:round;
  animation:linkFlow 2.6s linear infinite,linkBreathe 5.2s ease-in-out infinite}
@keyframes linkFlow{to{stroke-dashoffset:-32}}
@keyframes linkBreathe{0%,100%{stroke-opacity:.5}50%{stroke-opacity:.92}}
.link-run.on{stroke:var(--accent);stroke-opacity:.95}
/* 指到哪座，就有一道光从中心沿牵引线射过去 */
.link-pulse{fill:none;stroke:var(--warm);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:9 100;stroke-dashoffset:110;stroke-opacity:0;
  transition:stroke-opacity .18s}
.link-run.on + .link-pulse{stroke-opacity:.98;animation:pulseRun 1.05s linear infinite}
@keyframes pulseRun{from{stroke-dashoffset:110}to{stroke-dashoffset:0}}

/* ---------- 薄卡片：平躺的卡片（摆法同立方体，厚度压薄） ----------
   顶面一块玻璃底 + 自己的分类色薄染 + 彩色描边；
   名字写在面上，一行小注掉在卡片下面。
   悬停只抬起、只透色，不变金 —— 与全站规矩一致。 */
.node{animation:emerge .95s cubic-bezier(.2,.72,.3,1) both;
  transform-box:fill-box;transform-origin:center}
@keyframes emerge{
  from{transform:translateY(18px) scale(.94)}
  to{transform:none}
}
.drift{animation:driftY 8s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center}
@keyframes driftY{
  0%{transform:translate3d(0,6px,0)}
  50%{transform:translate3d(0,-7px,0)}
  100%{transform:translate3d(0,6px,0)}
}
/* 指到哪一张，哪一张就停住——其余还在飘 */
.node:hover .drift,.node:focus .drift{animation-play-state:paused}

.slab{cursor:pointer;transition:transform .25s ease;transform-box:fill-box;transform-origin:center}
.slab .top{fill:url(#slabFace);stroke-width:1.3;stroke-opacity:.55;
  transition:stroke-opacity .3s}
/* 厚度面：带一点自己的分类色，跟顶面是一块料，不是另配的黑底座 */
.slab .left{fill:color-mix(in srgb,var(--tc,var(--cube-l)) 14%,var(--cube-l));
  stroke:var(--cube-stroke);stroke-opacity:.58;stroke-width:1}
.slab .right{fill:color-mix(in srgb,var(--tc,var(--cube-r)) 26%,var(--cube-r));
  stroke:var(--cube-stroke);stroke-opacity:.58;stroke-width:1}
/* 整块卡片的外轮廓：一圈分类色把顶面和厚度面封在一起 */
.slab .rim{fill:none;stroke-width:1.4;stroke-opacity:.55;stroke-linejoin:round;
  pointer-events:none;transition:stroke-opacity .3s}
/* 晶面反光：紧贴左上棱的一段亮线，像玻璃边缘吃到一线光 */
.slab .sheen{fill:none;stroke:#ffffff;stroke-opacity:.34;stroke-width:2.2;
  stroke-linecap:round;pointer-events:none;transition:stroke-opacity .3s}
html[data-time="day"] .slab .sheen{stroke:#ffffff;stroke-opacity:.62}

/* 卡片上的名字与脚下的小注 */
.sname{font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:.04em;
  fill:var(--ink);text-anchor:middle;pointer-events:none;opacity:.96;transition:opacity .3s}
/* 小注压在牵引线上会出现一道虚线，给字描一圈底色把线压下去 */
.cnote{font-family:var(--mono);font-size:11px;letter-spacing:.02em;fill:var(--muted);
  text-anchor:middle;pointer-events:none;opacity:.95;transition:opacity .3s;
  paint-order:stroke;stroke:var(--bg-flat);stroke-width:3.5;stroke-linejoin:round}

/* 金光层：常驻但全透明，悬停时一秒多慢慢显形 —— 首页悬停那套的节奏 */
.slab .gold{opacity:0;pointer-events:none;
  transition:opacity 1.05s cubic-bezier(.3,.7,.3,1)}
.node:hover .slab .gold,.node:focus .slab .gold{opacity:.82}
html[data-time="day"] .node:hover .slab .gold,
html[data-time="day"] .node:focus .slab .gold{opacity:.55}

/* 悬停：抬起 + 棱线亮起来 + 一层金属外发光 */
.node:hover .slab,.node:focus .slab{transform:translateY(-5px);
  filter:drop-shadow(0 0 20px rgba(255,168,86,.32))}
/* 名字一旦压上金底，浅字会糊没 —— 转深棕（首页悬停的老规矩） */
.node:hover .sname,.node:focus .sname{fill:#4d1e06;opacity:1}
.node:hover .slab .top,.node:focus .slab .top{stroke-opacity:1}
.node:hover .slab .rim,.node:focus .slab .rim{stroke-opacity:1}
.node:hover .slab .sheen{stroke-opacity:.55}
.node:hover .sname{opacity:1}
.node:focus{outline:none}

/* 烟花：点中心那盏灯爆出来的金色粒子与扩散环 */
.sparks{pointer-events:none}
.spark{stroke:#ffefc2;stroke-width:.6;stroke-opacity:.5}
/* 白天金粒子压在白底上会虚掉，补一圈赭色描边才看得见 */
html[data-time="day"] .spark{stroke:#c8611f;stroke-width:.9;stroke-opacity:.55}

/* Logo 立方体（列表页 / 详情页左栏）也可点：粒子从顶面爆出。
   viewBox 只有 92×112，粒子必须能飞出画布，所以放开裁剪。 */
.rail-cube,.mini svg{overflow:visible}
.rail-cube,.mini{cursor:pointer}

/* 指到哪张卡，中心的灯就亮一点 —— 卡片是被它照亮的 */
.stage:has(.node:hover) .fire .glow,
.stage:has(.node:focus) .fire .glow{opacity:1;transform:scale(1.04)}
.stage:has(.node:hover) .fire .halo,
.stage:has(.node:focus) .fire .halo{opacity:.85}
html[data-time="day"] .stage:has(.node:hover) .fire .glow{opacity:.3;transform:none}
html[data-time="day"] .stage:has(.node:hover) .fire .halo{opacity:.16}

/* 环境光：卡片浮起来时更亮，落下去时收一点 */
.aura{fill:url(#nodeHalo);pointer-events:none;
  animation:auraBreathe 5.8s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center}
@keyframes auraBreathe{
  0%,100%{opacity:.45;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.06)}
}
html[data-time="day"] .aura{animation:none;opacity:.22}

/* ---------- 中心立方体：一盏灯 ---------- */
.core-g{animation:coreFloat 11.5s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center}
@keyframes coreFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

/* 灯面：三块面各自吃到一档暖 */
.core .top{fill:url(#lampTop);stroke:var(--today-edge);stroke-opacity:.92}
.core .left{fill:url(#lampLeft);stroke:rgba(255,196,140,.75)}
.core .right{fill:url(#lampRight);stroke:rgba(255,176,116,.65)}
/* 中心那座不写字，灯面自己就是主角 */
.core-cast{fill:rgba(176,74,26,.15);filter:url(#soft)}
.fire{pointer-events:none}
.fire .glow{fill:url(#warmGlow);transform-box:fill-box;transform-origin:50% 60%;
  animation:glowBreathe 4.6s ease-in-out infinite}
.fire .halo{fill:url(#lampHalo);opacity:.55;transform-box:fill-box;
  transform-origin:50% 100%;animation:glowBreathe 5.4s ease-in-out infinite}
.fire .ring{fill:none;stroke:var(--warm);stroke-width:1.3;stroke-opacity:.34;
  transform-box:fill-box;transform-origin:center;
  animation:ringOut 3.6s ease-out infinite}
.fire .ring.r2{animation-delay:1.8s}

/* 白天纸面：暖光收住，否则橙红径向渐变在白底上会糊成一片粉雾 */
html[data-time="day"] .fire .glow{opacity:.18}
html[data-time="day"] .fire .halo{opacity:.10}
html[data-time="day"] .fire .ring{stroke-opacity:.22}
html[data-time="day"] .core-cast{fill:rgba(176,74,26,.10)}
html[data-time="dawn"] .fire .glow{opacity:.62}
@keyframes glowBreathe{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes ringOut{
  0%{opacity:0;transform:scale(.82)}
  18%{opacity:.5}
  100%{opacity:0;transform:scale(1.35)}
}
.core:hover .top{stroke-opacity:1}
.core{cursor:pointer;transition:transform .24s ease;transform-box:fill-box;transform-origin:center}
.core:hover{transform:translateY(-3px)}

/* 中心下方的一行小字 */
.core-cap{font-family:var(--mono);font-size:12px;letter-spacing:.3em;fill:var(--tx-fig);
  text-anchor:middle;opacity:.9}

/* ---------- 右上角控件（与首页同一套） ---------- */
.hud{position:fixed;top:16px;right:18px;z-index:9;display:flex;gap:8px;align-items:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;user-select:none}
.hud .fld{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:6px;
  border:1px solid var(--card-stroke);background:var(--card-bg);color:var(--muted)}
.hud select{appearance:none;-webkit-appearance:none;border:0;background:transparent;outline:none;
  font:inherit;color:var(--ink);cursor:pointer;padding-right:2px}
.hud select option{background:#fff;color:#1b1630}
html[data-time="night"] .hud select option,
html[data-time="dusk"] .hud select option{background:#20182c;color:#f4ece2}
.hud .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.8}
.hud .fld::after{content:'▾';font-size:9px;line-height:1;opacity:.5;margin-left:-3px;pointer-events:none}
.hud .home{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;
  border:1px solid var(--card-stroke);background:var(--card-bg);color:var(--muted);
  text-decoration:none;transition:color .18s,border-color .18s}
.hud .home:hover{color:var(--ink);border-color:var(--accent)}

/* ---------- 窄屏：立方体星图换成竖排清单 ---------- */
.mobile{display:none;list-style:none;margin:0;padding:0}
.mobile li{border-top:1px solid var(--line)}
.mobile button{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:12px;padding:16px 2px;background:none;border:0;text-align:left;color:var(--ink);
  font-family:inherit;cursor:pointer}
.mobile .id{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent);opacity:.85}
.mobile .d{font-size:19px;font-weight:700;letter-spacing:.02em}
.mobile .s{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--tx-sm)}

@media (max-width:900px){
  body{overflow:auto}
  .stage,.sky,.clouds,.veil{display:none}
  .mobile{display:block;position:relative;z-index:3;
    max-width:560px;margin:0 auto;padding:96px 20px 60px}
  .m-head{padding:0 2px 22px;border-bottom:1px solid var(--line)}
  .m-head .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent)}
  .m-head h1{margin:8px 0 6px;font-size:38px;line-height:1.15;font-weight:700;letter-spacing:.01em}
  .m-head p{margin:0;font-size:14px;color:var(--muted);line-height:1.8}
  .hud{top:10px;right:10px;font-size:10.5px}
  .hud .fld{padding:5px 7px}
  .hud .home{padding:5px 8px}
  .hud > .fld:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}