/* ============================================================
   站点通用「印张」外壳 —— 应用页版（工具 / 测验 / 小游戏）
   ------------------------------------------------------------
   源：.recon/书架/外层.css（页面底色 + 页头 mast + 页脚）
       .recon/书架/书架.css（印张 .sheet / 尺 / 页眉 / 总账 / 落款）
   这三页（速查 / 实用工具 / 自测）下面挂着 24 个独立小应用，
   它们原本各写一套「黑底居中」的样式，和上面那三页不是一张纸。
   这里把印张那套原样搬过来，再补一套应用控件原语（按钮 / 输入 /
   分段器 / 滑杆 / 读数 / 舞台），让 24 个应用只写业务、不写皮。

   落盘位置：~/Desktop/网站/外壳/应用.css
   24 个应用都在两级目录下，所以统一 <link href="../../外壳/应用.css">。
   由 .recon/生成应用外壳.py 从本文件同步到站点。
   ============================================================ */

/* ═══════════ 一、外层：页面底色、页头、页脚 ═══════════ */

:root{
  color-scheme: light dark;
  --page-bg: light-dark(rgb(250 250 252), rgb(15 16 19));
  --pc:  light-dark(rgb(0 0 0 / 3%),    rgb(255 255 255 / 5.5%));
  --pf:  light-dark(rgb(24 26 30),      rgb(238 240 244));
  --pm:  light-dark(rgb(24 26 30 / 52%), rgb(238 240 244 / 54%));
  --pfa: light-dark(rgb(24 26 30 / 38%), rgb(238 240 244 / 40%));
  --pl:  light-dark(rgb(0 0 0 / 9%),    rgb(255 255 255 / 11%));
  --pls: light-dark(rgb(0 0 0 / 17%),   rgb(255 255 255 / 20%));
  --pa:  light-dark(rgb(10 10 11),      rgb(244 244 245));
  --pon: light-dark(rgb(252 252 253),   rgb(14 15 18));
}
*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
body{
  background: var(--page-bg); color: var(--pf);
  font: 400 14px/1.5 system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.page{ max-width: 1120px; margin: 0 auto; padding: 34px 24px 72px; }

/* ——— 页头：跟门户、动态、游戏厅同一行 ——— */
.mast{
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 4px 2px 16px; margin-bottom: 22px;
  border-bottom: 1px solid var(--pl);
  animation: uniPopIn .42s cubic-bezier(.2,.7,.3,1) backwards;
}
.mast::after{
  content: ''; position: absolute; left: 2px; bottom: -1px;
  width: 46px; height: 1.5px; border-radius: 2px; background: var(--pa);
}
.mastId{ display: flex; align-items: center; gap: 13px; min-width: 0; }
.mastMark{
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pf); color: var(--pon); font-size: 15px; font-weight: 700; line-height: 1;
}
.mastWord{ display: flex; align-items: center; gap: 11px; min-width: 0; }
.mastEn{ font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: .28em; margin-right: -.28em; }
.mastSep{ flex: 0 0 auto; width: 1px; height: 16px; background: var(--pls); }
.mastZh{ font-size: 12.5px; letter-spacing: .16em; color: var(--pm); white-space: nowrap; }
.mastBack{
  flex: 0 0 auto; font-size: 10.5px; letter-spacing: .14em; color: var(--pfa);
  text-decoration: none; padding: 5px 10px; border: 1px solid var(--pl); border-radius: 999px;
  transition: color .22s ease-out, border-color .22s ease-out, background .22s ease-out;
}
.mastBack:hover{ color: var(--pf); border-color: var(--pls); background: var(--pc); }
.page-foot{
  margin: 22px 0 0; padding-top: 12px; border-top: 1px solid var(--pl);
  font-size: 11px; letter-spacing: .06em; color: var(--pm);
}

