/* Frame and shared look of the animated stages (js/stage-kit.js). Colours
   follow the app like the rest of the page. Everything carries a k- prefix,
   so the stages never pick up the page's own .clip or .brand rules. The
   frame stays hidden until the script has built the stage, and on narrow
   screens, where a 1920 px scene shrinks below reading size.
   Those get the .k-fallback line instead. */

.k-frame {
  display: none; position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line); border-radius: 4px; background: var(--sunken);
}
@media (min-width: 900px) {
  .k-frame.k-on { display: block; }
}

/* What narrow screens see instead: the closing line of a stage as text. */
.k-fallback { display: none; }
@media (max-width: 899px) {
  .k-fallback { display: block; font-size: clamp(40px, 9vw, 72px); margin: 0 0 100px; }
}
@media (max-width: 760px) {
  .k-fallback { margin-bottom: 72px; }
}

.k-stage {
  --k-bg: #17191c; --k-panel: #212429; --k-panel-light: #1a1d21;
  --k-grid: #161616; --k-grid-line: #242424; --k-grid-bar: #3a3a3a;
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0;
  background: radial-gradient(ellipse 80% 70% at 50% 46%, #1d2024 0, var(--k-bg) 55%, #0f1113 100%);
  font-family: var(--sans); color: var(--text); line-height: normal;
}

/* Headings */
.k-kicker { font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.k-headline { font-family: var(--display); font-stretch: 68%; text-transform: uppercase; font-size: 88px; font-weight: 800; line-height: .92; }
.k-accent { color: var(--accent); }

/* DAW badges as in the app */
.k-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 22px; padding: 0 6px;
  border-radius: 4px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .02em; flex: none;
}
.k-badge.big { min-width: 52px; height: 32px; font-size: 18px; border-radius: 6px; }

/* Clip card as in the library */
.k-clip {
  position: absolute; display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--k-panel); overflow: hidden; box-shadow: 0 18px 40px #0008;
}
.k-clip.sel { border-color: var(--accent); background: var(--accent-wash); }
.k-clip .k-roll { position: relative; flex: none; background: var(--k-grid); }
.k-clip .k-grip {
  position: absolute; left: 8px; width: 8px; height: 16px;
  background: radial-gradient(circle, var(--text-faint) 1.4px, transparent 1.6px) 0 0 / 4px 5.3px;
}
.k-clip .k-body { position: relative; padding: 10px 14px 12px 26px; flex: 1; }
.k-clip .k-name { font-size: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 30px; }
.k-clip .k-meta {
  margin-top: 5px; font-size: 14px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 7px;
}
.k-clip .k-role { letter-spacing: .06em; }
.k-clip .k-count { position: absolute; right: 12px; top: 10px; font-size: 14px; color: var(--text-dim); }

/* Note picture and waveform */
.k-note { position: absolute; background: var(--accent); border-radius: 1px; }
.k-barline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--k-grid-bar); }
.k-beatline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--k-grid-line); }
.k-wavebar { position: absolute; background: #d17d2c; border-radius: 1px; }