:root{
  --reader-bg:#f2f2ed;
  --reader-panel:#fffffb;
  --reader-paper:#fffffb;
  --reader-text:#171717;
  --reader-muted:#676762;
  --reader-faint:#b5b5ad;
  --reader-line:#d6d6cf;
  --reader-line-strong:#84847e;
  --reader-mesh:rgba(0,0,0,.025);
  --reader-grid-inner:rgba(0,0,0,.018);
  --reader-hover:rgba(255,255,255,.48);
  --reader-active:rgba(255,255,255,.82);
  --reader-shadow:rgba(0,0,0,.08);
  --reader-drawing-invert:0;
  --reader-drawing-brightness:1;
  --reader-drawing-contrast:1.06;
  --reader-tone-position:0%
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{
  background:var(--reader-bg);
  color:var(--reader-text);
  font-family:"IBM Plex Sans JP",sans-serif;
  cursor:crosshair;
  -webkit-font-smoothing:antialiased
}
button,a{cursor:crosshair}
button{color:inherit}
.ruin-decoding{opacity:.52;filter:blur(.35px)}

.mechanics-topbar{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  border-bottom:1px solid var(--reader-line-strong);
  background:var(--reader-paper)
}
.mechanics-topbar>strong{
  font-size:22px;
  font-weight:300;
  letter-spacing:1.35px;
  white-space:nowrap
}
.mechanics-actions{display:flex;align-items:center;gap:20px}
.mechanics-nav{display:flex;gap:24px;font-size:10px}
.mechanics-nav a{color:var(--reader-muted);text-decoration:none;white-space:nowrap}
.mechanics-nav a:hover{color:var(--reader-text)}

.language-switch{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--reader-faint);
  font:300 9px/1 "IBM Plex Mono",monospace
}
.language-switch button{
  appearance:none;border:0;background:none;padding:3px 2px;
  color:var(--reader-faint);
  font:inherit
}
.language-switch button:hover,.language-switch button.active{color:var(--reader-text)}

