:root{
  --ground:#e9ece7; --surface:#ffffff; --surface2:#f0f3ee; --stage-a:#f4f6f2; --stage-b:#dfe6e0;
  --ink:#15201e; --ink2:#576763; --ink3:#8a9994; --line:#d4dbd5; --line2:#e6ebe6;
  --accent:#0d7a6b; --accent-soft:#dcece8; --accent-ink:#ffffff;
  --good:#2c8f57; --bad:#bb4234; --warn:#a9702a;
  --shadow:0 1px 2px rgba(16,40,36,.08),0 10px 30px -14px rgba(16,40,36,.28);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#08110f; --surface:#0f1a18; --surface2:#152320; --stage-a:#0a1614; --stage-b:#040b0a;
    --ink:#e6efeb; --ink2:#92a6a0; --ink3:#6b807a; --line:#1f2f2b; --line2:#182522;
    --accent:#46c8ad; --accent-soft:#10332e; --accent-ink:#04211c;
    --good:#4cbe7e; --bad:#e0705f; --warn:#d69a45;
    --shadow:0 1px 2px rgba(0,0,0,.45),0 16px 44px -20px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --ground:#08110f; --surface:#0f1a18; --surface2:#152320; --stage-a:#0a1614; --stage-b:#040b0a;
  --ink:#e6efeb; --ink2:#92a6a0; --ink3:#6b807a; --line:#1f2f2b; --line2:#182522;
  --accent:#46c8ad; --accent-soft:#10332e; --accent-ink:#04211c;
  --good:#4cbe7e; --bad:#e0705f; --warn:#d69a45;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 16px 44px -20px rgba(0,0,0,.85);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);overflow:hidden;
  font-family:"IBM Plex Sans","Segoe UI",Roboto,-apple-system,sans-serif;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

#app{display:grid;grid-template-columns:252px minmax(0,1fr) 348px;grid-template-rows:52px minmax(0,1fr);height:100vh}

/* ── шапка ── */
.bar{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:0 14px;background:var(--surface);border-bottom:1px solid var(--line);z-index:20}
.wordmark{font-family:Spectral,Georgia,serif;font-weight:600;font-size:18px;letter-spacing:.045em;white-space:nowrap;display:flex;align-items:baseline;gap:7px}
.wordmark span{color:var(--accent)}
.wordmark em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;color:var(--ink3);border:1px solid var(--line);border-radius:3px;padding:1px 4px}
.search{position:relative;flex:1 1 auto;max-width:420px}
.search input{width:100%;padding:7px 12px;background:var(--surface2);border:1px solid var(--line);border-radius:7px;color:var(--ink)}
.search input::placeholder{color:var(--ink3)}
.results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);max-height:60vh;overflow-y:auto;padding:5px;z-index:30}
.results:empty{display:none}
.results button{display:flex;justify-content:space-between;gap:12px;align-items:baseline;width:100%;text-align:left;padding:6px 9px;border-radius:6px;line-height:1.3}
.results button:hover,.results button.on{background:var(--accent-soft)}
.results i{font-family:Spectral,Georgia,serif;font-size:12.5px;color:var(--ink2);white-space:nowrap}
.views{display:flex;gap:2px;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:2px;margin-left:auto}
.views button{padding:5px 11px;border-radius:6px;font-size:13px;color:var(--ink2);white-space:nowrap}
.views button.on{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.icon{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--ink2);flex:none}
.icon:hover{color:var(--ink)}

/* ── левая колонка ── */
.rail{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.block{padding:15px 15px 14px;border-bottom:1px solid var(--line2);flex:none}
.block.grow{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding-bottom:8px}
.rail h2{margin:0 0 10px;font-family:Spectral,Georgia,serif;font-size:13.5px;font-weight:600;letter-spacing:.01em;color:var(--ink)}

.layers{display:flex;flex-direction:column;gap:9px}
.layer{display:grid;grid-template-columns:15px 1fr auto;grid-template-areas:"chk name pct" ". slider slider";gap:4px 9px;align-items:center}
.layer input[type=checkbox]{grid-area:chk;appearance:none;width:15px;height:15px;border:1.5px solid var(--line);border-radius:4px;background:var(--surface2);position:relative;cursor:pointer;margin:0}
.layer input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.layer input[type=checkbox]:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(42deg)}
.layer label{grid-area:name;cursor:pointer;display:flex;align-items:center;gap:7px;font-size:13.5px}
.layer .dot{width:9px;height:9px;border-radius:2px;flex:none}
.layer .pct{grid-area:pct;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.layer input[type=range]{grid-area:slider}
.layer.off label,.layer.off .pct{opacity:.42}

input[type=range]{appearance:none;width:100%;height:3px;background:var(--line);border-radius:2px;outline:none;margin:2px 0}
input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--surface)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--surface)}

