/* pisscontrol.com styles. Sections: Nav, Home/catalog, carousel stage, overlay, Bio, Links, Merch, Contact,
   player, now-playing, tip jar, Yellow Posts, visualizer. */
:root{
  --paper:#eae7de;
  --paper-2:#e2ded2;
  --ink:#17181c;
  --ink-soft:#4b4a45;
  --line:#c7c2b2;
  --moss:#6b6f45;
  --moss-deep:#565a37;
  --logo:#9a7f00;   /* deeper gold so the logo stays readable on the light background */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#17181a;
    --paper-2:#1e1f1f;
    --ink:#e9e6dd;
    --ink-soft:#a8a496;
    --line:#3a3a35;
    --moss:#9aa06a;
    --moss-deep:#b3b884;
    --logo:#f4d000;
  }
}
:root[data-theme="dark"]{
  --paper:#17181a;
  --paper-2:#1e1f1f;
  --ink:#e9e6dd;
  --ink-soft:#a8a496;
  --line:#3a3a35;
  --moss:#9aa06a;
  --moss-deep:#b3b884;
  --logo:#f4d000;
}
*{box-sizing:border-box;}
html{
  scroll-padding-top:env(safe-area-inset-top,0px);
}
html{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Noto Sans JP",sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transition:background .35s ease,color .35s ease;
}
a{color:inherit;}
::selection{background:var(--moss);color:var(--paper);}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

/* ---------- Nav ---------- */
header.site{
  position:sticky;top:0;
  top:env(safe-area-inset-top,0px);
  z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;
  max-width:1180px;margin:0 auto;
  gap:24px;
}
.logotype{
  font-family:"Bricolage Grotesque","Noto Sans JP",sans-serif;
  font-optical-sizing:auto;
  font-weight:800;
  font-size:27px;
  letter-spacing:-.02em;
  text-decoration:none;
  color:var(--logo);
  white-space:nowrap;
  background:none;border:none;cursor:pointer;
}
nav.primary{
  display:flex;gap:2px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
nav.primary button,nav.primary a.nav-out{
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  background:none;border:none;
  color:var(--ink-soft);
  padding:8px 12px;
  cursor:pointer;
  letter-spacing:.09em;
  border-radius:2px;
  transition:color .2s ease;
}
nav.primary button:hover,nav.primary a.nav-out:hover{color:var(--ink);}
nav.primary a.nav-out{text-decoration:none;display:inline-block;padding-bottom:13px;}   /* Games leaves for /poogrounds; the padding stands in for the buttons' underline span */
nav.primary button[aria-current="page"]{color:var(--ink);}
nav.primary button[aria-current="page"] span{
  display:block;height:1px;background:var(--moss-deep);margin-top:4px;
}
nav.primary button span{display:block;height:1px;background:transparent;margin-top:4px;}

.nav-end{
  display:flex;align-items:center;gap:2px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.share-btn{
  flex:none;
  width:30px;height:30px;
  margin-left:8px;
  border-radius:50%;
  border:1px solid var(--line);
  background:none;
  color:var(--ink-soft);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease, color .2s ease;
}
.share-btn:hover{border-color:var(--ink);color:var(--ink);}
.share-btn svg{width:15px;height:15px;}

main{min-height:60vh;min-height:60dvh;}
.page{display:none;padding:0;animation:fade .4s ease;}
.page:not(#page-home){padding:48px 0 96px;}
.page.active{display:block;}
/* full-window layout: header, catalog, stage and footer always fill exactly one screen */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;}
body > main{flex:1 0 auto;display:flex;flex-direction:column;}
#page-home.active{display:flex;flex-direction:column;flex:1 0 auto;}
#page-yellowposts.active{display:block;}
#page-home > .wrap{width:100%;box-sizing:border-box;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  .page{animation:none;}
}

h1,h2,h3{font-family:"Bricolage Grotesque","Noto Sans JP",sans-serif;font-optical-sizing:auto;font-weight:700;margin:0;letter-spacing:-.01em;}

/* ---------- Home / catalog stream ---------- */
.catalog-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:40px 0 8px;flex-wrap:wrap;gap:16px;
}
.catalog-head h1{
  font-size:19px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink);
  margin-right:auto;
}
.catalog-count{font-size:12px;color:var(--ink-soft);letter-spacing:.02em;}

/* ---------- carousel stage ---------- */
.carousel-stage{
  position:relative;
  /* fills whatever height is left between the catalog heading and the footer,
     so the black stage always reaches the bottom of the window */
  flex:1 1 auto;
  min-height:420px;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  --stage-bg:#0b0b0c;
  --stage-ink:#f3f1e9;
  --stage-ink-soft:#95948b;
  --stage-line:#2a2a28;
  --stage-yellow:#f4d000;
  background:var(--stage-bg);
}
.carousel-stage.grabbing{cursor:grabbing;}

.info-panel{
  position:absolute;
  top:clamp(18px, 1.1vw, 28px);left:clamp(18px, 1.1vw, 28px);
  z-index:50;
  max-width:340px;
  font-size:clamp(10px, 0.47vw, 12px);
  pointer-events:none;
}
.info-panel h2{
  font-size:clamp(24px,1.5vw,38px);
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
  margin-bottom:16px;
  color:var(--stage-yellow);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .45s ease, transform .45s ease;
}
.info-panel h2.show{opacity:1;transform:none;}
.info-rows{
  opacity:0;transform:translateY(8px);
  transition:opacity .45s ease .05s, transform .45s ease .05s;
}
.info-rows.show{opacity:1;transform:none;}
.info-row{
  display:flex;justify-content:space-between;gap:18px;
  border-top:1px solid var(--stage-line);
  padding:.58em 0;
  font-size:1em;
  color:var(--stage-ink);
}
.info-row:last-child{border-bottom:1px solid var(--stage-line);}
.info-row .k{
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--stage-ink-soft);font-weight:500;
  white-space:nowrap;
}
.info-row .v{text-align:right;color:var(--stage-yellow);}

.disc-field{
  position:absolute;inset:0;
}
/* visualizer: canvas behind the discs, drawn only while it's switched on and music plays */
.viz{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block;}
/* MilkDrop is full colour, so it sits dimmed behind the discs and fades in and out with the music */
.viz-milk{opacity:0;transition:opacity .6s ease;}
.viz-milk.on{opacity:.55;}
@media (prefers-reduced-motion: reduce){ .viz-milk{transition:none;} }
.disc-slot{
  position:absolute;left:50%;top:57%;
  width:0;height:0;
}
.disc-plate{
  position:absolute;
  left:0;top:0;
  width:var(--disc-size, 300px);
  aspect-ratio:1/1;
  margin-left:calc(var(--disc-size, 300px) / -2);
  margin-top:calc(var(--disc-size, 300px) / -2);
  cursor:pointer;
  transform-origin:50% 50%;
}
.disc-render{
  width:100%;height:100%;
  filter:drop-shadow(0 45px 80px rgba(0,0,0,.6));
}
.disc-render img{
  width:100%;height:100%;object-fit:contain;display:block;
  opacity:0;transition:opacity .5s ease;
}
.disc-render img.show{opacity:1;}
.disc-outer{
  width:100%;height:100%;
  border-radius:50%;
  padding:0.6%;
  background:conic-gradient(from 210deg,
    #ffffff, #eef3fb 8%, #ffffff 16%, #f6eefb 25%, #ffffff 34%,
    #eefbf6 43%, #ffffff 52%, #fbf6ee 61%, #ffffff 70%,
    #eef3fb 79%, #ffffff 88%, #f6eefb 96%, #ffffff 100%);
  box-shadow:
    0 50px 90px -40px rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.6) inset;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 0 7.5%, #000 8.4% 100%);
  mask-image:radial-gradient(circle at 50% 50%, transparent 0 7.5%, #000 8.4% 100%);
}
.disc-inner{
  position:relative;
  width:100%;height:100%;
  border-radius:50%;
  overflow:hidden;
  background:#1c1c1a;
}
.disc-inner img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .5s ease;
}
.disc-inner img.show{opacity:1;}
.disc-inner .none{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#8a897f;font-style:italic;
  text-align:center;padding:16%;
}

/* hand-drawn wobble ring shown while a disc is hovered */
.hover-ring{
  position:absolute;
  inset:-11%;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
}
.disc-plate:hover .hover-ring{opacity:1;}
.hover-ring svg{width:100%;height:100%;overflow:visible;}
.hover-ring circle{
  fill:none;
  stroke:var(--stage-yellow);
}

/* CD-player style transport: skip back / disc counter / skip forward */
.nav-arrows{
  position:absolute;
  bottom:18px;right:22px;
  display:flex;align-items:center;gap:4px;
  z-index:50;
}
.nav-arrows button{
  position:relative;
  width:46px;height:46px;
  padding:0;border:none;background:none;
  color:var(--stage-ink);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .2s ease, transform .15s ease;
}
.nav-arrows button .ico{width:22px;height:22px;display:block;transition:transform .2s ease;}
.nav-arrows button .ring{
  position:absolute;inset:2px;
  width:calc(100% - 4px);height:calc(100% - 4px);
  overflow:visible;pointer-events:none;
  opacity:0;transition:opacity .2s ease;
}
.nav-arrows button .ring circle{fill:none;stroke:var(--stage-yellow);stroke-width:4;}
.nav-arrows button:hover,
.nav-arrows button:focus-visible{color:var(--stage-yellow);outline:none;}
.nav-arrows button:hover .ring,
.nav-arrows button:focus-visible .ring{opacity:1;}
#nav-prev:hover .ico{transform:translateX(-2px);}
#nav-next:hover .ico{transform:translateX(2px);}
.nav-arrows button:active{transform:scale(.9);}

.nav-count{
  display:flex;flex-direction:column;align-items:center;
  min-width:70px;padding:0 4px;
  line-height:1;user-select:none;
}
.nav-count .lbl{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stage-ink-soft);margin-bottom:5px;
}
.nav-count .num{
  font-family:"Anton","Noto Sans JP",sans-serif;
  font-size:clamp(18px,1.5vw,23px);
  color:var(--stage-yellow);
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.nav-count .num .of{color:var(--stage-ink-soft);}

.stage-caption{
  position:absolute;
  left:28px;right:230px;bottom:26px;
  z-index:45;
  margin:0;
  pointer-events:none;
  font-family:"Anton","Noto Sans JP",sans-serif;
  text-transform:uppercase;
  color:var(--stage-yellow);
  font-size:clamp(9px,1.74vw,23px);
  line-height:1;
  letter-spacing:.005em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:640px){
  .stage-caption{
    right:170px;
    font-size:clamp(8px,2.4vw,15px);
    left:20px;bottom:18px;
  }
}

/* ---------- overlay: release detail modal + index list ---------- */
.overlay{
  position:fixed;inset:0;
  z-index:5000;
  display:flex;align-items:center;justify-content:center;
  padding:28px;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.overlay.open{opacity:1;pointer-events:auto;}
.overlay-backdrop{
  position:absolute;inset:0;
  background:rgba(10,10,9,.6);
  backdrop-filter:blur(3px);
}
.overlay-panel{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  max-width:560px;width:100%;
  max-height:84vh;
  max-height:84dvh;
  overflow-y:auto;
  padding:40px;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.5);
  transform:translateY(14px) scale(.98);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.overlay.open .overlay-panel{transform:none;}
.overlay-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;padding:0;
  border:none;border-radius:50%;
  background:none;
  color:var(--ink);opacity:.5;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .15s ease, background .15s ease;
}
.overlay-close svg{width:18px;height:18px;}
.overlay-close:hover, .overlay-close:focus-visible{opacity:1;background:color-mix(in srgb, var(--ink) 8%, transparent);outline:none;}

.detail-cover{
  width:min(46vw, 230px);
  aspect-ratio:1/1;
  margin:0 auto 28px;
}
.detail-cover img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.35));
}

