/* ============================================================
   POLARIS CREATIVE HUB — 星辰创汇
   01 fonts · reset · tokens · interface shell · hero
   ============================================================ */

/* 2026-11-13：中文可变字体子集化。
   原文件 Noto Sans SC 1097KB + Noto Serif SC 1416KB = 2.5MB，
   而全站实际只用到 1507 个汉字/标点（扫描 52 个源文件统计）。
   用 fontTools pyftsubset 按实际字集裁切后：390KB + 496KB = 880KB，省 65%。
   代价：以后新增生僻字若不在原字集里会回退到系统字体 —— 由 --sans 的
   后备链（PingFang SC / Microsoft YaHei）兜住，不会显示成方块。
   重新生成方式见 tools/make-font-subset.sh。 */
/* ★ 2026-11-13：中文字体改「按需子集」—— 拆 core / rest 两份，用 unicode-range 分流。
   第一层（core）= 首页 index.html 上实际出现的 674 个汉字，172KB；
   第二层（rest）= 其余页面（work/ join/ studio/ nebula/ 与 JS 内嵌文案）的 768 个字，218KB。
   浏览器的规则是「只下载能覆盖当前页面文字的最后一个 face」：
     · 访客停在首页 → 只下 core（172KB），rest 一次都不请求
     · 进作品详情页 → 才补下 rest（218KB），可以并发、不阻塞首屏
   旧做法是单文件 386KB「首屏必下」，现在首屏字体从 390KB → 172KB（-56%）。
   两份合计 390KB 与旧单文件持平，也就是说：看得多的访客不亏，只看首页的访客省一半。
   重新生成：python tools/split-font-ranges.py（见 tools/make-font-subset.sh 顶部说明）。 */
@font-face{
  font-family:'Noto Sans SC';
  src:url('../fonts/noto-sans-sc-core.woff2') format('woff2');
  font-weight:200 900;font-style:normal;font-display:swap;
  unicode-range:U+2013-2014,U+201C-201D,U+2026,U+2032,U+2039-203A,U+3001-3002,U+300A-300D,U+3010-3011,U+3014-3015,U+4E00,U+4E03,U+4E07,U+4E09-4E0B,U+4E0D-4E0E,U+4E14,U+4E1A,U+4E1C-4E1D,U+4E22,U+4E24,U+4E2A,U+4E2D,U+4E32,U+4E3A-4E3B,U+4E45,U+4E48,U+4E4B,U+4E50,U+4E5D,U+4E5F,U+4E61,U+4E66,U+4E86,U+4E8B-4E8C,U+4E8E,U+4E91-4E92,U+4E9B,U+4EA4,U+4EA7,U+4EAB,U+4EAE,U+4EBA,U+4EC0,U+4EC5,U+4ECB,U+4ECD-4ECE,U+4ED6,U+4ED8,U+4EE3,U+4EE5,U+4EEC,U+4EF6,U+4EFB,U+4EFD,U+4F17-4F18,U+4F1A,U+4F20,U+4F46,U+4F4D-4F4F,U+4F53,U+4F55,U+4F5C,U+4F60,U+4F8B,U+4F9D,U+4FA7,U+4FDD,U+4FE1,U+4FEE,U+5019,U+503C,U+505A,U+505C,U+50AC,U+50CF,U+5146,U+5148-5149,U+514D,U+515C,U+5165,U+5168,U+516B-516D,U+5171,U+5173,U+5176-5177,U+5185,U+518C-518D,U+5199,U+51C6,U+51E0,U+51FA-51FB,U+5206-5207,U+5212,U+5217,U+5219-521B,U+521D,U+5224,U+522B,U+5230,U+5236-5237,U+523B,U+524D,U+5256,U+5267,U+5269,U+526F,U+529B,U+529E-52A1,U+52A8,U+5305,U+5316,U+5323,U+533A,U+533F,U+5341,U+5347,U+534A,U+534F,U+5355,U+5357,U+5360-5361,U+5370,U+5373,U+538B,U+539A,U+539F,U+53BB,U+53C2,U+53C8,U+53CB-53CD,U+53D1,U+53D6-53D9,U+53E0,U+53E3,U+53E5-53E6,U+53EA,U+53EF-53F0,U+53F3,U+53F7,U+5403-5404,U+5408,U+540C-540E,U+5411,U+5417,U+5426,U+542C,U+542F,U+544A,U+5458,U+547C-547D,U+548C,U+54C1,U+54CD,U+54EA,U+552F,U+559C,U+5668,U+56CA,U+56DB,U+56DE,U+56E0,U+56E2,U+56ED,U+56F4,U+56FE,U+5706,U+5728,U+5730,U+573A,U+5740,U+5747,U+574A,U+5750,U+5757,U+5782,U+578B,U+57CB,U+57DF,U+57FA,U+584C,U+585E,U+586B,U+5883,U+5899,U+58C1,U+58F0,U+58F3,U+5904,U+5907,U+590D,U+5916,U+591A,U+591C,U+5927,U+5929,U+5931,U+5934,U+5957,U+597D,U+59CB,U+59FF,U+5A92,U+5B50,U+5B54,U+5B57-5B58,U+5B63-5B64,U+5B66,U+5B83,U+5B87,U+5B89,U+5B8C,U+5B99-5B9A,U+5B9E,U+5BA1-5BA3,U+5BB6,U+5BB9,U+5BBF,U+5BC6,U+5BF9,U+5BFC,U+5C01,U+5C06,U+5C0F,U+5C11,U+5C1A,U+5C1D,U+5C31,U+5C3E,U+5C42,U+5C49,U+5C4F,U+5C51,U+5C55,U+5C5E,U+5C71,U+5C9B,U+5DE5-5DE6,U+5DEE,U+5DF1-5DF2,U+5DF4,U+5E02-5E03,U+5E06,U+5E08,U+5E26-5E27,U+5E2D,U+5E38,U+5E72-5E74,U+5E76,U+5E8F,U+5E93-5E95,U+5E9F,U+5EA6-5EA7,U+5ECA,U+5EF6,U+5EFA,U+5F00,U+5F0F,U+5F15,U+5F20,U+5F39,U+5F52-5F53,U+5F55,U+5F62,U+5F71,U+5F7C,U+5F80-5F81,U+5F84-5F85,U+5F88,U+5F97,U+5FAA,U+5FAE,U+5FC5,U+5FD8,U+5FEB,U+5FF5,U+6001,U+600E,U+6027,U+603B,U+6052,U+6062,U+606F,U+60AC,U+60C5,U+60F3,U+6108,U+610F,U+611F,U+618B,U+620F-6211,U+6216,U+6237,U+623F-6240,U+624B,U+624D,U+6251,U+6253-6254,U+6267,U+6269,U+6279,U+628A,U+6295-6296,U+6298,U+62A5,U+62AC,U+62B5,U+62BD,U+62C6,U+62C9,U+62D3,U+62D6,U+62E5-62E6,U+62E9,U+62FD,U+62FF,U+6301-6302,U+6307,U+6309,U+6311,U+6362,U+636E,U+6377,U+6388-6389,U+6392,U+63A2,U+63A5,U+63A8-63A9,U+63D0,U+63D2,U+641C,U+642D,U+6458,U+6469,U+6478,U+649E,U+64AD,U+64CE,U+64E6,U+6536,U+6539,U+653E,U+6545,U+654F,U+6563,U+6570,U+6574,U+6587,U+6599,U+65AD,U+65B0,U+65B9,U+65C1,U+65E0,U+65E5,U+65E7,U+65E9,U+65F6,U+660E,U+661F,U+6625,U+662F,U+663E,U+666F,U+6682,U+6697,U+66DD,U+66F4,U+66FF-6700,U+6708-6709,U+670D,U+671F,U+672A,U+672C,U+6735,U+673A,U+6743,U+6746,U+6750,U+675F,U+6761,U+6765,U+677F,U+6781,U+6784,U+6790,U+67A2,U+67B6,U+67D3,U+67E5,U+6807,U+680F,U+6821,U+6837-6839,U+683C,U+6848,U+684C,U+6863,U+68A6,U+68C0,U+697C,U+6A21,U+6A2A,U+6B21-6B22,U+6B63-6B65,U+6B7B,U+6BB5,U+6BCF,U+6BD4-6BD5,U+6C14,U+6C34,U+6C38,U+6C42,U+6C47,U+6C50,U+6CA1,U+6CAB,U+6CB3,U+6CD5,U+6CE8,U+6D25,U+6D3B,U+6D41,U+6D4B,U+6D4F,U+6D6A,U+6D6E,U+6D77,U+6D88,U+6DE1,U+6DFB,U+6E05,U+6E10,U+6E2F,U+6E32,U+6E38,U+6E90,U+6EAF,U+6ED1,U+6EDA,U+6F14,U+6F2B,U+6F6E,U+6FC0,U+7075,U+70B8-70B9,U+70E7,U+70ED,U+7167,U+7194,U+7206,U+7247-7248,U+724C,U+7269,U+7279,U+72AF,U+72B6,U+72D0,U+72EC,U+731C,U+7387,U+73AF-73B0,U+73BB,U+7403,U+7406,U+7483,U+751F,U+7528,U+7531,U+7535,U+753B,U+754C,U+7559,U+756A,U+767B,U+767D-767E,U+7684,U+76AE,U+76D6,U+76D8,U+76EE,U+76F4,U+76F8,U+7701,U+770B,U+771F,U+773C,U+7740,U+77E5,U+77E9,U+77ED,U+7801,U+7840,U+786C,U+786E,U+78B0,U+78C1,U+793A,U+793E,U+7981,U+79CD,U+79D2,U+79F0,U+79FB,U+7A0B,U+7A0D,U+7A33,U+7A3F,U+7A7A,U+7A7F,U+7A84,U+7A97,U+7ACB,U+7AD9,U+7AEF,U+7B2C,U+7B49,U+7B51,U+7B54,U+7B56,U+7B5B,U+7B7E,U+7B97,U+7BA1,U+7BB1,U+7C07,U+7C7B,U+7C89,U+7C97-7C98,U+7CBE,U+7CCA,U+7CD9,U+7CDF,U+7CFB,U+7D22,U+7EA2,U+7EA6-7EA7,U+7EAF,U+7EB3,U+7EB9,U+7EBF,U+7EC4,U+7EC6,U+7EC8,U+7ECD,U+7ECF,U+7ED3,U+7ED5,U+7ED9,U+7EDC-7EDD,U+7EDF,U+7EE7,U+7EEA,U+7EED,U+7EF4,U+7EFF,U+7F13,U+7F16,U+7F18,U+7F29,U+7F51,U+7F6E,U+7F8E,U+8001,U+8005,U+800C,U+804C,U+8054,U+805A,U+8089,U+80A4,U+80CC,U+80FD,U+811A,U+8154,U+817E,U+81EA,U+81F4,U+820D,U+821E,U+822A,U+8239,U+8272,U+827A,U+8282,U+82B1,U+82F1,U+83B7,U+83DC,U+843D,U+85CF,U+878D,U+884C,U+8865,U+8868,U+88AB,U+88C5,U+88F8,U+897F,U+8981,U+8986,U+89C1-89C2,U+89C4,U+89C6,U+89C8-89C9,U+89D2,U+89E3,U+89E6,U+8A00,U+8B66,U+8BA1,U+8BA4,U+8BA8-8BA9,U+8BAF-8BB0,U+8BB2,U+8BB8,U+8BBA,U+8BBE-8BBF,U+8BC1,U+8BC4,U+8BCD,U+8BD1,U+8BD5,U+8BDD,U+8BE5-8BE6,U+8BED,U+8BF4,U+8BF7,U+8BFB,U+8BFE,U+8C03,U+8C22,U+8C31,U+8D1F,U+8D23,U+8D25-8D26,U+8D28,U+8D34,U+8D39,U+8D44,U+8D56,U+8D5E,U+8D70,U+8D77,U+8D85,U+8DD1,U+8DE8,U+8DEF,U+8DF3,U+8EAB,U+8F66,U+8F68,U+8F6C,U+8F6E,U+8F7D,U+8F85,U+8F91,U+8FA8,U+8FB0,U+8FB9,U+8FBE,U+8FC7,U+8FD0-8FD1,U+8FD4,U+8FD8-8FD9,U+8FDB-8FDC,U+8FDE,U+8FED,U+8FF9,U+9000-9002,U+9006,U+9009,U+900F-9010,U+9012,U+901A,U+901F-9020,U+9047,U+904D,U+9053,U+9057,U+907F,U+90A3,U+90AE,U+90BB,U+90E8,U+90FD,U+914D,U+9192,U+91CC-91CD,U+91D1,U+9488-9489,U+94AE,U+94F6,U+94FE,U+9500,U+9519,U+952E,U+955C,U+957F,U+95E8,U+95EA,U+95ED-95EF,U+95F4,U+95F8,U+9605,U+961F,U+9635,U+963B,U+9645,U+9648,U+964D,U+9650,U+9662,U+9664,U+968F-9690,U+96BE,U+96C6,U+96D5,U+96E8,U+96F6,U+9700,U+9752,U+9759,U+975E,U+9760,U+9762,U+97F3,U+9875-9876,U+9879-987B,U+9884,U+9886,U+9891,U+9897-9898,U+98D8,U+98DE,U+9996,U+9A7B,U+9A8C,U+9AA8,U+9AD8,U+9ED1,U+9ED8,U+9F84,U+FF08-FF09,U+FF0B-FF0C,U+FF1A-FF1B,U+FF1F;
}
@font-face{
  font-family:'Noto Sans SC';
  src:url('../fonts/noto-sans-sc-rest.woff2') format('woff2');
  font-weight:200 900;font-style:normal;font-display:swap;
  unicode-range:U+3000,U+4E13,U+4E25,U+4E34,U+4E49,U+4E4E,U+4E94-4E95,U+4ECA,U+4ED3,U+4EE4,U+4F2A,U+4F3C,U+4F59,U+4F9B,U+4FBF,U+4FD7,U+501F,U+503E,U+5047,U+5076,U+513F,U+5141,U+5143,U+5145,U+517C,U+51B0,U+51B2-51B3,U+51B5,U+51B7,U+51ED,U+51FD,U+5220,U+52BF,U+52DF,U+52FE-52FF,U+5317,U+5339,U+5386,U+53CA,U+542B,U+5468,U+54C8,U+5546,U+5584,U+56FA,U+5708,U+574F,U+57C3,U+589E,U+592A,U+5939-593A,U+5982,U+59A5,U+5BF8,U+5C04,U+5C18,U+5C3A,U+5C40,U+5CA9,U+5D4C,U+5E0C,U+5E42,U+5E7F,U+5F02-5F03,U+5F3A,U+5F8B,U+5FC3,U+60A8,U+6233,U+6241,U+627E-627F,U+6297,U+62A4,U+62D2,U+62DB,U+63A7,U+63CF,U+641E,U+642C,U+64A4,U+64CD,U+652F,U+6548,U+6559,U+6562,U+65BD,U+65CB,U+65E2,U+6613,U+6620,U+665A,U+666E,U+6670,U+6674,U+6696,U+66FE,U+670B,U+672F,U+677E,U+679A,U+679C,U+6811,U+6846,U+68AF,U+692D,U+6982,U+69DB,U+6A59,U+6B62,U+6BCD,U+6C49,U+6C60,U+6CBF,U+6D1E,U+6DA1,U+6DF1,U+6DF7,U+6E29,U+6E4D,U+6EE1,U+6F0F,U+706B,U+70BD,U+7136,U+7231,U+7236,U+73A9,U+7530,U+7532-7533,U+7565,U+7591,U+7728,U+77EE,U+7968,U+79BB,U+79C1,U+79CB,U+79D1,U+79EF,U+7A81,U+7AE0,U+7B14,U+7B26,U+7B80,U+7BAD,U+7BC7,U+7C92,U+7D20,U+7D2B,U+7D2F,U+7EA0,U+7EB5,U+7F20,U+7F3A,U+7F72,U+7FA4,U+7FFB,U+8003,U+8017,U+8111,U+81C2,U+81F3,U+826F,U+82CF,U+8303,U+8350,U+84DD,U+8680,U+88C2,U+8BAE,U+8BC6,U+8BDA,U+8BE2,U+8BEF,U+8BFA,U+8C01,U+8C61,U+8D8B,U+8DB3,U+8E29,U+8F7B,U+8F89,U+8F93,U+8FA9,U+8FC1,U+8FDD,U+8FF0,U+9017,U+91C7,U+91CA,U+91CE-91CF,U+949F,U+9508,U+952F,U+95F9,U+9632,U+9636,U+963F,U+9644,U+9694,U+96B6,U+989C-989D,U+98CE,U+9970,U+9A73,U+9E23,U+9F50,U+9F7F,U+FF0F,U+FF5C;
}
/* ★ 2026-11-13：衬线体按需子集，从 501KB 砍到 75KB。
   实测全站衬线（--serif）只出现在三处：hero 标题的「坐标」、宣言引文、作品引文，
   合计 **54 个汉字**（tools/make-serif-accent-subset.py 扫描 <em>/<blockquote>/quote 类）。
   旧做法按「整站全部 1529 字」子集化 → 501KB，等于为了 54 个字下 500KB。
   现在只裁这 54 个字 + 常用标点/数字/拉丁（共 253 字号位）→ **75KB**。
   仍然只在桌面（>680px）加载：移动端用系统衬线，省掉这 75KB。
   防漏字：--serif 的后备链是 'Songti SC','SimSun',serif，缺字回退系统字体不会出方块。 */