.planes{display:flex;flex-wrap:wrap;gap:5px}
.planes button{padding:5px 10px;font-size:12.5px;border:1px solid var(--line);border-radius:6px;color:var(--ink2)}
.planes button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.slider-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.slider-row span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink2);min-width:52px;text-align:right;font-variant-numeric:tabular-nums}

.tree{overflow-y:auto;margin:0 -6px;padding:0 6px;flex:1 1 auto;min-height:0}
.tree .grp{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 7px;border-radius:6px;color:var(--ink2);font-size:13px}
.tree .grp:hover{background:var(--surface2);color:var(--ink)}
.tree .grp b{font-weight:500}
.tree .grp em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink3)}
.tree ul{list-style:none;margin:1px 0 6px;padding:0 0 0 9px;border-left:1px solid var(--line2)}
.tree li button{display:block;width:100%;text-align:left;padding:3px 8px;border-radius:5px;font-size:12.5px;color:var(--ink2);line-height:1.35}
.tree li button:hover{background:var(--surface2);color:var(--ink)}
.tree li button.on{background:var(--accent-soft);color:var(--ink)}

.rail-foot{padding:12px 15px 14px;border-top:1px solid var(--line2);flex:none}
.credit{margin:11px 0 0;font-size:10.5px;line-height:1.45;color:var(--ink3)}
.credit b{font-weight:500;color:var(--ink2)}

.btn{padding:9px 15px;border-radius:8px;font-size:13.5px;font-weight:500}
.btn.wide{display:block;width:100%;text-align:center}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{border:1px solid var(--line);color:var(--ink2)}
.btn.ghost:hover{color:var(--ink);border-color:var(--ink3)}

/* ── сцена ── */
.stage{position:relative;background:radial-gradient(120% 95% at 50% 22%,var(--stage-a),var(--stage-b));overflow:hidden}
#c{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#c.grabbing{cursor:grabbing}
.hint{position:absolute;left:0;top:0;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:5px 10px;box-shadow:var(--shadow);font-size:13px;white-space:nowrap;opacity:0;transition:opacity .09s;z-index:6}
.hint i{display:block;font-family:Spectral,Georgia,serif;font-size:11.5px;color:var(--ink2)}
.pin{position:absolute;pointer-events:none;z-index:5;display:flex;align-items:center;gap:8px;transform:translate(-50%,-50%)}
.pin-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 28%,transparent)}
.pin-text{background:var(--surface);border:1px solid var(--accent);border-radius:6px;padding:3px 9px;font-size:12.5px;white-space:nowrap;box-shadow:var(--shadow)}

.stage-tools{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;z-index:5}
.stage-tools button{padding:6px 12px;background:var(--surface);border:1px solid var(--line);border-radius:7px;color:var(--ink2);box-shadow:var(--shadow);font-size:12.5px}
.stage-tools button:hover{color:var(--ink)}
.scalebar{position:absolute;right:16px;bottom:16px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:3px;color:var(--ink3);font-family:"IBM Plex Mono",monospace;font-size:10.5px}
.scalebar i{display:block;width:90px;height:6px;border:1px solid var(--ink3);border-top:none}

.loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--stage-b);z-index:12;transition:opacity .4s}
.loading.done{opacity:0;pointer-events:none}
.load-inner{width:min(320px,70vw);text-align:center}
.load-title{font-family:Spectral,Georgia,serif;font-size:17px;margin-bottom:12px}
.load-bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.load-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.load-note{margin-top:9px;font-size:12px;color:var(--ink3)}