/* jewel case closing (now-playing card) */
.jc{
  position:relative;overflow:visible;
  perspective:900px;perspective-origin:20% 50%;
  background:none;border:none;box-shadow:none;
}
.jc-tray{
  position:absolute;inset:3% 0 3% 2%;overflow:hidden;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 50% 50%, #2c2c2a 0 9%, #151515 9.5% 12%, transparent 12.5%),
    repeating-radial-gradient(circle at 50% 50%, #1d1d1c 0 2px, #191918 2px 4px);
  border:1px solid #3a3a35;
  box-shadow:inset 0 0 0 6px #121212, 0 30px 60px -35px rgba(0,0,0,.5);
}
.jc-disc{
  position:relative;height:88%;width:auto;aspect-ratio:1/1;
  object-fit:cover;border-radius:50%;
  animation:jcDisc .6s cubic-bezier(.2,.8,.25,1) .2s both;
}
@keyframes jcDisc{
  0%{transform:translateY(95%) rotate(-140deg) scale(.92);opacity:0;}
  35%{opacity:1;}
  100%{transform:none;opacity:1;}
}
/* hinged on the left, at the spine, like a real jewel case */
.jc-lid{
  position:absolute;inset:0;
  transform-origin:0 50%;transform-style:preserve-3d;
  animation:jcLid .62s cubic-bezier(.55,0,.75,.35) .75s both;
}
@keyframes jcLid{
  0%{transform:rotateY(-105deg);}
  82%{transform:rotateY(0deg);}
  90%{transform:rotateY(-5deg);}
  100%{transform:rotateY(0deg);}
}
.jc-front, .jc-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.jc-front img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45));}
.jc-front{overflow:visible;}
.jc-front::after{   /* plastic sheen */
  content:"";position:absolute;inset:3%;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(255,255,255,.08) 100%);
}
.jc-back{
  transform:rotateY(180deg);
  background:linear-gradient(115deg, rgba(210,215,220,.28), rgba(150,155,160,.12));
  border:1px solid rgba(220,220,220,.35);
}
.jc{animation:jcSnap .18s ease-out 1.27s;}
@keyframes jcSnap{50%{transform:scale(1.025);}}
.detail-cover .none{
  width:100%;height:100%;
  background:var(--paper-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--ink-soft);font-style:italic;
  text-align:center;padding:16%;
}
.overlay-panel .detail-head{text-align:center;margin-bottom:8px;}
.overlay-panel .detail-year{
  font-size:12px;color:var(--ink-soft);letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:6px;
}
.overlay-panel h2{
  font-size:26px;text-transform:uppercase;font-weight:800;
  letter-spacing:-.01em;margin-bottom:16px;text-align:center;
}
.overlay-panel .tagline{
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-weight:400;
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.6;
  text-align:center;
  margin:0 0 28px;
}
.format-note{
  display:block;
  width:fit-content;
  font-size:12px;
  color:var(--moss-deep);
  border:1px solid var(--moss-deep);
  padding:3px 8px;
  margin:0 auto 22px;
}
ol.tracklist{
  list-style:none;
  counter-reset:track;
  margin:0;padding:0;
  text-align:left;
  border-top:1px solid var(--line);
}
ol.tracklist li{
  counter-increment:track;
  display:flex;
  gap:20px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
}
ol.tracklist li::before{
  content:counter(track);
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  width:1.6em;flex:none;
  font-size:13px;
  padding-top:2px;
}

@media (max-width:640px){
  .carousel-stage{min-height:440px;}
  .info-panel{max-width:220px;top:20px;left:20px;}
  .nav-arrows{bottom:8px;right:10px;gap:0;}
  .nav-count{min-width:56px;}
}

/* ---------- Bio ---------- */
.prose{max-width:62ch;}
.prose h1{
  font-size:19px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink);margin-bottom:34px;
}
.prose p{
  font-size:17px;line-height:1.65;
  color:var(--ink);
  margin:0 0 22px;
}
.prose p:last-child{margin-bottom:0;}
.prose p.footnote{
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.5;
}

/* ---------- Media ---------- */
.media-block{margin-bottom:64px;}
.media-block:last-child{margin-bottom:0;}
.media-block-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:20px;flex-wrap:wrap;gap:12px;
}
.media-block-head h2{
  font-size:16px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink);
}

.sc-toggle{display:flex;gap:6px;}
.sc-toggle button{
  font-size:12px;background:none;border:1px solid var(--line);
  color:var(--ink-soft);
  padding:5px 12px;cursor:pointer;letter-spacing:.02em;
  transition:border-color .2s ease, color .2s ease;
}
.sc-toggle button.active{border-color:var(--ink);color:var(--ink);}
.sc-toggle button:hover{color:var(--ink);}

.sc-embed-wrap{border:1px solid var(--line);background:var(--paper-2);}
.sc-embed-wrap iframe{width:100%;height:420px;display:block;border:none;}
@media (max-width:640px){
  .sc-embed-wrap iframe{height:300px;}
}

.video-row{
  display:flex;gap:18px;
  overflow-x:auto;
  padding-bottom:10px;
  scroll-snap-type:x proximity;
}
.video-card{
  flex:none;
  width:min(360px, 78vw);
  scroll-snap-align:start;
}
.video-frame{
  position:relative;
  aspect-ratio:16/9;
  background:#0c0c0c;
  overflow:hidden;
  cursor:pointer;
  border:1px solid var(--line);
}
.video-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.82;transition:opacity .2s ease;
}
.video-frame:hover img{opacity:1;}
.video-frame .play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.video-frame .play svg{
  width:46px;height:46px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));
}
.video-frame iframe{width:100%;height:100%;border:none;display:block;}

.video-nav{display:flex;gap:8px;}
.video-nav button{
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:none;color:var(--ink);
  cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease;
}
.video-nav button:hover{border-color:var(--ink);}

/* ---------- Links ---------- */
.link-list{list-style:none;margin:0;padding:0;max-width:520px;}
.link-list li{border-bottom:1px solid var(--line);}
.link-list li:first-child{border-top:1px solid var(--line);}
.link-list a{
  display:flex;align-items:baseline;
  text-decoration:none;
  padding:18px 2px;
  font-size:16px;
}
.link-list a .name{font-family:"Bricolage Grotesque","Noto Sans JP",sans-serif;font-weight:600;font-size:20px;letter-spacing:-.01em;}
/* hover or keyboard focus: the name turns piss yellow and the droplet slides in on its left */
.link-list a .name{display:inline-flex;align-items:center;transition:color .15s ease;}
.link-list a .name::before{content:"";flex:none;width:0;height:.95em;margin-right:0;background:currentColor;opacity:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 1 18 28'%3E%3Cpath d='M23 1C23 1 14 13 14 19.5a9 9 0 0 0 18 0C32 13 23 1 23 1z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 1 18 28'%3E%3Cpath d='M23 1C23 1 14 13 14 19.5a9 9 0 0 0 18 0C32 13 23 1 23 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:width .15s ease, margin-right .15s ease, opacity .15s ease;}
.link-list a:hover .name,.link-list a:focus-visible .name{color:var(--logo);}
.link-list a:hover .name::before,.link-list a:focus-visible .name::before{width:.62em;margin-right:.32em;opacity:1;}
@media (prefers-reduced-motion: reduce){.link-list a .name,.link-list a .name::before{transition:none;}}

/* ---------- Links: planet select ---------- */
.links-toggle{
  font-family:"Inter","Noto Sans JP",sans-serif;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  background:none;border:1px solid var(--line);color:var(--ink-soft);padding:7px 12px;border-radius:2px;cursor:pointer;
}
.links-toggle:hover{border-color:var(--ink);color:var(--ink);}
#page-links.planets .links-classic{display:none;}
#page-links.classic .planet-stage{display:none;}
#page-links.planets.active{display:flex;flex-direction:column;flex:1 0 auto;padding:0;}
.planet-stage{
  --stage-bg:#0b0b0c;--stage-ink:#f3f1e9;--stage-ink-soft:#95948b;--stage-line:#2a2a28;--stage-yellow:#f4d000;
  position:relative;flex:1 1 auto;min-height:480px;overflow:hidden;background:var(--stage-bg);color:var(--stage-ink);
}
.planet-stage [hidden],.links-toggle[hidden]{display:none !important;}
.ps-canvas{position:absolute;inset:0;}
.ps-canvas canvas{display:block;width:100%;height:100%;touch-action:none;outline:none;cursor:grab;}
.ps-top{position:absolute;top:clamp(18px,1.4vw,28px);left:clamp(18px,1.4vw,28px);right:clamp(18px,1.4vw,28px);display:flex;justify-content:space-between;align-items:flex-start;gap:16px;pointer-events:none;z-index:2;}
.ps-loc{pointer-events:none;}
.ps-sector{font-family:"Inter","Noto Sans JP",sans-serif;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--stage-ink-soft);}
.ps-loc h2{font-size:clamp(26px,3vw,44px);text-transform:uppercase;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--stage-yellow);margin:6px 0 8px;}
.ps-btn{
  pointer-events:auto;font-family:"Inter","Noto Sans JP",sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stage-yellow);background:rgba(11,11,12,.78);border:1px solid var(--stage-yellow);padding:9px 13px;border-radius:2px;cursor:pointer;
  text-decoration:none;display:inline-block;white-space:nowrap;transition:background .2s ease,color .2s ease;
}
.ps-btn:hover,.ps-btn:focus-visible{background:var(--stage-yellow);color:#0b0b0c;outline:none;}
.ps-btn[disabled]{opacity:.4;cursor:default;background:rgba(11,11,12,.78);color:var(--stage-yellow);}
.ps-bottom{
  position:absolute;z-index:2;left:clamp(18px,1.4vw,28px);right:clamp(18px,1.4vw,28px);bottom:clamp(18px,1.4vw,28px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;pointer-events:none;
}
.ps-select{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:auto;}
.ps-travel{grid-column:3;justify-self:end;}
.ps-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:560px;}
.ps-chip{
  font-family:"Bricolage Grotesque","Noto Sans JP",sans-serif;font-weight:600;font-size:14px;
  color:var(--stage-ink);background:rgba(20,20,22,.85);border:1px solid var(--stage-line);padding:6px 11px;border-radius:2px;cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.ps-chip:hover,.ps-chip:focus-visible{border-color:var(--stage-yellow);color:var(--stage-yellow);outline:none;}
.ps-chip[aria-pressed="true"]{background:var(--stage-yellow);border-color:var(--stage-yellow);color:#0b0b0c;}
.ps-chip[disabled]{opacity:.45;cursor:default;}
.ps-select{flex-direction:row;gap:4px;}
.ps-arrow{
  position:relative;width:46px;height:46px;flex:none;padding:0;border:none;background:none;cursor:pointer;
  color:var(--stage-ink);display:flex;align-items:center;justify-content:center;transition:color .2s ease,transform .1s ease;
}
.ps-arrow .ico{width:22px;height:22px;display:block;transition:transform .2s ease;}
.ps-arrow .ring{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);overflow:visible;pointer-events:none;opacity:0;transition:opacity .2s ease;}
.ps-arrow .ring circle{fill:none;stroke:var(--stage-yellow);stroke-width:4;}
.ps-arrow:hover,.ps-arrow:focus-visible{color:var(--stage-yellow);outline:none;}
.ps-arrow:hover .ring,.ps-arrow:focus-visible .ring{opacity:1;}
#ps-prev:hover .ico{transform:translateX(-2px);}
#ps-next:hover .ico{transform:translateX(2px);}
.ps-arrow:active{transform:scale(.9);}
.ps-arrow[disabled]{opacity:.35;cursor:default;}
/* the link card pops out of the selected landmark and floats above it; when the landmark turns away
   it docks above the skip buttons, so the link is always one tap away */
.ps-preview{
  position:absolute;left:0;top:0;z-index:4;width:300px;max-width:calc(100% - 24px);
  text-decoration:none;color:var(--stage-ink);will-change:transform;transition:opacity .2s ease;
}
.ps-preview.off{opacity:0;pointer-events:none;}
.ps-pv-inner{
  position:relative;display:flex;gap:12px;align-items:flex-start;padding:10px 12px 12px;
  background:rgba(18,18,20,.96);border:2px solid var(--stage-yellow);border-radius:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);transform-origin:var(--tail,50%) 100%;transition:background .2s ease;
}
.ps-pv-inner::after{content:"";position:absolute;left:var(--tail,50%);bottom:-13px;margin-left:-9px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:11px solid var(--stage-yellow);transition:opacity .2s ease;}
.ps-preview.no-tail .ps-pv-inner::after{opacity:0;}
.ps-preview:hover .ps-pv-inner,.ps-preview:focus-visible .ps-pv-inner{background:rgba(30,30,33,.98);}
.ps-preview:focus-visible{outline:none;}
.ps-preview:focus-visible .ps-pv-inner{border-color:var(--stage-ink);}
.ps-pv-inner.pop{animation:pv-pop .34s cubic-bezier(.2,1.5,.4,1);}
@keyframes pv-pop{from{transform:scale(.35) translateY(14px);opacity:0;}to{transform:none;opacity:1;}}
.ps-pv-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;}
.ps-pv-site{font-size:11px;color:var(--stage-ink-soft);letter-spacing:.02em;}
.ps-pv-title{font-family:"Bricolage Grotesque","Noto Sans JP",sans-serif;font-weight:700;font-size:15px;color:var(--stage-yellow);line-height:1.2;overflow-wrap:anywhere;}
.ps-preview:hover .ps-pv-title{text-decoration:underline;text-underline-offset:2px;}
.ps-pv-desc{font-size:12.5px;line-height:1.45;color:var(--stage-ink);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.ps-pv-img{flex:none;width:64px;height:64px;object-fit:cover;border-radius:3px;background:#1d1d20;}
@media (prefers-reduced-motion: reduce){ .ps-pv-inner.pop{animation:none;} }
.ps-tip{position:absolute;z-index:3;pointer-events:none;font-family:"Bricolage Grotesque","Noto Sans JP",sans-serif;font-weight:700;font-size:13px;color:#0b0b0c;background:var(--stage-yellow);padding:3px 8px;transform:translate(12px,12px);white-space:nowrap;}
.ps-transit{position:absolute;z-index:2;left:0;right:0;top:28%;text-align:center;pointer-events:none;opacity:0;transition:opacity .25s ease;}
.ps-transit .k{font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--stage-ink-soft);}
.ps-transit .d{font-family:"Anton","Noto Sans JP",sans-serif;color:var(--stage-yellow);font-size:clamp(32px,6vw,68px);letter-spacing:.03em;text-shadow:0 0 24px rgba(244,208,0,.45);}
.ps-transit .bar{width:min(320px,70%);height:5px;margin:12px auto 0;background:repeating-linear-gradient(90deg,var(--stage-yellow) 0 10px,transparent 10px 16px);clip-path:inset(0 100% 0 0);}
.ps-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--stage-ink-soft);z-index:1;}
@media (max-width:900px){
  .ps-bottom{display:flex;flex-direction:column;align-items:center;gap:12px;}
  .ps-travel{justify-self:auto;}
}
@media (max-width:640px){
  .planet-stage{min-height:560px;}
  .ps-arrow{width:38px;height:38px;}
  .ps-chip{font-size:13px;padding:5px 9px;}
  .ps-preview{width:260px;}
  .ps-pv-inner{padding:8px 10px 10px;gap:10px;}
  .ps-pv-img{width:48px;height:48px;}
  .ps-pv-desc{-webkit-line-clamp:2;}
}
  .ps-bottom > .ps-travel{margin-left:0;}
}
@media (prefers-reduced-motion: reduce){ .ps-transit{transition:none;} }

