@font-face {
  font-family: "DjWatoDisplay";
  src: url("/assets/fonts/djwato/poppins-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

.djwato-page {
  --dj-black: #090b0d;
  --dj-panel: #101419;
  --dj-paper: #f2f0e8;
  --dj-muted: #929ba5;
  --dj-line: rgba(242, 240, 232, 0.16);
  --dj-cyan: #35bdf1;
  --dj-cyan-dark: #102f3d;
  --dj-danger: #ff866b;
  --dj-display: "DjWatoDisplay", "Arial Black", sans-serif;
  --dj-mono: "Courier New", ui-monospace, monospace;
  width: 100%;
  min-width: 0;
  overflow: clip;
  background: var(--dj-black);
  color: var(--dj-paper);
  font-family: var(--dj-mono);
  color-scheme: dark;
  --dj-c1: rgba(9, 11, 13, 0.96);
  --dj-c2: #171b1f;
  --dj-c3: rgba(5,7,8,.12);
  --dj-c4: rgba(5,7,8,.58);
  --dj-c5: rgba(5,7,8,.84);
  --dj-c6: rgba(5,7,8,.08);
  --dj-c7: rgba(5,7,8,.94);
  --dj-c8: rgba(255,255,255,.022);
  --dj-c9: rgba(242,240,232,.76);
  --dj-c10: rgba(242,240,232,.72);
  --dj-c11: rgba(242,240,232,.28);
  --dj-c12: rgba(9,11,13,.9);
  --dj-c13: rgba(53,189,241,.08);
  --dj-c14: rgba(255,134,107,.08);
  --dj-c15: rgba(242,240,232,.3);
  --dj-c16: rgba(242,240,232,.04);
  --dj-c17: rgba(242,240,232,.58);
}

.djwato-page *,
.djwato-page *::before,
.djwato-page *::after { box-sizing: border-box; }
.djwato-page button,
.djwato-page a { color: inherit; font: inherit; }
.djwato-page [hidden] { display: none !important; }
.djwato-page :focus-visible { outline: 3px solid var(--dj-cyan); outline-offset: 3px; }

.djwato-page .skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--dj-paper);
  color: var(--dj-black);
  transform: translateY(-160%);
}
.djwato-page .skip-link:focus { transform: translateY(0); }

.djwato-page .djwato-standalone-header {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--dj-line);
  background: var(--dj-c1);
}

.djwato-page .wordmark { min-width: 100px; display: inline-grid; justify-self: start; width: max-content; line-height: 1; }
.djwato-page .wordmark__main { font-family: var(--dj-display); font-size: 1.2rem; letter-spacing: 0.05em; white-space: nowrap; }
.djwato-page .wordmark__url { justify-self: end; margin-top: 3px; color: var(--dj-cyan); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.djwato-page .signal-label,
.djwato-page .consulting-link { margin: 0; color: var(--dj-muted); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }
.djwato-page .signal-label { display: flex; align-items: center; gap: 10px; }
.djwato-page .signal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dj-cyan); animation: djwato-pulse 2.5s ease-out infinite; }
.djwato-page .consulting-link { justify-self: end; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }

.djwato-page .deck { padding-block: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 28vw); }
.djwato-page .stage {
  --dj-stage-image: url("/assets/img/djwato/hands.jpg");
  isolation: isolate;
  position: relative;
  min-width: 0;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 24px;
  border-right: 1px solid var(--dj-line);
  background: var(--dj-c2);
}
.djwato-page .stage { scroll-margin-top: 72px; }
.djwato-page .player-shell { position: relative; }
.djwato-page .player-cta {
  position: absolute; inset: 38px 0 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 14px;
  border: 0; background: var(--dj-c12); color: var(--dj-paper); font-family: var(--dj-display); font-size: clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: .02em; text-transform: uppercase; cursor: pointer;
}
.djwato-page .player-cta span { color: var(--dj-cyan); }
.djwato-page .player-cta:hover { background: var(--dj-cyan-dark); }
.djwato-page .consulting-link { padding: 0 16px; border: 1px solid var(--dj-cyan); color: var(--dj-cyan); font-size: .72rem; }
.djwato-page .consulting-link::after { content: "\2192"; margin-left: 8px; }
.djwato-page .consulting-link:hover { background: var(--dj-cyan-dark); }
.djwato-page .djwato-credit { display: none; gap: 10px; align-items: center; justify-content: center; min-height: 56px; padding: 12px 16px; border-top: 1px solid var(--dj-line); background: var(--dj-black); color: var(--dj-muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.djwato-page .djwato-credit a { color: var(--dj-cyan); text-underline-offset: 4px; }
.djwato-own .djwato-page { min-height: 100vh; display: flex; flex-direction: column; }
.djwato-own .djwato-page .deck { flex: 1; }
.djwato-own .djwato-page .djwato-credit { display: flex; }
.djwato-page .stage[data-image="booth"] { --dj-stage-image: url("/assets/img/djwato/booth.jpg"); }
.djwato-page .stage[data-image="decks"] { --dj-stage-image: url("/assets/img/djwato/decks.jpg"); }
.djwato-page .stage[data-image="hands"] { --dj-stage-image: url("/assets/img/djwato/hands.jpg"); }
.djwato-page .stage::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: -3%;
  background: var(--dj-stage-image) center 28% / cover no-repeat;
  filter: grayscale(1) contrast(1.12) brightness(0.7);
  transform: scale(1.04);
  animation: djwato-drift 18s ease-in-out infinite alternate;
}
.djwato-page .stage::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(90deg, var(--dj-c3), var(--dj-c4) 72%, var(--dj-c5)), linear-gradient(180deg, var(--dj-c6) 20%, var(--dj-c7) 88%);
}
.djwato-page .stage__wash { position: absolute; z-index: -1; inset: 0; opacity: .55; background: repeating-linear-gradient(0deg, var(--dj-c8) 0 1px, transparent 1px 4px); pointer-events: none; }
.djwato-page .stage__topline,
.djwato-page .player-shell__heading,
.djwato-page .archive__footer,
.djwato-page .djwato-standalone-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; }
.djwato-page .stage__topline { color: var(--dj-c9); }

