/* ============================================================
   共振 RESONANCE — 校园灵感星图
   设计系统 / 单文件样式

   方向：仪器感。
   不是"深色 + 发光 + 玻璃"，是"观测台"：细线、刻度、等宽读数、
   实色块。所有元素都要有承重结构，不许浮在半空。
   ============================================================ */

/* ---------- 1. 变量 ---------- */
:root{
  /* 底色：偏冷的墨黑，像印刷用的黑，不是屏幕黑 */
  --bg:          #0A0B0D;
  --bg-raised:   #101215;
  --bg-card:     #14171B;
  --bg-input:    #0C0E11;

  /* 文字：纸白，不是纯白。二级三级提亮过一轮——
     仪器感靠线条和结构，不靠把字压暗；读不清就是失败。 */
  --ink:         #EDEBE6;
  --ink-2:       #BEBAB2;
  --ink-3:       #8A8780;
  --ink-4:       #5C5A56;

  /* 分隔：实色发丝线，不用半透明白 */
  --line:        #2A2E34;
  --line-strong: #3D424A;

  /* 主色：仪器绿（老式示波器/雷达屏的荧光绿），只用于读数与准星 */
  --accent:      #7FE3B0;
  --accent-dim:  #4A9E78;

  /* 六频段 — 降饱和度，让它们像印刷色而不是霓虹 */
  --c-space:  #7C93D8;  /* 空间 */
  --c-time:   #6FB8C4;  /* 时间 */
  --c-people: #D8A567;  /* 人群 */
  --c-event:  #D4788C;  /* 事件 */
  --c-object: #9B86C9;  /* 物件 */
  --c-mood:   #7FC49A;  /* 情绪 */

  /* 字体 */
  --serif: "Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:  "Noto Sans SC","PingFang SC","Microsoft YaHei","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:  "SFMono-Regular","Cascadia Mono",Consolas,"Liberation Mono",Menlo,monospace;

  /* 尺度：4px 基准网格，所有间距必须是它的倍数 */
  --maxw: 1240px;
  --pad:  clamp(20px, 5vw, 72px);
  --radius: 2px;
  --radius-sm: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. 基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ---------- 图纸网格 ----------
   整页铺一层极淡的方格，像坐标纸。它给"仪器感"一个底：
   所有东西都落在网格上，而不是浮在虚空里。
   用 background-attachment:fixed 让它不随内容滚动，成为"台面"而非"背景图"。 */
.grid-paper{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(232,230,225,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(232,230,225,.028) 1px, transparent 1px);
  background-size:48px 48px;
  background-position:0 var(--gy, 0px);
  /* 边缘压暗，中间亮一点，像台灯打在图纸上 */
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* 细如发丝的阅读进度 */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:80;
  pointer-events:none; background:transparent;
}
.progress i{
  display:block; height:100%; transform-origin:0 50%;
  transform:scaleX(var(--p, 0));
  background:var(--accent);
}

/* 极细噪点，压住大面积纯色 */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.028; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* hidden 必须真的隐藏，否则 display:flex 之类的规则会把它顶回来 */
[hidden]{ display:none !important; }

h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
svg{ width:1em; height:1em; display:block; }

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

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---------- 3. 导航 ----------
   不是浮在内容上的玻璃条，是仪器面板的顶栏：
   左侧型号铭牌，中间频道刻度，右侧状态灯。 */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  height:64px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  transition:transform .45s var(--ease);
}
.nav.is-hidden{ transform:translateY(-104%); }

.nav__logo{ display:flex; align-items:center; gap:12px; }
/* 准星标记：一个十字加中心点，纯线条，不发光 */
.nav__mark{
  width:18px; height:18px;
  position:relative;
  flex:none;
}
.nav__mark::before,
.nav__mark::after{
  content:""; position:absolute; background:var(--accent);
}
.nav__mark::before{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-.5px); }
.nav__mark::after{ top:50%; left:0; right:0; height:1px; transform:translateY(-.5px); }
.nav__word{
  font-family:var(--mono); font-size:12px; letter-spacing:.34em;
  font-weight:400; color:var(--ink);
  text-transform:uppercase;
}