/* ---------- Merch / Contact ---------- */
.simple-block{padding:40px 0;}
.simple-block p{font-size:17px;line-height:1.6;max-width:52ch;}
.simple-block .big{
  font-family:"Bricolage Grotesque","Noto Sans JP",sans-serif;font-weight:700;font-size:26px;
  letter-spacing:-.01em;margin-bottom:6px;
}
.merch-block{
  display:flex;
  justify-content:center;
}
.merch-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:360px;
  width:100%;
}
.merch-sign{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
  cursor:pointer;
  transition:transform .15s ease;
}
.merch-sign:hover{transform:scale(1.015);}
.merch-sign:active{transform:scale(.985);}
.merch-sign:focus-visible{outline:2px solid var(--moss);outline-offset:4px;}

.merch-progress{
  width:100%;
  margin-top:22px;
}
.merch-progress-label{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.merch-progress-track{
  height:6px;
  background:var(--paper-2);
  border:1px solid var(--line);
  overflow:hidden;
}
.merch-progress-fill{
  height:100%;
  width:0%;
  background:var(--moss);
}
.merch-progress-note{
  margin:10px 0 0;
  font-size:13px;
  color:var(--ink-soft);
  text-align:center;
  min-height:1.4em;
}
@media (prefers-reduced-motion: reduce){
  .merch-sign{transition:none;}
  .merch-progress-fill{transition:none !important;}
}

.contact-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:44px;
  padding:32px 0 96px;
  flex-wrap:wrap;
}
.contact-photo{
  flex:none;
  width:220px;
  aspect-ratio:1/1;
  background:var(--paper-2);
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 30px 60px -35px rgba(0,0,0,.35);
}
.contact-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.contact-text{flex:1 1 320px;}
.contact-eyebrow{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--ink-soft);
  margin-bottom:14px;
}
.contact-email{
  display:inline-block;
  font-family:"Bricolage Grotesque","Noto Sans JP",sans-serif;
  font-weight:800;
  font-size:clamp(26px,3.4vw,38px);
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--ink);
  text-decoration:none;
}
.contact-email:hover{color:var(--moss-deep);}
@media (max-width:560px){
  .contact-row{flex-direction:column-reverse;align-items:flex-start;gap:28px;}
  .contact-text{flex:none;}
  .contact-photo{width:160px;}
}