/* ── карточка структуры ── */
.card{background:var(--surface);border-left:1px solid var(--line);overflow-y:auto;padding:18px 18px 26px}
.empty{color:var(--ink3);font-size:13px;line-height:1.6}
.empty strong{display:block;color:var(--ink);font-family:Spectral,Georgia,serif;font-size:16.5px;font-weight:600;margin-bottom:7px}
.counts{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:5px}
.counts div{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2)}
.counts b{font-weight:500;font-family:"IBM Plex Mono",monospace;color:var(--ink);font-variant-numeric:tabular-nums}

.name{font-family:Spectral,Georgia,serif;font-size:24px;line-height:1.16;font-weight:600;margin:0;text-wrap:balance}
.latin{font-family:Spectral,Georgia,serif;font-style:italic;font-size:15.5px;color:var(--ink2);margin:4px 0 0}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tag{font-size:11.5px;padding:2px 9px;border-radius:20px;border:1px solid var(--line);color:var(--ink2)}
.tag.sys{border-color:transparent;background:var(--accent);color:var(--accent-ink)}
.tag.side{border-color:var(--line);color:var(--ink2)}
.acts{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.acts button{padding:6px 11px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;color:var(--ink2)}
.acts button:hover{border-color:var(--accent);color:var(--accent)}
.acts button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.facts{display:flex;flex-direction:column;gap:14px;margin-top:16px;border-top:1px solid var(--line2);padding-top:15px}
.fact h4{margin:0 0 3px;font-size:11.5px;font-weight:500;color:var(--ink3)}
.fact p{margin:0;font-size:13.5px;line-height:1.62}
.fact.clin{background:var(--surface2);border-left:2px solid var(--warn);padding:11px 13px;border-radius:0 7px 7px 0}
.fact.clin h4{color:var(--warn)}
.metrics{display:flex;gap:16px;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.rel{display:flex;flex-wrap:wrap;gap:6px}
.rel button{font-size:12.5px;padding:3px 10px;border:1px solid var(--line);border-radius:6px;color:var(--ink2)}
.rel button:hover{border-color:var(--accent);color:var(--accent)}

/* ── немой атлас ── */
.quiz-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.quiz-head h3{margin:0;font-family:Spectral,Georgia,serif;font-size:17px;font-weight:600}
.score{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.quiz-q{font-size:13px;color:var(--ink2);margin:0 0 14px}
.opts{display:flex;flex-direction:column;gap:7px}
.opt{text-align:left;padding:10px 13px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);line-height:1.35;font-size:13.5px}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt:disabled{cursor:default}
.opt i{display:block;font-family:Spectral,Georgia,serif;font-size:12px;color:var(--ink3)}
.opt.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--surface2))}
.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--surface2))}
.verdict{margin-top:13px;font-size:13px;line-height:1.55;padding:11px 13px;border-radius:8px;background:var(--surface2)}
.verdict b{display:block;margin-bottom:3px}
.verdict.ok b{color:var(--good)} .verdict.no b{color:var(--bad)}
.quiz-foot{display:flex;gap:8px;margin-top:14px}
.streak{margin-top:12px;font-size:12px;color:var(--ink3)}

@media (max-width:1180px){#app{grid-template-columns:224px minmax(0,1fr) 310px}.views button{padding:5px 8px}}
@media (max-width:960px){
  #app{grid-template-columns:1fr;grid-template-rows:auto minmax(320px,52vh) auto auto;height:auto;min-height:100vh;overflow:auto}
  body{overflow:auto}
  .bar{flex-wrap:wrap;height:auto;padding:9px 12px;gap:9px}
  .search{order:5;flex:1 1 100%;max-width:none}
  .views{margin-left:0}
  .rail{order:3;border-right:none;border-top:1px solid var(--line)}
  .stage{order:2}
  .card{order:4;border-left:none;border-top:1px solid var(--line)}
  .block.grow{max-height:340px}
}

.keys{display:block;margin-top:12px;font-size:12px;line-height:2}
kbd{font-family:"IBM Plex Mono",monospace;font-size:11px;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:4px;padding:1px 5px;color:var(--ink2);background:var(--surface2)}
.sys-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:12px 0 3px;padding:0 7px;
  font-family:Spectral,Georgia,serif;font-size:12.5px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line2);padding-bottom:4px}
.sys-head:first-child{margin-top:0}
.sys-head em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink3);font-weight:400}