/* 导航项做成"频道号 + 名称"，像仪器的波段切换 */
.nav__links{ display:flex; gap:2px; }
.nav__links a{
  position:relative;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--ink-3); transition:color .2s, background .2s;
  padding:8px 16px;
  border:1px solid transparent;
  border-radius:0;
}
.nav__links a::before{
  content:attr(data-ch);
  color:var(--ink-4); margin-right:9px;
  transition:color .2s;
}
.nav__links a:hover{ color:var(--ink); background:var(--bg-raised); }
.nav__links a:hover::before{ color:var(--ink-3); }
.nav__links a.is-active{
  color:var(--accent); border-color:var(--line-strong); background:var(--bg-raised);
}
.nav__links a.is-active::before{ color:var(--accent-dim); }

.nav__toggle{ display:none; width:34px; height:34px; position:relative; }
.nav__toggle span{
  position:absolute; left:7px; width:20px; height:1px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .25s;
}
.nav__toggle span:nth-child(1){ top:13px; }
.nav__toggle span:nth-child(2){ top:20px; }
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(3.5px) rotate(41deg); }
.nav.is-open .nav__toggle span:nth-child(2){ transform:translateY(-3.5px) rotate(-41deg); }

/* ---------- 4. 首屏 ----------
   不是"居中大标题 + 副标题 + 两个按钮"。
   是一张观测记录单：左侧型号与读数，中间主标题，下方参数表。 */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px var(--pad) 80px;
  overflow:hidden;
  z-index:2;
}
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.55; pointer-events:none;
}

/* 四角定位角标——仪器面板的典型特征 */
.hero__corner{
  position:absolute; width:16px; height:16px; pointer-events:none;
  border-color:var(--line-strong); border-style:solid; border-width:0;
}
.hero__corner--tl{ top:96px; left:var(--pad); border-top-width:1px; border-left-width:1px; }
.hero__corner--tr{ top:96px; right:var(--pad); border-top-width:1px; border-right-width:1px; }
.hero__corner--bl{ bottom:56px; left:var(--pad); border-bottom-width:1px; border-left-width:1px; }
.hero__corner--br{ bottom:56px; right:var(--pad); border-bottom-width:1px; border-right-width:1px; }

.hero__inner{
  position:relative; z-index:2;
  max-width:1000px; width:100%;
  animation:riseIn .9s var(--ease-out) both;
}

/* 顶部一行状态：像仪器的开机自检 */
.hero__eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  color:var(--ink-3); margin-bottom:clamp(40px,7vh,72px);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.hero__eyebrow::before{
  content:""; width:6px; height:6px; flex:none;
  background:var(--accent);
  animation:blink 2.4s steps(1) infinite;
}
@keyframes blink{ 0%,70%{ opacity:1; } 71%,100%{ opacity:.15; } }

/* 主标题：不再渐变、不再发光。纯实色 + 极紧的字距，靠体量说话 */
.hero__title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(76px, 15vw, 168px);
  line-height:.9; letter-spacing:.02em;
  margin-bottom:clamp(20px,3vh,32px);
  display:flex; align-items:baseline; gap:.06em;
}
.hero__char{
  display:inline-block;
  color:var(--ink);
}
/* 第二个字用描边，一个实一个空——这是排版上的判断，不是效果。
   字这么大，描边得给到 2.5px 且用 mid 色，否则在深底上几乎看不见。 */
.hero__char:nth-child(2){
  color:transparent;
  -webkit-text-stroke:2.5px var(--ink-2);
}

.hero__sub{
  font-family:var(--mono); font-size:11px; letter-spacing:.5em;
  color:var(--ink-4); margin-bottom:clamp(32px,5vh,52px);
  display:flex; align-items:center; gap:16px;
}
.hero__sub::after{
  content:""; flex:1; height:1px; background:var(--line);
  max-width:280px;
}

.hero__desc{
  font-size:15px; line-height:2.1; color:var(--ink-2); font-weight:400;
  letter-spacing:.02em; margin-bottom:clamp(32px,5vh,48px);
  max-width:44ch;
}
.hero__desc br{ display:none; }
.hero__desc .ln{ display:block; }

.hero__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* 参数表：不是胶囊里的三个大数字，是一张带表头的规格表 */
.hero__stats{
  position:relative; z-index:2;
  margin-top:clamp(56px,9vh,96px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:560px;
  border-top:1px solid var(--line-strong);
  animation:riseIn .9s var(--ease-out) .25s both;
}
.hero__stats div{
  padding:18px 0 0;
  border-right:1px solid var(--line);
}
.hero__stats div:last-child{ border-right:none; }
.hero__stats div:not(:first-child){ padding-left:24px; }
.hero__stats b{
  display:block;
  font-family:var(--mono); font-size:30px; font-weight:400;
  letter-spacing:.02em; color:var(--ink); line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.hero__stats span{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--ink-4); margin-top:6px; display:block;
}

.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:1px; height:44px; background:var(--line-strong); z-index:2; overflow:hidden;
}
.hero__scroll span{
  position:absolute; top:-44px; left:0; width:1px; height:44px;
  background:var(--accent);
  animation:scrollTrail 2.4s var(--ease) infinite;
}

