html { background: #0a0612; }
body { background: radial-gradient(1200px 500px at 50% 0, #2a1044, #0a0612 70%); min-height: 100vh; }
a { color: #ff7db5; }
img { max-width: 100%; height: auto; display: block; }
#q9j8n4 { background: #e6d6ff; color: #16082a; border-bottom: 3px solid #ff4f9a; padding: .7rem 1.4rem; font-size: 1.45rem; font-weight: 600; display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
#q9j8n4 a { color: #5a0d8f; text-decoration: underline; white-space: nowrap; }
.spindle-keel { max-width: 1060px; margin: 0 auto; background: var(--bg-color); border-left: 1px solid #3b2a57; border-right: 1px solid #3b2a57; }
.groove-rim { display: flex; align-items: center; gap: 2rem; padding: 1.4rem 2rem; background: linear-gradient(180deg, #4a0f4d, #2b0a3c); }
.woofer-strip { font: 900 3rem/1 Impact, 'Arial Black', sans-serif; color: #fff; letter-spacing: .05em; text-decoration: none; }
.woofer-strip b { color: #ff4f9a; }
.platter-pane { display: flex; flex: 1; background: #1b0a26; border-radius: .6rem; padding: .5rem; gap: .5rem; }
.platter-pane input { flex: 1; background: #fff; color: #222; border: 0; padding: .5rem 1rem; }
.platter-pane .button { background: #3b2a57; color: #fff; padding: .5rem 1.2rem; margin: 0; }
.amp-vane { background: #1b0a26; border-radius: .6rem; padding: .6rem 1rem; color: #d9cff0; }
.amp-keel a { margin-right: .7rem; font-weight: 700; color: #cdbdf0; }
.amp-keel .groove-hub { color: #ff4f9a; text-decoration: underline; }
.stylus-rim { background: linear-gradient(180deg, #ff6aa9, #e83a86); position: relative; }
.stylus-rim #menu { display: flex; flex-wrap: wrap; }
.stylus-rim #menu > a, .needle-vane summary { color: #220518; font-weight: 700; padding: .8rem 1.6rem; border-right: 1px solid rgba(0, 0, 0, .25); border-left: 1px solid rgba(255, 255, 255, .25); text-decoration: none; cursor: pointer; list-style: none; display: block; }
.stylus-rim #menu > a:hover, .needle-vane summary:hover { background: #ffd0e3; }
.needle-vane { position: relative; }
.needle-vane > div { position: absolute; z-index: 20; background: #1f1433; min-width: 24rem; border: 1px solid #ff4f9a; }
.needle-vane > div a { display: block; padding: .8rem 1.4rem; color: #efe9fb; }
.platter-keel { display: none; background: transparent; border: 0; color: #220518; font-weight: 800; padding: .9rem 1.4rem; width: 100%; text-align: left; }
.cassette-box { display: grid; grid-template-columns: 38% 1fr; gap: 2.4rem; padding: 2.4rem; background: linear-gradient(120deg, #17102a, #2d2140 60%, #17102a); border-bottom: 3px solid #000; }
.vinyl-hub, .tweeter-lip { background: #0d0d14; border: 2px solid #55476e; border-radius: .6rem; padding: .7rem; box-shadow: 0 8px 22px #000; }
.groove-leaf { background: #05030a; color: #ff7db5; font-family: Consolas, 'Courier New', monospace; padding: .6rem .9rem; margin-bottom: .6rem; border: 1px inset #3b2a57; font-size: 1.35rem; }
.groove-leaf b { display: block; color: #fff; font-size: 1.55rem; }
.vinyl-hub img { width: 100%; height: 30rem; object-fit: cover; object-position: top; }
.vinyl-hub ol { list-style: none; margin: .6rem 0 0; padding: 0; font: 1.35rem Consolas, monospace; }
.vinyl-hub li { display: flex; justify-content: space-between; padding: .2rem .5rem; }
.vinyl-hub li:first-child { background: #3a1460; }
.vinyl-hub li a, .vinyl-hub li i { color: #c2f5d0; font-style: normal; text-decoration: none; }
.woofer-wedge h1 { font: 800 3.6rem/1.1 Impact, 'Arial Narrow', sans-serif; color: #fff; margin: 0 0 1rem; }
.platter-box { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; }
.platter-box li::before { content: '\25B8'; color: #ff4f9a; margin-right: .7rem; }
.platter-box a { color: #efe9fb; }
.tweeter-box.button { background: linear-gradient(180deg, #ff6aa9, #d9217a); color: #fff; font-size: 2rem; font-weight: 800; padding: 1.2rem 2.6rem; border-radius: .6rem; display: inline-block; margin: 0 0 1rem; text-transform: uppercase; }
.needle-strip.button { background: #3b2a57; color: #fff; font-size: 1.4rem; padding: .6rem 1.3rem; font-weight: 700; margin: .3rem .3rem .3rem 0; display: inline-block; }
a[rel~=sponsored].needle-strip.button { background: #d9217a; }
.needle-sash, .fader-keel { padding: 0; }
main > .row { margin: 0; padding: 1.2rem; }
.groove-lip { margin: 0 0 1.4rem; background: #1a1129; border-radius: 0 1.4rem 0 0; }
main > .groove-lip { margin: 1.2rem; }
.vinyl-box { background: linear-gradient(180deg, #4b3a68, #2c2043); color: #ffb3d2; font-size: 1.5rem; font-weight: 800; margin: 0; padding: .7rem 1.2rem; border-radius: 0 1.4rem 0 0; }
.vinyl-lip { padding: 1.3rem; }
.stylus-plate { display: grid; grid-template-columns: 2.8rem 1fr 2.8rem; align-items: center; gap: .6rem; }
.mixer-keel { background: #3b2a57; color: #fff; border: 0; height: 10rem; cursor: pointer; padding: 0; }
.platter-slat { display: none; }
.platter-slat.on { display: block; }
.platter-slat img { width: 100%; max-height: 28rem; object-fit: cover; object-position: top; }
.needle-lip a[rel] { margin: 0; }
.needle-lip tbody tr:nth-child(odd) { background: #241737; }
.needle-lip, .amp-hub { width: 100%; }
.fader-box { border-bottom: 1px dotted #55476e; padding: .8rem 0; }
.fader-box p { margin: .3rem 0; font-size: 1.4rem; }
.groove-slat { display: block; text-align: right; font-size: 1.3rem; font-weight: 700; }
.stylus-wedge label { display: block; margin: .4rem 0; }
.woofer-vane { padding: 2rem 2rem .6rem; background: linear-gradient(120deg, #17102a, #2d2140); }
.woofer-vane h1 { font: 800 3.2rem/1.15 Impact, 'Arial Narrow', sans-serif; color: #fff; margin: 0 0 .6rem; }
.mixer-box { padding: .8rem 2rem; background: #2d2140; }
.mixer-box select { width: auto; display: inline-block; background: #1a1129; color: #efe9fb; }
.tweeter-slat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; padding: 1.2rem 2rem; }
.groove-sash { border: 1px solid #55476e; background: #0d0d14; text-decoration: none; color: #efe9fb; padding: .4rem; display: block; }
.groove-sash:hover { border-color: #ff4f9a; }
.groove-sash img { width: 100%; aspect-ratio: 5/7; object-fit: cover; object-position: top; }
.cassette-lip { display: block; padding: .5rem .3rem; font-size: 1.4rem; }
.cassette-lip small { display: block; color: #a99bc4; }
.needle-plate { background: #0d0d14; font-size: 1.45rem; }
.needle-wedge { display: grid; grid-template-columns: 3.6rem 8.4rem 1fr auto; gap: 1.2rem; align-items: center; padding: .7rem 1.6rem; border-bottom: 1px solid #2c2043; }
.needle-wedge:nth-child(even) { background: #171026; }
.woofer-rim { font: 1.6rem Consolas, monospace; color: #c2f5d0; }
.dial-box { width: 8.4rem; aspect-ratio: 5/7; object-fit: cover; }
.cassette-wedge { color: #a99bc4; }
.dial-vane { display: grid; grid-template-columns: 34rem 1fr; gap: 2.4rem; padding: 2.4rem; background: linear-gradient(120deg, #17102a, #2d2140); }
.tweeter-lip img { width: 100%; height: 42rem; object-fit: cover; object-position: top; }
.dial-strip img { width: 100%; border: 2px solid #55476e; }
.platter-leaf h1 { font: 800 3.2rem/1.15 Impact, 'Arial Narrow', sans-serif; color: #fff; margin: 0 0 1rem; }
.platter-leaf .needle-plate { margin-top: 1rem; padding: .8rem 1rem; font-family: Consolas, monospace; }
.needle-plate ol { list-style: none; margin: 0 0 .5rem; padding: 0; }
.cassette-slat { display: flex; justify-content: space-between; color: #cdbdf0; padding: .15rem .3rem; }
.cassette-slat i { font-style: normal; }
.vinyl-sash { color: #c2f5d0; background: #16291e; }
.cassette-hub h2 { font-size: 2.1rem; color: #ffb3d2; margin: 1.6rem 0 .6rem; }
.cassette-hub h2:first-child { margin-top: 0; }
.cassette-vane { margin-top: 1.6rem; }
.cassette-vane h2 { font-size: 2.1rem; color: #ffb3d2; }
.cassette-vane summary { font-weight: 700; cursor: pointer; padding: .5rem 0; }
.spindle-rim { display: grid; grid-template-columns: 22rem 1fr; gap: 2rem; padding: 1.4rem 2rem; align-items: center; }
.spindle-rim:nth-of-type(even) { grid-template-columns: 1fr 22rem; }
.spindle-rim:nth-of-type(even) .platter-wedge { order: 2; }
.platter-wedge img { width: 100%; height: 26rem; object-fit: cover; object-position: top; border-radius: 0 1.4rem 0 0; }
.stylus-leaf h2 { font-size: 2.3rem; margin: 0 0 .3rem; color: #fff; }
.woofer-keel { display: grid; grid-template-columns: 1fr 5rem 1fr; gap: 1.2rem; padding: 1.6rem 2rem; align-items: center; text-decoration: none; color: #efe9fb; }
.woofer-keel > b { grid-column: 1 / -1; text-align: center; }
.woofer-keel img { width: 100%; height: 32rem; object-fit: cover; object-position: top; }
.fader-vane { font: 900 2.8rem Impact, sans-serif; color: #ff4f9a; text-align: center; }
.fader-sash b { display: block; font-size: 2rem; margin-top: .6rem; }
.fader-slat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 0 1rem; }
.fader-slat .woofer-keel img { height: 22rem; }
.amp-hub { margin: 0 2rem 1.6rem; width: calc(100% - 4rem); }
.amp-slat { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; padding: 1rem 2rem; }
.amp-slat img { width: 100%; height: 14rem; object-fit: cover; object-position: top; }
.needle-pane { background: #0d0816; padding: 2rem; font-size: 1.4rem; border-top: 3px solid #ff4f9a; }
.spindle-lip a { display: block; padding: .15rem 0; }
#hh5zm7 { position: fixed; left: 1.6rem; bottom: 1.6rem; width: 36rem; max-width: calc(100vw - 2rem); background: #0d0d14; border: 2px solid #ff4f9a; z-index: 50; box-shadow: 0 10px 34px #000; }
#hh5zm7[hidden] { display: none; }
.tweeter-sash { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(90deg, #d9217a, #6b2bd6); color: #fff; padding: .4rem .9rem; font-weight: 800; font-size: 1.4rem; }
.vinyl-leaf { background: transparent; color: #fff; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; padding: 0 .3rem; }
.cassette-sash { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 1rem; font-size: 1.4rem; }
.cassette-sash img { width: 9rem; height: 12rem; object-fit: cover; object-position: top; }
.cassette-sash p { margin: 0 0 .5rem; }
@media (max-width: 760px) {
  #q9j8n4 { font-size: 1.3rem; padding: .5rem .8rem; }
  .groove-rim { flex-wrap: wrap; gap: .6rem; padding: .7rem 1rem; }
  .woofer-strip { font-size: 2.2rem; }
  .platter-pane { display: none; }
  .amp-vane { margin-left: auto; padding: .2rem .6rem; }
  .amp-vane small { display: none; }
  .platter-keel { display: block; }
  .stylus-rim #menu { display: none; flex-direction: column; }
  .stylus-rim #menu.open { display: flex; }
  .needle-vane > div { position: static; }
  .cassette-box, .dial-vane { grid-template-columns: 1fr; padding: 1.2rem; gap: 1.2rem; }
  .vinyl-hub img { height: 24rem; }
  .vinyl-hub ol { display: none; }
  .woofer-wedge h1, .platter-leaf h1 { font-size: 2.7rem; }
  .woofer-vane { padding: 1.2rem; }
  .woofer-vane h1 { font-size: 2.5rem; }
  .tweeter-lip img { height: 26rem; }
  .dial-strip img { height: 30rem; width: auto; margin: 0 auto; }
  .tweeter-slat { grid-template-columns: repeat(2, 1fr); padding: 1rem; }
  .needle-wedge { grid-template-columns: 2.4rem 6rem 1fr; padding: .6rem; gap: .8rem; }
  .dial-box { width: 6rem; }
  .needle-wedge > .button { grid-column: 3; justify-self: start; }
  .spindle-rim, .spindle-rim:nth-of-type(even) { grid-template-columns: 11rem 1fr; padding: 1rem; gap: 1rem; }
  .spindle-rim:nth-of-type(even) .platter-wedge { order: 0; }
  .platter-wedge img { height: 15rem; }
  .woofer-keel { padding: 1rem; grid-template-columns: 1fr 3.4rem 1fr; gap: .4rem; }
  .woofer-keel img { height: 18rem; }
  .fader-slat { grid-template-columns: 1fr; }
  .amp-hub { margin: 0 1rem 1rem; width: calc(100% - 2rem); font-size: 1.35rem; }
  .amp-slat { grid-template-columns: repeat(3, 1fr); padding: 1rem; }
  .amp-slat a:nth-child(n+4) { display: none; }
  main > .groove-lip { margin: 1rem .6rem; }
  main > .row { padding: .6rem; }
  .stylus-plate { grid-template-columns: 2rem 1fr 2rem; }
  #hh5zm7 { left: 1rem; bottom: 1rem; }
}