.reader-tone-control{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  height:30px;
  color:var(--reader-muted);
  user-select:none
}
.reader-tone-icon{
  width:11px;
  text-align:center;
  font:300 10px/1 "IBM Plex Mono",monospace;
  opacity:.62
}
.reader-tone-track-wrap{
  position:relative;
  z-index:31;
  width:112px;
  height:30px;
  display:grid;
  align-items:center
}
.reader-tone-slider{
  --thumb:var(--reader-text);
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  z-index:32;
  width:112px;
  height:30px;
  margin:0;
  padding:0;
  background:transparent;
  outline:none;
  cursor:ew-resize;
  pointer-events:auto;
  touch-action:pan-y
}
.reader-tone-slider::-webkit-slider-runnable-track{
  height:1px;
  background:
    linear-gradient(90deg,
      #bdbdb6 0%,
      #aa9b7e 45%,
      #77756d 66%,
      #343630 100%)
}
.reader-tone-slider::-moz-range-track{
  height:1px;border:0;
  background:
    linear-gradient(90deg,
      #bdbdb6 0%,
      #aa9b7e 45%,
      #77756d 66%,
      #343630 100%)
}
.reader-tone-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:11px;height:11px;
  margin-top:-5px;
  border-radius:50%;
  border:1px solid var(--reader-line-strong);
  background:var(--reader-paper);
  box-shadow:0 0 0 1px var(--reader-shadow)
}
.reader-tone-slider::-moz-range-thumb{
  width:11px;height:11px;
  border-radius:50%;
  border:1px solid var(--reader-line-strong);
  background:var(--reader-paper);
  box-shadow:0 0 0 1px var(--reader-shadow)
}
.reader-tone-warm-mark{
  position:absolute;
  pointer-events:none;
  left:45%;
  top:13px;
  width:1px;height:4px;
  background:var(--reader-line-strong);
  opacity:.42;
  transform:translateX(-.5px)
}

.mechanics-layout{
  height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:368px 450px minmax(0,1fr);
  min-height:0
}
.taxonomy-panel,.record-panel{
  min-height:0;
  background:var(--reader-panel);
  border-right:1px solid var(--reader-line)
}
.taxonomy-panel{
  padding:42px 18px 18px;
  overflow:auto;
  scrollbar-width:none
}
.taxonomy-panel::-webkit-scrollbar,.mechanism-records::-webkit-scrollbar{width:0;height:0}
.panel-kicker{
  margin-bottom:30px;
  color:var(--reader-faint);
  font:300 9px/1 "IBM Plex Sans JP",sans-serif;
  letter-spacing:1.2px
}
.taxonomy-all,.taxonomy-row{
  appearance:none;border:0;background:none;width:100%;
  padding:5px 0;text-align:left;
  font:300 12px/1.5 "IBM Plex Sans JP",sans-serif
}
.taxonomy-all{
  display:flex;align-items:baseline;gap:15px;
  margin-bottom:16px;color:var(--reader-muted)
}
.taxonomy-number{font:300 11px/1 "IBM Plex Mono",monospace}
.taxonomy-all.active,.taxonomy-filter.active,.taxonomy-all:hover,.taxonomy-filter:hover{color:var(--reader-text)}
.taxonomy-node{position:relative}
.taxonomy-node-children{
  margin-left:20px;
  border-left:1px solid var(--reader-line);
  padding-left:14px
}
.taxonomy-node.collapsed>.taxonomy-node-children{display:none}
.taxonomy-row{display:flex;align-items:baseline;gap:8px;color:var(--reader-muted);opacity:.58}
.taxonomy-toggle{
  appearance:none;border:0;background:none;padding:0;width:13px;flex:0 0 13px;
  font:300 10px/1 "IBM Plex Mono",monospace;color:var(--reader-faint)
}
.taxonomy-filter{
  appearance:none;border:0;background:none;padding:0;text-align:left;
  font:inherit;color:inherit
}
.taxonomy-node-leaf .taxonomy-row::before{
  content:"—";width:13px;flex:0 0 13px;
  color:var(--reader-faint);font-family:"IBM Plex Mono",monospace
}

.record-panel{display:grid;grid-template-rows:55px minmax(0,1fr)}
.record-toolbar{
  display:flex;align-items:center;
  padding:0 20px;
  border-bottom:1px solid var(--reader-line);
  color:var(--reader-faint);
  font:300 9px/1 "IBM Plex Sans JP",sans-serif;
  letter-spacing:1.1px
}
.mechanism-records{min-height:0;overflow:auto;scrollbar-width:none;padding:0 12px 24px}
.mechanism-record{
  appearance:none;
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  width:100%;min-height:83px;
  padding:17px 10px;
  border:0;border-bottom:1px solid var(--reader-line);
  background:transparent;text-align:left;
  transition:background .15s ease,transform .2s cubic-bezier(.19,1,.22,1)
}
.mechanism-record:hover{background:var(--reader-hover);transform:translateX(2px)}
.mechanism-record.active{background:var(--reader-active)}
.record-code{font:300 9px/1.5 "IBM Plex Mono",monospace;color:var(--reader-faint)}
.record-title{font-size:14px;line-height:1.45;color:var(--reader-text)}
.record-tags{
  grid-column:2;margin-top:8px;
  display:flex;flex-wrap:wrap;gap:4px 12px
}
.record-tag{font-size:9px;line-height:1.2;color:var(--reader-faint)}

.drawing-stage{
  min-width:0;min-height:0;
  background-color:var(--reader-bg);
  background-image:
    linear-gradient(var(--reader-mesh) 1px,transparent 1px),
    linear-gradient(90deg,var(--reader-mesh) 1px,transparent 1px);
  background-size:42px 42px
}
.sheet-holder{
  width:100%;height:100%;
  display:grid;place-items:center;
  padding:64px 7.5%;
  overflow:hidden
}
.mechanism-sheet{
  position:relative;
  width:100%;height:84%;
  min-height:460px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  background:var(--reader-paper);
  border:1px solid var(--reader-line-strong)
}
.sheet-register{
  position:absolute;width:10px;height:10px;
  border-color:var(--reader-line-strong);
  pointer-events:none;z-index:3
}
.reg-a{left:11px;top:11px;border-left:1px solid;border-top:1px solid}
.reg-b{right:11px;top:11px;border-right:1px solid;border-top:1px solid}
.reg-c{left:11px;bottom:87px;border-left:1px solid;border-bottom:1px solid}
.reg-d{right:11px;bottom:87px;border-right:1px solid;border-bottom:1px solid}

.sheet-visual{
  min-height:0;position:relative;
  margin:18px 18px 0;
  display:grid;place-items:center;overflow:hidden;
  background-color:var(--reader-paper);
  background-image:
    linear-gradient(var(--reader-grid-inner) 1px,transparent 1px),
    linear-gradient(90deg,var(--reader-grid-inner) 1px,transparent 1px);
  background-size:28px 28px
}
.sheet-visual img{
  display:block;width:100%;height:100%;
  object-fit:contain;
  filter:
    grayscale(1)
    invert(var(--reader-drawing-invert))
    brightness(var(--reader-drawing-brightness))
    contrast(var(--reader-drawing-contrast))
}
.empty-drawing{
  display:grid;justify-items:center;gap:16px;
  color:var(--reader-faint);
  font-size:10px;letter-spacing:1px
}
.empty-symbol{
  display:block;width:140px;height:140px;
  border:1px solid var(--reader-line);
  background:
    linear-gradient(45deg,transparent 49.7%,var(--reader-line) 50%,transparent 50.3%),
    linear-gradient(-45deg,transparent 49.7%,var(--reader-line) 50%,transparent 50.3%)
}
.empty-drawing small{font:inherit}
.sheet-loading{font-size:10px;letter-spacing:1px;color:var(--reader-muted)}
.sheet-footer{
  min-height:106px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(120px,.55fr);
  gap:20px;align-items:center;
  padding:16px 14px 18px;
  border-top:1px solid var(--reader-line)
}
.sheet-title{font-size:18px;letter-spacing:.35px}
.sheet-note{margin-top:9px;max-width:580px;font-size:11px;line-height:1.6;color:var(--reader-muted)}
.sheet-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 12px}
.sheet-tag{
  appearance:none;border:0;border-bottom:1px solid var(--reader-line-strong);
  background:none;padding:2px 0;
  font:300 9px/1.2 "IBM Plex Sans JP",sans-serif;
  color:var(--reader-muted)
}
.sheet-tag:hover{color:var(--reader-text);border-bottom-color:var(--reader-text)}

@media(max-width:1250px){
  .mechanics-layout{grid-template-columns:270px 340px minmax(0,1fr)}
  .sheet-holder{padding:42px 5%}
  .reader-tone-track-wrap,.reader-tone-slider{width:92px}
  .mechanics-actions{gap:14px}
}
@media(max-width:940px){
  .mechanics-nav{display:none}
}
@media(max-width:780px){
  html,body{overflow:auto}
  .mechanics-topbar{height:auto;min-height:62px;padding:10px 14px;gap:10px}
  .mechanics-topbar>strong{font-size:17px}
  .mechanics-actions{gap:11px}
  .reader-tone-track-wrap,.reader-tone-slider{width:82px}
  .mechanics-layout{height:auto;min-height:calc(100vh - 62px);grid-template-columns:1fr}
  .taxonomy-panel{max-height:none;border-right:0;border-bottom:1px solid var(--reader-line);padding-top:25px}
  .record-panel{max-height:360px;border-right:0;border-bottom:1px solid var(--reader-line)}
  .drawing-stage{height:620px}
  .sheet-holder{padding:28px 16px}
  .mechanism-sheet{height:540px;min-height:0}
}

.reader-tone-control{z-index:30}
.reader-tone-slider{position:relative;z-index:32;pointer-events:auto}
.reader-tone-slider.is-dragging::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--reader-shadow)}
.reader-tone-slider.is-dragging::-moz-range-thumb{box-shadow:0 0 0 3px var(--reader-shadow)}

/* v70 · isolate the real range input from decorative layers */
.reader-tone-track-wrap{pointer-events:auto}
.reader-tone-warm-mark,.reader-tone-icon{pointer-events:none}
input.reader-tone-slider[data-reader-tone]{pointer-events:auto}


/* ==========================================================================
   v74 · simplified mechanics browser / larger reading controls
   ========================================================================== */

/* Top-right tools are now intentionally legible and operable rather than
   miniature metadata. */
.mechanics-actions {
  gap: 28px;
}

.mechanics-nav {
  gap: 30px;
  font-size: 13px;
}

.mechanics-nav a {
  line-height: 1.25;
}

.language-switch {
  gap: 7px;
  font-size: 11.5px;
}

.language-switch button {
  padding: 5px 2px;
}

.reader-tone-control {
  gap: 9px;
  height: 34px;
}

.reader-tone-icon {
  width: 14px;
  font-size: 13px;
}

.reader-tone-track-wrap,
.reader-tone-slider {
  width: 184px;
}

.reader-tone-track-wrap {
  height: 34px;
}

.reader-tone-slider {
  height: 34px;
}

.reader-tone-slider::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -6.5px;
}

.reader-tone-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
}

.reader-tone-warm-mark {
  top: 15px;
  height: 5px;
}

/* The record column now carries one piece of information per row: title.
   Keep the title on the same visual axis as before, but remove the code/tag
   noise and shorten the paper strip. */
.record-panel {
  grid-template-rows: 42px minmax(0, 1fr);
}

.record-toolbar {
  padding: 0 20px;
  font-size: 9px;
}

.mechanism-record {
  display: block;
  min-height: 0;
  height: 64px;
  padding: 0 10px 0 90px;
  line-height: 64px;
}

.record-title {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.35;
}

.record-code,
.record-tags,
.record-tag {
  display: none !important;
}

@media (max-width: 1250px) {
  .mechanics-actions { gap: 18px; }
  .mechanics-nav { gap: 20px; font-size: 12px; }
  .reader-tone-track-wrap,
  .reader-tone-slider { width: 142px; }
}

@media (max-width: 940px) {
  .reader-tone-track-wrap,
  .reader-tone-slider { width: 118px; }
}

@media (max-width: 780px) {
  .language-switch { font-size: 10px; }
  .reader-tone-track-wrap,
  .reader-tone-slider { width: 88px; }
  .mechanism-record {
    height: 58px;
    line-height: 58px;
    padding-left: 64px;
  }
}


/* ==========================================================================
   v75 · Simplified-Chinese font normalization
   ========================================================================== */
html[lang^="zh"] {
  font-synthesis: none;
}

html[lang^="zh"] body,
html[lang^="zh"] button,
html[lang^="zh"] input,
html[lang^="zh"] textarea,
html[lang^="zh"] select,
html[lang^="zh"] summary {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-synthesis: none !important;
  -webkit-font-smoothing: antialiased;
}

/* Preserve the small database/code details as Plex Mono. */
html[lang^="zh"] .taxonomy-node-leaf .taxonomy-row::before {
  font-family: "IBM Plex Mono", "Noto Sans SC", "PingFang SC", monospace !important;
  font-synthesis: none !important;
}