@keyframes riseIn{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}
@keyframes scrollTrail{
  0%  { transform:translateY(0); opacity:0; }
  25% { opacity:1; }
  100%{ transform:translateY(88px); opacity:0; }
}

/* ---------- 5. 按钮 ----------
   直角、实色、无阴影。主按钮是"执行"键，副按钮是"参数"键。 */
.btn{
  --btn-bg:transparent;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 24px;
  border-radius:0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  border:1px solid var(--line-strong); background:var(--btn-bg);
  transition:border-color .2s, background .2s, color .2s;
  white-space:nowrap;
}
.btn svg{ width:14px; height:14px; transition:transform .3s var(--ease-out); }

.btn--primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg);
  font-weight:600;
}
.btn--primary:hover{
  background:#95EDBF; border-color:#95EDBF;
}
.btn--primary:hover svg{ transform:translateX(3px); }

.btn--ghost{
  color:var(--ink-2);
  background:transparent;
  border-color:var(--line-strong);
}
.btn--ghost:hover{
  color:var(--ink); border-color:var(--ink-3);
  background:var(--bg-raised);
}

.btn--mini{ padding:8px 16px; font-size:10.5px; letter-spacing:.14em; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:0; color:var(--ink-3);
  border:1px solid transparent;
  transition:color .2s, background .2s, border-color .2s;
}
.icon-btn svg{ width:15px; height:15px; }
.icon-btn:hover{ color:var(--ink); background:var(--bg-raised); border-color:var(--line-strong); }

/* ---------- 6. 区块 ----------
   四节不再共用同一个模板头。
   每节有自己的编号版式：编号在左，标题在右，中间一道横线拉满。 */
.section{
  position:relative; z-index:2;
  padding:clamp(80px, 11vh, 140px) var(--pad);
  max-width:calc(var(--maxw) + var(--pad) * 2);
  margin:0 auto;
  --sec:124,147,216;
}
#map     { --sec:124,147,216; }
#collide { --sec:212,120,140; }
#echo    { --sec:127,196,154; }
#about   { --sec:111,184,196; }

/* 区块顶边：一条实线 + 一个刻度标尺，把每节"钉"在纸上 */
.section::before{
  content:""; position:absolute; z-index:0;
  top:0; left:var(--pad); right:var(--pad); height:1px;
  background:var(--line);
}

/* 标题区：编号与标题并排，横线贯穿。不再是竖排的 kicker/标题/说明。 */
.section__head{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:clamp(20px,4vw,48px);
  align-items:baseline;
  margin-bottom:clamp(44px,6vh,72px);
  padding-bottom:0;
}
.kicker{
  grid-column:1;
  grid-row:1;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:rgb(var(--sec));
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  padding-top:.4em;
}
.section__title{
  grid-column:2;
  grid-row:1;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(30px, 4.4vw, 48px);
  letter-spacing:.04em; line-height:1.15;
  color:var(--ink);
  /* 标题右侧拉一道线到边缘，让"这一节从这里开始"有明确的起点 */
  display:flex; align-items:center; gap:clamp(16px,3vw,32px);
}
.section__title::after{
  content:""; flex:1; height:1px; background:var(--line);
}
.section__lede{
  grid-column:2;
  grid-row:2;
  font-size:14.5px; line-height:2; color:var(--ink-2); font-weight:400;
  max-width:56ch;
  margin-top:18px;
}

/* 滚动入场 */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- 7. 星图 ---------- */
.map-layout{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,32px); align-items:stretch;
}

/* 舞台：一个带边框的观测窗口。没有阴影、没有内发光，
   只有 1px 实线框 + 四角的定位角标 + canvas 自己画的刻度环。 */
.map-stage{
  position:relative;
  border:1px solid var(--line-strong);
  border-radius:0;
  background:var(--bg-input);
  overflow:hidden;
  aspect-ratio:1/.92;
  min-height:420px;
  min-width:0;
  width:100%;
}
/* 四角角标 */
.map-stage::before,
.map-stage::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border-color:var(--accent-dim); border-style:solid; border-width:0;
  z-index:3;
}
.map-stage::before{ top:8px; left:8px; border-top-width:1px; border-left-width:1px; }
.map-stage::after{ bottom:8px; right:8px; border-bottom-width:1px; border-right-width:1px; }