/* ---------- release popup: playable tracklist ---------- */
ol.tracklist li{padding:0;display:block;}
ol.tracklist li::before{content:none;}
.trk{
  display:flex;align-items:center;gap:20px;width:100%;
  padding:12px 0;background:none;border:none;
  color:var(--ink);font:inherit;font-size:15px;text-align:left;
  cursor:pointer;
}
.trk .n{
  width:1.6em;flex:none;display:flex;align-items:center;
  color:var(--ink-soft);font-size:13px;font-variant-numeric:tabular-nums;
}
.trk .n svg{width:12px;height:12px;display:none;}
.trk .t{flex:1;min-width:0;}
.trk .o{flex:none;max-width:48%;font-size:12px;color:var(--ink-soft);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
li.original .trk .o{color:var(--logo);}
.trk:hover .t, .trk:focus-visible .t{color:var(--logo);}
.trk:focus-visible{outline:none;}
.trk:hover .n .num, .trk:focus-visible .n .num{display:none;}
.trk:hover .n .ico-play, .trk:focus-visible .n .ico-play{display:block;color:var(--logo);}
.trk:disabled{cursor:default;opacity:.4;}
.trk:disabled:hover .t{color:var(--ink);}
.trk:disabled:hover .n .num{display:inline;}
.trk:disabled:hover .n .ico-play{display:none;}
li.playing .trk .t{color:var(--logo);font-weight:600;}
li.playing .trk .n .num, li.playing .trk:hover .n .ico-play{display:none;}
li.playing .trk .n .eq{display:flex;}
.eq{display:none;gap:2px;align-items:flex-end;height:12px;}
.eq i{width:3px;background:var(--logo);height:100%;animation:eq 1s ease-in-out infinite;}
.eq i:nth-child(2){animation-delay:-.4s;}
.eq i:nth-child(3){animation-delay:-.7s;}
li.paused .eq i{animation-play-state:paused;height:40%;}
@keyframes eq{0%,100%{transform:scaleY(.3);}50%{transform:scaleY(1);}}
.eq i{transform-origin:bottom;}

.play-album{
  display:flex;align-items:center;gap:8px;
  margin:-12px auto 26px;
  padding:8px 18px 8px 14px;
  background:var(--logo);color:#111;
  border:none;border-radius:999px;
  font:600 13px/1 "Inter","Noto Sans JP",sans-serif;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;transition:transform .15s ease, filter .2s ease;
}
.play-album svg{width:14px;height:14px;}
.play-album:hover{filter:brightness(1.08);}
.play-album:disabled{opacity:.35;cursor:default;filter:none;transform:none;}
.play-album:active{transform:scale(.96);}
.play-album:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* ---------- docked CD-player bar ---------- */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:4000;
  background:#0b0b0c;color:#f3f1e9;
  border-top:1px solid #2a2a28;
  padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.player.show{transform:none;}
body.has-player{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));}
/* the album popup stops above the player bar, so the bar stays clickable while it's open */
body.has-player .overlay{bottom:calc(73px + env(safe-area-inset-bottom,0px));}
.player{z-index:5100 !important;}
.np{z-index:5090 !important;}
.pl-seek{
  position:absolute;left:0;right:0;top:-7px;height:14px;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;
}
.pl-seek::-webkit-slider-runnable-track{
  height:6px;border-radius:1px;
  background:
    linear-gradient(to right,rgba(244,208,0,.45) var(--p,0%),transparent var(--p,0%)),
    linear-gradient(#000,#141412);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.9), 0 1px 0 #2e2d28;
}
.pl-seek::-moz-range-track{height:6px;border-radius:1px;background:linear-gradient(#000,#141412);box-shadow:inset 0 1px 1px rgba(0,0,0,.9), 0 1px 0 #2e2d28;}
.pl-seek::-moz-range-progress{height:6px;border-radius:1px;background:rgba(244,208,0,.45);}
/* the slider: a little raised yellow block, like Winamp's position bar */
.pl-seek::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:12px;margin-top:-3px;border-radius:2px;
  background:linear-gradient(#fff3a0,#f4d000 45%,#b89c00);
  border:1px solid #3b3316;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.6);
}
.pl-seek::-moz-range-thumb{
  width:24px;height:10px;border-radius:2px;
  background:linear-gradient(#fff3a0,#f4d000 45%,#b89c00);
  border:1px solid #3b3316;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(0,0,0,.6);
}
.pl-seek:hover::-webkit-slider-thumb, .pl-seek:focus-visible::-webkit-slider-thumb{background:linear-gradient(#fffbd0,#ffe033 45%,#c9ab00);}
.pl-seek:focus-visible{outline:none;}
.pl-row{
  height:72px;display:flex;align-items:center;gap:16px;
  padding:0 22px 0 16px;
}
.pl-art{
  width:46px;height:46px;flex:none;border-radius:50%;overflow:hidden;
  background:none;cursor:pointer;border:none;padding:0;
  box-shadow:none;
}
.pl-art{position:relative;overflow:visible;transition:transform .2s ease;}
.pl-art img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.player.playing .pl-art img{animation:spin 6s linear infinite;}
.pl-art:hover, .pl-art:focus-visible{transform:scale(1.06);outline:none;}
.pl-expand{
  position:absolute;right:-4px;bottom:-3px;
  width:19px;height:19px;border-radius:50%;
  background:#f4d000;color:#111;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px #0b0b0c;
  transition:transform .2s ease;
}
.pl-expand svg{width:11px;height:11px;}
.pl-art:hover .pl-expand, .pl-art:focus-visible .pl-expand{transform:translateY(-2px);}
@keyframes spin{to{transform:rotate(360deg);}}
.pl-meta{flex:1;min-width:0;line-height:1.25;}
.pl-title{
  font-family:"Anton","Noto Sans JP",sans-serif;font-size:18px;letter-spacing:.01em;
  text-transform:uppercase;color:#f4d000;
}
/* long titles scroll back and forth instead of getting cut off */
.mq{overflow:hidden;white-space:nowrap;}
.mq > span{display:inline-block;will-change:transform;}
.mq.scroll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 16px),transparent);}
.mq.scroll > span{padding:0 12px;animation:mq var(--dur,8s) ease-in-out infinite alternate;}
@keyframes mq{0%,15%{transform:translateX(0);}85%,100%{transform:translateX(var(--dist,0px));}}
.pl-expand svg{transition:transform .3s ease;}
.player.np-open .pl-expand svg{transform:rotate(180deg);}

/* ---------- now-playing card: grows out of the player's disc ---------- */
.np{
  position:fixed;left:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:3990;
  width:clamp(240px, 21vw, 340px);
  background:#0b0b0c;color:#f3f1e9;
  border:1px solid #2a2a28;border-radius:12px;
  padding:14px 14px 16px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
  transform-origin:12px calc(100% + 60px);
  transform:scale(.12);opacity:0;pointer-events:none;
  transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
.np.open{transform:none;opacity:1;pointer-events:auto;}
.np-cover{width:100%;aspect-ratio:1/1;}
.np-eyebrow{
  margin-top:14px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#95948b;
}
.np-title{
  margin-top:4px;
  font-family:"Anton","Noto Sans JP",sans-serif;font-size:24px;line-height:1.15;
  text-transform:uppercase;color:#f4d000;letter-spacing:.01em;
}
.np-album{
  display:block;margin-top:2px;padding:0;border:none;background:none;cursor:pointer;
  font:13px/1.4 "Inter","Noto Sans JP",sans-serif;color:#95948b;text-align:left;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.np-album:hover, .np-album:focus-visible{color:#f3f1e9;outline:none;text-decoration:underline;}
.np-close{
  position:absolute;top:22px;right:22px;z-index:2;
  width:28px;height:28px;padding:0;border-radius:50%;border:none;
  background:rgba(11,11,12,.55);color:#f3f1e9;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s ease, background .15s ease;
}
.np-close svg{width:15px;height:15px;}
.np-close:hover{background:rgba(11,11,12,.8);}
.np:hover .np-close, .np-close:focus-visible{opacity:1;outline:none;}
@media (max-width:640px){
  .np{width:calc(100vw - 32px);max-width:360px;}
  .np-close{opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .np{transition:opacity .2s ease;transform:none;}
  .np .jc, .np .jc *{animation:none !important;}
}
.pl-album{font-size:12px;color:#95948b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pl-ctrls{display:flex;align-items:center;gap:2px;flex:none;}
.pl-ctrls button{
  width:42px;height:42px;border:none;background:none;color:#f3f1e9;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:color .2s ease, transform .15s ease;border-radius:50%;
}
.pl-ctrls button svg{width:20px;height:20px;}
.pl-ctrls button:hover, .pl-ctrls button:focus-visible{color:#f4d000;outline:none;}
.pl-ctrls button:active{transform:scale(.9);}
.pl-ctrls .pl-play{width:48px;height:48px;background:#f4d000;color:#111;}
.pl-ctrls .pl-play:hover, .pl-ctrls .pl-play:focus-visible{color:#111;filter:brightness(1.08);}
.pl-ctrls .pl-play svg{width:22px;height:22px;}
/* shuffle / repeat toggles: grey when off, yellow with a dot when on */
.pl-mode{position:relative;color:#95948b !important;}
.pl-mode svg{width:18px !important;height:18px !important;}
.pl-mode:hover, .pl-mode:focus-visible{color:#f3f1e9 !important;}
.pl-mode.on{color:#f4d000 !important;}
.pl-mode.on::after{
  content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;
  border-radius:50%;background:#f4d000;
}
.np-modes{display:flex;gap:4px;margin-top:10px;}
.np-modes .pl-mode{
  width:40px;height:40px;border:none;background:none;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:color .2s ease;
}
.pl-time{
  /* Winamp-style LCD: inset black panel, status glyph, seven-segment digits */
  flex:none;display:flex;align-items:center;gap:8px;
  height:36px;padding:0 10px 0 9px;margin:0;cursor:pointer;
  background:#050505;
  border:1px solid #000;border-radius:3px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9), 0 0 0 1px #24231f, 0 1px 0 1px #2e2d28;
}
.pl-time:focus-visible{outline:1px solid #f4d000;outline-offset:3px;}
.lcd{height:19px;width:auto;display:block;overflow:visible;}
.lcd .on{fill:#f4d000;}
.lcd .off{fill:#f4d000;opacity:.07;}
.pl-time .lcd{filter:drop-shadow(0 0 3px rgba(244,208,0,.45));}
.lcd-state{width:9px;height:10px;flex:none;background:#f4d000;}
.pl-time[data-state="play"] .lcd-state{clip-path:polygon(0 0,100% 50%,0 100%);}
.pl-time[data-state="pause"] .lcd-state{clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0);}
.pl-time[data-state="stop"] .lcd-state{width:9px;height:9px;opacity:.55;}
/* like Winamp, the time blinks while paused */
.pl-time[data-state="pause"] .lcd .on{animation:lcd-blink 1s steps(1) infinite;}
@keyframes lcd-blink{50%{opacity:.07;}}
.pl-vol{display:flex;align-items:center;gap:6px;flex:none;}
.pl-vol button{
  width:32px;height:32px;border:none;background:none;color:#95948b;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.pl-vol button svg{width:18px;height:18px;}
.pl-vol button:hover, .pl-vol button:focus-visible{color:#f4d000;outline:none;}
#pl-volume{
  width:90px;height:14px;margin:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;background:transparent;
}
#pl-volume::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;
  background:linear-gradient(to right,#f4d000 var(--v,80%),#2a2a28 var(--v,80%));
}
#pl-volume::-moz-range-track{height:3px;background:#2a2a28;border-radius:2px;}
#pl-volume::-moz-range-progress{height:3px;background:#f4d000;border-radius:2px;}
#pl-volume::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border-radius:50%;background:#f3f1e9;border:none;
}
#pl-volume::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#f3f1e9;border:none;}
#pl-volume:focus-visible{outline:none;}
#pl-volume:focus-visible::-webkit-slider-thumb{background:#f4d000;}
.pl-close{
  flex:none;width:32px;height:32px;padding:0;border:none;border-radius:50%;
  background:none;color:#95948b;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s ease, background .15s ease;
}
.pl-close svg{width:18px;height:18px;}
.pl-close:hover, .pl-close:focus-visible{color:#f3f1e9;background:#1a1a18;outline:none;}
@media (max-width:640px){
  .pl-row{gap:10px;padding:0 12px;}
  .pl-time{display:none;}
  .pl-ctrls .pl-mode{display:none;}
  .pl-vol{display:none;}
  .pl-ctrls button{width:38px;height:38px;}
  .pl-ctrls .pl-play{width:44px;height:44px;}
  .pl-title{font-size:16px;}
}
@media (prefers-reduced-motion: reduce){
  .player.playing .pl-art img, .eq i, .pl-time .lcd .on{animation:none;}
  .player{transition:none;}
}

/* ---------- tip jar (contact page) ---------- */
#page-contact .contact-row{padding-bottom:48px;}
.tip-jar{
  display:flex;align-items:center;gap:28px;
  border-top:1px solid var(--line);
  padding:36px 0 96px;
  text-decoration:none;color:inherit;
  width:fit-content;max-width:100%;
}
.tip-jar img{
  flex:none;width:auto;height:190px;display:block;
  transform-origin:50% 90%;
  transition:transform .2s ease;
}
.tip-jar:hover img{transform:rotate(-4deg) scale(1.03);}
.tip-jar:active img{transform:rotate(-2deg) scale(.98);}
.tip-jar:focus-visible{outline:2px solid var(--moss);outline-offset:6px;}
.tip-eyebrow{
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-soft);margin-bottom:10px;
}
.tip-line{
  font-family:"Bricolage Grotesque","Noto Sans JP",sans-serif;
  font-optical-sizing:auto;font-weight:700;
  font-size:clamp(20px,2.2vw,26px);line-height:1.2;letter-spacing:-.01em;
  color:var(--ink);max-width:22ch;margin:0 0 14px;
}
.tip-cta{
  display:inline-block;font-size:13px;letter-spacing:.02em;
  color:var(--logo);border-bottom:1px solid currentColor;padding-bottom:1px;
  transition:opacity .2s ease;
}
.tip-jar:hover .tip-cta{opacity:.75;}
@media (max-width:560px){
  .tip-jar{gap:18px;}
  .tip-jar img{height:140px;}
}
@media (prefers-reduced-motion: reduce){ .tip-jar img{transition:none;} }


/* ---------- YELLOW POSTS: hidden patch notes (WoW blue-post style, but yellow) ---------- */
#page-yellowposts{
  --yp-bg:#0b0b0c; --yp-panel:#121110; --yp-edge:#3b3316; --yp-gold:#f4d000; --yp-dim:#b9a750;
  --yp-ink:#e7e2d3; --yp-soft:#9a9486;
  background:
    radial-gradient(1200px 500px at 50% -120px, rgba(244,208,0,.08), transparent 70%),
    var(--yp-bg);
  color:var(--yp-ink);
  padding:56px 0 110px !important;
  flex:1 0 auto;
}
#page-yellowposts .wrap{max-width:860px;}
.yp-head{text-align:center;margin-bottom:40px;}
.yp-kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--yp-soft);}
.yp-title{
  font-family:"Anton","Noto Sans JP",sans-serif;font-weight:400;
  font-size:clamp(44px,7vw,78px);line-height:1;letter-spacing:.02em;
  color:var(--yp-gold);text-transform:uppercase;margin:10px 0 12px;
  text-shadow:0 0 28px rgba(244,208,0,.25), 0 2px 0 #6b5a00;
}
.yp-sub{font-family:Georgia,"Times New Roman","Noto Sans JP",serif;font-style:italic;color:var(--yp-soft);font-size:15px;}
.yp-rule{
  height:1px;margin:26px auto 0;max-width:420px;
  background:linear-gradient(90deg,transparent,var(--yp-dim),transparent);
}
.yp-post{
  background:linear-gradient(180deg,#171512,#100f0d);
  border:1px solid var(--yp-edge);
  box-shadow:inset 0 0 0 1px rgba(244,208,0,.05), 0 20px 50px -30px rgba(0,0,0,.8);
  border-radius:4px;margin:0 0 28px;overflow:hidden;
}
.yp-bar{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;background:linear-gradient(180deg,#1d1a12,#15130e);
  border-bottom:1px solid var(--yp-edge);
}
.yp-avatar{width:64px;height:64px;border-radius:4px;border:1px solid var(--yp-dim);background:#fff;flex:none;object-fit:cover;}
.yp-who{flex:1;min-width:0;line-height:1.25;}
.yp-name{font-weight:700;color:var(--yp-gold);font-size:15px;}
.yp-tag{
  display:inline-block;margin-left:8px;padding:1px 6px;border-radius:3px;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--yp-gold);color:#111;vertical-align:2px;
}
.yp-role{font-size:12px;color:var(--yp-soft);font-style:italic;}
.yp-date{font-size:12px;color:var(--yp-soft);white-space:nowrap;}
.yp-body{padding:22px 26px 26px;font-family:Georgia,"Times New Roman","Noto Sans JP",serif;font-size:15.5px;line-height:1.6;}
.yp-body h3{
  font-family:"Anton","Noto Sans JP",sans-serif;font-weight:400;
  font-size:26px;letter-spacing:.02em;text-transform:uppercase;color:var(--yp-gold);margin:0 0 4px;
}
.yp-ver{font-family:"Inter",sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--yp-soft);margin-bottom:14px;}
.yp-body h4{
  font-family:"Inter",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--yp-dim);margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--yp-edge);
}
.yp-body ul{margin:0;padding:0 0 0 2px;list-style:none;}
.yp-body li{position:relative;padding-left:20px;margin:6px 0;}
.yp-body li::before{content:"";position:absolute;left:3px;top:.62em;width:6px;height:6px;background:var(--yp-gold);transform:rotate(45deg);}
.yp-body code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;color:var(--yp-gold);background:rgba(244,208,0,.08);padding:1px 4px;border-radius:3px;}
.yp-note{
  margin:16px 0 4px;padding:12px 16px;border-left:3px solid var(--yp-gold);
  background:rgba(244,208,0,.06);font-style:italic;color:#d8d2bf;
}
.yp-note b{font-style:normal;color:var(--yp-gold);font-family:"Inter",sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:4px;}
.yp-foot{text-align:center;color:var(--yp-soft);font-size:13px;font-family:Georgia,"Noto Sans JP",serif;font-style:italic;margin-top:36px;}
.yp-foot a{color:var(--yp-gold);}
@media (max-width:640px){
  .yp-body{padding:18px 18px 20px;font-size:15px;}
  .yp-bar{padding:10px 12px;}
  .yp-avatar{width:52px;height:52px;}
  .yp-date{display:none;}
}

/* ---------- logo subtitle ---------- */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.logo-sub{
  font-family:"Bricolage Grotesque","Noto Sans JP",sans-serif;
  font-optical-sizing:auto;
  font-weight:600;
  font-size:10.5px;
  line-height:1.25;
  letter-spacing:.01em;
  color:var(--ink-soft);
  white-space:nowrap;
}

/* ---------- language toggle (same look as the SoundCloud toggle) ---------- */
.lang-toggle{display:flex;gap:4px;margin:0 8px 0 12px;}
.lang-toggle button{
  font-size:11px;background:none;border:1px solid var(--line);
  color:var(--ink-soft);
  padding:4px 9px;cursor:pointer;letter-spacing:.02em;line-height:1.2;
  font-family:"Inter","Noto Sans JP",sans-serif;
  transition:border-color .2s ease, color .2s ease;
}
.lang-toggle button.active{border-color:var(--ink);color:var(--ink);}
.lang-toggle button:hover{color:var(--ink);}

footer.site{
  border-top:1px solid var(--line);
  padding:28px;
  font-size:12px;color:var(--ink-soft);
  text-align:center;
}

/* ---------- visualizer button (player bar / now-playing card) + style menu ---------- */
.pl-viz{
  flex:none;width:36px;height:36px;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0;
}
[data-viz-btn][hidden]{display:none !important;}
@media (max-width:640px){ .pl-row .pl-viz{display:none;} }
.viz-menu{
  position:fixed;z-index:5200;min-width:176px;padding:6px;
  background:#0b0b0c;color:#f3f1e9;
  border:1px solid #2a2a28;border-radius:10px;
  box-shadow:0 20px 50px -15px rgba(0,0,0,.7);
  font:14px/1 "Inter","Noto Sans JP",sans-serif;
}
.viz-menu[hidden]{display:none;}
.viz-menu-h{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:11px;color:#95948b;padding:4px 4px 4px 10px;letter-spacing:.02em;
}
.viz-info{
  width:24px;height:24px;padding:0;border:none;border-radius:50%;background:none;
  color:#95948b;cursor:help;display:flex;align-items:center;justify-content:center;
  transition:color .2s ease;
}
.viz-info svg{width:14px;height:14px;}
.viz-info:hover, .viz-info:focus-visible{color:#f4d000;outline:none;}
.viz-tip{
  position:absolute;top:calc(100% + 2px);left:4px;right:4px;z-index:2;
  padding:9px 10px;border-radius:6px;
  background:#1f1f1c;border:1px solid #3a3a35;color:#f3f1e9;
  font-size:12px;line-height:1.45;letter-spacing:0;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.8);
  opacity:0;transform:translateY(-3px);pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.viz-info:hover + .viz-tip, .viz-info:focus + .viz-tip{opacity:1;transform:none;}
.viz-menu [data-style]{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 10px;border:none;border-radius:6px;background:none;
  color:#f3f1e9;font:inherit;text-align:left;cursor:pointer;
}
.viz-menu [data-style] svg{width:18px;height:18px;flex:none;color:#95948b;}
.viz-menu [data-style]:hover, .viz-menu [data-style]:focus-visible{background:#1a1a18;outline:none;}
.viz-menu [data-style][aria-checked="true"], .viz-menu [data-style][aria-checked="true"] svg{color:#f4d000;}
.viz-menu [data-style][aria-checked="true"]::after{
  content:"";margin-left:auto;width:5px;height:5px;border-radius:50%;background:#f4d000;
}

/* ---------- scrollbars: thin, no arrows, no track ---------- */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-button{display:none;width:0;height:0;}
::-webkit-scrollbar-corner{background:transparent;}
::-webkit-scrollbar-thumb{
  background-color:color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius:6px;
}
::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb, var(--ink) 40%, transparent);}
/* the panel's rounded thumb sits a little in from the edge */
.overlay-panel::-webkit-scrollbar{width:10px;}
.overlay-panel::-webkit-scrollbar-thumb{border:3px solid transparent;background-clip:padding-box;}
/* Firefox (no ::-webkit-scrollbar support) */
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--ink) 25%, transparent) transparent;}
}

/* ---------- timeline photo viewer (opens like the album popup) ---------- */
html.lb-lock{overflow:hidden;}
.tl-lb{position:fixed;inset:0;z-index:6000;display:flex;align-items:center;justify-content:center;padding:28px;
  opacity:0;transition:opacity .25s ease;}
.tl-lb[hidden]{display:none;}
.tl-lb.open{opacity:1;}
.tl-lb-backdrop{position:absolute;inset:0;background:rgba(10,10,9,.82);backdrop-filter:blur(4px);}
.tl-lb-panel{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:min(1100px,100%);max-height:100%;
  transform:translateY(14px) scale(.98);transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.tl-lb.open .tl-lb-panel{transform:none;}
.tl-lb-stage{display:flex;align-items:center;justify-content:center;min-height:0;}
.tl-lb-stage img, .tl-lb-stage video{
  display:block;max-width:min(1000px,calc(100vw - 56px));max-height:calc(100vh - 170px);
  width:auto;height:auto;border-radius:4px;box-shadow:0 40px 90px -40px rgba(0,0,0,.8);background:#0b0b0c;
}
.tl-lb-bar{display:flex;align-items:center;gap:18px;width:100%;max-width:640px;justify-content:center;color:#f3f1e9;}
.tl-lb-meta{flex:1;text-align:center;min-width:0;}
.tl-lb-cap{font-size:14px;line-height:1.45;}
.tl-lb-cap a{color:#f4d000;margin-left:4px;}
.tl-lb-count{font-size:11px;letter-spacing:.16em;color:#95948b;margin-top:4px;font-variant-numeric:tabular-nums;}
.tl-lb-nav, .tl-lb-close{
  flex:none;width:44px;height:44px;padding:0;border:none;border-radius:50%;
  background:rgba(255,255,255,.06);color:#f3f1e9;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.tl-lb-nav svg{width:22px;height:22px;}
.tl-lb-nav:hover, .tl-lb-nav:focus-visible, .tl-lb-close:hover, .tl-lb-close:focus-visible{background:rgba(255,255,255,.14);color:#f4d000;outline:none;}
.tl-lb.single .tl-lb-nav{visibility:hidden;}
.tl-lb-close{position:fixed;top:18px;right:18px;background:none;}
.tl-lb-close svg{width:22px;height:22px;}
@media (max-width:640px){
  .tl-lb{padding:16px;}
  .tl-lb-stage img, .tl-lb-stage video{max-width:calc(100vw - 32px);max-height:calc(100vh - 190px);}
}
@media (prefers-reduced-motion: reduce){ .tl-lb, .tl-lb-panel{transition:none;} }

/* ---------- Bio: Pissipedia ---------- */
.wiki{max-width:980px;}
/* Pissipedia wears Wikipedia's own colors: a white article (dark in dark mode), blue links, grey frames */
:root{ --wk-bg:#ffffff; --wk-ink:#202122; --wk-soft:#54595d; --wk-line:#a2a9b1; --wk-box:#f8f9fa; --wk-link:#3366cc; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --wk-bg:#101418; --wk-ink:#eaecf0; --wk-soft:#a2a9b1; --wk-line:#54595d; --wk-box:#202122; --wk-link:#88a3e8; }
}
:root[data-theme="dark"]{ --wk-bg:#101418; --wk-ink:#eaecf0; --wk-soft:#a2a9b1; --wk-line:#54595d; --wk-box:#202122; --wk-link:#88a3e8; }
#page-bio .wiki{--ink:var(--wk-ink);--ink-soft:var(--wk-soft);--line:var(--wk-line);--paper:var(--wk-bg);--paper-2:var(--wk-box);--logo:var(--wk-link);
  background:var(--wk-bg);color:var(--wk-ink);border:1px solid var(--wk-line);padding:22px 30px 40px;margin:0 auto;}
#page-bio .wk-article a{text-decoration:none;}
#page-bio .wk-article h2{clear:both;}
#page-bio .wk-article h3{clear:both;}
.wk-thumb.wk-thumb-l{float:left;clear:left;margin:4px 20px 14px 0;}
.wk-thumb-img img{max-height:320px;object-fit:cover;}
#page-bio .wk-article a:hover,#page-bio .wk-inline:hover{text-decoration:underline;}
.wk-inline{padding:0;border:none;background:none;font:inherit;color:var(--logo);cursor:pointer;}
.wk-thumb{float:right;clear:right;width:224px;margin:4px 0 14px 20px;padding:3px;border:1px solid var(--line);background:var(--paper-2);font-size:12.5px;line-height:1.45;}
.wk-thumb-img{position:relative;display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in;}
.wk-thumb-img img{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--paper);}
.wk-thumb-video::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-14px 0 0 -9px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));}
.wk-thumb figcaption{padding:6px 4px 3px;color:var(--ink);}
@media (max-width:640px){
  #page-bio .wiki{padding:16px 14px 30px;border-left:none;border-right:none;}
  .wk-thumb,.wk-thumb.wk-thumb-l{float:none;width:auto;max-width:320px;margin:6px auto 14px;}
}
.wk-top{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:12px;}
.wk-logo{display:block;height:58px;width:auto;}
.wk-brand{display:flex;align-items:center;gap:8px;}
.wk-mark{width:24px;height:24px;color:var(--logo);align-self:center;}
.wk-word{font:600 24px/1 Georgia,"Times New Roman","Noto Serif JP",serif;color:var(--ink);letter-spacing:.01em;}
.wk-tag{font:italic 13px/1.2 Georgia,"Noto Serif JP",serif;color:var(--ink-soft);padding-bottom:6px;}
@media (max-width:640px){ .wk-logo{height:40px;} .wk-top{gap:6px;} }
.wk-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:22px;}
.wk-tab{font-size:13px;padding:8px 12px 7px;color:var(--ink-soft);text-decoration:none;border:1px solid transparent;border-bottom:none;border-radius:4px 4px 0 0;margin-bottom:-1px;}
.wk-tab.active{color:var(--ink);border-color:var(--line);background:var(--paper);}
a.wk-tab:hover{color:var(--ink);}
.wk-tab-r{margin-left:auto;}
button.wk-tab{font:inherit;font-size:13px;background:none;cursor:pointer;}
button.wk-tab:hover{color:var(--ink);text-decoration:underline;}
/* the Edit tab's answer: a Wikipedia block notice, with no way out */
.wk-block[hidden]{display:none;}
.wk-blk-card{margin-top:10px;padding:18px 22px 22px;border:1px solid var(--wk-line);background:var(--wk-blk-bg);font-size:14px;line-height:1.55;}
.wk-blk-head{display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;font:700 clamp(18px,2.6vw,26px)/1.25 "Inter","Noto Sans JP",sans-serif;}
.wk-blk-stop{flex:none;width:clamp(40px,5vw,56px);height:auto;}
.wk-blk-sub{text-align:center;font-size:clamp(15px,1.7vw,18px);margin:8px 0 14px;}
.wk-block p{margin:0 0 10px;}
.wk-fake{color:var(--wk-link);}
.wk-blk-inner{margin-top:12px;padding:14px 16px;border:1px solid var(--wk-soft);background:var(--wk-bg);}
.wk-blk-why{display:flex;gap:12px;align-items:flex-start;}
.wk-blk-key{flex:none;width:30px;height:30px;margin-top:2px;}
.wk-blk-inner hr{border:none;border-top:1px solid var(--wk-line);margin:12px 0;}
.wk-blk-h{font:700 16px/1.3 Georgia,"Times New Roman","Noto Serif JP",serif;color:var(--wk-blk-green);}
.wk-blk-admin{font-size:12.5px;}
.wk-blk-admin b{font-family:Georgia,"Noto Serif JP",serif;color:var(--wk-blk-red);}
:root{--wk-blk-bg:#fdf2d5;--wk-blk-green:#006400;--wk-blk-red:#8b0000;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--wk-blk-bg:#2e2716;--wk-blk-green:#7fd67f;--wk-blk-red:#ff8a8a;} }
:root[data-theme="dark"]{--wk-blk-bg:#2e2716;--wk-blk-green:#7fd67f;--wk-blk-red:#ff8a8a;}
.wk-article{font-size:15.5px;line-height:1.65;color:var(--ink);}
.wk-article::after{content:"";display:block;clear:both;}
.wk-title{font:400 32px/1.2 Georgia,"Times New Roman","Noto Serif JP",serif;margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--line);color:var(--ink);text-transform:none;letter-spacing:0;}
.wk-from{font-size:12.5px;color:var(--ink-soft);margin-bottom:12px;}
.wk-hat{font-style:italic;font-size:14px;color:var(--ink-soft);padding:0 0 12px 22px;}
.wk-article p{margin:0 0 14px;}
.wk-article h2{font:400 23px/1.3 Georgia,"Times New Roman","Noto Serif JP",serif;margin:30px 0 10px;padding-bottom:4px;border-bottom:1px solid var(--line);color:var(--ink);letter-spacing:0;text-transform:none;}
.wk-article h3{font:700 16px/1.4 "Inter","Noto Sans JP",sans-serif;margin:20px 0 6px;color:var(--ink);}
.wk-article h2, .wk-article h3{scroll-margin-top:90px;}
.wk-article a{color:var(--logo);}
/* infobox */
.wk-infobox{float:right;width:280px;margin:0 0 18px 26px;border:1px solid var(--line);background:var(--paper-2);padding:8px;font-size:13px;line-height:1.45;}
.wk-ib-name{text-align:center;font:700 17px/1.3 Georgia,"Noto Serif JP",serif;padding:4px 0 8px;}
.wk-ib-img{display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in;}
.wk-ib-img img{display:block;width:100%;height:auto;}
.wk-ib-cap{text-align:center;font-size:12px;color:var(--ink-soft);padding:6px 4px 8px;}
.wk-infobox table{width:100%;border-collapse:collapse;}
.wk-infobox th{text-align:left;vertical-align:top;padding:5px 8px 5px 2px;width:44%;font-weight:700;}
.wk-infobox td{vertical-align:top;padding:5px 2px;}
.wk-infobox tr + tr th, .wk-infobox tr + tr td{border-top:1px solid var(--line);}
.wk-muted{color:var(--ink-soft);font-size:.92em;}
/* contents box */
.wk-toc{display:inline-block;border:1px solid var(--line);background:var(--paper-2);padding:10px 18px 10px 14px;margin:6px 0 10px;font-size:13.5px;}
.wk-toc-h{font-weight:700;text-align:center;margin-bottom:6px;}
.wk-toc ol{list-style:none;margin:0;padding:0;}
.wk-toc ol ol{padding-left:18px;}
.wk-toc a{color:var(--ink);text-decoration:none;line-height:1.7;}
.wk-toc a:hover{text-decoration:underline;}
.wk-toc a span{color:var(--ink-soft);margin-right:4px;}
/* footnote marks */
.wk-ref{line-height:0;}
.wk-ref button{padding:0 1px;border:none;background:none;cursor:pointer;font:600 11px/1 "Inter",sans-serif;color:var(--logo);vertical-align:super;}
.wk-ref button:hover, .wk-ref button:focus-visible{text-decoration:underline;outline:none;}
.wk-quotes{list-style:none;margin:0;padding:0;}
.wk-quotes li{font:italic 17px/1.5 Georgia,"Noto Serif JP",serif;padding:4px 0 4px 16px;border-left:3px solid var(--logo);margin:0 0 10px;}
.wk-disco{margin:0;padding-left:22px;}
.wk-disco li{margin:2px 0;}
.wk-album{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:var(--logo);}
.wk-album:hover, .wk-album:focus-visible{text-decoration:underline;outline:none;}
.wk-refs{margin:0;padding-left:26px;font-size:13.5px;}
.wk-refs li{margin:3px 0;}
.wk-cite{padding:0 3px 0 0;border:none;background:none;cursor:pointer;font:700 13px/1 "Inter",sans-serif;color:var(--logo);}
/* footnote hover preview */
.wk-peek{position:fixed;z-index:5200;width:220px;display:none;padding:8px;border-radius:6px;background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(0,0,0,.5);pointer-events:none;font-size:12px;line-height:1.4;color:var(--ink-soft);}
.wk-peek.show{display:block;animation:wk-in .15s ease;}
.wk-peek img{display:block;width:100%;height:150px;object-fit:cover;border-radius:3px;margin-bottom:6px;background:var(--paper-2);}
@keyframes wk-in{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:none;}}
@media (max-width:700px){
  .wk-infobox{float:none;width:auto;margin:0 0 18px;}
  .wk-ib-img img{max-width:320px;margin:0 auto;}
  .wk-title{font-size:27px;}
  .wk-toc{display:block;}
}
@media (prefers-reduced-motion: reduce){ .wk-peek.show{animation:none;} }


/* ---------- Contact: the mypiss profile ----------
   Light mode = the default look (white boxes, blue strips). Dark mode = a custom layout (black, yellow). */
:root{
  --mp-pg:#e4ecf6; --mp-tile:url(../img/mypiss-tile-light.svg);
  --mp-box:#ffffff; --mp-line:#7d9cc6; --mp-strip:#4a6a99; --mp-strip-ink:#ffffff;
  --mp-ink:#1b1f26; --mp-soft:#555c69; --mp-link:#1c4c95; --mp-title:#b3500f;
  --mp-lbl:#c9d9ee; --mp-lbl-ink:#223f66; --mp-val:#eaf1f9; --mp-btn:#f3f7fc; --mp-btn-ink:#1c4c95;
  --mp-online:#237a23; --mp-ext:#1b1f26;
  --mp-bar:#3f5f8f; --mp-bar-edge:#2c476f; --mp-bar-ink:#ffffff; --mp-bar-soft:#dbe6f5;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --mp-pg:#060607; --mp-tile:url(../img/mypiss-tile-dark.svg);
    --mp-box:#0f0f11; --mp-line:#f4d000; --mp-strip:#f4d000; --mp-strip-ink:#0b0b0c;
    --mp-ink:#ece8dc; --mp-soft:#a29e91; --mp-link:#f4d000; --mp-title:#ece8dc;
    --mp-lbl:#1f1f22; --mp-lbl-ink:#f4d000; --mp-val:#151517; --mp-btn:#18181b; --mp-btn-ink:#ece8dc;
    --mp-online:#7fdc6c; --mp-ext:#f4d000;
    --mp-bar:#0b0b0c; --mp-bar-edge:#f4d000; --mp-bar-ink:#f4d000; --mp-bar-soft:#a29e91;
  }
}
:root[data-theme="dark"]{
  --mp-pg:#060607; --mp-tile:url(../img/mypiss-tile-dark.svg);
  --mp-box:#0f0f11; --mp-line:#f4d000; --mp-strip:#f4d000; --mp-strip-ink:#0b0b0c;
  --mp-ink:#ece8dc; --mp-soft:#a29e91; --mp-link:#f4d000; --mp-title:#ece8dc;
  --mp-lbl:#1f1f22; --mp-lbl-ink:#f4d000; --mp-val:#151517; --mp-btn:#18181b; --mp-btn-ink:#ece8dc;
  --mp-online:#7fdc6c; --mp-ext:#f4d000;
  --mp-bar:#0b0b0c; --mp-bar-edge:#f4d000; --mp-bar-ink:#f4d000; --mp-bar-soft:#a29e91;
}
.page.mp-page:not(#page-home){padding:0;}
.mp-page.active{display:flex;flex-direction:column;flex:1 0 auto;}
.mp-page{font-family:Verdana,Tahoma,"Noto Sans JP",sans-serif;}

.mp-bar{background:var(--mp-bar);border-bottom:2px solid var(--mp-bar-edge);padding:0 16px;}
.mp-bar-in{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 0;}
.mp-logo{width:46px;height:34px;flex:none;}
.mp-home{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;border-radius:4px;}
.mp-home:hover .mp-word{text-decoration:underline;}
.mp-home:focus-visible{outline:2px solid var(--mp-bar-ink);outline-offset:4px;}
.mp-drop-front{stroke:var(--mp-bar);}
.mp-word{font-family:Verdana,Tahoma,sans-serif;font-weight:bold;font-size:25px;line-height:1;letter-spacing:-.03em;color:var(--mp-bar-ink);}
.mp-tag{font-size:10.5px;color:var(--mp-bar-soft);margin-top:2px;}

.mp-field{flex:1 0 auto;background:var(--mp-pg) var(--mp-tile) repeat;padding:36px 16px 56px;color:var(--mp-ink);}
/* your own profile's custom layout: faint, spread-out droplets on black (low contrast, so it doesn't shimmer), same in light and dark */
#page-contact .mp-field{position:relative;background:#0b0b0b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M16 6C16 6 8 17 8 22.5a8 8 0 0 0 16 0C24 17 16 6 16 6z' fill='%233a3410'/%3E%3Cpath d='M48 38C48 38 40 49 40 54.5a8 8 0 0 0 16 0C56 49 48 38 48 38z' fill='%233a3410'/%3E%3C/svg%3E") 0 0 / 128px 128px repeat;}
@media (max-width:700px){#page-contact .mp-field{background-size:96px 96px;}}
/* Friends, Comments, Pics and Videos are default pages: plain light/dark background, no tile */
#page-friends .mp-field,#page-photos .mp-field,#page-videos .mp-field,#page-comments .mp-field{background-image:none;}
.mp-cols{max-width:900px;margin:0 auto;display:grid;grid-template-columns:350px minmax(0,1fr);gap:22px;align-items:start;}
.mp-col{display:flex;flex-direction:column;gap:16px;min-width:0;}
.mp-field a{color:var(--mp-link);}
.mp-box{background:var(--mp-box);border:1px solid var(--mp-line);}
.mp-strip{margin:0;padding:5px 9px;background:var(--mp-strip);color:var(--mp-strip-ink);font-family:Verdana,Tahoma,"Noto Sans JP",sans-serif;font-size:12px;font-weight:bold;letter-spacing:0;line-height:1.4;}
.mp-strip-split{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.mp-strip-split h2{margin:0;font:inherit;letter-spacing:0;}
.mp-field .mp-strip a{color:var(--mp-strip-ink);font-size:10.5px;font-weight:normal;}
.mp-soft{color:var(--mp-soft);}
.mp-linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--mp-link);text-decoration:underline;cursor:pointer;}

/* profile */
.mp-profile{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;}
.mp-name{margin:0;font-family:Verdana,Tahoma,sans-serif;font-size:24px;font-weight:bold;letter-spacing:-.01em;color:var(--mp-ink);}
.mp-prof-row{display:flex;gap:12px;align-items:flex-start;}
.mp-pfp{width:150px;height:180px;flex:none;object-fit:cover;border:1px solid var(--mp-line);background:var(--mp-val);}
.mp-facts{display:flex;flex-direction:column;gap:6px;font-size:11.5px;line-height:1.45;min-width:0;}
.mp-quote{font-style:italic;}
.mp-online{display:flex;align-items:center;gap:5px;margin-top:4px;color:var(--mp-online);font-weight:bold;}
.mp-online svg{width:12px;height:14px;flex:none;}
.mp-viewmy{font-size:11.5px;}
.mp-viewmy a{font-weight:bold;}

/* profile song */
.mp-song-row{display:flex;align-items:center;gap:11px;padding:10px 12px;}
.mp-play{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--mp-line);background:var(--mp-btn);color:var(--mp-link);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.mp-play svg{width:16px;height:16px;}
.mp-play.on{background:var(--mp-strip);color:var(--mp-strip-ink);}
.mp-song-meta{display:flex;flex-direction:column;gap:2px;font-size:11.5px;min-width:0;}
.mp-song-title{font-weight:bold;overflow-wrap:anywhere;}

/* contact table */
.mp-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:9px;}
.mp-act{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 9px;background:var(--mp-btn);color:var(--mp-btn-ink);border:1px solid var(--mp-line);font:inherit;font-size:11.5px;font-weight:bold;text-align:left;text-decoration:none;cursor:pointer;}
.mp-field a.mp-act{color:var(--mp-btn-ink);}
.mp-act svg{width:16px;height:16px;flex:none;}
.mp-act:hover{border-color:var(--mp-link);color:var(--mp-link);}
.mp-status{min-height:17px;padding:0 11px 10px;font-size:11.5px;font-weight:bold;color:var(--mp-link);}
.mp-url{padding:9px 12px;font-size:11.5px;display:flex;flex-direction:column;gap:3px;}
.mp-url-k{font-weight:bold;}

/* right column */
.mp-ext{padding:18px 16px;font-size:21px;font-weight:bold;line-height:1.25;color:var(--mp-ext);}
.mp-mail-in{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;}
.mp-mail-in .mp-soft{font-size:11.5px;}
.mp-email{font-size:25px;font-weight:bold;letter-spacing:-.01em;overflow-wrap:anywhere;}
.mp-copy-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.mp-copy{min-height:44px;padding:0 16px;background:var(--mp-strip);color:var(--mp-strip-ink);border:1px solid var(--mp-strip);font:inherit;font-size:12px;font-weight:bold;cursor:pointer;}
.mp-note{font-size:11.5px;font-weight:bold;color:var(--mp-link);}
.mp-blog-list{list-style:none;margin:0;padding:10px 12px 4px;display:flex;flex-direction:column;gap:6px;font-size:12px;}
.mp-blog-t{font-weight:bold;}
.mp-blog-all{display:block;margin:0 12px 10px auto;font-size:11px;}
.mp-tip-in{display:flex;gap:14px;align-items:center;padding:12px;text-decoration:none;}
.mp-field a.mp-tip-in{color:var(--mp-ink);}
.mp-tip-in img{width:84px;height:auto;flex:none;}
.mp-tip-text{display:flex;flex-direction:column;gap:8px;font-size:12.5px;line-height:1.5;}
.mp-tip-cta{font-size:12px;font-weight:bold;color:var(--mp-link);text-decoration:underline;}

/* friends */
.mp-friends-in{padding:10px 12px 12px;display:flex;flex-direction:column;gap:10px;}
.mp-count-t{font-size:12px;font-weight:bold;color:var(--mp-title);}
.mp-count-t b{color:var(--mp-link);}
.mp-friend-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px;}
.mp-friend{display:flex;flex-direction:column;align-items:center;gap:5px;}
.mp-fr-name{font-size:11px;font-weight:bold;color:var(--mp-link);text-align:center;line-height:1.25;overflow-wrap:anywhere;
  /* a fixed two-line slot, names sitting at the bottom, so every photo in a row lines up whatever the name length */
  height:2.5em;width:100%;display:flex;align-items:flex-end;justify-content:center;}
.mp-fr-name > span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
.mp-fr-pic{width:100%;max-width:92px;aspect-ratio:1;border:1px solid var(--mp-line);background:var(--mp-val);display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:var(--mp-link);font-family:"Bricolage Grotesque","Noto Sans JP",sans-serif;font-weight:800;font-size:clamp(16px,2.4vw,26px);}
.mp-fr-pic svg{width:66%;height:66%;}
.mp-fr-pic img{width:100%;height:100%;object-fit:cover;}
.mp-friend:first-child .mp-fr-pic{color:var(--mp-soft);}

/* comments */
.mp-comments-in{padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px;}
.mp-count{font-size:11px;}
.mp-count b{color:var(--mp-ink);}
.mp-comment-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.mp-comment{display:grid;grid-template-columns:112px minmax(0,1fr);gap:2px;}
.mp-c-who{background:var(--mp-lbl);padding:8px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;}
.mp-c-name{font-size:11px;font-weight:bold;line-height:1.25;overflow-wrap:anywhere;}
.mp-c-pic{width:60px;height:60px;border:1px solid var(--mp-line);background:var(--mp-val);display:flex;align-items:center;justify-content:center;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:15px;color:var(--mp-link);}
.mp-c-via{font-size:10px;color:var(--mp-lbl-ink);}
.mp-c-body{background:var(--mp-val);padding:8px 10px;display:flex;flex-direction:column;gap:6px;}
.mp-field a.mp-c-date{align-self:flex-start;font-size:10.5px;font-weight:bold;color:var(--mp-soft);}
.mp-c-body p{margin:0;font-size:12px;line-height:1.5;white-space:pre-line;}
.mp-field .mp-c-date{align-self:flex-start;font-size:10.5px;font-weight:bold;color:var(--mp-soft);}
.mp-c-face svg{width:100%;height:100%;display:block;}
.mp-comment-form{display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--mp-val);border:1px solid var(--mp-line);}
.mp-comment-form[hidden]{display:none;}
.mp-comment-form label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:bold;color:var(--mp-lbl-ink);}
.mp-comment-form input,.mp-comment-form textarea{font:inherit;font-size:13px;font-weight:normal;color:var(--mp-ink);background:var(--mp-box);border:1px solid var(--mp-line);padding:6px 8px;border-radius:0;width:100%;box-sizing:border-box;}
.mp-comment-form textarea{resize:vertical;min-height:80px;line-height:1.45;}
.mp-comment-form input:focus-visible,.mp-comment-form textarea:focus-visible{outline:2px solid var(--mp-link);outline-offset:1px;}
.mp-comment-form .mp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.mp-cf-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mp-cf-send{cursor:pointer;}
.mp-cf-send:disabled{opacity:.6;cursor:wait;}
.mp-cf-note{font-size:10.5px;}
.mp-cf-msg{margin:0;font-size:12px;font-weight:bold;color:var(--mp-link);min-height:1em;}
.mp-cf-msg:empty{display:none;}
.mp-cf-msg.bad{color:#e0533d;}
.mp-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;font-size:12px;padding:4px 0;}
.mp-pager a,.mp-pager b{min-width:24px;min-height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;}
.mp-pager b{background:var(--mp-strip);color:var(--mp-strip-ink);}
.mp-pager .mp-pg-step{padding:0 6px;}
.mp-pager-slot:empty{display:none;}

/* one column: the email moves up right under the profile, so the link-first rule holds on phones */
@media (max-width:780px){
  .mp-field{padding:20px 12px 40px;}
  .mp-cols{display:flex;flex-direction:column;gap:14px;}
  .mp-col{display:contents;}
  .mp-profile{order:1;} .mp-ext{order:2;} .mp-mail{order:3;} .mp-table{order:4;} .mp-song{order:5;}
  .mp-blog{order:6;} .mp-tip{order:7;} .mp-friends{order:8;} .mp-comments{order:9;} .mp-url{order:10;}
  .mp-pfp{width:120px;height:144px;}
  .mp-ext{font-size:18px;padding:14px;}
  .mp-email{font-size:21px;}
  .mp-friend-grid{gap:10px 6px;}
  .mp-comment{grid-template-columns:88px minmax(0,1fr);}
  .mp-c-pic{width:44px;height:44px;font-size:13px;}
}

/* mypiss Photos and Videos pages */
.mp-wide{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.mp-field a.mp-crumb{align-self:flex-start;font-size:12px;font-weight:bold;background:var(--mp-box);border:1px solid var(--mp-line);padding:6px 10px;}
.mp-wide-in{padding:14px 16px 18px;display:flex;flex-direction:column;gap:12px;}
.mp-sub-h{margin:0;font-family:Verdana,Tahoma,"Noto Sans JP",sans-serif;font-size:15px;font-weight:bold;letter-spacing:0;color:var(--mp-ink);}
.mp-back{align-self:flex-start;font-size:12px;}
.mp-page .mp-count{font-size:12px;font-weight:bold;color:var(--mp-title);}
.mp-page .mp-count b{color:var(--mp-link);}
.mp-vids{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.mp-vid{display:block;width:100%;padding:0;border:1px solid var(--mp-line);background:#000;cursor:pointer;aspect-ratio:16/9;overflow:hidden;}
.mp-vid.on{outline:3px solid var(--mp-link);outline-offset:1px;}
.mp-vid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease,opacity .2s ease;}
.mp-vid:hover img,.mp-vid:focus-visible img{transform:scale(1.04);opacity:.85;}
.mp-vid:focus-visible{outline:2px solid var(--mp-link);outline-offset:2px;}
.mp-vid-now{display:flex;flex-direction:column;gap:6px;scroll-margin-top:90px;}
.mp-vid-now[hidden]{display:none;}
.mp-vid-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--mp-line);}
.mp-vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.mp-vid-yt{align-self:flex-end;font-size:12px;}
.mp-albums{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;}
.mp-album{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:0;border:0;background:none;color:var(--mp-link);font:inherit;text-align:left;cursor:pointer;}
.mp-album-cover{display:block;width:100%;aspect-ratio:1;border:1px solid var(--mp-line);overflow:hidden;background:var(--mp-val);}
.mp-album-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease;}
.mp-album:hover .mp-album-cover img,.mp-album:focus-visible .mp-album-cover img{transform:scale(1.04);}
.mp-album:focus-visible{outline:2px solid var(--mp-link);outline-offset:3px;}
.mp-album-t{font-size:12px;font-weight:bold;text-decoration:underline;}
.mp-album-n{font-size:11px;color:var(--mp-soft);}
.mp-photos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}
.mp-photo{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:1px solid var(--mp-line);background:var(--mp-val);overflow:hidden;cursor:pointer;}
.mp-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease,opacity .2s ease;}
.mp-photo:hover img,.mp-photo:focus-visible img{transform:scale(1.04);opacity:.85;}
.mp-photo:focus-visible{outline:2px solid var(--mp-link);outline-offset:2px;}
.mp-photo-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7);}
@media (max-width:780px){ .mp-vids{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} .mp-wide-in{padding:12px;} }
@media (prefers-reduced-motion: reduce){ .mp-vid img,.mp-album-cover img,.mp-photo img{transition:none;} }

/* album popup: copy this album's link */
.album-link{display:block;margin:-14px auto 22px;background:none;border:0;padding:4px 8px;font:500 12px "Inter","Noto Sans JP",sans-serif;letter-spacing:.04em;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.album-link:hover,.album-link:focus-visible{color:var(--ink);}

/* friend network */
.mp-fr-link{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;text-decoration:none;}
.mp-field a.mp-fr-link{color:var(--mp-link);}
.mp-fr-link:hover .mp-fr-name{text-decoration:underline;}
.mp-fr-link:focus-visible{outline:2px solid var(--mp-link);outline-offset:3px;}
.mp-fr-pic{color:var(--mp-soft);}
.mp-view-all{align-self:flex-end;font-size:11px;}
.mp-shuffled{font-size:11px;}
.mp-lite{max-width:640px;}
.mp-fp{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;}
.mp-fp-head{display:flex;gap:14px;align-items:center;}
.mp-fp-pic{width:110px;max-width:110px;flex:none;}
.mp-fp-who{display:flex;flex-direction:column;gap:6px;min-width:0;}
.mp-fp-who .mp-name{font-size:22px;overflow-wrap:anywhere;}
.mp-fp-line{font-size:12px;color:var(--mp-ink);}
.mp-fp-line b{color:var(--mp-link);}
.mp-songs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--mp-line);}
.mp-songs li{border-bottom:1px solid var(--mp-line);}
.mp-song-play{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 4px;text-align:left;text-decoration:none;font-size:12.5px;}
.mp-song-play svg{width:12px;height:12px;flex:none;}
.mp-song-play:hover span{text-decoration:underline;}
.mp-fp-on{font-size:12px;line-height:1.6;}
.mp-all-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));}

