.juke-page {
  --juke-neon: #ff6a95;
  --juke-teal: #62d6e2;
  --juke-brass: #d8b057;
  --juke-wood: #8a5a36;
}

.juke-page .banner-copy h1 span { color: var(--juke-neon); text-shadow: 0 0 22px rgba(255, 106, 149, .35); }
.crop-neon { --crop: #ff6a95; }
.crop-teal { --crop: #62d6e2; }

/* Figures */
.juke-figure { margin: 0; overflow: hidden; border: 1px solid #4f3d5e; background: linear-gradient(145deg, rgba(36, 27, 44, .92), rgba(16, 12, 21, .96)); }
.juke-figure img { width: 100%; height: auto; }
.juke-figure figcaption { border-top: 1px solid rgba(199, 156, 255, .14); padding: .75rem .9rem; color: #c9bccf; font-size: .78rem; line-height: 1.5; }
.juke-figure figcaption strong { color: #fff4ea; }

.juke-feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(16rem, 1fr); align-items: start; gap: 1rem; max-width: 54rem; margin: 1.8rem 0 2.2rem; }
.juke-feature .juke-figure { border-color: #6a3a52; box-shadow: 0 0 40px rgba(255, 106, 149, .08); }
.juke-feature-copy { border: 1px solid #6c5237; background: linear-gradient(145deg, rgba(104, 70, 35, .2), rgba(24, 19, 26, .9)); padding: 1.35rem; }
.juke-feature-copy .visual-kicker { display: block; color: var(--juke-brass); font-size: .67rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.juke-feature-copy h3 { margin: .75rem 0 .7rem; color: #fff7e7; font: 700 1.55rem/1.1 Georgia, serif; }
.juke-feature-copy p, .juke-feature-copy ul { color: #c4b6a8; font-size: .88rem; }
.juke-feature-copy ul { padding-left: 1.2rem; }

.juke-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 54rem; margin: 1.6rem 0 2rem; }
.juke-pair .juke-figure img { background: #221d2c; }
.juke-wide { max-width: 54rem; margin: 1.6rem 0 2rem; }

.juke-block { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: 1.2rem; max-width: 54rem; margin: 1.6rem 0 2rem; border: 1px solid #5b4630; background: linear-gradient(145deg, rgba(95, 66, 30, .18), rgba(22, 17, 26, .92)); padding: 1rem; }
.juke-block img { width: 100%; height: auto; }
.juke-block p { margin: 0; color: #c9bcaf; font-size: .88rem; }
.juke-block strong { display: block; margin-bottom: .35rem; color: #fff4e3; font: 700 1.2rem/1.2 Georgia, serif; }

/* Portable players */
.device-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; max-width: 54rem; margin: 1.8rem 0 2rem; }
.device-card { --device: var(--juke-brass); display: flex; flex-direction: column; align-items: center; border: 1px solid color-mix(in srgb, var(--device), transparent 55%); border-top: 3px solid var(--device); background: linear-gradient(160deg, rgba(38, 30, 47, .9), rgba(18, 14, 23, .95)); padding: 1.2rem 1rem 1rem; text-align: center; }
.device-card img { width: 8rem; height: 8rem; image-rendering: pixelated; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)) drop-shadow(0 0 14px color-mix(in srgb, var(--device), transparent 70%)); }
.device-card strong { margin-top: .9rem; color: #fff6ec; font: 700 1.2rem/1.2 Georgia, serif; }
.device-card .device-slots { margin-top: .35rem; color: var(--device); font-size: .68rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.device-card p { margin: .6rem 0 0; color: #b9adbd; font-size: .8rem; line-height: 1.45; }
.device-card.walkman { --device: #e2a454; }
.device-card.mp3 { --device: #d9a0ff; }
.device-card.teemo { --device: #8fcf5a; }

/* Recipe rows: crafting grid plus the result sprite */
.juke-recipe { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin: 1.2rem 0 2rem; }
.juke-recipe .recipe-arrow { color: var(--juke-brass); font: 700 1.6rem/1 Georgia, serif; }
.juke-recipe .recipe-result { display: flex; align-items: center; gap: .7rem; color: #f0e4d6; font-size: .85rem; font-weight: 800; }
.juke-recipe .recipe-result img { width: 4rem; height: 4rem; image-rendering: pixelated; }

/* Keep the custom step badge as the only marker in the shared prose styles. */
.prose .guide-chapter > ol.steps { list-style: none; padding-left: 0; }
.prose .guide-chapter > ol.steps > li { padding-left: 3rem; }
.prose .guide-chapter > ol.steps > li::marker { content: ""; }

@media (max-width: 900px) {
  .juke-feature { grid-template-columns: 1fr; }
  .juke-feature .juke-figure { max-width: 26rem; }
}

@media (max-width: 620px) {
  .device-grid, .juke-pair { grid-template-columns: 1fr; }
  .juke-block { grid-template-columns: 1fr; }
  .juke-block img { max-width: 12rem; }
}