:root{--bg:#141414;--pnl:#1c1c1c;--line:#2c2c2c;--txt:#ededed;--dim:#9a9a9a;--acc:#e0a458;--acc2:#7fb3a6}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font:15.5px/1.65 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
.w{max-width:980px;margin:0 auto;padding:0 24px}
header{border-bottom:1px solid var(--line);padding:22px 0}
.hd{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.lg{font-size:21px;letter-spacing:-.02em;color:var(--txt);font-weight:600}
.lg em{font-style:normal;color:var(--acc)}
.hd .sl{color:var(--dim);font-size:13px}
.hd nav{margin-left:auto;display:flex;gap:20px;font-size:13.5px}
.hd nav a{color:var(--dim)}
.hd nav a:hover{color:var(--acc)}
h1{font-size:clamp(24px,3.6vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.24}
h2{font-size:19px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
h2:before{content:"## ";color:var(--acc)}
h3{font-size:16px;font-weight:600}
section{padding:38px 0;border-bottom:1px solid var(--line)}
.intro{color:var(--dim);max-width:70ch;margin-top:14px}
.rel{display:grid;grid-template-columns:96px 1fr auto;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.rel:last-child{border-bottom:0}
.art{width:96px;height:96px;position:relative;overflow:hidden}
.a1{background:conic-gradient(from 20deg,#e0a458,#3a2a14,#e0a458)}
.a2{background:repeating-linear-gradient(45deg,#7fb3a6 0 6px,#1c3833 6px 12px)}
.a3{background:radial-gradient(circle at 30% 30%,#c46a4a,#241110)}
.a4{background:linear-gradient(180deg,#4a4a6a,#131320 60%,#e0a458)}
.a5{background:repeating-radial-gradient(circle at 50% 50%,#2a2a2a 0 4px,#454545 4px 8px)}
.a6{background:conic-gradient(#7fb3a6,#141414,#7fb3a6,#141414)}
.a7{background:linear-gradient(120deg,#8a6a2a,#1a1a1a 55%,#7fb3a6)}
.a8{background:repeating-linear-gradient(0deg,#3a2c4a 0 5px,#171021 5px 10px)}
.rel .meta{color:var(--dim);font-size:13px;margin-top:3px}
.rel p{color:var(--dim);font-size:14px;margin-top:8px;max-width:62ch}
.cat{color:var(--acc);font-size:13px;white-space:nowrap}
.play{background:none;border:1px solid var(--line);color:var(--dim);border-radius:3px;padding:4px 10px;
  font:inherit;font-size:12px;cursor:pointer;margin-top:10px}
.play:hover{border-color:var(--acc);color:var(--acc)}
.player{background:var(--pnl);border:1px solid var(--line);padding:14px 18px;display:flex;align-items:center;gap:16px;
  position:sticky;bottom:0;font-size:13.5px}
.bar{flex:1;height:4px;background:var(--line);position:relative;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acc);display:block}
ul.pl{list-style:none;color:var(--dim);font-size:14px}
ul.pl li{padding:5px 0 5px 22px;position:relative;border-bottom:1px dotted var(--line)}
ul.pl li:before{content:"›";position:absolute;left:4px;color:var(--acc)}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--dim);font-weight:400;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:36px}
pre{background:var(--pnl);border:1px solid var(--line);padding:14px 16px;overflow:auto;font-size:13px;color:var(--dim)}
footer{padding:30px 0 40px;color:var(--dim);font-size:13px}
.fr{display:flex;gap:22px;flex-wrap:wrap}
@media(max-width:760px){.rel{grid-template-columns:72px 1fr}.art{width:72px;height:72px}.two{grid-template-columns:1fr}.cat{display:none}}