@media (max-width: 620px){
  .mast{ gap: 12px; }
  .mastEn{ font-size: 19px; letter-spacing: .18em; margin-right: -.18em; }
  .mastZh{ font-size: 11.5px; letter-spacing: .1em; }
  .mastBack{ padding: 4px 8px; }
}
@media (max-width: 460px){
  .mastId{ gap: 10px; }
  .mastWord{ gap: 8px; }
  .mastEn{ font-size: 15px; letter-spacing: .12em; margin-right: -.12em; }
  .mastZh{ display: none; }
}

/* ═══════════ 二、印张：一张纸 + 一把尺 + 页眉 + 总账 + 落款 ═══════════ */

#uniRoot{
  --paper: light-dark(#ffffff, #0b0b0c);
  --ink:   light-dark(#0a0a0b, #f4f4f5);
  --mut:   light-dark(rgb(10 10 11 / 56%), rgb(244 244 245 / 56%));
  --dim:   light-dark(rgb(10 10 11 / 40%), rgb(244 244 245 / 42%));
  --mesh:  light-dark(rgb(10 10 11 / 8%),  rgb(244 244 245 / 7%));
  --rule:  light-dark(rgb(10 10 11 / 15%), rgb(244 244 245 / 15%));
  --rule2: light-dark(rgb(10 10 11 / 42%), rgb(244 244 245 / 34%));
  --plate: light-dark(rgb(10 10 11 / 80%), rgb(244 244 245 / 26%));
  --edge:  light-dark(rgb(10 10 11 / 22%), rgb(244 244 245 / 18%));
  --cloth: light-dark(rgb(10 10 11 / 5.5%), rgb(244 244 245 / 5.5%));
  color: var(--ink);
  font-family: inherit;
}
#uniRoot *{ box-sizing: border-box; }

#uniRoot .sheet{
  position: relative; isolation: isolate; overflow: hidden;
  padding: 34px 22px 20px; border-radius: 3px;
  border: 1.5px solid var(--plate);
  background-color: var(--paper);
  background-image: radial-gradient(circle, var(--mesh) 0 .9px, transparent 1.15px);
  background-size: 13px 13px;
  color: var(--ink);
  animation: uniPopIn .5s cubic-bezier(.2,.7,.3,1) backwards;
}
#uniRoot .sheet::before{
  content: ''; position: absolute; inset: 9px; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2)),
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2)),
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2)),
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2));
  background-size: 13px 1px, 1px 13px, 13px 1px, 1px 13px,
                   13px 1px, 1px 13px, 13px 1px, 1px 13px;
  background-position: left top, left top, right top, right top,
                       left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}
#uniRoot .sheet > *{ position: relative; z-index: 1; }

#uniRoot .rulerEdge{
  position: absolute; left: 22px; right: 22px; top: 20px; height: 7px;
  pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(90deg, var(--rule2) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, var(--rule2) 0 1px, transparent 1px 30px);
  background-size: 100% 4px, 100% 7px;
  background-position: left top, left top;
  background-repeat: repeat-x, repeat-x;
}
#uniRoot .rulerEdge b{
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule2);
}

#uniRoot .head{ display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 6px 0 0; }
#uniRoot .headMain{ min-width: 0; }
#uniRoot .headZh{ font-size: 30px; font-weight: 700; letter-spacing: .1em; line-height: 1; }
#uniRoot .headEn{
  margin-top: 7px; font-size: 10px; letter-spacing: .3em; color: var(--dim);
  text-transform: uppercase;
}
#uniRoot .headActs{ margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#uniRoot .pill{
  font-size: 10.5px; letter-spacing: .1em; color: var(--mut); text-decoration: none;
  padding: 5px 11px; border: 1px solid var(--rule); border-radius: 999px; white-space: nowrap;
  background: transparent; font-family: inherit; cursor: pointer;
  transition: color .22s ease-out, border-color .22s ease-out, background .22s ease-out;
}
#uniRoot .pill:hover{ color: var(--paper); background: var(--ink); border-color: var(--ink); }