/* ---------- fake 2007 side ads on the profile (desktop only). "junk", never "ad": ad blockers hide those ---------- */
#page-friend .mp-field{position:relative;}
.mp-junk{display:none;}
@media (min-width:1400px){
  .mp-junk{display:block;position:absolute;top:36px;bottom:56px;left:calc(50% + 450px + 26px);width:min(300px, calc(50% - 450px - 52px));}
}
/* friend profiles use a narrower column (640px), so their ad sits closer and shows on smaller screens too */
@media (min-width:1130px){
  #page-friend .mp-junk{display:block;position:absolute;top:36px;bottom:56px;left:calc(50% + 320px + 26px);width:min(300px, calc(50% - 320px - 52px));}
}
.mj-sticky{position:sticky;top:84px;display:flex;flex-direction:column;gap:6px;}
.mj-tag,.mj-by{font:9px/1 Verdana,Tahoma,sans-serif;color:#8a8a8a;text-transform:uppercase;letter-spacing:.06em;text-align:center;}
.mj-ad{display:block;width:100%;padding:0;border:1px solid #555;background:#000;cursor:pointer;line-height:0;}
.mj-ad[hidden]{display:none;}
.mj-ad img{display:block;width:100%;height:auto;}
.mj-ad:focus-visible{outline:3px solid #f4d000;outline-offset:2px;}
/* the punchline: a bonk, in the site's own light or dark */
.mj-dialog{padding:14px 14px 16px;border:1px solid var(--line);border-radius:10px;width:min(460px,calc(100vw - 32px));background:var(--paper);color:var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.35);}
.mj-dialog::backdrop{background:rgba(0,0,0,.45);}
.mj-dlg-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.mj-bonk{display:block;width:100%;height:auto;}
.mj-bonk-dark{display:none;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mj-bonk-light{display:none;} :root:not([data-theme="light"]) .mj-bonk-dark{display:block;} }
:root[data-theme="dark"] .mj-bonk-light{display:none;} :root[data-theme="dark"] .mj-bonk-dark{display:block;}
.mj-dialog form{display:flex;justify-content:center;padding-top:10px;}
.mj-dlg-ok{min-width:96px;min-height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--ink);color:var(--paper);font:600 14px/1 "Inter",sans-serif;cursor:pointer;}
.mj-dlg-ok:focus-visible{outline:2px solid var(--logo);outline-offset:2px;}
@media (prefers-reduced-motion: no-preference){
  .mj-dialog[open]{animation:mj-bonk .35s cubic-bezier(.3,1.6,.5,1);}
  @keyframes mj-bonk{0%{transform:scale(.6) rotate(-4deg);opacity:0;}60%{transform:scale(1.04) rotate(1deg);opacity:1;}100%{transform:none;}}
}
/* Subscribe to this Blog: the feed address to copy, instead of a page of raw feed code */
.mp-rss{padding:20px 20px 16px;}
.mp-rss-t{margin:0 0 8px;font:700 18px/1.3 "Inter",sans-serif;}
.mp-rss-p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);}
.mp-rss-row{display:flex;gap:8px;}
.mp-rss-url{flex:1;min-width:0;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--paper-2, var(--paper));color:var(--ink);font:13px/1 ui-monospace,Consolas,monospace;}
.mp-rss-copy{min-height:40px;padding:0 16px;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:600 13px/1 "Inter",sans-serif;cursor:pointer;}
.mp-rss-copy:focus-visible,.mp-rss-url:focus-visible{outline:2px solid var(--logo);outline-offset:2px;}
.mp-rss-note{margin:8px 0 0;min-height:1.2em;font-size:12.5px;color:var(--ink-soft);}

