:root {
  --bg: #17110e;
  --surface: #241a15;
  --surface-2: #32261f;
  --surface-press: #3b2d24;
  --text: #f7ede1;
  --muted: #b5a191;
  --line: #4a3a30;
  --accent: #ff6b2c;
  --accent-text: #ff8a57;
  --on-accent: #17110e;
  --focus: #ffbd4a;
  --chip-bg: #2f231c;
  --chip-ink: #f7ede1;
  --chip-count: #b5a191;
  --glow: rgba(255, 107, 44, .16);
  --rig-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
  --display: 'Bagel Fat One', 'Arial Black', system-ui, sans-serif;
  --body: 'Rethink Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
:root[data-look="cats"] {
  --bg: #16121f;
  --surface: #221c31;
  --surface-2: #30284a;
  --surface-press: #3a3157;
  --text: #f4eefb;
  --muted: #b6abcb;
  --line: #4a4062;
  --accent: #ff7a9a;
  --accent-text: #ff8fab;
  --on-accent: #16121f;
  --focus: #ffc04d;
  --chip-bg: #2c2540;
  --chip-ink: #f4eefb;
  --chip-count: #b6abcb;
  --glow: rgba(255, 192, 77, .13);
}
:root[data-look="apple"] {
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-press: #e5e5ea;
  --text: #000000;
  --muted: #636366;
  --line: rgba(60, 60, 67, .2);
  --accent: #0066cc;
  --accent-text: #0066cc;
  --on-accent: #ffffff;
  --focus: #0066cc;
  --chip-bg: rgba(118, 118, 128, .12);
  --chip-ink: #000000;
  --chip-count: #636366;
  --glow: transparent;
  --rig-shadow: 0 24px 50px -28px rgba(0, 0, 0, .55);
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="apple"]:not([data-appearance="light"]) {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-2: #1c1c1e;
    --surface-press: #2c2c2e;
    --text: #ffffff;
    --muted: #aeaeb2;
    --line: rgba(84, 84, 88, .6);
    --accent: #0a6fe0;
    --accent-text: #4da3ff;
    --focus: #4da3ff;
    --chip-bg: rgba(118, 118, 128, .24);
    --chip-ink: #ffffff;
    --chip-count: #aeaeb2;
    color-scheme: dark;
  }
}
:root[data-look="apple"][data-appearance="dark"] {
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #1c1c1e;
  --surface-press: #2c2c2e;
  --text: #ffffff;
  --muted: #aeaeb2;
  --line: rgba(84, 84, 88, .6);
  --accent: #0a6fe0;
  --accent-text: #4da3ff;
  --focus: #4da3ff;
  --chip-bg: rgba(118, 118, 128, .24);
  --chip-ink: #ffffff;
  --chip-count: #aeaeb2;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bg); }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(130% 55% at 50% 105%, var(--glow), transparent 62%), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--body); font-size: 16px; line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
[data-look="apple"] body { background: var(--bg); font-size: 17px; -webkit-font-smoothing: antialiased; }
[data-look="cats"] body { background: var(--bg); }
[data-look="cats"] body { isolation: isolate; }
[data-look="cats"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(130% 55% at 50% 105%, rgba(255, 192, 77, .18), transparent 62%),
    radial-gradient(90% 40% at 50% -5%, rgba(255, 122, 154, .14), transparent 60%);
  transform: scale(1.07);
  will-change: transform, filter;
  animation: cats-ambient 40s ease-in-out infinite alternate;
}
@keyframes cats-ambient {
  from { transform: translate3d(-3%, 1.5%, 0) scale(1.07); filter: hue-rotate(-8deg); }
  to { transform: translate3d(3%, -1.5%, 0) scale(1.1); filter: hue-rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  [data-look="cats"] body::before { animation: none; will-change: auto; }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.haptic-switch { display: none; }
.page {
  max-width: 880px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 36px 56px;
  display: grid; gap: 20px;
}
.back-link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: -8px 0 -12px -4px; color: var(--muted); font-weight: 700; text-decoration: none; border-radius: 8px; }
.intro { display: grid; gap: 6px; }
h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(36px, 10vw, 56px); line-height: 1.02; }
.intro p { margin: 0; max-width: 46ch; color: var(--muted); }
.finder { display: grid; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-ink);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.chip-count { font-size: 12.5px; font-weight: 700; color: var(--chip-count); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip[aria-pressed="true"] .chip-count { color: var(--on-accent); }
.chip:active { transform: scale(.96); }
.count { margin: -4px 4px 0; color: var(--muted); font-size: 15px; font-weight: 700; }
.list { display: grid; gap: 10px; }
.list h2 { margin: 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.list ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.amp-link {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center;
  min-height: 56px; padding: 10px 14px; border-radius: 14px;
  background: var(--surface-2); color: inherit; text-decoration: none;
  transition: background-color .15s ease;
}
.amp-link:active { background: var(--surface-press); }
.swatch { position: relative; width: 38px; height: 34px; border-radius: 5px; background: linear-gradient(180deg, var(--panel) 0 26%, transparent 26%), repeating-linear-gradient(45deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 3px), var(--grille); box-shadow: inset 0 0 0 3px var(--tolex), inset 0 0 0 4px rgba(255, 255, 255, .12), 0 2px 0 rgba(0, 0, 0, .4); }
.swatch::after { content: ""; position: absolute; top: 5px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 6px 1px rgba(255, 59, 48, .7); }
.amp-link-text { min-width: 0; display: grid; gap: 1px; }
.amp-link-name { font-weight: 800; font-size: 17px; line-height: 1.2; }
.amp-link-meta { color: var(--muted); font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.back-link:focus-visible, .chip:focus-visible, .amp-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) {
  .chip:hover { border-color: var(--muted); }
  .amp-link:hover { background: var(--surface-press); }
}
[data-look="apple"] .page { padding-block: 24px 56px; }
[data-look="apple"] h1 { font-weight: 700; font-size: 34px; line-height: 1.12; letter-spacing: -.02em; }
[data-look="apple"] .back-link { color: var(--accent-text); font-weight: 400; font-size: 17px; }
[data-look="apple"] .chip { border: 0; font-weight: 600; }
[data-look="apple"] .list h2 { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
[data-look="apple"] .list ul { gap: 0; border-radius: 14px; overflow: hidden; }
[data-look="apple"] .amp-link { border-radius: 0; }
[data-look="apple"] .list li + li .amp-link { background-image: linear-gradient(var(--line), var(--line)); background-size: calc(100% - 60px) 1px; background-position: right top; background-repeat: no-repeat; }
[data-look="apple"] .amp-link-name { font-weight: 600; }
[data-look="apple"] .amp-link:focus-visible { outline-offset: -3px; }
.finder { gap: 10px; }
.chip-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 10px; }
.chip-row-label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
[data-look="apple"] .chip-row-label { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.stage {
  --floor: 128px;
  --amp-w: clamp(170px, 48vw, 224px);
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  padding: 78px 16px 30px; border-radius: 22px;
  background: #0a080b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--rig-shadow);
  color: #ece6dc;
  -webkit-user-select: none; user-select: none;
}
.stage-wall {
  position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--floor) - 8px); z-index: -3;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 30%, transparent 70%, rgba(0, 0, 0, .7)),
    repeating-linear-gradient(90deg, #120a0e 0, #22121a 9px, #2a1620 15px, #1a0d13 23px, #0e080b 30px);
}
.truss {
  position: absolute; left: -10px; right: -10px; top: 14px; height: 18px;
  background:
    linear-gradient(180deg, #8b8f97 0 2px, transparent 2px calc(100% - 2px), #5d6067 calc(100% - 2px)),
    repeating-linear-gradient(60deg, transparent 0 7px, #6c7078 7px 9px, transparent 9px 16px),
    repeating-linear-gradient(-60deg, transparent 0 7px, #50535a 7px 9px, transparent 9px 16px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .6);
}
.can {
  position: absolute; top: 14px; width: 24px; height: 28px; margin-left: -12px; border-radius: 4px 4px 9px 9px;
  background: linear-gradient(90deg, #1b1b1e, #3a3b40 45%, #141416);
  box-shadow: inset 0 -4px 0 #ffcf8a, 0 3px 10px rgba(255, 190, 110, .55);
}
.can-1 { left: 18%; transform: rotate(-16deg); }
.can-2 { left: 50%; box-shadow: inset 0 -4px 0 #ffd9a3, 0 3px 12px rgba(255, 210, 150, .6); }
.can-3 { left: 82%; transform: rotate(16deg); box-shadow: inset 0 -4px 0 #ff9fb2, 0 3px 10px rgba(255, 120, 150, .5); }
.beam {
  position: absolute; top: 40px; z-index: -2; height: 120%; width: 300px; margin-left: -150px;
  background: linear-gradient(180deg, rgba(255, 196, 120, .42), rgba(255, 170, 90, .14) 55%, rgba(255, 160, 80, 0) 85%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  opacity: .8;
  pointer-events: none;
}
.beam-1 { left: 18%; transform: rotate(-14deg); transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255, 150, 90, .34), rgba(255, 120, 60, .1) 55%, transparent 85%); }
.beam-2 { left: 50%; width: 360px; margin-left: -180px; }
.beam-3 { left: 82%; transform: rotate(14deg); transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255, 120, 160, .32), rgba(255, 110, 150, .1) 55%, transparent 85%); }
.stage.is-live .beam { animation: beam-breathe 7s ease-in-out infinite alternate; }
.stage.is-live .beam-1 { animation-delay: -2.4s; }
.stage.is-live .beam-3 { animation-delay: -4.6s; }
@keyframes beam-breathe {
  from { opacity: .62; }
  to { opacity: .95; }
}
.stage-floor { position: absolute; left: 0; right: 0; bottom: 0; height: var(--floor); z-index: -1; overflow: hidden; }
.stage-floor::before {
  content: ""; position: absolute; left: -40%; right: -40%; top: 0; bottom: -40px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .6), transparent 45%),
    repeating-linear-gradient(90deg, #3b2717 0 30px, #2c1c10 30px 31px, #140c06 31px 33px, #40291a 33px 64px, #140c06 64px 66px),
    #2a1a0e;
  transform: perspective(240px) rotateX(38deg);
  transform-origin: 50% 0;
}
.stage-floor::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(48% 52% at 50% 28%, rgba(255, 196, 120, .3), transparent 70%),
    radial-gradient(30% 40% at 14% 40%, rgba(255, 140, 90, .14), transparent 70%),
    radial-gradient(30% 40% at 86% 40%, rgba(255, 120, 160, .14), transparent 70%),
    linear-gradient(180deg, transparent calc(100% - 8px), #050405 calc(100% - 8px));
}
.tape {
  position: absolute; top: 34px; width: 34px; height: 34px; display: none;
  background:
    linear-gradient(45deg, transparent 44%, rgba(236, 226, 196, .55) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(236, 226, 196, .55) 44% 56%, transparent 56%);
  transform: scaleY(.55);
}
.tape-1 { left: 9%; }
.tape-2 { right: 9%; top: 76px; }
.stage[data-count="1"] .tape-1, .stage[data-count="2"] .tape-1 { display: block; }
.setlist {
  position: absolute; right: 4%; top: 30px; display: grid; gap: 2px; width: 84px; padding: 6px 7px 8px;
  background: linear-gradient(180deg, #f3eee2, #e2dac6); color: #1f1a14; border-radius: 2px;
  font: 800 8px/1.15 var(--body); text-transform: uppercase; letter-spacing: .06em;
  transform: perspective(200px) rotateX(40deg) rotate(-7deg);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .55);
}
.setlist b { font-size: 9px; letter-spacing: .12em; border-bottom: 1.5px solid #c0352b; }
.setlist-lines { display: grid; gap: 2px; font: 400 10px/1.05 'Yellowtail', 'Brush Script MT', cursive; text-transform: none; letter-spacing: 0; color: #20304f; }
.setlist-lines span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.haze {
  position: absolute; inset: -20% -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 22% at 30% 46%, rgba(255, 220, 190, .07), transparent 70%),
    radial-gradient(34% 24% at 72% 38%, rgba(255, 200, 220, .06), transparent 70%);
}
.stage.is-live .haze { animation: haze-drift 22s ease-in-out infinite alternate; }
@keyframes haze-drift {
  from { transform: translate3d(-6%, 0, 0); }
  to { transform: translate3d(6%, -3%, 0); }
}
.backline { position: relative; z-index: 2; display: grid; justify-items: center; min-height: 250px; align-content: end; }
.amps { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 26px 30px; width: 100%; }
.stage-empty { margin: 0; padding: 90px 0 40px; color: #b7aea2; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; }
.leads { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; overflow: visible; }
.lead path { fill: none; stroke-linecap: round; }
.lead-shadow { stroke: rgba(0, 0, 0, .6); stroke-width: 6; transform: translateY(3px); }
.lead-core { stroke: var(--lead); stroke-width: 4; }
.lead-shine { stroke: rgba(255, 255, 255, .22); stroke-width: 1.1; transform: translateY(-1px); }
.mic-stand { position: absolute; bottom: 52px; left: max(2px, calc(50% - var(--amp-w) / 2 - 58px)); z-index: 4; width: 92px; height: 110px; pointer-events: none; }
.stage:not([data-count="1"]) .mic-stand { left: 2px; }
.pole { position: absolute; left: 22px; bottom: 6px; width: 4px; height: 78px; border-radius: 2px; background: linear-gradient(90deg, #2a2b2f, #9fa3ab 45%, #3a3c41); }
.tripod { position: absolute; left: 6px; bottom: 0; width: 36px; height: 12px; background: linear-gradient(90deg, transparent 47%, #2a2b2f 47% 53%, transparent 53%); }
.tripod::before, .tripod::after { content: ""; position: absolute; bottom: 2px; width: 22px; height: 3px; border-radius: 2px; background: #2e2f34; }
.tripod::before { left: 0; transform: rotate(24deg); transform-origin: 100% 50%; }
.tripod::after { right: 0; transform: rotate(-24deg); transform-origin: 0 50%; }
.boom { position: absolute; left: 24px; top: 26px; width: 58px; height: 3px; border-radius: 2px; background: linear-gradient(180deg, #a5a9b1, #3a3c41); transform: rotate(14deg); transform-origin: 0 50%; }
.mic { position: absolute; left: 66px; top: 32px; width: 26px; height: 10px; border-radius: 3px 6px 6px 3px; background: linear-gradient(90deg, #17171a 0 55%, #6c6f76 55% 62%, #b9bcc3 62%); transform: rotate(14deg); }
.mic::after { content: ""; position: absolute; right: -3px; top: 0; width: 9px; height: 10px; border-radius: 0 6px 6px 0; background: repeating-linear-gradient(90deg, #9da1a8 0 1px, #55585e 1px 2px); }
.amp {
  position: relative; display: block; width: var(--amp-w); padding-top: 10px;
  color: var(--ink); text-decoration: none; cursor: pointer;
  -webkit-touch-callout: none;
}
.amp-glow {
  position: absolute; left: 50%; top: -42%; width: 170%; aspect-ratio: 1; margin-left: -85%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 70, 50, .34), rgba(255, 90, 60, .12) 45%, transparent 75%);
  opacity: .45;
  transition: opacity .35s ease;
}
.amp-body { position: relative; display: block; transition: transform .12s ease; }
.mini-handle {
  position: absolute; top: -9px; left: 31%; width: 38%; height: 12px; z-index: 1; border-radius: 9px 9px 3px 3px;
  background: linear-gradient(180deg, #2c2c30, #0d0d0f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.mini-cab {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  aspect-ratio: 1.41; padding: 6px; border-radius: 9px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) .6px, transparent 1.1px) 0 0 / 3px 3px,
    radial-gradient(circle at 2px 2px, rgba(0, 0, 0, .5) .7px, transparent 1.2px) 0 0 / 4px 4px,
    linear-gradient(165deg, rgba(255, 255, 255, .12), transparent 38%, rgba(0, 0, 0, .3)),
    var(--tolex);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .12), 0 18px 22px -10px rgba(0, 0, 0, .95);
}
.is-top .mini-cab { aspect-ratio: 2.6; flex-direction: column-reverse; }
.mini-panel {
  position: relative; display: flex; align-items: center; gap: 6px; flex: 0 0 19%; padding: 0 7px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 40%), var(--panel);
  box-shadow: inset 0 1px 0 rgba(220, 222, 226, .5), inset 0 -1px 0 rgba(220, 222, 226, .4), 0 1px 0 rgba(0, 0, 0, .8);
}
.is-top .mini-panel { flex-basis: 46%; }
.mini-jacks { display: flex; gap: 3px; flex: none; }
.mini-jack { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #050505 0 34%, #d6d8dd 40%, #6d7077 80%); }
.mini-knobs { display: flex; flex: 1; min-width: 0; justify-content: space-between; align-items: center; }
.mini-knob {
  position: relative; display: block; width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4a4a4e 0 18%, #0c0c0d 42% 54%, #a9abb0 57% 66%, #222 70%);
  transform: rotate(var(--a));
}
.mini-knob::after { content: ""; position: absolute; left: 50%; top: 0; width: 1.3px; height: 45%; margin-left: -.65px; background: #f4f4f2; }
.mini-jewel { position: relative; display: block; width: 9px; height: 9px; flex: none; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffb4a6, #d4241b 45%, #6a0b08); }
.mini-jewel::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 70, 50, .85), rgba(255, 70, 50, 0));
  opacity: .45;
  transition: opacity .3s ease;
}
.mini-grille {
  position: relative; flex: 1; overflow: hidden; border-radius: 3px;
  background:
    radial-gradient(42% 52% at 50% 56%, rgba(0, 0, 0, .3), transparent 72%),
    repeating-linear-gradient(90deg, rgba(40, 40, 32, .3) 0 1px, transparent 1px 2.5px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 2px, rgba(30, 30, 24, .32) 2px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 60%),
    var(--grille);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), inset 0 0 8px rgba(0, 0, 0, .4);
}
.mini-logo {
  display: block; padding: 3px 0 0 8px;
  font: 400 21px/1 'Yellowtail', 'Brush Script MT', cursive;
  color: #121214;
  -webkit-text-stroke: .8px #eef0f3;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
  transform: rotate(-12deg);
  transform-origin: 0 50%;
}
.is-top .mini-logo { padding: 2px 0 0 4px; font-size: 18px; }
.mini-corner { position: absolute; width: 13px; height: 13px; background: linear-gradient(135deg, #f5f6f8, #9a9da4 55%, #e2e4e8); box-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
.c-tl { left: -2px; top: -2px; border-radius: 7px 2px 2px 2px; }
.c-tr { right: -2px; top: -2px; border-radius: 2px 7px 2px 2px; }
.c-bl { left: -2px; bottom: -2px; border-radius: 2px 2px 2px 7px; }
.c-br { right: -2px; bottom: -2px; border-radius: 2px 2px 7px 2px; }
.amp-feet { display: block; height: 10px; margin: -4px 6% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .85), transparent); }
.amp-tag {
  display: block; width: max-content; max-width: 100%; margin: 10px auto 0; padding: 3px 9px;
  background: linear-gradient(180deg, #ece5cf, #d9d0b6); color: #241c12;
  font: 400 15px/1.15 'Yellowtail', 'Brush Script MT', cursive;
  text-align: center; overflow-wrap: anywhere;
  transform: rotate(-2deg);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
}
.amp.is-on .mini-jewel { background: radial-gradient(circle at 40% 35%, #fff1ea, #ff4b36 45%, #b0140c); }
.amp.is-on .mini-jewel::after { opacity: 1; }
.amp.is-on .amp-glow { opacity: 1; }
.amp.is-pressed .amp-body { transform: translateY(2px); }
@media (hover: hover) {
  .amp:hover .amp-body { transform: translateY(-3px); }
  .amp:hover .amp-glow { opacity: .7; }
  .amp.is-pressed:hover .amp-body { transform: translateY(2px); }
}
@media (max-width: 420px) {
  .stage { padding: 70px 12px 26px; }
  .mic-stand { transform: scale(.82); transform-origin: 0 100%; }
  .setlist { right: 2%; top: 44px; transform: perspective(200px) rotateX(40deg) rotate(-7deg) scale(.86); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .chip:active { transform: none; }
}
.mini-handle::before, .mini-handle::after { content: ""; position: absolute; top: 5px; width: 16%; height: 8px; border-radius: 2px; background: linear-gradient(180deg, #f1f2f4, #9a9da4); }
.mini-handle::before { left: -12%; }
.mini-handle::after { right: -12%; }