:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#12171d;--side:#1f2d3d;--paper:#222b35;--ink:#bcc7d3;--accent:#7a9cc2;--fh:'Special Elite',serif;--fb:'Special Elite',monospace;
--rad:22px;--bh:220;--ch:340;--iw:100%;--bgsize:auto;--banh:clamp(calc(var(--bh)*.5455px),calc(var(--bh)*.1vw),calc(var(--bh)*1px));--covh:clamp(calc(var(--ch)*.5294px),calc(var(--ch)*.1176vw),calc(var(--ch)*1px));--bgimg:none;--bgrep:no-repeat;--bgpos:center var(--banh);
--btn:color-mix(in srgb,var(--paper),var(--ink) 16%);--line:#3a4756}
html{font-size:calc(16px*var(--bsz,1));scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background-color:var(--bg);background-image:var(--bgimg);background-repeat:var(--bgrep);background-position:var(--bgpos);background-size:var(--bgsize);
 color:var(--ink);font:1.0625rem/1.65 var(--fb);min-height:100vh;text-shadow:0 0 .5px currentColor}
button,input,select,textarea{font:inherit}
button{background:var(--btn);color:var(--ink);border:0;padding:5px 14px;cursor:pointer;border-radius:calc(var(--rad)*.4)}
button:hover:not([disabled]){background:color-mix(in srgb,var(--paper),var(--accent) 45%)}
button[disabled]{opacity:.35;cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,textarea,select{background:#0d1217;border:1px solid var(--line);padding:5px 8px;color:var(--ink);width:100%}
input[type=checkbox],input[type=radio]{width:auto}
.inl{display:inline-flex;flex-direction:row!important;align-items:center;gap:6px;margin-right:14px}
#ban{position:relative;height:var(--banh);border-bottom:4px solid #090c10;background:var(--side);overflow:hidden}
#ban svg{width:100%;height:100%;display:block;object-fit:cover}
#ban button{position:absolute;right:12px;bottom:10px}
#wrap{position:relative;max-width:760px;margin:0 auto;padding:22px 18px 60px}
#bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:16px}
#shade{position:relative;height:0;z-index:0;pointer-events:none}
#shade::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--shadeH,90px);background:linear-gradient(to bottom,rgba(4,7,11,.97) 0%,rgba(4,7,11,.75) 38%,rgba(4,7,11,.33) 72%,transparent 100%)}
.pager{display:flex;justify-content:center;align-items:baseline;gap:calc(26px*var(--pgz,1));margin:0 0 22px}
.pager a,.pager span{font-size:calc(1.1rem*var(--pgz,1))}
.pager a{display:inline-block;color:var(--ink);text-decoration:none;transition:transform .15s ease,color .15s ease}
.pager a:hover{transform:scale(1.22);color:color-mix(in srgb,var(--ink),var(--accent) 55%)}
.pager span.off{opacity:.3}
.pager a[data-a=cal]{font-size:calc(1.3rem*var(--pgz,1))}
@media(prefers-reduced-motion:reduce){.pager a{transition:none}}
.paper{position:relative;background-color:var(--paper);padding:22px 24px;margin:0 0 22px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:var(--rad);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent),0 0 28px color-mix(in srgb,var(--accent) 24%,transparent),0 4px 16px #000b;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.7' numOctaves='3'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.paper.hid{outline:2px dashed var(--accent);outline-offset:-7px}
.c.hid{opacity:.6}
.cover{border:9px solid #090c10;margin:0 0 14px;background:#090c10;line-height:0;overflow:hidden;border-radius:calc(var(--rad)*.55)}
.fit{position:relative;width:100%;height:100%;overflow:hidden;background:var(--side)}
.fit img{display:block}
.fit .bgb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(28px);transform:scale(1.3)}
.fit .fg{position:relative;width:100%;height:100%;object-fit:contain}
.cover .fit{height:var(--covh)}
.paper h2{font:400 calc(clamp(1.5rem,4vw,2.1rem)*var(--hsz,1)/var(--bsz,1))/1.15 var(--fh);margin:6px 0 2px;text-transform:var(--ptt,capitalize)}
.meta{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:2px 16px;font-size:.85rem;color:color-mix(in srgb,var(--ink),var(--paper) 40%);margin-bottom:12px}
.meta .song{margin-left:auto;text-align:right;color:var(--accent);font-weight:700}
.sp{margin:0 0 12px}.sp a{color:var(--accent);font-weight:700}
.body p{margin:0 0 .9em}
.body a[data-a=more],.body a[data-a=less]{color:var(--accent);text-decoration:none;border-bottom:1px dotted currentColor;white-space:nowrap}
.body a[data-a=more]:hover,.body a[data-a=less]:hover{border-bottom-style:solid}
.body img{max-width:var(--iw);display:block;margin:12px 0}
.acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
/* ---- collapsible comments ---- */
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:14px}
.foot .acts{margin-top:0}
.cmlinks{display:flex;gap:26px}
.cmlinks a{display:inline-block;color:var(--ink);text-decoration:none;transition:transform .15s ease,color .15s ease}
.cmlinks a:hover{transform:scale(1.15)}
.cmlinks a.on{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.cmwrap{display:none;margin-top:-6px}
.cmwrap.open{display:block}
.cmwrap[data-mode=read] .cm-write{display:none}
.cmwrap[data-mode=write] .cm-read{display:none}
@keyframes cmin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){.cmwrap.pop{animation:cmin .22s ease}}
@media(prefers-reduced-motion:reduce){.cmlinks a{transition:none}}
.cm h3{font:400 calc(1.2rem*var(--hsz,1)/var(--bsz,1)) var(--fh);margin:0 0 8px}
.c{margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.ca{float:right;display:flex;gap:4px}.ca button{padding:0 6px}
.cf{display:flex;gap:6px;flex-wrap:wrap}.cf input{flex:1}.cf textarea{flex:1 1 100%;order:3}.cf button{order:4}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.calpage h2,.setpage h2{font:400 calc(1.8rem*var(--hsz,1)/var(--bsz,1)) var(--fh);text-align:center;margin:0 0 14px;text-transform:var(--tt,uppercase)}
.cal-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:1.2rem}
.big{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.big i{font-style:normal;opacity:.65;font-size:.85rem}
.d{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid transparent;font-size:1.1rem;padding:0}
span.d{opacity:.45}
button.d{background:none}
button.d.on{border-color:var(--accent)}
button.d.sel{background:color-mix(in srgb,var(--paper),var(--accent) 55%)}
a.dot{color:inherit;text-decoration:none;cursor:text}
a.dot:hover,a.dot:active{transform:none;color:inherit}
.hint,.note{font-size:.85rem;opacity:.85}
.hint{text-align:center;margin:16px 0 0}
.sizes{display:grid;gap:12px 18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.sizes label{margin-top:0}
.sizes output{color:var(--accent)}
input[type=range]{padding:0;accent-color:var(--accent);background:none;border:0}
.setpage h3{font:400 1.15rem var(--fh);margin:20px 0 6px;text-transform:var(--tt,uppercase)}
.srow{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.setpage label,dialog label{display:flex;flex-direction:column;gap:3px;font-size:.9rem;margin-top:8px}
.setpage input[type=color]{width:56px;height:34px;padding:0}
.setpage input[type=file],dialog input[type=file]{width:auto;max-width:100%}
.setpage select{width:auto}
.setpage .srow:last-child{margin-top:22px}
footer{text-align:center}
dialog{background:var(--paper);color:var(--ink);border:1px solid #0008;padding:20px;width:min(560px,94vw);box-shadow:0 8px 40px #000d}
dialog::backdrop{background:#000b}
dialog h3{font:400 calc(1.5rem*var(--hsz,1)/var(--bsz,1)) var(--fh);margin:0 0 6px;text-transform:var(--tt,uppercase)}
.warn{border:1px dashed var(--accent);padding:8px 10px;font-size:.85rem}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}

/* ---- text-only banner ---- */
html.tb #ban{height:auto;border:0;background:none;overflow:visible}
html.tb #shade{display:none}
.tbn{max-width:760px;margin:0 auto;padding:26px 18px 0}
.tbn h1{margin:0;font:400 var(--bns,56px)/1.1 var(--bnf,'Special Elite',serif);color:var(--bnc,var(--ink));text-align:var(--bna,center);text-transform:none;overflow-wrap:anywhere}
html.tb #ban button{position:static;display:block;margin:8px 0 0 auto}

/* ---- text style options (bold / italic / underline) ---- */
.paper h2,.calpage h2,.setpage h2,.cm h3,dialog h3{font-weight:var(--hw,400);font-style:var(--hi,normal);text-decoration:var(--hu,none)}
.tbn h1{font-weight:var(--bnw,400);font-style:var(--bni,normal);text-decoration:var(--bnu,none)}
.body,.c{font-weight:var(--bdw,400);font-style:var(--bdi,normal);text-decoration:var(--bdu,none)}
.body a[href]:not([data-a]){color:var(--accent)}
.tbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 6px}
.tbar button{min-width:36px;padding:4px 10px}
.tbar select{width:auto}
.tbar #lkrow{display:flex;gap:6px;flex:1 1 260px}
.tbar #lkrow[hidden]{display:none}
.pvw{margin:8px 0}
.pvw summary{cursor:pointer}
#pvw{padding:8px 4px}

.arc-sel{display:flex;gap:8px}
.cal-h select{font:inherit;width:auto}
.cal-h button:disabled{opacity:.3;cursor:default}
.alist{list-style:none;margin:0 0 18px;padding:0}
.alist li{padding:5px 0;border-bottom:1px dashed var(--line)}
.alist a{color:inherit;text-decoration:none}
.alist a:hover{text-decoration:underline}
.al-t{text-transform:var(--ptt,capitalize)}
.ftr{text-align:center;margin:26px 0 0;opacity:.45}
.ftr a{display:inline-block;padding:8px 14px}