:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout: PSP XMB cross on the left, live "PIC1" showcase on the right, giant outlined glyph behind. △ opens a PSP-style options column (language, sound). Deliberately single dark look. */
@property --glow{syntax:'<color>';inherits:true;initial-value:#6b2458}
:root{
  --ink:#151116;
  --plum-deep:#2b1828;
  --murdum:#6b2458;
  --murdum-hi:#b6669f;
  --slate:#4a4450;
  --grey:#9b939d;
  --mist:#dad4db;
  --white:#f8f3f7;
  --panel:rgba(24,17,25,.9);
  --line:rgba(255,255,255,.09);
  --font-ui:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-num:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --s:1;
  --glow:#6b2458;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--white);font-family:var(--font-ui);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--murdum-hi);outline-offset:3px;border-radius:6px}

.xmb{position:relative;height:100%;overflow:hidden;touch-action:none;user-select:none;transition:--glow .8s ease;
  background:
    radial-gradient(110% 75% at 74% 110%, var(--glow) 0%, transparent 64%),
    radial-gradient(60% 45% at 8% -5%, rgba(182,102,159,.2) 0%, transparent 70%),
    linear-gradient(180deg, var(--slate) 0%, var(--plum-deep) 52%, var(--ink) 100%);}
#wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.pic1{position:absolute;right:-1vw;bottom:5vh;z-index:0;pointer-events:none;white-space:nowrap;
  font-family:var(--font-num);font-weight:300;font-size:clamp(130px,24vw,420px);line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(218,212,219,.11);animation:pic .7s var(--ease)}
@keyframes pic{from{opacity:.2;transform:translateX(3vw)}to{opacity:1;transform:none}}

.brand{position:absolute;top:18px;left:22px;z-index:3;display:flex;flex-direction:column;gap:3px}
.brand b{font-weight:600;font-size:calc(13px*var(--s));letter-spacing:.14em;text-transform:uppercase}
.brand span{font-size:calc(11px*var(--s));letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.status{position:absolute;top:18px;right:22px;z-index:3;display:flex;align-items:center;gap:12px;font-family:var(--font-num);font-size:calc(13px*var(--s));color:var(--mist);font-variant-numeric:tabular-nums}
.status svg{width:calc(26px*var(--s));height:calc(14px*var(--s))}
.snd{background:none;border:0;padding:4px;margin:-4px 0;color:var(--mist);cursor:pointer;display:grid;place-items:center;border-radius:6px}
.snd:hover{color:var(--white)}
.status .snd svg{width:calc(19px*var(--s));height:calc(19px*var(--s));fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.status .hint-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-size:calc(12.5px*var(--s));text-decoration:none}
.status .g{width:calc(18px*var(--s));height:calc(18px*var(--s))}
.status .g svg{width:62%;height:62%}
.snd .off-i{display:none}
.snd[aria-pressed="false"]{color:var(--grey)}
.snd[aria-pressed="false"] .on-i{display:none}
.snd[aria-pressed="false"] .off-i{display:block}

#cats,#items{position:relative;z-index:2}
.cat{position:absolute;top:0;left:0;width:calc(140px*var(--s));display:flex;flex-direction:column;align-items:center;gap:calc(6px*var(--s));background:none;border:0;padding:0;cursor:pointer;transition:transform .42s var(--ease),opacity .3s}
.cat .icb{height:calc(68px*var(--s));display:grid;place-items:center}
.cat svg{width:calc(42px*var(--s));height:calc(42px*var(--s));opacity:.66;transition:width .3s var(--ease),height .3s var(--ease),opacity .3s,filter .3s}
.cat.on svg{width:calc(64px*var(--s));height:calc(64px*var(--s));opacity:1;filter:drop-shadow(0 0 12px rgba(255,240,250,.55))}
.cat .lbl{font-size:calc(15px*var(--s));font-weight:500;opacity:0;transition:opacity .25s;white-space:nowrap;text-shadow:0 0 12px rgba(255,255,255,.35)}
.cat.on .lbl{opacity:1}

#items.in{animation:fadeIn .35s var(--ease)}
@keyframes fadeIn{from{opacity:.25}to{opacity:1}}
.item{position:absolute;top:0;left:0;display:flex;align-items:center;gap:calc(20px*var(--s));background:none;border:0;padding:4px 8px;text-align:left;cursor:pointer;transition:transform .42s var(--ease),opacity .3s}
.item .ic{width:calc(42px*var(--s));height:calc(42px*var(--s));flex:none;display:grid;place-items:center;transition:transform .3s var(--ease),filter .3s}
.item .ic svg{width:calc(34px*var(--s));height:calc(34px*var(--s));opacity:.8}
.item .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.item .t{font-size:calc(16.5px*var(--s));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:font-size .25s}
.item .s{font-size:calc(12.5px*var(--s));color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item.on .ic{transform:scale(1.45);filter:drop-shadow(0 0 9px rgba(255,240,250,.5))}
.item.on .ic svg{opacity:1}
.item.on .t{font-size:calc(21px*var(--s));font-weight:500;text-shadow:0 0 14px rgba(255,255,255,.4)}
.item.on .s{color:var(--mist)}
.item.above{opacity:.4}

.show{position:absolute;top:0;left:0;z-index:2;display:none;box-sizing:border-box;max-width:calc(660px*var(--s));user-select:text;overflow-y:auto;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:var(--slate) transparent;padding-right:8px}
.wide .show{display:block}
.show .in-anim{animation:rise .45s var(--ease)}
@keyframes rise{from{opacity:.3;transform:translateY(10px)}to{opacity:1;transform:none}}
.show .eyebrow{font-size:calc(11.5px*var(--s))}
.show h2{margin:0;font-size:calc(42px*var(--s));font-weight:300;line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.show .psub{font-size:calc(14px*var(--s));margin-top:calc(8px*var(--s))}
.show .desc{font-size:calc(16px*var(--s));margin-top:calc(22px*var(--s))}
.show .kv dd{font-size:calc(14.5px*var(--s))}
.show .chart{max-width:calc(520px*var(--s))}
.show .tags li{font-size:calc(12.5px*var(--s))}

.hints{position:absolute;left:22px;right:22px;bottom:18px;z-index:3;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 22px;font-size:calc(12.5px*var(--s));color:var(--grey);min-width:0}
.hints > span,.hints > button{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.hints .g{width:calc(18px*var(--s));height:calc(18px*var(--s))}
.hint-btn{background:none;border:0;padding:2px 4px;margin:-2px -4px;color:var(--mist);cursor:pointer;font-size:inherit;border-radius:6px}
.hint-btn:hover{color:var(--white)}
.g{display:inline-grid;place-items:center;width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:1px solid var(--grey);color:var(--mist);line-height:0;flex:none}
.g svg{width:62%;height:62%;display:block;fill:currentColor}
.g svg.o{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.wide .narrow-only{display:none}
.touch-only,.hints > .touch-only{display:none}
@media (max-width:640px){.touch-only,.hints > .touch-only{display:inline-flex}.key-only{display:none!important}}

.panel{position:absolute;top:0;right:0;height:100%;width:min(440px,100%);box-sizing:border-box;padding:60px 28px 80px;z-index:5;overflow-y:auto;touch-action:pan-y;user-select:text;
  background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-left:1px solid var(--line);
  transform:translateX(102%);transition:transform .42s var(--ease);visibility:hidden}
.panel.open{transform:none;visibility:visible}
.back{position:absolute;top:16px;left:24px;display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px;color:var(--mist);font-size:13px;cursor:pointer}

/* Options column */
.scrim{position:absolute;inset:0;z-index:7;background:rgba(10,7,11,.35)}
.opts{position:absolute;top:0;right:0;height:100%;width:min(360px,88vw);box-sizing:border-box;z-index:8;padding:0 28px 0 64px;
  display:flex;flex-direction:column;justify-content:center;gap:18px;
  background:linear-gradient(90deg,rgba(18,13,19,0) 0%,rgba(18,13,19,.9) 22%,rgba(18,13,19,.96) 100%);
  transform:translateX(102%);transition:transform .38s var(--ease);visibility:hidden;user-select:none}
.opts.open{transform:none;visibility:visible}
.opts-h{margin:0 0 4px 14px;display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:600}
.opt-list{display:flex;flex-direction:column;gap:6px}
.opt{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;background:none;border:0;padding:13px 14px;border-radius:9px;font-size:16px;color:var(--mist);cursor:pointer;text-align:left;transition:background .2s,color .2s,box-shadow .2s}
.opt .v{font-family:var(--font-num);font-size:12.5px;color:var(--grey);display:inline-flex;align-items:center;gap:8px}
.opt .v::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}
.opt.on{background:rgba(182,102,159,.2);color:var(--white);box-shadow:inset 0 0 0 1px rgba(182,102,159,.5)}
.opt.on .v{color:var(--murdum-hi)}

/* Shared detail styles */
.eyebrow{margin:0 0 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--murdum-hi);font-weight:600;display:flex;gap:12px}
.eyebrow span{color:var(--grey);font-family:var(--font-num);font-weight:400;letter-spacing:.06em}
.phead{display:flex;gap:16px;align-items:center}
.pic{width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:14px;background:linear-gradient(160deg,rgba(182,102,159,.35),rgba(74,68,80,.4));border:1px solid var(--line)}
.pic svg{width:34px;height:34px}
h2{margin:0;font-size:22px;font-weight:500;line-height:1.2;text-wrap:balance}
.psub{margin:4px 0 0;font-size:13px;color:var(--grey)}
.desc{margin:22px 0 0;font-size:15px;line-height:1.6;color:var(--mist);max-width:60ch}
.file{margin:16px 0 0;font-family:var(--font-num);font-size:12.5px;color:var(--grey);display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.file::before{content:"";width:8px;height:8px;flex:none;border-radius:2px;background:var(--murdum-hi)}
.kv{margin:22px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.kv div{background:rgba(21,17,22,.72);padding:12px 14px;min-width:0}
.kv dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.kv dd{margin:6px 0 0;font-family:var(--font-num);font-size:13.5px;color:var(--white);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.chart{margin:24px 0 0}
.chart figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.chart svg{width:100%;height:auto;display:block}
.chart .ax{stroke:var(--slate);stroke-width:1}
.chart .ba{fill:var(--murdum-hi)}
.chart .be{fill:rgba(182,102,159,.22);stroke:var(--murdum-hi);stroke-width:1;stroke-dasharray:3 3}
.chart text{font-family:var(--font-num);font-size:11px;text-anchor:middle;fill:var(--mist)}
.chart .cl{fill:var(--grey)}
.legend{display:flex;gap:16px;margin-top:6px;font-size:11px;color:var(--grey)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--murdum-hi)}
.legend i.e{background:rgba(182,102,159,.22);border:1px dashed var(--murdum-hi);box-sizing:border-box}
.tags{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--mist);background:rgba(255,255,255,.04)}
.note{margin:26px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--grey)}

/* Actions: download, copy, mailto (panel and showcase) */
.acts{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--mist);padding:7px 14px;border-radius:999px;cursor:pointer;font-size:13px;text-decoration:none}
.pill:hover{color:var(--white);border-color:rgba(182,102,159,.5)}
.file a{color:inherit;text-decoration:none}
.file a:hover{color:var(--white);text-decoration:underline}

/* Toast */
.toast{position:absolute;left:50%;bottom:64px;z-index:9;transform:translate(-50%,8px);opacity:0;visibility:hidden;pointer-events:none;
  padding:9px 18px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--white);font-size:13px;
  transition:opacity .25s,transform .25s var(--ease),visibility .25s}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* First-visit hint */
.hints.pulse{animation:hintPulse 2.5s ease-in-out 2}
@keyframes hintPulse{0%,100%{opacity:1}50%{opacity:.5}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* No-JS fallback */
.nojs{position:fixed;inset:0;z-index:20;box-sizing:border-box;padding:56px 24px;background:var(--ink);color:var(--white);font-family:var(--font-ui)}
.nojs h1{margin:0 0 10px;font-weight:300;font-size:40px;letter-spacing:-.02em}
.nojs p{margin:6px 0;color:var(--mist);font-size:16px}
.nojs a{color:var(--murdum-hi)}