.djwato-page .now-playing { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: clamp(18px, 3vw, 48px); margin-top: auto; padding: clamp(50px, 9vh, 110px) 0 28px; }
.djwato-page .now-playing__number { color: var(--dj-cyan); font-family: var(--dj-display); font-size: clamp(7rem, 18vw, 16rem); font-weight: 800; line-height: .68; letter-spacing: -.11em; }
.djwato-page .now-playing__copy { min-width: 0; }
.djwato-page .eyebrow { margin: 0 0 10px; color: var(--dj-cyan); font-size: .64rem; letter-spacing: .15em; text-transform: uppercase; }
.djwato-page .now-playing h1,
.djwato-page .archive h2 { margin: 0; color: var(--dj-paper); font-family: var(--dj-display); font-weight: 800; letter-spacing: -.055em; text-transform: uppercase; }
.djwato-page .now-playing h1 { max-width: 13ch; color: var(--dj-paper); font-size: clamp(2.5rem, 6vw, 6.4rem); line-height: .92; overflow-wrap: anywhere; text-wrap: balance; }
.djwato-page .now-playing__meta { margin: 16px 0 0; color: var(--dj-c10); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }

.djwato-page .player-shell { width: min(780px, 100%); border: 1px solid var(--dj-c11); background: var(--dj-c12); backdrop-filter: blur(18px); }
.djwato-page .player-shell__heading { min-height: 38px; padding: 8px 12px; border-bottom: 1px solid var(--dj-line); color: var(--dj-muted); }
.djwato-page .channel-state { display: inline-flex; align-items: center; gap: 7px; color: var(--dj-paper); }
.djwato-page .channel-state i { width: 18px; height: 7px; display: inline-block; background: repeating-linear-gradient(90deg, var(--dj-cyan) 0 2px, transparent 2px 4px); }
.djwato-page .player-placeholder { width: 100%; min-height: 112px; display: flex; align-items: center; gap: 18px; padding: 18px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.djwato-page .player-placeholder:hover { background: var(--dj-c13); }
.djwato-page .player-placeholder__icon { width: 58px; height: 58px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--dj-cyan); background: var(--dj-cyan); color: var(--dj-black); }
.djwato-page .player-placeholder.is-loading .player-placeholder__icon { color: transparent; background: transparent; border-top-color: transparent; border-radius: 50%; animation: djwato-spin .8s linear infinite; }
.djwato-page .player-placeholder strong,
.djwato-page .player-placeholder small { display: block; }
.djwato-page .player-placeholder strong { font-family: var(--dj-display); text-transform: uppercase; }
.djwato-page .player-placeholder small { margin-top: 6px; color: var(--dj-muted); font-size: .68rem; }
.djwato-page #mixframe { color-scheme: light; width: 100%; min-height: 120px; display: block; border: 0; background: var(--dj-panel); }
.djwato-page .player-fallback { min-height: 112px; padding: 20px; border-left: 4px solid var(--dj-danger); background: var(--dj-c14); }
.djwato-page .player-fallback p { margin: 0 0 12px; }
.djwato-page .player-fallback a { color: var(--dj-danger); text-underline-offset: 4px; }
.djwato-page .stage__index { position: absolute; right: 22px; bottom: 20px; margin: 0; color: var(--dj-c15); font-size: .58rem; letter-spacing: .16em; writing-mode: vertical-rl; }