/* ---------- Merch: an early-2000s computer-catalog store. Cards link out to the real pisscontrol store. ---------- */
.td{--td-bg:#fff;--td-ink:#111;--td-soft:#555;--td-link:#0b4fc4;--td-line:#d3d3d3;--td-yel:#ffd91a;--td-yel-ink:#111;--td-panel:#f6f6f6;--td-black:#000;--td-red:#d11212;
  margin:18px 0 56px;background:var(--td-bg);color:var(--td-ink);border:1px solid var(--td-line);font:14px/1.45 Arial,Helvetica,"Noto Sans JP",sans-serif;}
:root[data-theme="dark"] .td{--td-bg:#111113;--td-ink:#ece8dc;--td-soft:#a29e91;--td-link:#8fb4ff;--td-line:#35352f;--td-panel:#18181b;--td-red:#ff6b5e;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .td{--td-bg:#111113;--td-ink:#ece8dc;--td-soft:#a29e91;--td-link:#8fb4ff;--td-line:#35352f;--td-panel:#18181b;--td-red:#ff6b5e;}}
.td button{font:inherit;cursor:pointer;}
.td-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.td-top{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;background:var(--td-black);color:var(--td-yel);padding:10px 18px;}
.td-logo{display:flex;align-items:center;gap:6px;font:800 44px/1 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:-.03em;}
.td-drop{height:.95em;width:auto;flex:none;}
.td-logo span{color:#fff;font-style:italic;}
.td-slogan{font:italic 700 20px/1.2 Arial,Helvetica,"Noto Sans JP",sans-serif;}
.td-nav{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;background:var(--td-yel);color:var(--td-yel-ink);padding:6px 14px;border-bottom:2px solid #c9a800;}
.td-tech{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;}
.td-tech li+li{border-left:2px solid #111;}
.td-tech button{background:none;border:0;color:#111;font-weight:700;font-size:17px;min-height:44px;padding:0 14px;}
.td-tech button:hover,.td-tech button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;}
.td-search{display:flex;gap:6px;flex:1 1 260px;max-width:420px;}
.td-search input{flex:1;min-width:0;min-height:40px;padding:0 12px;border:1px solid #9a8200;border-radius:8px;background:#fff;color:#111;font:14px Arial,Helvetica,sans-serif;}
.td-search button{min-height:40px;padding:0 14px;border:0;border-radius:20px;background:#111;color:var(--td-yel);font-weight:800;}
.td button:focus-visible,.td a:focus-visible,.td-search input:focus-visible{outline:3px solid var(--td-link);outline-offset:2px;}
.td-hero{display:grid;grid-template-columns:210px minmax(0,1fr) 210px;gap:8px;padding:8px;align-items:stretch;}
.td-side{border:1px solid var(--td-line);background:var(--td-panel);}
.td-side-h{background:var(--td-yel);color:#111;font:800 17px/1.2 Arial,Helvetica,"Noto Sans JP",sans-serif;padding:10px 12px;}
.td-side ul{list-style:none;margin:0;padding:0;}
.td-side li{border-top:1px solid var(--td-line);}
.td-side button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--td-link);font-weight:700;font-size:15px;min-height:44px;padding:0 12px 0 30px;position:relative;}
.td-side button::before{content:"";position:absolute;left:14px;top:50%;margin-top:-5px;border:5px solid transparent;border-left:7px solid var(--td-soft);}
.td-side button:hover{text-decoration:underline;}
.td-side button[aria-pressed="true"]{background:var(--td-yel);color:#111;}
.td-side button[aria-pressed="true"]::before{border-left-color:#111;}
.td-banner{display:block;width:100%;height:100%;object-fit:contain;background:#1b0f2e;border:1px solid var(--td-line);}
.td-perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--td-line);background:var(--td-panel);}
.td-perks li{flex:1;display:flex;align-items:center;gap:12px;padding:10px 12px;font-size:13px;line-height:1.35;}
.td-perks li div{display:flex;flex-direction:column;min-width:0;}
.td-ico{flex:none;width:52px;height:39px;color:#1f4fd1;}
:root[data-theme="dark"] .td-ico{color:#8fb4ff;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .td-ico{color:#8fb4ff;}}
.td-perks li+li{border-top:1px solid var(--td-line);}
.td-perks b{color:var(--td-link);font:800 15px/1.2 Arial,Helvetica,"Noto Sans JP",sans-serif;margin-bottom:2px;}
.td-bar{background:var(--td-black);color:var(--td-yel);font-weight:700;padding:6px 14px;min-height:32px;}
.td-grid{list-style:none;margin:0;padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px;}
.td-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--td-line);background:var(--td-bg);padding:10px;}
.td-card[hidden]{display:none;}
.td-card:hover{border-color:#c9a800;box-shadow:0 0 0 2px var(--td-yel);}
.td-burst{position:absolute;z-index:1;top:4px;left:4px;width:54px;height:54px;display:grid;place-items:center;background:var(--td-red);color:#fff;font:italic 800 13px/1 Arial,sans-serif;transform:rotate(-12deg);
  clip-path:polygon(50% 0,61% 13%,78% 7%,80% 24%,97% 28%,89% 43%,100% 57%,84% 64%,85% 82%,68% 80%,58% 96%,45% 84%,29% 93%,24% 76%,6% 73%,13% 56%,0 43%,15% 34%,11% 16%,29% 16%);}
.td-pic{display:block;background:#fff;border:1px solid var(--td-line);aspect-ratio:1/1;overflow:hidden;}
.td-pic img{display:block;width:100%;height:100%;object-fit:contain;}
.td-pic.broken img{display:none;}
.td-name{font:700 15px/1.3 Arial,Helvetica,sans-serif;letter-spacing:0;margin:10px 0 4px;}
.td-name a{color:var(--td-link);text-decoration:underline;}
.td .td-desc{font-size:13px;line-height:1.45;margin:0 0 8px;max-width:none;flex:1;color:var(--td-ink);}
.td .td-meta{font-size:11px;line-height:1.5;color:var(--td-soft);margin:0 0 10px;max-width:none;}
.td-stock{color:#167a2e;font-weight:700;}
:root[data-theme="dark"] .td-stock{color:#7fdc6c;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .td-stock{color:#7fdc6c;}}
.td a.td-buy{display:flex;align-items:center;justify-content:center;min-height:44px;background:var(--td-yel);color:#111;border:2px solid #111;border-radius:6px;font:800 15px/1 Arial,Helvetica,"Noto Sans JP",sans-serif;text-decoration:none;}
.td a.td-buy:hover{background:#111;color:var(--td-yel);}
.td .td-none{margin:0;padding:24px 14px;text-align:center;font-weight:700;max-width:none;}
.td .td-foot{margin:4px 14px 4px;font-weight:700;max-width:none;}
.td-store{color:var(--td-link);}
.td .td-fine{margin:0 14px 14px;font-size:12px;color:var(--td-soft);max-width:none;}
@media (max-width:980px){
  .td-hero{grid-template-columns:190px minmax(0,1fr);}
  .td-perks{grid-column:1 / -1;flex-direction:row;}
  .td-perks li+li{border-top:0;border-left:1px solid var(--td-line);}
}
@media (max-width:640px){
  .td-logo{font-size:32px;}
  .td-slogan{font-size:14px;}
  .td-tech button{font-size:14px;padding:0 9px;}
  .td-hero{grid-template-columns:1fr;}
  .td-banner{order:-1;height:auto;}
  .td-side ul{display:flex;flex-wrap:wrap;}
  .td-side li{border-top:1px solid var(--td-line);flex:1 1 33%;}
  .td-side button{padding:0 8px 0 24px;font-size:14px;}
  .td-side button::before{left:9px;}
  .td-perks{flex-direction:column;}
  .td-perks li+li{border-left:0;border-top:1px solid var(--td-line);}
  .td-grid{grid-template-columns:1fr 1fr;gap:8px;padding:8px;}
  .td-card{padding:8px;}
  .td-burst{width:44px;height:44px;font-size:11px;}
}

/* ---------- design-review fixes ---------- */
/* home: album title and details sit on a dark plate so they stay readable over any album's colours */
.info-panel{background:rgba(11,11,12,.72);padding:14px 16px 12px;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.info-panel:empty{display:none;}
.info-panel h2{margin-bottom:12px;}
.info-row .k{color:#c9c6ba;}
.stage-caption{text-shadow:0 2px 0 rgba(0,0,0,.75), 0 0 14px rgba(0,0,0,.7);}
/* store: prices, calmer product photos, a bigger sticker */
.td-price{margin:0 0 6px;font:800 19px/1.2 Arial,Helvetica,"Noto Sans JP",sans-serif;color:var(--td-ink);max-width:none;}
.td-price .td-from{font-weight:400;font-size:12px;color:var(--td-soft);}
.td-price b{font-weight:800;}
.td-pic{background:#ecebe6;}
.td-pic img{mix-blend-mode:multiply;}                      /* the photos' white backgrounds take the tile colour, so no more glaring white squares */
:root[data-theme="dark"] .td-pic{background:#c9c8c2;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .td-pic{background:#c9c8c2;}}
.td-pic.td-zoom img{transform:scale(1.55);}
/* big monitors: wider columns and slightly larger reading text */
@media (min-width:1700px){
  .wrap,.nav-row{max-width:1440px;}
  .wiki{max-width:1180px;}
  .wk-article{font-size:17px;}
  .wk-thumb{width:260px;font-size:13.5px;}
  .link-list{max-width:680px;}
  .link-list a .name{font-size:23px;}
  .td{font-size:15px;}
  .td-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
  .td .td-desc{font-size:14px;}
}

/* ---------- things switched on from /mod ---------- */
.site-banner{background:#f4d000;color:#111;font:700 15px/1.4 "Bricolage Grotesque","Noto Sans JP",sans-serif;text-align:center;padding:9px 16px;border-bottom:2px solid #111;overflow-wrap:anywhere;}
.mp-closed-note{display:none;margin:8px 0 0;font-weight:bold;}
.comments-closed .mp-closed-note{display:block;}
.comments-closed #mp-add-comment,.comments-closed #mp-comment-form,.comments-closed [data-add-comment]{display:none !important;}
.mp-c-pin{color:var(--mp-title);text-transform:uppercase;font-size:10px;letter-spacing:.06em;}

/* romaji under Japanese text (English mode only, added by js/romaji.js) */
ruby.rj{ ruby-position:under; -webkit-ruby-position:after; ruby-align:center; }
ruby.rj rt{ font-size:max(.46em, 10px); line-height:1.15; font-weight:400; font-style:normal; letter-spacing:.02em; text-transform:none; opacity:.72; font-family:inherit; user-select:none; }
.rj-in small{ font-size:.78em; opacity:.7; font-weight:400; font-style:normal; white-space:nowrap; }