#mapCanvas{
  display:block; width:100%; height:100%; cursor:crosshair;
  touch-action:none;
}
#mapCanvas:active{ cursor:grabbing; }

/* 图例：不是胶囊按钮，是仪器的通道开关 */
.map-legend{
  position:absolute; left:14px; bottom:12px; right:14px;
  display:flex; flex-wrap:wrap; gap:0;
  border:1px solid var(--line);
  background:rgba(10,11,13,.88);
  z-index:2;
}
.map-legend button{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-3);
  border:none; border-right:1px solid var(--line);
  background:transparent;
  transition:color .2s, background .2s, opacity .2s;
  border-radius:0;
}
.map-legend button:last-child{ border-right:none; }
.map-legend button i{
  width:6px; height:6px; flex:none; background:currentColor;
  /* 方点，不是圆点 */
}
.map-legend button:hover{ color:var(--ink); background:var(--bg-raised); }
.map-legend button.is-off{ opacity:.3; }
.map-legend button.is-on{
  color:var(--bg); background:currentColor;
}
.map-legend button.is-on i{ background:var(--bg); }

.map-hint{
  position:absolute; right:14px; top:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  color:var(--ink-4); pointer-events:none;
  transition:opacity .6s;
  z-index:2;
}
.map-hint.is-faded{ opacity:0; }

/* 侧栏面板：实色底 + 1px 边框，没有模糊、没有渐变光 */
.map-panel{
  position:relative;
  border:1px solid var(--line-strong);
  border-radius:0;
  background:var(--bg-raised);
  min-height:420px; padding:28px;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
/* 面板顶边一条该频段的实色标记线，选中后变色 */
.map-panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--panel-accent, var(--line-strong));
  transition:background .3s;
}
.panel-card, .panel-empty{ position:relative; z-index:1; }

.panel-empty{ color:var(--ink-3); }
/* 空状态不是脉冲圆环，是一个静态的准星图 */
.panel-empty__ring{
  width:56px; height:56px; margin-bottom:24px; position:relative;
}
.panel-empty__ring::before,
.panel-empty__ring::after{
  content:""; position:absolute;
}
.panel-empty__ring::before{
  inset:0; border:1px solid var(--line-strong); border-radius:50%;
}
.panel-empty__ring::after{
  left:50%; top:50%; width:1px; height:1px;
  box-shadow:
    0 -28px 0 0 var(--ink-4), 0 28px 0 0 var(--ink-4),
    -28px 0 0 0 var(--ink-4), 28px 0 0 0 var(--ink-4);
  background:var(--ink-4);
  transform:translate(-50%,-50%);
}
.panel-empty p{
  font-family:var(--serif); font-size:17px; color:var(--ink-2);
  letter-spacing:.08em; margin-bottom:12px;
}
.panel-empty span{ font-size:12.5px; line-height:2; display:block; color:var(--ink-3); }

