/* NEARCOIL guide. HTML is generated by tools/build_wiki.py. */
:root { --bg:#111418; --panel:#1a1e24; --panel2:#222832; --fg:#e5e7eb; --muted:#a4adb9; --accent:#f2957d; --good:#e3be77; --border:#303640; --radius:5px; --studio-ink:var(--fg); --studio-muted:var(--muted); --studio-line:var(--border); --studio-accent:var(--accent); }
html { scroll-padding-top:90px; }
body { margin:0; font-family:var(--studio-font); background:var(--bg); color:var(--fg); line-height:1.75; font-size:15px; }
a { color:var(--accent); text-decoration:none; text-underline-offset:3px; }
a:hover { text-decoration:underline; }
code { font-family:ui-monospace,Consolas,monospace; font-size:.88em; background:var(--panel2); padding:2px 5px; border-radius:3px; color:var(--fg); overflow-wrap:anywhere; }
.top { position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--border); }
.bar { max-width:1080px; margin:0 auto; padding:13px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:9px; color:var(--fg); font-size:14px; font-weight:650; }
.brand img { border-radius:4px; }
.brand span { color:var(--muted); font-weight:400; }
.brand:hover { text-decoration:none; }
.links { display:flex; gap:22px; font-size:13px; }
.links a { color:var(--muted); white-space:nowrap; }
.layout { max-width:1136px; margin:0 auto; padding:0 28px; display:grid; grid-template-columns:210px minmax(0,1fr); gap:36px; }
.side { position:sticky; top:58px; align-self:start; padding:26px 0; max-height:calc(100vh - 58px); overflow:auto; }
.side summary { color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; margin-bottom:10px; }
.side ol { list-style:none; margin:0; padding:0; }
.side li a { display:block; padding:7px 11px; border-radius:3px; color:var(--fg); font-size:13px; line-height:1.5; }
.side li a:hover { background:var(--panel); text-decoration:none; }
.side li.on a { background:var(--panel); color:var(--accent); box-shadow:inset 2px 0 0 var(--accent); }
.content { padding:25px 0 36px; min-width:0; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:6px 10px; color:var(--muted); font-size:12px; line-height:1.6; margin-bottom:23px; }
.breadcrumbs a { color:var(--muted); }
h1 { font-size:32px; font-weight:650; line-height:1.25; margin:0 0 17px; letter-spacing:-.025em; }
h2 { font-size:23px; font-weight:650; line-height:1.35; margin:30px 0 14px; padding-top:22px; border-top:1px solid var(--border); letter-spacing:-.02em; }
h3 { font-size:18px; font-weight:650; margin:25px 0 10px; }
p { margin:0 0 16px; }
.lead { font-size:16px; color:var(--muted); }
.muted,.small { color:var(--muted); }
.small { font-size:13px; }
ul,ol { padding-left:22px; margin:0 0 16px; }
li { margin:4px 0; }
.term { color:var(--good); font-weight:650; }
b.num { color:var(--fg); }
.toc { background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:14px 18px; margin:22px 0; }
.toc b { font-size:13px; font-weight:600; color:var(--muted); }
.toc ol { margin:8px 0 0; padding-left:20px; columns:2; column-gap:28px; }
.toc li { break-inside:avoid; font-size:13px; }
.box { background:var(--panel); border:1px solid var(--border); border-left:2px solid var(--accent); border-radius:4px; padding:14px 18px; margin:18px 0; }
.box.tip { border-left-color:var(--good); }
.box p:last-child,.box ul:last-child { margin-bottom:0; }
.formula { font-family:ui-monospace,Consolas,monospace; font-size:13px; background:var(--panel2); border:1px solid var(--border); border-radius:4px; padding:11px 14px; margin:14px 0 18px; overflow-x:auto; white-space:nowrap; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:18px 0; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:16px; color:var(--fg); }
.card:hover { border-color:var(--accent); text-decoration:none; }
.card b { display:block; font-size:15px; margin-bottom:5px; }
.card span { color:var(--muted); font-size:13px; }
.shots { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin:18px 0 22px; }
figure { margin:0; }
.shots img,.float img { width:100%; height:auto; display:block; border-radius:5px; border:1px solid var(--border); background:#000; }
figcaption { font-size:12px; color:var(--muted); margin-top:8px; line-height:1.6; }
.float { float:right; width:210px; margin:4px 0 16px 24px; }
.clear { clear:both; }
.strip { margin:8px 0; max-width:560px; }
.strip img { width:100%; height:auto; display:block; border-radius:4px; border:1px solid var(--border); }
.strip figcaption { margin:3px 0 12px; }
.tw { overflow-x:auto; margin:16px 0 22px; border:1px solid var(--border); border-radius:4px; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th { background:var(--panel2); text-align:left; font-weight:600; color:var(--fg); font-size:12px; padding:10px 12px; }
td { padding:10px 12px; border-top:1px solid var(--border); vertical-align:top; }
tbody tr:nth-child(even) td { background:#ffffff03; }
table.num td { font-variant-numeric:tabular-nums; white-space:nowrap; }
table.levels td:nth-child(n+3):nth-child(-n+6) { font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
table.levels td:first-child { white-space:nowrap; }
table.gloss td:first-child { width:1%; }
.pager { display:flex; justify-content:space-between; gap:12px; margin-top:36px; padding-top:18px; border-top:1px solid var(--border); font-size:13px; }
.pager a { padding:9px 12px; background:var(--panel); border:1px solid var(--border); border-radius:4px; }
.foot { border-top:1px solid var(--border); text-align:center; color:var(--muted); font-size:12px; padding:25px 20px 32px; }
.foot p { margin:6px 0; }
@media(max-width:1136px) { .bar { margin:0 28px; } }
@media(max-width:860px) {
  .layout { grid-template-columns:1fr; gap:0; padding:0 20px; }
  .bar { margin:0 20px; flex-wrap:wrap; }
  .side { position:static; max-height:none; padding:18px 0 0; }
  .side details { background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:12px; }
  .side summary { margin:0; }
  .side details[open] summary { margin-bottom:10px; }
  h1 { font-size:27px; }
  .float { float:none; width:auto; max-width:240px; margin:16px auto; }
  .toc ol { columns:1; }
  .shots { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}
@media(max-width:480px) { .pager { flex-direction:column; }.pager span { display:none; }.links { gap:18px; font-size:12px; } }