/* «Просвет пергамента» (modules/verso.js): сцена с двумя слоями и панель управления. */
.verso-tool { margin: 1.2rem 0 2rem; }
.vt-bar { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin-bottom: .7rem; }
.vt-leaf { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; }
.vt-sel { font: inherit; padding: .3rem .5rem; border: 1px solid var(--rule, #3a3123); border-radius: 6px;
  background: var(--panel, #241d14); color: inherit; max-width: 16rem; }
.vt-top { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; flex-wrap: wrap; }
.vt-btn { font: inherit; font-size: .9rem; padding: .35rem .7rem; border: 1px solid var(--rule, #3a3123); border-radius: 6px;
  background: var(--panel, #241d14); color: inherit; cursor: pointer; line-height: 1.2; }
.vt-btn:hover { border-color: var(--accent, #cba45e); }
.vt-tog.is-on { background: var(--accent, #cba45e); color: #fff; border-color: var(--accent, #cba45e); }
.vt-stage { position: relative; width: 100%; max-width: 760px; margin: 0 auto; background: #111; border-radius: 8px;
  overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
.vt-stage:focus-visible { box-shadow: 0 0 0 3px rgba(203, 164, 94, .45); }
.vt-stage.is-drag { cursor: grabbing; }
.vt-box { position: relative; width: 100%; aspect-ratio: 3 / 4; }
.vt-box img { position: absolute; display: block; pointer-events: none; }
.vt-recto { left: 0; top: 0; width: 100%; height: 100%; }
.vt-verso { transform-origin: 50% 50%; will-change: transform, opacity; }
.vt-ctl { max-width: 760px; margin: .8rem auto 0; }
.vt-row { display: block; margin: .55rem 0; font-size: .92rem; }
.vt-row > span { display: block; margin-bottom: .15rem; }
.vt-row b { font-weight: 600; }
.vt-range { width: 100%; accent-color: var(--accent, #cba45e); }
.vt-op > span { font-size: 1rem; }
.vt-quick { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .6rem; }
.vt-hint { font-size: .85rem; opacity: .75; margin: .4rem 0 0; }
@media (max-width: 640px) {
  .vt-top { margin-left: 0; }
  .vt-sel { max-width: 11rem; }
}

/* «Корни и бифолии» (modules/roots.js): график по видам пар и схема бифолия - inline SVG, токены темы. */
.rb-fig { margin: 1.4rem 0; }
.rb-chart, .rb-bif { width: 100%; max-width: 760px; height: auto; display: block; margin: 0 auto; }
.rb-grid { stroke: var(--rule, #3a3123); stroke-width: 1; }
.rb-zero { stroke: var(--ink-soft, #ac9f85); stroke-width: 1.5; }
.rb-tick { fill: var(--ink-soft, #ac9f85); font: 12px system-ui, sans-serif; }
.rb-lab { fill: var(--ink-soft, #ac9f85); font: 13px system-ui, sans-serif; }
.rb-val { fill: var(--ink-soft, #ac9f85); font: 12px ui-monospace, Menlo, monospace; }
.rb-bar { fill: var(--accent-soft, #9c7d45); }
.rb-strong .rb-bar { fill: var(--accent, #cba45e); }
.rb-strong .rb-lab, .rb-strong .rb-val { fill: var(--ink, #ece3ce); font-weight: 600; }
.rb-hit { fill: transparent; }
.rb-row:hover .rb-hit { fill: rgba(203, 164, 94, .08); }
.rb-sheet { fill: rgba(236, 227, 206, .08); stroke: var(--accent-soft, #9c7d45); stroke-width: 1.5; }
.rb-sheet2 { fill: rgba(236, 227, 206, .04); stroke-dasharray: 5 4; }
.rb-fold { stroke: var(--accent, #cba45e); stroke-width: 1.5; stroke-dasharray: 4 4; }
.rb-pg { fill: var(--ink, #ece3ce); font: 15px system-ui, sans-serif; }
@media (max-width: 640px) { .rb-lab { font-size: 15px; } .rb-val, .rb-tick { font-size: 14px; } }