.panel-card{ animation:cardIn .4s var(--ease-out) both; }
@keyframes cardIn{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:none; }
}
/* 类别行：编号 + 名称，像标本标签 */
.panel-card__cat{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  color:var(--panel-accent, var(--accent)); margin-bottom:14px;
  text-transform:uppercase;
}
.panel-card__cat::before{
  content:""; width:6px; height:6px; background:currentColor; flex:none;
}
.panel-card__name{
  font-family:var(--serif); font-size:clamp(20px,2.2vw,26px); font-weight:600;
  letter-spacing:.03em; line-height:1.45; margin-bottom:10px;
  color:var(--ink);
}
.panel-card__scene{
  font-size:13px; color:var(--ink-3); letter-spacing:.02em; line-height:1.85;
}
.panel-card__divider{
  height:1px; margin:20px 0;
  background:var(--line);
}
.panel-card__story{
  font-size:13.5px; line-height:2; color:var(--ink-2); font-weight:400;
  margin-bottom:24px;
}
.panel-card__label{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  color:var(--ink-4); margin-bottom:12px;
}
.panel-card__sparks{ display:flex; flex-direction:column; gap:0; margin-bottom:26px; }
.panel-card__sparks li{
  position:relative; padding:10px 0 10px 22px;
  font-size:13px; line-height:1.8; color:var(--ink-2);
  border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.panel-card__sparks li:first-child{ border-top:1px solid var(--line); }
/* 行首编号，不是小横线 */
.panel-card__sparks li::before{
  content:attr(data-n);
  position:absolute; left:0; top:11px;
  font-family:var(--mono); font-size:10px; color:var(--ink-4);
}
.panel-card__actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- 8. 碰撞 ---------- */
.collide{ max-width:900px; }

.collide__slots{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch;
  gap:0; margin-bottom:20px;
  border:1px solid var(--line-strong);
}

/* 槽位：表格单元格，不是浮起的卡片。中间用竖线分隔。 */
.slot{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  min-height:104px; padding:18px 20px; text-align:left;
  border:none; border-radius:0;
  background:transparent;
  overflow:hidden;
  transition:background .2s;
}
.slot:hover{ background:var(--bg-raised); }
.slot.is-filled{ background:var(--bg-raised); }
/* 填了之后，左边缘出现该频段的实色条 */
.slot::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--slot-accent, transparent);
  opacity:0; transition:opacity .2s;
}
.slot.is-filled::before{ opacity:1; }
.slot__label{
  font-family:var(--mono); font-size:10px; letter-spacing:.26em; color:var(--ink-4);
}
.slot__value{
  font-family:var(--serif); font-size:16px; letter-spacing:.02em; line-height:1.5;
  color:var(--ink-3); transition:color .2s;
}
.slot.is-filled .slot__value{ color:var(--ink); }
.slot__cat{
  margin-top:auto;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:var(--slot-accent, var(--accent)); opacity:0; transition:opacity .2s;
}
.slot.is-filled .slot__cat{ opacity:1; }

/* 中间的连接符：一个静态的十字准星，不旋转 */
.collide__joint{
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-4);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  padding:0 4px;
  background:var(--bg-input);
}
.collide__joint svg{ width:clamp(30px,4vw,44px); height:auto; }
.collide__joint svg circle{ stroke:currentColor; }

.collide__controls{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }

/* 结果：一张打印出来的单子，不是发光卡片 */
.result{
  position:relative; margin-top:14px; padding:clamp(22px,3vw,34px);
  border:1px solid var(--line-strong); border-radius:0;
  background:var(--bg-raised);
  animation:cardIn .45s var(--ease-out) both;
}
/* 左侧实色条 */
.result::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent);
  transform-origin:50% 0;
  animation:barGrow .7s var(--ease-out) .05s both;
}
@keyframes barGrow{
  from{ transform:scaleY(0); }
  to  { transform:scaleY(1); }
}
.result__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.result__tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--ink-4);
}
.result__tools{ display:flex; gap:0; }
.result__text{
  font-family:var(--serif); font-size:clamp(17px,2.3vw,23px); line-height:1.9;
  letter-spacing:.02em; font-weight:500; color:var(--ink);
  margin-bottom:22px; word-break:break-word;
}
.result__text em{
  font-style:normal; color:var(--accent);
  border-bottom:1px solid var(--accent-dim); padding-bottom:1px;
}
.result__text b{
  font-weight:600; color:var(--c-event);
  border-bottom:1px solid rgba(212,120,140,.4); padding-bottom:1px;
}
/* 元信息：不是圆角胶囊，是带分隔符的行内读数 */
.result__meta{
  display:flex; flex-wrap:wrap; gap:0;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  color:var(--ink-3);
  border-top:1px solid var(--line);
  padding-top:14px;
}
.result__meta span{
  padding:0 14px;
  border-left:1px solid var(--line);
}
.result__meta span:first-child{ padding-left:0; border-left:none; }

.collide__tip{
  font-size:12px; color:var(--ink-4); line-height:1.9; margin-top:16px;
  padding-left:14px;
  border-left:1px solid var(--line-strong);
}

/* ---------- 8.5 提案卡 ---------- */
.cardwrap{
  margin-top:28px; padding-top:22px;
  border-top:1px solid var(--line);
}
.cardwrap__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:18px;
}
.cardwrap__title{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:var(--ink); margin-bottom:6px;
}
.cardwrap__sub{
  font-size:11.5px; line-height:1.7; color:var(--ink-4);
  font-family:var(--mono); letter-spacing:.02em;
}
.cardwrap__actions{ display:flex; gap:8px; flex:none; }

