/* bise.dev/docs: the landing's paper, with the reading set in Newsreader.
   Tokens: site/index.html's paper block (html[data-theme], html.pd for dark). */
html[data-theme] { --bg:#f2ede2; --soft:#ebe4d6; --text:#1d1a17; --dim:#5a5349; --faint:#cfc5b4; --kick:#8a8174; --acc:#c8264a; --err:#b3261e; --raised:#e9e1d1; }
html.pd[data-theme] { --bg:#171513; --soft:#1e1b18; --text:#ece6da; --dim:#b8b0a3; --faint:#3d3935; --kick:#8a8276; --acc:#f4a6b0; --err:#ff5a52; --raised:#221e1c; }
* { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-padding-top:84px; }
body { margin:0; color:var(--text); font-family:Newsreader, Georgia, serif; font-size:19px; line-height:1.6;
  background:#f2ede2 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .08 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"); }
html.pd body { background:#171513 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .05 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"); }
.mono, code, pre, .top, .side, .toc, .pn, footer, .file, .copy, .copymd, .callout .label, .results { font-family:"JetBrains Mono", ui-monospace, Menlo, monospace; }
::selection { background:#f0d3dc; } html.pd ::selection { background:#4a2a35; }

/* links: text color, an accent underline; full accent on hover */
a { color:inherit; text-decoration:underline; text-decoration-color:var(--acc); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--acc); }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:3px; }

/* top bar */
.top { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:2.2ch; height:64px; padding:0 28px; font-size:14px; color:var(--dim); background:var(--bg); border-bottom:1px solid var(--faint); }
.top .logo { font-family:Newsreader, Georgia, serif; font-weight:600; font-size:21px; color:var(--text); text-decoration:none; white-space:nowrap; }
.top .logo .acc { font-family:Caveat, cursive; font-weight:700; font-size:1.25em; color:var(--acc); }
.top .docs { font-family:Caveat, cursive; font-size:25px; color:var(--acc); text-decoration:none; margin-left:-1ch; line-height:1; }
.top nav { margin-left:auto; display:flex; align-items:center; gap:2.5ch; }
.top nav a { color:var(--dim); text-decoration:none; } .top nav a:hover, .top nav button:hover { color:var(--text); }
.top .menu { display:none; font-size:20px; color:var(--dim); width:28px; }
.search { position:relative; flex:0 1 340px; margin-left:3ch; }
.search input { width:100%; font:inherit; font-size:14px; color:var(--text); background:var(--bg); border:1px solid var(--faint); border-radius:8px; padding:7px 12px; outline:none; -webkit-appearance:none; appearance:none; }
.search input::placeholder { color:var(--kick); }
.search input:focus { border-color:var(--dim); }
.results { position:absolute; top:calc(100% + 6px); left:0; width:min(520px, 92vw); max-height:70vh; overflow:auto; background:var(--bg); border:1px solid var(--faint); border-radius:10px; box-shadow:0 22px 40px -18px #4a3a2a66, 0 2px 6px #4a3a2a22; padding:6px; font-size:13px; }
.results a { display:block; padding:8px 10px; border-radius:6px; text-decoration:none; color:var(--text); }
.results a .where { color:var(--dim); } .results a .snip { display:block; color:var(--dim); font-family:Newsreader, Georgia, serif; font-size:15px; line-height:1.4; margin-top:2px; }
.results a .snip b { color:var(--text); font-weight:600; }
.results a.on, .results a:hover { background:var(--soft); }
.results .none { padding:10px; color:var(--dim); }

/* three columns */
.wrap { display:grid; grid-template-columns:250px minmax(0, 1fr) 220px; gap:56px; max-width:1440px; margin:0 auto; padding:0 28px; }
.side, .toc { position:sticky; top:64px; align-self:start; max-height:calc(100vh - 64px); overflow:auto; padding:36px 0 48px; font-size:13.5px; line-height:1.5; }
.side .grp { color:var(--kick); margin:22px 0 6px; } .side .grp:first-child { margin-top:0; }
.side ul, .toc ul { list-style:none; margin:0; padding:0; }
.side li a { display:block; padding:4px 0 4px 14px; color:var(--dim); text-decoration:none; border-left:2px solid transparent; }
.side li a:hover { color:var(--text); }
.side li a.here { color:var(--acc); border-left-color:var(--acc); }
.toc .toch { color:var(--kick); margin-bottom:8px; }
.toc a { display:block; padding:3px 0; color:var(--dim); text-decoration:none; } .toc a:hover { color:var(--text); }
.toc .l3 a { padding-left:1.5ch; }
.toc a.on { color:var(--text); }

/* the page */
main { min-width:0; padding:48px 0 80px; }
article { max-width:68ch; }
.head { display:flex; align-items:baseline; gap:2ch; justify-content:space-between; }
h1 { font-size:44px; line-height:1.15; font-weight:600; letter-spacing:-.01em; margin:0; }
.copymd { flex:none; font-size:12.5px; color:var(--dim); border:1px solid var(--faint); border-radius:6px; padding:4px 10px; }
.copymd:hover { color:var(--text); border-color:var(--dim); }
.lede { color:var(--dim); font-size:21px; line-height:1.45; font-style:italic; margin:12px 0 36px; }
h2 { font-size:29px; line-height:1.25; font-weight:600; margin:56px 0 12px; }
h3 { font-size:22px; line-height:1.3; font-weight:600; margin:36px 0 8px; }
h4 { font-size:19px; font-weight:600; margin:28px 0 6px; }
h2, h3, h4 { position:relative; }
.anchor { position:absolute; left:-1.1em; color:var(--faint); text-decoration:none; opacity:0; font-weight:400; }
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, .anchor:focus { opacity:1; }
p { margin:0 0 16px; }
ul, ol { margin:0 0 18px; padding-left:1.4em; } li { margin:4px 0; } li::marker { color:var(--kick); }
strong { font-weight:600; }
code { font-size:.8em; color:var(--dim); overflow-wrap:anywhere; }
code.key { color:var(--text); }
a code { color:inherit; }
blockquote { margin:0 0 18px; padding-left:18px; border-left:2px solid var(--faint); color:var(--dim); font-style:italic; }

/* code blocks: dark on both papers, like the landing's screens */
.code { margin:6px 0 22px; }
.file { font-size:12.5px; color:var(--dim); margin:0 0 6px 2px; }
.code .box { position:relative; background:#141211; border-radius:10px; box-shadow:0 1px 0 #00000010, 0 22px 40px -18px #4a3a2a66; overflow:hidden; }
html.pd .code .box { box-shadow:0 0 0 1px #3d3935; }
.code pre { margin:0; padding:16px 0 16px 20px; overflow-x:auto; font-size:14px; line-height:1.6; color:#ece6da; }
/* the right padding inside the scroll, so the last column isn't flush with the edge */
.code pre code { display:inline-block; min-width:100%; padding-right:20px; font-size:inherit; color:inherit; overflow-wrap:normal; }
/* a fade on the right edge while there's more to scroll (docs.js sets .more) */
.code .box::after { content:""; position:absolute; top:0; right:0; bottom:0; width:24px; pointer-events:none; background:linear-gradient(to right, #14121100, #141211); opacity:0; transition:opacity .15s; }
.code .box.more::after { opacity:1; }
.code .c { color:#8a8276; }
.copy { position:absolute; top:8px; right:8px; font-size:12px; color:#c4bcaf; background:#262220; border-radius:6px; padding:3px 9px; opacity:0; transition:opacity .15s; }
.code .box:hover .copy, .copy:focus-visible, .copy.done { opacity:1; }
.copy:hover { color:#ece6da; }

/* tables */
.table { overflow-x:auto; margin:6px 0 22px; }
table { border-collapse:collapse; width:100%; font-size:17px; line-height:1.45; }
th { text-align:left; font-weight:600; color:var(--dim); font-size:15px; }
th, td { padding:8px 14px 8px 0; border-bottom:1px solid var(--faint); vertical-align:top; }
td code { font-size:.82em; }

/* callouts: a rule and a label, no colored boxes */
.callout { margin:6px 0 22px; padding:2px 0 2px 18px; border-left:2px solid var(--faint); }
.callout .label { display:block; font-size:12.5px; color:var(--dim); margin-bottom:2px; }
.callout.careful .label { color:var(--err); }
.callout p { margin:0; }

/* previous / next, footer */
.pn { max-width:68ch; display:flex; gap:20px; margin-top:64px; }
.pn a { flex:1; display:block; padding:14px 16px; border:1px solid var(--faint); border-radius:10px; text-decoration:none; font-size:14px; }
.pn a span { display:block; color:var(--kick); font-size:12px; }
.pn a:hover { border-color:var(--dim); color:var(--text); }
.pn .next { text-align:right; } .pn .next:only-child { margin-left:auto; max-width:50%; }
footer { max-width:68ch; margin-top:40px; padding-top:18px; border-top:1px solid var(--faint); font-size:13px; color:var(--dim); }
footer p { margin:0 0 6px; } footer a { color:var(--dim); }

@media (max-width: 1200px) { .wrap { grid-template-columns:240px minmax(0, 1fr); gap:48px; } .toc { display:none; } }
@media (max-width: 900px) {
  body { font-size:18px; }
  .top { padding:0 16px; gap:1.6ch; } .top .menu { display:block; } .top nav a { display:none; }
  .search { margin-left:auto; flex:1 1 auto; max-width:240px; }
  .wrap { display:block; padding:0 20px; }
  .side { display:none; position:fixed; z-index:9; top:64px; left:0; bottom:0; width:min(320px, 86vw); max-height:none; padding:24px 20px; background:var(--bg); border-right:1px solid var(--faint); }
  body.nav-open .side { display:block; }
  main { padding-top:32px; }
  h1 { font-size:34px; } h2 { font-size:25px; }
  .head { display:block; } .copymd { margin-top:12px; }
  .anchor { display:none; }
  .pn { flex-direction:column; }
}
@media (max-width: 420px) { .top .docs { display:none; } }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }