@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#e8ebee; --card:#ffffff; --ink:#1a2027; --stamp:#1e40af; --grif:#b91c1c;
  --line:#cfd6dd; --muted:#5c6670; --shadow:5px 6px 0 rgba(26,32,39,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);font:15.5px/1.62 Inter,system-ui,sans-serif;
  background-image:radial-gradient(#d4dae0 1px,transparent 1px);background-size:22px 22px;
  display:flex;flex-direction:column;
}
.mono{font-family:"IBM Plex Mono",monospace}

/* ─ header ─ */
header{display:flex;gap:22px;align-items:center;padding:14px 28px;border-bottom:2px solid var(--ink);background:var(--card);z-index:30}
.brand{font-weight:900;font-size:16px;letter-spacing:.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand .mono{font-weight:600;color:var(--stamp);font-size:13px}
.searchwrap{flex:1;max-width:480px;position:relative}
#search{width:100%;font:13px "IBM Plex Mono",monospace;padding:9px 14px;border:1.5px solid var(--ink);background:#fbfcfd;outline:none}
#search:focus{box-shadow:3px 3px 0 rgba(26,32,39,.15)}
.results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);border:1.5px solid var(--ink);box-shadow:var(--shadow);max-height:340px;overflow:auto;z-index:40}
.results a{display:block;padding:10px 14px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);font-size:14px}
.results a:hover{background:#eef2ff}
.results a .mono{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.1em}
.hlinks{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12.5px;white-space:nowrap}
.hlinks a{color:var(--ink);text-decoration:none;margin-left:18px}
.hlinks a:hover{color:var(--stamp)}

/* ─ drawers (разделы) ─ */
.drawers{display:flex;gap:8px;flex-wrap:wrap;padding:12px 28px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.6);backdrop-filter:blur(3px)}
.drawers a{text-decoration:none;color:var(--ink);border:1.5px solid var(--ink);padding:5px 11px;background:#fff;
  box-shadow:2px 2px 0 var(--ink);font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.04em}
.drawers a:hover,.drawers a.on{background:var(--stamp);color:#fff;border-color:var(--stamp);box-shadow:2px 2px 0 #14245f}

/* ─ desk / panes ─ */
.desk{flex:1;display:flex;align-items:flex-start;gap:0;padding:44px 32px 60px;overflow-x:auto;scroll-behavior:smooth}
.pane{min-width:440px;max-width:440px;margin-right:-42px;position:relative;transition:transform .18s}
.pane:hover{transform:translateY(-6px);z-index:20 !important}
.pane:last-child{margin-right:0}
.card{background:var(--card);border:1.5px solid var(--ink);box-shadow:var(--shadow);position:relative}
.tab{position:absolute;top:-29px;left:20px;background:var(--card);border:1.5px solid var(--ink);border-bottom:none;
  padding:5px 14px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em}
.close{position:absolute;top:-29px;right:16px;background:var(--card);border:1.5px solid var(--ink);border-bottom:none;
  padding:5px 10px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;cursor:pointer;color:var(--muted)}
.close:hover{color:var(--grif)}
.inner{padding:26px 30px 24px 44px;max-height:calc(100vh - 250px);overflow-y:auto;position:relative}
.inner::before{content:"";position:absolute;left:13px;top:0;bottom:0;border-right:1px dashed var(--line)}
.meta{display:flex;justify-content:space-between;gap:10px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);letter-spacing:.08em;margin-bottom:10px}
.stamp{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.2em;color:var(--stamp);
  border:2px solid var(--stamp);padding:3px 9px;transform:rotate(-2deg);margin:8px 0 14px;font-weight:600}

/* ─ markdown content ─ */
.inner h1{font-size:23px;font-weight:900;line-height:1.22;margin-bottom:4px}
.inner h2{font-size:12px;font-family:"IBM Plex Mono",monospace;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.inner p{margin-bottom:12px}
.inner ul,.inner ol{margin:0 0 12px 20px}
.inner li{margin-bottom:6px}
.inner a{color:var(--stamp);text-decoration:none;font-weight:500;border-bottom:1.5px solid rgba(30,64,175,.28)}
.inner a:hover{border-bottom-color:var(--stamp)}
.inner a.ext::after{content:" ↗";font-size:11px}
.inner blockquote{border-left:4px solid var(--grif);background:#fef2f2;padding:9px 14px;font-size:14px;margin:12px 0}
.inner blockquote p{margin:0}
.inner code{font-family:"IBM Plex Mono",monospace;font-size:13px;background:#eef1f4;padding:1px 5px}
.inner pre{background:#f2f5f8;border:1px solid var(--line);padding:12px 14px;overflow-x:auto;margin:0 0 12px}
.inner pre code{background:none;padding:0;font-size:12.5px;line-height:1.55}
.inner hr{border:none;border-top:1px dashed var(--line);margin:18px 0}
.inner strong{font-weight:700}

/* backlinks */
.backs{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line)}
.backs .bt{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--muted);margin-bottom:8px}
.backs a{display:inline-block;font-size:12.5px;color:var(--ink);text-decoration:none;border:1px solid var(--line);background:#fbfcfd;padding:3px 9px;margin:0 6px 6px 0}
.backs a:hover{border-color:var(--stamp);color:var(--stamp)}

/* section pane list */
.seclist a{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:#fbfcfd;padding:9px 12px;margin-bottom:8px;font-size:14px}
.seclist a:hover{border-color:var(--stamp);color:var(--stamp)}
.seclist a .mono{display:block;font-size:10px;color:var(--muted);letter-spacing:.12em}

/* ─ status bar ─ */
.statusbar{display:flex;justify-content:space-between;gap:20px;padding:8px 28px;border-top:1.5px solid var(--ink);background:var(--card);
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
.statusbar b{color:var(--stamp)}

/* ─ mobile ─ */
@media (max-width:760px){
  header{flex-wrap:wrap;gap:10px;padding:12px 14px}
  .searchwrap{order:3;max-width:none;flex-basis:100%}
  .drawers{padding:10px 14px}
  .desk{padding:36px 12px 40px;scroll-snap-type:x mandatory}
  .pane{min-width:calc(100vw - 40px);max-width:calc(100vw - 40px);margin-right:14px;scroll-snap-align:center}
  .hint{display:none}
}