#uniRoot .ledger{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0;
  margin: 18px 0 4px; padding: 9px 0; border-top: 1px solid var(--rule2); border-bottom: 1px solid var(--rule);
  font-size: 10.5px; letter-spacing: .1em; color: var(--dim);
}
#uniRoot .ledger span{ padding: 0 11px; border-left: 1px solid var(--rule); }
#uniRoot .ledger span:first-child{ border-left: 0; padding-left: 0; }
#uniRoot .ledger b{ color: var(--ink); font-weight: 600; margin-right: 3px; }

#uniRoot .sheetFoot{
  margin-top: 26px; padding-top: 11px; border-top: 1.5px solid var(--plate);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-size: 10px; letter-spacing: .12em; color: var(--dim);
}
#uniRoot .sheetFoot .sig{ margin-left: auto; }

@keyframes uniPopIn{ from{ opacity: 0; transform: translateY(10px); }
                     to{ opacity: 1; transform: none; } }
#uniRoot .rulerEdge,
#uniRoot .head,
#uniRoot .ledger{ animation: uniPopIn .42s cubic-bezier(.2,.7,.3,1) backwards; }
#uniRoot .rulerEdge{ animation-delay: 60ms; }
#uniRoot .head{ animation-delay: 130ms; }
#uniRoot .ledger{ animation-delay: 200ms; }
#uniRoot .sheetFoot{ animation: uniPopIn .42s cubic-bezier(.2,.7,.3,1) backwards;
                     animation-delay: 320ms; }

/* ═══════════ 三、工具台：印张里的操作原语 ═══════════
   24 个应用只写业务，控件一律用下面这些类。
   --paper/--ink/--rule… 全部跟着印张走，所以工具自动有明暗两态。 */

#uniRoot .tool{ display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
#uniRoot .row{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#uniRoot .row.top{ align-items: flex-start; }
#uniRoot .row.mid{ align-items: center; }
#uniRoot .spread{ justify-content: space-between; }
#uniRoot .grow{ flex: 1 1 200px; min-width: 0; }
#uniRoot .label{ font-size: 10.5px; letter-spacing: .14em; color: var(--dim); white-space: nowrap; }

/* ——— 输入 ——— */
#uniRoot .field{
  font: inherit; font-size: 13.5px; line-height: 1.75; color: var(--ink);
  background: var(--cloth); border: 1px solid var(--rule); border-radius: 3px;
  padding: 10px 12px; width: 100%; resize: vertical;
}
#uniRoot .field:focus{ outline: none; border-color: var(--rule2); background: var(--paper); }
#uniRoot .field::placeholder{ color: var(--dim); }
#uniRoot textarea.field{ min-height: 92px; }
#uniRoot select.field{ cursor: pointer; }
#uniRoot .field.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

/* ——— 按钮 ——— */
#uniRoot .btn{
  font: inherit; font-size: 11.5px; letter-spacing: .16em; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule2); border-radius: 3px;
  padding: 9px 17px; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out, opacity .2s;
}
#uniRoot .btn:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
#uniRoot .btn.solid{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
#uniRoot .btn.solid:hover{ opacity: .84; }
#uniRoot .btn:disabled{ opacity: .38; cursor: not-allowed; }
#uniRoot .btn:disabled:hover{ background: var(--paper); color: var(--ink); border-color: var(--rule2); }
#uniRoot .btn.sm{ padding: 6px 12px; font-size: 10.5px; letter-spacing: .12em; }

/* ——— 分段器 ——— */
#uniRoot .seg{ display: inline-flex; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
#uniRoot .seg button{
  font: inherit; font-size: 11px; letter-spacing: .12em; color: var(--dim);
  background: transparent; border: 0; padding: 8px 13px; cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out;
}
#uniRoot .seg button + button{ border-left: 1px solid var(--rule); }
#uniRoot .seg button.on{ background: var(--ink); color: var(--paper); }
#uniRoot .seg button:not(.on):hover{ background: var(--cloth); color: var(--ink); }

