:root{
  --bg:#0b0e14; --panel:#0f131c; --fg:#c8d3e0; --dim:#6b7686; --line:#222838;
  --cyan:#56b6c2; --yellow:#e5c07b; --green:#98c379; --red:#e06c75; --mag:#c678dd;
  --mono:'SFMono-Regular','Cascadia Code','JetBrains Mono','Fira Code',Consolas,'Liberation Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--mono);
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:900px;margin:0 auto;padding:0 20px}

/* top window-chrome bar */
header{position:sticky;top:0;z-index:10;background:rgba(11,14,20,.92);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:14px;height:44px}
.dots{display:flex;gap:7px}
.dot{width:11px;height:11px;border-radius:50%}
.dot.r{background:var(--red)} .dot.y{background:var(--yellow)} .dot.g{background:var(--green)}
.bar .title{color:var(--fg);font-weight:700}
.bar .title a{color:var(--fg)} .bar .title a:hover{text-decoration:none}
.bar .title b{color:var(--cyan)}
nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
nav a{color:var(--dim);font-size:13px}
nav a:hover{color:var(--fg);text-decoration:none}

section{padding:46px 0;border-bottom:1px solid var(--line)}
h1{font-size:30px;line-height:1.25;margin:.2em 0}
h1 .cy{color:var(--cyan)}
h2{font-size:20px;color:var(--fg);margin-top:0}
h2::before{content:"## ";color:var(--dim)}
h3{font-size:15px;color:var(--yellow);margin:1.4em 0 .4em}
h3::before{content:"### ";color:var(--dim)}
p{color:var(--fg)} .lead{color:var(--dim);font-size:16px}
.dim{color:var(--dim)}

/* the pane-grid hero art */
.art{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:16px;overflow:auto;color:var(--dim);white-space:pre;font-size:13px;line-height:1.4}
.art .w{color:var(--yellow)} .art .c{color:var(--cyan)} .art .g{color:var(--green)}

/* code / prompt blocks */
pre{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--cyan);
  border-radius:6px;padding:14px 16px;overflow:auto;font-size:13.5px;color:var(--fg)}
pre .p{color:var(--green);user-select:none} pre .c{color:var(--dim)}
code{background:#151a24;border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:13px;color:var(--yellow)}
pre code{background:none;border:none;padding:0;color:inherit}

.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{border:1px solid var(--line);border-radius:6px;padding:9px 16px;color:var(--fg);
  background:var(--panel);font-size:14px}
.btn:hover{border-color:var(--cyan);text-decoration:none}
.btn.pri{border-color:var(--cyan);color:var(--cyan)}

table{width:100%;border-collapse:collapse;font-size:13.5px;margin:.6em 0}
td,th{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
th{color:var(--dim);font-weight:600}
.doc td:first-child{color:var(--yellow)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px 16px}
.card h3{margin-top:0}
.card h3::before{content:""}
.legend span{display:inline-block;margin-right:16px;color:var(--dim);font-size:13px}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}

.cursor{display:inline-block;width:8px;height:15px;background:var(--cyan);
  vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

footer{padding:34px 0 60px;color:var(--dim);font-size:13px}
footer a{color:var(--dim)} footer a:hover{color:var(--fg)}
footer .row{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px}

/* deep-doc pages */
main.doc{padding:30px 0 10px}
.doc h1{font-size:27px;margin:.1em 0 .1em}
.doc h2{margin-top:1.9em}
.doc h3{margin-top:1.5em}
.doc p{margin:.75em 0}
.doc ul,.doc ol{padding-left:1.4em;margin:.6em 0}
.doc li{margin:.35em 0}
.doc li>code{white-space:nowrap}
.docnav{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 4px}
.docnav a{font-size:12.5px;color:var(--dim);border:1px solid var(--line);
  border-radius:5px;padding:4px 10px;background:var(--panel)}
.docnav a:hover{color:var(--fg);border-color:var(--cyan);text-decoration:none}
.docnav a.active{color:var(--cyan);border-color:var(--cyan)}
.crumb{color:var(--dim);font-size:13px;margin:2px 0 0}
.crumb a{color:var(--dim)}
@media(max-width:640px){.grid{grid-template-columns:1fr}h1{font-size:24px}}