/* ============ 深林烫金 forest-gold — 深夜书房里烫金的工程笔记 ============ */
  /* 变量唯一事实来源 tokens.css(先引入);此处为工具层别名/派生。
     注意: app.js 的 COL 在加载时读取这些变量画 canvas —— canvas 不认 color-mix(),
     凡 COL 读取的变量(bg/panel/line/ink/blue/orange/green/hot/danger/steel)一律写字面量或 var() 链。 */
  :root {
    color-scheme: dark;
    --grain-opacity: 0.08;   /* 工具 UI 密度高,颗粒减半(覆盖 tokens) */
    --bg:      var(--paper);
    --panel:   #18221c;      /* ink 5% on --paper */
    --panel-2: #1f2822;      /* ink 8% on --paper */
    --line-2:  rgba(240,234,217,0.22);
    --ink-2:   #b9c0a8;      /* ink 与 ink-soft 之间的中间档(工具层派生) */
    --ink-3:   #7f8b76;      /* = tokens --ink-soft */
    --blue:    var(--c3);    /* shipped design — 黛蓝 */
    --orange:  var(--c2);    /* uniform offset — 陶土 */
    --green:   var(--accent);/* your design (主角) — 亮金:最重要者唯一用金 */
    --hot:     var(--accent);/* load / contact — 金色系 */
    --danger:  #c25a45;      /* 工具层功能状态色(陶土红): 卡死/错误 */
    --steel:   #6d8d92;      /* housing / pins — c3×ink-soft 55:45 */
    --frame:   rgba(240,234,217,0.40);
    --mono: var(--font-mono);
    --sans: var(--font-sans);
    --disp: var(--font-serif);
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; color: var(--ink);
    background: var(--bg);
    font-family: var(--sans); line-height: 1.55; font-size: 16px;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: var(--accent); color: var(--paper); }
  :where(a, button, input, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* 质感层:暗角 + 静态粗颗粒(配方在 tokens.css) */
  body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 998;
    background: var(--vignette);
  }
  body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999;
    opacity: var(--grain-opacity); background-image: var(--grain-image);
  }
  /* 烫金渐变:只给标点与短语级强调词 */
  .foil {
    background: var(--foil); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: foil 6s linear infinite;
  }
  @keyframes foil { to { background-position: 200% center; } }

  /* drawing frame: hairline border + inner hairline, kept from the sheet motif */
  .wrap {
    max-width: 1200px; margin: 16px auto; padding: 34px 26px 40px;
    border: 1px solid var(--frame); position: relative;
  }
  .wrap::after {
    content: ""; position: absolute; inset: 5px; pointer-events: none;
    border: 1px solid rgba(240,234,217,.10);
  }
  @media (max-width: 720px){ .wrap { margin: 8px; padding: 22px 14px 28px; } }

  /* ---- header ---- */
  header { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 22px; }
  .topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
  .eyebrow {
    font-family: var(--mono); font-size: 12.5px; letter-spacing: .26em;
    text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px;
  }
  h1 {
    font-family: var(--disp); font-weight: 900;
    font-size: clamp(30px, 4.6vw, 48px); line-height: 1.04; margin: 0 0 12px;
    letter-spacing: 0; text-wrap: balance;
  }
  h1 .thin { display: block; font-family: var(--font-en); font-style: italic; color: var(--ink-3); font-weight: 400; font-size: .48em; margin-top: 8px; letter-spacing: 0; }   /* own line: no mid-title wrap fighting the big words */
  :root:lang(zh) h1 .thin { font-family: var(--font-serif); font-style: normal; }   /* EB Garamond 无 CJK,中文副题回退衬线正体 */
  .lede { color: var(--ink-2); max-width: 68ch; margin: 0; font-size: 17px; }
  /* language toggle */
  .lang { display: inline-flex; gap: 6px; flex: none; }
  .lang button {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase;
    padding: 0.45rem 1.1rem; cursor: pointer; color: var(--ink);
    background: transparent; border: 1px solid var(--line); border-radius: 999px;
    transition: all var(--dur-fast) var(--ease-out);
  }
  .lang button.on { color: var(--accent); border-color: var(--accent); }
  .lang button:not(.on):hover { border-color: var(--accent); color: var(--accent); }

  /* ---- geometry / spec bar ---- */
  .setup { background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 16px 18px; margin-bottom: 16px; }
  /* panel titles: serif 600 over a hairline rule */
  .setup h2, .panel h2 {
    font-family: var(--disp); font-size: 17px; letter-spacing: .02em;
    color: var(--ink); margin: 0 0 14px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    padding-bottom: 8px; border-bottom: 1px solid var(--line);
  }
  .panel h2 .aux { font-family: var(--mono); color: var(--ink-3); letter-spacing: 0; text-transform: none; font-size: 12.5px; font-weight: 400; margin-left: auto; }
  /* pin: float a chart panel bottom-right so it stays visible while tuning sliders elsewhere */
  .panel h2 .pin { flex: none; font-family: var(--mono); font-size: 12px; line-height: 1; color: var(--ink-3);
    background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 3px 7px; cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out); }
  .panel h2 .pin:hover { color: var(--accent); border-color: var(--accent); }
  .panel.pinned { position: fixed; right: 18px; bottom: 18px; width: min(420px, 46vw); z-index: 60;
    max-height: 78vh; overflow: auto; border-color: var(--line-2); box-shadow: 0 14px 44px rgba(0,0,0,.5); }
  .panel.pinned h2 .pin { color: var(--accent); }
  @media (max-width: 720px){ .panel.pinned { width: calc(100vw - 24px); right: 12px; bottom: 12px; max-height: 55vh; } }
  .fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
  @media (max-width: 720px){ .fields { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 420px){ .fields { grid-template-columns: repeat(2, 1fr); } }
  .field { display: flex; flex-direction: column; gap: 5px; }
  .field label { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
  .field .unit { color: var(--ink-3); }
  .field input {
    font-family: var(--mono); font-size: 15px; color: var(--ink); background: var(--panel-2);
    border: 1px solid var(--line-2); border-radius: 3px; padding: 8px 10px; width: 100%;
    font-variant-numeric: tabular-nums;
  }
  .field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
  .field input:invalid { border-color: var(--danger); }   /* typed value outside min/max: the math clamps it, the border says so */
  .field input:invalid:focus-visible { outline-color: var(--danger); }
  .field input[type=checkbox] { width: 22px; height: 22px; margin-top: 7px; padding: 0; accent-color: var(--accent); cursor: pointer; }
  .warnbar { display: none; margin-top: 12px; font-family: var(--mono); font-size: 13px; color: var(--hot);
    border: 1px solid var(--hot); background: rgba(220,187,85,.10); border-radius: 2px; padding: 8px 11px; }
  .warnbar.on { display: block; }

  /* ---- manufacturing plan ---- */
  .advset { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 8px; }
  .advset:not([open]) > *:not(summary) { display: none; }   /* force-collapse content when closed */
  .advset > summary { font-family: var(--mono); font-size: 12px; color: var(--ink-3); cursor: pointer; letter-spacing: .04em; list-style: revert; user-select: none; }
  .advset > summary:hover { color: var(--ink-2); }
  .advset > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
  .advset[open] > summary { margin-bottom: 12px; }
  .advset .metrics { border-top: none; margin-top: 0; padding-top: 0; }
  .mfg { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 12px; }
  .mfg h3 { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; font-weight: 500; letter-spacing: .04em; }
  .mfgfields { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 720px){ .mfgfields { grid-template-columns: repeat(2, 1fr); } }
  .field select {
    font-family: var(--mono); font-size: 13px; color: var(--ink); background: var(--panel-2);
    border: 1px solid var(--line-2); border-radius: 3px; padding: 7px 8px; width: 100%;
  }
  .field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
  .budget { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); margin-top: 12px; line-height: 2; }
  .budget b { color: var(--ink); font-weight: 500; }
  .budget .src { display: inline-block; margin-right: 16px; white-space: nowrap; }
  .budget .bar { display: inline-block; height: 6px; background: var(--ink); border-radius: 0; vertical-align: middle; margin-right: 6px; }
  .budget .hint { color: var(--hot); white-space: nowrap; }

  /* ---- layout ---- */
  .grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: start; }   /* start: a tall foldout must not stretch its row-mate into dead space */
  @media (max-width: 880px) { .grid { grid-template-columns: 1fr; } }
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 18px; position: relative; min-width: 0; }
  .full { grid-column: 1 / -1; }

  canvas { display: block; width: 100%; max-width: 100%; min-width: 0; }
  #stage { aspect-ratio: 1 / 1; }
  #tooth { aspect-ratio: 16 / 9; }
  #clr   { aspect-ratio: 21 / 8; }

  /* ---- mesh overlay ---- */
  .stagewrap { position: relative; }
  .jam {
    position: absolute; top: 12px; left: 12px; right: 12px; font-family: var(--mono); font-size: 13px;
    letter-spacing: .06em; color: var(--danger); border: 1px solid var(--danger);
    background: rgba(194,90,69,.16); padding: 6px 10px; border-radius: 2px; display: none;
  }
  .jam.on { display: block; }
  .transport { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
  button.play {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink); background: transparent;
    border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 1.1rem; cursor: pointer;
    min-width: 96px; transition: all var(--dur-fast) var(--ease-out);
  }
  button.play:hover { border-color: var(--accent); color: var(--accent); }
  .transport label { font-family: var(--mono); font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 10px; flex: 1; }

  /* ---- presets + sliders ---- */
  .presets { display: flex; gap: 7px; margin-bottom: 20px; }
  .presets button {
    flex: 1; font-family: var(--mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase;
    padding: 0.45rem 1.1rem; cursor: pointer; color: var(--ink);
    background: transparent; border: 1px solid var(--line); border-radius: 999px;
    transition: all var(--dur-fast) var(--ease-out);
  }
  .presets button:hover { border-color: var(--accent); color: var(--accent); }
  .presets button.active { border-color: currentColor; }
  .presets button[data-k="uniform"].active { color: var(--orange); background: color-mix(in srgb, var(--c2) 12%, transparent); }
  .presets button[data-k="deep"].active { color: var(--blue); background: color-mix(in srgb, var(--c3) 12%, transparent); }
  .presets button[data-k="ga"].active { color: var(--green); background: color-mix(in srgb, var(--accent) 12%, transparent); }

  .ctl { margin-bottom: 16px; }
  .ctl .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 10px; }
  .ctl .name { font-family: var(--mono); font-size: 14px; color: var(--ink); }
  .ctl .name .desc { color: var(--ink-3); font-size: 12.5px; margin-left: 8px; }
  .ctl .val { font-family: var(--mono); font-size: 15px; color: var(--hot); font-variant-numeric: tabular-nums; }
  input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: var(--line-2); border-radius: 0; outline: none; margin: 9px 0; }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); cursor: pointer; box-shadow: 0 0 0 1px var(--line-2); }
  input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); cursor: pointer; }
  input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--accent); }
  input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--accent); }

  /* ---- metrics ---- */
  .metrics { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 16px; }
  .mgroup { font-family: var(--mono); font-size: 0.72rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 500; padding: 14px 0 3px; border-bottom: 1px solid var(--line); }
  .mgroup:first-child { padding-top: 0; }
  .metric { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: 0; }
  .metric .k { font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
  .metric .k small { color: var(--ink-3); display: block; font-size: 12px; margin-top: 1px; }
  .metric .v { font-family: var(--mono); font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
  .metric .v u { text-decoration: none; color: var(--ink-3); font-size: 12.5px; margin-left: 4px; }
  .metric .v.warn { color: var(--hot); }
  .metric .v.bad  { color: var(--danger); }
  .metric .delta { font-size: 12.5px; margin-left: 7px; }
  .delta.up { color: var(--blue); } .delta.down { color: var(--danger); }

  .legend { display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin-top: 12px; }
  .legend span { display: inline-flex; align-items: center; gap: 7px; }
  .swatch { width: 20px; height: 3px; border-radius: 0; display: inline-block; }

  /* ---- export ---- */
  .export .eqrow { margin-bottom: 14px; }
  .export .eqlabel { font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin-bottom: 6px; display: block; }
  .export pre {
    font-family: var(--mono); font-size: 12.5px; color: var(--ink); background: rgba(9,15,11,.55);
    border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; margin: 0;
    overflow-x: auto; white-space: pre; line-height: 1.5;
  }
  .actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; }
  .actions button {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink); background: transparent;
    border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 1.1rem; cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
  }
  .actions button:hover { border-color: var(--accent); color: var(--accent); }
  /* 主按钮:平金填充胶囊(下载 CSV) */
  .actions button#dl-csv {
    background: var(--accent); color: var(--paper); border-color: var(--accent);
  }
  .actions button#dl-csv:hover { filter: brightness(1.1); color: var(--paper); }
  .export .how { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
  .export .how b { color: var(--ink-2); font-weight: 500; }

  /* ---- optimize ---- */
  .optbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
  button.optbtn {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--paper); background: var(--accent);
    border: 1px solid var(--accent); border-radius: 999px; padding: 0.55rem 1.3rem; cursor: pointer; font-weight: 500;
    transition: all var(--dur-fast) var(--ease-out);
  }
  button.optbtn:hover { filter: brightness(1.1); }
  button.optbtn:disabled { background: var(--panel-2); border-color: var(--line-2); color: var(--ink-3); cursor: default; filter: none; }
  .optstat { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); flex: 1; min-width: 220px; }
  .optstat.ok   { color: var(--blue); }
  .optstat.warn { color: var(--hot); }
  .optstat.err  { color: var(--danger); }
  .optstat.busy { color: var(--ink-2); }
  /* pre-run / stale: collapse the empty plot area to a one-line ghost hint instead of a 430px void */
  .optghost { display: none; font-family: var(--mono); font-size: 13px; color: var(--ink-3);
    border: 1px dashed var(--line-2); border-radius: 2px; padding: 26px 12px; text-align: center; }
  #optpanel.optempty .optghost { display: block; }
  #optpanel.optempty #optbody { display: none; }
  .optgrid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 16px; }
  @media (max-width: 720px){ .optgrid { grid-template-columns: 1fr; } }
  #optplot { display: block; width: 100%; aspect-ratio: 2 / 1; cursor: crosshair; }
  .optpick { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); border-left: 1px solid var(--line); padding-left: 14px; }
  .optpick .row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
  .optpick .row b { color: var(--ink); font-weight: 500; }
  .optpick .muted { color: var(--ink-3); }
  .optpick .load { margin-top: 10px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 1.1rem; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
  .optpick .load:hover { border-color: var(--accent); color: var(--accent); }

  /* CJK doesn't benefit from the wide tracking meant for uppercase Latin */
  :root:lang(zh) .eyebrow { letter-spacing: .1em; }
  :root:lang(zh) .setup h2, :root:lang(zh) .panel h2 { letter-spacing: .08em; }
  :root:lang(zh) h1 { letter-spacing: .01em; }

  /* ---- footer = title block ---- */
  footer { margin-top: 28px; color: var(--ink-3); font-size: 14px; }
  .tblock { display: grid; grid-template-columns: 2.4fr repeat(6, 1fr); border: 1.5px solid var(--frame); margin-bottom: 16px; }
  .tb { border-right: 1px solid var(--line-2); padding: 7px 10px 8px; min-width: 0; }
  .tb:last-child { border-right: 0; }
  .tb-k { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; white-space: nowrap; }
  .tb-v { display: block; font-family: var(--disp); font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
  @media (max-width: 880px){
    .tblock { grid-template-columns: repeat(3, 1fr); }
    .tb.wide { grid-column: 1 / -1; border-right: 0; }
    .tb:nth-child(3n+1){ border-right: 0; }   /* rows of 3 after the full-width title cell */
    .tb:nth-child(n+2){ border-top: 1px solid var(--line-2); }
  }
  footer .read { margin: 0; }
  footer b { color: var(--ink-2); font-weight: 500; }
  footer code { font-family: var(--mono); color: var(--ink-2); }
  .note { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }

  @media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; }
  }