/* purrplecat.wiki — "The Purrple Pages". A calm encyclopedia: Literata serif articles, Hanken UI, lavender ink, infoboxes and sortable tables. */
@font-face{font-family:Lit;src:url(/fonts/literata.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:Lit;src:url(/fonts/literata-italic.woff2) format("woff2");font-style:italic;font-weight:200 900;font-display:swap}
@font-face{font-family:Han;src:url(/fonts/hanken.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:JBM;src:url(/fonts/jetbrains-mono.woff2) format("woff2");font-display:swap}
:root{--card:#fff;--hov:#FBFAFE;--onl:#fff;--pbg:rgba(255,255,255,.96);--cbb:#E9F1FD;--cbf:#2357A8;--sh:rgba(30,26,43,.35);--lg:#5B3CC4;--bg:#F7F5FB;--paper:#FFFFFF;--ink:#1E1A2B;--ink2:#575170;--mut:#7A7390;--line:#E2DCEF;--line2:#CFC6E4;--link:#5B3CC4;--vis:#4A2F9C;--acc:#7C5CE0;--soft:#F1ECFC;--ok:#1F7A55;--okb:#E8F5EE;--no:#9A4B12;--nob:#FDF1E6;color-scheme:light}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 Han,system-ui,sans-serif;padding-bottom:84px}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%}button{font:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:6px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:99}.skip:focus{left:6px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mut{color:var(--mut)}
/* top bar */
.tb{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.tb-in{max-width:1320px;margin:0 auto;padding:10px 24px;display:grid;grid-template-columns:240px 1fr auto auto;gap:24px;align-items:center}
.mark{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none!important}.lg{width:38px;height:38px;flex:none}
.mark span{font:500 19px/1.05 Lit,serif;letter-spacing:-.01em}.mark b{font-weight:700;color:var(--link)}.mark small{display:block;font:500 11.5px/1.3 Han;color:var(--mut);letter-spacing:.02em}
.sr{position:relative;max-width:640px;width:100%}.sr input{width:100%;height:40px;border:1px solid var(--line2);border-radius:8px;padding:0 44px 0 14px;font:400 15px Han;background:var(--bg);color:var(--ink)}
.sr input:focus{background:var(--card);border-color:var(--acc);outline:0;box-shadow:0 0 0 3px rgba(124,92,224,.18)}
.sr button{position:absolute;right:4px;top:4px;width:32px;height:32px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}.sr svg{width:18px;height:18px;fill:none;stroke:var(--ink2);stroke-width:2}
.sug{position:absolute;left:0;right:0;top:44px;margin:0;padding:6px;list-style:none;background:var(--card);border:1px solid var(--line2);border-radius:10px;box-shadow:0 18px 40px -18px var(--sh);max-height:70vh;overflow:auto}
.sug li a{display:block;padding:8px 10px;border-radius:6px;color:var(--ink);text-decoration:none}.sug li a:hover,.sug li[aria-selected] a{background:var(--soft)}.sug b{display:block;font-weight:600}.sug small{color:var(--mut);font-size:12.5px}.sg-all a{color:var(--link)!important;font-size:14px}
.tb-r{font:600 14px Han;color:var(--ink2);padding:8px 12px;border:1px solid var(--line);border-radius:8px}.tb-r:hover{background:var(--soft);text-decoration:none}
.tg{width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink2);cursor:pointer;display:grid;place-items:center;padding:0}.tg:hover{background:var(--soft);color:var(--ink)}
.tg svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.tg .i-sun,[data-theme=dark] .tg .i-moon{display:none}[data-theme=dark] .tg .i-sun{display:block}
/* dark theme: same layout, night-lavender palette; images keep their real colours */
[data-theme=dark]{--card:#211C2E;--hov:#262037;--onl:#15121D;--pbg:rgba(28,24,39,.95);--cbb:#1B2A44;--cbf:#9CC1FF;--sh:rgba(0,0,0,.6);--bg:#14111C;--paper:#1C1827;--ink:#ECE8F5;--ink2:#C4BCD9;--mut:#A39BBB;--line:#2F2942;--line2:#41395A;--link:#B8A3FF;--vis:#D2C6FF;--acc:#9C82F2;--soft:#2B2442;--ok:#6CD3A2;--okb:#15302A;--no:#F2B27A;--nob:#37251A;color-scheme:dark}
[data-theme=dark] .sr input:focus{box-shadow:0 0 0 3px rgba(156,130,242,.3)}[data-theme=dark] .btn:hover{background:var(--vis)}
/* layout */
.lay{max-width:1320px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px}
.sd{padding:24px 0;font-size:14.5px}.sd summary{display:none}.sd h2{font:700 11px/1 Han;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}.sd h2:first-of-type{margin-top:0}
.sd ul{list-style:none;margin:0;padding:0}.sd li a{display:block;padding:4px 8px;margin:0 -8px;border-radius:6px;color:var(--link)}.sd li a[aria-current]{background:var(--soft);color:var(--ink);font-weight:600}
.ct{padding:18px 0 40px;min-width:0}
.tabs{display:flex;gap:2px;margin-bottom:-1px}.tabs a{padding:8px 14px;font:600 13.5px Han;color:var(--link);border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0}.tabs a[aria-current]{background:var(--paper);border-color:var(--line);color:var(--ink)}
.art{background:var(--paper);border:1px solid var(--line);border-radius:0 10px 10px 10px;padding:26px 34px 40px;display:flow-root}
.pg-main .art,.art:first-child{border-radius:10px}
.fh{font:500 clamp(28px,3.4vw,38px)/1.15 Lit,serif;letter-spacing:-.015em;margin:0;padding-bottom:8px;border-bottom:1px solid var(--line2)}.fh-s{font-size:.6em;color:var(--mut);font-weight:400}
.from{font-size:13px;color:var(--mut);margin:6px 0 18px}
.art h2{font:500 24px/1.25 Lit,serif;margin:30px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--line)}.art h3{font:700 16.5px/1.3 Han;margin:22px 0 6px}
.art p,.art li{font:400 16.5px/1.7 Lit,serif;color:var(--ink)}.art p{margin:0 0 14px}.art small{color:var(--mut)}
.bc{font:500 13px Han;color:var(--mut);margin:-6px 0 16px}
/* infobox */
.ib{float:right;width:300px;margin:0 0 18px 26px;background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:12px;font:400 14px/1.45 Han}
.ib-h{font:600 17px/1.25 Lit,serif;text-align:center;margin:2px 0 10px;padding:8px;background:var(--soft);border-radius:6px}
.ib img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px;margin-bottom:8px}
.ib table{width:100%;border-collapse:collapse}.ib th{text-align:left;vertical-align:top;padding:6px 8px 6px 0;width:38%;color:var(--ink2);font-weight:600}.ib td{padding:6px 0;vertical-align:top;border-top:0}.ib tr+tr th,.ib tr+tr td{border-top:1px solid var(--line)}
/* toc */
.toc{display:inline-block;background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:12px 18px 12px 14px;margin:6px 0 16px;font:400 14.5px/1.5 Han;min-width:240px}
.toc-h{font:700 13px Han!important;margin:0 0 6px!important;text-align:center}.toc ol{list-style:none;margin:0;padding:0}.toc li{font:400 14.5px/1.6 Han!important}.toc span{color:var(--mut);margin-right:6px;font-family:JBM,monospace;font-size:12.5px}
/* tables */
.tw{overflow-x:auto;margin:10px 0 18px;border:1px solid var(--line2);border-radius:8px}
.wt{border-collapse:collapse;width:100%;font:400 14.5px/1.45 Han;background:var(--card)}
.wt th{background:var(--soft);text-align:left;font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line2);white-space:nowrap;position:sticky;top:0}
.wt td{padding:6px 10px;border-top:1px solid var(--line);vertical-align:middle}.wt tr:hover td{background:var(--hov)}.wt tr.on td{background:var(--soft)}
.srt{cursor:pointer;user-select:none}.srt::after{content:" ⇅";color:var(--mut);font-weight:400;font-size:12px}.srt[aria-sort=ascending]::after{content:" ↑";color:var(--link)}.srt[aria-sort=descending]::after{content:" ↓";color:var(--link)}
.c-n,.c-len,.c-year,.c-track{font-family:JBM,ui-monospace,monospace;font-size:13px;white-space:nowrap}.c-play{width:40px}.c-cv{width:46px}.c-cv img{display:block;width:36px;height:36px;border-radius:4px}
.pl{width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);background:var(--card);cursor:pointer;display:grid;place-items:center;padding:0}.pl span{width:0;height:0;border-left:9px solid var(--link);border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;margin-left:2px}
.pl:hover{background:var(--soft)}.pl.now span{border:0;width:9px;height:10px;background:linear-gradient(90deg,var(--link) 0 3px,transparent 3px 6px,var(--link) 6px);margin:0}.pl-x{color:var(--line2);display:inline-block;width:30px;text-align:center}
.kt{display:inline-block;font:600 11.5px/1 Han;padding:4px 7px;border-radius:99px;background:var(--soft);color:var(--link);white-space:nowrap}.kt-collab{background:var(--cbb);color:var(--cbf)}.kt-label{background:var(--nob);color:var(--no)}.kt-self{background:var(--okb);color:var(--ok)}
.flt{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}.flt input,.flt select{height:38px;border:1px solid var(--line2);border-radius:8px;padding:0 12px;font:400 15px Han;background:var(--card);color:var(--ink)}.flt input{flex:1;min-width:220px}
/* main page */
.mp-top{background:linear-gradient(120deg,var(--soft),var(--card) 60%);border:1px solid var(--line);border-radius:10px;padding:18px 22px;margin-bottom:18px}.mp-top p{font-size:17.5px!important;margin:0 0 12px!important}
.mp-stats{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;margin:0;padding:0}.mp-stats li{font:500 14px Han!important;color:var(--ink2)!important}.mp-stats b{font:600 22px Lit,serif;color:var(--link);margin-right:4px}
.mp-g{display:grid;grid-template-columns:1fr 1fr;gap:18px}.box{border:1px solid var(--line);border-radius:10px;padding:4px 18px 14px}.box h2{font:600 17px Lit,serif!important;margin:12px -18px 12px!important;padding:0 18px 10px!important;border-bottom:1px solid var(--line)!important}
.box:first-child{grid-column:1/-1}.feat{display:flex;gap:18px}.feat img{width:150px;height:150px;border-radius:6px;flex:none}
.dyk{padding-left:18px;margin:0}.dyk li{margin:0 0 8px}.rec{list-style:none;margin:0;padding:0;display:grid;gap:8px}.rec a{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none!important}.rec img{width:56px;height:56px;border-radius:5px}.rec b{display:block;color:var(--link);font:600 15px Han}.rec small{font:400 13px Han}
.brw{padding-left:18px;margin:0}.yrs{font:500 15px Han!important}
#otd ul{padding-left:18px;margin:0}
/* song + album bits */
.note{border-left:4px solid;padding:10px 14px!important;border-radius:0 8px 8px 0;font:400 15px/1.6 Han!important}.note.ok{border-color:var(--ok);background:var(--okb)}.note.no{border-color:var(--no);background:var(--nob)}
ul.lk{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 10px}ul.lk li{font:500 14px Han!important}ul.lk a{display:inline-block;padding:6px 12px;border:1px solid var(--line2);border-radius:99px}ul.lk a:hover{background:var(--soft);text-decoration:none}
ol.tl{columns:2;column-gap:30px;padding-left:24px}ol.tl li{font:400 15px/1.7 Han!important}ol.tl li.cur{font-weight:700}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;clear:both}.pn a{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font:600 15px Han}.pn a[rel=next]{text-align:right}.pn small{display:block;font:500 12px JBM,monospace;color:var(--mut)}.pn a:hover{background:var(--soft);text-decoration:none}
.cols{columns:3;column-gap:24px;padding-left:18px}.cols li{font:400 15px/1.6 Han!important;break-inside:avoid}
.fq h2{font-size:20px!important}.ext{columns:2}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--link);color:var(--onl);border:0;border-radius:8px;padding:9px 16px;font:600 14.5px Han;cursor:pointer;text-decoration:none!important}.btn:hover{background:var(--vis)}.btn.ln{background:var(--card);color:var(--link);box-shadow:inset 0 0 0 1px var(--line2)}.btn.sm{padding:5px 10px;font-size:13px}.btn.ok{background:var(--ok);color:var(--onl)}
.art code{font:13.5px JBM,monospace;background:var(--soft);padding:2px 6px;border-radius:4px}
.sbig{display:flex;gap:10px;margin-bottom:18px}.sbig input{flex:1;height:44px;border:1px solid var(--line2);border-radius:8px;padding:0 14px;font:400 16px Han;background:var(--card);color:var(--ink)}
.sres{list-style:none;padding:0}.sres li{padding:10px 0;border-top:1px solid var(--line);font:400 15px Han!important}.sres li a{font-weight:600;font-size:16.5px}
/* footer */
.ft{max-width:1320px;margin:10px auto 0;padding:20px 24px 30px 256px;font-size:13px;color:var(--mut)}.ft p{margin:0 0 8px}
/* player */
.pb{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--pbg);backdrop-filter:blur(8px);border-top:1px solid var(--line2)}
.pb-in{max-width:1320px;margin:0 auto;padding:8px 24px;display:grid;grid-template-columns:40px minmax(0,1fr) auto minmax(160px,1.2fr) auto auto;gap:14px;align-items:center}
.pb-c{width:40px;height:40px;border-radius:5px}.pb-t{margin:0;min-width:0;line-height:1.25}.pb-t b{display:block;font:600 14.5px Han;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pb-t span{font-size:12.5px;color:var(--mut);white-space:nowrap}
.pb-ctl{display:flex;gap:4px;align-items:center}.pb-b{width:34px;height:34px;border:0;background:transparent;border-radius:50%;cursor:pointer;display:grid;place-items:center}.pb-b:hover{background:var(--soft)}.pb-b svg{width:16px;height:16px;fill:var(--ink);stroke:var(--ink);stroke-width:2}
.pb-pp{width:40px;height:40px;border-radius:50%;border:0;background:var(--link);cursor:pointer;display:grid;place-items:center}.pb-pp svg{width:15px;height:15px;fill:var(--onl)}
.pb-sk{display:flex;gap:8px;align-items:center;font:12px JBM,monospace;color:var(--mut)}.pb-rail{position:relative;flex:1;height:5px;background:var(--line);border-radius:99px}.pb-rail i{position:absolute;inset:0;background:var(--acc);border-radius:99px;transform:scaleX(0);transform-origin:left}.pb-seek{position:absolute;inset:-10px 0;width:100%;opacity:0;margin:0;cursor:pointer}
.pb-wk,.pb-dl{font:600 12.5px Han;padding:6px 10px;border:1px solid var(--line2);border-radius:6px}.pb-wk:hover,.pb-dl:hover{background:var(--soft);text-decoration:none}
.toast{position:fixed;left:50%;bottom:76px;transform:translate(-50%,10px);background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:8px;font-size:14px;opacity:0;transition:.2s;pointer-events:none;z-index:60}.toast.show{opacity:1;transform:translate(-50%,0)}
/* responsive */
@media (max-width:1000px){.tb-in{grid-template-columns:auto 1fr auto;gap:14px}.tb-r{display:none}.lay{grid-template-columns:1fr;gap:0}.ft{padding-left:24px}
 .sd{padding:12px 0 0}.sd summary{display:inline-block;cursor:pointer;font:600 14px Han;padding:7px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--ink);list-style:none}.sd summary::-webkit-details-marker{display:none}.sd summary::before{content:"☰ "}
 .sd-d[open]>summary~*{}.sd-d:not([open]) h2,.sd-d:not([open]) ul{display:none}.sd-d[open]{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px}.sd-d[open] summary{margin-bottom:10px}.sd ul{display:flex;flex-wrap:wrap;gap:2px 14px}.sd li a{margin:0}}
@media (max-width:700px){body{font-size:15px;padding-bottom:118px}.tb-in{grid-template-columns:1fr auto;grid-template-areas:"m t" "s s";padding:8px 14px;gap:8px}.tb-in .mark{grid-area:m}.tb-in .sr{grid-area:s}.tg{grid-area:t}.mark small{display:none}.lay{padding:0 10px}
 .art{padding:18px 16px 28px;border-radius:0 8px 8px 8px}.ib{float:none;width:100%;margin:0 0 16px}.ib img{max-width:220px;margin:0 auto 8px}.mp-g{grid-template-columns:1fr}.feat{flex-direction:column}.feat img{width:120px;height:120px}
 .art p,.art li{font-size:16px}ol.tl,.cols,.ext{columns:1}.wt .c-album,.wt .c-kind,.wt .c-year{display:none}.toc{display:block}
 .pb-in{grid-template-columns:40px minmax(0,1fr) auto;padding:6px 10px;gap:10px}.pb-sk{grid-column:1/-1}.pb-wk,.pb-dl{display:none}.toast{bottom:118px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}