/* Chiptune Wiki viewer — dark tracker style. Colours borrowed from 037-lab. */
:root{
  --bg:#0e1220; --panel:#151a2c; --panel2:#1a2038; --line:#262e4a; --line2:#333d63;
  --ink:#dfe4f5; --dim:#8890ad; --faint:#5a6180;
  --cyan:#5fd9e0; --cyan-soft:rgba(95,217,224,.14);
  --amber:#ffb454; --amber-soft:rgba(255,180,84,.16);
  --pink:#ff6fa5; --pink-soft:rgba(255,111,165,.16);
  --green:#7ee787; --green-soft:rgba(126,231,135,.14);
  --red:#ff5c5c; --red-soft:rgba(255,92,92,.16);
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Menlo,Consolas,monospace;
  --sans:ui-sans-serif,-apple-system,'Segoe UI',Inter,Roboto,'Helvetica Neue',sans-serif;
  --t-technique:var(--cyan); --t-concept:var(--amber); --t-entity:var(--pink); --t-summary:var(--green);
  --t-wanted:var(--red); --t-log:var(--dim); --t-index:var(--dim); --t-page:var(--dim); --t-tw:var(--amber); --t-cheatsheet:var(--cyan); --t-inbox:var(--dim);
  --side-w:250px; --rail-w:280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:#2b3352 var(--bg)}
body{background:var(--bg);background-image:radial-gradient(1200px 500px at 50% -140px,rgba(95,217,224,.07),transparent 60%);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;min-height:100vh}
::selection{background:rgba(95,217,224,.28)}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--dim);background:var(--panel2)}
code,pre{font-family:var(--mono)}
code{font-size:.9em;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--amber);white-space:nowrap}
pre{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;overflow-x:auto;font-size:13px;line-height:1.45;margin:14px 0}
pre code{background:none;border:0;padding:0;color:var(--ink);white-space:pre}
button,input,select{font-family:var(--mono);font-size:13px;color:var(--ink)}
input[type=search],input[type=text],select{background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:6px 9px;outline:none}
input:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
input[type=search]:hover,select:hover{border-color:var(--cyan)}
input[type=checkbox]{accent-color:var(--cyan);width:14px;height:14px;vertical-align:-2px}
button{background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:6px 11px;cursor:pointer}
button:hover{border-color:var(--cyan);color:var(--cyan)}
button.on{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-soft)}
button.alt{color:var(--dim)}
.dim{color:var(--dim)}
.n{color:var(--faint);font-family:var(--mono);font-size:11px;font-weight:400}
.warn{background:var(--red-soft);border:1px solid var(--red);border-radius:6px;padding:8px 12px;margin:10px 0}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:10px 20px;background:rgba(14,18,32,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.logo:hover{text-decoration:none}
.logo .mark{font-family:var(--mono);font-weight:800;font-size:19px;letter-spacing:2px;background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo .sub{color:var(--faint);font-family:var(--mono);font-size:11px;letter-spacing:.5px}
.topnav{display:flex;gap:2px;flex:1;overflow-x:auto}
.topnav a{font-family:var(--mono);color:var(--dim);padding:6px 11px;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;border-bottom:2px solid transparent;white-space:nowrap}
.topnav a:hover{color:var(--ink);text-decoration:none}
.topnav a.on{color:var(--cyan);border-bottom-color:var(--cyan)}
.sbtn{display:flex;align-items:center;gap:8px;color:var(--dim);min-width:200px;justify-content:space-between}
.sbtn:hover{color:var(--cyan)}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr) var(--rail-w);gap:0;min-height:calc(100vh - 56px)}
.side{border-right:1px solid var(--line);position:sticky;top:53px;height:calc(100vh - 53px);overflow-y:auto;font-family:var(--mono);font-size:12.5px;background:rgba(21,26,44,.5)}
.side-in{padding:12px 10px 40px}
.side-filter{width:100%;margin-bottom:8px}
.grp{margin-bottom:2px}
.grp summary{cursor:pointer;list-style:none;color:var(--dim);text-transform:uppercase;letter-spacing:1.2px;font-size:11px;padding:6px 8px;border-radius:5px;display:flex;justify-content:space-between;align-items:center}
.grp summary::-webkit-details-marker{display:none}
.grp summary::before{content:'▸';margin-right:6px;color:var(--faint);display:inline-block;transition:transform .12s}
.grp[open] summary::before{transform:rotate(90deg)}
.grp summary:hover{color:var(--ink);background:var(--panel2)}
.grp ul{list-style:none;margin:2px 0 8px}
.grp li a{display:block;padding:3px 8px 3px 22px;color:var(--ink);border-radius:4px;border-left:2px solid transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp li a:hover{background:var(--panel2);text-decoration:none}
.grp li a.on{color:var(--cyan);background:var(--cyan-soft);border-left-color:var(--cyan)}
.main{padding:26px 36px 80px;min-width:0}
.rail{border-left:1px solid var(--line);position:sticky;top:53px;height:calc(100vh - 53px);overflow-y:auto;padding:22px 16px 40px;font-size:12.5px;font-family:var(--mono)}
.rail h4,.homeside h4{color:var(--dim);text-transform:uppercase;letter-spacing:1.2px;font-size:11px;margin:0 0 8px;display:flex;justify-content:space-between}
.rail section,.rail nav{margin-bottom:22px}
.rail ul{list-style:none}
.rail li{padding:2px 0;line-height:1.4}
.toc li.l3{padding-left:14px;font-size:12px}
.toc a{color:var(--dim)}
.toc a:hover{color:var(--cyan)}
.mg canvas{width:100%;height:220px;display:block;background:var(--panel);border:1px solid var(--line);border-radius:8px 8px 0 0;cursor:default}
.mgcap{font-size:11px;color:var(--dim);background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;padding:5px 8px;margin-bottom:6px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foot{border-top:1px solid var(--line);padding:16px 20px;color:var(--faint);font-family:var(--mono);font-size:11px;text-align:center}
.shell.norail{grid-template-columns:var(--side-w) minmax(0,1fr)}
.norail .page{max-width:1100px}
@media (max-width:1180px){.shell{grid-template-columns:var(--side-w) minmax(0,1fr)}.rail{display:none}}
@media (max-width:820px){.shell{grid-template-columns:minmax(0,1fr)}.side{display:none}.main{padding:18px 16px 60px}}

/* ---------- page ---------- */
.page{max-width:900px}
.crumbs{font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.5px;margin-bottom:8px}
.crumbs a{color:var(--dim)}
.ph h1{font-family:var(--mono);font-size:30px;font-weight:800;letter-spacing:-.5px;line-height:1.15;margin-bottom:10px}
.t-technique .ph h1{color:var(--cyan)}.t-concept .ph h1{color:var(--amber)}.t-entity .ph h1{color:var(--pink)}.t-summary .ph h1{color:var(--green)}
.meta{font-family:var(--mono);font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--panel);margin-bottom:18px}
.mrow{padding:2px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mk{color:var(--faint);text-transform:uppercase;letter-spacing:1px;font-size:10.5px;min-width:88px}
.badge{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;padding:1px 7px;border-radius:4px;border:1px solid var(--line2);color:var(--dim);background:var(--panel2)}
.badge.t-technique{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-soft)}
.badge.t-concept{color:var(--amber);border-color:var(--amber);background:var(--amber-soft)}
.badge.t-entity{color:var(--pink);border-color:var(--pink);background:var(--pink-soft)}
.badge.t-summary{color:var(--green);border-color:var(--green);background:var(--green-soft)}
.badge.t-wanted{color:var(--red);border-color:var(--red);background:var(--red-soft)}
.chip{display:inline-block;font-family:var(--mono);font-size:11.5px;padding:1px 8px;border-radius:12px;border:1px solid var(--line2);color:var(--ink);background:var(--panel2)}
.chip:hover{border-color:var(--cyan);text-decoration:none;color:var(--cyan)}
.chip.big{font-size:13px;padding:5px 12px;margin:0 6px 8px 0}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.body{font-size:15.5px}
.body h2{font-family:var(--mono);font-size:19px;color:var(--ink);margin:30px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);letter-spacing:-.2px}
.body h3{font-family:var(--mono);font-size:15.5px;color:var(--cyan);margin:22px 0 8px}
.body h4{font-family:var(--mono);font-size:14px;color:var(--amber);margin:16px 0 6px}
.hl{margin-left:8px;color:var(--faint);opacity:0;font-weight:400;font-size:.8em}
h2:hover .hl,h3:hover .hl,h4:hover .hl{opacity:1}
.body p{margin:0 0 12px}
.body ul,.body ol{margin:0 0 12px 24px}
.body li{margin:3px 0}
.body li>ul,.body li>ol{margin-bottom:0}
.body blockquote{border-left:3px solid var(--amber);background:var(--amber-soft);padding:8px 14px;margin:12px 0;border-radius:0 6px 6px 0;color:var(--ink)}
.body blockquote p:last-child{margin-bottom:0}
.body strong{color:#fff}
.body hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.tw{overflow-x:auto;margin:12px 0 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:13px}
th{text-align:left;color:var(--cyan);font-weight:600;letter-spacing:.5px;padding:8px 12px;border-bottom:1px solid var(--line2);background:var(--panel2);white-space:nowrap}
td{padding:6px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
tbody tr:hover{background:var(--cyan-soft)}
td code{white-space:nowrap}
td.num{text-align:right;color:var(--dim)}
.wl.t-technique{color:var(--cyan)}.wl.t-concept{color:var(--amber)}.wl.t-entity{color:var(--pink)}.wl.t-summary{color:var(--green)}
.wl.t-log,.wl.t-index,.wl.t-page{color:var(--dim)}
.wl.wanted{color:var(--red);border-bottom:1px dashed var(--red)}
.ext::after{content:'↗';font-size:.75em;margin-left:2px;color:var(--faint)}
.unv{background:var(--red-soft);color:#ffb3b3;border-radius:3px;padding:0 3px}
.cite{color:var(--faint);font-size:.9em}
.cite .wl{opacity:.85}
.pf{margin-top:34px;padding-top:12px;border-top:1px solid var(--line);color:var(--faint);font-family:var(--mono);font-size:11.5px}
.pf .path{color:var(--dim)}
.pn{font-family:var(--mono);font-size:12px;margin:6px 0}
.plist{list-style:none}
.plist li{padding:7px 0;border-bottom:1px solid var(--line)}
.plist .wl{font-family:var(--mono);font-weight:600}
.plist .ex{display:block;color:var(--dim);font-size:13.5px;margin-top:2px}
.compact{list-style:none;columns:2;column-gap:30px;font-family:var(--mono);font-size:13px}
.compact li{padding:2px 0;break-inside:avoid}
.files{list-style:none;font-family:var(--mono);font-size:13px}
.files li{padding:3px 0;border-bottom:1px solid var(--line)}
.page section{margin-bottom:26px}
.page section h2{font-family:var(--mono);font-size:18px;margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.page>h2,.page .body h2{font-family:var(--mono)}
.page h2{font-family:var(--mono);font-size:19px;margin:28px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.page h2 .n{margin-left:8px}
.page>p{margin:0 0 12px}
.page>ul.compact{margin-bottom:12px}

/* ---------- home ---------- */
.home{max-width:1000px}
.hero{padding:10px 0 26px;border-bottom:1px solid var(--line);margin-bottom:26px}
.hero h1{font-family:var(--mono);font-size:44px;font-weight:800;letter-spacing:-1px;background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.hero .tag{color:var(--dim);font-size:16px;max-width:720px;margin:10px 0 18px}
.herosearch{width:100%;max-width:560px;text-align:left;display:flex;justify-content:space-between;padding:12px 16px;font-size:14px;color:var(--dim);border-color:var(--line2);background:var(--panel)}
.herosearch:hover{color:var(--cyan)}
.tiles{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.tile{display:flex;flex-direction:column;min-width:120px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.tile b{font-size:26px;color:var(--ink);letter-spacing:0;line-height:1.1;margin-bottom:2px}
.tile:hover{text-decoration:none;border-color:var(--cyan)}
.tile.t-technique b{color:var(--cyan)}.tile.t-concept b{color:var(--amber)}.tile.t-entity b{color:var(--pink)}.tile.t-summary b{color:var(--green)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:36px}
.homeside{font-family:var(--mono);font-size:12.5px}
.homeside ul{list-style:none;margin-bottom:22px}
.homeside li{padding:3px 0;line-height:1.4}
.home .body h2{margin-top:22px}
.home .body p:first-child{color:var(--dim)}
@media (max-width:1000px){.cols{grid-template-columns:1fr}}

/* ---------- search overlay ---------- */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(6,8,16,.72);backdrop-filter:blur(3px);padding:8vh 16px 0;overflow:hidden}
.sbox{max-width:820px;margin:0 auto;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;max-height:84vh}
.srow{display:flex;gap:10px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}
#q{flex:1;font-size:16px;padding:10px 12px}
.qopt{font-family:var(--mono);font-size:12px;color:var(--dim);white-space:nowrap;display:flex;align-items:center;gap:5px}
.qhelp{padding:8px 14px;font-size:11.5px;color:var(--faint);border-bottom:1px solid var(--line);font-family:var(--mono);line-height:1.8}
.qres{overflow-y:auto;padding:6px}
.qgrp{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);padding:10px 10px 4px}
.res{padding:8px 10px;border-radius:8px;cursor:pointer;display:block;color:var(--ink)}
.res:hover{text-decoration:none;background:var(--panel2)}
.res.on{background:var(--cyan-soft);outline:1px solid var(--cyan)}
.rt{font-family:var(--mono);font-size:14px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.rt .badge{font-size:9.5px}
.rm{color:var(--faint);font-size:11.5px}
.rs{color:var(--dim);font-size:13px;margin-top:3px;line-height:1.45}
.rs .ln{color:var(--faint);font-family:var(--mono);font-size:11px;margin-right:6px}
mark{background:rgba(255,180,84,.3);color:#fff;border-radius:2px;padding:0 1px}
.qempty{padding:26px;text-align:center;color:var(--faint);font-family:var(--mono)}

/* ---------- raw ---------- */
pre.raw{counter-reset:line;padding:10px 0;font-size:12.5px;line-height:1.4;white-space:pre;overflow-x:auto;position:relative;max-width:none}
pre.raw .l{display:block;padding-left:64px;position:relative;min-height:1.4em}
pre.raw .l::before{counter-increment:line;content:counter(line);position:absolute;left:0;width:48px;text-align:right;color:var(--faint);cursor:pointer;user-select:none;font-size:11px}
pre.raw .l:hover{background:rgba(255,255,255,.03)}
pre.raw .l:hover::before{color:var(--cyan)}
pre.raw .l:target,pre.raw .l.hit{background:var(--amber-soft);box-shadow:inset 3px 0 0 var(--amber)}
pre.raw .hd{color:var(--cyan);font-weight:600}
pre.raw .an{display:block;height:0}
.rawpage{max-width:none}
.raw-view .main{padding-right:24px}
.rawl{font-family:var(--mono)}
iframe.pdf{width:100%;height:calc(100vh - 260px);border:1px solid var(--line);border-radius:8px;background:#fff}

/* ---------- TraxWeekly TOC ---------- */
.tocpage{max-width:none}
.tocctl{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0 10px;font-family:var(--mono);font-size:12px}
.tocctl input{min-width:280px}
.tocctl .chips button{padding:4px 9px;font-size:12px}
.toc-table th{cursor:pointer;user-select:none}
.toc-table td:nth-child(1),.toc-table td:nth-child(2){white-space:nowrap}
.toc-table th:hover{color:#fff}
.toc-table th[data-dir=a]::after{content:' ▴'}.toc-table th[data-dir=d]::after{content:' ▾'}
.toc-table tr.hit td{background:var(--amber-soft)}
.toc-table tr:target td{background:var(--amber-soft)}
.flag{display:inline-block;font-size:11px;padding:0 6px;border-radius:9px;border:1px solid var(--line2);margin-right:3px;color:var(--dim);white-space:nowrap}
.flag.f-x{color:var(--amber);border-color:var(--amber)}
.flag.f-interview{color:var(--pink);border-color:var(--pink)}
.flag.f-review{color:var(--cyan);border-color:var(--cyan)}
.flag.f-skip{color:var(--faint);text-decoration:line-through}

/* ---------- cheat sheets ---------- */
.cspage{max-width:1000px}
.cstabs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 18px;position:sticky;top:53px;background:var(--bg);padding:10px 0;z-index:5;border-bottom:1px solid var(--line)}
.cs h1{font-family:var(--mono);font-size:26px;margin:8px 0 4px}
.cs-links{font-family:var(--mono);font-size:12px;margin-bottom:14px}
.cs-h{font-family:var(--mono);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--faint);margin:26px 0 8px;border:0}
.cs-part h2:not(.cs-h){font-family:var(--mono);font-size:19px;margin:20px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.cs-part h3{font-family:var(--mono);font-size:15px;color:var(--cyan);margin:18px 0 6px}
.cs-part h4{font-family:var(--mono);font-size:13.5px;color:var(--amber);margin:14px 0 6px}
.cs-part p{margin:0 0 10px}
.cs-part ul,.cs-part ol{margin:0 0 10px 22px}
.cs-tech{margin:10px 0 18px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:rgba(21,26,44,.5)}
.cs-tech .cs-t{margin:0 0 8px;font-size:15px}
.cs-tech .cs-t .wl{font-size:16px}
.cs-standalone .ph h1{font-size:30px}

/* ---------- graph ---------- */
.graphpage{max-width:none}
.gctl{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-family:var(--mono);font-size:12px;margin:12px 0;color:var(--dim)}
.gctl label{display:flex;align-items:center;gap:6px}
.legend{display:flex;gap:12px;flex-wrap:wrap}
.legend label{cursor:pointer}
.sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:2px}
.sw.t-technique{background:var(--cyan)}.sw.t-concept{background:var(--amber)}.sw.t-entity{background:var(--pink)}.sw.t-summary{background:var(--green)}.sw.t-wanted{background:var(--red)}
canvas.biggraph{width:100%;height:calc(100vh - 250px);min-height:420px;display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;cursor:grab}
.gtip{position:fixed;pointer-events:none;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:6px 10px;font-family:var(--mono);font-size:12px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.gtip b{display:block;font-size:13px}

/* ---------- reduced motion / print ---------- */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{
  body{background:#fff;color:#000;font-size:11pt}
  .top,.side,.rail,.foot,.overlay,.cstabs,.cs-links,.crumbs,.hl,#random{display:none!important}
  .shell{display:block}
  .main{padding:0}
  .cs[hidden]{display:none}
  .page,.cspage{max-width:none}
  a{color:#000}
  .wl.t-technique,.wl.t-concept,.wl.t-entity,.wl.t-summary{color:#000;text-decoration:underline}
  .ph h1,.cs h1,.body h2,.body h3,.cs-part h2,.cs-part h3{color:#000}
  code{background:#f2f2f2;border-color:#ccc;color:#000}
  pre{background:#f7f7f7;border-color:#ccc;color:#000}
  pre code{color:#000}
  .tw{border-color:#bbb;background:#fff;page-break-inside:auto}
  table{font-size:9pt}
  th{color:#000;background:#eee;border-color:#bbb}
  td{border-color:#ddd}
  tbody tr:nth-child(even){background:#fafafa}
  tr{page-break-inside:avoid}
  .cs-tech{border-color:#ccc;background:#fff;page-break-inside:avoid}
  .cs-h{color:#666}
  .meta{border-color:#ccc;background:#fff;color:#333}
  .badge,.chip{color:#333;border-color:#999;background:#fff}
  .body strong{color:#000}
  .unv{background:#fee;color:#900}
  .cite{color:#666}
}