@media (min-width: 681px) {
  @font-face{
    font-family:'Noto Serif SC';
    src:url('../fonts/noto-serif-sc-accent.woff2') format('woff2');
    font-weight:200 900;font-style:normal;font-display:swap;
  }
}
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --bg:#05070d;
  --bg-soft:#080b13;
  --bg-panel:#0a0e17;
  --ink:#f5f2e9;
  --ink-dim:#d2d0c8;
  --muted:#9297a4;
  --faint:#656a78;
  --line:rgba(245,242,233,.13);
  --line-soft:rgba(245,242,233,.075);
  /* white-dwarf interaction palette — selection, buttons, active states */
  --acid:#e9f2ff;
  --acid-dim:#b8cbe8;
  --acid-soft:rgba(213,231,255,.12);
  --wd-blue:#9dc0ff;
  --wd-deep:#6f8fc4;
  --wd-glow:rgba(170,205,255,.28);
  --gold:#ffd27a;
  --ice:#8fe3ff;
  --violet:#b7a6ff;
  --rose:#ff9bb0;
  --ember:#ff7a45;
  --star:#d8ff3e;
  --sans:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --serif:'Noto Serif SC','Songti SC','SimSun',serif;
  --latin:'Space Grotesk','Noto Sans SC',sans-serif;
  --latinserif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --pad:clamp(20px,4.4vw,76px);
  --max:1560px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
section[id],#top{scroll-margin-top:76px}
body{
  margin:0;color:var(--ink);
  background:
    radial-gradient(ellipse 72% 52% at 72% 4%,rgba(110,145,210,.13),transparent 64%),
    radial-gradient(ellipse 58% 46% at 12% 38%,rgba(134,112,190,.08),transparent 72%),
    radial-gradient(ellipse 80% 40% at 52% 88%,rgba(92,128,190,.07),transparent 70%),
    var(--bg);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:1px solid #dbe8ff;outline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,blockquote,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
em,i{font-style:normal}
::selection{background:#dbe8ff;color:#04070f;text-shadow:none}
/* 滚动条：全站统一（细 / 低对比 / hover 提亮）——含 modal、pre、admin、studio */
html{scrollbar-width:thin;scrollbar-color:rgba(184,203,232,.28) rgba(8,9,12,.55)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(8,9,12,.55);border-radius:20px}
::-webkit-scrollbar-thumb{background:rgba(184,203,232,.22);border-radius:20px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(213,231,255,.46);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

.mono{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.noscript{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:var(--bg);font-size:16px;color:var(--ink)}

/* ---------- global texture ---------- */
.grain{
  position:fixed;inset:-10%;z-index:95;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  background-size:300px 300px;mix-blend-mode:overlay;
}
.starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.92}
.rule-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.42;
  background-image:linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
}
main,footer{position:relative;z-index:1}

/* ---------- cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:210;pointer-events:none;opacity:0;will-change:transform}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px rgba(213,231,255,.6)}
.cursor-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid rgba(213,231,255,.5);display:grid;place-items:center;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s,opacity .3s;
}
.cursor-ring span{font-family:var(--mono);font-size:7px;letter-spacing:.12em;color:#0a0b0d;opacity:0;transform:scale(.6);transition:.3s}
html.has-cursor .cursor-dot,html.has-cursor .cursor-ring{opacity:1}
html.has-cursor body,html.has-cursor a,html.has-cursor button,html.has-cursor input,html.has-cursor textarea,html.has-cursor select,html.has-cursor [tabindex]{cursor:none}
.cursor-ring.is-hover{width:52px;height:52px;margin:-26px 0 0 -26px;border-color:rgba(213,231,255,.9);background:rgba(213,231,255,.08)}
.cursor-ring.is-view{width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--acid);border-color:var(--acid)}
.cursor-ring.is-view span{opacity:1;transform:none}
.cursor-ring.is-down{width:26px;height:26px;margin:-13px 0 0 -13px}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:130;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--acid),var(--ice));box-shadow:0 0 18px rgba(213,231,255,.5)}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:300;background:var(--bg);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:30px var(--pad) 34px;transition:opacity .9s var(--ease),visibility .9s;
}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
/* ---------- loader：星线汇聚 ---------- */
.loader__mark{transform-origin:60px 60px;will-change:transform}
.loader__rays line{transform-origin:60px 60px}
@keyframes rayIn{
  0%{opacity:0;transform:scale(.55)}
  30%{opacity:1;transform:scale(1)}
  70%{opacity:.7;transform:scale(1.03)}
  100%{opacity:.28;transform:scale(1.06)}
}
.loader__cn{transition:opacity .5s ease}
.loader__en{transition:opacity .5s ease}
@media (prefers-reduced-motion: reduce){.loader__rays{display:none}}
.loader__top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--faint)}
.loader__top #loadPct{color:var(--acid)}
.loader__core{align-self:center;display:flex;flex-direction:column;align-items:center;margin-top:-4vh}
.loader__mark{width:132px;height:132px;filter:drop-shadow(0 0 40px rgba(213,231,255,.18));animation:breathe 3s ease-in-out infinite}
.loader__cn{margin-top:34px;font-size:13px;letter-spacing:.66em;padding-left:.66em;color:var(--ink)}
.loader__en{margin-top:10px;font-family:var(--mono);font-size:8px;letter-spacing:.28em;color:var(--faint)}
/* 2026-11-13：中间那行是「品牌副标题」（固定不动），
   底部状态行才是「此刻在干什么」（会变化）。
   把副标题压暗，让变化的那行成为视觉焦点，避免两行字互相抢。 */
.loader__core .loader__en{opacity:.55}
/* 2026-11-13：进度条上方的一行状态（此刻在干什么）。
   全部走 CSS 动画：脉冲与三点跳动都是 transform/opacity，合成层完成，
   不触发布局、不占主线程 —— 3D 引擎初始化把主线程占满时，这行动画仍然流畅。 */
.loader__status{
  display:flex;align-items:center;justify-content:center;gap:10px;
  /* 2026-11-13：实测贴着条子才有「条上有个说明」的感觉。
     原来是 12px 下边距，但被 .loader 的 space-between 推到画面中部偏下，离条很远。
     这里把它和条子绑成一个整体（见 .loader__foot）。 */
  margin:0 0 9px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--faint);min-height:14px;
}
.loader__foot{padding-bottom:2px}
.loader__step{color:var(--ink);opacity:.92;transition:opacity .3s ease;font-size:10px}
.loader__step.is-swap{opacity:0}
.loader__dots{display:inline-flex;align-items:center;gap:3px}
.loader__dots i{
  width:3px;height:3px;border-radius:50%;background:var(--acid);opacity:.25;
  animation:loaderDot 1.35s ease-in-out infinite;
}
.loader__dots i:nth-child(2){animation-delay:.18s}
.loader__dots i:nth-child(3){animation-delay:.36s}
@keyframes loaderDot{0%,70%,100%{opacity:.22;transform:scale(.82)}35%{opacity:1;transform:scale(1)}}
.loader__eta{color:var(--faint);opacity:.6;letter-spacing:.2em}

/* 进度条升级：细扫光 + 端头亮点，同样只用 transform，且强化「一直在动」的感知 */
/* 2026-11-13：1px → 2px。实测 1px 在 1440 宽屏上几乎看不见，
   「进度条上有说明」的前提是条子本身要看得见。 */
.loader__bar{height:2px;background:rgba(233,242,255,.13);overflow:hidden;position:relative;border-radius:2px}
.loader__bar i{
  display:block;height:100%;width:100%;background:var(--acid);
  transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 14px var(--acid);
  will-change:transform;
}
/* 条上方的扫光：一条比底色亮的窄带持续横移，
   即使真实进度暂时不动（等 3D 编译），视觉上也一直在走。 */
.loader__bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(233,242,255,.85),transparent);
  width:32%;opacity:.5;
  animation:loaderSweep 1.9s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes loaderSweep{0%{transform:translateX(-100%)}100%{transform:translateX(315%)}}
@media (prefers-reduced-motion: reduce){
  .loader__bar::after{animation:none;opacity:0}
  .loader__dots i{animation:none;opacity:.5}
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.94}50%{transform:scale(1.035);opacity:1}}

/* ---------- header ---------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:120;height:88px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 var(--pad);transition:height .5s var(--ease),background .5s,border-color .5s,backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.site-head.is-scrolled{
  height:70px;background:rgba(6,7,10,.74);border-bottom-color:var(--line-soft);
  -webkit-backdrop-filter:blur(20px) saturate(120%);backdrop-filter:blur(20px) saturate(120%);
}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand__mark{width:38px;height:38px;color:var(--ink);transition:transform .8s var(--ease)}
.brand:hover .brand__mark{transform:rotate(90deg)}
.brand__txt{display:flex;flex-direction:column;line-height:1.1}
.brand__txt b{font-size:15px;font-weight:700;letter-spacing:.1em}
.brand__txt i{font-family:var(--mono);font-size:7px;letter-spacing:.26em;color:var(--faint);margin-top:5px}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.nav a{position:relative;display:flex;align-items:flex-start;gap:3px;font-size:13px;letter-spacing:.04em;color:var(--muted);transition:color .3s;padding:6px 0}
.nav a.nav-nebula{color:var(--ice)}
.nav a.nav-nebula sup{color:var(--ice);opacity:.75;font-size:9px}
.nav a sup{font-family:var(--mono);font-size:7px;color:var(--acid);opacity:.55;line-height:1;margin-top:1px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--acid);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.nav a:hover,.nav a.is-active{color:var(--ink)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.head-right{display:flex;align-items:center;gap:20px;flex:0 0 auto}
.clock{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--faint);font-variant-numeric:tabular-nums}
.menu-btn{display:none;width:40px;height:40px;position:relative;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px}
.menu-btn span{display:block;width:20px;height:1px;background:var(--ink);transition:transform .4s var(--ease),width .4s,opacity .3s}
.menu-btn span:last-child{width:13px}
.menu-btn:hover span:last-child{width:20px}

/* ---------- menu overlay ---------- */
.menu{position:fixed;inset:0;z-index:140;background:#07080b;visibility:hidden;opacity:0;transition:opacity .5s var(--ease),visibility .5s;overflow:auto}
.menu.is-open{visibility:visible;opacity:1}
.menu__inner{min-height:100%;display:flex;flex-direction:column;padding:26px var(--pad) 32px}
.menu__head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line-soft);padding-bottom:18px}
.menu__close{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--muted)}
.menu__nav{margin:auto 0;padding:6vh 0}
.menu__nav a{display:grid;grid-template-columns:54px 1fr auto;align-items:baseline;gap:8px;padding:18px 0;border-bottom:1px solid var(--line-soft);transition:padding-left .5s var(--ease),color .3s}
.menu__nav a em{font-family:var(--mono);font-size:9px;color:var(--acid);font-style:normal}
.menu__nav a span{font-size:clamp(28px,6vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.menu__nav a i{font-family:var(--mono);font-size:8px;letter-spacing:.2em;color:var(--faint)}
.menu__nav a:hover{padding-left:12px;color:var(--acid)}
.menu__foot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:var(--faint);border-top:1px solid var(--line-soft);padding-top:18px}

/* ---------- buttons / links ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:16px;
  height:52px;padding:0 26px;border-radius:100px;font-size:13px;letter-spacing:.06em;
  white-space:nowrap;overflow:hidden;transition:background .4s,color .4s,border-color .4s,transform .4s var(--ease),box-shadow .5s;
}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.22) 48%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn:hover::before{transform:translateX(120%)}
.btn--acid{
  background:linear-gradient(135deg,#ffffff 0%,#eaf3ff 48%,#cfe0ff 100%);
  color:#04070f;font-weight:700;
  box-shadow:0 0 0 1px rgba(226,238,255,.62),0 12px 44px rgba(168,202,255,.20),inset 0 1px 0 rgba(255,255,255,.95);
}
.btn--acid:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(240,247,255,.9),0 18px 58px rgba(168,202,255,.32),0 0 34px rgba(210,232,255,.22),inset 0 1px 0 #fff}
.btn--ghost{border:1px solid rgba(226,238,255,.26);color:var(--ink);background:rgba(255,255,255,.012)}
.btn--ghost:hover{border-color:rgba(226,238,255,.72);color:#fff;background:rgba(220,236,255,.07);transform:translateY(-2px);box-shadow:0 0 30px rgba(170,205,255,.13)}
.btn--line{border:1px solid var(--line);height:42px;padding:0 18px;font-size:11px;letter-spacing:.1em;color:var(--ink)}
.btn--line:hover{border-color:var(--acid);color:var(--acid)}
.btn--line svg{width:12px;height:12px;transition:transform .4s var(--ease)}
.btn--line:hover svg{transform:translate(2px,-2px)}
.btn--sm{gap:10px}
.btn--wide{width:100%;justify-content:space-between;padding:0 24px}
.btn__arrow{font-size:15px;line-height:1;transition:transform .4s var(--ease)}
.btn:hover .btn__arrow{transform:translate(3px,-3px)}
.btn__dot{width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 0 rgba(213,231,255,.4);animation:pulse 2.4s infinite}
.link-arrow{display:inline-flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.04em;color:var(--ink-dim);transition:color .3s}
.link-arrow span:last-child{font-size:16px;transition:transform .4s var(--ease)}
.link-arrow:hover{color:var(--acid)}
.link-arrow:hover span:last-child{transform:translate(4px,-4px)}
.link-arrow.is-static{color:var(--muted);cursor:default}
.link-arrow.is-static:hover{color:var(--muted)}
.link-arrow.is-static:hover span:last-child{transform:none}

/* ---------- 触控可达性（2026-11-13） ----------
   实测移动端有大量 35px 高的导航项与 15px 的关闭按钮 —— 远低于 44px 的可点下限，
   拇指实际操作时经常点不中或点错。统一抬到 44px，并且只加「隐形扩大区」，
   不改视觉尺寸（用 ::after 撑开命中范围），避免把排版撑变形。 */
/* 判定条件用「窄屏 或 触屏」而不是只用 pointer:coarse。
   原因：pointer 媒体特性依赖浏览器上报的输入能力，部分安卓 WebView / 桌面窄窗口
   不会报 coarse，但用户在窄屏上一样是拇指操作。宽窄与输入方式取并集最稳。 */
@media (max-width: 900px), (pointer: coarse) {
  .nav a, .menu__nav a, .footer__link, .chip, .tag-chip,
  .works__random, .work__page, .like-btn, .link-arrow,
  .modal__close, .works__search button, .fav-bar__btn {
    position: relative;
  }
  .brand, .menu-btn, .menu__close, .head-right .btn,
  .hero__quick a, .program__arrow, .empty-card__cta, .works__more-btn,
  .galaxy__toggle, .galaxy__back, .gx3-hud__trigger, .gx3-hud__reset,
  .follow-btn, .creator-chip, .galaxy__nav, .gx3-overlay button {
    position: relative;
  }
  .brand::after, .menu-btn::after, .menu__close::after, .head-right .btn::after,
  .hero__quick a::after, .empty-card__cta::after, .works__more-btn::after,
  .galaxy__toggle::after, .galaxy__back::after, .gx3-hud__trigger::after,
  .gx3-hud__reset::after, .follow-btn::after, .creator-chip::after,
  .galaxy__nav::after, .gx3-overlay button::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
    pointer-events: auto;
  }
  /* 星图上的控件彼此挨得近，扩大命中区会互相盖住 —— 用 min 高度而非固定 44，
     并且只在窄屏给足间距，避免「点了 A 触发 B」 */
  .galaxy__toggle::after, .galaxy__back::after { height: 40px }
  .nav a::after, .menu__nav a::after, .footer__link::after, .chip::after,
  .tag-chip::after, .works__random::after, .work__page::after, .like-btn::after,
  .link-arrow::after, .modal__close::after, .works__search button::after,
  .fav-bar__btn::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
    /* 只扩大命中区，不参与布局、不影响视觉 */
    pointer-events: auto;
  }
  /* 关闭按钮/搜索清除这类圆形小按钮再加宽一点 */
  .modal__close::after, .works__search button::after {
    left: 50%; right: auto; width: 44px; transform: translate(-50%, -50%);
  }
  /* 触屏去掉 hover 位移，避免点一下卡片就跳 */
  .work:hover { transform: none; }
  .chip:hover { transform: none; }
  .btn--acid:hover, .btn--ghost:hover { transform: none; }
}

/* ---------- reveal ---------- */
html.js .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--delay,0s)}
html.js .reveal.is-in{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  padding:112px var(--pad) 0;overflow:hidden;
}
.hero__gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 64% 42%,rgba(6,7,10,0) 0%,rgba(6,7,10,.18) 55%,rgba(6,7,10,.82) 100%),
    linear-gradient(180deg,rgba(6,7,10,.62) 0%,rgba(6,7,10,0) 26%,rgba(6,7,10,0) 68%,var(--bg) 100%);
}
.hero__inner{
  position:relative;z-index:2;flex:1;width:100%;max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:center;gap:clamp(20px,4vw,70px);padding:20px 0 10px;
}
.hero__copy{max-width:800px}
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--ink-dim);text-transform:uppercase}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--acid);flex:0 0 auto;box-shadow:0 0 0 0 rgba(213,231,255,.55);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(213,231,255,.5)}70%{box-shadow:0 0 0 8px rgba(213,231,255,0)}100%{box-shadow:0 0 0 0 rgba(213,231,255,0)}}
.hero__title{
  margin:24px 0 28px;font-weight:900;font-size:clamp(54px,7.7vw,126px);
  line-height:.98;letter-spacing:-.06em;
}
.hero__line{display:flex;align-items:baseline;gap:.02em}
.hero__line--2{margin-top:.02em}
.hero__title .ch{display:inline-block;transform:translateY(118%);opacity:0;transition:transform 1.15s var(--ease),opacity .5s;transition-delay:var(--d,0s)}
.hero__title em{font-family:var(--serif);font-weight:400;font-size:.92em;letter-spacing:-.015em;display:inline-block;transform:translateY(118%);opacity:0;transition:transform 1.2s var(--ease),opacity .5s;transition-delay:var(--d,.3s);padding-right:.05em}
html.is-loaded .hero__title .ch,html.is-loaded .hero__title em{transform:none;opacity:1}
.hero__title .comma{color:var(--acid)}
.hero__title .outline{color:transparent;-webkit-text-stroke:1.5px rgba(243,243,236,.72)}
.hero__title .spark{display:inline-block;font-size:.3em;color:var(--acid);margin-left:.14em;transform:translateY(-1.55em) scale(.8);opacity:0;transition:opacity .5s .9s,transform 1.1s .85s var(--ease)}
html.is-loaded .hero__title .spark{opacity:1;transform:translateY(-1.55em) scale(1);animation:spin 12s linear infinite}
.hero__lede{font-size:15px;line-height:2.05;color:var(--muted);max-width:540px;letter-spacing:.01em;opacity:0;transform:translateY(20px);transition:opacity .9s .75s,transform .9s .75s var(--ease)}
html.is-loaded .hero__lede{opacity:1;transform:none}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;opacity:0;transform:translateY(20px);transition:opacity .9s .9s,transform .9s .9s var(--ease)}
html.is-loaded .hero__actions{opacity:1;transform:none}
.hero__foot{
  position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-top:1px solid var(--line-soft);padding:18px 0 26px;
}
.hero__figures{display:flex;gap:clamp(18px,3vw,46px)}
.hero__figures span{display:flex;align-items:baseline;gap:8px}
.hero__figures b{font-family:var(--latin);font-weight:500;font-size:21px;line-height:1;color:var(--ink)}
.hero__figures i{font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:var(--faint)}
.hero__coords{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--mono);font-size:8px;letter-spacing:.16em;line-height:1.9;color:var(--faint)}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:9px;font-family:var(--mono);font-size:7px;letter-spacing:.24em;color:var(--faint);transition:color .3s}
.scroll-cue:hover{color:var(--acid)}
.scroll-cue i{position:relative;display:block;width:1px;height:42px;background:var(--line);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:12px;background:var(--acid);animation:scrollLine 2.2s var(--ease-io) infinite}
@keyframes scrollLine{0%{transform:translateY(-14px)}60%,100%{transform:translateY(46px)}}

/* ---------- hero cluster（校园星系团 · 3D 层容器） ---------- */
.cluster{position:relative;width:100%;max-width:640px;aspect-ratio:1/.92;overflow:hidden;isolation:isolate;border:1px solid rgba(213,231,255,.16);background:radial-gradient(ellipse at 50% 48%,rgba(46,62,104,.20) 0%,rgba(9,12,22,.66) 56%,rgba(4,6,12,.92) 100%);box-shadow:inset 0 0 90px rgba(2,4,10,.68)}
.cluster__corner{position:absolute;z-index:3;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:7px;letter-spacing:.18em;color:rgba(231,239,252,.46);text-transform:uppercase;pointer-events:none}
.cluster__corner--tl{top:16px;left:18px}
.cluster__corner--tr{top:16px;right:18px;color:rgba(231,239,252,.34)}
.cluster__corner--bl{bottom:16px;left:18px}
.cluster__corner--br{bottom:16px;right:18px}
.g-key--nebula{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,rgba(233,242,255,.9),rgba(183,166,255,.25) 60%,transparent 72%)}

/* ---------- creators: 3D 星系层 ---------- */
.galaxy3d{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .6s cubic-bezier(.22,1,.36,1);pointer-events:none}
/* 3D 展开时背景与页面无缝，画布左右用 --pad 做软收边（见下方 mask） */
.galaxy3d.is-on{opacity:1;pointer-events:auto}
.galaxy-wrap.is-3d .galaxy__corner--bl,.galaxy-wrap.is-3d .galaxy__corner--br{bottom:66px}
.galaxy-wrap.is-3d .galaxy__hint{display:block;bottom:28px;font-size:7px;letter-spacing:.06em;color:rgba(231,239,252,.52)}
.galaxy3d canvas{width:100%!important;height:100%!important;display:block;outline:none}
/* 曲率引擎落地的白闪层（由 galaxy-engine.syncWarpFlash 驱动 opacity）。
   色 #eaf4ff 而非纯白：纯白经 ACES 会泛黄；mix-blend-mode:screen 让它只提亮不遮黑。 */
.gx3-flash{
  position:absolute;inset:0;z-index:9;opacity:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,#eaf4ff 0%,#dceaff 58%,rgba(220,234,255,.35) 100%);
  mix-blend-mode:screen;
  transition:opacity .09s linear;
  will-change:opacity;
}
.is-3d #galaxy{opacity:0;pointer-events:none;transition:opacity .6s}
.galaxy__toggle{position:absolute;z-index:6;right:18px;top:44px;pointer-events:auto;font-family:var(--mono);font-size:7px;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;border-radius:100px;cursor:pointer;color:rgba(233,242,255,.72);background:rgba(8,11,19,.72);border:1px solid rgba(213,231,255,.22);transition:all .25s}
.galaxy__toggle:hover,.galaxy__toggle:focus-visible{color:#05070d;background:var(--acid);border-color:var(--acid);outline:none}
.galaxy__toggle[aria-pressed="false"]{color:rgba(233,242,255,.42);border-color:rgba(213,231,255,.12)}
@media (max-width:680px){.galaxy__toggle{right:12px;top:40px;font-size:6px;padding:5px 9px}}
/* 「返回上一级」：紧贴 #galaxy3dBtn 左侧、同一水平线（同一个 top）。
   left:auto 去掉原生 button 的默认居中倾向，right 用 calc 让右侧边缘自动咬住
   切换按钮左侧 —— 切换按钮文案（2D 平面图 / 3D 星系 / 抬升视角… / 展平中…）变宽时，
   返回键会跟着一起左移，两者永远留 8px 间隙且不重叠。
   窄屏同样用 calc，并额外夹 max-width，保证不越过 .galaxy-wrap 左边界、不压 #galaxyCode。 */
.galaxy__back{position:absolute;z-index:6;right:calc(18px + 74px + 8px);top:44px;left:auto;pointer-events:auto;display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:7px;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;border-radius:100px;cursor:pointer;color:rgba(233,242,255,.72);background:rgba(8,11,19,.72);border:1px solid rgba(213,231,255,.22);transition:all .25s;-webkit-tap-highlight-color:transparent;max-width:calc(100% - 18px - 74px - 8px - 8px)}
.galaxy__back:hover,.galaxy__back:focus-visible{color:#05070d;background:var(--acid);border-color:var(--acid);outline:none}
.galaxy__back__ico{font-size:10px;line-height:1;margin-top:-1px;letter-spacing:0}
.galaxy__back.is-off,.galaxy__back[hidden]{display:none}
/* 3D 覆盖层亮起时，切换按钮被 .gx3-below 挪到右下角 —— 返回键跟着一起挪，
   保持同一水平线与左侧间距，否则会留在右上角压住覆盖层关闭按钮。 */
.galaxy__back.gx3-below{top:auto!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;right:calc(14px + 74px + 8px)!important}
@media (max-width:680px){
  .galaxy__back{right:calc(12px + 60px + 6px);top:40px;font-size:6px;padding:5px 9px;max-width:calc(100% - 12px - 60px - 6px - 8px)}
  .galaxy__back.gx3-below{right:calc(12px + 60px + 6px)!important}
}

/* ---------- 未完成作品徽标 ---------- */
.work__badge--prog{margin-left:6px;color:#ffd27a;border-color:rgba(255,210,122,.5);background:rgba(255,210,122,.14)}
.work__badge--prog i{background:#ffd27a;box-shadow:0 0 8px rgba(255,210,122,.9)}
.creator-card.is-hollow{border-style:dashed}
/* 动图封面：默认静态海报，hover / 聚焦时才播放动画 */
.work__cover--anim{opacity:0;transition:opacity .45s ease}
.work__cover--anim.is-playing{opacity:1}
@media (prefers-reduced-motion: reduce){.work__cover--anim{display:none}}

/* ---------- orb ---------- */
.hero__visual{display:flex;justify-content:center;align-items:center}
.orb{position:relative;width:100%;max-width:540px;aspect-ratio:1;animation:float 9s ease-in-out infinite}
.orb__svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 70px rgba(255,210,122,.08))}
.orb__spin{transform-origin:260px 260px;animation:spin 80s linear infinite}
.orb__rings{transform-origin:260px 260px;animation:spinReverse 55s linear infinite}
.orb__trail{transform-origin:260px 260px;will-change:transform}
.orb__trail--a{animation:spin 26s linear infinite}
.orb__trail--b{animation:spinReverse 38s linear infinite}
.orb__trail path{filter:drop-shadow(0 0 5px rgba(255,224,163,.4))}
.orb__trail--b path{filter:drop-shadow(0 0 5px rgba(143,227,255,.35))}
.orb__star{transform-origin:260px 260px;animation:starPulse 7s ease-in-out infinite}
.orb__text text{font-family:var(--mono);font-size:9.4px;letter-spacing:.44em;fill:rgba(243,243,236,.44);text-transform:uppercase}
.orb__sat{transform-origin:260px 260px;animation:spin 18s linear infinite}
.orb__tag{position:absolute;font-family:var(--mono);font-size:8px;letter-spacing:.2em;line-height:1.8;color:var(--faint);text-transform:uppercase}
.orb__tag::before{content:"";position:absolute;height:1px;width:30px;background:var(--line);top:10px}
.orb__tag--a{left:-2%;top:20%;padding-left:42px}
.orb__tag--a::before{left:0}
.orb__tag--b{right:-3%;bottom:19%;text-align:right;padding-right:42px}
.orb__tag--b::before{right:0}
.orb__tag--c{right:6%;top:11%;color:var(--gold);font-size:11px}
.orb__tag--c::before{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinReverse{to{transform:rotate(-360deg)}}
@keyframes starPulse{0%,100%{transform:scale(1);opacity:.96}50%{transform:scale(1.028);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- ticker ---------- */
/* 2026-11-13：跑马灯轨道宽 2492px（内容总宽），但 .ticker 有 overflow:hidden 所以不撑页面；
   加 max-width 是为了让 .ticker 自己也不成为 640 的宽度来源（移动端实测出现过）。 */
.ticker{position:relative;z-index:2;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:rgba(8,9,12,.7);height:58px;overflow:hidden;display:flex;align-items:center;max-width:100vw}
.ticker__track{display:flex;width:max-content;animation:marquee 42s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__track span{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--ink-dim);white-space:nowrap;padding-right:1em}
.ticker__track i{color:var(--acid);font-style:normal;margin:0 .6em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   02 sections · manifesto · sectors · works · creators · programs
   ============================================================ */

.section{padding:clamp(96px,11vw,172px) var(--pad);border-top:1px solid var(--line-soft);position:relative}
.s-head{display:flex;align-items:center;gap:16px;margin-bottom:clamp(42px,6vw,78px);font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
#about{--star:#ffd27a}
#sectors{--star:#8fe3ff}
#works{--star:#d8ff3e}
#creators{--star:#b7a6ff}
#programs{--star:#ffd27a}
#join{--star:#8fe3ff}
.s-num{color:var(--star,var(--acid));letter-spacing:.1em}
.s-kicker{white-space:nowrap}
.s-line{flex:1;height:1px;background:var(--line-soft);min-width:20px}
.s-meta{color:var(--faint);text-align:right;white-space:nowrap}
.display{font-weight:900;font-size:clamp(40px,5.3vw,82px);line-height:1.06;letter-spacing:-.045em}
.display em{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;padding-right:.04em}
.section p{color:var(--muted);font-size:14px;line-height:2}

/* ---------- manifesto ---------- */
.manifesto__grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:clamp(40px,7vw,120px);align-items:start}
.manifesto__title{position:sticky;top:120px}
.stamp{margin-top:38px;font-family:var(--mono);font-size:8px;letter-spacing:.26em;line-height:2;color:var(--faint);border-left:1px solid var(--line);padding-left:14px}
.manifesto__body .lead{font-size:19px;line-height:1.95;color:var(--ink-dim);letter-spacing:.01em;margin-bottom:22px;max-width:620px}
.manifesto__body > p:not(.lead){max-width:620px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;margin:44px 0 0}
.stat{display:flex;flex-direction:column;gap:3px}
.stat b{font-family:var(--latin);font-weight:500;font-size:clamp(30px,3.1vw,44px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat span{font-size:11px;color:var(--muted);margin-top:6px}
.stat i{font-family:var(--mono);font-size:7px;letter-spacing:.18em;color:var(--faint);font-style:normal}
.manifesto blockquote{margin:44px 0 12px;border-left:1px solid var(--star);padding-left:22px;font-family:var(--serif);font-size:clamp(20px,2.1vw,28px);line-height:1.7;color:var(--ink);letter-spacing:.01em}
.manifesto cite{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.2em;color:var(--faint);padding-left:23px;margin-bottom:0}

/* ---------- sectors ---------- */
.sectors__intro{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:end;margin-bottom:clamp(42px,5vw,64px)}
.sectors__intro p{max-width:440px;justify-self:end;padding-bottom:8px}
.sectors__grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(34px,5vw,86px);align-items:start}
.sector-list{border-top:1px solid var(--line);list-style:none}
.sector{
  position:relative;display:grid;grid-template-columns:44px minmax(130px,1.02fr) minmax(110px,1fr) 66px 24px;
  align-items:center;gap:16px;padding:26px 0;border-bottom:1px solid var(--line-soft);
  cursor:pointer;transition:padding .55s var(--ease),background .4s;outline:none;
}
.sector::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acid);transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--ease)}
.sector::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(213,231,255,.055),transparent 58%);opacity:0;transition:opacity .45s;pointer-events:none}
.sector.is-active{padding-left:16px}
.sector.is-active::before{transform:scaleY(1)}
.sector.is-active::after{opacity:1}
.sector:focus-visible{outline:1px solid var(--acid);outline-offset:4px}
.sector__idx{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--faint);position:relative;z-index:1}
.sector__name{position:relative;z-index:1}
.sector__name b{display:block;font-size:clamp(19px,1.85vw,25px);font-weight:600;letter-spacing:-.01em;line-height:1.3;transition:color .35s}
.sector__name i{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:.2em;color:var(--faint);margin-top:5px}
.sector__stats{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--acid);margin-top:6px;opacity:.85}
.sector__desc{font-size:12px;color:var(--muted);line-height:1.8;position:relative;z-index:1;transition:color .35s}
.sector__count{font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--faint);text-align:right;position:relative;z-index:1}
.sector__count b{font-family:var(--latin);font-weight:500;font-size:21px;letter-spacing:-.03em;color:var(--ink-dim);margin-right:3px}
.sector__arrow{font-size:16px;color:var(--faint);opacity:.5;transition:transform .45s var(--ease),color .35s,opacity .35s;position:relative;z-index:1;text-align:right}
.sector.is-active .sector__name b,.sector:hover .sector__name b{color:var(--acid)}
.sector.is-active .sector__arrow,.sector:hover .sector__arrow{opacity:1;color:var(--acid);transform:translate(2px,-2px)}
.sector.is-active .sector__desc,.sector:hover .sector__desc{color:var(--ink-dim)}
.sector-preview{position:sticky;top:104px;aspect-ratio:4/5;background:var(--bg-panel);border:1px solid var(--line);overflow:hidden;isolation:isolate}
.sector-preview::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(6,7,10,.1) 0%,transparent 42%,rgba(6,7,10,.72) 100%)}
.sector-preview__art{position:absolute;inset:0;z-index:1}
.sector-preview__art svg{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .5s}
.sector-preview.is-swapping .sector-preview__art svg{opacity:0;transform:scale(1.04)}
.sector-preview__ui{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;padding:20px;gap:12px}
.sector-preview__ui b{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--acid);font-weight:400}
.sector-preview__ui .mono{color:rgba(243,243,236,.72)}
.sector-preview__hint{position:absolute;z-index:3;top:18px;left:20px;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:7px;letter-spacing:.18em;color:rgba(243,243,236,.56)}
.sector-preview__hint i{width:5px;height:5px;border-radius:50%;background:var(--acid);animation:pulse 2.4s infinite}