/* ——— 滑杆 ——— */
#uniRoot input[type=range]{
  -webkit-appearance: none; appearance: none; width: 132px; height: 2px;
  background: var(--rule2); border-radius: 2px; outline: none; vertical-align: middle;
}
#uniRoot input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink); cursor: pointer;
}
#uniRoot input[type=range]::-moz-range-thumb{
  width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer;
}
#uniRoot output{ font-variant-numeric: tabular-nums; color: var(--ink); min-width: 2.6em; display: inline-block; }

/* ——— 键盘焦点：所有可点/可输入的东西都要有可见焦点 ———
   ⚠️ .mast 与 .page-foot 在 #uniRoot 外面，那儿没有 --ink（它只定义在 #uniRoot 上），
   var(--ink) 会取空值、整条 outline 声明在计算值阶段失效 → 描边消失。所以这两条用 currentColor。 */
/* 兜底：hidden 属性必须真的藏起来。
   作者样式里任何一条 display 都会盖掉 UA 的 [hidden]{display:none}，
   一旦某页给 .btn/.msg/.pane 加了 display，hidden 就静默失效
   （N-back / 反应时 就是这么把三四个舞台面板同时铺出来的）。 */
#uniRoot [hidden]{ display: none !important; }

#uniRoot :is(a, button, input, textarea, select, [tabindex]):focus-visible{
  outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px;
}
.mast :is(a, button):focus-visible,
.page-foot a:focus-visible{
  outline: 2px solid var(--pf); outline-offset: 2px; border-radius: 2px;
}
.page-foot a{ color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--pls); transition: border-color .18s ease, color .18s ease; }
.page-foot a:hover{ color: var(--pf); border-color: var(--pf); }
#uniRoot .field:focus-visible{ outline-offset: -1px; }

/* ——— 开关 ——— */
#uniRoot .switch{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 11px; letter-spacing: .12em; color: var(--mut); }
#uniRoot .switch input{ appearance: none; -webkit-appearance: none; width: 30px; height: 16px;
  border-radius: 999px; background: var(--cloth); border: 1px solid var(--rule2); position: relative;
  cursor: pointer; transition: background-color .2s ease-out; flex: 0 0 auto; }
#uniRoot .switch input::after{ content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--rule2); transition: transform .2s ease-out, background-color .2s ease-out; }
#uniRoot .switch input:checked{ background: var(--ink); border-color: var(--ink); }
#uniRoot .switch input:checked::after{ transform: translateX(14px); background: var(--paper); }

/* ——— 读数：一行数字 ——— */
#uniRoot .stats{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0;
  padding: 10px 0; border-top: 1px solid var(--rule2); border-bottom: 1px solid var(--rule);
}
#uniRoot .stat{ padding: 0 16px; border-left: 1px solid var(--rule); }
#uniRoot .stat:first-child{ border-left: 0; padding-left: 0; }
#uniRoot .stat b{ display: block; font-size: 21px; font-weight: 600; letter-spacing: .01em;
  line-height: 1.15; font-variant-numeric: tabular-nums; }
#uniRoot .stat i{ font-style: normal; font-size: 10px; letter-spacing: .12em; color: var(--dim); }

/* ——— 舞台：整块可点的大面（认知实验、听辨、弹琴） ——— */
#uniRoot .stage{
  position: relative; overflow: hidden; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper); min-height: min(46vh, 340px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 26px 20px; text-align: center;
  user-select: none; -webkit-user-select: none;
}
#uniRoot .stage.click{ cursor: pointer; }
#uniRoot .stage.invert{ background: var(--ink); color: var(--paper); }
#uniRoot .stage.big b{ font-size: clamp(34px, 9vw, 64px); font-weight: 600; letter-spacing: .06em; line-height: 1; }
#uniRoot .stage p{ margin: 0; font-size: 12px; letter-spacing: .1em; color: var(--mut); max-width: 44ch; }
#uniRoot .stage.invert p{ color: var(--paper); opacity: .7; }

