:root{
  --pink:#ff3d9e;
  --baby:#ffb3d9;
  --maroon:#6d1236;
  --acid:#b6ff3d;
  --ink:#050307;
  --white:#fff;
}
/* ── the faces that aren't on the device ─────────────
   comic sans ms and papyrus only exist on windows, so android used to fall
   all the way back to a script face and the whole page looked wrong. comic
   relief is a metrically identical libre replacement (same widths, so nothing
   reflows) and metamorphous stands in for papyrus. both SIL OFL.
   the real fonts are still first in every stack, so windows is unchanged. */
@font-face{
  font-family:'Comic Relief';font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/comic-relief-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Comic Relief';font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/comic-relief-400-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Comic Relief';font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/comic-relief-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Metamorphous';font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/metamorphous-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:#120309 url("../img/leopard.jpg") repeat;
  background-size:512px 256px;
  background-attachment:scroll;
  color:var(--baby);
  font:12px/1.5 Verdana,Geneva,sans-serif;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* ── centre column ─────────────────────────────────── */
.shell{position:relative;z-index:1;
  position:relative;
  width:min(900px,100%);
  margin:0 auto;
  background:var(--ink);
  border-left:3px solid var(--pink);
  border-right:3px solid var(--pink);
  box-shadow:0 0 0 1px #000, 14px 0 46px rgba(0,0,0,.75), -14px 0 46px rgba(0,0,0,.75);
  min-height:100vh;
  padding-bottom:60px;
}
.shell::before{ /* sigil scratchwork */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/sigil.jpg") repeat;opacity:.75;
}
.shell::after{ /* grit */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;opacity:.72;
}
.shell > *{position:relative;z-index:1}
.shell .scan{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(180deg,rgba(255,61,158,.09) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}

/* lace running down both edges */
.lace{position:absolute;top:0;bottom:0;width:22px;z-index:2;pointer-events:none;
  background:url("../img/lace.svg") repeat-y;opacity:.55}
.lace.l{left:-12px}
.lace.r{right:-12px;transform:scaleX(-1)}

/* ── marquee ───────────────────────────────────────── */
.band{
  background:var(--pink);color:#1a0010;border-bottom:3px solid #000;
  overflow:hidden;white-space:nowrap;
  font:11px/1 'Courier New',monospace;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 0;
}
.band span{display:inline-block;padding-left:100%;animation:roll 30s linear infinite}
@keyframes roll{to{transform:translateX(-100%)}}

/* ── header ────────────────────────────────────────── */
header{padding:26px 22px 6px;text-align:center;position:relative}
.logo{
  font-family:'Comic Sans MS','Comic Sans','Comic Relief',cursive;font-weight:700;
  font-size:clamp(26px, calc(11.4vw - 8px), 60px);line-height:.98;
  letter-spacing:0;color:var(--pink);
  margin:0;transform:rotate(-1.8deg);
  text-shadow:4px 4px 0 #000, 9px 9px 0 rgba(255,61,158,.22), 0 0 28px rgba(255,61,158,.6);
}
.tmark{position:relative;display:inline-block}
.bow{position:absolute;left:50%;top:.1em;margin-left:-.633em;width:1.233em;transform:rotate(16deg);pointer-events:none;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.6))}
.logo small{display:block;font:11px/1 'Courier New',monospace;letter-spacing:.5em;color:var(--baby);text-shadow:none;margin-top:10px}
.kao{font-family:'MS Gothic','Malgun Gothic','SimSun','Noto Sans JP','Noto Sans CJK JP','Droid Sans Fallback',sans-serif;letter-spacing:0}
.tagline{font:16px/1.5 'Papyrus','Metamorphous',"Comic Sans MS","Comic Relief",cursive;opacity:.95;margin:14px 0 0;transform:rotate(.7deg);text-align:center;text-shadow:0 2px 0 #000,0 0 12px rgba(0,0,0,.9)}

/* ── nav ───────────────────────────────────────────── */
nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:16px 12px 20px}
.shell > nav{position:relative;z-index:6}
.shell > header{position:relative;z-index:5}
nav a{
  font:bold 14px/1 'Comic Sans MS','Comic Sans','Comic Relief',cursive;letter-spacing:.01em;
  color:#1a0010;background:var(--baby);border:3px solid #000;padding:9px 15px;text-decoration:none;
  box-shadow:4px 4px 0 var(--pink);transition:transform .06s,box-shadow .06s,background .06s;
}
nav a:hover{background:var(--pink);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--pink)}
nav a:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--pink)}