/* ---------- works ---------- */
.works__head{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:44px}
.filters{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;max-width:560px}
.chip{
  display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 13px;border-radius:100px;
  border:1px solid rgba(243,243,236,.16);font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  color:#b1b4bc;transition:background .35s,color .35s,border-color .35s,transform .3s;white-space:nowrap;
}
.chip sup{font-size:6px;color:var(--acid);line-height:1}
.chip:hover{color:var(--ink);border-color:rgba(213,231,255,.4);transform:translateY(-1px)}
.chip.is-active{background:var(--acid);border-color:var(--acid);color:#08090b;font-weight:700}
.chip.is-active sup{color:#08090b}
/* 2026-11-13：宽屏 3 列 → 4 列。
   9 件作品原来要铺 3 行（单卡 518px→373px），整段占 1.57 屏；
   4 列后是 3 行但每行更矮，同时一屏能看到 8 件，
   「多维作品展示模块占比太大、看不到全局」的问题才算真解决。 */
.work-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
@media(max-width:1180px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.work{
  /* 2026-11-13：4/5 → 4/3.6。原比例下桌面端一张 518px 高，9 张 3 行就吃 2.1 屏，
     整个作品区实测 4.41 屏，用户在屏幕上「看不到全局」。压矮后单张 ≈373px。 */
  position:relative;display:block;width:100%;aspect-ratio:4/3.6;overflow:hidden;
  border:1px solid var(--line-soft);background:var(--bg-panel);text-align:left;isolation:isolate;
  transition:border-color .5s,transform .6s var(--ease);
}
.work:hover{border-color:rgba(213,231,255,.32);transform:translateY(-3px)}
.work__art{position:absolute;inset:0;z-index:0}
.work__art svg{width:100%;height:100%;transition:transform 1.15s var(--ease),filter .8s}
.work:hover .work__art svg{transform:scale(1.045);filter:saturate(1.08)}
.work__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,5,8,.26) 0%,transparent 20%,rgba(4,5,8,.16) 40%,rgba(4,5,8,.74) 58%,rgba(4,5,8,.97) 78%,#05060a 100%);pointer-events:none}
.work__top{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 18px;font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:rgba(243,243,236,.68);text-transform:uppercase}
.work__top b{font-weight:400;color:rgba(243,243,236,.9)}
.work__bottom{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:15px 16px;transition:padding .5s var(--ease)}
.work__cat{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;color:rgba(243,243,236,.5);text-transform:uppercase;margin-bottom:7px}
.work__cat i{display:block;width:4px;height:4px;border-radius:50%;background:var(--acid)}
.work__title{font-size:clamp(16px,1.42vw,20px);font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.work__en{font-family:var(--mono);font-size:7px;letter-spacing:.2em;color:rgba(243,243,236,.42);margin-top:6px}
.work__author{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;padding-top:9px;padding-right:48px;border-top:1px solid rgba(243,243,236,.16);font-size:10px;color:rgba(243,243,236,.66)}
.work__author span:last-child{font-family:var(--mono);font-size:7px;letter-spacing:.12em;color:rgba(243,243,236,.4)}
.work__view{
  position:absolute;z-index:3;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:var(--acid);color:#08090b;font-size:15px;
  opacity:0;transform:translateY(8px) scale(.9);transition:opacity .4s,transform .5s var(--ease);
}
.work:hover .work__view{opacity:1;transform:none}
.works__foot{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line-soft);margin-top:44px;padding-top:20px}
.works__foot .mono{color:var(--faint)}

/* ---------- works: 独立页链接 / 策展徽标 ---------- */
.work-cell{display:flex;flex-direction:column;min-width:0}
.work-cell .work{flex:1 1 auto}
.work__page{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border:1px solid var(--line-soft);border-top:0;
  background:rgba(10,12,17,.66);font-family:var(--mono);font-size:7.5px;letter-spacing:.12em;
  color:var(--muted);transition:color .3s,border-color .3s,background .3s;
}
.work__page span:last-child{font-size:9px;transition:transform .4s var(--ease)}
.work__page:hover{color:var(--acid);border-color:rgba(213,231,255,.34);background:rgba(213,231,255,.06)}
.work__page:hover span:last-child{transform:translate(2px,-2px)}
.work__badge--pin{color:rgba(233,242,255,.92);border-color:rgba(233,242,255,.42);background:rgba(233,242,255,.1)}
.work__badge--pin i{background:var(--acid)}

/* ---------- works: 热门标签 / 状态 / 继续展开 / 收藏 ---------- */
.works__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.tag-chip{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:100px;
  border:1px solid rgba(243,243,236,.14);font-family:var(--mono);font-size:8px;letter-spacing:.08em;
  color:#9aa0ac;transition:background .3s,color .3s,border-color .3s,transform .3s;white-space:nowrap;
}
.tag-chip em{font-style:normal;font-size:6.5px;color:var(--faint);line-height:1}
.tag-chip:hover{color:var(--ink);border-color:rgba(213,231,255,.4);transform:translateY(-1px)}
.tag-chip.is-active{background:var(--acid);border-color:var(--acid);color:#08090b;font-weight:700}
.tag-chip.is-active em{color:#3f4a60}
.works__status{display:block;margin:0 0 16px;font-size:7.5px;letter-spacing:.16em;color:var(--faint);opacity:0;transition:opacity .3s}
.works__status.is-on{opacity:1}
.works__more{display:flex;justify-content:center;margin-top:34px}
.works__more-btn{
  display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 24px;border-radius:100px;
  border:1px solid rgba(243,243,236,.18);font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--ink);
  transition:background .3s,color .3s,border-color .3s,transform .3s;
}
.works__more-btn:hover:not([disabled]){background:var(--acid);border-color:var(--acid);color:#08090b;transform:translateY(-2px)}
.works__more-btn[disabled]{opacity:.5;cursor:default}
.fav-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 18px;font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;color:var(--faint)}
.fav-bar__btn{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--muted);border-bottom:1px solid rgba(243,243,236,.22);padding-bottom:2px;transition:color .3s,border-color .3s}
.fav-bar__btn:hover{color:var(--acid);border-color:var(--acid)}
.fav-confirm{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--sans);font-size:11.5px;letter-spacing:.02em;color:var(--ink)}
.fav-confirm button{font-family:var(--mono);font-size:8px;letter-spacing:.1em;padding:6px 10px;border:1px solid var(--line);border-radius:100px;color:var(--ink-dim);transition:color .3s,border-color .3s}
.fav-confirm button:hover{color:var(--acid);border-color:rgba(213,231,255,.4)}

/* ---------- works: 空状态 ---------- */
.empty-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  border:1px solid var(--line-soft);background:rgba(10,12,17,.6);
  padding:clamp(20px,3vw,34px);max-width:620px;
}
.empty-card__title{font-size:clamp(17px,1.8vw,22px);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.empty-card__text{margin:0;font-size:13px;line-height:1.75;color:var(--muted)}
.empty-card__text--sub{font-size:12px;color:var(--faint)}
.works__empty .empty-card__cta{
  display:inline-flex;align-items:center;gap:10px;margin:8px 0 0;height:38px;padding:0 18px;
  border:1px solid rgba(243,243,236,.2);border-radius:100px;color:var(--ink);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-decoration:none;
  transition:background .3s,color .3s,border-color .3s;
}
.works__empty .empty-card__cta:hover{background:var(--acid);border-color:var(--acid);color:#08090b}
.works__empty .empty-card__cta span:last-child{font-size:11px}

/* ---------- creators ---------- */
.creators__grid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(34px,5vw,78px);align-items:start}
.sky-wrap{position:relative;min-height:clamp(440px,46vw,620px);border:1px solid var(--line);background:radial-gradient(ellipse at 58% 42%,#101521 0%,#080a0f 58%,#06070a 100%);overflow:hidden;isolation:isolate}
.sky-wrap::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 42%,rgba(4,5,8,.55) 100%)}
#sky{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:pan-y}
.sky__corner{position:absolute;z-index:3;font-family:var(--mono);font-size:7px;letter-spacing:.18em;color:rgba(243,243,236,.42);display:flex;align-items:center;gap:7px}
.sky__corner--tl{top:16px;left:18px}
.sky__corner--tl i{width:5px;height:5px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px var(--acid);animation:pulse 2.4s infinite}
.sky__corner--br{bottom:16px;right:18px;color:rgba(243,243,236,.5)}
.sky__corner--br span{color:var(--acid)}
.sky__hint{position:absolute;z-index:3;left:18px;bottom:16px;font-family:var(--mono);font-size:7px;letter-spacing:.18em;color:rgba(243,243,236,.34)}
.creators__panel{display:flex;flex-direction:column;justify-content:flex-start;padding:6px 0;min-width:0}
/* 2026-11-13：右栏跟着画布一起收进视口。
   标题与导语按 vh 收一档，卡片内部再自己滚，整块不再把区块顶到 1158px。 */
.creators__panel > .display{font-size:clamp(30px,min(3.9vw,4.7vh),58px);line-height:1.04;margin-bottom:clamp(8px,1.1vh,16px)}
.creators__panel > p{max-width:430px;margin:clamp(8px,1.2vh,16px) 0 clamp(10px,1.4vh,20px)}
.creator-card{
  position:relative;border:1px solid var(--line);background:linear-gradient(150deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  padding:24px 26px 20px;overflow:hidden;transition:border-color .4s;
}
.creator-card::before{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:var(--acid);opacity:.75}
.creator-card__top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.creator-card__top .mono{color:var(--acid);font-size:7.5px}
.creator-card__const{font-family:var(--mono);font-size:6.5px;letter-spacing:.2em;color:var(--faint)}
.creator-card h3{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:.02em;line-height:1.3;transition:opacity .3s,transform .3s}
.creator-card__en{font-family:var(--mono);font-size:7.5px;letter-spacing:.22em;color:var(--faint);margin-top:5px}
.creator-card__role{font-size:11px;color:var(--muted);margin-top:7px}
.creator-card__quote{font-family:var(--serif);font-size:clamp(14px,1.9vh,17px);line-height:1.75;color:var(--ink-dim);margin-top:clamp(8px,1.4vh,16px);min-height:0}
.creator-card__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line-soft);padding-top:10px;margin-top:12px;font-size:10.5px;color:var(--muted)}
.creator-card__foot a{display:inline-flex;align-items:center;gap:8px;font-size:10px;color:var(--ink);transition:color .3s}
.creator-card__foot a i{font-style:normal;transition:transform .4s var(--ease)}
.creator-card__foot a:hover{color:var(--acid)}
.creator-card__foot a:hover i{transform:translateX(4px)}
.creator-card.is-changing h3,.creator-card.is-changing .creator-card__en,.creator-card.is-changing .creator-card__role,.creator-card.is-changing .creator-card__quote{opacity:0;transform:translateY(5px)}
.creator-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.creator-chip{font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);padding:7px 10px;transition:color .3s,border-color .3s,background .3s}
.creator-chip:hover{color:var(--ink);border-color:rgba(213,231,255,.4)}
.creator-chip.is-active{background:var(--acid);border-color:var(--acid);color:#08090b}

/* ---------- creator galaxies ---------- */
/* 2026-11-13：创作者区块（04）必须能在一屏内看全。
   .section 通用内边距是 clamp(96px,11vw,172px)，1440 宽下实测上下各 158px，
   加上网格 781px → 整段 1191px，超出 900px 视口 291px（用户原话：
   「网页已经把我电脑占满了但是还是看不到这个区块的全貌」）。
   这里只给 #creators 收一档内边距，并把网格高度锁死在「视口 - 顶栏 - 内边距」，
   于是无论右栏内容多少，区块都在一屏内落地。 */
#creators.section{padding-top:clamp(34px,5.2vh,74px);padding-bottom:clamp(30px,4.6vh,66px)}
#creators .creators__grid{height:clamp(392px,calc(100vh - 216px),664px);min-height:0}
/* 右栏自己滚，而不是把标题/引语压扁（压到 5px 等于删了内容） */
#creators .creators__panel{height:100%;min-height:0;overflow-y:auto;padding-right:4px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(213,231,255,.18) transparent}
#creators .creators__panel::-webkit-scrollbar{width:3px}
#creators .creators__panel::-webkit-scrollbar-thumb{background:rgba(213,231,255,.18)}
#creators .creator-card{flex:0 0 auto;padding:18px 22px 16px}
#creators .galaxy-ledger{margin-top:12px}
#creators .galaxy-ledger{overflow-y:auto}

.galaxy-wrap{
  /* 2026-11-13：区块高度必须由「视口」决定，不能由右栏卡片内容撑开。
     旧写法只有 min-height:clamp(520px,48vw,690px)，而 .creators__grid 是
     align-items:stretch —— 右侧资料卡里 9 行作品台账把卡片顶到 831px，
     画布跟着被拉到 1158px（1440x900 实测），整块比屏幕还高，永远看不全。
     现在：画布高度显式跟视口走（58vh，夹在 400~620），右栏卡片自己滚动/折叠。 */
  position:relative;height:clamp(400px,58vh,620px);min-height:0;overflow:hidden;isolation:isolate;
  /* 2026-11-13：3D 初始化被推迟到加载页退场后，中间会有一小段「画布还没东西」。
     这里补一层纯 CSS 的静态星野底（radial-gradient 星点 + 缓慢呼吸的辉光），
     在 WebGL 第一帧出来之前先把画面填住，观感上不出现空块。 */
  /* 去掉外框：与网页背景融合，只留上下两面的虚化收边 */
  border:0;
  background:
    radial-gradient(ellipse at 50% 46%,rgba(58,76,118,.22) 0%,rgba(9,12,22,.52) 46%,rgba(5,7,13,0) 76%),
    radial-gradient(ellipse at 18% 18%,rgba(183,166,255,.10),transparent 46%),
    radial-gradient(ellipse at 82% 76%,rgba(255,210,122,.07),transparent 50%);
  box-shadow:none;
}
/* 2026-11-13：CSS 星野底 —— WebGL 首帧之前的占位，纯合成层，零 JS。
   .is-3d-ready 之后淡出（由 main.js 在引擎挂载后加类）。 */
.galaxy-wrap::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 30%,rgba(233,242,255,.72),transparent 100%),
    radial-gradient(1.2px 1.2px at 34% 62%,rgba(213,231,255,.52),transparent 100%),
    radial-gradient(1.6px 1.6px at 52% 22%,rgba(255,210,122,.55),transparent 100%),
    radial-gradient(1.1px 1.1px at 68% 48%,rgba(233,242,255,.62),transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 34%,rgba(183,166,255,.5),transparent 100%),
    radial-gradient(1.2px 1.2px at 44% 78%,rgba(233,242,255,.44),transparent 100%),
    radial-gradient(1.3px 1.3px at 26% 52%,rgba(213,231,255,.5),transparent 100%),
    radial-gradient(1.2px 1.2px at 74% 72%,rgba(233,242,255,.42),transparent 100%),
    radial-gradient(ellipse at 50% 46%,rgba(58,76,118,.16) 0%,transparent 62%);
  animation:galaxySkelPulse 5.5s ease-in-out infinite;
  transition:opacity .8s ease;
}
.galaxy-wrap.is-3d-ready::after{opacity:0}
@keyframes galaxySkelPulse{0%,100%{opacity:.55}50%{opacity:.92}}
@media (prefers-reduced-motion: reduce){.galaxy-wrap::after{animation:none;opacity:.7}}