/* 缩略预览：放在一个带刻度的展示框里 */
.cardwrap__stage{
  display:flex; justify-content:center;
  padding:clamp(14px,2.6vw,26px);
  border:1px solid var(--line);
  background:var(--bg-input);
}
.cardwrap__stage canvas{
  display:block; width:auto; height:auto;
  max-width:min(100%, 320px); max-height:440px;
  border-radius:0;
  box-shadow:0 0 0 1px var(--line-strong);
  cursor:zoom-in;
  transition:box-shadow .25s;
}
.cardwrap__stage canvas:hover{
  box-shadow:0 0 0 1px var(--accent-dim);
}

/* 放大预览浮层 */
.cardmodal{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.cardmodal[hidden]{ display:none; }
.cardmodal__backdrop{
  position:absolute; inset:0;
  background:rgba(6,7,9,.94);
  animation:fadeIn .25s var(--ease) both;
}
.cardmodal__body{
  position:relative; display:flex; flex-direction:column;
  align-items:center; gap:14px; max-height:100%;
  animation:cardIn .35s var(--ease-out) both;
}
.cardmodal__img{
  display:block; max-width:min(94vw, 620px); max-height:calc(100vh - 130px);
  width:auto; height:auto; border-radius:0;
  box-shadow:0 0 0 1px var(--line-strong);
}
.cardmodal__bar{
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--ink-3);
}
@media (max-width:640px){
  .cardwrap__head{ flex-direction:column; align-items:stretch; }
  .cardwrap__actions{ justify-content:flex-end; }
  .cardwrap__stage canvas{ max-height:340px; }
  .cardmodal__img{ max-height:calc(100vh - 150px); }
}

