/* ===== JOERI SLAM — cracktro HQ ===== */
:root {
  --bg: #05010d;
  --ink: #e8e6ff;
  --dim: #8c86b8;
  --pink: #ff2bd6;
  --cyan: #20f0ff;
  --yellow: #ffe14d;
  --green: #39ff14;
  --violet: #8a5cff;
  --c64-bg: #3e31a2;
  --c64-fg: #7c70da;
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --term: "VT323", ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
html, body { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--term);
  font-size: 22px;
  line-height: 1.25;
  -webkit-font-smoothing: none;
}
a { color: var(--cyan); }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--pink); color: #000; }

/* achtergrond-sterren + CRT-scanlines over alles heen */
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; image-rendering: pixelated; }
.crt {
  position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .55) 100%);
  mix-blend-mode: multiply;
}

/* ===== C64-laadscherm ===== */
.boot { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--c64-fg); transition: opacity .4s; }
.boot-border { position: absolute; inset: 0; }
.boot-screen {
  position: relative; width: min(92vw, 820px); aspect-ratio: 4 / 3; max-height: 82vh;
  background: var(--c64-bg); color: var(--c64-fg); padding: clamp(.8rem, 3vw, 2rem);
  font-family: var(--pixel); font-size: clamp(8px, 1.9vw, 15px); line-height: 1.7;
  display: flex; flex-direction: column; overflow: hidden;
}
.boot-screen pre { font: inherit; white-space: pre-wrap; flex: 1; }
.boot-screen .cursor { background: var(--c64-fg); color: var(--c64-bg); animation: blink 1s steps(1) infinite; }
.boot-actions { display: flex; flex-direction: column; align-items: center; gap: .9rem; padding-bottom: .5rem; }
.boot-start { font-family: var(--pixel); font-size: clamp(9px, 2vw, 15px); background: var(--c64-fg); color: var(--c64-bg); padding: .9em 1.2em; animation: blink 1.1s steps(1) infinite; }
.boot-silent { font-family: var(--pixel); font-size: clamp(7px, 1.4vw, 10px); color: var(--c64-fg); text-decoration: underline; }
.boot.off { animation: crt-off .55s ease-in forwards; }
@keyframes crt-off {
  0% { transform: scale(1, 1); filter: brightness(1); }
  55% { transform: scale(1, .006); filter: brightness(3); }
  100% { transform: scale(0, .006); filter: brightness(6); opacity: 0; }
}
@keyframes blink { 50% { opacity: 0; } }
.blink { animation: blink 1s steps(1) infinite; }