/* ── panels ────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:18px;padding:0 20px 6px;align-items:start}
@media (max-width:790px){.grid{grid-template-columns:1fr}}
.panel{
  position:relative;
  border:2px solid var(--baby);border-radius:14px;
  background:rgba(8,3,9,.94);
  box-shadow:6px 6px 0 rgba(0,0,0,.9), 0 0 0 1px #000, inset 0 0 40px rgba(255,61,158,.06);
  z-index:2;
  padding:7px 13px 12px;
  margin-bottom:18px;
}
.panel h2{
  margin:-7px -13px 8px;padding:6px 12px;
  background:linear-gradient(180deg,var(--pink),#d21f78);
  color:#1a0010;border-radius:12px 12px 0 0;border-bottom:2px solid #000;
  font:bold 12px/1.7 'Courier New',monospace;letter-spacing:.34em;text-transform:uppercase;
}
.panel h2 .dim{font-weight:normal;letter-spacing:0;text-transform:none;font-size:10px;opacity:.7}
.tilt-l{transform:rotate(-.7deg)}
.tilt-r{transform:rotate(.6deg)}

/* ── stats + the peeking head ──────────────────────── */
.statswrap{position:relative;z-index:4;margin-top:196px}
.peek{
  position:absolute;left:10px;bottom:100%;width:min(330px,66%);margin-bottom:0;
  z-index:1;transform:rotate(-.7deg);transform-origin:50% 100%;
}
.peek img.head{position:relative;left:36px;top:0;width:var(--head-w,286px);height:auto}
/* the head nods on the kick. translate, so its own position is untouched */
.head.bob{animation:bobDip 320ms cubic-bezier(.28,0,.36,1)}
@keyframes bobDip{0%{translate:0 0}28%{translate:0 5px}100%{translate:0 0}}
.head{display:block;width:100%;height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 0 16px rgba(255,61,158,.6));}

.stats{list-style:none;margin:0;padding:0}
.stats li{display:flex;gap:8px;align-items:baseline;padding:3px 0;border-bottom:1px dotted rgba(255,179,217,.22)}
.stats .k{flex:0 0 44%;color:var(--pink);font:bold 13px/2 'Comic Sans MS','Comic Sans','Comic Relief',cursive;letter-spacing:.02em}
.stats .v{color:var(--white);font:13px/1.6 "Comic Sans MS","Comic Sans","Comic Relief",cursive}

