/* 先别修好它 · 早期CGI反常工作台
   有限配色：靛蓝底 / 米白部件 / 琥珀信号 / 青线框 */
:root {
  --bg: #0a0e1c;
  --bg-2: #0d1326;
  --panel: #101830;
  --line: rgba(62, 197, 217, 0.28);
  --text: #D6DEE8;
  --text-dim: #93A0B4;
  --amber: #E8A13C;
  --cyan: #3EC5D9;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(900px 480px at 80% -10%, rgba(62, 197, 217, 0.07), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 400 16px/1.85 var(--sans);
  letter-spacing: 0.01em;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { color: #7fe0ee; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 12px; top: 12px; background: var(--panel); padding: 8px 14px; border: 1px solid var(--line); }

/* ---------- 页头 ---------- */
.page-head {
  max-width: 860px; margin: 0 auto; padding: 54px 22px 6px;
}
.crumb { font-family: var(--mono); font-size: 13.5px; color: var(--text-dim); letter-spacing: 0.12em; margin: 0 0 18px; }
.crumb a { color: var(--text-dim); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.crumb a:hover { color: var(--cyan); border-color: var(--cyan); }
.page-head h1 {
  margin: 0 0 10px; font-weight: 300; letter-spacing: 0.12em;
  font-size: clamp(34px, 6vw, 56px); color: #EDF3FA;
}
.byline { margin: 0; font-size: 14px; color: var(--text-dim); letter-spacing: 0.06em; }

/* ---------- 正文 ---------- */
.page { max-width: 860px; margin: 0 auto; padding: 10px 22px 30px; }
.beat { margin: 0 0 52px; }
.beat h2 {
  font-size: 21px; font-weight: 600; letter-spacing: 0.1em; color: #E7EEF6;
  margin: 0 0 14px; display: flex; align-items: center; gap: 12px;
}
.beat h2::before { content: ""; width: 22px; height: 1px; background: var(--amber); flex-shrink: 0; }
.beat p { max-width: 38em; margin: 0 0 1em; }
.lead {
  font-size: clamp(20px, 3vw, 26px); color: #EDF3FA;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif; letter-spacing: 0.08em;
}
.note { font-size: 14px; color: var(--text-dim); border-left: 2px solid var(--line); padding-left: 14px; }

/* ---------- 工作台 ---------- */
.stage-wrap { margin: 0 0 52px; }
.stage-frame {
  position: relative; border: 1px solid var(--line); background: var(--bg-2);
  aspect-ratio: 16 / 10; max-height: 72vh; width: 100%; overflow: hidden;
}
.stage-frame::before, .stage-frame::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 1px solid var(--cyan); opacity: .7;
}
.stage-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.stage-frame::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
#stage { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: pointer; }

/* 二维回退 */
.fallback-2d { position: absolute; inset: 0; overflow: auto; padding: 18px; }
.fallback-2d h3 { margin: 4px 0 12px; font-size: 16px; color: #E7EEF6; }
.fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fb-grid figure { margin: 0; border: 1px solid var(--line); background: rgba(16, 24, 48, .5); }
.fb-grid svg { display: block; width: 100%; height: auto; }
.fb-grid figcaption { padding: 8px 10px 10px; font-size: 13.5px; color: var(--text-dim); line-height: 1.6; }
.noscript-note { border: 1px dashed var(--line); padding: 12px 16px; margin-top: 12px; }
.noscript-note p { margin: 0; font-size: 15px; }

/* 控制台 */
.console {
  border: 1px solid var(--line); border-top: 0; background: var(--panel);
  padding: 12px 16px 14px; font-family: var(--mono);
}
.task-line {
  margin: 0 0 10px; font-family: var(--sans); font-size: 15.5px; color: var(--text);
  border-bottom: 1px dashed rgba(147, 160, 180, .3); padding-bottom: 10px; max-width: 40em;
}
.status { margin: 0 0 10px; font-size: 14px; color: var(--cyan); letter-spacing: 0.08em; }
.status.ok { color: var(--amber); }
.keys { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  font-family: var(--mono); font-size: 15px; letter-spacing: 0.08em;
  color: var(--text); background: transparent; border: 1px solid var(--line);
  padding: 9px 18px; cursor: pointer; border-radius: 2px;
  transition: border-color .2s, color .2s, background .2s;
}
.btn:hover { border-color: var(--cyan); color: #fff; }
.btn small { color: var(--text-dim); font-size: 12px; margin-left: 6px; }
.btn-main { border-color: rgba(232, 161, 60, .55); color: var(--amber); }
.btn-main:hover { border-color: var(--amber); color: #ffcf8a; background: rgba(232, 161, 60, .08); }
.hint { margin: 12px 0 0; font-size: 13.5px; color: var(--text-dim); line-height: 1.8; font-family: var(--sans); }
.hint a { border-bottom: 1px dashed var(--line); }

/* ---------- 试验记录 ---------- */
.record { border: 1px solid rgba(232, 161, 60, .4); background: linear-gradient(160deg, rgba(232,161,60,.07), transparent 65%); padding: 6px 20px; }
.record-list { list-style: none; margin: 12px 0; padding: 0; }
.record-list li { display: grid; grid-template-columns: 5.5em 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(147,160,180,.22); font-size: 15.5px; max-width: 40em; }
.record-list li:last-child { border-bottom: 0; }
.record-list strong { color: var(--amber); font-weight: 600; letter-spacing: 0.14em; font-size: 14px; padding-top: 2px; }
.after-record { font-size: 15px; color: var(--text-dim); border-left: 2px solid var(--line); padding-left: 14px; max-width: 38em; }

/* ---------- 页脚 ---------- */
.page-foot {
  max-width: 860px; margin: 0 auto; padding: 26px 22px 60px;
  border-top: 1px solid rgba(147, 160, 180, .16);
  font-size: 14px; color: var(--text-dim);
}
.page-foot p { margin: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  .page-head { padding-top: 34px; }
  .beat { margin-bottom: 40px; }
  .stage-frame { aspect-ratio: 5 / 4; }
  .fb-grid { grid-template-columns: 1fr; }
  .record-list li { grid-template-columns: 1fr; gap: 2px; }
  .keys .btn { flex: 1 1 auto; }
}

/* ---------- 减少动态：界面层不做位移过渡 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}