/* MESS — optional local game and edge drawings. No page selectors are replaced. */
.cg-edge-space{--cg-edge:clamp(10px,2vw,28px);position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden;opacity:.23;mask-image:linear-gradient(90deg,#000 0,#000 var(--cg-edge),transparent var(--cg-edge),transparent calc(100% - var(--cg-edge)),#000 calc(100% - var(--cg-edge)),#000 100%);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 var(--cg-edge),transparent var(--cg-edge),transparent calc(100% - var(--cg-edge)),#000 calc(100% - var(--cg-edge)),#000 100%)}
.cg-edge-drawing{position:absolute;display:block;width:83px;height:83px;background:center/contain no-repeat;animation:cg-drift 23s ease-in-out infinite alternate;will-change:transform;pointer-events:none}
.cg-edge-drawing:nth-child(1){left:-33px;top:14%;background-image:url('assets/space/star-four.svg')}
.cg-edge-drawing:nth-child(2){right:-47px;top:32%;background-image:url('assets/space/vinyl-planet.svg');width:105px;animation-delay:-9s}
.cg-edge-drawing:nth-child(3){left:-59px;top:65%;background-image:url('assets/space/comet-ink.svg');width:115px;animation-delay:-15s}
.cg-edge-drawing:nth-child(4){right:-38px;top:85%;background-image:url('assets/space/star-six.svg');animation-delay:-5s}
.cg-edge-drawing:nth-child(5){left:-49px;top:43%;background-image:url('assets/space/orbit-ink.svg');width:105px;animation-delay:-13s}
.cg-edge-drawing:nth-child(6){right:-55px;top:8%;background-image:url('assets/space/constellation-ink.svg');width:117px;animation-delay:-18s}
.cg-edge-drawing:nth-child(7){left:-39px;top:90%;background-image:url('assets/space/star-orbit.svg');animation-delay:-3s}
.cg-edge-drawing:nth-child(8){right:-62px;top:61%;background-image:url('assets/space/constellation-light.svg');width:125px;animation-delay:-11s}

.cg-launcher{position:fixed;right:15px;bottom:calc(15px + env(safe-area-inset-bottom,0px));z-index:70;width:69px;height:69px;display:grid;place-content:center;gap:2px;padding:8px;border:1.5px solid #141312;border-radius:50%;background:var(--acid,#e4ff4f);color:#141312;box-shadow:3px 3px 0 #141312;font:700 9px/1.15 var(--body,Arial,sans-serif);text-align:center;cursor:pointer;transition:transform .16s}
.cg-launcher::before{content:'◉';font-size:26px;line-height:1}.cg-launcher:hover{transform:translateY(-3px)}
.cg-launcher:focus-visible,.cg-dialog button:focus-visible,.cg-record:focus-visible{outline:3px dashed currentColor;outline-offset:5px}
.cg-input-focus .cg-launcher{visibility:hidden;pointer-events:none}

/* The two decks and central mixer share a single hardware chassis. */
.cg-dialog {
  --cg-chassis: #171321;
  --cg-panel: #211b2d;
  --cg-dim: #cbc0da;
  --cg-border: #554865;
  --cg-track: #08060d;
  box-sizing: border-box;
  width: min(1030px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #776787;
  border-radius: 18px;
  font-family: var(--body, Arial, sans-serif);
}
.cg-dialog[open] {
  color: #f8f0ff;
  background: var(--cg-chassis);
  border-color: #776787;
  box-shadow: 0 26px 100px #0a0515c7, inset 0 1px #d8c2ed55;
}
.cg-dialog::backdrop { background: #10091cdd; backdrop-filter: blur(6px); }
.cg-dialog:not([open]) { display: none; }
.cg-dialog.cg-fallback-open { position: fixed; inset: 12px 0; z-index: 2147483000; display: block; box-shadow: 0 0 0 100vmax #10091cdd; }
.cg-dialog * { box-sizing: border-box; }

.cg-dialog .cg-dialog-head {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 23px;
  border-bottom: 1px solid var(--cg-border);
  background: linear-gradient(110deg, #2a2139, var(--cg-chassis) 70%);
}
.cg-kicker {
  margin: 0 0 7px;
  color: var(--cg-purple);
  font: 700 10px/1.25 var(--body, Arial, sans-serif);
  letter-spacing: .14em;
}
.cg-dialog h2 {
  margin: 0;
  font: 800 clamp(27px, 4.5vw, 47px)/.98 var(--display, var(--body, Arial, sans-serif));
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.cg-dialog .cg-close {
  flex: 0 0 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--cg-border);
  border-radius: 9px;
  background: #14101d;
  color: #f8f0ff;
  font: 400 26px/1 var(--body, Arial, sans-serif);
  cursor: pointer;
}
.cg-dialog .cg-close:hover, .cg-dialog .cg-stop:hover { border-color: var(--cg-purple); background: #30243e; }
.cg-top-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .9fr); align-items: center; gap: 12px; padding: 12px 23px; }
.cg-guide { border-left: 2px solid #ae85d5; padding: 1px 0 1px 10px; }
.cg-guide-title { color: #ebd4ff; font-size: 11px; }
.cg-instructions { margin: 3px 0 0; color: var(--cg-dim); font-size: 12px; line-height: 1.4; }
.cg-mixbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cg-dialog .cg-mix-button, .cg-dialog .cg-stop, .cg-dialog .cg-track-play {
  min-height: 44px;
  border-radius: 8px;
  padding: 8px 12px;
  font: 700 12px/1.2 var(--body, Arial, sans-serif);
  cursor: pointer;
}
.cg-dialog .cg-mix-button {
  border: 1px solid #ead4ff;
  background: linear-gradient(180deg, #e4caff, #c9afe9);
  color: #1a1028;
  box-shadow: inset 0 1px #fff9, 0 2px #0a0712;
}
.cg-dialog .cg-stop { border: 1px solid var(--cg-border); background: #161120; color: #f8f0ff; }
.cg-mix-button:disabled, .cg-track-play:disabled { opacity: .58; cursor: wait; }
.cg-mix-status { flex: 1 1 170px; min-height: 15px; margin: 0; color: var(--cg-dim); font-size: 11px; line-height: 1.35; }

.cg-dialog .cg-decks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .72fr) minmax(0, 1fr);
  grid-template-areas: "deck-a mixer deck-b";
  gap: 8px;
  margin: 0 12px;
  padding: 8px;
  border: 1px solid #5a4b69;
  border-radius: 13px;
  background: #100d19;
  box-shadow: inset 0 2px 8px #06040b;
}
.cg-deck[data-channel='A'] { grid-area: deck-a; }
.cg-deck[data-channel='B'] { grid-area: deck-b; }
.cg-deck, .cg-channel { --cg-channel-color: #d5b5ff; }
.cg-deck[data-channel='B'], .cg-channel[data-channel='B'] { --cg-channel-color: #d8f487; }
.cg-dialog .cg-deck, .cg-mixer {
  min-width: 0;
  position: relative;
  padding: 13px;
  border: 1px solid #53445f;
  border-radius: 9px;
  background: linear-gradient(153deg, #2a2337, #191522 54%);
  color: #faf3ff;
  box-shadow: inset 0 1px #efe1ff17, 0 3px 5px #0004;
}
.cg-deck-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cg-deck-id {
  display: grid;
  place-items: center;
  flex: 0 0 23px;
  height: 21px;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: var(--cg-channel-color);
  font: 700 11px/1 ui-monospace, monospace;
}
.cg-dialog .cg-artist {
  margin: 0;
  color: var(--cg-channel-color);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.cg-dialog .cg-disc-select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 7px;
  border: 1px solid #675674;
  border-radius: 7px;
  color: #fbf2ff;
  background: #151020;
  font: 650 14px/1.15 var(--body, Arial, sans-serif);
  text-overflow: ellipsis;
  cursor: pointer;
}
.cg-turntable {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1.15;
  max-height: 225px;
  margin: 5px 0 10px;
  border: 1px solid #594962;
  border-radius: 10px;
  background: radial-gradient(ellipse at center, #30243b, #120f1b 76%);
  box-shadow: inset 0 2px 8px #08060e;
  perspective: 750px;
}
.cg-record-mount { width: min(193px, 81%); aspect-ratio: 1; transform: rotateX(13deg); }
.cg-record {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid #6e617a;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #141119 0px, #141119 2px, #3a3342 3px, #111018 4px, #111018 6px);
  box-shadow: 0 5px 0 #08060d, 0 9px 15px #000b, inset 0 0 0 6px #131019;
  color: var(--cg-channel-color);
  transform: rotate(var(--cg-angle, 0deg));
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.cg-record::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 18deg, transparent, #c2a9e72b 45deg, transparent 79deg, transparent 178deg, #c2a9e720 220deg, transparent 260deg);
  pointer-events: none;
}
.cg-record.cg-grabbed { cursor: grabbing; }
.cg-record[aria-disabled='true'] { cursor: default; }
.cg-dialog .cg-record-label {
  position: absolute;
  inset: 31%;
  display: grid;
  place-items: center;
  border: 2px solid var(--cg-channel-color);
  border-radius: 50%;
  background: #151020;
  pointer-events: none;
}
.cg-label-logo { position: relative; width: 84%; aspect-ratio: 1397/581; overflow: hidden; }
.cg-label-logo img { position: absolute; width: 143.1639227%; max-width: none; height: auto; left: -21.6177523%; top: -122.2030981%; -webkit-user-drag: none; }
.cg-record-pin { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--cg-channel-color); transform: translate(-50%, -50%); pointer-events: none; }
.cg-tonearm {
  position: absolute;
  top: 12%;
  right: 8%;
  width: 5px;
  height: 48%;
  border: 1px solid #84758f;
  border-radius: 8px;
  background: linear-gradient(90deg, #625671, #d5c4e8 55%, #7a6d86);
  box-shadow: 2px 4px 5px #0009;
  transform: rotate(22deg);
  transform-origin: 50% 4%;
  pointer-events: none;
}
.cg-tonearm::before, .cg-tonearm::after { position: absolute; content: ''; left: 50%; transform: translateX(-50%); background: #392d47; border: 1px solid #a899b8; }
.cg-tonearm::before { top: -4px; width: 13px; height: 13px; border-radius: 50%; }
.cg-tonearm::after { bottom: -4px; width: 7px; height: 12px; border-radius: 3px; }

.cg-dialog .cg-track-play { width: 100%; border: 1px solid #615270; background: #161220; color: var(--cg-channel-color); }
.cg-dialog .cg-track-play:hover, .cg-dialog .cg-track-play[data-playing='true'] { border-color: var(--cg-channel-color); background: #2d2539; }
.cg-dialog .cg-seek-label { display: block; margin-top: 8px; color: var(--cg-dim); font-size: 10px; }
.cg-seek { display: block; width: 100%; height: 32px; margin: 0; accent-color: var(--cg-channel-color); cursor: pointer; }
.cg-seek:disabled { opacity: .42; cursor: default; }
.cg-dialog .cg-track-time { display: flex; justify-content: space-between; gap: 5px; color: var(--cg-dim); font: 500 10px/1.15 ui-monospace, monospace; }
.cg-dialog .cg-track-status { min-height: 26px; margin: 7px 0 0; color: var(--cg-dim); font-size: 10px; line-height: 1.35; }
.cg-dialog .cg-track-status[data-state='error'] { color: #ffc0b5; }

.cg-mixer {
  grid-area: mixer;
  padding: 13px 12px 11px;
  background: repeating-linear-gradient(0deg, #fff0 0 2px, #ffffff04 2px 3px), linear-gradient(160deg, #33283f, #201929 75%);
}
.cg-dialog .cg-mixer-title {
  margin: 0 0 12px;
  text-align: center;
  color: #f6e9ff;
  font: 750 clamp(14px, 2.3vw, 22px)/1.2 var(--display, var(--body, Arial, sans-serif));
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cg-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.cg-channel {
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: 7px 3px 5px;
  border: 1px solid #544560;
  border-radius: 6px;
  background: #191420;
}
.cg-channel-label { color: var(--cg-channel-color); font: 700 9px/1.2 ui-monospace, monospace; white-space: nowrap; }
.cg-channel-controls {
  --cg-channel-travel: 108px;
  display: grid;
  grid-template-columns: 44px 10px;
  align-items: center;
  gap: 2px;
  position: relative;
  height: var(--cg-channel-travel);
  margin: 4px 0;
}
.cg-channel-level {
  position: absolute;
  left: 22px;
  top: 50%;
  width: var(--cg-channel-travel);
  height: 44px;
  transform: translate(-50%, -50%) rotate(-90deg);
  --cg-knob: var(--cg-channel-color);
}
.cg-dialog :is(.cg-channel-level, .cg-fader) {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.cg-dialog :is(.cg-channel-level, .cg-fader)::-webkit-slider-runnable-track { height: 6px; border: 1px solid #736184; border-radius: 4px; background: var(--cg-track); }
.cg-dialog :is(.cg-channel-level, .cg-fader)::-moz-range-track { height: 6px; border: 1px solid #736184; border-radius: 4px; background: var(--cg-track); }
.cg-dialog :is(.cg-channel-level, .cg-fader)::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 26px;
  margin-top: -11px;
  border: 1px solid #998aa8;
  border-radius: 4px;
  background: linear-gradient(90deg, #33273e 0 43%, var(--cg-knob) 43% 56%, #33273e 56%);
  box-shadow: 1px 2px 3px #000b, inset 0 1px #fff5;
}
.cg-dialog :is(.cg-channel-level, .cg-fader)::-moz-range-thumb {
  width: 17px;
  height: 26px;
  border: 1px solid #998aa8;
  border-radius: 4px;
  background: linear-gradient(90deg, #33273e 0 43%, var(--cg-knob) 43% 56%, #33273e 56%);
  box-shadow: 1px 2px 3px #000b, inset 0 1px #fff5;
}
.cg-meter {
  grid-column: 2;
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
  height: calc(var(--cg-channel-travel) - 15px);
  padding: 4px 2px;
  border-radius: 3px;
  background: #100c16;
}
.cg-meter span { flex: 1; min-height: 0; border-radius: 1px; background: #443850; }
.cg-meter span.is-lit { background: var(--cg-channel-color); }
.cg-meter span.is-lit:nth-last-child(2) { background: #f8bb71; }
.cg-meter span.is-lit:last-child { background: #f486a5; }
.cg-level-value { color: var(--cg-dim); font: 600 9px/1.15 ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.cg-crossfade {
  margin-top: 12px;
  padding: 9px 8px 7px;
  border: 1px solid #534560;
  border-radius: 7px;
  background: #191420;
}
.cg-crossfade-title { display: block; text-align: center; color: #eee0fb; font: 700 10px/1.2 ui-monospace, monospace; letter-spacing: .12em; }
.cg-dialog .cg-fader { display: block; width: 100%; height: 44px; --cg-knob: #f4e6ff; cursor: ew-resize; }
.cg-crossfade-ends { display: flex; justify-content: space-between; margin: -4px 2px 0; color: #d5b5ff; font: 800 10px/1.2 ui-monospace, monospace; pointer-events: none; }
.cg-crossfade-ends span:last-child { color: #d8f487; }
.cg-dialog .cg-mixer-note { margin: 0; padding: 11px 23px 13px; color: var(--cg-dim); font-size: 10px; line-height: 1.45; }
.cg-dialog :is(button, input, select, .cg-record):focus-visible { outline: 2px solid #e3c7ff; outline-offset: 3px; }

.cg-doc-hidden .cg-edge-drawing,.cg-calm .cg-edge-drawing,html.cg-has-portal[data-motion='paused'] .cg-edge-drawing{animation-play-state:paused}@keyframes cg-drift{from{transform:translateY(-9px) rotate(-9deg)}to{transform:translateY(12px) rotate(10deg)}}
@media (max-width: 640px) {
  .cg-launcher { width: 60px; height: 60px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 8px; }
  .cg-dialog { width: calc(100vw - 14px); max-height: calc(100dvh - 14px); border-radius: 12px; }
  .cg-dialog .cg-dialog-head { padding: 10px 11px; }
  .cg-kicker { margin-bottom: 4px; font-size: 9px; }
  .cg-top-controls { grid-template-columns: 1fr; gap: 6px; padding: 8px 11px; }
  .cg-instructions { font-size: 11px; }
  .cg-mixbar { gap: 5px; }
  .cg-dialog .cg-mix-button, .cg-dialog .cg-stop { flex: 1 1 auto; }
  .cg-mix-status { flex-basis: 100%; }
  .cg-mix-status:empty { display: none; }
  .cg-dialog .cg-decks { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "deck-a deck-b" "mixer mixer"; margin: 0 5px; padding: 5px; gap: 5px; }
  .cg-dialog .cg-deck { padding: 7px; }
  .cg-deck-head { gap: 5px; }
  .cg-dialog .cg-artist { font-size: 9px; letter-spacing: .03em; }
  .cg-dialog .cg-disc-select { font-size: 12px; padding: 5px; }
  .cg-turntable { max-height: 145px; margin: 3px 0 6px; }
  .cg-dialog .cg-track-status { min-height: 24px; font-size: 9px; }
  .cg-dialog .cg-seek-label { font-size: 9px; }
  .cg-seek { height: 28px; }
  .cg-mixer { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5px 8px; padding: 8px; }
  .cg-dialog .cg-mixer-title { grid-column: 1 / -1; margin: 0; text-align: left; }
  .cg-channel-controls { --cg-channel-travel: 72px; }
  .cg-crossfade { margin: 0; padding-inline: 5px; }
  .cg-dialog .cg-mixer-note { padding: 8px 11px 10px; }
}
@media (max-width: 360px) {
  .cg-dialog .cg-deck { padding: 5px; }
  .cg-deck-id { flex-basis: 18px; height: 18px; }
  .cg-channel-controls { grid-template-columns: 38px 8px; }
  .cg-channel-level { left: 19px; height: 38px; }
}
@media(prefers-reduced-motion:reduce){.cg-edge-drawing{animation:none!important;will-change:auto}.cg-launcher{transition:none}.cg-launcher:hover{transform:none}}
@media print{.cg-edge-space,.cg-launcher,.cg-dialog{display:none!important}}