.bars{margin-top:11px}
.bar{margin:7px 0}
.bar b{display:block;font:10px/1.7 'Courier New',monospace;letter-spacing:.06em;color:var(--baby);text-transform:uppercase;font-weight:normal}
.track{height:12px;background:#000;border:2px solid var(--maroon);overflow:hidden}
.fill{height:100%;background:repeating-linear-gradient(90deg,var(--pink) 0 6px,#000 6px 8px);animation:crawl 3s linear infinite}
@keyframes crawl{to{background-position:16px 0}}

/* ── blurb box she writes in ───────────────────────── */
.blurb{
  font:14px/1.72 "Comic Sans MS","Comic Sans","Comic Relief",cursive;color:var(--white);
  min-height:198px;
  background:repeating-linear-gradient(transparent 0 25px, rgba(255,61,158,.15) 25px 26px), rgba(0,0,0,.5);
  padding:5px 11px 9px;border:1px dashed rgba(255,61,158,.45);border-radius:8px;
}
.caret{display:inline-block;width:8px;height:15px;background:var(--pink);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ── mixtape player ────────────────────────────────── */
.player{padding:2px 2px 0}
.nowline{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font:10px/1.6 'Courier New',monospace;letter-spacing:.11em;text-transform:uppercase;color:var(--baby);margin-bottom:8px}
.nowline span:first-child{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nowline span:last-child{flex:0 0 auto;opacity:.75}
.seek{height:12px;background:#000;border:2px solid var(--maroon);cursor:pointer;overflow:hidden}
.seek:hover{border-color:var(--pink)}
.seekfill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--pink) 0 6px,#000 6px 8px)}
.controls{display:flex;gap:7px;align-items:center;margin:11px 0 13px}
.pbtn{
  font:bold 12px/1 'Comic Sans MS','Comic Sans','Comic Relief',cursive;color:#1a0010;
  background:var(--baby);border:2px solid #000;box-shadow:3px 3px 0 var(--pink);
  padding:7px 10px;cursor:pointer;transition:transform .05s,box-shadow .05s,background .05s;
}
.pbtn:hover{background:var(--pink)}
.pbtn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--pink)}
.pbtn.big{font-size:15px;padding:8px 15px}
.pbtn.small{font-size:10px;padding:6px 8px;margin-left:auto}
.pbtn.on{background:var(--pink);box-shadow:3px 3px 0 #000}
.tracks{list-style:none;margin:0;padding:0;max-height:140px;overflow-y:auto}
.tracks::-webkit-scrollbar{width:8px}
.tracks::-webkit-scrollbar-track{background:rgba(255,61,158,.08)}
.tracks::-webkit-scrollbar-thumb{background:rgba(255,61,158,.45)}
.tracks li{
  display:flex;gap:8px;align-items:baseline;padding:4px 3px;cursor:pointer;
  border-bottom:1px dotted rgba(255,179,217,.18);
  font:11px/1.45 'Comic Sans MS','Comic Sans','Comic Relief',cursive;color:#ffd9ec;
}
.tracks li:hover{background:rgba(255,61,158,.12);color:#fff}
.tracks li.on{background:rgba(255,61,158,.2);color:#fff;border-bottom-color:var(--pink)}
.tracks li i{font-style:normal;color:var(--pink);flex:0 0 12px}
.tracks li .d{margin-left:auto;opacity:.6;font-family:'Courier New',monospace;font-size:9.5px}

::selection{background:#ff3d9e;color:#160009;text-shadow:none}
::-moz-selection{background:#ff3d9e;color:#160009}

/* ── the record player ─────────────────────────────── */
.deck{
  position:relative;display:flex;align-items:stretch;gap:9px;
  width:100%;margin:18px 0 0;padding:13px 11px 12px;
  border-radius:13px;border:2px solid #5c1526;
  background:
    repeating-linear-gradient(92deg,rgba(255,255,255,.022) 0 1px,rgba(0,0,0,0) 1px 4px),
    radial-gradient(125% 95% at 50% 0%,#4a1229,#23060f 62%,#140309 100%);
  box-shadow:0 16px 34px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.10),
             inset 0 -3px 8px rgba(0,0,0,.7), 0 0 0 1px #000;
  opacity:0;transform:rotate(-1.2deg) translateY(10px);
  transition:opacity .7s ease,transform .7s ease;
  font:10px/1 'Courier New',monospace;color:var(--baby);
}
.deck.show{opacity:1;transform:rotate(-1.2deg)}
/* brushed metal top plate */
.deck::before{
  content:"";position:absolute;inset:5px;border-radius:9px;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,0) 1px 3px),
    linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,0) 42%,rgba(0,0,0,.42));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 0 18px rgba(0,0,0,.55);
}
/* four corner screws */
.deck::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 10px 10px,#c9a4b3 0 2.4px,#0a0206 2.5px 3.6px,rgba(0,0,0,0) 3.7px),
    radial-gradient(circle at calc(100% - 10px) 10px,#c9a4b3 0 2.4px,#0a0206 2.5px 3.6px,rgba(0,0,0,0) 3.7px),
    radial-gradient(circle at 10px calc(100% - 10px),#c9a4b3 0 2.4px,#0a0206 2.5px 3.6px,rgba(0,0,0,0) 3.7px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#c9a4b3 0 2.4px,#0a0206 2.5px 3.6px,rgba(0,0,0,0) 3.7px);
}
.deck-main{flex:1 1 auto;min-width:0;position:relative;z-index:1}
.stage{position:relative;width:222px;height:146px;margin:2px auto 8px}
/* metal platter the record sits in */
.platter{
  position:absolute;left:-14px;top:10px;width:116px;height:116px;border-radius:50%;
  background:conic-gradient(from 18deg,#5a5a66,#c9c9d6,#6a6a78,#b4b4c2,#4e4e5a);
  box-shadow:0 8px 18px rgba(0,0,0,.85), inset 0 0 0 2px rgba(0,0,0,.55),
             inset 0 2px 3px rgba(255,255,255,.14);
}
.vinyl{
  position:absolute;inset:5px;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,#150009 0 2px,#25040f 2px 4px);
  box-shadow:inset 0 0 0 2px #000, 0 4px 12px rgba(0,0,0,.7);
  animation:spin 3.6s linear infinite;animation-play-state:paused;
}
.vinyl i{position:absolute;inset:33%;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,#ff8dc4,#e01a70 62%,#8d0c44);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.45), 0 0 14px rgba(255,61,158,.5)}
.vinyl i::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;
  background:#0b0207;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.vinyl::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%,rgba(255,255,255,.16),rgba(255,255,255,0) 44%),
    conic-gradient(from 210deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 72%,rgba(255,255,255,.05))}
.deck.playing .vinyl{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
/* tonearm: pivot, counterweight, and a headshell that lands in the grooves */
.arm{
  position:absolute;right:45px;top:14px;width:5px;height:100px;border-radius:3px;
  background:linear-gradient(#f6e8ee,#b08f9c 58%,#7d5f6c);
  transform-origin:50% 8px;transform:rotate(34deg);
  transition:transform .8s cubic-bezier(.35,0,.4,1);
  box-shadow:0 3px 6px rgba(0,0,0,.8);
}
.arm::before{content:"";position:absolute;left:-8px;top:-9px;width:21px;height:21px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fdf1f6,#8d6d7b 78%);
  box-shadow:0 3px 6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.35)}
.arm::after{content:"";position:absolute;left:-5px;bottom:-8px;width:15px;height:19px;border-radius:2px;
  background:linear-gradient(#fff6fa,#c9a4b3 70%,#8f6f7d);
  box-shadow:0 3px 6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.3)}
.arm .cw{position:absolute;left:-4px;top:-20px;width:13px;height:20px;border-radius:3px;
  background:linear-gradient(#9a9aa4,#4c4c55);box-shadow:0 2px 4px rgba(0,0,0,.8)}
.deck.playing .arm{transform:rotate(56deg)}
/* power led */
.led{position:absolute;left:111px;top:4px;width:6px;height:6px;border-radius:50%;
  background:#4d0f20;box-shadow:inset 0 0 2px #000, 0 0 0 1px rgba(0,0,0,.6);
  transition:background .3s,box-shadow .3s}
.deck.playing .led{background:#ff3d9e;box-shadow:0 0 9px 2px rgba(255,61,158,.85), 0 0 0 1px #000}
/* speed buttons + model plate */
.hw{position:absolute;left:-12px;right:auto;bottom:0;display:flex;align-items:center;gap:4px;
  font:6.5px/1 'Courier New',monospace;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,179,217,.55)}
.hw b{font:6.5px/1 'Courier New',monospace;padding:2px 3px;border-radius:1px;
  border:1px solid rgba(255,179,217,.3);background:rgba(255,255,255,.05);color:rgba(255,179,217,.8)}
.hw b.on{background:var(--pink);border-color:#000;color:#1a0010;box-shadow:0 0 7px rgba(255,61,158,.6)}
.hw span{margin-left:7px;opacity:.8;letter-spacing:.16em}
/* two segmented led meters, in the space the platter left behind.
   13 blocks of 8px, so the level jumps a block at a time rather than sliding */
.viz{position:absolute;right:-52px;bottom:0;height:136px;display:flex;align-items:flex-end;gap:7px}
.viz b{
  position:relative;display:block;width:18px;height:100%;overflow:hidden;
  border:1px solid #000;border-radius:2px;
  background:repeating-linear-gradient(to top, rgba(255,61,158,.13) 0 5px, rgba(0,0,0,.75) 5px 8px);
  background-position:bottom;
  box-shadow:inset 0 0 6px rgba(0,0,0,.6), 0 0 6px rgba(255,61,158,.15);
}
.viz b i{
  position:absolute;left:0;right:0;bottom:0;height:8%;display:block;
  background:repeating-linear-gradient(to top, var(--pink) 0 5px, rgba(0,0,0,.9) 5px 8px);
  background-position:bottom;
  box-shadow:0 0 10px rgba(255,61,158,.65);
  transition:height .05s linear;
}
.viz b:last-child i{
  background:repeating-linear-gradient(to top, #ff8dc4 0 5px, rgba(0,0,0,.9) 5px 8px);
  background-position:bottom;
}

/* title strip, then the scrub bar in the gap under it */
.deck-title{
  margin:0 2px 8px;padding:5px 7px;background:#07000a;border:1px solid #47111f;border-radius:3px;
  font:10px/1.3 'Courier New',monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 8px rgba(255,61,158,.6);
  box-shadow:inset 0 0 10px rgba(255,61,158,.14);
}
.seek{height:12px;margin:0 1px 9px;background:#000;border:2px solid var(--maroon);
  cursor:pointer;overflow:hidden;touch-action:none}
.seek:hover{border-color:var(--pink)}
.seekfill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--pink) 0 6px,#000 6px 8px)}
.time{margin-left:auto;font:9px/1 'Courier New',monospace;letter-spacing:.06em;color:rgba(255,179,217,.65)}
.deck-row{display:flex;align-items:center;gap:6px}
/* volume: a fader up the right edge */
.vol{flex:0 0 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  position:relative;z-index:1;
  font:9px/1 'Courier New',monospace;letter-spacing:.1em;color:rgba(255,179,217,.7);
  border-left:1px solid rgba(255,61,158,.22);padding-left:7px}
.vol-rail{width:16px;height:104px;display:flex;align-items:center;justify-content:center}
.vol input[type=range]{
  -webkit-appearance:none;appearance:none;width:104px;height:14px;transform:rotate(-90deg);
  background:#0a0206;border:1px solid #47111f;border-radius:0;outline:none;cursor:pointer;
}
.vol input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:11px;background:var(--pink);
  border:1px solid #000;border-radius:2px;box-shadow:0 0 8px rgba(255,61,158,.9);
}
.vol input[type=range]::-moz-range-thumb{width:15px;height:11px;background:#ff3d9e;border:1px solid #000;border-radius:2px}
.dbtn{
  font:bold 10px/1 'Comic Sans MS','Comic Sans','Comic Relief',cursive;color:#1a0010;background:var(--baby);
  border:2px solid #000;box-shadow:2px 2px 0 var(--pink);padding:6px 7px;cursor:pointer;
  transition:transform .05s,box-shadow .05s,background .05s;
}
.dbtn:hover{background:var(--pink)}
.dbtn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--pink)}
.dbtn.play{font-size:12px;padding:7px 10px}

/* ── detail rows / friends / comments ──────────────── */
.rows{list-style:none;margin:0;padding:0;font-size:12px}
.rows li{display:flex;gap:10px;padding:4px 0;border-bottom:1px dotted rgba(255,179,217,.18)}
.rows .k{flex:0 0 38%;color:var(--pink);text-transform:uppercase;letter-spacing:.06em;font-size:10px;padding-top:2px}
.rows .v{color:var(--white)}
.rows .v em{font-style:normal;opacity:.65;color:var(--baby)}
.rows .v.blank{flex:1;height:15px;border-bottom:2px dotted rgba(255,179,217,.3)}

.friends{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.friends figure{margin:0;position:relative;background:#000;border:2px solid var(--maroon);border-radius:4px;overflow:hidden}
.friends img{display:block;width:100%;height:auto;image-rendering:pixelated}
.friends figcaption{
  font:10px/1.2 'Comic Sans MS','Comic Sans','Comic Relief',cursive;letter-spacing:.02em;text-align:center;
  color:#ffd9ec;background:#0a0208;border-top:1px solid var(--maroon);padding:3px 1px 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.comments{display:grid;gap:10px}
.comment{border-left:3px solid var(--maroon);padding:2px 0 2px 10px}
.comment .who{font:bold 11px/1.5 'Courier New',monospace;color:var(--pink);letter-spacing:.04em}
.comment .when{color:rgba(255,179,217,.45);font-size:10px;margin-left:6px;letter-spacing:.08em}
.comment p{margin:3px 0 0;font:12px/1.6 "Comic Sans MS","Comic Sans","Comic Relief",cursive;color:#f3d7e6}

/* ── stickers + decorations ────────────────────────── */
.sticker{
  position:absolute;z-index:5;
  font:11px/1.5 Impact,'Arial Black',sans-serif;letter-spacing:.03em;text-transform:uppercase;
  background:#000;color:var(--white);border:2px solid var(--white);
  padding:6px 10px;transform:rotate(-8deg);
  box-shadow:3px 3px 0 rgba(0,0,0,.8);
}
.sticker.g{color:var(--acid);border-color:var(--acid)}
.sticker.p{color:#1a0010;background:var(--baby);border-color:#000}
.deco{position:absolute;z-index:4;pointer-events:none;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.7))}
.deco.s1{width:52px;left:30px;top:24px;transform:rotate(-12deg)}
.deco.s2{width:40px;right:36px;top:42px;transform:rotate(14deg)}

/* ── footer ────────────────────────────────────────── */
footer{
  margin:0 20px;padding:28px 6px 38px;text-align:center;
  border-top:2px dotted var(--maroon);
  font:11px/1.95 'Courier New',monospace;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,179,217,.55);
}
.counter{
  display:inline-block;margin:0 0 20px;padding:8px 15px;
  background:rgba(255,61,158,.05);border:1px solid rgba(255,61,158,.62);
  color:var(--pink);font:13px/1 'Courier New',monospace;letter-spacing:.44em;text-indent:.44em;
  text-shadow:0 0 10px rgba(255,61,158,.55);
  box-shadow:0 0 22px rgba(255,61,158,.16), inset 0 0 22px rgba(255,61,158,.07);
}

.fline{margin:0 0 7px}
.fline:last-child{margin-bottom:0;opacity:.72}
.fline a{color:#ff7bbd;text-decoration:none;border-bottom:1px solid rgba(255,61,158,.8)}
.fline a:hover{color:#fff;border-bottom-color:#fff}

/* ── boot splash ───────────────────────────────────── */
.boot{position:fixed;inset:0;z-index:99;background:#000;display:grid;place-items:center;transition:opacity .55s ease;text-align:center;padding:24px}
.boot.gone{opacity:0;pointer-events:none}
.bootbtn{
  cursor:pointer;font:bold 15px/1.9 'Comic Sans MS','Comic Sans','Comic Relief',cursive;color:#1a0010;text-transform:lowercase;
  background:#ffb3d9;border:0;border-radius:0;padding:22px 26px;max-width:640px;
  box-shadow:inset -5px -5px 0 #d21f78, inset 5px 5px 0 #ffe6f3, 7px 7px 0 #000, 0 0 0 3px var(--pink);
  transition:transform .05s,box-shadow .05s,background .05s;
}
.bootbtn:hover{background:#fff}
.bootbtn:active{transform:translate(5px,5px);box-shadow:inset -5px -5px 0 #d21f78, inset 5px 5px 0 #ffe6f3, 2px 2px 0 #000, 0 0 0 3px var(--pink)}
.boot .hint{margin-top:26px;font:15px/1.6 'Courier New',monospace;letter-spacing:.18em;text-transform:lowercase;color:rgba(255,179,217,.45)}
.boot .hint b{color:var(--pink);font-weight:normal;animation:blink 1.1s steps(1) infinite}

/* ── slam-in ───────────────────────────────────────── */
.slam{opacity:0}
.slam.flat{opacity:1;transform:none;animation:none}
.slam.go{animation:slamIn .36s cubic-bezier(.65,0,.98,.45) forwards;transform-origin:50% 85%}
@keyframes slamIn{
  0%{opacity:0;transform:translate(var(--fx,0),var(--fy,-60vh)) rotate(var(--fr,-9deg))}
  30%{opacity:1}
  52%{transform:translate(0,0) rotate(0)}
  56%{transform:translate(2px,-1px) rotate(.14deg)}
  60%{transform:translate(-2px,1px) rotate(-.13deg)}
  64%{transform:translate(1.4px,0) rotate(.09deg)}
  68%{transform:translate(-1px,0) rotate(-.06deg)}
  73%{transform:translate(.6px,0) rotate(.03deg)}
  79%{transform:translate(0,0)}
  100%{opacity:1;transform:none}
}
/* contents of a block, once it has landed. individual translate/scale so an
   element's own transform (stickers are rotated) is never overwritten */
.kid{opacity:0}
.kid.go{animation:popIn .22s cubic-bezier(.62,0,.94,.42) forwards}
@keyframes popIn{
  0%{opacity:0;translate:0 16px;scale:.94}
  75%{opacity:1;translate:0 0;scale:1}
  100%{opacity:1;translate:0 0;scale:1}
}
#fx{position:absolute;top:0;left:0;z-index:97;pointer-events:none}
html.noscroll,body.noscroll{overflow:hidden!important}
.shell.shake{animation:shake .26s steps(2) 1}
@keyframes shake{0%{transform:translate(0,0)}25%{transform:translate(-5px,3px)}50%{transform:translate(4px,-3px)}75%{transform:translate(-2px,1px)}100%{transform:none}}

@media (prefers-reduced-motion:reduce){
  .band span,.fill,.bootbtn,.caret{animation:none}
  .band span{padding-left:0}
  .slam{opacity:1}.slam.go{animation:none}
}

/* ── falling sparkle in the side gutters ───────────── */
#snow{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#snow i{
  position:absolute;top:-90px;width:var(--sz);height:var(--sz);
  animation:fall var(--dur) linear var(--del) infinite;
  will-change:transform;
}
#snow i b{
  display:block;width:100%;height:100%;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  animation:sway var(--swaydur) ease-in-out var(--swaydel,0s) infinite alternate;
  will-change:transform;
}
#snow i.tw b{animation:sway var(--swaydur) ease-in-out var(--swaydel,0s) infinite alternate,
                        twinkle 1.6s ease-in-out infinite}
@keyframes fall{from{transform:translate3d(0,-12vh,0)}to{transform:translate3d(0,118vh,0)}}
@keyframes sway{
  from{transform:translateX(calc(var(--sway) * -1)) rotate(calc(var(--spin) * -0.5)) scale(.92)}
  to  {transform:translateX(var(--sway)) rotate(calc(var(--spin) * 0.5)) scale(1.06)}
}
@keyframes twinkle{0%,100%{filter:brightness(1)}50%{filter:brightness(1.9) saturate(1.3)}}

/* ── interests globe ───────────────────────────────── */
.ihwrap{display:flex;gap:16px;align-items:stretch;padding:10px 14px 16px}
.ihint{
  flex:0 0 34%;border:1px solid rgba(255,61,158,.4);border-radius:20px;
  padding:15px 15px 17px;background:rgba(255,61,158,.06);
  min-height:340px;max-height:340px;overflow-y:auto;overscroll-behavior:contain;
}
.ihint::-webkit-scrollbar{width:9px}
.ihint::-webkit-scrollbar-track{background:rgba(255,61,158,.09);border-radius:5px}
.ihint::-webkit-scrollbar-thumb{background:rgba(255,61,158,.5);border-radius:5px;border:2px solid transparent;background-clip:padding-box}
.ihint::-webkit-scrollbar-thumb:hover{background:rgba(255,61,158,.8)}
.ihint h3{margin:0 0 13px;font:bold 15px/1.35 'Comic Sans MS','Comic Sans','Comic Relief',cursive;color:#fff}
.ihint p{margin:0;font:12.5px/1.75 'Comic Sans MS','Comic Sans','Comic Relief',cursive;color:#ffc9e3}
.globe{
  position:relative;flex:1 1 auto;min-height:340px;cursor:grab;
  /* the orb owns every gesture that starts on it: pan-y let chrome steal the
     drag halfway through, cancel the pointer and leave the sphere stuck, and
     it scrolled the page while the orb turned. vertical drags are handled in
     js instead (manual scrollBy), so nothing arbitrates between the two. */
  touch-action:none;overflow:hidden;user-select:none;-webkit-user-select:none;--tile:76px;
}
.globe.grabbing{cursor:grabbing}
.globe a{position:absolute;left:50%;top:50%;display:block;width:0;height:0}
.globe a img{
  -webkit-user-drag:none;user-select:none;pointer-events:auto;
  position:absolute;left:calc(var(--tile) / -2);top:calc(var(--tile) / -2);
  width:var(--tile);height:var(--tile);display:block;
  border:1px solid rgba(255,61,158,.55);box-shadow:0 4px 12px rgba(0,0,0,.7);
  image-rendering:pixelated;background:#120309;
}
.globe a:hover img{border-color:#fff;box-shadow:0 0 0 2px var(--pink),0 6px 18px rgba(0,0,0,.8)}
.globe a.sel img{border-color:#fff;box-shadow:0 0 0 2px var(--pink),0 6px 18px rgba(0,0,0,.8)}

/* ── wide sections: one class instead of an inline margin ─── */
.wide{margin:0 20px 18px}
.wide.r1{transform:rotate(-.35deg)}
.wide.r2{transform:rotate(.4deg)}
.wide.r3{transform:rotate(-.3deg)}

/* horizontal volume, only shown where the vertical fader is too fiddly */
.deck-vol{display:none;align-items:center;gap:8px;margin:9px 2px 0;
  font:9px/1 'Courier New',monospace;letter-spacing:.12em;color:rgba(255,179,217,.72)}
.deck-vol span{flex:0 0 auto;text-transform:uppercase}
.deck-vol input{flex:1 1 auto;margin:0;-webkit-appearance:none;appearance:none;
  height:16px;background:#0a0206;border:1px solid #47111f;border-radius:0;outline:none;cursor:pointer}
.deck-vol input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;
  background:var(--pink);border:1px solid #000;box-shadow:0 0 8px rgba(255,61,158,.9)}
.deck-vol input::-moz-range-thumb{width:16px;height:16px;background:#ff3d9e;border:1px solid #000;border-radius:0}

/* ── phone / tablet ──────────────────────────────────
   same 1998 skeleton, it just stops being 900px wide in your hand */
@media (max-width:820px){
  .lace{display:none}
  .shell{
    border-left-width:2px;border-right-width:2px;padding-bottom:34px;
    box-shadow:0 0 0 1px #000, 0 0 30px rgba(0,0,0,.75);
  }
  /* turbulence + overlay blend over a 3000px column is the most expensive
     thing on the page to scroll on a phone, and the leopard already carries it */
  .shell::after{display:none}
  .scan{mix-blend-mode:normal;opacity:.5}

  header{padding:20px 14px 4px}
  .deco.s1{width:36px;left:2px;top:30px}
  .deco.s2{width:28px;right:2px;top:52px}
  .logo small{font-size:9px;letter-spacing:.4em;margin-top:7px}
  .tagline{font-size:13px;margin-top:11px}
  .band{font-size:10px;letter-spacing:.14em;padding:5px 0}

  nav{gap:7px;padding:13px 10px 17px}
  nav a{font-size:13px;padding:11px 13px}

  .grid{grid-template-columns:1fr;padding:0 12px 4px;gap:12px}
  .panel{padding:6px 10px 10px;border-radius:12px;
    box-shadow:4px 4px 0 rgba(0,0,0,.9), 0 0 0 1px #000}
  .panel h2{margin:-6px -10px 8px;padding:6px 10px;font-size:11px;letter-spacing:.2em}
  .wide{margin:0 12px 14px}

  /* the head peeps over the panel, it doesn't take over the screen */
  /* her head sits dead centre over the panel, big, ears riding up behind the
     nav buttons (the nav paints over it). 1.192 is the aspect of head.png;
     0.967 is that aspect minus the dark ear-tip padding, which reads as
     background, so the visible tips land ~39px above the nav bottom at any
     width and the chin still meets the panel edge. */
  .statswrap{--head-w:clamp(190px,60vw,264px);margin-top:calc(var(--head-w) * 0.967 - 39px)}
  .peek{width:100%;left:0}
  .peek img.head{left:auto;display:block;margin:0 auto}

  .stats .k{flex:0 0 37%;font-size:11.5px;line-height:2.15;letter-spacing:0}
  .stats .v{font-size:12.5px}
  .blurb{min-height:0;font-size:13px;line-height:1.66;padding:6px 9px 8px}

  /* deck: horizontal volume, and everything a touch wider */
  .vol{display:none}
  .deck{padding:11px 10px 10px;margin-top:14px}
  .deck-vol{display:flex}

  /* orb stacks above its caption box so both get the full width */
  .ihwrap{flex-direction:column;padding:6px 0 10px;gap:12px}
  .globe{order:1;width:100%;min-height:0;height:min(72vw,306px)}
  .ihint{order:2;flex:0 0 auto;max-height:none;min-height:118px;border-radius:14px;padding:13px}
  .ihint h3{font-size:14px;margin-bottom:9px}
  .ihint p{font-size:12px;line-height:1.7}

  .friends{grid-template-columns:repeat(4,1fr);gap:6px}
  .friends figcaption{font-size:9.5px}

  footer{max-width:344px;margin:0 auto;padding:22px 2px 30px;letter-spacing:.09em;font-size:10.5px}
  .counter{font-size:12px;letter-spacing:.3em;text-indent:.3em}
  .fline{letter-spacing:.06em}
}

@media (max-width:400px){
  .stage{width:192px;height:130px}
  .platter{width:100px;height:100px;left:-12px;top:10px}
  .arm{right:38px;top:12px;height:90px}
  .led{left:96px;top:2px}
  .hw{font-size:6px;letter-spacing:.08em}
  .viz{right:-42px;height:112px;gap:5px}
  .viz b{width:15px}
}

/* ── fingers ───────────────────────────────────────── */
@media (hover:none){
  nav a{display:inline-flex;align-items:center;min-height:44px}
  nav a:hover{background:var(--baby);transform:none;box-shadow:4px 4px 0 var(--pink)}
  nav a:active{background:var(--pink);transform:translate(3px,3px);box-shadow:1px 1px 0 var(--pink)}
  .dbtn{min-width:48px;min-height:42px;font-size:12px}
  .dbtn:hover{background:var(--baby)}
  .dbtn:active,.pbtn:active,.bootbtn:active{transform:translate(2px,2px)}
  .seek{height:20px}
  .seek:hover{border-color:var(--maroon)}
  .deck-vol input{height:14px}
  .deck-vol input::-webkit-slider-thumb{width:10px;height:20px;margin-top:-1px}
  .deck-vol input::-moz-range-thumb{width:10px;height:20px}
  .globe,.globe.grabbing{cursor:default}
}

/* ── the stubs: stuff / toys / guestbook ───────────── */
.stub{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 14px}
.stub .box{
  width:100%;max-width:460px;padding:30px 24px;text-align:center;
  border:3px dashed var(--pink);background:rgba(5,3,7,.95);box-shadow:8px 8px 0 #000;
}
.stub h1{
  font:34px/.95 Impact,'Arial Black',sans-serif;color:var(--pink);margin:0 0 10px;
  letter-spacing:-1px;transform:rotate(-1.5deg);text-shadow:3px 3px 0 #000;
}
.stub p{margin:14px 0 0;font-size:14px;line-height:1.7}
.stub a{color:var(--acid);text-decoration:none;border-bottom:2px solid var(--acid)}
.stub a:hover{color:#fff;border-bottom-color:#fff}
.stub .kao{font-family:'MS Gothic','Malgun Gothic','SimSun','Noto Sans JP','Noto Sans CJK JP','Droid Sans Fallback',sans-serif;font-size:20px;color:#fff;margin-top:16px}
@media (max-width:520px){
  .stub .box{padding:24px 16px;box-shadow:5px 5px 0 #000}
  .stub h1{font-size:26px}
  .stub p{font-size:13px}
}

.stub .back{margin-top:22px}