/* ===== Menubalk ===== */
.topbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(.8rem, 3vw, 2rem); background: rgba(5, 1, 13, .82); backdrop-filter: blur(6px);
  border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--pink), var(--cyan), var(--yellow), var(--pink)) 1;
}
.tb-logo { font-family: var(--pixel); font-size: 14px; color: var(--yellow); text-decoration: none; text-shadow: 2px 2px 0 var(--pink); }
.tb-logo span { color: var(--cyan); }
.tb-nav { display: flex; gap: clamp(.6rem, 2vw, 1.6rem); margin: 0 auto; }
.tb-nav a { font-family: var(--pixel); font-size: 10px; color: var(--ink); text-decoration: none; }
.tb-nav a:hover { color: var(--yellow); text-shadow: 0 0 8px var(--yellow); }
.tb-music { font-family: var(--pixel); font-size: 10px; border: 2px solid var(--pink); padding: .45rem .7rem; color: var(--pink); }
.tb-music[aria-pressed="true"] { background: var(--pink); color: #000; box-shadow: 0 0 14px var(--pink); }

/* ===== Hero ===== */
.hero { position: relative; display: flex; flex-direction: column; align-items: center; }
#heroFx { width: 100%; height: clamp(300px, 64vh, 660px); display: block; }
.hero-sub { font-family: var(--pixel); font-size: clamp(8px, 1.6vw, 13px); color: var(--yellow); text-align: center; padding: 0 1rem; letter-spacing: .08em; }
.hero-sub b { color: var(--cyan); }
.vu { width: min(900px, 92vw); height: 70px; margin: 1.2rem 0 .5rem; image-rendering: pixelated; }

/* ===== Secties ===== */
.section { position: relative; padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem); max-width: 1280px; margin: 0 auto; }
.sec-title {
  font-family: var(--pixel); font-weight: 400; text-align: center; font-size: clamp(14px, 3.4vw, 30px); line-height: 1.4;
  background: linear-gradient(180deg, #fff 0%, var(--cyan) 45%, var(--violet) 55%, var(--pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 12px rgba(255, 43, 214, .5));
}
.sec-title span { color: var(--pink); -webkit-text-fill-color: var(--pink); }
.sec-sub { text-align: center; color: var(--dim); margin: .8rem auto 2.4rem; max-width: 46ch; }
.loading { text-align: center; font-family: var(--pixel); font-size: 12px; color: var(--green); grid-column: 1 / -1; }
.dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ===== Releases ===== */
.releases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 1.4rem; }
.rel {
  --h: 300;
  position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 1.1rem; align-items: start;
  padding: 1.2rem; color: var(--ink); text-decoration: none;
  background: linear-gradient(160deg, hsla(var(--h), 90%, 18%, .55), rgba(8, 4, 20, .85) 55%);
  border: 2px solid hsl(var(--h), 95%, 60%);
  box-shadow: 6px 6px 0 #000, 0 0 0 1px #000 inset, 0 0 24px hsla(var(--h), 95%, 55%, .25);
  transition: transform .15s steps(3), box-shadow .15s;
}
.rel:hover, .rel:focus-visible { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 #000, 0 0 36px hsla(var(--h), 95%, 60%, .6); outline: none; }
.rel:hover .rel-name { animation: glitch .35s steps(2) 2; }
.rel-num { position: absolute; top: -.75rem; right: .9rem; font-family: var(--pixel); font-size: 10px; background: hsl(var(--h), 95%, 60%); color: #000; padding: .3rem .5rem; }
.rel-disk { position: relative; }
.rel-disk img { width: 120px; height: 120px; display: block; image-rendering: pixelated; filter: hue-rotate(calc(var(--h) * 1deg - 300deg)) drop-shadow(0 0 10px hsla(var(--h), 95%, 60%, .5)); transition: transform .4s; }
.rel:hover .rel-disk img { transform: rotate(-12deg) scale(1.08); }
.rel-body { min-width: 0; }
.rel-name { font-family: var(--pixel); font-size: 10px; line-height: 1.6; color: hsl(var(--h), 100%, 72%); overflow-wrap: anywhere; }
.rel-title { font-family: var(--pixel); font-size: 13px; line-height: 1.5; margin: .5rem 0; color: #fff; text-shadow: 2px 2px 0 hsl(var(--h), 90%, 35%); overflow-wrap: anywhere; }
.rel p { color: #cfcaf0; font-size: 20px; }
.rel dl { display: grid; grid-template-columns: auto 1fr; gap: 0 .7rem; margin-top: .7rem; font-size: 19px; }
.rel dt { color: var(--dim); }
.rel dd { color: var(--yellow); overflow-wrap: anywhere; }
.led { display: inline-block; width: .65em; height: .65em; margin-right: .35em; background: #555; box-shadow: 0 0 0 2px #000; }
.led.on { background: var(--green); box-shadow: 0 0 8px var(--green), 0 0 0 2px #000; animation: blink 2s steps(1) infinite; }
.led.off { background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b, 0 0 0 2px #000; }
.rel-go { display: inline-block; margin-top: .9rem; font-family: var(--pixel); font-size: 10px; padding: .55rem .8rem; background: hsl(var(--h), 95%, 60%); color: #000; }
@keyframes glitch {
  0% { transform: translate(0); text-shadow: 2px 0 var(--cyan), -2px 0 var(--pink); }
  50% { transform: translate(-2px, 1px); text-shadow: -3px 0 var(--cyan), 3px 0 var(--pink); }
  100% { transform: translate(1px, -1px); text-shadow: 2px 0 var(--yellow), -2px 0 var(--cyan); }
}
@media (max-width: 480px) {
  .rel { grid-template-columns: 76px 1fr; gap: .8rem; padding: 1rem; }
  .rel-disk img { width: 76px; height: 76px; }
  .rel-title { font-size: 12px; }
}

/* ===== Tracker ===== */
.tracker {
  border: 3px solid #a9a3c9; background: #1b1830; padding: 10px;
  box-shadow: inset -3px -3px 0 #4a4570, inset 3px 3px 0 #e2deff, 10px 10px 0 #000;
  font-family: var(--term);
}
.tk-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: stretch; }
.tk-lcd { flex: 1 1 420px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 4px 14px; background: #000; color: var(--green); padding: 8px 12px; border: 2px inset #4a4570; }
.tk-lcd span { display: block; color: #2c8f22; font-size: 15px; }
.tk-lcd b { font-weight: 400; font-size: 21px; text-shadow: 0 0 6px rgba(57, 255, 20, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.tk-ctrl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tk-ctrl button { width: 48px; height: 44px; font-size: 20px; background: #a9a3c9; color: #000; box-shadow: inset -3px -3px 0 #4a4570, inset 3px 3px 0 #fff; }
.tk-ctrl button:active { box-shadow: inset 3px 3px 0 #4a4570, inset -3px -3px 0 #fff; }
.tk-ctrl button.play { width: 64px; background: var(--yellow); }
.tk-vol { display: flex; align-items: center; gap: 6px; color: #c8c3ea; font-size: 18px; margin-left: 4px; }
.tk-vol input { accent-color: var(--pink); width: 110px; }
.tk-songs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.tk-songs button { flex: 1 1 180px; text-align: left; padding: 6px 10px; background: #0d0b1c; color: #c8c3ea; border: 2px solid #4a4570; font-size: 19px; }
.tk-songs button.active { border-color: var(--yellow); color: var(--yellow); background: #2a2110; }
.tk-songs small { color: var(--dim); margin-left: .4em; }
.tk-scopes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.scope { position: relative; background: #000; border: 2px inset #4a4570; height: 74px; padding: 0; }
.scope canvas { width: 100%; height: 100%; display: block; }
.scope span { position: absolute; left: 6px; top: 2px; font-size: 16px; color: var(--cyan); }
.scope.muted { opacity: .35; }
.scope.muted span::after { content: " (MUTE)"; color: #ff5b5b; }
.tk-hint { color: var(--dim); font-size: 17px; margin: 4px 2px 10px; }
.tk-main { display: grid; grid-template-columns: 1fr 300px; gap: 10px; }
.tk-pattern {
  position: relative; height: 360px; overflow: hidden; background: #000; border: 2px inset #4a4570;
  font-size: 20px; line-height: 20px; color: #6f6a99;
}
.tk-pattern::before { content: ""; position: absolute; left: 0; right: 0; top: 170px; height: 20px; background: rgba(255, 225, 77, .16); border-top: 1px solid var(--yellow); border-bottom: 1px solid var(--yellow); pointer-events: none; z-index: 1; }
.tk-rows { position: absolute; left: 0; right: 0; top: 170px; will-change: transform; }
.tk-r { display: grid; grid-template-columns: 34px repeat(4, 1fr); gap: 0 8px; padding: 0 8px; white-space: pre; }
.tk-r .n { color: #4a4570; }
.tk-r.beat .n { color: var(--pink); }
.tk-r .c.on { color: #d8d4ff; }
.tk-r.cur .c.on { color: #fff; text-shadow: 0 0 6px var(--yellow); }
.tk-ball { background: #000; border: 2px inset #4a4570; height: 360px; }
.tk-ball canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 860px) {
  .tk-main { grid-template-columns: 1fr; }
  .tk-ball { height: 220px; }
  .tk-pattern { font-size: 15px; }
  .tk-r { grid-template-columns: 22px repeat(4, 1fr); gap: 0 4px; padding: 0 4px; }
}
@media (max-width: 520px) {
  .tk-scopes { grid-template-columns: repeat(2, 1fr); }
  .tk-pattern { font-size: 12px; }
}

/* ===== NFO ===== */
.nfo-sec { overflow: hidden; }
#plasma { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .32; image-rendering: pixelated; z-index: -1; filter: saturate(1.4); -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
.nfo-wrap { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 380px); gap: 2rem; justify-content: center; align-items: center; margin-top: 2.4rem; }
.nfo {
  background: rgba(0, 0, 0, .8); padding: 1.2rem 1.4rem; border: 6px double var(--violet); outline: 2px solid #000;
  box-shadow: 0 0 30px rgba(138, 92, 255, .35), 8px 8px 0 #000; max-width: 100%; min-width: 0;
}
#nfoBanner { display: block; width: 100%; max-width: 560px; margin: 0 auto 1rem; image-rendering: pixelated; }
.nfo pre { font-family: var(--term); font-size: clamp(13px, 3.4vw, 21px); line-height: 1.15; color: #c9c4ff; white-space: pre-wrap; overflow-wrap: anywhere; }
.nfo .k { color: var(--yellow); }
.nfo .sep { display: block; border-top: 2px dashed var(--violet); margin: .7em 0; }
.mascot { margin: 0; text-align: center; }
.mascot img { width: 100%; height: auto; display: block; border: 3px solid var(--cyan); box-shadow: 8px 8px 0 #000, 0 0 30px rgba(32, 240, 255, .35); image-rendering: pixelated; }
.mascot figcaption { margin-top: .6rem; color: var(--green); font-size: 20px; }
@media (max-width: 960px) { .nfo-wrap { grid-template-columns: 1fr; } .mascot { max-width: 380px; margin: 0 auto; } }

/* ===== Greetz: Star Wars-crawl boven de synthwave-stad ===== */
.greetz { position: relative; height: 100vh; min-height: 560px; overflow: hidden; perspective: 340px; }
.greetz-sky { position: absolute; inset: 0; background: url(/img/city.webp) center bottom / cover no-repeat; }
.greetz-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(5, 1, 13, .1) 40%, rgba(5, 1, 13, .2) 80%, var(--bg) 100%); }
.crawl-wrap { position: absolute; inset: 0 0 18%; display: flex; justify-content: center; transform-origin: 50% 100%; transform: rotateX(28deg); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%); mask-image: linear-gradient(180deg, transparent 0%, #000 35%); }
.crawl { position: absolute; top: 100%; width: min(640px, 90vw); text-align: center; font-family: var(--pixel); font-size: clamp(11px, 2.1vw, 18px); line-height: 2.1; color: var(--yellow); text-shadow: 0 0 10px rgba(255, 225, 77, .6), 3px 3px 0 #000; animation: crawl 42s linear infinite; }
.crawl p { margin-bottom: 1.6em; }
.crawl b { color: var(--cyan); font-weight: 400; }
.crawl-title { font-size: 2.2em; color: var(--pink); }
.crawl-title.small { font-size: 1.3em; }
@keyframes crawl { from { transform: translateY(0); } to { transform: translateY(-260%); } }

/* ===== Footer ===== */
.footer { text-align: center; padding: 3rem 1rem 4rem; border-top: 2px solid #1c1440; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 1.6rem; }
.badge { width: 88px; height: 31px; display: grid; place-items: center; font-family: var(--pixel); font-size: 6px; line-height: 1.5; text-align: center; border: 1px solid #fff; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .5), inset 2px 2px 0 rgba(255, 255, 255, .4); }
.b1 { background: #000080; color: #ffff00; } .b2 { background: #c0c0c0; color: #000; } .b3 { background: var(--pink); color: #000; }
.b4 { background: #a80030; color: #fff; } .b5 { background: #000; color: var(--green); } .b6 { background: #0a7f2e; color: #fff; }
.foot-copy { font-family: var(--pixel); font-size: 9px; color: var(--dim); line-height: 2; }
.foot-hint { margin-top: .8rem; color: #3b3366; font-size: 18px; letter-spacing: .2em; }

/* ===== Cheat mode (Konami-code) ===== */
.cheat { position: fixed; left: 50%; top: 40%; z-index: 95; transform: translate(-50%, -50%); font-family: var(--pixel); font-size: clamp(14px, 3.6vw, 34px); text-align: center; color: var(--yellow); text-shadow: 4px 4px 0 var(--pink), -2px -2px 0 var(--cyan); animation: cheat-pop 2.6s steps(12) forwards; pointer-events: none; }
.cheat small { display: block; font-size: .4em; margin-top: 1em; color: #fff; }
@keyframes cheat-pop { 0% { transform: translate(-50%, -50%) scale(0); } 15% { transform: translate(-50%, -50%) scale(1.15); } 25%, 85% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
body.cheat-on main { animation: rainbow 3s linear infinite; }
@keyframes rainbow { to { filter: hue-rotate(360deg); } }

/* sterretjes achter de muis */
.spark { position: fixed; pointer-events: none; z-index: 80; font-size: 14px; animation: spark .8s ease-out forwards; }
@keyframes spark { to { transform: translateY(30px) scale(.2); opacity: 0; } }

@media (max-width: 640px) {
  body { font-size: 20px; }
  .tb-nav { display: none; }
  .tb-music { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .crawl { animation-duration: 120s; }
  .blink, .led.on, .boot-start { animation: none; }
}

/* ===== Nummerlijst: afspelen + bewerken ===== */
.tk-song { flex: 1 1 220px; display: flex; }
.tk-songs .tk-song > button[data-song] { flex: 1 1 auto; }
.tk-songs .tk-edit { flex: 0 0 46px; text-align: center; padding: 0; border-left: none; color: var(--pink); font-size: 22px; }
.tk-songs .tk-edit:hover, .tk-songs .tk-edit:focus-visible { background: var(--pink); color: #000; }
.tk-songs .tk-blank, .tk-songs .tk-mine { flex: 1 1 180px; border-style: dashed; border-color: var(--pink); color: var(--pink); }
.tk-songs .tk-mine { border-color: var(--yellow); color: var(--yellow); }

/* ===== SlamStudio ===== */
.studio { margin-top: 10px; }
.st-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px; background: #0d0b1c; border: 2px solid #4a4570; }
.st-btn, .st-group button {
  height: 40px; padding: 0 12px; font-size: 19px; color: #000; background: #a9a3c9;
  box-shadow: inset -3px -3px 0 #4a4570, inset 3px 3px 0 #fff;
}
.st-btn:active, .st-group button:active { box-shadow: inset 3px 3px 0 #4a4570, inset -3px -3px 0 #fff; }
.st-play { background: var(--yellow); min-width: 150px; }
.st-close { background: var(--pink); }
.st-group { display: flex; align-items: center; gap: 4px; color: #c8c3ea; font-size: 18px; }
.st-group button { width: 36px; padding: 0; height: 36px; }
.st-group button.on { background: var(--yellow); }
.st-group b { min-width: 2.2em; text-align: center; font-weight: 400; font-size: 23px; color: var(--green); text-shadow: 0 0 6px rgba(57, 255, 20, .6); }
.st-follow { display: flex; align-items: center; gap: 4px; color: #c8c3ea; font-size: 18px; cursor: pointer; }
.st-follow input { accent-color: var(--yellow); width: 18px; height: 18px; }
.st-spacer { flex: 1; }
.st-share-msg { margin-top: 6px; padding: 6px 10px; background: #0d1f0d; border: 1px solid var(--green); color: var(--green); }
.st-share-msg input { width: 100%; margin-top: 4px; font: inherit; font-size: 16px; background: #000; color: var(--yellow); border: 1px solid #4a4570; padding: 4px; }

.st-main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 10px; margin-top: 10px; align-items: start; }
.st-grid-wrap { position: relative; height: min(62vh, 560px); overflow: auto; background: #000; border: 2px inset #4a4570; overscroll-behavior: contain; }
.st-head, .st-r { display: grid; grid-template-columns: 34px repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0 6px; }
.st-head { position: sticky; top: 0; z-index: 2; padding-top: 4px; padding-bottom: 4px; background: #1b1830; border-bottom: 1px solid #4a4570; font-size: 17px; }
.st-head .ch0, .st-c.on.ch0 { color: #20f0ff; }
.st-head .ch1, .st-c.on.ch1 { color: #ff2bd6; }
.st-head .ch2, .st-c.on.ch2 { color: #ffe14d; }
.st-head .ch3, .st-c.on.ch3 { color: #39ff14; }
.st-r { padding-top: 1px; padding-bottom: 1px; }
.st-r.beat { background: rgba(255, 255, 255, .035); }
.st-r.bar { background: rgba(255, 43, 214, .09); }
.st-r.play { background: rgba(255, 225, 77, .2); box-shadow: inset 0 1px 0 var(--yellow), inset 0 -1px 0 var(--yellow); }
.st-n { color: #4a4570; font-size: 17px; line-height: 26px; }
.st-r.beat .st-n { color: #6f6a99; }
.st-r.bar .st-n { color: var(--pink); }
.st-c {
  height: 26px; padding: 0 6px; text-align: left; white-space: nowrap; overflow: hidden;
  font-size: 18px; color: #3d3866; background: #0d0b1c; border: 1px solid transparent;
}
.st-c:hover { border-color: #4a4570; }
.st-c.sel { border-color: #fff; background: #2a2550; box-shadow: 0 0 8px rgba(255, 255, 255, .45); }

.st-panel { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 10px; padding: 10px; background: #0d0b1c; border: 2px solid #4a4570; }
.st-p-head b { font-family: var(--pixel); font-weight: 400; font-size: 12px; color: var(--chc); }
.st-p-head span { color: var(--dim); }
.st-p-now { color: #c8c3ea; font-size: 19px; }
.st-p-now b { color: #fff; font-weight: 400; }
.st-oct { display: flex; align-items: center; gap: 6px; color: #c8c3ea; font-size: 18px; }
.st-oct button { width: 36px; height: 34px; font-size: 20px; color: #000; background: #a9a3c9; box-shadow: inset -3px -3px 0 #4a4570, inset 3px 3px 0 #fff; }
.st-oct b { min-width: 1.5em; text-align: center; font-weight: 400; font-size: 23px; color: var(--green); }
.st-piano { display: flex; height: 122px; }
.st-key { touch-action: manipulation; font-size: 15px; }
.st-key.white { flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; color: #333; background: linear-gradient(#fff, #d9d6ee); border: 1px solid #222; }
.st-key.black { flex: 0 0 26px; margin: 0 -13px; height: 74px; z-index: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; font-size: 11px; color: #ccc; background: linear-gradient(#333, #000); border: 1px solid #000; }
.st-key:active, .st-key:hover { filter: brightness(1.15) sepia(.5) hue-rotate(250deg) saturate(3); }
.st-qual { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.st-qual button { padding: 6px; font-size: 18px; color: #c8c3ea; background: #1b1830; border: 2px solid #4a4570; }
.st-qual button small { display: block; font-size: 15px; color: var(--dim); }
.st-qual button.on { border-color: var(--pink); color: var(--pink); background: #2a1030; }
.st-pads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.st-pad { height: 86px; font-family: var(--pixel); font-size: 11px; color: #000; box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .35), inset 4px 4px 0 rgba(255, 255, 255, .5); touch-action: manipulation; }
.st-pad:active { box-shadow: inset 4px 4px 0 rgba(0, 0, 0, .35); transform: translateY(1px); }
.pad-K { background: #39ff14; } .pad-S { background: #ff2bd6; } .pad-H { background: #20f0ff; }
.st-p-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.st-p-actions button { flex: 1 1 auto; padding: 6px 8px; font-size: 17px; color: #c8c3ea; background: #1b1830; border: 1px solid #4a4570; }
.st-p-actions button:hover { border-color: #c8c3ea; }
.st-help { margin-top: 8px; color: var(--dim); font-size: 17px; line-height: 1.5; }
.st-help kbd { display: inline-block; min-width: 1.4em; padding: 0 4px; margin: 0 1px; text-align: center; color: #fff; background: #1b1830; border: 1px solid #4a4570; border-bottom-width: 3px; font-family: var(--term); }

@media (max-width: 860px) {
  .st-main { grid-template-columns: 1fr; }
  .st-panel { position: static; }
  .st-grid-wrap { height: 46vh; }
  .st-help { display: none; }
}
@media (max-width: 520px) {
  .st-head, .st-r { grid-template-columns: 22px repeat(4, minmax(0, 1fr)); gap: 2px; padding: 0 3px; }
  .st-c { font-size: 14px; padding: 0 3px; }
  .st-n, .st-head { font-size: 14px; }
  .st-btn { font-size: 16px; padding: 0 8px; height: 36px; }
  .st-play { min-width: 0; }
  .st-spacer { display: none; }
}