.st {
  position: fixed;
  inset: 0;
  z-index: 5000;
  color: #f6e8c7;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  opacity: 0;
  transition: opacity .25s ease;
}
.st.is-open { opacity: 1; }
.st[hidden] { display: none; }
.st-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(128, 9, 25, .3), transparent 42%), rgba(4, 3, 7, .97);
  backdrop-filter: blur(16px);
}
.st-shell {
  position: relative;
  width: min(1080px, calc(100vw - 34px));
  height: min(760px, calc(100dvh - 34px));
  margin: 17px auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(205, 167, 70, .32);
  background: linear-gradient(145deg, rgba(19, 14, 16, .98), rgba(7, 7, 11, .99));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .72);
}
.st-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(205, 167, 70, .2);
}
.st-head span, .st-now span {
  color: #a89055;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .34em;
}
.st-head h2 {
  margin: 3px 0 0;
  font-family: Georgia, serif;
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 400;
  letter-spacing: .12em;
}
.st-close, .st-controls button {
  border: 1px solid rgba(205, 167, 70, .32);
  background: transparent;
  color: #d8c58f;
  padding: 11px 16px;
  font: 800 9px/1 ui-sans-serif, sans-serif;
  letter-spacing: .2em;
  cursor: pointer;
}
.st-close:hover, .st-controls button:hover { background: rgba(180, 22, 42, .18); color: white; }
.st-deck { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(330px, 1fr) minmax(320px, .92fr); }
.st-turntable {
  min-height: 0;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  overflow: hidden;
  border-right: 1px solid rgba(205, 167, 70, .17);
  background: radial-gradient(circle at 48% 44%, rgba(190, 22, 42, .13), transparent 45%);
}
.st-turntable p { margin: 0; color: #897b5d; font-size: 9px; font-weight: 800; letter-spacing: .22em; text-align: center; }
.st-record {
  --record-size: min(48vw, 430px, 54vh);
  width: var(--record-size);
  height: var(--record-size);
  position: relative;
  border: 0;
  border-radius: 50%;
  color: white;
  cursor: grab;
  touch-action: none;
  background:
    repeating-radial-gradient(circle, transparent 0 3px, rgba(255,255,255,.07) 4px, transparent 5px 8px),
    radial-gradient(circle at 37% 30%, #df263c 0, #a90920 34%, #710513 72%, #33040a 100%);
  box-shadow: 0 0 0 7px #08070a, 0 22px 50px rgba(0,0,0,.75), inset 0 0 40px rgba(0,0,0,.45);
  animation: st-spin 5.8s linear infinite;
  -webkit-tap-highlight-color: transparent;
}
.st-record.is-paused { animation-play-state: paused; }
.st-record.is-scratching { animation: none; cursor: grabbing; filter: brightness(1.18); }
.st-grooves { position: absolute; inset: 8%; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; }
.st-label {
  position: absolute;
  inset: 31%;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: #f2dfad;
  color: #6f0715;
  box-shadow: 0 0 0 3px #9c0b20;
}
.st-label b { font-family: Georgia, serif; font-size: clamp(14px, 2.3vw, 25px); font-style: italic; line-height: .82; }
.st-label small { margin-top: 7px; font-size: 7px; letter-spacing: .28em; }
.st-spindle { position: absolute; left: calc(50% - 5px); top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #111; box-shadow: 0 0 0 2px #c6b57b; }
.st-arm { position: absolute; right: 8%; top: 14%; width: 15px; height: 42%; background: linear-gradient(90deg, #4c4a49, #d0c7ad 50%, #3c3938); border-radius: 12px; transform: rotate(15deg); transform-origin: 50% 8%; box-shadow: 0 4px 12px #000; pointer-events: none; }
.st-arm i { position: absolute; left: -8px; bottom: -8px; width: 31px; height: 46px; border-radius: 5px; background: #202024; }
.st-browser { min-height: 0; display: flex; flex-direction: column; padding: 25px; }
.st-now b { display: block; margin-top: 5px; color: #fff0c4; font-family: Georgia, serif; font-size: clamp(24px, 3.5vw, 38px); font-weight: 400; }
.st-controls { display: flex; gap: 8px; margin: 20px 0 16px; }
.st-list { min-height: 0; overflow: auto; border-top: 1px solid rgba(205, 167, 70, .14); scrollbar-color: #7b0a1c #0a090c; }
.st-list button { width: 100%; display: grid; grid-template-columns: 38px 1fr; align-items: center; text-align: left; border: 0; border-bottom: 1px solid rgba(205, 167, 70, .1); background: transparent; color: #91866d; padding: 12px 10px; cursor: pointer; }
.st-list button span { font: 700 9px/1 ui-monospace, monospace; color: #655d4e; }
.st-list button b { font: 600 12px/1.2 ui-sans-serif, sans-serif; letter-spacing: .08em; }
.st-list button:hover, .st-list button.is-current { color: #fff0c4; background: linear-gradient(90deg, rgba(162, 12, 32, .28), transparent); }
.st-list button.is-current span { color: #df3349; }
@keyframes st-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .st-shell { width: calc(100vw - 18px); height: calc(100dvh - 18px); margin: 9px auto; }
  .st-head { padding: 15px 16px; }
  .st-deck { grid-template-columns: 1fr; grid-template-rows: minmax(275px, 43%) 1fr; }
  .st-turntable { border-right: 0; border-bottom: 1px solid rgba(205, 167, 70, .17); gap: 13px; }
  .st-record { --record-size: min(245px, 30vh); }
  .st-turntable p { font-size: 7px; }
  .st-browser { padding: 15px 17px; }
  .st-controls { margin: 11px 0; }
  .st-list button { padding: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-record { animation-duration: 28s; }
}