/* ---------- 9. 选择器浮层 ---------- */
.picker{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.picker__backdrop{
  position:absolute; inset:0; background:rgba(6,7,9,.82);
  animation:fadeIn .2s ease both;
}
.picker__sheet{
  position:relative; width:min(560px,100%); max-height:min(78vh,660px);
  display:flex; flex-direction:column;
  background:var(--bg-raised);
  border:1px solid var(--line-strong); border-radius:0;
  overflow:hidden; animation:sheetIn .3s var(--ease-out) both;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sheetIn{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}
.picker__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 12px;
  border-bottom:1px solid var(--line);
}
.picker__head h3{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; font-weight:400;
  color:var(--ink-2);
}
.picker__search{
  margin:14px 18px 12px; padding:10px 12px;
  border:1px solid var(--line-strong); border-radius:0;
  background:var(--bg-input); font-size:13px; letter-spacing:.02em;
  transition:border-color .2s;
}
.picker__search::placeholder{ color:var(--ink-4); }
.picker__search:focus{
  outline:none; border-color:var(--accent-dim);
}

/* 频段筛选：一排下划线标签，不是胶囊 */
.picker__chips{
  display:flex; flex-wrap:wrap; gap:0; padding:0 18px 12px;
  border-bottom:1px solid var(--line);
}
.picker__chips button{
  padding:6px 12px 8px; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  color:var(--ink-4); border:none; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
  border-radius:0;
}
.picker__chips button:hover{ color:var(--ink-2); }
.picker__chips button.is-on{
  color:var(--chip-c, var(--accent));
  border-bottom-color:currentColor;
}

.picker__list{
  overflow-y:auto; padding:6px 0 12px; flex:1;
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
.picker__list::-webkit-scrollbar{ width:6px; }
.picker__list::-webkit-scrollbar-thumb{ background:var(--line-strong); }

/* 列表项：编号 + 名称 + 描述，像目录 */
.picker__item{
  display:flex; align-items:baseline; gap:12px; width:100%; text-align:left;
  padding:9px 18px;
  border-radius:0;
  transition:background .15s;
}
.picker__item:hover{ background:var(--bg-card); }
.picker__item.is-current{ background:var(--bg-card); box-shadow:inset 2px 0 0 var(--accent); }
.picker__item i{
  width:5px; height:5px; flex:none; transform:translateY(-2px);
}
.picker__item b{
  font-family:var(--sans); font-size:13.5px; font-weight:500; letter-spacing:.02em;
  color:var(--ink); white-space:nowrap;
}
.picker__item small{
  font-size:11.5px; color:var(--ink-4); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.picker__none{ padding:30px 18px; text-align:center; font-size:12.5px; color:var(--ink-4); }

/* ---------- 10. 回声 ---------- */
.echo{ max-width:900px; }

/* 表单：一张待填的表格，不是玻璃卡 */
.echo__form{
  position:relative;
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--line-strong); border-radius:0;
  background:var(--bg-raised);
  margin-bottom:36px;
}
.echo__row{ margin-bottom:14px; }
.echo__field{ display:flex; align-items:center; gap:0; }
.echo__field--wide{ align-items:flex-start; }
.echo__field > span{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--ink-4); flex:none; padding-top:11px; width:70px;
}
.echo__field select,
.echo__field textarea{
  flex:1; width:100%;
  padding:10px 12px; border-radius:0;
  border:1px solid var(--line-strong);
  background:var(--bg-input);
  font-size:13px; letter-spacing:.02em;
  color:var(--ink); transition:border-color .2s;
  resize:vertical; line-height:1.8; font-family:var(--sans);
}
.echo__field select:focus,
.echo__field textarea:focus{
  outline:none; border-color:var(--accent-dim);
}
/* 选项列表由系统绘制，只能给一个深色底兜住 */
.echo__field select option{ background:var(--bg-raised); color:var(--ink); }
.echo__field textarea::placeholder{ color:var(--ink-4); }
.echo__field select{ appearance:none; cursor:pointer; }
.echo__foot{ display:flex; align-items:center; justify-content:flex-end; gap:18px; margin-top:8px; }
.echo__count{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}
.echo__count b{ color:var(--ink-3); font-weight:400; }

.echo__wall{
  columns:3; column-gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
@media (max-width:900px){ .echo__wall{ columns:2; } }
@media (max-width:560px){ .echo__wall{ columns:1; } }

/* 回声卡：网格里的一格，靠边线分隔，不靠阴影浮起 */
.echo__card{
  position:relative; break-inside:avoid;
  padding:16px 18px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:transparent;
  transition:background .2s;
  animation:cardIn .35s var(--ease-out) both;
}
.echo__card:hover{ background:var(--bg-raised); }
/* 悬停时左侧出现该频段实色条 */
.echo__card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--ec, var(--accent));
  opacity:0; transition:opacity .2s;
}
.echo__card:hover::before{ opacity:1; }
.echo__card__text{
  font-size:13.5px; line-height:1.9; color:var(--ink-2); margin-bottom:14px;
  word-break:break-word;
}
.echo__card__foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.echo__card__node{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--ink-4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.echo__card__node i{
  width:4px; height:4px; flex:none;
}
.echo__card__time{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:var(--ink-4);
  flex:none;
  font-variant-numeric:tabular-nums;
}
.echo__empty{ text-align:center; padding:56px 20px; color:var(--ink-4); }
.echo__empty p{ font-family:var(--serif); font-size:16px; color:var(--ink-3); margin-bottom:10px; letter-spacing:.06em; }
.echo__empty span{ font-size:12.5px; }

/* ---------- 11. 关于 ----------
   三栏改成编号条目，每栏顶部一个 01/02/03，像说明书。 */
.about{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.about__col{
  padding:clamp(20px,2.6vw,32px) clamp(20px,2.6vw,32px) 0 0;
  border-right:1px solid var(--line);
}
.about__col:last-child{ border-right:none; padding-right:0; }
.about__col:not(:first-child){ padding-left:clamp(20px,2.6vw,32px); }
.about__col h3{
  font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.16em;
  color:var(--ink-3);
  margin-bottom:18px;
  display:flex; align-items:baseline; gap:10px;
}
.about__col h3::before{
  content:counter(aboutcol, decimal-leading-zero);
  font-size:10px; color:var(--ink-4);
}
.about{ counter-reset:aboutcol; }
.about__col{ counter-increment:aboutcol; }
.about__col p{
  font-size:13.5px; line-height:2; color:var(--ink-2); font-weight:400;
  margin-bottom:14px;
}
.about__col strong{ color:var(--ink); font-weight:500; }
.about__specs{ margin-top:20px; border-top:1px solid var(--line); }
.about__specs li{
  display:flex; gap:14px; padding:8px 0;
  border-bottom:1px solid var(--line); font-size:12px;
  color:var(--ink-2);
}
.about__specs span{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:var(--ink-4); width:44px; flex:none; padding-top:2px;
}

/* ---------- 12. 页脚 ---------- */
.footer{
  position:relative; z-index:2;
  border-top:1px solid var(--line-strong);
  padding:44px var(--pad) 40px;
  background:var(--bg);
}
.footer__inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.footer__mark{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--ink-2);
}
.footer__mark span{
  font-size:9.5px; letter-spacing:.3em;
  color:var(--ink-4); margin-left:10px;
}
.footer__note{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-4); }
.footer__copy{
  font-family:var(--serif); font-size:12.5px; letter-spacing:.1em;
  color:var(--ink-3);
}

