/* magnet-lips.com — shared shell for subpages */
:root{
  --love:#2EB84B; --grief:#C0503A; --desk:#B5161B;
  --face:#C3C7CB; --hi:#fff; --lo:#868A8E; --bar:#000080;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; background:var(--desk); color:#fff;
  font-family:"VT323",ui-monospace,"Courier New",monospace; font-size:21px; line-height:1.35;
  padding:env(safe-area-inset-top,0px) 0 calc(60px + env(safe-area-inset-bottom,0px));
  -webkit-text-size-adjust:100%;
}
img{max-width:100%; height:auto}
a{color:#fff}

/* menu bar */
.mbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  padding:4px 6px calc(4px + env(safe-area-inset-top,0px));
  background:var(--face); color:#000; border-bottom:2px solid #000;
  font-family:"Silkscreen",monospace; font-size:10px;
}
.mbar a{
  color:#000; text-decoration:none; padding:7px 9px; border:2px solid transparent;
}
.mbar a:hover,.mbar a:focus-visible{border-color:var(--hi) var(--lo) var(--lo) var(--hi); outline:none}
.mbar a[aria-current]{background:var(--bar); color:#fff}
.mbar .home{display:flex; align-items:center; gap:7px; margin-right:6px}
.mbar .home::before{content:""; width:13px; height:13px; background:var(--love); border:2px solid #000}

.wrap{max-width:900px; margin:0 auto; padding:26px 16px 40px}
h1{font-family:"Silkscreen",monospace; font-size:clamp(20px,5vw,30px); line-height:1.35; margin:0 0 6px; letter-spacing:.5px}
h2{font-family:"Silkscreen",monospace; font-size:13px; margin:34px 0 12px; letter-spacing:.5px}
.lede{font-size:22px; margin:0 0 26px; max-width:58ch; color:#FFE3DF}
.rule{border:0; border-top:2px solid rgba(255,255,255,.25); margin:30px 0}

/* windows-style button */
.btn{
  display:inline-block; padding:10px 16px; background:var(--face); color:#000; text-decoration:none;
  border:2px solid; border-color:var(--hi) #000 #000 var(--hi);
  font-family:"Silkscreen",monospace; font-size:10px; cursor:pointer;
}
.btn:active{border-color:#000 var(--hi) var(--hi) #000}
.btn--go{background:var(--love); color:#000}
.btn--sp{background:#1DB954; color:#000}
.btn--yt{background:#FF0000; color:#fff}
.btnrow{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}

/* plain panel */
.panel{background:#7E0F13; border:2px solid #000; padding:16px; margin:0 0 16px}

/* release list */
.rel{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.rel li{
  display:flex; gap:14px; align-items:center; padding:12px 14px;
  background:rgba(0,0,0,.28); border:2px solid rgba(0,0,0,.5);
}
.rel .n{font-family:"Silkscreen",monospace; font-size:11px; color:#FFE600; flex:0 0 auto}
.rel .t{flex:1; min-width:0}
.rel .t b{display:block; font-family:"Silkscreen",monospace; font-size:12px; line-height:1.5}
.rel .t span{color:#FFC9C2; font-size:18px}

footer{max-width:900px; margin:0 auto; padding:0 16px 40px; color:#FFB3AB; font-size:18px}
footer a{color:#fff}