.djwato-page .archive { min-width: 0; display: flex; flex-direction: column; background: var(--dj-panel); }
.djwato-page .archive__header { min-height: 150px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 24px; border-bottom: 1px solid var(--dj-line); }
.djwato-page .archive h2 { font-size: clamp(2rem, 3.4vw, 3.5rem); line-height: .9; }
.djwato-page .archive__count { color: var(--dj-cyan); font-family: var(--dj-display); font-size: 3.3rem; font-weight: 800; line-height: .8; }
.djwato-page .mix-list { margin: 0; padding: 0; list-style: none; }
.djwato-page .mix-list li { border-bottom: 1px solid var(--dj-line); }
.djwato-page .mix-row { position: relative; width: 100%; min-height: 76px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 12px 18px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.djwato-page .mix-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--dj-cyan); transition: width 160ms ease; }
.djwato-page .mix-row:hover { background: var(--dj-c16); }
.djwato-page .mix-row[aria-current="true"] { background: var(--dj-cyan-dark); }
.djwato-page .mix-row[aria-current="true"]::before { width: 5px; }
.djwato-page .mix-row__number,
.djwato-page .mix-row__cue { color: var(--dj-muted); font-size: .66rem; }
.djwato-page .mix-row__copy { min-width: 0; }
.djwato-page .mix-row__copy strong,
.djwato-page .mix-row__copy small { display: block; }
.djwato-page .mix-row__copy strong { overflow: hidden; font-family: var(--dj-display); font-size: .9rem; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.djwato-page .mix-row__copy small { margin-top: 5px; color: var(--dj-muted); font-size: .6rem; text-transform: uppercase; }
.djwato-page .mix-row[aria-current="true"] .mix-row__number,
.djwato-page .mix-row[aria-current="true"] .mix-row__cue { color: var(--dj-cyan); }
.djwato-page .archive__footer { margin-top: auto; padding: 18px 20px; border-top: 1px solid var(--dj-line); color: var(--dj-muted); }
.djwato-page .djwato-standalone-footer { min-height: 44px; padding: 10px 24px; border-top: 1px solid var(--dj-line); color: var(--dj-c17); }
.djwato-page .djwato-standalone-footer a { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }

@keyframes djwato-pulse { to { box-shadow: 0 0 0 10px transparent; } }
@keyframes djwato-drift { to { transform: scale(1.1) translate3d(-1%,-1%,0); } }
@keyframes djwato-spin { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .djwato-page .djwato-standalone-header { grid-template-columns: 1fr auto; padding: 12px 16px; }
  .djwato-page .signal-label { display: none; }
  .djwato-page .deck { display: block; }
  .djwato-page .stage { min-height: 0; padding: 20px 16px 24px; border-right: 0; border-bottom: 1px solid var(--dj-line); }
  .djwato-page .now-playing { grid-template-columns: auto minmax(0,1fr); padding: 72px 0 22px; }
  .djwato-page .now-playing__number { font-size: clamp(5.5rem, 25vw, 9rem); }
  .djwato-page .archive__footer { margin-top: 0; }
}

@media (max-width: 560px) {
  .djwato-page .djwato-standalone-header { min-height: 64px; gap: 10px; }
  .djwato-page .wordmark__main { font-size: .95rem; }
  .djwato-page .wordmark__url { font-size: .44rem; }
  .djwato-page .consulting-link { font-size: .56rem; letter-spacing: .08em; }
  .djwato-page .stage__topline { font-size: .52rem; }
  .djwato-page .now-playing { grid-template-columns: 1fr; gap: 8px; padding: 48px 0 20px; }
  .djwato-page .now-playing__number { font-size: clamp(5.5rem, 30vw, 8rem); }
  .djwato-page .now-playing h1 { max-width: 100%; font-size: clamp(2rem, 10vw, 2.75rem); }
  .djwato-page .player-placeholder { min-height: 96px; padding: 14px; }
  .djwato-page .player-placeholder__icon { width: 48px; height: 48px; }
  .djwato-page .stage__index { display: none; }
  .djwato-page .archive__header { min-height: 116px; padding: 20px 16px; }
  .djwato-page .archive h2 { font-size: 2.3rem; }
  .djwato-page .mix-row { min-height: 72px; padding: 12px 14px; }
  .djwato-page .archive__footer,
  .djwato-page .djwato-standalone-footer { align-items: flex-start; flex-direction: column; }
  .djwato-page .djwato-standalone-footer { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .djwato-page *,
  .djwato-page *::before,
  .djwato-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.djwato-page .djwato-own-only { display: none; }
.djwato-own .djwato-page .djwato-own-only { display: grid; }
.djwato-own .topbar,
.djwato-own .site-header,
.djwato-own .site-footer,
.djwato-own .float-help,
.djwato-own .wide-mark { display: none !important; }
@media (max-width: 760px) {
  .djwato-page .djwato-standalone-header { grid-template-columns: 1fr auto; padding: 12px 16px; }
  .djwato-page .signal-label { display: none; }
}

.djwato-own .djwato-page .djwato-credit.djwato-own-only { display: flex; }