/* ---------- 13. Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; z-index:120;
  transform:translate(-50%, 14px); opacity:0; pointer-events:none;
  padding:10px 18px;
  border-radius:0;
  background:var(--bg-raised); border:1px solid var(--line-strong);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--ink);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  max-width:calc(100vw - 40px); text-align:center;
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ---------- 14. 响应式 ---------- */
@media (max-width:1024px){
  .about{ grid-template-columns:1fr 1fr; }
  .about__col:nth-child(2){ border-right:none; padding-right:0; }
  .about__col:last-child{
    grid-column:1 / -1;
    border-top:1px solid var(--line);
    padding-left:0; padding-top:clamp(20px,2.6vw,32px);
  }
}

@media (max-width:880px){
  .map-layout{ grid-template-columns:1fr; }
  .map-stage{ aspect-ratio:1/.98; min-height:0; }
  .map-panel{ min-height:0; padding:22px; justify-content:flex-start; }
  .panel-empty{ padding:20px 0; }
  .about{ grid-template-columns:1fr; }
  .about__col{ border-right:none; padding-right:0; padding-left:0; }
  .about__col:not(:first-child){ padding-left:0; border-top:1px solid var(--line); }
  .about__col:last-child{ grid-column:auto; }
}

@media (max-width:640px){
  body{ font-size:15px; }

  .nav{ height:56px; }
  .nav__links{
    position:fixed; inset:0 0 auto 0; top:0; padding:80px var(--pad) 32px;
    flex-direction:column; gap:0;
    background:var(--bg);
    border-bottom:1px solid var(--line-strong);
    transform:translateY(-100%); opacity:0; pointer-events:none;
    transition:transform .4s var(--ease-out), opacity .25s;
  }
  .nav.is-open .nav__links{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{
    font-family:var(--mono); font-size:15px; letter-spacing:.18em;
    padding:14px 0; border-bottom:1px solid var(--line);
  }
  .nav__links a.is-active{ border-color:var(--line); background:transparent; }
  .nav__toggle{ display:block; }

  .hero{ padding:88px var(--pad) 64px; }
  .hero__corner--tl, .hero__corner--tr{ top:72px; }
  .hero__corner--bl, .hero__corner--br{ bottom:40px; }
  .hero__desc{ font-size:14px; }
  .hero__stats{ gap:0; }
  .hero__stats b{ font-size:22px; }
  .hero__stats div:not(:first-child){ padding-left:16px; }
  .hero__stats span{ font-size:9px; letter-spacing:.12em; }

  /* 区块头：窄屏堆叠，编号在上 */
  .section__head{ grid-template-columns:1fr; row-gap:10px; }
  .kicker{ grid-column:1; grid-row:1; padding-top:0; }
  .section__title{ grid-column:1; grid-row:2; }
  .section__lede{ grid-column:1; grid-row:3; }

  .collide__slots{ grid-template-columns:1fr; }
  .collide__joint{
    border-left:none; border-right:none;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:6px 0;
  }
  .collide__joint svg{ width:34px; }
  .slot{ min-height:84px; padding:14px 16px; }

  .panel-card__actions .btn{ flex:1; }

  .echo__field{ flex-direction:column; align-items:stretch; gap:6px; }
  .echo__field > span{ width:auto; padding-top:0; }
  .echo__foot{ flex-direction:column-reverse; align-items:stretch; gap:10px; }
  .echo__foot .btn{ width:100%; }
  .echo__count{ text-align:right; }

  .picker{ padding:0; align-items:stretch; }
  .picker__sheet{ max-height:100vh; width:100%; border:none; }

  /* 窄屏：图例横向滚动，字号收小，否则六个频道一行塞不下 */
  .map-legend{
    left:0; right:0; bottom:0;
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    border-left:none; border-right:none; border-bottom:none;
  }
  .map-legend::-webkit-scrollbar{ display:none; }
  .map-legend button{
    flex:none; padding:6px 9px; font-size:9px; letter-spacing:.04em; gap:5px;
  }
  .map-legend button i{ width:5px; height:5px; }
  .map-hint{ right:10px; top:10px; font-size:9px; letter-spacing:.04em; }

  .footer__inner{ flex-direction:column; align-items:flex-start; gap:8px; }
}

@media (max-width:380px){
  .hero__actions{ flex-direction:column; width:100%; }
  .hero__actions .btn{ width:100%; }
}