/* 上下两面：上下各一条渐变虚化带，把画布边缘化进页面 */
.galaxy-wrap::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,
    var(--bg) 0%,
    rgba(5,7,13,.62) 5%,
    rgba(5,7,13,.16) 12%,
    rgba(5,7,13,0) 19%,
    rgba(5,7,13,0) 81%,
    rgba(5,7,13,.16) 88%,
    rgba(5,7,13,.62) 95%,
    var(--bg) 100%);
}
/* 画布边缘化进页面：上下渐变虚化 + 左右按网页边框(--pad)软收边 */
#galaxy{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);
}
/* 3D 画布：上下虚化 + 左右按网页边框(--pad)软收边，两面同时生效 */
.galaxy3d canvas{
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%),
    linear-gradient(to right,transparent 0,#000 var(--pad),#000 calc(100% - var(--pad)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%),
    linear-gradient(to right,transparent 0,#000 var(--pad),#000 calc(100% - var(--pad)),transparent 100%);
  mask-composite:intersect;
}
#galaxy{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:manipulation;cursor:default}
.galaxy__corner{position:absolute;z-index:3;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:7px;letter-spacing:.18em;color:rgba(255,255,255,.92);text-transform:uppercase;pointer-events:nonetext-transform:uppercase;pointer-events:none}
.galaxy__corner--tl{top:18px;left:20px}
.galaxy__corner--tr{top:18px;right:20px;color:rgba(255,255,255,.85)}
.galaxy__corner--bl{bottom:18px;left:20px}
.galaxy__corner--br{bottom:18px;right:20px}
.galaxy__corner--tl i{width:5px;height:5px;border-radius:50%;background:#f2f7ff;box-shadow:0 0 10px rgba(210,232,255,.9);animation:pulse 2.6s infinite}
.g-key{display:inline-block;width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.g-key--star{background:#f4f8ff;box-shadow:0 0 10px rgba(210,232,255,.85)}
.g-key--planet{border:1px solid rgba(213,231,255,.66);background:transparent}
.galaxy__hint{position:absolute;z-index:3;left:50%;bottom:17px;transform:translateX(-50%);font-family:var(--mono);font-size:7px;letter-spacing:.16em;color:rgba(231,239,252,.28);white-space:nowrap;pointer-events:none}
.galaxy-ledger{margin-top:13px;border-top:1px solid rgba(213,231,255,.12)}
/* 2026-11-13：作品台账是区块超高的头号元凶（1 位创作者 9 行 × 51px = 456px）。
   改成「默认只看主星 + 前 2 颗行星，其余折叠」，并给一个滚动上限：
   卡片高度从此有硬顶，.galaxy-wrap 也不再被它拽长。
   展开按钮由 main.js 注入到 .galaxy-ledger__more，默认隐藏（作品 ≤3 时不显示）。 */
.galaxy-ledger{max-height:none;overflow:visible}
.galaxy-ledger .g-row[data-more]{display:none}
.galaxy-ledger.is-open .g-row[data-more]{display:grid}
.galaxy-ledger.is-open{max-height:min(44vh,380px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(213,231,255,.22) transparent}
.galaxy-ledger::-webkit-scrollbar{width:3px}
.galaxy-ledger::-webkit-scrollbar-thumb{background:rgba(213,231,255,.22)}
.galaxy-ledger.is-open{max-height:min(46vh,420px)}
.galaxy-ledger__more{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  margin-top:2px;padding:8px 0;border:0;background:none;cursor:pointer;
  font-family:var(--mono);font-size:7px;letter-spacing:.14em;color:rgba(213,231,255,.5);
  transition:color .3s;
}
.galaxy-ledger__more:hover,.galaxy-ledger__more:focus-visible{color:#e9f2ff;outline:none}
.galaxy-ledger__more[hidden]{display:none}
.g-row{
  display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;
  padding:7px 0;border-bottom:1px solid rgba(213,231,255,.075);text-align:left;
  transition:background .3s,padding .35s var(--ease);
}
.g-row:hover{background:rgba(222,236,255,.035);padding-left:5px;padding-right:5px}
.g-row__glyph{font-size:11px;color:#f4f8ff;line-height:1;text-shadow:0 0 10px rgba(207,226,255,.8)}
.g-row__main{display:flex;flex-direction:column;gap:1px;min-width:0}
.g-row__main b{font-size:11.5px;font-weight:500;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.g-row__main i{font-family:var(--mono);font-size:6.5px;letter-spacing:.1em;color:var(--faint);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-row__tag{font-family:var(--mono);font-size:6px;letter-spacing:.14em;color:rgba(213,231,255,.45);border:1px solid rgba(213,231,255,.14);padding:3px 5px;white-space:nowrap}
.g-row.is-star .g-row__glyph{color:#fff;font-size:13px}
.g-row.is-star .g-row__main b{color:var(--ink)}
.g-row.is-star .g-row__tag{color:#e9f2ff;border-color:rgba(213,231,255,.32);background:rgba(213,231,255,.06)}
.g-row.is-planet .g-row__glyph{color:transparent;position:relative}
.g-row.is-planet .g-row__glyph::before{content:"";position:absolute;left:3px;top:3px;width:6px;height:6px;border-radius:50%;background:var(--row-accent,var(--ice));box-shadow:0 0 8px var(--row-accent,var(--ice))}
.g-row:hover .g-row__main b{color:#fff}
.g-row:hover .g-row__tag{border-color:rgba(213,231,255,.38);color:#fff}


/* ---------- programs ---------- */
.programs__head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:44px}
.program-list{border-top:1px solid var(--line)}
.program{
  position:relative;display:grid;grid-template-columns:170px minmax(0,1fr) 190px 34px;
  gap:clamp(16px,3vw,40px);align-items:center;padding:30px 4px;border-bottom:1px solid var(--line-soft);
  transition:background .45s,padding .45s var(--ease);cursor:pointer;
}
.program::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--acid);transform:scaleY(0);transition:transform .5s var(--ease)}
.program:hover{background:rgba(255,255,255,.022);padding-left:18px}
.program:hover::before{transform:scaleY(1)}
.program__date b{display:block;font-family:var(--latin);font-weight:400;font-size:clamp(28px,2.7vw,38px);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.program__date span{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:var(--faint);margin-top:8px}
.program__body h3{font-size:clamp(17px,1.7vw,22px);font-weight:600;letter-spacing:-.01em;line-height:1.4;transition:color .3s}
.program:hover .program__body h3{color:var(--acid)}
.program__body p{font-size:11px;color:var(--faint);margin-top:5px;line-height:1.6}
.program__tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;padding:6px 10px;border:1px solid var(--line);color:#aeb2ba;white-space:nowrap}
.tag--live{color:var(--acid);border-color:rgba(213,231,255,.3);background:rgba(213,231,255,.06)}
.tag--live i{width:4px;height:4px;border-radius:50%;background:var(--acid);animation:pulse 2s infinite}
.tag--open{color:var(--ice);border-color:rgba(130,230,255,.32);background:rgba(130,230,255,.05)}
.program__arrow{font-size:17px;color:var(--faint);text-align:right;opacity:.55;transition:transform .4s var(--ease),color .3s,opacity .3s}
.program:hover .program__arrow{transform:translate(3px,-3px);color:var(--acid);opacity:1}

/* ============================================================
   03 join · footer · modal · responsive · motion
   ============================================================ */

/* ---------- join ---------- */
.join{overflow:hidden;background:linear-gradient(180deg,rgba(5,7,13,.92) 0%,rgba(7,8,12,.78) 55%,rgba(8,10,14,.88) 100%)}
.join__glow{position:absolute;right:-8%;top:-10%;width:60vw;height:60vw;max-width:900px;max-height:900px;border-radius:50%;background:radial-gradient(circle,rgba(213,231,255,.09),rgba(213,231,255,.02) 45%,transparent 70%);filter:blur(30px);pointer-events:none}
.join__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(40px,7vw,110px);align-items:start}
.join__copy .display{margin-bottom:26px}
.join__copy > p{max-width:470px}
.join__meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:28px}
.join__meta span{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;border:1px solid var(--line);padding:7px 11px;color:var(--muted)}
.join__note{border-top:1px solid var(--line-soft);margin-top:38px;padding-top:20px;max-width:360px}
.join__note .mono{display:block;font-size:7px;color:var(--faint);margin-bottom:8px}
.join__note p{font-family:var(--latin);font-size:13px;line-height:1.8;color:var(--ink-dim);letter-spacing:.01em}
.join__form{
  position:relative;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--line);padding:clamp(24px,3.2vw,44px);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.join__form::before{content:"";position:absolute;left:0;top:0;width:46px;height:1px;background:var(--acid)}
.field{margin-bottom:22px}
.field label{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:#a3a7b0;margin-bottom:7px}
.field label i{font-style:normal;color:rgba(213,231,255,.45);font-size:7px}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:10px 0 12px;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;
  outline:none;border-radius:0;transition:border-color .35s,background .35s;
}
.field textarea{resize:vertical;min-height:78px}
.field input::placeholder,.field textarea::placeholder{color:#7c808a;opacity:1}
.field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--acid)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:none}
.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:24px}
.select-wrap > span{position:absolute;right:0;bottom:14px;font-size:10px;color:var(--acid);pointer-events:none}
.field select option{background:#0b0d12;color:var(--ink)}
.join__form .btn--acid{margin-top:8px;height:56px;font-size:13px}
.form-note{display:flex;align-items:flex-start;gap:8px;font-family:var(--mono);font-size:8px;letter-spacing:.06em;line-height:1.8;color:#8f939c;margin-top:14px}
.form-note i{width:4px;height:4px;flex:0 0 auto;border-radius:50%;background:var(--acid);margin-top:5px}
.join__form.is-sent .field,
.join__form.is-sent .field-row,
.join__form.is-sent .upload-field,
.join__form.is-sent .prompts,
.join__form.is-sent .form-more,
.join__form.is-sent .form-progress,
.join__form.is-sent .form-error,
.join__form.is-sent .form-note,
.join__form.is-sent button[type="submit"]{display:none}
.form-success{display:none;align-items:flex-start;gap:10px;flex-direction:column;border:1px solid rgba(213,231,255,.3);background:rgba(213,231,255,.06);padding:14px 16px;margin-top:16px}
.join__form.is-sent .form-success{display:flex}
.form-success b{font-size:12px;color:var(--acid);letter-spacing:.04em}
.form-success span{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--muted);line-height:1.8}
.form-success em{color:var(--ink);font-style:normal}

/* ---------- footer ---------- */
.footer{position:relative;z-index:1;background:rgba(5,6,9,.94);border-top:1px solid var(--line);padding:clamp(54px,6.5vw,88px) var(--pad) 26px;overflow:hidden}
.footer__top{display:flex;justify-content:space-between;gap:clamp(30px,6vw,90px);flex-wrap:wrap}
.footer__brand{display:flex;align-items:center;gap:14px}
.footer__brand svg{width:54px;height:54px;color:var(--ink)}
.footer__brand div{display:flex;flex-direction:column;gap:6px}
.footer__brand b{font-size:17px;letter-spacing:.14em;font-weight:700}
.footer__brand span{font-family:var(--mono);font-size:7px;letter-spacing:.22em;color:var(--faint)}
.footer__cols{display:grid;grid-template-columns:repeat(4,minmax(90px,auto));gap:clamp(26px,4.4vw,70px)}
.footer__cols > div{display:flex;flex-direction:column;gap:8px}
.footer__cols .mono{font-size:7px;color:var(--faint);margin-bottom:6px;letter-spacing:.2em}
.footer__cols a,.footer__cols > div > span:not(.mono){font-size:11px;color:var(--muted);line-height:1.5;transition:color .3s,transform .3s}
.footer__cols a:hover{color:var(--acid);transform:translateX(2px)}
.footer__word{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:clamp(50px,7vw,96px) 0 34px;
  font-size:clamp(64px,14.4vw,236px);font-weight:900;line-height:.78;letter-spacing:-.075em;
  color:transparent;-webkit-text-stroke:1px rgba(243,243,236,.19);white-space:nowrap;user-select:none;
}
.footer__word span{font-size:.19em;color:var(--acid);-webkit-text-stroke:0;line-height:1;margin-top:.06em;animation:spin 22s linear infinite}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:18px;font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;color:var(--faint)}
.footer__bottom a{color:var(--ink-dim);transition:color .3s}
.footer__bottom a:hover{color:var(--acid)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;padding:34px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .5s var(--ease),visibility .5s}
.modal.is-open{visibility:visible;opacity:1;pointer-events:auto}
.modal__backdrop{position:absolute;inset:0;background:rgba(3,4,6,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.modal__panel{
  position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  width:min(1120px,100%);height:min(780px,88vh);background:#0a0c11;border:1px solid var(--line);
  transform:translateY(26px) scale(.985);transition:transform .6s var(--ease);overflow:hidden;
}
.modal.is-open .modal__panel{transform:none}
.modal__close{position:absolute;top:16px;right:18px;z-index:6;font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:rgba(243,243,236,.7);background:rgba(6,7,10,.5);border:1px solid rgba(243,243,236,.16);padding:8px 11px;transition:color .3s,border-color .3s}
.modal__close:hover{color:var(--acid);border-color:rgba(213,231,255,.5)}
.modal__art{position:relative;overflow:hidden;background:#080a0f;border-right:1px solid var(--line-soft)}
.modal__art svg{width:100%;height:100%;object-fit:cover}
.modal__art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,10,.18),transparent 30%,transparent 70%,rgba(6,7,10,.3));pointer-events:none}
.modal__body{overflow:hidden;display:flex}
.modal__scroll{overflow-y:auto;padding:clamp(30px,4vw,52px);width:100%;scrollbar-width:thin}
.modal__cat{display:block;font-size:8px;color:var(--acid);margin-bottom:16px}
.modal__body h2{font-size:clamp(32px,3.6vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.15}
.modal__en{font-family:var(--mono);font-size:8px;letter-spacing:.24em;color:var(--faint);margin-top:8px}
.modal__meta{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;margin:24px 0}
.modal__meta div{display:flex;flex-direction:column;gap:2px}
.modal__meta span{font-family:var(--mono);font-size:6.5px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase}
.modal__meta b{font-size:12px;font-weight:500;color:var(--ink-dim)}
.modal__desc{font-size:13px;line-height:2;color:var(--muted)}
.modal__quote{font-family:var(--serif);font-size:18px;line-height:1.8;color:var(--ink-dim);border-left:1px solid var(--acid);padding-left:18px;margin:24px 0}
.modal__tags{display:flex;flex-wrap:wrap;gap:6px}
.modal__tags span{font-family:var(--mono);font-size:7px;letter-spacing:.1em;border:1px solid var(--line);padding:5px 8px;color:var(--muted)}
.modal__foot{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--line-soft);margin-top:30px;padding-top:18px}
.modal__foot .mono{font-size:6.5px;color:var(--faint)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;z-index:220;transform:translate(-50%,16px);
  background:var(--acid);color:#08090b;padding:11px 20px;border-radius:100px;
  font-family:var(--mono);font-size:8px;letter-spacing:.1em;opacity:0;pointer-events:none;
  transition:opacity .35s,transform .45s var(--ease);white-space:nowrap;max-width:90vw;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .nav{gap:20px}
  .hero__title{font-size:clamp(52px,7.4vw,112px)}
  .orb{max-width:470px}
  .sectors__grid{gap:44px}
  .footer__cols{gap:30px}
}
@media (max-width:1100px){
  .clock{display:none}
  .hero__inner{grid-template-columns:1fr;align-items:center}
  .hero__copy{position:relative;z-index:2;max-width:780px}
  .hero__visual{position:absolute;z-index:1;right:-140px;top:50%;transform:translateY(-50%);width:min(520px,52vw);opacity:.3;pointer-events:none}
  .orb__tag{display:none}
  .hero__title{font-size:clamp(54px,8.4vw,110px)}
  .manifesto__grid{grid-template-columns:1fr;gap:54px}
  .manifesto__title{position:static}
  .sectors__grid{grid-template-columns:1fr}
  .sector-preview{display:none}
  .sectors__intro{grid-template-columns:1fr;gap:22px}
  .sectors__intro p{justify-self:start}
  .creators__grid{grid-template-columns:1fr}
  .creators__panel{padding:0}
  .sky-wrap{min-height:clamp(420px,62vw,560px)}
  .join__inner{grid-template-columns:1fr;gap:48px}
  .join__note{max-width:none}
  .program{grid-template-columns:150px minmax(0,1fr) 150px 30px;gap:20px}
  .footer__top{gap:38px}
}
@media (max-width:900px){
  .nav{display:none}
  .menu-btn{display:flex}
  .head-right{gap:14px}
  .hero{min-height:100svh;padding-top:104px}
  .hero__title{font-size:clamp(48px,10.4vw,92px)}
  .hero__lede{font-size:14px;max-width:480px}
  .orb{max-width:430px}
  .works__head{grid-template-columns:1fr;gap:24px}
  .filters{justify-content:flex-start}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(4,1fr)}
  .program{grid-template-columns:132px minmax(0,1fr) 30px;row-gap:12px}
  .program__tags{grid-column:2;justify-content:flex-start}
  .program__arrow{grid-column:3;grid-row:1}
  .footer__word{font-size:15vw}
  .modal{padding:16px}
  .modal__panel{grid-template-columns:1fr;grid-template-rows:minmax(180px,38%) 1fr;height:90vh}
  .modal__art{border-right:0;border-bottom:1px solid var(--line-soft)}
  .modal__close{position:fixed;top:24px;right:24px}
}
@media (max-width:680px){
  :root{--pad:20px}
  .rule-grid{display:none}
  .section{padding-top:84px;padding-bottom:84px}
  .site-head{height:72px}
  .site-head.is-scrolled{height:62px}
  .brand__mark{width:32px;height:32px}
  .brand__txt b{font-size:13px}
  .brand__txt i{font-size:6px}
  .head-right .btn--line{display:none}
  .hero{padding-top:92px}
  .hero__title{font-size:clamp(44px,12.4vw,74px);letter-spacing:-.05em}
  .hero__title .outline{-webkit-text-stroke-width:1px}
  .hero__lede{font-size:13px;line-height:1.95}
  .hero__actions{width:100%;gap:9px;margin-top:26px}
  .hero__actions .btn{height:48px;padding:0 20px;font-size:12px}
  .hero__figures{gap:16px}
  .hero__figures span{flex-direction:column;gap:2px;align-items:flex-start}
  .hero__figures b{font-size:18px}
  .hero__figures i{font-size:6.5px}
  .scroll-cue,.hero__coords{display:none}
  /* 2026-11-13：right:-145px + width:340px 会让视觉层右缘到 515px（视口 390），
     虽然 .hero 有 overflow:hidden 裁掉了，但它仍是横向溢出的来源之一。
     改成贴右不出界的尺寸，视觉仍在，溢出没了。 */
  .hero__visual{right:-60px;top:8px;bottom:auto;transform:none;width:min(300px,78vw);opacity:.12}
  /* 2026-11-13：hero 横向溢出的根因同样是 min-width:auto。
     单列 1fr 时列宽被最宽子项（长标题）顶到 443px，视口只有 390。 */
  .hero__inner{grid-template-columns:minmax(0,1fr)}
  .hero__copy{min-width:0;max-width:100%}
  .hero__title{overflow-wrap:anywhere}
  .hero__foot{padding-bottom:18px}
  .ticker{height:48px}
  .s-head{font-size:7px;gap:10px;margin-bottom:38px}
  .s-meta{display:none}
  .display{font-size:clamp(34px,9.2vw,48px)}
  .manifesto__body .lead{font-size:16px;line-height:1.95}
  .stats{grid-template-columns:1fr 1fr;gap:20px 12px;padding:22px 0;margin-top:34px}
  .manifesto blockquote{font-size:19px}
  .sector{grid-template-columns:30px minmax(0,1fr) 56px 20px;gap:12px;padding:20px 0}
  .sector__desc{display:none}
  .sector__count b{font-size:18px}
  .sector__name b{font-size:19px}
  .sectors__intro{margin-bottom:32px}
  .filters{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:none;gap:6px;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 94%,transparent)}
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;height:30px;padding:0 12px;font-size:8px}
  /* 2026-11-13：移动端从 1 列改 2 列。
     1 列时单卡 4/4.7 比例 ≈ 桌面的两倍高，9 件作品要滚 6 屏以上；
     2 列后一屏能看 4 件，且卡片缩到 ~165×194，字仍可读。 */
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .work{aspect-ratio:4/4.4}
  .work__title{font-size:15px}
  .work__author{padding-right:44px;font-size:9.5px;margin-top:8px;padding-top:7px}
  .work__bottom{padding:12px 12px}
  .work__view{width:34px;height:34px;right:10px;bottom:10px;font-size:12px}
  .work__page{padding:8px 10px;font-size:6.5px}
  .work__view{opacity:1;transform:none;width:40px;height:40px;right:14px;bottom:14px}
  .works__foot{flex-direction:column;align-items:flex-start;gap:10px;margin-top:30px}
  .sky-wrap{min-height:360px}
  .sky__hint{display:none}
  .creator-card{padding:20px}
  .creator-card__quote{min-height:0;font-size:16px}
  .programs__head{display:block;margin-bottom:30px}
  .programs__head .link-arrow{display:none}
  .program{grid-template-columns:1fr auto;padding:22px 0;row-gap:8px}
  .program__date{display:flex;align-items:baseline;gap:8px;grid-column:1 / -1}
  .program__date b{font-size:26px}
  .program__date span{margin-top:0}
  .program__body{grid-column:1 / -1}
  .program__body h3{font-size:17px}
  .program__tags{grid-column:1;justify-content:flex-start}
  .program__arrow{grid-column:2;grid-row:3;align-self:center}
  .program:hover{padding-left:10px}
  /* 2026-11-13：join 段移动端内部有 421px 的内容（表单内边距 + 长串），
     靠 .join 的 overflow:hidden 裁住了不撑页面，但仍会切掉内容。
     这里让内部栅格与输入框都能收缩。 */
  .join__inner{grid-template-columns:minmax(0,1fr);min-width:0}
  .join__form, .join__note{min-width:0}
  .join__form input, .join__form textarea, .join__form select{max-width:100%}
  .join__meta{gap:5px}
  .join__form{padding:22px 18px}
  .join__note{margin-top:26px}
  .footer{padding-top:50px}
  .footer__cols{grid-template-columns:1fr 1fr;gap:26px 20px;width:100%}
  .footer__word{font-size:16.5vw;margin:48px 0 26px;justify-content:flex-start;gap:6px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .modal__body h2{font-size:30px}
  .modal__scroll{padding:26px 22px}
  .modal__quote{font-size:16px}
  .modal__meta{grid-template-columns:1fr 1fr}
  .modal__foot{flex-direction:column;align-items:flex-start}
}
/* ---------- 移动端通用（2026-11-13） ---------- */
@media (max-width:680px){
  /* 刘海屏安全区：底部横条会盖住页脚最后一行 */
  .footer, .join, .works{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .site-head{padding-left:max(var(--pad), env(safe-area-inset-left));padding-right:max(var(--pad), env(safe-area-inset-right))}
  /* 手势滚动更跟手 */
  html{-webkit-overflow-scrolling:touch}
  /* 触屏没有 hover，入场位移缩短，减少「点了没反应」的错觉 */
  html.js .reveal{transform:translateY(16px);transition-duration:.6s}
  /* 长文段落行宽别超舒适区 */
  .manifesto__body .lead, .hero__lede, .join__note p{max-width:36em}
  /* 作品卡封面：移动端禁用 hover 放大（触屏会残留放大状态） */
  .work:hover .work__cover{transform:none;filter:none}
  .work:hover .work__art svg{transform:none;filter:none}
}
@media (max-width:420px){
  .hero__title{font-size:13vw}
  .hero__figures{gap:12px}
  .stats{grid-template-columns:1fr 1fr}
  .footer__brand svg{width:44px;height:44px}
}


/* ---------- galaxy responsive ---------- */
@media (max-width:1100px){
  .galaxy-wrap{height:clamp(380px,56vh,560px)}
  .creators__panel{padding-top:6px}
}
@media (max-width:680px){
  .galaxy-wrap{height:clamp(340px,52vh,460px)}
  .galaxy__corner{font-size:6.5px;letter-spacing:.14em;color:rgba(255,255,255,.92)}
  .galaxy__corner--tl{top:14px;left:15px}
  .galaxy__corner--tr{top:14px;right:15px}
  .galaxy__corner--bl{bottom:14px;left:15px}
  .galaxy__corner--br{display:flex;right:15px;font-size:6px}
  .galaxy__hint{left:15px;right:15px;bottom:31px;transform:none;text-align:left;white-space:normal;line-height:1.7;font-size:6.5px}
  
  .galaxy-ledger{margin-top:14px}
  .g-row{padding:8px 0}
  .g-row__main b{font-size:11px}
}

/* ---------- 宇宙覆盖层：toast / 面包屑（2D 与 3D 共用） ----------
   ★ N1（v3.2 / 2026-11-11）：原来这块在窄屏上是个「有边框 + 左侧亮条 + 阴影」的
     黑浮卡，横在银河正中且永不消失（引擎只加 .is-on，从不摘）。
     现在改为：桌面保持信息卡形态；窄屏改成「贴底、无边框、渐变托底」的字幕条，
     并由 js/overlay-autohide.js 在 15s 无交互后加 .is-idle 淡出。
   .is-idle 只动 opacity/visibility，不动 display —— syncOverlay 依赖元素有布局。 */
#galaxyOverlay{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  font-family:var(--mono,monospace);
  -webkit-user-select:none;user-select:none;
  /* 浮层统一安全边距：角标、toast、hint 都从这里取，不再各写 18/28/44/78 */
  --ov-safe:20px;
  --ov-safe-b:18px;
}
#galaxyOverlay .gx3-toast{
  position:absolute;left:var(--ov-safe);bottom:calc(var(--ov-safe-b) + 34px);max-width:min(72%,400px);
  padding:12px 15px 13px;
  background:rgba(8,11,18,.78);backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(213,231,255,.12);border-left:2px solid rgba(143,227,255,.72);
  box-shadow:0 16px 40px rgba(0,0,0,.46);
  opacity:0;transform:translateY(8px);
  /* 自动隐退：15s 无交互后由 JS 加 .is-idle（opacity+visibility，不动布局） */
  transition:opacity .55s ease,transform .32s ease,visibility .55s;
}
#galaxyOverlay .gx3-toast.is-on{opacity:1;transform:translateY(0)}
#galaxyOverlay .gx3-toast.is-idle{opacity:0;visibility:hidden;transform:translateY(6px)}
/* 刻意不在 .is-idle 上加 aria-hidden：读屏仍能读到当前层信息（状态描述，不是入口）。 */
#galaxyOverlay .gx3-toast__row{display:flex;align-items:center;gap:9px}
#galaxyOverlay .gx3-toast__tag{font-size:7px;letter-spacing:.2em;color:var(--ice);white-space:nowrap}
#galaxyOverlay .gx3-toast__title{font-size:12px;letter-spacing:.04em;color:#eef4ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#galaxyOverlay .gx3-toast__body{margin-top:7px;font-size:10.5px;line-height:1.7;color:rgba(231,239,252,.6)}
#galaxyOverlay .gx3-toast__tip{margin-top:8px;font-size:8px;letter-spacing:.13em;color:rgba(231,239,252,.28)}
#galaxyOverlay .gx3-crumb{
  position:absolute;right:var(--ov-safe);top:74px;font-size:7px;letter-spacing:.18em;
  color:rgba(231,239,252,.42);text-align:right;line-height:1.9;
  transition:opacity .55s ease,visibility .55s;
}
#galaxyOverlay .gx3-crumb b{color:var(--gold);font-weight:500}
#galaxyOverlay .gx3-crumb.is-idle{opacity:0;visibility:hidden}
/* 3D 时底部角标上移，toast 再上移一层，互不遮挡（角标也吃 --ov-safe-b） */
.galaxy-wrap.is-3d #galaxyOverlay .gx3-toast{bottom:calc(var(--ov-safe-b) + 76px)}
/* 3D 时右上角两个胶囊（返回 + 2D 平面图）下沿在 70px，面包屑原来写 70px
   → 实测两者贴边（间隙 0px）。下移 8px，各占一层，互不遮挡。 */
.galaxy-wrap.is-3d #galaxyOverlay .gx3-crumb{top:78px}

/* ── 窄屏（≤680px）：贴底字幕条 ──────────────────────────────
   三个硬约束（对应 N1 的三条根因）：
     ① 不再是有边框浮卡 → 去 border / 左侧亮条 / box-shadow，改渐变托底，
        视觉上是「贴在画面下沿」而不是「飘在银河上」；
     ② 高度压到 ≤22% 视口：padding 收紧 + 字号降档 + body 单行省略；
     ③ 与角标共用同一个 --ov-safe-b，不再各自写 44 / 78。 */
@media (max-width:680px){
  #galaxyOverlay{--ov-safe:12px;--ov-safe-b:calc(10px + env(safe-area-inset-bottom, 0px))}
  #galaxyOverlay .gx3-toast{
    left:0;right:0;bottom:0;max-width:none;
    padding:10px 14px calc(11px + env(safe-area-inset-bottom, 0px));
    border:0;border-left:0;box-shadow:none;backdrop-filter:none;
    background:linear-gradient(180deg, rgba(6,8,13,0) 0%, rgba(6,8,13,.72) 32%, rgba(6,8,13,.94) 100%);
    transform:translateY(4px);
  }
  #galaxyOverlay .gx3-toast.is-on{transform:translateY(0)}
  #galaxyOverlay .gx3-toast.is-idle{transform:translateY(10px)}
  #galaxyOverlay .gx3-toast__tag{font-size:6.5px;letter-spacing:.16em;color:rgba(143,227,255,.8)}
  #galaxyOverlay .gx3-toast__title{font-size:10.5px}
  #galaxyOverlay .gx3-toast__body{font-size:9px;line-height:1.5;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #galaxyOverlay .gx3-toast__tip{margin-top:5px;font-size:7px;letter-spacing:.10em;color:rgba(231,239,252,.32)}
   #galaxyOverlay .gx3-crumb{right:12px;top:52px;font-size:6px;letter-spacing:.12em}
   /* ② 删重复文案：窄屏下 .galaxy__hint 与 toast 的 __tip 说的是同一句话，只留 toast
      （toast 跟着层级变化，信息更准；hint 是写死的静态句）。
      只针对星系区里那一个，不写死给所有 .galaxy__hint，避免误伤其它板块。 */
   /* ★ 必须带 .is-3d：上面 main.css:315 的 .galaxy-wrap.is-3d .galaxy__hint 是 3 个 class，
      只写 .galaxy-wrap .galaxy__hint（2 个 class）会被它压过，实测 hint 仍是 display:block。 */
   .galaxy-wrap .galaxy__hint,
   .galaxy-wrap.is-3d .galaxy__hint{display:none}
   .galaxy-wrap.is-3d #galaxyOverlay .gx3-toast{bottom:0}
   /* 窄屏 3D：右上角两个胶囊（返回 + 2D 平面图）下沿在 62px，面包屑原来写 50px
      → 面包屑文字被胶囊压住（实测重叠 12px）。下移到 68px，各占一层互不遮挡。 */
   .galaxy-wrap.is-3d #galaxyOverlay .gx3-crumb{top:68px}
   /* ③ 底部角标必须给贴底字幕条让位：
      字幕条在 bottom:0、高约 73px（4 行），原来角标写死 bottom:14px，
      实测被整块盖住（「恒星 · 主代码」压在「L1 · 银河」上）。
      把两个底角标抬到 --ov-bar-h 之上，高度统一从一个变量取。 */
   .galaxy-wrap.is-3d{--ov-bar-h:78px}
   .galaxy-wrap.is-3d .galaxy__corner--bl,
   .galaxy-wrap.is-3d .galaxy__corner--br{
     bottom:calc(var(--ov-bar-h, 78px) + 10px);
     font-size:6px;letter-spacing:.10em;
   }
 }

/* ---------- works toolbar / search ---------- */
.works__tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:12px 0;margin-bottom:26px}
.works__search{display:flex;align-items:center;gap:10px;flex:1;min-width:220px}
.works__search .mono{font-size:7px;letter-spacing:.16em;color:var(--faint);white-space:nowrap}
.works__search input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font-family:var(--sans);font-size:14px;padding:8px 0;outline:none}
.works__search input::placeholder{color:#6c7280}
.works__search input::-webkit-search-cancel-button{display:none}
.works__search button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1;display:grid;place-items:center;transition:color .3s,border-color .3s}
.works__search button:hover{color:var(--acid);border-color:rgba(213,231,255,.5)}
.works__random{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:100px;padding:8px 14px;font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:var(--ink-dim);transition:border-color .3s,color .3s,background .3s}
.works__random i{color:var(--acid);font-style:normal;font-size:10px}
.works__random:hover{border-color:rgba(213,231,255,.45);color:var(--ink);background:rgba(213,231,255,.06)}
.works__random:hover i{animation:spin 1.2s linear infinite}
.works__count{font-size:7.5px;letter-spacing:.14em;color:var(--faint);white-space:nowrap}
.works__empty{margin:26px 0 0;font-size:13px;color:var(--muted)}
.works__empty button{margin-left:10px;color:var(--acid);font-size:12px;text-decoration:underline;text-underline-offset:3px}