/* ——— 结果块 ——— */
#uniRoot .out{
  border: 1px solid var(--rule); border-radius: 3px; background: var(--cloth);
  padding: 13px 14px; font-size: 13px; line-height: 1.8; min-height: 46px;
  white-space: pre-wrap; word-break: break-word;
}
#uniRoot .out.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
#uniRoot .out.empty{ color: var(--dim); }
#uniRoot .msg{ font-size: 11px; letter-spacing: .1em; color: var(--dim); min-height: 1.5em; }
#uniRoot .msg.warn{ color: var(--ink); }
#uniRoot .hint{ font-size: 11px; line-height: 1.75; letter-spacing: .04em; color: var(--dim); margin: 0; }
#uniRoot .kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px;
  padding: 1px 5px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
  color: var(--mut);
}

/* ——— 格子：可点的卡片（选项、题面、音色…） ——— */
#uniRoot .tiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 8px; }
#uniRoot .tile{
  position: relative; display: flex; flex-direction: column; gap: 5px; padding: 11px 12px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
  font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: none;
  transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out;
}
#uniRoot .tile b{ font-size: 12.5px; font-weight: 600; letter-spacing: .05em; }
#uniRoot .tile i{ font-style: normal; font-size: 9.5px; line-height: 1.45; color: var(--dim); }
#uniRoot .tile:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
#uniRoot .tile:hover i{ color: var(--paper); opacity: .7; }
#uniRoot .tile.on{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
#uniRoot .tile.on i{ color: var(--paper); opacity: .7; }
#uniRoot .tile.ok{ border-color: var(--rule2); }
#uniRoot .tile.bad{ opacity: .45; }

/* ——— 一栏一栏的清单 ——— */
#uniRoot .list{ display: flex; flex-direction: column; }
#uniRoot .item{
  display: flex; align-items: baseline; gap: 10px; padding: 9px 2px;
  border-bottom: 1px solid var(--rule); font-size: 13px;
}
#uniRoot .item:last-child{ border-bottom: 0; }
#uniRoot .item .n{ font-variant-numeric: tabular-nums; color: var(--dim); min-width: 2.2em;
  font-size: 11px; letter-spacing: .06em; }
#uniRoot .item .t{ min-width: 0; }
#uniRoot .item .t small{ display: block; font-size: 10px; color: var(--dim); letter-spacing: .06em; margin-top: 2px; }
#uniRoot .item .r{ margin-left: auto; font-variant-numeric: tabular-nums; color: var(--mut); font-size: 11.5px; }

/* 可点的目录行（索引页用）：整行是一块热区，但排版跟上面那栏对齐 */
#uniRoot a.item{ color: inherit; text-decoration: none; border-radius: 3px;
  padding-left: 8px; padding-right: 8px; margin: 0 -8px;
  transition: background .18s ease; }
#uniRoot a.item:hover, #uniRoot a.item:focus-visible{ background: var(--cloth); }
#uniRoot a.item .r{ color: var(--dim); }
#uniRoot a.item:hover .r{ color: var(--ink); }

/* ——— 画布 / 预览 ——— */
#uniRoot .canvasWrap{
  display: flex; align-items: center; justify-content: center; padding: 14px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); overflow: auto;
}
#uniRoot .canvasWrap.inv{ background: #fff; }

/* 键盘/触摸都不给 hover 留痕 */
@media (hover: none){
  #uniRoot .btn:hover{ background: var(--paper); color: var(--ink); border-color: var(--rule2); }
  #uniRoot .btn.solid:hover{ background: var(--ink); color: var(--paper); }
  #uniRoot .tile:hover{ background: var(--paper); color: inherit; border-color: var(--rule); }
  #uniRoot .tile:hover i{ color: var(--dim); opacity: 1; }
  #uniRoot .pill:hover{ color: var(--mut); background: transparent; border-color: var(--rule); }
}

@media (max-width: 620px){
  .page{ padding: 22px 14px 52px; }
  #uniRoot .sheet{ padding: 28px 15px 16px; }
  #uniRoot .headZh{ font-size: 24px; }
  #uniRoot .stat{ padding: 0 12px; }
  #uniRoot .stat b{ font-size: 18px; }
  #uniRoot .stage{ min-height: min(40vh, 280px); }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}