/* ---------- work covers ---------- */
.work__cover{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1.15s var(--ease),filter .8s}
.work:hover .work__cover{transform:scale(1.045);filter:saturate(1.06)}
.work__badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:6.5px;letter-spacing:.1em;color:rgba(243,243,236,.72);border:1px solid rgba(243,243,236,.24);padding:3px 6px;margin-left:6px;vertical-align:2px}
.work__badge i{width:4px;height:4px;border-radius:50%;background:var(--ice);font-style:normal}

/* ---------- publish form additions ---------- */
.upload-field{margin-bottom:22px}
.upload-field--inline{margin-top:4px}
.upload-field__label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:#a3a7b0;margin-bottom:8px}
.upload-field__label i{font-style:normal;color:rgba(213,231,255,.45);font-size:7px;margin-left:5px}
.upload-field__label .mono{font-size:6.5px;color:var(--faint);letter-spacing:.12em}
.upload-box{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border:1px dashed rgba(245,242,233,.22);background:rgba(255,255,255,.018);
  padding:18px 16px;transition:border-color .3s,background .3s;
}
.upload-box:hover,.upload-box.is-drag{border-color:rgba(213,231,255,.55);background:rgba(213,231,255,.06)}
.upload-box--slim{padding:13px 14px;gap:11px}
.upload-box__icon{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(213,231,255,.34);color:var(--acid);font-size:15px;line-height:1}
.upload-box__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.upload-box__text b{font-size:12px;font-weight:500;color:var(--ink-dim)}
.upload-box__text span{font-family:var(--mono);font-size:7px;letter-spacing:.08em;color:var(--faint)}
.upload-box__state{margin-left:auto;font-family:var(--mono);font-size:6.5px;letter-spacing:.1em;color:var(--faint);white-space:nowrap;flex:0 0 auto}
.upload-box.has-file{border-style:solid;border-color:rgba(213,231,255,.34)}
.upload-thumb{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-top:0;padding:10px 12px;background:rgba(255,255,255,.02)}
.upload-thumb img{width:66px;height:66px;object-fit:cover;border:1px solid var(--line-soft);flex:0 0 auto}
.upload-thumb div{display:flex;flex-direction:column;gap:4px;min-width:0}
.upload-thumb b{font-size:11px;font-weight:500;color:var(--ink-dim);word-break:break-all}
.upload-thumb span{font-family:var(--mono);font-size:6.5px;letter-spacing:.08em;color:var(--faint)}
.upload-thumb button{margin-left:auto;font-family:var(--mono);font-size:7px;letter-spacing:.12em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px}
.upload-thumb button:hover{color:var(--acid);border-color:var(--acid)}
.prompts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.prompts .mono{font-size:6.5px;letter-spacing:.14em;color:var(--faint);margin-right:2px}
.prompts button{font-size:11px;color:#9fa4ae;border:1px solid var(--line);border-radius:100px;padding:5px 10px;transition:color .3s,border-color .3s,background .3s}
.prompts button:hover{color:var(--ink);border-color:rgba(213,231,255,.4);background:rgba(213,231,255,.06)}
.form-more{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:14px 0;margin:2px 0 22px}
.form-more summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--ink-dim)}
.form-more summary::-webkit-details-marker{display:none}
.form-more summary em{font-style:normal;font-size:6.5px;letter-spacing:.14em;color:var(--faint);border:1px solid var(--line);padding:3px 6px}
.form-more summary::before{content:"＋";color:var(--acid);font-size:11px;margin-right:2px}
.form-more[open] summary::before{content:"−"}
.form-more[open] summary{color:var(--ink);margin-bottom:20px}
.form-more__body{padding-top:2px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gallery-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:10px}
.gallery-item{position:relative;border:1px solid var(--line);background:#080a0f;overflow:hidden}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gallery-item figcaption{font-family:var(--mono);font-size:6px;letter-spacing:.04em;color:var(--faint);padding:5px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gallery-item button{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;background:rgba(4,5,8,.8);border:1px solid rgba(243,243,236,.24);color:var(--ink);font-size:12px;line-height:1;display:grid;place-items:center}
.gallery-item button:hover{background:var(--acid);color:#08090b;border-color:var(--acid)}
.file-button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:1px dashed rgba(245,242,233,.22);background:rgba(255,255,255,.018);padding:11px 12px;font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:#9fa4ae;text-align:left;transition:border-color .3s,color .3s}
.file-button:hover,.file-button.has-file{border-color:rgba(213,231,255,.45);color:var(--ink)}
.file-button i{font-style:normal;color:var(--acid);font-size:12px}
.form-progress{position:relative;height:3px;background:rgba(245,242,233,.1);margin-top:14px;overflow:visible}
.form-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ice),var(--acid));transition:width .4s var(--ease);box-shadow:0 0 10px rgba(143,227,255,.5)}
.form-progress span{position:absolute;right:0;top:8px;font-family:var(--mono);font-size:6.5px;letter-spacing:.1em;color:var(--faint)}
.form-error{display:none;flex-direction:column;align-items:flex-start;gap:10px;margin-top:16px;padding:14px 16px;border:1px solid rgba(255,122,122,.5);background:rgba(255,90,90,.06)}
.form-error:not([hidden]){display:flex}
.form-error b{font-size:12px;letter-spacing:.04em;color:#ff9c9c}
.form-error p{margin:0;font-family:var(--mono);font-size:8px;letter-spacing:.06em;line-height:1.8;color:var(--muted)}
.form-error .btn{margin-top:2px;padding:9px 16px;font-size:8px}
.manage-code{display:flex;flex-direction:column;gap:7px;width:100%;border:1px solid rgba(255,210,122,.36);background:rgba(255,210,122,.07);padding:12px 14px;margin-top:6px}
.manage-code span{font-family:var(--mono);font-size:7px;letter-spacing:.1em;color:var(--gold)}
.manage-code em{font-style:normal;font-size:6.5px;letter-spacing:.06em;color:var(--faint);margin-left:6px}
.manage-code code{font-family:var(--mono);font-size:16px;letter-spacing:.16em;color:var(--ink)}
.manage-code button{align-self:flex-start;font-family:var(--mono);font-size:7px;letter-spacing:.1em;color:var(--gold);border:1px solid rgba(255,210,122,.36);padding:5px 9px}
.manage-code button:hover{background:var(--gold);color:#08090b}
.form-success .btn--ghost{margin-top:4px}

/* ---------- modal media ---------- */
.modal__cover{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover}
.modal__player{position:relative;z-index:1;width:100%;height:100%;background:#020306;display:flex;align-items:center}
.modal__player video{width:100%;height:100%;object-fit:contain;background:#020306}
.modal__gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:18px}
.modal__gallery a{position:relative;display:block;border:1px solid var(--line);overflow:hidden}
.modal__gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.modal__gallery a:hover img{transform:scale(1.04)}
.modal__text{margin-top:18px;border:1px solid var(--line)}
.modal__text-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 14px;color:var(--ink-dim);text-align:left}
.modal__text-head .mono{font-size:6.5px;letter-spacing:.16em;color:var(--faint)}
.modal__text-head b{font-size:11px;font-weight:400;margin-left:auto}
.modal__text-head i{font-style:normal;color:var(--acid);font-size:13px}
.modal__text pre{display:none;max-height:280px;overflow:auto;padding:0 14px 14px;font-family:var(--sans);font-size:12px;line-height:1.85;color:var(--muted);white-space:pre-wrap;word-break:break-word}
.modal__text.is-open pre{display:block}
.modal__text iframe{width:100%;height:380px;border:0;background:#08090c;display:block}
.modal__text .modal__file-link{display:inline-flex;align-items:center;gap:6px;margin:0 14px 14px;font-size:11px;color:var(--acid);border-bottom:1px solid rgba(213,231,255,.4);padding-bottom:2px}
.modal__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.modal__actions .link-arrow{font-size:11px}
.modal__fav.is-on{color:var(--acid)}
.modal__fav.is-on span:last-child{font-size:13px;transform:none}

@media(max-width:680px){
  .works__tools{gap:8px;padding:10px 0}
  .works__search{min-width:100%;order:1}
  .works__random{order:2}
  .works__count{order:3;margin-left:auto}
  .works__tags{gap:5px;margin-bottom:14px}
  .tag-chip{height:24px;font-size:7.5px;padding:0 9px}
  .works__more{margin-top:26px}
  .work__page{padding:8px 10px;font-size:7px}
  .field-row{grid-template-columns:1fr;gap:0}
  .upload-box{padding:14px 12px}
  .upload-box__text b{font-size:11px}
  .upload-thumb img{width:56px;height:56px}
  .form-more summary{font-size:8.5px}
  .modal__gallery{grid-template-columns:1fr 1fr}
  .modal__text iframe{height:260px}
  .modal__cover img,.modal__player video{object-fit:cover}
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html.js .reveal{opacity:1!important;transform:none!important}
  .hero__title .ch,.hero__title em,.hero__lede,.hero__actions,.hero__title .spark{opacity:1!important;transform:none!important}
  .hero__title .spark{transform:translateY(-1.55em)!important}
}
@media (hover:none),(pointer:coarse){
  .cursor-dot,.cursor-ring{display:none!important}
  html.has-cursor body,html.has-cursor a,html.has-cursor button,html.has-cursor input,html.has-cursor textarea,html.has-cursor select{cursor:auto!important}
}

/* ============================================================
   二期：社交链接 / 三类策展 / 喜欢 · 关注按钮 / 模块驱动板块
   只用现有 token（--acid / --line / --muted / --ink …）与文件里已有的
   rgba(213,231,255,…) 透明度写法，不新增十六进制色值。
   ============================================================ */

/* ---------- footer 社交外链 ---------- */
.footer__cols a.footer__link{position:relative}
.footer__cols a.footer__link::after{content:"\2197";font-size:8px;margin-left:5px;opacity:.45;vertical-align:1px;transition:opacity .3s}
.footer__cols a.footer__link:hover::after{opacity:1}
/* 社交账号尚未开通时的占位：明确说明"开通中"，不放指向平台首页的假链接 */
.footer__soon{color:var(--faint);font-size:12px;opacity:.72}

/* ---------- 三段式策展带 ---------- */
.curation{margin:0 0 clamp(30px,4vw,48px);border-top:1px solid var(--line-soft);padding-top:22px}
.curation__head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,28px)}
.curation__head .mono{font-size:7px;letter-spacing:.2em;color:var(--faint)}
.curation__head p{margin:0;font-size:11.5px;color:var(--muted);line-height:1.7;flex:1;min-width:200px}
.curation__src{color:var(--acid);opacity:.7;white-space:nowrap}
/* 2026-11-13：策展带三组之间的间距收紧（原 clamp(26px,3vw,42px)）
   另外两个 min-width 是移动端横向溢出的关键：
   .curation-band 作为 grid 项默认 min-width:auto，会被内部那张 3 列卡带撑到 620px，
   进而把 .curation__bands 的列宽也顶到 620px，页面就横向溢出了（实测 docW 390→640）。
   显式给 minmax(0,1fr) + min-width:0，列宽才会真正跟着父级走。 */
.curation__bands{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:clamp(14px,1.6vw,22px)}
.curation-band{position:relative;min-width:0;padding-top:14px;border-top:1px solid var(--line-soft)}
.curation-band__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:baseline;gap:clamp(10px,1.4vw,20px);margin-bottom:14px}
.curation-band__idx{font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:var(--acid);opacity:.66}
.curation-band__title{display:flex;align-items:baseline;gap:9px;font-size:clamp(17px,1.7vw,22px);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.curation-band__title i{font-family:var(--mono);font-style:normal;font-size:7px;letter-spacing:.2em;color:var(--faint);font-weight:400}
.curation-band__note{font-size:6.5px;letter-spacing:.1em;color:var(--faint);white-space:nowrap}
.curation-band__count{font-size:6.5px;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.curation-band__empty{margin:0;font-size:11.5px;color:var(--faint);padding:18px 0}
/* 2026-11-13：策展带原来三组各占一整行（实测 975px ≈ 1.21 屏），
   改成分组横滑：每组只占一行，多出来的用横向滚动，「被埋没的」不再撑高页面。 */
.work-grid--curation{
  /* 2026-11-13：max-width:100% 必须显式写。
     实测：grid-auto-flow:column 的容器会按「内容总宽」撑开自己（移动端量到 620px，
     而父级只有 350px），页面因此横向溢出 —— 它既是滚动容器又被内容撑大，
     滚动条反而永远不出现。max-width 把它钉回父级宽度，横滑才真的生效。 */
  grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(176px,18.5vw,244px);
  gap:clamp(10px,1.2vw,16px);overflow-x:auto;overflow-y:hidden;padding-bottom:4px;
  max-width:100%;min-width:0;
  scroll-snap-type:x proximity;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.work-grid--curation::-webkit-scrollbar{height:3px}
.work-grid--curation::-webkit-scrollbar-thumb{background:rgba(213,231,255,.22);border-radius:99px}
.work-grid--curation::-webkit-scrollbar-track{background:transparent}
.work-cell--curation{scroll-snap-align:start;min-width:0}
/* 关键：.work-cell 是 flex column 且 .work 带 flex:1 1 auto，
   在横滑栅格里会被拉伸去填满（实测撑到 318px，比卡片本身还高）。
   这里显式取消拉伸并锁死宽高比，卡片才真的变矮。 */
.work-cell--curation .work{flex:0 0 auto;aspect-ratio:4/3.2;height:auto}
/* 紧凑卡里分类与徽标挤在一行会互相压住（实测「IN PROGRESS」盖掉「交互未来」）。
   改成各自独占一行，行高收紧。 */
.work-cell--curation .work__cat{display:flex;margin-bottom:5px}
.work-cell--curation .work__badge{display:block;margin:0 0 5px;align-self:flex-start;width:fit-content}
.work-cell--curation .work__title{font-size:clamp(14px,1.2vw,17px);margin-top:4px}
.work-cell--curation .work__en{display:none}
.work-cell--curation .work__title{font-size:clamp(16px,1.4vw,20px)}
.work-cell--curation .work__bottom{padding:16px}
.work-cell--curation .work__author{padding-right:6px;margin-top:10px;padding-top:9px}
.work-cell--curation .work__en{font-size:6.5px}

/* ---------- 喜欢 / 关注按钮 ---------- */
.work-cell__foot{display:flex;align-items:stretch;gap:0}
.work-cell__foot .work__page{flex:1 1 auto;border-top:0;margin-left:-1px}
.like-btn,.follow-btn{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  border:1px solid var(--line-soft);background:rgba(10,12,17,.66);
  font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;color:var(--muted);
  transition:color .3s,border-color .3s,background .3s,transform .3s;
}
.like-btn__icon,.follow-btn__icon{font-size:11px;line-height:1;color:var(--muted);transition:color .3s,transform .3s}
.like-btn__num,.follow-btn__num{font-size:7.5px;color:var(--faint);transition:color .3s}
.like-btn:hover:not([disabled]),.follow-btn:hover:not([disabled]){color:var(--ink);border-color:rgba(213,231,255,.34);background:rgba(213,231,255,.06)}
.like-btn:hover:not([disabled]) .like-btn__icon{color:var(--rose);transform:scale(1.08)}
.like-btn.is-on{color:var(--ink);border-color:rgba(213,231,255,.4);background:rgba(213,231,255,.09)}
.like-btn.is-on .like-btn__icon{color:var(--rose)}
.like-btn.is-on .like-btn__num{color:var(--ink-dim)}
.follow-btn.is-on{color:var(--ink);border-color:rgba(213,231,255,.4);background:rgba(213,231,255,.09)}
.follow-btn.is-on .follow-btn__icon{color:var(--acid)}
.follow-btn.is-on .follow-btn__num{color:var(--ink-dim)}
.like-btn[disabled],.follow-btn[disabled]{opacity:.55;cursor:default}
.like-btn[aria-busy="true"],.follow-btn[aria-busy="true"]{opacity:.8}
.like-btn--card{flex:0 0 auto;padding:9px 12px;border-top:0}
.like-btn--modal{padding:0 12px;border-color:var(--line);border-radius:100px;min-height:32px}
.like-btn--modal .like-btn__label{font-family:var(--sans);font-size:11px;letter-spacing:.02em;color:inherit}

.creator-card__stats{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.creator-card__sect{font-size:6.5px;letter-spacing:.14em;color:var(--faint);white-space:nowrap}
.follow-btn{border-radius:100px;height:30px;padding:0 12px;font-family:var(--mono)}
.follow-btn__tail{font-size:6px;letter-spacing:.1em;color:var(--faint)}

/* ---------- 模块开关：被关掉的板块不留空档 ---------- */
[data-module][data-module-on="0"]{display:none!important}

@media(max-width:980px){
  .work-grid--curation{grid-auto-columns:clamp(160px,30vw,220px)}
  .curation-band__note{display:none}
}
@media(max-width:760px){
  .work-grid--curation{grid-auto-columns:clamp(148px,52vw,200px)}
  .work-cell--curation .work{aspect-ratio:4/4.2}
  .curation-band__head{grid-template-columns:auto minmax(0,1fr) auto}
  .curation-band__count{grid-column:2 / -1;font-size:6px}
  .curation__head{gap:10px}
  .like-btn--card,.work__page{padding:8px 10px;font-size:7px}
}

/* 作品外链（本机预览 / GitHub 仓库）：有色区分，站内档案保持灰 */
.work__page--ext{color:var(--acid);border-color:rgba(213,231,255,.28)}
.work__page--ext:hover{background:rgba(213,231,255,.12)}


/* ==========================================================================
   §2.7 移动端重排（2026-11-06）
   目标：390×844 下首屏能看到内容与数字，3D 区不再吃掉整屏，手势有明确提示。
   1) .hero 不再强制 100svh：文案+数字+快捷条能一屏看完；
   2) 新增 .hero__quick 横向快捷跳转条（≤900px 显示，桌面隐藏）；
   3) 3D 星系区在手机上收窄成 320px 并抬高提示条位置，不再被角标压住；
   4) .galaxy__hint 手机端加手势说明（与 galaxy-cluster-3d.js 的文案一致）。
   ========================================================================== */
.hero__quick{display:none}

@media (max-width:900px){
  .hero{min-height:auto;padding-bottom:26px}
  .hero__inner{padding:14px 0 6px}
  .hero__quick{
    display:flex;gap:8px;overflow-x:auto;margin-top:22px;padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
    mask-image:linear-gradient(90deg,#000 92%,transparent);
  }
  .hero__quick::-webkit-scrollbar{display:none}
  .hero__quick a{
    flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
    border:1px solid var(--line);border-radius:999px;padding:7px 13px;
    font-size:11px;color:var(--muted);text-decoration:none;white-space:nowrap;
  }
  .hero__quick a em{font-family:var(--mono);font-size:8px;font-style:normal;color:var(--acid);opacity:.7}
  .hero__quick a:active{color:var(--ink);border-color:var(--accent)}
  .hero__foot{padding-bottom:14px}
}

@media (max-width:680px){
  /* 首屏：标题 + 按钮 + 快捷条 + 三个数字，一屏装得下 */
  .hero{padding-top:84px}
  .hero__title{margin:18px 0 20px}
  .hero__lede{font-size:13px;line-height:1.85}
  .hero__actions{margin-top:22px}
  .hero__figures{gap:20px;flex-wrap:wrap}
  .hero__figures b{font-size:20px}
  /* 3D 星系区收窄：390px 屏上占 320px，其余内容上浮 */
  .galaxy-wrap{height:clamp(300px,48vh,400px)}
  .galaxy-wrap.is-3d .galaxy__hint{bottom:24px;font-size:7px;line-height:1.6}
  /* ★ N1：这里原来写死 bottom:58px，会在更小断点把底角标压回字幕条下方。
     统一改成从 --ov-bar-h 取值（该变量在 680px 断点里设为 78px），
     小屏字幕条换行更多，所以额外 +6px 保险。 */
  .galaxy-wrap.is-3d{--ov-bar-h:84px}
  .galaxy-wrap.is-3d .galaxy__corner--bl,
  .galaxy-wrap.is-3d .galaxy__corner--br{bottom:calc(var(--ov-bar-h, 84px) + 10px)}
  .galaxy__hint{font-size:7px;line-height:1.6}
}

/* ---------- L4 行星资料面板 ---------- */
/* 桌面：星系区右侧浮出毛玻璃卡片；<900px 变底部抽屉。2D/3D 共用同一套 DOM */
.galaxy-wrap{--pp-w:clamp(260px,23vw,320px);--pp-gap:22px}
/* L4 打开资料面板时：画布让出右侧一条 → 行星自然落在左侧，不被面板压住 */
/* 画布保持整幅（不裁窄：窄画布会把相机的宽高比压到 0.35，行星被挤出画面）
   主体让位交给相机取景偏移 gx3ApplyPlanetFraming() */
.planet-panel{
  position:absolute;z-index:7;
  top:24px;right:var(--pp-gap);bottom:24px;
  width:var(--pp-w);
  max-height:min(620px,calc(100svh - 150px));
  display:flex;flex-direction:column;gap:12px;
  padding:20px 20px 18px;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(160deg,rgba(20,26,40,.82),rgba(8,11,19,.88));
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  backdrop-filter:blur(16px) saturate(120%);
  box-shadow:0 24px 60px rgba(3,5,10,.55),inset 0 1px 0 rgba(245,242,233,.06);
  opacity:0;transform:translateX(12px);
  transition:opacity .24s var(--ease),transform .24s var(--ease);
  pointer-events:none;
}
.planet-panel.is-on{opacity:1;transform:translateX(0);pointer-events:auto}
.planet-panel__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto}
.planet-panel__tag{
  font-family:var(--mono);font-size:7px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pp-accent,var(--acid));border:1px solid rgba(213,231,255,.2);border-radius:999px;padding:4px 9px;
}
.planet-panel__close{
  width:22px;height:22px;flex:0 0 auto;line-height:1;cursor:pointer;
  background:transparent;border:1px solid var(--line-soft);border-radius:50%;
  color:var(--muted);font-size:13px;
  transition:color .2s,border-color .2s,background .2s;
}
.planet-panel__close:hover,.planet-panel__close:focus-visible{color:var(--ink);border-color:rgba(213,231,255,.38);background:rgba(255,255,255,.04);outline:none}
.planet-panel__preview{
  flex:0 0 auto;height:112px;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-soft);
  background:radial-gradient(circle at 50% 45%,rgba(58,76,118,.35),rgba(6,9,16,.9) 70%);
  display:flex;align-items:center;justify-content:center;
}
.planet-panel__preview img{width:100%;height:100%;object-fit:cover;display:block}
.planet-panel__ball{
  display:block;width:58px;height:58px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,var(--pp-b,var(--ice)),var(--pp-a,var(--gold)) 62%,rgba(4,6,12,.9) 100%);
  box-shadow:0 0 26px color-mix(in srgb,var(--pp-a,var(--gold)) 42%,transparent);
}
.planet-panel__title{margin:0;font-size:16px;font-weight:500;line-height:1.35;color:var(--ink)}
.planet-panel__en{margin:0;font-family:var(--mono);font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.planet-panel__facts{margin:0;display:flex;flex-direction:column;gap:6px}
.planet-panel__row{display:flex;gap:10px;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line-soft);padding-bottom:5px}
.planet-panel__row dt{font-family:var(--mono);font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.planet-panel__row dd{margin:0;font-size:11px;color:var(--ink-dim);text-align:right;word-break:break-word}
.planet-panel__progress{position:relative;height:3px;border-radius:2px;background:rgba(245,242,233,.1);flex:0 0 auto}
.planet-panel__progress i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--ice),var(--acid));transition:width .4s var(--ease)}
.planet-panel__progress span{position:absolute;right:0;top:7px;font-family:var(--mono);font-size:6.5px;letter-spacing:.1em;color:var(--faint)}
.planet-panel__desc{margin:0;font-size:11.5px;line-height:1.75;color:var(--muted);word-break:break-word}
.planet-panel__tex{margin:0;font-family:var(--mono);font-size:6.5px;letter-spacing:.06em;line-height:1.7;color:var(--faint);word-break:break-all}
.planet-panel__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px;flex:0 0 auto}
.planet-panel__btn{
  font-family:var(--mono);font-size:8px;letter-spacing:.1em;cursor:pointer;
  padding:9px 13px;border-radius:999px;
  color:var(--ink-dim);background:transparent;border:1px solid var(--line);
  transition:color .25s,border-color .25s,background .25s;
}
.planet-panel__btn:hover,.planet-panel__btn:focus-visible{color:var(--ink);border-color:rgba(213,231,255,.4);outline:none}
.planet-panel__btn--main{color:#05070d;background:var(--acid);border-color:var(--acid)}
.planet-panel__btn--main:hover,.planet-panel__btn--main:focus-visible{color:#05070d;background:#fff;border-color:#fff}
@media (max-width:900px){
  /* 窄屏：面板落成底部抽屉（贴视口底，不跟着星系区跑），画布保持整幅 → 不被生硬切半 */
    .planet-panel{
    position:fixed;z-index:120;
    top:auto;right:0;left:0;bottom:0;width:auto;
    max-height:42vh;padding:16px 18px 20px;border-radius:20px 20px 0 0;
    transform:translateY(14px);
    border-left:0;border-right:0;border-bottom:0;
    box-shadow:0 -18px 46px rgba(3,5,10,.6);
  }
  .planet-panel.is-on{transform:translateY(0)}
  .planet-panel::before{
    content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:38px;height:3px;border-radius:3px;background:rgba(245,242,233,.22);
  }
  .planet-panel__preview{height:88px}
}
@media (prefers-reduced-motion:reduce){
  .planet-panel{transition:none}
}