@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Kalam:wght@300;400;700&family=Patrick+Hand&family=Permanent+Marker&family=Rock+Salt&family=Shadows+Into+Light&family=Nanum+Pen+Script&family=VT323&display=swap');@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700;800&family=Space+Grotesk:wght@500;600;700;800;900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');body{
  background-color: #750400;
  margin:0;
  
  background-image:url(
"https://media.freestocktextures.com/cache/ee/a7/eea7053352caf594e5ab1a7c3667e75d.jpg"  
  )
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}

.imgct {
  overflow: hidden;
  margin-right: 0px;
  margin-left: 23px;
  margin-top: 0px;
  float: left;
  position: absolute;
}

.imgct img {
  /*! grid-area: image; */
  position: relative;
  width: 120px;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 60px;
  border: 3px solid #fff;
  float: left;
}



.bookshelf {
  width: 900px;
  margin: 5rem auto;
  text-align: center;
  position: relative;
}

.bookshelf.first{
  margin-top:150px;
}



.book-grid {
  z-index: 2;
  position: relative;
  transform: translateY(-15px);
}
.book-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.book-grid ul li {
  justify-self: center;
}
.book-grid ul img {
  display: block;
  box-shadow: 3px 5px 18px 2px rgba(0, 0, 0, 0.6);
  width: 200px;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
}

.shelf-shadows {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  border-radius: 2px;
  z-index: 1;
  box-shadow: 0px -5px 3px 0px rgba(170, 170, 170, 0.2), 0px 15px 20px 0px rgba(39, 3, 3, 0.83), 0px 5px 5px 0px rgba(119, 119, 119, 0.3);
}

.shelf {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  background-color: #f9f9f9;
  border-radius: 2px;
  z-index: 3;
}
/*
 * THE TAPE WALL.
 *
 * It stands in the space the drum board, the TV and the melody board used to
 * share, so it is sized to fill that block rather than to sit inside it. The
 * cassettes are the only bright thing; everything else is the rack they sit
 * in, which is why the head and foot are quiet type on the theme's own ground.
 */

/*
 * ONE PANEL HEIGHT for the whole co-producer board. The tape wall sets it and
 * the remix deck matches it, so switching between them doesn't make the page
 * jump — the panel is a fixed window in the desk, and only its contents
 * change. Declared on the theme root so any panel can read it.
 */
[data-cp-theme] { --cp-shelf-h: 520px; }
@media (max-width: 1024px) { [data-cp-theme] { --cp-shelf-h: 400px; } }
@media (max-width: 640px) { [data-cp-theme] { --cp-shelf-h: 300px; } }

.tg-wrap {
  position: relative;
  width: 100%;
  /* The tapes ARE the panel — they run the full height of the block the
     genre board used to own, edge to edge. The title and the readout float
     over them rather than taking rows away from them. */
  height: var(--cp-shelf-h, 520px);
  color: var(--cp-text, #e8e8f0);
  /* The shelf is 78 tapes wide. An IN-FLOW scroller that wide makes every
     ancestor compute an intrinsic width to match — and one of the studio's
     wrappers is a flex item with `min-width: auto`, which refuses to shrink
     below its content, so the whole panel blew out to 19,000px and the rail
     had nothing left to scroll. The rail is absolutely positioned inside
     .tg-shelf below, which takes it out of intrinsic sizing entirely, so
     this works no matter what the studio wraps it in. */
  overflow: hidden;
}

/* The band the shelf lives in — now the whole panel. */
.tg-shelf {
  position: absolute;
  inset: 0;
}

/* PULL A TAPE stays put while the shelf moves under it. The scrim is what
   keeps it readable: these cassettes are photographs and some of them are
   nearly white, so plain text over them would disappear on a yellow one. */
.tg-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px 26px;
  flex-wrap: wrap;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--cp-ground, #0b0b10) 88%, transparent) 0%,
    color-mix(in srgb, var(--cp-ground, #0b0b10) 60%, transparent) 55%,
    transparent 100%
  );
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.tg-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--cp-accent, #b97a1e);
}

.tg-sub {
  font-size: 13px;
  opacity: 0.62;
}

/* ---- the shelf ---------------------------------------------------------- */

.tg-rail {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  gap: 18px;
  /* The scroll position is driven by the rAF loop, so the browser must not
     also animate it — `auto`, never `smooth`. */
  overflow-x: hidden;
  overflow-y: hidden;
  scroll-behavior: auto;
  cursor: grab;
  /* A drag across tapes is a shelf drag, not a text selection or an image
     drag, and on glass it must not become a page scroll. */
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  /* Fade the ends so the strip reads as continuing past the frame rather
     than being cut off by it. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.tg-rail:active { cursor: grabbing; }

.tg-item {
  position: relative;
  /* Full height of the panel, square because the cassettes are. Sizing off
     the height rather than a fixed width means the shelf fills whatever room
     the studio gives it without a media query per size. */
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  will-change: transform;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.tg-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.tg-item:active { transform: translateY(-1px) scale(0.985); }

.tg-item:focus-visible {
  outline: 2px solid var(--cp-accent, #b97a1e);
  outline-offset: 3px;
}

.tg-item img {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Wider than the frame precisely so the parallax has somewhere to travel;
     at 100% the counter-translate would expose the edges. */
  width: 130%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: translate(-50%, -50%);
  will-change: transform;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ---- what you just pulled ----------------------------------------------- */

.tg-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 26px 18px 14px;
  font-size: 14px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--cp-ground, #0b0b10) 88%, transparent) 0%,
    color-mix(in srgb, var(--cp-ground, #0b0b10) 60%, transparent) 55%,
    transparent 100%
  );
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.tg-hint { opacity: 0.5; }

.tg-now {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.tg-now b {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cp-accent, #b97a1e);
}

.tg-now i {
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}

.tg-now em {
  font-style: normal;
  opacity: 0.45;
  font-size: 13px;
}

/* The recipe the tape drew, ahead of the two sounds it rolled from it. */
.tg-now u {
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--cp-accent, #b97a1e) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--cp-accent, #b97a1e) 45%, transparent);
  opacity: 0.9;
}

/* ---- narrower rooms ------------------------------------------------------ */

/* The items size off the panel height, so a smaller room only needs the
   panel to shrink — the tapes follow on their own. */
@media (max-width: 1024px) {
  .tg-title { font-size: 22px; }
}

@media (max-width: 640px) {
  .tg-rail { gap: 12px; }
  .tg-head { padding: 10px 12px 22px; }
  .tg-foot { padding: 22px 12px 10px; }
  .tg-title { font-size: 20px; }
  .tg-sub { font-size: 12px; }
}
/* Add credits — lifted from producer.nspire.studio's own sheet.
   These values were read off the live stylesheet, not eyeballed from a
   screenshot: same widths, same radii, same greys, same blue. Keep them in
   step with the Co-Producer page rather than tuning them here. */

.modalwrap {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  /* The desk sets its own font; the sheet is Apple-plain like the original. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: #1d1d1f;
}
.modaldim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .4);
  animation: nsp-fadein .25s ease both;
}
.modal {
  position: relative;
  width: 440px; max-width: 92vw;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
  padding: 30px 30px 26px;
  animation: nsp-risein .35s cubic-bezier(.2, .85, .25, 1) both;
}
@keyframes nsp-fadein { from { opacity: 0 } to { opacity: 1 } }
@keyframes nsp-risein {
  from { opacity: 0; transform: translateY(22px) }
  to { opacity: 1; transform: none }
}
@media (prefers-reduced-motion: reduce) {
  .modal, .modaldim { animation: none }
}

.modh { font-size: 24px; font-weight: 700; letter-spacing: -.02em }
.modsub { font-size: 14px; color: #6e6e73; margin: 5px 0 22px }

.amtrow { display: flex; gap: 10px; margin-bottom: 18px }
.amtchip {
  flex: 1; height: 64px;
  border: 1.5px solid #d2d2d7; border-radius: 15px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; font-weight: 600; gap: 2px;
}
.amtchip.on { border-color: #0071e3; background: #f0f7ff; color: #0071e3 }
.amtbig { font-size: 19px; letter-spacing: -.01em }
.amtsm { font-size: 11px; color: #86868b; font-weight: 500 }
.amtchip.on .amtsm { color: #0071e3 }
/* What the pack actually buys. Quieter than the credit count because it is a
   yardstick, not a contract — rooms can set their own rate. */
.amtmin { display: block; font-size: 10px; color: #a1a1a6; margin-top: 2px; line-height: 1.3 }
.amtchip.on .amtmin { color: #0071e3; opacity: 0.75 }

.stepper {
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid #e3e3e8; border-radius: 15px;
  padding: 10px 14px; margin-bottom: 8px;
}
.stepbtn {
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: #f0f0f2; font-size: 22px; cursor: pointer; color: #1d1d1f;
  font-family: inherit; line-height: 1;
}
.stepbtn:hover { background: #e6e6ea }
.stepval { text-align: center }
.stepamt { font-size: 30px; font-weight: 700; letter-spacing: -.02em }
.stepcred { font-size: 12px; color: #86868b }
.stepmin { font-size: 11px; color: #a1a1a6; margin-top: 1px }

.creditcosts { background: #f5f5f7; border-radius: 14px; padding: 6px 16px; margin: 2px 0 16px }
.ccrow {
  display: flex; justify-content: space-between; font-size: 13px;
  padding: 7px 0; border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.ccrow:last-child { border-bottom: 0 }
.ccrow span { color: #86868b }
.ccrow b { font-weight: 600 }

.moderr { font-size: 13px; color: #c0362c; margin: 0 0 10px }

.modprime {
  width: 100%; height: 52px; border: 0; border-radius: 13px;
  background: #0071e3; color: #fff;
  font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.modprime:hover:not(:disabled) { background: #0077ed }
.modprime:disabled { opacity: .6; cursor: default }
/*
 * THE 808 — an FL Studio-shaped piano roll and sound editor for the 808 track.
 *
 * The palette is not invented: every colour below was sampled out of
 * Image-Line's own piano roll screenshot (the manual's `pianoroll_general.png`)
 * so the grid, the note gradient and the ruler read as the real thing rather
 * than as "dark blue, roughly". Notes are a top-lit gradient with a single
 * dark bottom edge — that one detail is most of why an FL note looks like an
 * FL note.
 *
 * The deck sits in the SAME dock as the samplers and the remix deck
 * (--spotify-menu-*), so opening it swaps the panel rather than floating a
 * window over the desk.
 */

.e8 {
  --e8-chrome: #48575e;
  --e8-chrome-d: #3b484f;
  --e8-chrome-l: #55656d;
  --e8-ruler: #20343e;
  --e8-bar-a: #2c4a56;
  --e8-bar-b: #36535f;
  --e8-row-b: #2e4c58;
  --e8-line: #032834;
  --e8-line-soft: #284452;
  --e8-note-hi: #b4ffd4;
  --e8-note-lo: #99efbd;
  --e8-note-edge: #6fad88;
  --e8-note-sel-hi: #d6e4ff;
  --e8-note-sel-lo: #b1cff4;
  --e8-note-sel-edge: #7d95bd;
  --e8-ghost: #5a7681;
  --e8-key-w: #e6edf4;
  --e8-key-b: #494b4d;
  --e8-text: #cfd8de;
  --e8-dim: #8fa3ad;
  --e8-amber: #ffb340;
  --e8-red: #ff4d4d;
  /* Reserved for the roll's scrollbar so the ruler and the velocity lane stay
     column-aligned with the grid instead of drifting by a scrollbar width. */
  --e8-sbw: 9px;
  --e8-gutter: 46px;

  position: fixed;
  /* Flush to the band's top edge, unlike the sampler decks: they give up a
     chrome strip to `.sdh-switch`, and this deck has no device switcher to
     put there. */
  top: var(--spotify-menu-top, 53.3vh);
  bottom: var(--spotify-menu-bottom, 0px);
  left: calc(var(--spotify-menu-left, 0px) + var(--soundcraft-width, 95px));
  right: var(--spotify-menu-right, 0px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 12px;
  overflow: hidden;
  background: var(--e8-chrome-d);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* impeccable-disable-line overused-font -- matches the referenced product's UI face */
  font-size: 11px;
  color: var(--e8-text);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */

.e8-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  flex: 0 0 30px;
  padding: 0 8px;
  background: linear-gradient(#525f66, #47555c);
  box-shadow: inset 0 -1px 0 #2f3a40;
  /* Scrolls rather than clipping. In a narrow window this row is wider than
     the deck, and without this the chips on the right end — NEW, CLEAR, close —
     were simply unreachable. */
  overflow-x: auto;
  scrollbar-width: none;
}
.e8-bar::-webkit-scrollbar { height: 0; }
/* Nothing in the bar may shrink into illegibility to make room. */
.e8-bar > * { flex: none; }
.e8-title { flex: 1 1 auto !important; }

.e8-tools { display: flex; gap: 2px; }

.e8 button {
  /* The app ships two unscoped `!important` button rules (a 44px mobile floor
     and 12px of padding). This deck's furniture is silkscreen, not thumb
     targets, so every button here states its own box. */
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.e8-tool {
  all: unset;
  box-sizing: border-box;
  width: 24px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  cursor: pointer;
  color: #d6dee3;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.e8-tool:hover { background: #5d6b73; }
.e8-tool.is-on { background: #2c3a41; color: var(--e8-amber); box-shadow: inset 0 0 0 1px #232f35; }

.e8-sep { width: 1px; height: 18px; background: #384349; margin: 0 3px; }

.e8-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #e8eef2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.e8-title b { color: var(--e8-amber); font-weight: 600; }
.e8-readout { display: inline-flex; align-items: baseline; gap: 10px; font-size: 11px; }
.e8-readout b { font-size: 12px; }
.e8-readout i { font-style: normal; color: #a8b8c1; }
.e8-readout .e8-readout-slide { color: #9fe6bd; }

.e8-chip {
  all: unset;
  box-sizing: border-box;
  height: 22px;
  padding: 0 10px !important;
  display: inline-grid;
  place-items: center;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #e6edf1;
  background: #5a6870;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px #313d43;
  -webkit-tap-highlight-color: transparent;
}
.e8-chip:hover { background: #67757e; }
.e8-chip:active { background: #4b585f; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4); }
.e8-chip.is-on { background: #7a5a1e; color: #ffe2ac; }
.e8-chip.is-danger { background: #6b3535; color: #ffd3d3; }
.e8-chip.is-danger:hover { background: #7d3d3d; }
.e8-chip[disabled] { opacity: 0.4; cursor: default; }

.e8-select {
  height: 22px;
  border: 0;
  border-radius: 3px;
  background: #2c3a41;
  color: #d9e2e7;
  font: inherit;
  font-size: 10px;
  padding: 0 4px;
  box-shadow: inset 0 0 0 1px #222d33;
  cursor: pointer;
}
.e8-label { font-size: 9px; letter-spacing: 0.1em; color: var(--e8-dim); }

/* ── Body: roll on the left, sound editor on the right ────────────────── */

.e8-body { flex: 1; min-height: 0; display: flex; }

.e8-roll {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--e8-bar-a);
}

/* Ruler */
.e8-ruler-row { display: flex; height: 20px; flex: 0 0 20px; padding-right: var(--e8-sbw); }
.e8-ruler-gutter { width: var(--e8-gutter); flex: 0 0 var(--e8-gutter); background: var(--e8-chrome); }
.e8-ruler {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--e8-ruler);
  overflow: hidden;
  cursor: default;
}
.e8-ruler-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid #4c6874;
  padding-left: 4px;
  font-size: 9px;
  line-height: 20px;
  color: #93aab5;
}

/* The scrolling roll */
.e8-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
}
.e8-scroll::-webkit-scrollbar { width: var(--e8-sbw); }
.e8-scroll::-webkit-scrollbar-track { background: #2a353b; }
.e8-scroll::-webkit-scrollbar-thumb { background: #5d6b73; border-radius: 5px; }

.e8-scroll-inner { display: flex; position: relative; }

/* Preview keyboard */
.e8-keys {
  width: var(--e8-gutter);
  flex: 0 0 var(--e8-gutter);
  position: relative;
  background: var(--e8-key-b);
  z-index: 27; /* over the grid rows, which the app's global button rule lifts */
}
.e8-key {
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  box-sizing: border-box;
}
/* The degree strip. Not a keyboard — see the note in the component. */
.e8-deg {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 7px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8ea3ae;
  background: #3f4d55;
  box-shadow: inset 0 -1px 0 #333f46;
}
.e8-deg[data-root='oct'] { color: #cbd9e1; background: #47565e; }
.e8-deg[data-root='1'] { color: #2a2013; background: var(--e8-amber); }
.e8-deg:hover { filter: brightness(1.18); }
.e8-deg.is-lit { background: #ffd89a !important; color: #2a2013; }

/* Grid */
.e8-grid { position: relative; flex: 1; min-width: 0; overflow: hidden; touch-action: none; }
.e8-grid.is-locked { cursor: not-allowed; }
.e8-row { position: absolute; left: 0; right: 0; }
/* Every row is in key now, so the shading marks the LADDER instead: the tonic
   you are writing against, and the octaves either side of it. */
.e8-row { background: var(--e8-bar-b); box-shadow: inset 0 -1px 0 rgba(3, 40, 52, 0.35); }
.e8-row[data-root='oct'] { background: var(--e8-row-b); }
.e8-row[data-root='1'] {
  background: var(--e8-row-b);
  background-image: linear-gradient(rgba(255, 179, 64, 0.12), rgba(255, 179, 64, 0.12));
  box-shadow: inset 0 -1px 0 #22414d, inset 0 1px 0 #22414d;
}

.e8-vline { position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; }
.e8-vline[data-kind='bar'] { background: var(--e8-line); }
.e8-vline[data-kind='beat'] { background: var(--e8-line-soft); }
.e8-vline[data-kind='step'] { background: rgba(3, 40, 52, 0.35); }

.e8-note {
  position: absolute;
  border-radius: 1px;
  /* Per-note tint set inline from the scale degree; falls back to FL's green
     if a note somehow renders without one. */
  background: linear-gradient(var(--e8-n-hi, var(--e8-note-hi)), var(--e8-n-lo, var(--e8-note-lo)));
  border-bottom: 1px solid var(--e8-n-edge, var(--e8-note-edge));
  box-shadow: 0 0 0 1px rgba(3, 40, 52, 0.55);
  font-size: 8px;
  line-height: 1;
  color: #26543c;
  padding: 2px 0 0 3px;
  overflow: hidden;
  white-space: nowrap;
  cursor: grab;
  box-sizing: border-box;
  /* Above the global `button { z-index: 25 !important }` rule — without this
     any control painted underneath would swallow the note's pointer events. */
  z-index: 28;
}
.e8-note.is-sel {
  /* Selection outranks the degree tint — you need to see what you picked. */
  background: linear-gradient(var(--e8-note-sel-hi), var(--e8-note-sel-lo)) !important;
  border-bottom-color: var(--e8-note-sel-edge) !important;
  color: #2c3f5e;
  box-shadow: 0 0 0 1px #f0f6ff;
}
.e8-note.is-ghost { background: var(--e8-ghost); border-bottom-color: #46606b; color: #b8ccd5; cursor: default; }
.e8-note-grip { position: absolute; top: 0; right: 0; bottom: 0; width: 6px; cursor: ew-resize; }
/* FL marks a slide note with a triangle in its corner. Same idea, same corner. */
.e8-note-slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 5px solid rgba(20, 60, 40, 0.75);
  border-right: 5px solid transparent;
  pointer-events: none;
}
.e8-note.is-sel .e8-note-slide { border-top-color: rgba(30, 45, 80, 0.8); }

.e8-marquee {
  position: absolute;
  z-index: 29;
  border: 1px solid #cfe6ff;
  background: rgba(160, 200, 255, 0.16);
  pointer-events: none;
}

.e8-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ff453a;
  box-shadow: 0 0 6px rgba(255, 69, 58, 0.8);
  pointer-events: none;
  z-index: 30;
}

/* Velocity lane (FL's Event Editor) */
.e8-vel-row {
  display: flex;
  height: 68px;
  flex: 0 0 68px;
  padding-right: var(--e8-sbw);
  box-shadow: inset 0 1px 0 #22323a;
}
.e8-vel-gutter {
  width: var(--e8-gutter);
  flex: 0 0 var(--e8-gutter);
  background: var(--e8-chrome);
  display: grid;
  place-items: center;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #b7c4cb;
}
.e8-vel {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--e8-bar-b);
  overflow: hidden;
  touch-action: none;
}
.e8-stem { position: absolute; bottom: 0; width: 1px; background: #7fe0aa; z-index: 28; }
.e8-stem.is-sel { background: #b1cff4; }
.e8-stem-head {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a4f3c8;
  box-shadow: 0 0 0 1px #2b4a3a;
  cursor: ns-resize;
}
.e8-stem.is-sel .e8-stem-head { background: #b1cff4; }
.e8-vel-tail { position: absolute; height: 1px; background: rgba(127, 224, 170, 0.45); }

/* ── Sound editor rail ────────────────────────────────────────────────── */

/* Two columns, because the dock is short. The rail has to hold the sub, the
   levels, the EQ and the snapshot drawer inside roughly 400px of height — a
   single column made three of the four scroll out of sight, which is the one
   thing a sound editor must never do. SUB and LEVELS share the top row; the
   EQ and the snapshots take the full width under them. */
.e8-rail {
  width: 420px;
  flex: 0 0 420px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 6px;
  padding: 6px;
  overflow-y: auto;
  background: var(--e8-chrome-d);
  box-shadow: inset 1px 0 0 #2b353b;
}
.e8-rail > .e8-wide { grid-column: 1 / -1; }
.e8-rail::-webkit-scrollbar { width: 9px; }
.e8-rail::-webkit-scrollbar-track { background: #2a353b; }
.e8-rail::-webkit-scrollbar-thumb { background: #5d6b73; border-radius: 5px; }

/* FL's section frame: a notched tab carrying the name, then the body. */
.e8-panel { background: var(--e8-chrome); border-radius: 4px; box-shadow: inset 0 0 0 1px #2f3a40; }
.e8-panel-head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 10px 0 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #dfe7ec;
  background: var(--e8-chrome-l);
  border-radius: 4px 10px 0 0;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 96px;
}
.e8-panel-head small { color: #b3c1c9; letter-spacing: 0.04em; font-size: 9px; margin-left: 2px; }
.e8-panel-body { padding: 7px; display: flex; flex-direction: column; gap: 6px; }

.e8-row-2 { display: flex; gap: 6px; align-items: center; }
.e8-grow { flex: 1; min-width: 0; }

/* Wave strip for the loaded sub — also the drop target for your own 808s. */
.e8-wave { width: 100%; height: 28px; display: block; background: #23313a; border-radius: 3px; }
.e8-drop { position: relative; border-radius: 3px; }
.e8-drop-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 3px;
  border: 1px dashed #4a606d;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #6f8593;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.e8-drop:hover .e8-drop-hint { opacity: 1; background: rgba(20, 30, 36, 0.55); }
.e8-drop.is-over .e8-drop-hint {
  opacity: 1;
  border-color: var(--e8-amber);
  color: var(--e8-amber);
  background: rgba(20, 30, 36, 0.8);
}
.e8-drop-note { font-size: 9px; line-height: 1.4; color: #9fd8b4; }

/* CRATE / YOURS shelves on the SUB panel's tab. */
.e8-tab {
  all: unset;
  box-sizing: border-box;
  height: 14px;
  padding: 0 6px !important;
  min-height: 0 !important;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  cursor: pointer;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #9fb0ba;
  background: #3d4a51;
}
.e8-tab.is-on { background: var(--e8-amber); color: #2a2013; font-weight: 700; }

/* Knobs */
.e8-knobs { display: flex; gap: 4px; justify-content: space-around; padding: 3px 0 1px; }
.e8-knob { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 62px; }
.e8-knob canvas { cursor: ns-resize; touch-action: none; }
.e8-knob-name { font-size: 9px; letter-spacing: 0.1em; color: var(--e8-dim); }
.e8-knob-val { font-size: 10px; color: var(--e8-amber); font-variant-numeric: tabular-nums; }

/* EQ */
.e8-eq { width: 100%; height: 76px; display: block; background: #22303a; border-radius: 3px; cursor: crosshair; touch-action: none; }
.e8-eq-legend { display: flex; gap: 8px; font-size: 9px; color: var(--e8-dim); align-items: center; }
.e8-eq-legend span b { font-weight: 600; }
/* The chip sets this row's height, and the rail is fitted to the dock to the
   pixel — a 22px chip here is what pushes the whole rail into a scrollbar. */
.e8-eq-legend .e8-chip { height: 18px; padding: 0 8px !important; }
.e8-eq-legend i { font-style: normal; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; }

.e8-empty-roll {
  position: absolute;
  inset: 0;
  z-index: 31;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(24, 38, 45, 0.72);
  pointer-events: none;
  text-align: center;
}
.e8-empty-roll b { font-size: 12px; letter-spacing: 0.16em; color: var(--e8-amber); }
.e8-empty-roll span { font-size: 10px; color: #9fb2bc; }

/* Rail groups. `hidden` on a grid child still participates in layout, so the
   panels that are not showing are taken out of flow explicitly. */
.e8-rail > [hidden] { display: none !important; }
.e8-railtabs { display: flex; gap: 3px; }
.e8-railtab {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  height: 20px;
  min-height: 0 !important;
  display: grid;
  place-items: center;
  border-radius: 3px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #9fb0ba;
  background: #313d44;
}
.e8-railtab:hover { background: #3a474f; color: #d5e0e6; }
.e8-railtab.is-on { background: var(--e8-chrome); color: #ffd08a; box-shadow: inset 0 -2px 0 var(--e8-amber); }

/* Style radios — flip one while the beat runs and the line is rewritten. */
.e8-styles { display: flex; gap: 4px; }
.e8-style {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  height: 22px;
  min-height: 0 !important;
  display: grid;
  place-items: center;
  border-radius: 3px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #b9c7cf;
  background: #2c3a41;
  box-shadow: inset 0 0 0 1px #222d33;
}
.e8-style:hover:not([disabled]) { background: #35454d; color: #e2ebf0; }
.e8-style.is-on {
  background: var(--e8-amber);
  color: #2a2013;
  box-shadow: inset 0 0 0 1px #8a5f18, 0 0 8px rgba(255, 179, 64, 0.35);
}
.e8-style[disabled] { opacity: 0.4; cursor: default; }

/* Snapshots */
.e8-input {
  flex: 1;
  min-width: 0;
  height: 22px;
  border: 0;
  border-radius: 3px;
  background: #2c3a41;
  color: #dfe7ec;
  font: inherit;
  font-size: 10px;
  padding: 0 6px;
  box-shadow: inset 0 0 0 1px #222d33;
}
.e8-input::-moz-placeholder { color: #6d818c; }
.e8-input::placeholder { color: #6d818c; }
.e8-hint { font-size: 9px; color: #778b95; line-height: 1.45; }

/* ── Context menu ─────────────────────────────────────────────────────── */

.e8-menu-catch { position: fixed; inset: 0; z-index: 300; }
.e8-menu {
  position: fixed;
  z-index: 301;
  width: 206px;
  max-height: 460px;
  overflow-y: auto;
  padding: 3px;
  border-radius: 4px;
  background: #3f4c53;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 0 0 1px #232d33;
}
.e8-menu::-webkit-scrollbar { width: 8px; }
.e8-menu::-webkit-scrollbar-thumb { background: #5d6b73; border-radius: 4px; }
.e8-menu-head {
  padding: 6px 8px 3px;
  font-size: 8px;
  letter-spacing: 0.16em;
  color: #8fa3ad;
}
.e8-menu-sep { height: 1px; margin: 3px 6px; background: #4d5b63; }
.e8-menu-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 21px;
  padding: 0 8px !important;
  min-height: 0 !important;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  color: #e2e9ee;
}
.e8-menu-item em { font-style: normal; font-size: 9px; color: #93a6b0; }
.e8-menu-item:hover:not([disabled]) { background: #5b6d77; }
.e8-menu-item:hover:not([disabled]) em { color: #cfdae1; }
.e8-menu-item[disabled] { opacity: 0.35; cursor: default; }

.e8-tool[disabled] { opacity: 0.3; cursor: default; }
.e8-tool[disabled]:hover { background: transparent; }
.e8-error {
  font-size: 9px;
  line-height: 1.4;
  color: #ffb0b0;
  background: #3a2323;
  border-radius: 3px;
  padding: 4px 6px;
}

/* ── Phones ───────────────────────────────────────────────────────────── */

/* ── Narrow windows ───────────────────────────────────────────────────── */
/* The deck is desktop furniture — on a phone the app runs MinimalMobileTheme
   and never mounts it — so this is about a narrow or split-screen window, not
   about pretending to be a phone. Goal: nothing unreachable. */
@media (max-width: 900px) {
  .e8-body { flex-direction: column; }
  .e8-rail {
    /* Was `flex-direction: column`, which did nothing once the rail became a
       grid. Collapsing to ONE column is what actually stacks it. */
    width: auto;
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    box-shadow: inset 0 1px 0 #2b353b;
  }
  .e8-rail > .e8-wide { grid-column: auto; }
  .e8-roll { flex: 1 1 auto; min-height: 170px; }
  /* Give the roll its height back: at this size the velocity lane is a
     secondary control and the notes are the thing you are looking at. */
  .e8-vel-row { height: 46px; flex: 0 0 46px; }
  .e8-knob { width: 54px; }
  .e8-knobs { gap: 2px; }
}
/* FX Menu Styling */
.fx-menu-container {
  position: fixed;
  /* Docked to the measured panel band, like every other menu. It used to be
     `bottom: 0; height: 48vh`, sized from the FLOOR up — so its top edge landed
     wherever 48% of the window happened to fall and only met the mixer by
     coincidence. Anchoring top AND bottom makes it meet the mixer every time. */
  top: var(--spotify-menu-top, 52vh);
  bottom: var(--spotify-menu-bottom, 0px);
  left: calc(var(--spotify-menu-left, 10px) + var(--soundcraft-width, 85px));
  right: var(--spotify-menu-right, 0px);
  background-color: #111111; /* Dark background to show shadows better */
  color: #fff;
  padding: 12px 8px 24px 8px; /* Reduced top padding from 16px to 12px */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow-x: auto; /* Allow horizontal scrolling if needed */
  overflow-y: hidden; /* Prevent vertical scrolling */
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  z-index: 1500; /* Ensure it's above other elements */
}

/* iPad-specific adjustments - reduce height so top doesn't cover transport */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
  .fx-menu-container {
    /* iPad keeps the old floor-up sizing, so it must release the band's top
       and right — top + bottom + height together is over-constrained. */
    top: auto;
    right: auto;
    width: calc(100% - 120px);
    height: 42vh; /* Increased height for iPad - brings top up a bit */
    bottom: 0; /* Keep anchored to bottom */
  }
}

/* Top row buttons */
.fx-top-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 8px;
}

/* Toggle Button Styling - 3D Mechanical Style */
@keyframes ledBlink {
  0% { opacity: 0.4; box-shadow: 0 0 2px #ff3300, 0 0 4px #ff3300; }
  50% { opacity: 1; box-shadow: 0 0 4px #ff3300, 0 0 8px #ff3300, 0 0 12px #ff5500; }
  100% { opacity: 0.4; box-shadow: 0 0 2px #ff3300, 0 0 4px #ff3300; }
}

.fx-button {
  background: linear-gradient(to bottom, #222, #000);
  color: white;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 8px;
  min-width: 70px;
  height: 60px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.7), 
    0 8px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

/* LED indicator only for toggle buttons */
.fx-button:before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #333;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
  transition: background-color 0.2s;
}

/* Remove LED from non-toggle buttons */
.non-toggle-button:before {
  display: none;
}

.fx-button:hover {
  background: linear-gradient(to bottom, #333, #111);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.8), 
    0 10px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}

/* Special styling for reset button */
.reset-button {
  background: linear-gradient(to bottom, #700, #500);
  border-color: #800;
}

.reset-button:hover {
  background: linear-gradient(to bottom, #800, #600);
}

/* Special styling for return button */
.return-button {
  background: linear-gradient(to bottom, #005, #003);
  border-color: #006;
}

.return-button:hover {
  background: linear-gradient(to bottom, #006, #004);
}

.fx-button.active {
  background: linear-gradient(to bottom, #e0e0e0, #c0c0c0) !important;
  color: #000 !important;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.5), 
    inset 0 1px 10px rgba(255, 255, 255, 0.4),
    inset 0 0 5px rgba(255, 255, 255, 0.8);
  transform: translateY(1px);
  border-color: #aaa;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

.fx-button.active:before {
  background-color: #ff3300;
  box-shadow: 0 0 4px #ff3300, 0 0 8px #ff5500;
  animation: ledBlink 1.5s infinite;
}

.fx-button.reset-button {
  background: linear-gradient(to bottom, #3a62ce, #2a52be);
  border: 1px solid #4a72de;
}

.fx-button.reset-button:hover {
  background: linear-gradient(to bottom, #4a72de, #3a62ce);
}

.fx-button.reset-button.active:before {
  background-color: #00aaff;
  box-shadow: 0 0 4px #00aaff, 0 0 8px #00ccff;
}

.fx-button.return-button {
  background: linear-gradient(to bottom, #a942dc, #9932cc);
  border: 1px solid #b952ec;
}

.fx-button.return-button:hover {
  background: linear-gradient(to bottom, #b952ec, #a942dc);
}

.fx-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #444;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.fx-header-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fx-menu-header h2 {
  font-size: 1.5rem;
  margin: 0;
  color: #eee;
  text-shadow: 0 0 10px rgba(138, 43, 226, 0.7);
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.reset-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(to bottom, #444, #333);
  border: none;
  border-radius: 4px;
  color: #fff;
  padding: 5px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.reset-btn:hover {
  background: linear-gradient(to bottom, #555, #444);
  transform: translateY(-1px);
}

.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.fx-menu-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fx-action-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.fx-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  background: linear-gradient(to bottom, #444, #333);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  flex: 1;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  gap: 4px;
  font-size: 0.9rem;
}

.fx-button:hover {
  background: linear-gradient(to bottom, #555, #444);
  transform: translateY(-2px);
}

.fx-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.fx-button.active {
  background: linear-gradient(to bottom, #8A2BE2, #6A1CB5);
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.7);
}

.fx-button span {
  font-size: 0.9rem;
  font-weight: 500;
}

.random-fx {
  background: linear-gradient(to bottom, #8A2BE2, #663399);
}

.random-fx:hover {
  background: linear-gradient(to bottom, #9B30FF, #8A2BE2);
}

.reset-fx {
  background: linear-gradient(to bottom, #444, #333);
}

/* Faders grid */
.fx-faders-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  width: 100%;
  margin-top: 12px;
  overflow-x: visible;
  padding-bottom: 16px;
  gap: 0;
}

.fx-fader-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  width: 35px;
  flex: 0 0 auto;
  height: 180px;
  margin: 0 3px;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.fx-fader-item[data-fader-id="sp1200"] {
  width: 48px;
  margin: 0 6px;
}

/* Base fader label styles - now only used by WildFader */
.fx-fader-label {
  font-size: 13px;
  text-align: center;
  margin-bottom: 2px;
  color: #ccc;
  line-height: 1.1;
  transition: all 0.3s ease;
  position: relative;
}

/* Focus fader specific styling */
.focus-fader-active .wild-fader-label {
  filter: blur(var(--focus-blur));
  color: cyan;
  text-shadow: 0 0 10px rgba(0, 255, 255, var(--focus-glow));
}

/* Animation for Music Flip */
@keyframes flip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

.music-flip-active .fader-label {
  animation: flip 0.5s alternate infinite;
  color: #ff9900;
}

/* Animation for Music Chop */
@keyframes chop {
  0% { clip-path: inset(0% 0% 0% 0%); }
  25% { clip-path: inset(0% 0% 50% 0%); }
  50% { clip-path: inset(50% 0% 0% 0%); }
  75% { clip-path: inset(0% 50% 0% 0%); }
  100% { clip-path: inset(0% 0% 0% 50%); }
}

.music-chop-active .fader-label {
  animation: chop 0.2s step-end infinite;
  color: #ff3300;
}

/* Animation for Focus */
@keyframes blur {
  0% { filter: blur(0px); }
  100% { filter: blur(3px); }
}

.focus-active .fader-label {
  animation: blur 0.3s alternate infinite;
  color: #00ccff;
}

/* Animation for Stutter */
@keyframes stutter {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.stutter-active .fader-label {
  animation: stutter 0.1s linear infinite;
  color: #ff00cc;
}

/* Animation for Wavy */
@keyframes wave {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

.wavy-active .fader-label {
  animation: wave 0.5s ease-in-out infinite;
  color: #00ffcc;
}

/* Different font styles for each fader label */
.fx-fader-item:nth-child(1) .fader-label {
  font-family: 'Impact', sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: #ff5500;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.fx-fader-item:nth-child(2) .fader-label {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 14px;
  color: #00cc99;
  letter-spacing: 0.5px;
}

.fx-fader-item:nth-child(3) .fader-label {
  font-family: 'Arial', sans-serif;
  font-style: italic;
  font-size: 15px;
  color: #3399ff;
  text-shadow: 0 0 3px rgba(51, 153, 255, 0.5);
}

.fx-fader-item:nth-child(4) .fader-label {
  font-family: 'Georgia', serif;
  text-transform: uppercase;
  font-size: 13px;
  color: #ff3366;
  letter-spacing: 1px;
  font-weight: bold;
}

.fx-fader-item:nth-child(5) .fader-label {
  font-family: 'Verdana', sans-serif;
  letter-spacing: 1px;
  font-size: 14px;
  color: #ffcc00;
  text-shadow: 0 0 2px rgba(255, 204, 0, 0.6);
}

.fx-fader-item:nth-child(6) .fader-label {
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: #cc66ff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fx-fader-item:nth-child(7) .fader-label {
  font-family: 'Comic Sans MS', cursive;
  font-size: 14px;
  color: #ff66cc;
  transform: rotate(-2deg);
}

.fx-fader-item:nth-child(8) .fader-label {
  font-family: 'Tahoma', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 13px;
  color: #33cc33;
  letter-spacing: 1px;
  text-shadow: 0 0 2px rgba(51, 204, 51, 0.5);
}

.fx-fader-item:nth-child(9) .fader-label {
  font-family: 'Lucida Console', monospace;
  letter-spacing: 1px;
  font-size: 13px;
  color: #ff9900;
  text-transform: lowercase;
  font-weight: bold;
}

.fx-fader-item:nth-child(10) .fader-label {
  font-family: 'Palatino Linotype', serif;
  font-style: italic;
  font-size: 15px;
  color: #9966ff;
  text-shadow: 0 0 3px rgba(153, 102, 255, 0.5);
}

.fx-fader-item:nth-child(11) .fader-label {
  font-family: 'Arial Black', sans-serif;
  font-size: 13px;
  color: #00ccff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.fx-fader-item:nth-child(12) .fader-label {
  font-family: 'Century Gothic', sans-serif;
  letter-spacing: 1px;
  font-size: 14px;
  color: #cc3399;
  font-weight: bold;
}

.fx-fader-item:nth-child(13) .fader-label {
  font-family: 'Copperplate', fantasy;
  text-transform: uppercase;
  font-size: 13px;
  color: #66cc00;
  letter-spacing: 1.5px;
  text-shadow: 0 0 2px rgba(102, 204, 0, 0.5);
}

.fx-fader-item:nth-child(14) .fader-label {
  font-family: 'Brush Script MT', cursive;
  font-size: 16px;
  color: #ff3300;
  transform: rotate(-1deg);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.fx-fader-item:nth-child(15) .fader-label {
  font-family: 'Bookman Old Style', serif;
  font-weight: bold;
  font-size: 14px;
  color: #0099cc;
  text-transform: capitalize;
}

.fx-fader-item:nth-child(16) .fader-label {
  font-family: 'Garamond', serif;
  letter-spacing: 0.5px;
  font-size: 15px;
  color: #cc6600;
  font-style: italic;
  text-shadow: 0 0 2px rgba(204, 102, 0, 0.5);
}

.fx-fader-item:nth-child(17) .fader-label {
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
  color: #9900cc;
  letter-spacing: 0.5px;
  text-shadow: 0 0 3px rgba(153, 0, 204, 0.4);
}

/* Animations for special fader labels */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes stutter {
  0%, 100% { opacity: 1; transform: translateX(0); }
  25% { opacity: 0.7; transform: translateX(-2px); }
  50% { opacity: 0.9; transform: translateX(3px); }
  75% { opacity: 0.8; transform: translateX(-3px); }
}

@keyframes neonGlow {
  0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6; }
  50% { text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px #0073e6, 0 0 15px #0073e6; }
}

@keyframes flip {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}

@keyframes letterShuffle {
  0%, 100% { letter-spacing: normal; }
  50% { letter-spacing: 2px; }
}

/* Special fader label effects - activated based on fader value */
.fx-fader-label.stutter-active {
  animation: stutter 0.2s infinite;
}

.fx-fader-label.wavy-active {
  animation: wiggle 2s infinite;
}

.fx-fader-label.flip-active {
  animation: flip 1s;
}

.fx-fader-label.rise-active {
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff0080, 0 0 20px #ff0080;
}

.fx-fader-label.filter-active {
  opacity: 0.5;
}

.fx-fader-label.delay-active {
  position: relative;
}

.fx-fader-label.delay-active::after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  top: 2px;
  color: rgba(255, 255, 255, 0.3);
  z-index: -1;
}

.fx-fader-label.music-flip-active {
  transform: scale(-1, 1);
}

.fx-fader-value {
  font-size: 9px;
  color: #fff;
  margin-bottom: 4px;
  text-align: center;
  min-height: 12px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 2px 2px;
  border-radius: 2px;
  width: 30px;
}

/* SP1200 LED theme */
.wild-fader-lcd .wild-fader-track {
  background: #001a00 !important;
  border: 1px solid #00ff00 !important;
  box-shadow: inset 0 0 5px #00ff00 !important;
}

.wild-fader-lcd .wild-fader-thumb {
  background-color: #00ff00 !important;
  box-shadow: 0 0 8px #00ff00 !important;
}

.wild-fader-lcd .wild-fader-label {
  color: #00ff00 !important;
  text-shadow: 0 0 5px #00ff00 !important;
}

.buttons-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faders-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  padding-top: 8px;
}

.fx-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.2s;
  padding: 2px;
  min-width: 50px;
  max-width: 100px;
}

.fx-control h3 {
  font-size: 15px;
  margin: 0 0 2px 0;
  text-align: center;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.8);
}

/* Fader container styling */
.fader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100px; /* Fixed height for faders */
}

.fx-control:hover {
  transform: translateY(-1px);
}

.fx-menu {
  background: rgba(24, 24, 32, 0.95);
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(96, 96, 128, 0.3);
  z-index: 1000;
}

.fx-control h3 {
  margin: 0 0 6px 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: #ccc;
  text-align: center;
}

/* XY Pad Styling */
.xy-pad-container {
  width: 100%;
  height: 100px;
  background: #222;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  border: none;
}

.xy-pad-marker {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #8A2BE2;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.8);
  z-index: 2;
}

.xy-pad-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Toggle Button Styling - 3D Mechanical Style */
@keyframes ledBlink {
  0% { opacity: 0.4; box-shadow: 0 0 2px #ff3300, 0 0 4px #ff3300; }
  50% { opacity: 1; box-shadow: 0 0 4px #ff3300, 0 0 8px #ff3300, 0 0 12px #ff5500; }
  100% { opacity: 0.4; box-shadow: 0 0 2px #ff3300, 0 0 4px #ff3300; }
}

.fx-toggle-button {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #3a3a3a, #252525);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.15s ease;
}

/* LED indicator */
.fx-toggle-button::before {
  content: '';
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff3300;
  animation: ledBlink 1.5s infinite;
}

.fx-toggle-button:hover {
  background: linear-gradient(to bottom, #454545, #303030);
  transform: translateY(-1px);
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.fx-toggle-button:active, .fx-toggle-button.active {
  transform: translateY(1px);
  background: linear-gradient(to bottom, #252525, #1a1a1a);
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.fx-toggle-button.active::before {
  display: block;
}

.toggle-knob {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
  transition: transform 0.3s ease;
}

.fx-toggle-button.active .toggle-knob {
  transform: scale(1.1);
}

/* Rotary Dial Styling */
.fx-rotary-container {
  width: 60px;
  height: 60px;
  position: relative;
  cursor: pointer;
}

.fx-rotary-dial {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #444, #222);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 2px 3px rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s;
}

.fx-rotary-container.active .fx-rotary-dial {
  background: linear-gradient(135deg, #8A2BE2, #6A1CB5);
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.7);
}

.rotary-indicator {
  position: absolute;
  width: 3px;
  height: 30px;
  background: white;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: bottom;
  border-radius: 3px;
}

.fx-rotary-container.active .rotary-indicator {
  transform: translateX(-50%) rotate(180deg);
}

.rotary-icon {
  color: #ddd;
  opacity: 0.7;
}

/* Fader Styles */
.fader-container {
  width: 100%;
  padding: 5px;
  position: relative;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Base Fader Styling */
.fx-fader {
  width: 100%;
  height: 30px;
  position: relative;
  background: #333;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  cursor: pointer;
  border: none;
}

.fx-fader-handle {
  position: absolute;
  height: 100%;
  background: linear-gradient(to right, #8A2BE2, #6A1CB5);
  box-shadow: 0 0 5px rgba(138, 43, 226, 0.7);
  border-radius: 4px;
  top: 0;
  left: 0;
  pointer-events: none;
  transition: width 0.1s ease;
}

.fx-value-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.8rem;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
  z-index: 2;
  pointer-events: none;
}

/* Style Variations */
.fx-fader.neon {
  background: #222;
  height: 20px;
}

.fx-fader.neon .fx-fader-handle {
  background: linear-gradient(to right, #00fffc, #00ff62);
  box-shadow: 0 0 10px rgba(0, 255, 246, 0.7);
}

.fx-fader.fire {
  background: #331800;
  height: 25px;
}

.fx-fader.fire .fx-fader-handle {
  background: linear-gradient(to right, #ff5e00, #ffbb00);
  box-shadow: 0 0 10px rgba(255, 94, 0, 0.7);
}

.fx-fader.ice {
  background: #001833;
  height: 22px;
}

.fx-fader.ice .fx-fader-handle {
  background: linear-gradient(to right, #00c6ff, #4d94ff);
  box-shadow: 0 0 10px rgba(0, 198, 255, 0.7);
}

.fx-fader.retro {
  background: #3d2b00;
  height: 18px;
  border-radius: 0;
  border: none;
}

.fx-fader.retro .fx-fader-handle {
  background: linear-gradient(to right, #ffd54f, #ffab00);
  box-shadow: none;
  border-radius: 0;
  border-right: 2px solid #222;
}

.fx-fader.gothic {
  background: #222;
  height: 24px;
}

.fx-fader.gothic .fx-fader-handle {
  background: linear-gradient(to right, #ff0077, #aa004f);
  box-shadow: 0 0 10px rgba(255, 0, 119, 0.7);
}

/* Vinyl Disc Styling */
.vinyl-container {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.vinyl-disc {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #444, #222);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
}

.vinyl-container.active {
  transform: scale(1.05);
}

.vinyl-container.active .vinyl-disc {
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.7);
  background: linear-gradient(135deg, #8A2BE2, #6A1CB5);
}

/* ===== UNIQUE FADER ANIMATIONS ===== */


.fx-faders-grid .fx-fader-item.fader-active .wild-fader-label {
  color: #ff0000 !important;
  font-weight: bold !important;
  text-shadow: 0 0 15px #ff0000 !important;
  font-size: 18px !important;
  background-color: rgba(255, 255, 0, 0.5) !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
}

/* All Freak - Crazy shake and color cycling */

@keyframes allFreakColorCycle {
  0% { color: #ff0000; text-shadow: 0 0 15px #ff0000; }
  16% { color: #ff8800; text-shadow: 0 0 15px #ff8800; }
  33% { color: #ffff00; text-shadow: 0 0 15px #ffff00; }
  50% { color: #00ff00; text-shadow: 0 0 15px #00ff00; }
  66% { color: #0088ff; text-shadow: 0 0 15px #0088ff; }
  83% { color: #8800ff; text-shadow: 0 0 15px #8800ff; }
  100% { color: #ff0088; text-shadow: 0 0 15px #ff0088; }
}


.fx-fader-item[data-fader-id="allFreak"].fader-active .wild-fader-label {
  animation: allFreakColorCycle 0.3s infinite !important;
  font-weight: bold !important;
  transform: scale(1.3) !important;
}

/* Drum Freak - Pulsing beat effect */
@keyframes drumFreakPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}


.fx-fader-item[data-fader-id="drumFreak"].fader-active .wild-fader-label {
  animation: drumFreakPulse 0.6s infinite;
  color: #ff3333;
  text-shadow: 0 0 8px #ff3333;
  font-weight: bold;
}

/* Focus - Blur and glow effect */
@keyframes focusBlur {
  0% { filter: blur(0px); }
  50% { filter: blur(2px); }
  100% { filter: blur(0px); }
}


.fx-fader-item[data-fader-id="focus"].fader-active .wild-fader-label {
  animation: focusBlur 1s infinite;
  color: #00ffff;
  text-shadow: 0 0 10px #00ffff;
}

/* SP1200 - Retro LCD flicker */
@keyframes sp1200Flicker {
  0%, 100% { opacity: 1; }
  98% { opacity: 1; }
  99% { opacity: 0.8; }
}


.fx-fader-item[data-fader-id="sp1200"].fader-active .wild-fader-label {
  animation: sp1200Flicker 0.1s infinite;
  color: #00ff00;
  text-shadow: 0 0 5px #00ff00;
  font-family: 'Courier New', monospace;
}

/* Whoa - Expanding ripple effect */

@keyframes whoaBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}


.fx-fader-item[data-fader-id="whoa"].fader-active .wild-fader-label {
  animation: whoaBounce 0.5s infinite;
  color: #ff6600;
  text-shadow: 0 0 8px #ff6600;
  font-weight: bold;
}

/* Stutter - Rapid jitter effect */

@keyframes stutterFlash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.7; }
}


.fx-fader-item[data-fader-id="stutter"].fader-active .wild-fader-label {
  animation: stutterFlash 0.1s infinite;
  color: #ff00ff;
  text-shadow: 0 0 6px #ff00ff;
}

/* Music Flip - 3D flip animation */
@keyframes musicFlip3D {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes musicFlipColor {
  0%, 100% { color: #ffaa00; }
  50% { color: #00aaff; }
}


.fx-fader-item[data-fader-id="musicFlip"].fader-active .wild-fader-label {
  animation: musicFlip3D 1s infinite, musicFlipColor 1s infinite;
  text-shadow: 0 0 8px currentColor;
  font-weight: bold;
}

/* Music Chop - Slice effect */
@keyframes musicChopSlice {
  0%, 100% { clip-path: inset(0% 0% 0% 0%); }
  25% { clip-path: inset(0% 0% 50% 0%); }
  50% { clip-path: inset(50% 0% 0% 0%); }
  75% { clip-path: inset(0% 50% 0% 0%); }
}

@keyframes musicChopGlitch {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

.fx-fader-item[data-fader-id="musicChop"].fader-active .wild-fader-label {
  animation: musicChopSlice 0.2s infinite, musicChopGlitch 0.1s infinite;
  color: #ff3300;
  text-shadow: 2px 0 #00ff00, -2px 0 #0033ff;
}

/* Music FX - Swirl effect */
@keyframes musicFxSwirl {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes musicFxHue {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.fx-fader-item[data-fader-id="musicFx"].fader-active .wild-fader-label {
  animation: musicFxSwirl 2s infinite, musicFxHue 3s infinite;
  color: #8800ff;
  text-shadow: 0 0 10px #8800ff;
}

/* Slow Down - Stretching effect */
@keyframes slowDownStretch {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.3); }
}

@keyframes slowDownFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.fx-fader-item[data-fader-id="slowDown"].fader-active .wild-fader-label {
  animation: slowDownStretch 2s infinite, slowDownFade 2s infinite;
  color: #0066cc;
  text-shadow: 0 0 8px #0066cc;
}

/* Wavy - Wave motion */
@keyframes wavyWave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(1deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(3px) rotate(-1deg); }
}

@keyframes wavyFlow {
  0% { text-shadow: 0 0 5px #00ffaa; }
  50% { text-shadow: 0 0 15px #00ffaa, 0 0 25px #00ffaa; }
  100% { text-shadow: 0 0 5px #00ffaa; }
}

.fx-fader-item[data-fader-id="wavy"].fader-active .wild-fader-label {
  animation: wavyWave 1s infinite, wavyFlow 2s infinite;
  color: #00ffaa;
}

/* Delay - Echo effect */
@keyframes delayEcho {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(10px); opacity: 0; }
}

.fx-fader-item[data-fader-id="delay"].fader-active .wild-fader-label {
  position: relative;
  color: #ffaa00;
  text-shadow: 0 0 8px #ffaa00;
}

.fx-fader-item[data-fader-id="delay"].fader-active .wild-fader-label::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: 0;
  animation: delayEcho 0.5s infinite;
  opacity: 0.5;
  z-index: -1;
}

/* Filter - Pixelation effect */
@keyframes filterPixelate {
  0%, 100% { filter: blur(0px); }
  50% { filter: blur(1px); }
}

@keyframes filterDim {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.fx-fader-item[data-fader-id="filter"].fader-active .wild-fader-label {
  animation: filterPixelate 0.5s infinite, filterDim 1s infinite;
  color: #666666;
  text-shadow: 0 0 5px #666666;
}

/* Rise - Ascending glow */
@keyframes riseAscend {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-10px) scale(1.2); }
}

@keyframes riseGlow {
  0% { text-shadow: 0 0 5px #ffff00; }
  100% { text-shadow: 0 0 20px #ffff00, 0 0 30px #ffff00, 0 0 40px #ffff00; }
}

.fx-fader-item[data-fader-id="rise"].fader-active .wild-fader-label {
  animation: riseAscend 0.5s infinite alternate, riseGlow 0.5s infinite alternate;
  color: #ffff00;
  font-weight: bold;
}

/* Drown Out - Sinking effect */
@keyframes drownSink {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(5px) scale(0.9); opacity: 0.6; }
}


.fx-fader-item[data-fader-id="drownOut"].fader-active .wild-fader-label {
  animation: drownSink 1s infinite alternate;
  color: #0066cc;
  text-shadow: 0 0 8px #0066cc;
}

/* Flange - Sweep effect */
@keyframes flangeSweep {
  0% { transform: skewX(0deg); }
  50% { transform: skewX(5deg); }
  100% { transform: skewX(0deg); }
}


.fx-fader-item[data-fader-id="flange"].fader-active .wild-fader-label {
  animation: flangeSweep 1s infinite;
  color: #ff8800;
  text-shadow: 0 0 8px #ff8800;
}

/* Chip Monk - 8-bit style */
@keyframes chipMonkPixel {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes chipMonkBlink {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0; }
}


.fx-fader-item[data-fader-id="chipMonk"].fader-active .wild-fader-label {
  animation: chipMonkPixel 0.3s infinite, chipMonkBlink 2s infinite;
  color: #00ff88;
  text-shadow: 2px 2px 0 #004422;
  font-family: 'Courier New', monospace;
  font-weight: bold;
}

/* Pitch Down - Descending effect */
@keyframes pitchDownDescend {
  0% { transform: translateY(0) scaleY(1); }
  100% { transform: translateY(3px) scaleY(0.8); }
}

@keyframes pitchDownDeepen {
  0% { filter: contrast(1) brightness(1); }
  100% { filter: contrast(1.2) brightness(0.8); }
}

.fx-fader-item[data-fader-id="pitchDown"].fader-active .wild-fader-label {
  animation: pitchDownDescend 0.8s infinite alternate, pitchDownDeepen 0.8s infinite alternate;
  color: #cc3300;
  text-shadow: 0 0 8px #cc3300;
  font-weight: bold;
}
/* FX Playground — "FX RACK" (mock: claude.ai/design FX Rack - Desktop).
   Occupies exactly the genre section below the mixer (artist-menu geometry).
   Chassis: charcoal console well; modules: graphite faceplates with corner
   screws, one accent each (--acc), latch dots, etched captions. Light = LEDs.
   Modules drag to rearrange (rail = handle) and the rack scrolls sideways. */

.fxp-container {
  position: fixed;
  /* Was a hardcoded 480/95/0/0 — the band, frozen at whatever one window said. */
  top: var(--spotify-menu-top, 480px);
  left: calc(var(--spotify-menu-left, 10px) + var(--soundcraft-width, 85px));
  right: var(--spotify-menu-right, 0px);
  bottom: var(--spotify-menu-bottom, 0px);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  background: #141414;
  border-top: 1px solid #2b3037;
  box-shadow: 0 -14px 30px -18px rgba(4, 6, 8, 0.9);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
}

/* Console well */
.fxk-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 6px 8px 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, #26282d, #191b1f 12%, #141619 88%, #0c0d10);
  border: 1px solid #34373d;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 8px 10px;
}
.fxk-topbar { display: flex; align-items: center; gap: 12px; padding: 2px 4px 8px; }
.fxk-lcd {
  margin-right: auto;
  font: 700 11px/1 ui-monospace, 'Geist Mono', Menlo, monospace;
  color: #7fe3a8;
  background: #101610;
  border: 1px solid #274a33;
  border-radius: 4px;
  padding: 4px 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}
.fxk-clock { display: flex; gap: 4px; }
.fxk-clock i { width: 6px; height: 6px; border-radius: 50%; background: #23262b; }
.fxk-clock i.on { background: #59ff8e; box-shadow: 0 0 6px rgba(89, 255, 142, 0.7); }
.fxk-kill {
  font: 800 10px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.2em;
  color: #ffb2b2;
  background: #2a1214;
  border: 1px solid #57272b;
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fxk-kill:active { filter: brightness(1.3); }
.fxk-foot {
  display: flex;
  justify-content: space-between;
  padding: 8px 4px 0;
  font: 600 8px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.2em;
  color: #4d545e;
}

/* Rack row: sideways scroll, modules slide to make room while dragging */
.fxk-rack {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: stretch;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  list-style: none;
  margin: 0;
}
.fxk-rack::-webkit-scrollbar { height: 6px; }
.fxk-rack::-webkit-scrollbar-thumb { background: #2a2f36; border-radius: 3px; }

.fxk-module {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  border-radius: 7px;
  background: linear-gradient(180deg, #2b2e34, #1e2025 10%, #191b1f 90%, #121317);
  border: 1px solid #3a3d44;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: border-color 0.25s;
}
.fxk-module.active { border-color: color-mix(in srgb, var(--acc) 55%, #3a3d44); }
.fxk-module[data-framer-dragging="true"], .fxk-module:active { z-index: 5; }

/* Alive: active modules glow from within, and the glow breathes with the
   master meter via --pulse (set on the shell by the meter listener). */
.fxk-module.active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 7px;
  pointer-events: none;
  background:
    radial-gradient(80% 55% at 50% 108%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 18%, transparent);
  opacity: calc(0.35 + var(--pulse, 0) * 0.65);
  transition: opacity 90ms linear;
  z-index: 0;
}
.fxk-module.active > * { position: relative; z-index: 1; }
.fxk-module.active .fxk-head span {
  color: var(--acc);
  text-shadow: 0 0 calc(2px + var(--pulse, 0) * 8px) color-mix(in srgb, var(--acc) 70%, transparent);
}
.fxk-module.active .fxk-etch { color: color-mix(in srgb, var(--acc) 55%, #5a616b); }
.fxk-module.active .fxk-led {
  box-shadow: 0 0 calc(4px + var(--pulse, 0) * 12px) var(--acc);
}

.fxk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px 0;
  font: 800 9px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.28em;
  color: #9aa3ad;
  cursor: grab;
  touch-action: none;
}
.fxk-head:active { cursor: grabbing; }
.fxk-head-spacer { width: 11px; height: 11px; }
.fxk-head-note { font: 700 7px/1 'Geist', system-ui, sans-serif; letter-spacing: 0.12em; color: #7a6b93; }
.fxk-latch {
  width: 11px; height: 11px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #3f434b;
  background: #22252b;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
  transition: background 0.15s, box-shadow 0.15s;
}
.fxk-latch.on { background: var(--acc); box-shadow: 0 0 8px color-mix(in srgb, var(--acc) 80%, transparent); }

.fxk-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.fxk-etch {
  padding: 0 10px 9px;
  font: 600 7px/1.2 'Geist', system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: #5a616b;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fxk-screw {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6a707a, #2c2f35 70%);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.7);
}
.fxk-screw.tl { left: 5px; top: 5px; }
.fxk-screw.tr { right: 5px; top: 5px; }
.fxk-screw.bl { left: 5px; bottom: 5px; }
.fxk-screw.br { right: 5px; bottom: 5px; }

/* Small membrane keys shared by modules */
.fxk-xymodes, .fxk-warp-btns { display: flex; gap: 5px; padding: 6px 8px 0; }
.fxk-xymodes button, .fxk-warp-btns button {
  flex: 1;
  height: 24px;
  font: 800 8px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.14em;
  color: #8b93a0;
  background: linear-gradient(180deg, #25272c, #1a1c20);
  border: 1px solid #3a3d44;
  border-radius: 4px;
  cursor: pointer;
  touch-action: none;
}
.fxk-xymodes button.lit, .fxk-warp-btns button.lit {
  color: var(--acc);
  border-color: var(--acc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 20%, #25272c), color-mix(in srgb, var(--acc) 9%, #1a1c20));
}

/* KAOSS screen */
.fxk-screen {
  position: relative;
  flex: 1;
  margin: 8px;
  border-radius: 6px;
  background: radial-gradient(circle at 50% 45%, #07242b, #04141a 75%);
  border: 1px solid #123a44;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.8);
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
  min-height: 0;
}
.fxk-screen.touched { border-color: var(--acc); }
.fxk-dot { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #123a44; transition: background 0.1s; }
.fxk-dot.near { background: var(--acc); box-shadow: 0 0 5px var(--acc); }
.fxk-cursor {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid var(--acc);
  box-shadow: 0 0 14px color-mix(in srgb, var(--acc) 70%, transparent);
  pointer-events: none;
}
.fxk-screen-tag { position: absolute; left: 8px; bottom: 5px; font: 600 8px/1 'Geist', system-ui, sans-serif; letter-spacing: 0.18em; color: #1e6b7d; pointer-events: none; }

/* DJ FILTER knob */
.fxk-knobwrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.fxk-knob {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #3a3d44, #15161a 60%, #3a3d44);
  border: 2px solid #4a4e56;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.12);
  cursor: ns-resize;
  touch-action: none;
  position: relative;
  transition: transform 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.fxk-knob.drag { transition: none; }
.fxk-knob i {
  position: absolute;
  left: 50%; top: 6px;
  width: 4px; height: 26px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--acc);
  box-shadow: 0 0 8px color-mix(in srgb, var(--acc) 80%, transparent);
}
.fxk-knob-scale { display: flex; gap: 14px; font: 700 8px/1 'Geist Mono', monospace; letter-spacing: 0.16em; color: #8b93a0; }
.fxk-knob-scale .lit { color: var(--acc); }

/* ECHO */
.fxk-echodivs { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.fxk-div {
  height: 32px;
  border-radius: 5px;
  background: linear-gradient(180deg, #25272c, #1a1c20);
  border: 1px solid #3a3d44;
  color: #8b93a0;
  font: 700 12px/1 ui-monospace, monospace;
  cursor: pointer;
  touch-action: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.fxk-div.lit {
  color: var(--acc);
  border-color: var(--acc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 20%, #25272c), color-mix(in srgb, var(--acc) 9%, #1a1c20));
}
.fxk-div:active { filter: brightness(1.3); }
.fxk-throw {
  margin-top: 2px;
  height: 42px;
  border-radius: 5px;
  background: linear-gradient(180deg, #1c1e23, #15171b);
  border: 1px solid #1f4d31;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font: 800 9px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.2em;
  color: #7dd8a1;
  transition: background 0.2s;
}
.fxk-throw.out { background: linear-gradient(180deg, #123a24, #0c2418); }
.fxk-throw i {
  width: 10px; height: 24px;
  border-radius: 3px;
  background: #0e2418;
  border: 1px solid #2a5c3c;
  position: relative;
}
.fxk-throw i::after {
  content: '';
  position: absolute;
  left: 1px; right: 1px;
  height: 9px;
  border-radius: 2px;
  background: var(--acc);
  top: 12px;
  transition: top 0.18s;
}
.fxk-throw.out i::after { top: 2px; }

/* BEAT REPEAT */
.fxk-reppads { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }
.fxk-pad {
  border-radius: 6px;
  background: linear-gradient(180deg, #25272c, #1a1c20);
  border: 1px solid #3a3d44;
  color: #8b93a0;
  font: 800 14px/1 ui-monospace, monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  touch-action: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fxk-pad i { width: 5px; height: 5px; border-radius: 50%; background: #33363c; }
.fxk-pad.lit {
  color: var(--acc);
  border-color: var(--acc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 20%, #25272c), color-mix(in srgb, var(--acc) 9%, #1a1c20));
}
.fxk-pad.lit i { background: var(--acc); box-shadow: 0 0 6px var(--acc); }
.fxk-pad.rolling { animation: fxk-roll 0.24s ease-in-out infinite; }
@keyframes fxk-roll {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  50% { box-shadow: inset 0 0 12px color-mix(in srgb, var(--acc) 35%, transparent); }
}

/* WARP BANK: three rows of latching figure pads */
.fxk-reppads.bank { grid-template-rows: repeat(3, 1fr); }
.fxk-pad.small { font-size: 9px; letter-spacing: 0.08em; gap: 3px; }

/* TIME WARP */
.fxk-warp { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 4px; }
.fxk-warp-toys { display: flex; gap: 12px; align-items: center; justify-content: center; }
.fxk-platter {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: repeating-conic-gradient(#17181c 0deg 20deg, #22242a 20deg 40deg);
  border: 2px solid #3c3f46;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.6);
  cursor: grab;
  touch-action: none;
  position: relative;
}
.fxk-platter i { position: absolute; inset: 20px; border-radius: 50%; background: var(--acc); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); }
.fxk-platter.spin { animation: fxk-spinback 0.55s linear infinite; }
@keyframes fxk-spinback { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.fxk-tapestop {
  width: 52px; height: 64px;
  border-radius: 6px;
  background: #1c1d22;
  border: 1px solid #3c3f46;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  touch-action: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.fxk-tapestop i { width: 26px; height: 4px; border-radius: 2px; background: var(--acc); transform-origin: left center; transition: transform 0.2s; }
.fxk-tapestop.sag i { animation: fxk-sag 0.6s ease-out forwards; }
@keyframes fxk-sag { to { transform: rotate(38deg); } }
.fxk-tapestop span { font: 600 7px/1 'Geist', system-ui, sans-serif; letter-spacing: 0.12em; color: #8b93a0; }
.fxk-warp-btns { padding: 0; }
.fxk-warp-btns button { height: 30px; font-size: 9px; }

/* VOL SHAPER: two columns of stackable pattern cards */
.fxk-shapers { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px; align-content: stretch; }
.fxk-shaper {
  border-radius: 5px;
  background: linear-gradient(180deg, #25272c, #1a1c20);
  border: 1px solid #3a3d44;
  padding: 5px 7px;
  cursor: pointer;
  text-align: left;
  min-height: 0;
}
.fxk-shaper.lit { border-color: var(--acc); }
.fxk-shaper-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.fxk-shaper-row b { font: 800 9px/1 'Geist', system-ui, sans-serif; letter-spacing: 0.16em; color: #8b93a0; }
.fxk-shaper.lit .fxk-shaper-row b { color: var(--acc); }
.fxk-shaper-row i { width: 5px; height: 5px; border-radius: 50%; background: #33363c; }
.fxk-shaper.lit .fxk-shaper-row i { background: var(--acc); box-shadow: 0 0 5px var(--acc); }
.fxk-steps { display: flex; gap: 2px; }
.fxk-steps i { flex: 1; height: 8px; border-radius: 1px; background: #1d1f23; }
.fxk-steps i.set { background: #3a3d44; }
.fxk-steps i.set.on { background: color-mix(in srgb, var(--acc) 45%, #1d1f23); }
.fxk-steps i.set.on.now { background: var(--acc); box-shadow: 0 0 4px var(--acc); }

/* TONEFLX pedals */
.fxk-pedals { flex: 1; display: flex; gap: 6px; padding: 8px; align-items: stretch; }
.fxk-pedal {
  flex: 1;
  border-radius: 6px;
  border: 1px solid #14151a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 7px 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.fxk-pedal span { font: 800 8px/1 'Geist', system-ui, sans-serif; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); }
.fxk-pedal-led { width: 7px; height: 7px; border-radius: 50%; background: #2a1414; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); }
.fxk-pedal-led.on { background: #ff5d5d; box-shadow: 0 0 8px rgba(255, 93, 93, 0.9); }
.fxk-stomp {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d7dbe2, #8f96a1 55%, #5c626c);
  border: 2px solid #33373e;
  cursor: pointer;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}
.fxk-stomp:active { filter: brightness(1.2); }
.fxk-tonekeys { display: flex; gap: 4px; padding: 0 8px 8px; }
.fxk-tonekeys button {
  flex: 1;
  height: 22px;
  font: 800 8px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.1em;
  color: #8b93a0;
  background: linear-gradient(180deg, #25272c, #1a1c20);
  border: 1px solid #3a3d44;
  border-radius: 4px;
  cursor: pointer;
}
.fxk-tonekeys button.lit {
  color: var(--acc);
  border-color: var(--acc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 20%, #25272c), color-mix(in srgb, var(--acc) 9%, #1a1c20));
}

/* RISE */
.fxk-rise {
  flex: 1;
  position: relative;
  margin: 8px;
  border-radius: 6px;
  background: #17181c;
  border: 1px solid #33363c;
  cursor: grab;
  touch-action: none;
  overflow: hidden;
  min-height: 0;
}
.fxk-rise.shake { animation: fxk-shake 0.1s linear infinite; }
@keyframes fxk-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } }
.fxk-rise-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 85%, transparent), color-mix(in srgb, var(--acc) 25%, transparent));
  transition: height 0.06s;
}
.fxk-rise-handle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 26px;
  border-radius: 5px;
  background: linear-gradient(180deg, #4a4e56, #26282d);
  border: 1px solid #5b606a;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 0.3s cubic-bezier(0.2, 1.8, 0.4, 1);
  pointer-events: none;
}
/* While held, the lever tracks the hand exactly — no easing fighting it. */
.fxk-rise.dragging .fxk-rise-handle, .fxk-rise.dragging .fxk-rise-fill { transition: none; }
.fxk-rise-handle i { width: 30px; height: 3px; border-radius: 2px; background: var(--acc); }
.fxk-drop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 16px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.2em;
  color: var(--acc);
  background: rgba(0, 0, 0, 0.5);
}

/* DRUM FX: momentary hold pads over a row of latch keys */
.fxk-drumfx { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 0; }
.fxk-drum-holds { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.fxk-drum-latches { display: flex; gap: 4px; }
.fxk-key {
  flex: 1;
  height: 24px;
  font: 800 8px/1 'Geist Mono', 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
  color: #8b93a0;
  background: linear-gradient(180deg, #25272c, #1a1c20);
  border: 1px solid #3a3d44;
  border-radius: 4px;
  cursor: pointer;
}
.fxk-key.lit {
  color: var(--acc);
  border-color: var(--acc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 20%, #25272c), color-mix(in srgb, var(--acc) 9%, #1a1c20));
}

/* Saved automations: SAVE key + tape chips (play / delete) */
.fxk-kill.save { color: #8fd6ff; background: #12222a; border-color: #275057; }
.fxk-tape {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #3a3d44;
  border-radius: 4px;
  overflow: hidden;
}
.fxk-tape-play {
  padding: 5px 9px;
  font: 800 10px/1 'Geist Mono', 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  color: #8b93a0;
  background: #1a1c20;
  border: none;
  cursor: pointer;
}
.fxk-tape.on .fxk-tape-play {
  color: #59ff8e;
  background: #10241a;
  animation: fxp-power 1.2s ease-in-out infinite;
}
.fxk-tape-x {
  padding: 5px 6px;
  font: 700 10px/1 monospace;
  color: #6b4a4e;
  background: #16171b;
  border: none;
  border-left: 1px solid #3a3d44;
  cursor: pointer;
}
.fxk-tape-x:hover { color: #ff5d5d; }



/* MORPH: macro rig - knob, weave screen, tide fader in one wide faceplate */
.fxk-morph { flex: 1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 8px; padding: 8px; min-height: 0; }
.fxk-morph-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.fxk-morph-col.wide { grid-column: 1 / -1; align-items: stretch; gap: 4px; }
.fxk-knob.small { width: 62px; height: 62px; }
.fxk-knob.small i { top: 4px; height: 20px; }
.fxk-screen.weave { margin: 0; min-height: 0; }
.fxk-mini-tag {
  font: 700 7px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: #6b7480;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fxk-hrange { width: 100%; height: 26px; accent-color: var(--acc); }

/* Gesture looper keys */
.fxk-kill.lenkey { color: #8b93a0; background: #1a1c20; border-color: #3a3d44; }
.fxk-kill.rec { color: #ff9d9d; }
/* Blinks ONLY while a take is actually going down. */
.fxk-kill.rec.is-rec { animation: fxk-recblink 0.6s step-end infinite; }
@keyframes fxk-recblink { 0%, 100% { color: #ff5d5d; border-color: #a03038; } 50% { color: #5a2a2e; } }
.fxk-kill.rec.is-play {
  color: #59ff8e;
  background: #10241a;
  border-color: #2a5c3c;
  box-shadow: 0 0 8px rgba(89, 255, 142, 0.25);
}
@media (prefers-reduced-motion: reduce) { .fxk-kill.rec.is-rec { animation: none; } }

/* Narrow screens */
@media (max-width: 900px) {
  .fxp-container { left: 0; }
  .fxp-hintline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fxk-platter.spin, .fxk-rise.shake, .fxk-pad.rolling, .fxk-tapestop.sag i { animation: none; }
  .fxk-module.active::before { transition: none; }
}
@font-face {
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/terminal_copy.ttf);
  font-family: 'Terminal';
}

@font-face {
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/sys.ttf) format('truetype');
  font-family: 'Sys';
}

.crt-tv {
  position: relative;
  width: 100%;
  height: 100%;
  /* NO min-height. This is the inner set, and a hard 600px floor made it 257px
     TALLER than the tube it sits in (the screen measures 460x343) — so the
     player, and the video inside it, were being laid out against a box a
     quarter taller than anything visible. That mismatch is where the dead
     black band under the picture came from: the frame was sized for 460x600
     and only the top of it was ever on screen. The set is exactly the screen
     now. */
  min-height: 0;
  /* This is the INNER set, nested inside the outer .scanlines shell — two
     televisions were framing the same picture. It used to carry an 8px #333
     surround, a 25px radius and a cyan bloom of its own, which is what kept
     the picture looking like it sat deep inside a moulded cabinet no matter
     how thin the outer bezel got. The outer shell owns the frame now; this one
     is just the panel. */
  background: #05070a;
  border: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* Background when TV is off */
.crt-tv .screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #121010;
}

.crt-tv .screen::before {
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 6px;
}

.crt-display-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem; /* Much smaller text */
  font-weight: bold;
  text-shadow: 0 0 10px #00ff00;
  z-index: 15; /* Above video */
  pointer-events: none;
}

/* CRT scanlines */
.crt-tv.scanlines .overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crt-tv.scanlines .overlay::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  /* Glass, not a cabinet. crt.png is a bitmap of an entire vintage television
     bezel stretched over the picture — the second copy of the fat frame. */
  background:
    radial-gradient(125% 125% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}

.crt-tv.scanlines .overlay::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  background: linear-gradient(
      rgba(18, 16, 16, 0) 50%,
      rgba(0, 0, 0, 0.25) 50%
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.crt-tv .picture {
  height: 100%;
  overflow: hidden;
  width: 100%;
  z-index: -1;
  transform: scale(0, 0);
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
}

.crt-tv .content-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  border-radius: 15px;
  overflow: hidden;
  background: transparent;
}

/* iOS-specific video positioning - move video right by 25% */
@media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  .crt-tv .content-area {
    left: 25%;
    width: 75%;
  }
}

.crt-tv .text {
  color: lime;
  opacity: 0;
  filter: blur(0.5px);
  font-family: 'Sys', 'Terminal', 'VT323', monospace;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  left: 5%;
  position: absolute;
  text-shadow: 0 0 3px lime;
  top: 10%;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  z-index: 35;
}

/* Smaller text for STOP/PLAY */
.crt-tv .text.transport-text {
  font-size: clamp(0.9rem, 2.5vw, 1.4rem);
}

.crt-tv.on .text {
  opacity: 1;
  transition: opacity 10ms ease 2000ms;
}

.crt-tv.on .picture {
  animation: 3000ms linear 0ms normal forwards 1 running tv-on;
}

.crt-tv.off .picture {
  animation: 750ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms normal forwards 1 running tv-off;
}

@keyframes tv-on {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    filter: brightness(4);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1;
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    filter: brightness(4);
    opacity: 0;
  }
  11% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(0) brightness(0);
    opacity: 0;
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
}

@keyframes tv-off {
  0% {
    transform: scale(1, 1);
    filter: brightness(1);
  }
  40% {
    transform: scale(1, 0.005);
    filter: brightness(100);
  }
  70% {
    transform: scale(1, 0.005);
  }
  90% {
    transform: scale(0.005, 0.005);
  }
  100% {
    transform: scale(0, 0);
  }
}

/* Text glitch effects */
.crt-tv .text span {
  filter: blur(1px);
  position: absolute;
}

.crt-tv .text span:nth-child(1) {
  color: red;
  margin-left: -2px;
  filter: blur(2px);
}

.crt-tv .text span:nth-child(2) {
  color: lime;
  margin-left: 2px;
  filter: blur(2px);
}

.crt-tv .text span:nth-child(3) {
  color: blue;
  filter: blur(1px);
}

.crt-tv .text span:nth-child(4) {
  color: #fff;
  filter: blur(1px);
  text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
}

.crt-tv .text span:nth-child(5) {
  color: rgba(255, 255, 255, 0.1);
  filter: blur(15px);
}

.crt-tv .text span {
  animation: blur 30ms infinite, jerk 50ms infinite;
}

@keyframes blur {
  0% {
    filter: blur(1px);
    opacity: 0.8;
  }
  50% {
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    filter: blur(1px);
    opacity: 0.8;
  }
}

@keyframes jerk {
  50% {
    transform: translateX(1px);
  }
  51% {
    transform: translateX(0);
  }
}

@keyframes jerkup {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

.crt-tv .text span:nth-child(2) {
  animation: jerkup 1s infinite;
}

.crt-tv .text span:nth-child(3) {
  animation: glitch1 1s infinite;
}

@keyframes glitch1 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}

.crt-tv .text span:nth-child(2) {
  animation: glitch2 1s infinite;
}

@keyframes glitch2 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(-10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10px);
  }
}

.crt-tv.on .overlay .text {
  animation: 5s ease 2000ms normal none infinite running glitch;
}

/* Static overlay for STOP state */
.static-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #121010;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="5" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
  background-size: 150px 150px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

.static-overlay.active {
  opacity: 0.8;
  animation: staticNoise 0.1s infinite alternate;
}

@keyframes staticNoise {
  0% { 
    background-position: 0 0; 
    opacity: 0.8;
  }
  100% { 
    background-position: 8px 8px; 
    opacity: 0.9;
  }
}

@keyframes glitch {
  30% {
  }
  40% {
    opacity: 1;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
  41% {
    opacity: 0.8;
    transform: scale(1, 1.2);
    transform: skew(80deg, 0);
  }
  42% {
    opacity: 0.8;
    transform: scale(1, 1.2);
    transform: skew(-50deg, 0);
  }
  43% {
    opacity: 1;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
  65% {
  }
}
 /* Retro pixel font */ .genre-selector-container {
  display: flex;
  padding: 20px;
  background-color: #1a1a1a; /* Dark background for the section */
  border-radius: 8px;
  margin-top: 20px;
  gap: 15px; /* Space between sections */
  width: 100%; /* Take full width of its container */
  box-sizing: border-box; /* Include padding in width calculation */
  justify-content: space-between;
} /* Section containers (left and right) */ .section-container {
  display: flex;
  flex-direction: column;
  width: 35%; /* Adjust as needed */
  gap: 10px;
  margin-top: -30px; /* Raise drum and melody sections on desktop */
} /* Middle section with TV and world regions */ .middle-section {
  display: flex;
  flex-direction: column;
  width: 45% !important; /* Much wider */
  gap: 15px;
  align-items: center;
  position: relative; /* For positioning nspire button */
  margin-top: 20px !important; /* Positioned between genres */
  transform: scale(1.3) !important; /* Slightly smaller but still big */
  z-index: 10;
} /* TV + VCR wrapper */ .tv-and-vcr {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
} /* Place the VCR centered under the TV without moving the TV */ .vcr-under-tv {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: 14px;
  z-index: 50;
  pointer-events: auto;
} /* Section titles */ .section-title {
  /* Console legend, not an alarm. These were #ff0000 — a heading in pure red
     reads as an error state on a dark board, and the two sides didn't even
     match. Both sides now speak in the board's own voice: condensed caps,
     wide tracking, warm off-white. The LCD readout next to it carries the
     green; the label stays quiet. */
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-align: center;
  color: #d8d6d0;
} .region-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: center;
  color: #4ade80;
} /* Grid layouts */ .genre-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  grid-template-rows: repeat(6, 1fr);    /* 6 rows */
  gap: 8px; /* Slightly reduced gap */
  width: 100%;
} .region-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* 1 column */
  grid-template-rows: repeat(6, 1fr);    /* 6 rows */
  gap: 8px;
  width: 100%;
  border: 1px solid #2e2e33;
  border-radius: 5px;
  padding: 8px;
  background-color: #121215;
} /* Advanced 3D Buttons */ .genre-button, .region-button, .control-button {
  all: unset;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.75);
  box-shadow: -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
    0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: bold;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  text-align: center;
  /* break-word split single words mid-way — ORCHESTRAL rendered as
     "ORCHESTRA L". Condensed type fits the long names whole; wrapping only
     happens at real spaces (MARCHING BAND). */
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.15;
} .genre-button::after, .region-button::after, .control-button::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: calc(100% + 0.3em);
  height: calc(100% + 0.3em);
  top: -0.15em;
  left: -0.15em;
  border-radius: inherit;
  background: linear-gradient(
    -135deg,
    rgba(5, 5, 5, 0.5),
    transparent 20%,
    transparent 100%
  );
  filter: blur(0.0125em);
  opacity: 0.25;
  mix-blend-mode: multiply;
} .button-outer {
  position: relative;
  z-index: 1;
  border-radius: inherit;
  transition: box-shadow 300ms ease, transform 300ms ease;
  will-change: box-shadow, transform;
  box-shadow: 0 0.1em 0.1em -0.01em rgba(5, 5, 5, 1),
    0 0.05em 0.05em -0.01em rgba(5, 5, 5, 0.7),
    0.2em 0.4em 0.2em -0.01em rgba(5, 5, 5, 0.4),
    0.3em 0.6em 0.4em -0.01em rgba(5, 5, 5, 0.2),
    0.4em 0.8em 0.6em -0.01em rgba(5, 5, 5, 0.1),
    0.6em 1em 0.8em -0.01em rgba(5, 5, 5, 0.05);
  width: 100%;
  height: 100%;
} .genre-button:hover .button-outer, 
.region-button:hover .button-outer,
.control-button:hover .button-outer {
  box-shadow: 0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5),
    0 0 0 0 rgba(5, 5, 5, 0.25);
} .button-inner {
  --inset: 0.035em;
  position: relative;
  z-index: 1;
  border-radius: inherit;
  padding: 0.5em 0.5em;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dark console key, not light plastic. The old light-gray calculator face
     was the one element on the whole board that ignored the board — every
     surface around it is near-black hardware. Same 3D machinery, new
     material: charcoal face, machined top edge, soft floor shadow. */
  background-image: linear-gradient(
    170deg,
    rgba(68, 70, 75, 1),
    rgba(44, 45, 49, 1) 55%,
    rgba(36, 37, 41, 1)
  );
  transition: box-shadow 300ms ease, clip-path 250ms ease,
    background-image 250ms ease, transform 250ms ease;
  will-change: box-shadow, clip-path, background-image, transform;
  overflow: clip;
  clip-path: inset(0 0 0 0 round 5px);
  box-shadow:
        /* machined top-light edge */ 0 0.06em 0.05em 0 inset rgba(255, 255, 255, 0.14),
    /* left rim */ 0.05em 0 0.05em 0 inset rgba(255, 255, 255, 0.05),
    /* lower-inner falloff */ -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.45),
    /* seat ring */ 0 0 0.05em 0.12em inset rgba(0, 0, 0, 0.35);
} .genre-button:hover .button-inner,
.region-button:hover .button-inner,
.control-button:hover .button-inner {
  clip-path: inset(
    clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px)
      clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 5px
  );
  background-image: linear-gradient(
    170deg,
    rgba(78, 80, 86, 1),
    rgba(52, 53, 58, 1) 55%,
    rgba(43, 44, 49, 1)
  );
  box-shadow:
        /* pressed-in top */ 0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.7),
    /* corner bite */ -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.45),
    /* deep seat */ 0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.45),
    /* faint rim */ 0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.05),
    /* lower falloff */ -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.3);
} .button-inner span {
  position: relative;
  z-index: 4;
  /* Printed key-cap legend: condensed caps with air between letters, light
     ink on the dark face. Arial at -0.02em was the "default button" tell. */
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  letter-spacing: 0.07em;
  font-weight: 600;
  font-size: 1.02em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0);
  background-image: linear-gradient(
    180deg,
    rgba(244, 243, 238, 1),
    rgba(196, 195, 188, 1)
  );
  -webkit-background-clip: text;
  background-clip: text;
  transition: transform 250ms ease;
  display: block;
  will-change: transform;
  text-shadow: rgba(0, 0, 0, 0.35) 0 0.06em 0.08em;
} .genre-button:hover .button-inner span,
.region-button:hover .button-inner span,
.control-button:hover .button-inner span {
  transform: scale(0.975);
} /* Active and selected button states */ .genre-button:active .button-inner,
.region-button:active .button-inner,
.control-button:active .button-inner {
  transform: scale(0.9) !important;
  box-shadow:
    /* Enhanced pushed in effect */
    0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.9),
    -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.7),
    0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.7),
    0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.06),
    inset 0 0 15px rgba(0, 0, 0, 0.8) !important;
  background-image: linear-gradient(
    170deg,
    rgba(26, 26, 29, 1),
    rgba(18, 18, 21, 1)
  );
} /* Selected button state - stays pushed in */ .genre-button.selected .button-outer,
.genre-button.selected:hover .button-outer,
.music-genre-selected .button-outer,
.music-genre-selected:hover .button-outer {
  box-shadow: 0 0.05em 0.05em -0.01em rgba(5, 5, 5, 0.7),
    0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.3),
    0.05em 0.1em 0.05em -0.01em rgba(5, 5, 5, 0.2);
  transform: translateY(0.1em);
} .genre-button.selected .button-inner,
.music-genre-selected .button-inner {
  transform: scale(0.975);
  /* The chosen key is LIT, in the board's own green — the same voice as the
     LCD readouts, so "what's selected" and "what the display says" are one
     system. Pushed in AND glowing: a latched hardware switch. */
  box-shadow:
    0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),
    -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),
    0.25em 0.25em 0.2em 0 inset rgba(0, 20, 8, 0.6),
    0 0 0.05em 0.12em inset rgba(74, 222, 128, 0.28),
    0 0 0.6em 0 rgba(74, 222, 128, 0.25);
  background-image: linear-gradient(
    170deg,
    rgba(22, 46, 30, 1),
    rgba(12, 30, 19, 1)
  );
} .genre-button.selected .button-inner span,
.music-genre-selected .button-inner span {
  background-image: linear-gradient(
    180deg,
    rgba(168, 255, 196, 1),
    rgba(94, 222, 138, 1)
  );
  text-shadow: rgba(74, 222, 128, 0.45) 0 0 0.45em;
} /* Region buttons ride the same dark key material as everything else — the
   navy block was a third palette on a two-palette board. */ .empty-button {
  opacity: 0;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
} /* Control buttons at the bottom */ .control-buttons {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: space-between;
} .control-button {
  flex: 1;
  min-height: 35px;
  font-size: 0.8rem;
} /* Specific control button styles */ .fx-off .button-inner {
  background-image: linear-gradient(
    135deg,
    rgba(60, 60, 60, 1),
    rgba(30, 30, 30, 1)
  );
} .fx-off .button-inner span {
  background-image: linear-gradient(
    135deg,
    rgba(220, 220, 220, 1),
    rgba(255, 255, 255, 1)
  );
} .drops .button-inner, .fill .button-inner, .mute-drums .button-inner, .slow .button-inner, .fast .button-inner {
  background-image: linear-gradient(
    135deg,
    rgba(221, 170, 0, 1),
    rgba(170, 136, 0, 1)
  );
} .drops .button-inner span, .fill .button-inner span, .mute-drums .button-inner span, .slow .button-inner span, .fast .button-inner span {
  background-image: linear-gradient(
    135deg,
    rgba(0, 0, 0, 1),
    rgba(50, 50, 50, 1)
  );
} .fx .button-inner {
  background-image: linear-gradient(
    135deg,
    rgba(153, 0, 153, 1),
    rgba(102, 0, 102, 1)
  );
} .fx .button-inner span {
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1),
    rgba(220, 220, 220, 1)
  );
} /* Advanced CRT TV Effect */ .tv-screen-container {
  width: 100% !important;
  height: 600px !important; /* Bigger but not too big */
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  margin-bottom: 10px;
  overflow: visible !important; /* Allow scaling to show */
  /* RENDER THE SET 1:1. .middle-section scales this whole column by 1.3, so
     anything inside was still being rasterised small and magnified — that is
     the last of the on-screen menu's softness. Counter-scaling by 1/1.3 makes
     the composite transform exactly 1.0, so the tube is drawn natively at the
     468px it has always occupied (see .scanlines max-width) instead of being
     blown up from 360. Two wins for one change: text lands on real pixels,
     and the menu gets 468x351 of CSS room to lay out in rather than 360x270,
     which is why the long lists were being shrunk so hard.
     The translate sits the set a touch lower against the genre columns — a
     margin on .tv-and-vcr was computing to 0 in the live cascade. */
  transform: translateY(14px) scale(0.769231);
  position: relative;
} /* Import fonts for CRT display */ @font-face {
  font-family: 'Terminal';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/terminal_copy.ttf');
} @font-face {
  font-family: 'Sys';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/sys.ttf') format('truetype');
} /* Main CRT container */ .scanlines {
  width: 100%;
  /* The set's true size. The container counter-scales the column's 1.3 back
     out, so these are real on-screen pixels, not magnified ones. */
  max-width: 468px;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  /* MODERN SET, VINTAGE SIGNAL. The picture keeps its static, scanlines,
     chroma bleed and glitch — those are the point. What goes is the fat
     moulded cabinet: a 4px graphite bezel with a single bright trim line,
     a tight radius, and the panel floating on a real drop shadow, the way a
     flat set reads today. */
  box-sizing: border-box;
  border: 4px solid #101216;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(190, 205, 220, 0.14),
    0 16px 34px rgba(0, 0, 0, 0.62),
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(0, 0, 0, 0.45) inset;
  background: #05070a;
} /* Screen background */ .screen {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #121010;
  overflow: hidden;
  border-radius: 6px;
  box-sizing: border-box;
} /* Background when TV is off */ .screen::before {
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 100%;
  z-index: -1;
} /* CRT scanlines */ .scanlines .overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
} .scanlines .overlay::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  /* Glass over the panel, not a moulded surround: a soft corner vignette and
     one specular sweep. This used to be crt.png, a bitmap of a whole vintage
     television bezel stretched across the picture — that image was the thick
     frame, and no amount of CSS around it could thin the set down. */
  background:
    radial-gradient(125% 125% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 38%);
  border-radius: inherit;
  pointer-events: none;
} .scanlines .overlay::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  background: linear-gradient(
      rgba(18, 16, 16, 0) 50%,
      rgba(0, 0, 0, 0.25) 50%
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
} /* Canvas for CRT noise */ .picture {
  height: 100%;
  width: 100%;
  z-index: -1;
  transform: scale(0, 0);
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
} /* Text display on CRT */ .text {
  color: lime;
  opacity: 1;
  filter: blur(0.5px);
  font-family: 'Sys', 'Terminal', 'VT323', monospace;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  position: absolute;
  text-shadow: 0 0 3px lime;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  z-index: 3;
  left: 5%;
  top: 10%;
} /* YouTube video container */ .video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  overflow: hidden;
  border-radius: 20px;
  pointer-events: none; /* Prevent interaction with the video */
} .youtube-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* No opaque backdrop. The set is showing static behind this; painting a flat
     dark rectangle over it for the whole load is the "blank then flash" on
     refresh. The signal dissolves in instead — a set tuning to a channel. */
  background-color: transparent;
  animation: nsp-tv-tune-in 900ms ease-out both;
  z-index: 1;
} /* Shimmer effect from reference code */ @keyframes shimmer {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    filter: brightness(4) saturate(1.3) contrast(1.2);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1;
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    filter: brightness(4) saturate(1.3) contrast(1.2);
    opacity: 0.8;
  }
  11% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 0.9;
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1.2) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
} /* VHS effects */ .youtube-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, 
    rgba(255, 0, 0, 0.01), 
    rgba(0, 255, 0, 0.005), 
    rgba(0, 0, 255, 0.01)
  );
  z-index: 9;
  opacity: 0.15; /* Significantly reduced opacity */
  mix-blend-mode: screen;
  pointer-events: none;
} /* VHS degradation effect */ .vhs-degradation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%),
    linear-gradient(to right, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.03));
  opacity: 0.7;
  z-index: 8;
  pointer-events: none;
  animation: vhs-degradation 15s infinite alternate;
} @keyframes vhs-degradation {
  0% {
    transform: translateY(0);
    opacity: 0.7;
  }
  10% {
    transform: translateY(1px);
    opacity: 0.7;
  }
  20% {
    transform: translateY(0);
    opacity: 0.8;
  }
  30% {
    transform: translateY(-1px);
    opacity: 0.7;
  }
  40% {
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateY(2px);
    opacity: 0.8;
  }
  60% {
    transform: translateY(0);
    opacity: 0.7;
  }
  70% {
    transform: translateY(-2px);
    opacity: 0.7;
  }
  80% {
    transform: translateY(0);
    opacity: 0.8;
  }
  90% {
    transform: translateY(1px);
    opacity: 0.7;
  }
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }
} /* Scanlines effect over video */ .youtube-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.05) 50%
  );
  background-size: 100% 6px; /* Even larger scanlines */
  pointer-events: none;
  z-index: 10;
  opacity: 0.2; /* Much lower opacity */
  animation: scanline-move 15s linear infinite; /* Even slower animation */
} @keyframes scanline-move {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
} @keyframes vhs-flicker {
  0% { opacity: 1; }
  3% { opacity: 0.9; }
  6% { opacity: 1; }
  7% { opacity: 0.9; }
  8% { opacity: 1; }
  9% { opacity: 0.9; }
  10% { opacity: 1; }
  100% { opacity: 1; }
} @keyframes vhs-jitter {
  0% { transform: translateX(0); }
  30% { transform: translateX(0); }
  31% { transform: translateX(1px); }
  32% { transform: translateX(0); }
  98% { transform: translateX(0); }
  99% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
} @keyframes vhs-warp {
  0% { transform: scale(1, 1); }
  25% { transform: scale(1.01, 0.99); }
  50% { transform: scale(0.99, 1.01); }
  75% { transform: scale(1.01, 0.99); }
  100% { transform: scale(1, 1); }
} /* Channel info overlay - AV-1 style */ .channel-info {
  color: lime;
  opacity: 0;
  filter: blur(0px); /* No blur for maximum clarity */
  font-family: 'Sys', 'Terminal', 'VT323', monospace;
  font-size: 2.4vmin; /* Larger text size */
  left: 5%;
  position: absolute;
  text-shadow: 0 0 1px lime; /* Minimal glow for better clarity */
  top: 10%;
  z-index: 20;
  animation: fadeIn 0.5s forwards, jerkup 150ms infinite, glitch 10s ease 2000ms infinite; /* Slowed down animations significantly */
  transform-origin: center center;
  transform: scale(1.0); /* Full scale for maximum clarity */
  width: auto;
  max-width: 90%;
} .channel-info span {
  filter: blur(1px);
  position: absolute;
} .channel-info span:nth-child(1) {
  color: red;
  margin-left: -2px;
  filter: blur(2px);
} .channel-info span:nth-child(2) {
  color: lime;
  margin-left: 2px;
  filter: blur(2px);
  animation: jerkup 1s infinite;
} .channel-info span:nth-child(3) {
  color: blue;
  position: 20px 0;
  filter: blur(1px);
  animation: glitch1 1s infinite;
} .channel-info span:nth-child(4) {
  color: #fff;
  filter: blur(1px);
  text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
} .channel-info span:nth-child(5) {
  color: rgba(255, 255, 255, 0.1);
  filter: blur(15px);
} .channel-info span {
  animation: blur 30ms infinite, jerk 50ms infinite;
} @keyframes blur {
  0% {
    filter: blur(1px);
    opacity: 0.8;
  }
  50% {
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    filter: blur(1px);
    opacity: 0.8;
  }
} @keyframes jerk {
  50% {
    transform: translateX(1px);
  }
  51% {
    transform: translateX(0);
  }
} @keyframes jerkup {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
} @keyframes glitch1 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
} @keyframes glitch2 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(-10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10px);
  }
} @keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
} /* Channel changing/* Static effect */ .static-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 10;
  background: #121010;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="5" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
  background-size: 150px 150px;
} /* Menu overlay for sub-genres */ .menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100; /* Increased z-index to ensure it's on top */
  display: flex;
  align-items: center;
  justify-content: center; /* Center horizontally */
  background-color: rgba(0, 0, 0, 0.5);
  outline: none;
  cursor: pointer;
  pointer-events: auto; /* Ensure it receives pointer events */
} .menu {
  opacity: 1;
  background-color: #0069ff;
  box-sizing: border-box;
  font-family: "Sys", "Terminal", "VT323", monospace;
  font-size: 2vmin; /* Larger font size for better readability */
  height: auto;
  text-transform: uppercase;
  width: auto; /* Auto width to fit content */
  min-width: 300px; /* Larger minimum width for multi-column layout */
  max-width: 400px; /* Larger maximum width for multi-column layout */
  text-shadow: 1px 1px 0 #000000,
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000;
  filter: blur(0.2px); /* Even less blur for better readability */
  color: #fff;
  animation: jerkup 300ms infinite; /* Further slowed down animation */
  pointer-events: auto; /* Ensure it receives pointer events */
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10px; /* Add some padding at the bottom */
} .menu header {
  color: #e7e05c;
  margin-bottom: 8px;
  padding: 4px 12px;
  animation: glitch 5s ease 2000ms infinite;
  font-size: 2vmin;
  white-space: nowrap; /* Keep on one line */
  position: relative;
  width: 120%; /* Make wider than the menu */
  left: -10%; /* Extend beyond the blue part */
  text-align: center;
} .menu ul {
  margin: 0;
  padding: 0;
  animation: glitch 5s ease 2000ms infinite;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
} .menu ul li {
  box-sizing: border-box;
  list-style: outside none none;
  padding: 4px 8px;
  cursor: pointer;
  pointer-events: auto;
  font-size: 1.7vmin;
  min-width: 45%;
  margin: 3px;
  text-align: center;
  filter: blur(0px); /* No blur for maximum readability */
  text-shadow: 0.5px 0.5px 0 #000000; /* Reduced text shadow */
} .menu ul li.active {
  background-color: #1af2ff;
} .menu ul li a {
  color: #fff;
  text-decoration: none;
} .menu footer {
  background-color: #2afd72;
  margin-top: 10px;
  padding: 5px 15px;
  animation: glitch 5s ease 2000ms infinite;
} .menu footer::after {
  clear: both;
  content: " ";
  display: table;
} .menu footer .key {
  float: left;
  width: 50%;
} .menu footer .key span {
  background-color: #0069ff;
  border: 6px solid #e7e05c;
  border-radius: 6px;
  display: inline-block;
  height: 34px;
  line-height: 36px;
  padding-left: 6px;
  padding-right: 6px;
} .menu footer .key:last-child {
  text-align: right;
} /* CRT scanlines */ .static-overlay::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      transparent 50%,
      rgba(0, 0, 0, 0.25) 50%
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  content: "";
} @keyframes loadingStaticEffect {
  0% { opacity: 1; filter: brightness(1.5); }
  80% { opacity: 1; filter: brightness(1.5); }
  100% { opacity: 0; filter: brightness(1); }
} /* Channel changing static effect */ .static-overlay.active {
  opacity: 1;
  z-index: 30;
  animation: staticEffect 3s forwards, flickerStatic 0.1s infinite alternate;
} /* Static for video loading */ .loading-static {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="5" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
  background-size: 150px 150px;
  opacity: 0.7;
  pointer-events: none;
  z-index: 25;
  mix-blend-mode: normal;
  animation: loadingStaticEffect 5s forwards;
} /* Additional VHS tracking lines */ .tracking-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(255, 255, 255, 0.05) 3px,
    transparent 4px
  );
  opacity: 0;
  pointer-events: none;
  z-index: 25;
} .tracking-lines.active {
  animation: trackingEffect 1.5s;
} @keyframes staticEffect {
  0% { opacity: 1; transform: scale(1.2); filter: brightness(2); }
  5% { opacity: 0.9; transform: scale(1.1); filter: brightness(1.8); }
  10% { opacity: 1; transform: scale(1.15); filter: brightness(2); }
  15% { opacity: 0.8; transform: scale(1.05); filter: brightness(1.5); }
  20% { opacity: 1; transform: scale(1.1); filter: brightness(2); }
  25% { opacity: 0.7; transform: scale(1); filter: brightness(1.3); }
  30% { opacity: 0.9; transform: scale(1.05); filter: brightness(1.8); }
  35% { opacity: 0.6; transform: scale(0.95); filter: brightness(1.2); }
  40% { opacity: 0.8; transform: scale(1); filter: brightness(1.5); }
  45% { opacity: 0.5; transform: scale(0.9); filter: brightness(1); }
  50% { opacity: 0.7; transform: scale(0.95); filter: brightness(1.3); }
  55% { opacity: 0.4; transform: scale(0.85); filter: brightness(0.9); }
  60% { opacity: 0.6; transform: scale(0.9); filter: brightness(1.1); }
  65% { opacity: 0.3; transform: scale(0.8); filter: brightness(0.8); }
  70% { opacity: 0.5; transform: scale(0.85); filter: brightness(1); }
  75% { opacity: 0.2; transform: scale(0.75); filter: brightness(0.7); }
  80% { opacity: 0.4; transform: scale(0.8); filter: brightness(0.9); }
  85% { opacity: 0.1; transform: scale(0.7); filter: brightness(0.6); }
  90% { opacity: 0.2; transform: scale(0.75); filter: brightness(0.7); }
  95% { opacity: 0.1; transform: scale(0.7); filter: brightness(0.6); }
  100% { opacity: 0; transform: scale(0.6); filter: brightness(0.5); }
} @keyframes trackingEffect {
  0% { opacity: 0; transform: translateY(0); }
  10% { opacity: 1; transform: translateY(20px); }
  20% { opacity: 0.8; transform: translateY(-10px); }
  30% { opacity: 1; transform: translateY(15px); }
  40% { opacity: 0.8; transform: translateY(-5px); }
  50% { opacity: 1; transform: translateY(10px); }
  60% { opacity: 0.8; transform: translateY(-10px); }
  70% { opacity: 1; transform: translateY(5px); }
  80% { opacity: 0.8; transform: translateY(-5px); }
  90% { opacity: 0.5; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
} @keyframes slideIn {
  from { right: -100%; }
  to { right: 20px; }
} @keyframes slideOut {
  from { right: 20px; }
  to { right: -100%; }
} .text span {
  filter: blur(1px);
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
} .text span:nth-child(1) {
  color: red;
  margin-left: -2px;
  filter: blur(2px);
} .text span:nth-child(2) {
  color: lime;
  margin-left: 2px;
  filter: blur(2px);
} .text span:nth-child(3) {
  color: blue;
  position: 20px 0;
  filter: blur(1px);
} .text span:nth-child(4) {
  color: #fff;
  filter: blur(1px);
  text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
} .text span:nth-child(5) {
  color: rgba(255, 255, 255, 0.1);
  filter: blur(15px);
} /* TV Menu */ .menu {
  opacity: 1;
  background-color: #0069ff;
  box-sizing: border-box;
  font-family: "Sys";
  font-size: 16px;
  height: auto;
  text-transform: uppercase;
  width: 34%;
  text-shadow: 1px 1px 0 #000000,
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000;
  filter: blur(1px);
  color: #fff;
  animation: jerkup 100ms infinite;
  position: absolute;
  right: 5%;
  bottom: 10%;
  display: block; /* Make it visible */
} .menu header {
  color: #e7e05c;
  margin-bottom: 10px;
  padding: 5px 15px;
  animation: 5s ease 2000ms normal none infinite running glitch;
} .menu ul {
  margin: 0;
  padding: 0;
  animation: 5s ease 2000ms normal none infinite running glitch;
} .menu ul li {
  box-sizing: border-box;
  list-style: outside none none;
  padding: 5px 15px;
} .menu ul li.active {
  background-color: #1af2ff;
} .menu ul li a {
  color: #fff;
  text-decoration: none;
} .menu footer {
  background-color: #2afd72;
  margin-top: 10px;
  padding: 5px 15px;
  animation: 5s ease 2000ms normal none infinite running glitch;
} .menu footer::after {
  clear: both;
  content: " ";
  display: table;
} .menu footer .key {
  float: left;
  width: 50%;
} .menu footer .key span {
  background-color: #0069ff;
  border: 6px solid #e7e05c;
  border-radius: 6px;
  display: inline-block;
  height: 34px;
  line-height: 36px;
  padding-left: 6px;
} .menu footer .key:last-child {
  text-align: right;
} /* Animations for CRT effect */ .text span {
  animation: blur 30ms infinite, jerk 50ms infinite;
} .text span:nth-child(2) {
  animation: jerkup 1s infinite;
} .text span:nth-child(3) {
  animation: glitch1 1s infinite;
} .text span:nth-child(2) {
  animation: glitch2 1s infinite;
} .overlay .text {
  animation: 5s ease 2000ms normal none infinite running glitch;
} /* Turn on animation */ .scanlines {
  animation: 3000ms linear 0ms normal forwards 1 running on;
} /* Animation keyframes */ @keyframes on {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    filter: brightness(4);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1;
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    filter: brightness(4);
    opacity: 0;
  }
  11% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(0) brightness(0);
    opacity: 0;
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
} @keyframes blur {
  0% {
    filter: blur(1px);
    opacity: 0.8;
  }
  50% {
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    filter: blur(1px);
    opacity: 0.8;
  }
} @keyframes jerk {
  50% {
    transform: translateX(1px);
  }
  51% {
    transform: translateX(0);
  }
} @keyframes jerkup {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
} @keyframes glitch1 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
} @keyframes glitch2 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(-10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10px);
  }
} @keyframes glitch {
  30% {
  }
  40% {
    opacity: 1;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
  41% {
    opacity: 0.8;
    transform: scale(1, 1.2);
    transform: skew(80deg, 0);
  }
  42% {
    opacity: 0.8;
    transform: scale(1, 1.2);
    transform: skew(-50deg, 0);
  }
  43% {
    opacity: 1;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
  65% {
  }
} /* World regions section */ .world-regions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
} /* Placeholder to maintain layout when world regions are removed */ .world-regions-placeholder {
  width: 100%;
  height: 285px; /* Exact height to match the original section */
  margin-top: 10px;
  margin-bottom: 10px;
} /* Animations */ @keyframes vhs-scanlines {
  0% { background-position-y: 0px; }
  100% { background-position-y: 3px; }
} @keyframes vhs-noise {
  0% { opacity: 0.95; transform: translateY(0px) translateX(0px); }
  10% { opacity: 0.9; transform: translateY(-1px) translateX(1px); }
  20% { opacity: 0.85; transform: translateY(1px) translateX(-1px); }
  30% { opacity: 0.92; transform: translateY(0px) translateX(1px); }
  40% { opacity: 0.88; transform: translateY(1px) translateX(0px); }
  50% { opacity: 0.93; transform: translateY(-1px) translateX(-1px); }
  60% { opacity: 0.87; transform: translateY(0px) translateX(-1px); }
  70% { opacity: 0.91; transform: translateY(-1px) translateX(1px); }
  80% { opacity: 0.86; transform: translateY(1px) translateX(0px); }
  90% { opacity: 0.94; transform: translateY(0px) translateX(1px); }
  100% { opacity: 0.9; transform: translateY(-1px) translateX(0px); }
} @keyframes vhs-static-move {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 8px 8px, -8px -8px; }
} @keyframes vhs-flicker {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.96; }
  50% { opacity: 0.92; }
  75% { opacity: 0.98; }
} /* Responsive adjustments */ @media (max-width: 1200px) {
  .genre-button, .region-button {
    font-size: 0.75rem;
    padding: 6px 2px;
  }
  
  .section-title {
    font-size: 1.3rem;
  }
  
  .region-title {
    font-size: 1.1rem;
  }
} @media (max-width: 900px) {
  .genre-selector-container {
    flex-direction: column;
    align-items: center;
  }
  
  .section-container, .middle-section {
    width: 100%;
    max-width: 600px;
  }
} /* Dynamic sub-genre menu: the pop-up centers on the TV and sizes itself to
   its content — long lists wrap into columns and scale their type down. It
   must ALWAYS fit: no scrolling, no overlap. */ .menu {
  /* Centered by the flex .menu-overlay (display:flex; align/justify center) —
     NOT absolute+translate. The translate(-50%,-50%) that used to center it was
     overridden elsewhere to translateY(1px), which left the menu's top-left
     pinned at the TV's center so it spilled off the bottom-right corner. Static
     positioning lets the overlay flex-center it dead-on, and any stray 1px
     transform is then harmless. Verified in-browser: menu sits centered and
     fully inside the TV screen bounds. */
  position: static;
  transform: none;
  right: auto;
  bottom: auto;
  width: auto;
  min-width: 32%;
  max-width: 98%;
  max-height: 97%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
} /* Everything below is scoped under .menu-overlay purely to outrank the older
   .menu rules earlier in this file (2vmin / 1.7vmin, written for a fixed TV
   size). Sizes hang off --menu-fs so the shrink-to-fit pass in
   SubGenreMenu.tsx only has to set one value. */ .menu-overlay .menu {
  --menu-fs: clamp(11px, 2.6vmin, 32px);
  font-size: var(--menu-fs);
  /* Opt out of the browser's automatic text inflation. On a narrow/emulated
     viewport it rescales the list items independently of --menu-fs, which
     breaks the shrink-to-fit measurement and the column sizing. */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
} .menu-overlay .menu header {
  font-size: var(--menu-fs);
  padding: 0.3em 0.9em;
  margin-bottom: 0.3em;
  flex: 0 0 auto;
} .menu-overlay .menu ul {
  display: grid;
  /* Columns size to their CONTENT, not to equal fractions. Equal 1fr columns
     made every cell as narrow as the narrowest, so the long labels
     ("Timbaland", "Classic Breaks", "NY Underground") were ellipsised away —
     the whole word has to be readable. */
  grid-template-columns: max-content;
  justify-content: center;
  grid-auto-rows: min-content;
  overflow: hidden;
  min-height: 0;
} .menu-overlay .menu ul.menu-two-col {
  grid-template-columns: repeat(2, max-content);
  -moz-column-gap: 0.7em;
       column-gap: 0.7em;
} /* 10+ items: a third column keeps the row count low enough to fit the TV. */ .menu-overlay .menu ul.menu-three-col {
  grid-template-columns: repeat(3, max-content);
  -moz-column-gap: 0.55em;
       column-gap: 0.55em;
} .menu-overlay .menu ul li {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0.2em 0.85em;
  /* No ellipsis: with max-content columns the label always has room, and a
     half-shown word is worse than a slightly wider menu. */
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-size: var(--menu-fs);
  line-height: 1.35;
} /* A >9-item list carries BOTH classes; the tighter three-column sizing must
   come last so it wins on source order. */ .menu-overlay .menu ul.menu-dense li {
  padding: 0.15em 0.7em;
  font-size: calc(var(--menu-fs) * 0.88);
  line-height: 1.3;
} .menu-overlay .menu ul.menu-three-col li {
  padding: 0.15em 0.55em;
  font-size: calc(var(--menu-fs) * 0.78);
} /* The picture arriving, rather than being cut to. Pairs with the transparent
   Suspense fallback so what you see during load is the tube's own static. */ @keyframes nsp-tv-tune-in {
  0%   { opacity: 0; }
  55%  { opacity: 0; }
  100% { opacity: 1; }
} /* The player box IS the tube. This div carried no size of its own, so it took
   whatever its parent happened to be — which, while .crt-tv had a 600px
   min-height floor, was a quarter taller than the visible screen. Everything
   inside it was therefore laid out against a box that did not match what you
   could see. */ .youtube-player-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
} /* ---- CO-PRODUCER: the tape wall stands where the whole board did --------
   The container is a three-across flex row (drums | TV | melody). With one
   child it must stop distributing and simply give the shelf everything,
   or the gallery sits centred in a third of the room it was meant to own. */ .genre-selector-container.cp-tapes-only {
  display: block;
  padding: 0;
  /* Flush to the underside of the mixer — the shelf is the bottom half of
     the instrument, not a card floating below it. The base rule's 20px
     top margin and 8px radius are what made it read as a separate panel. */
  margin-top: 0;
  border-radius: 0;
  background: var(--cp-panel, #16161d);
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--cp-text, #e8e8f0) 12%, transparent);
}
/* ============================================================================
   ON-SCREEN DISPLAY — the sub-genre menu as the television's own menu system.
   ----------------------------------------------------------------------------
   This menu lives inside the CRT, so it should be generated by the CRT, not
   laid on top of it. Everything here is borrowed from how a real set draws its
   own menu: a translucent tuner panel keyed over the picture, an OSD title bar
   with the input tag and the channel count, numbered channel rows, and an
   inverse-video selection bar with a cursor. The numbers are not decoration —
   this is a channel list, and channel lists are numbered.

   The tube's glitch and scanline treatment belongs to the TV component and is
   deliberately left alone; the panel only adds its own finer scanline so the
   OSD reads as part of the same signal.

   Sizing is NOT owned here — the shrink-to-fit pass in SubGenreMenu.tsx drives
   everything off --menu-fs so the panel always lands inside the tube.
   ============================================================================ */

.menu-overlay {
  position: absolute;
  inset: 0;
  /* The set dims its own picture when the menu comes up. */
  background-color: rgba(0, 6, 10, 0.55);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2%;
  box-sizing: border-box;
}

/* The tuner panel: keyed over the picture, never fully opaque. */
.menu {
  position: relative;
  /* Solid enough to READ against. This was 0.90-0.92 alpha over live static
     with its own scanline gradient stacked on top — the noise came straight
     through every glyph and the two scanline patterns interfered. The tube
     still lays its scanlines over the whole picture; the panel no longer
     doubles them. */
  background: linear-gradient(180deg, rgba(6, 17, 26, 0.985) 0%, rgba(3, 10, 17, 0.985) 100%);
  border: 1px solid rgba(150, 210, 235, 0.35);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 0 22px rgba(0, 0, 0, 0.75),
    0 0 40px rgba(120, 200, 235, 0.10) inset;
  color: #dff1fb;
  /* Sizing + centering live in GenreSelector.css (.menu under .menu-overlay). */
}
.menu[data-field='drum'] { border-color: rgba(240, 185, 92, 0.4); }
.menu[data-field='music'] { border-color: rgba(111, 201, 242, 0.4); }

/* Corner registration marks — the framing a set draws around its own OSD. */
.menu::before,
.menu::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  opacity: 0.65;
}
.menu::before {
  top: 3px; left: 3px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
}
.menu::after {
  bottom: 3px; right: 3px;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.menu[data-field='drum']::before,
.menu[data-field='drum']::after { color: rgba(240, 185, 92, 0.75); }
.menu[data-field='music']::before,
.menu[data-field='music']::after { color: rgba(111, 201, 242, 0.75); }

/* ---- OSD title bar --------------------------------------------------------- */
.menu header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  background: linear-gradient(180deg, rgba(120, 200, 235, 0.16), rgba(120, 200, 235, 0.05));
  border-bottom: 1px solid rgba(150, 210, 235, 0.3);
  padding: 0.28em 0.7em 0.24em;
  font-family: 'VT323', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f2fbff;
  /* No chroma-bleed shadow here. On body-sized OSD type a red/blue fringe
     does not read as a shadow mask, it reads as out of focus. */
  text-shadow: none;
}
.menu[data-field='drum'] header {
  background: linear-gradient(180deg, rgba(240, 185, 92, 0.18), rgba(240, 185, 92, 0.05));
  border-bottom-color: rgba(240, 185, 92, 0.32);
}

/* Input tag, drawn as a solid block the way a set badges its source. */
.menu .osd-tag {
  padding: 0 0.4em;
  border-radius: 1px;
  background: rgba(111, 201, 242, 0.85);
  color: #04121c;
  font-size: 0.82em;
  text-shadow: none;
}
.menu[data-field='drum'] .osd-tag { background: rgba(240, 185, 92, 0.9); }

.menu .osd-title { flex: 1 1 auto; text-align: center; }
.menu .osd-count { font-size: 0.82em; opacity: 0.75; white-space: nowrap; }

.menu ul {
  list-style: none;
  padding: 0.35em 0.4em 0.4em;
  margin: 0;
}

/* ---- channel rows ---------------------------------------------------------- */
.menu-overlay .menu ul li {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #e8f6ff;
  font-family: 'VT323', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.1s linear, color 0.1s linear;
}

.menu-overlay .menu ul li:hover {
  background: rgba(150, 210, 235, 0.14);
  color: #ffffff;
}

/* Inverse video — how every set has ever shown the highlighted row — plus the
   cursor caret riding the right edge. */
.menu-overlay .menu ul li.active {
  background: rgba(111, 201, 242, 0.92);
  color: #04121c;
  font-weight: normal;
  text-shadow: none;
}
.menu-overlay .menu ul li.active::after {
  content: '\25C0';
  margin-left: auto;
  padding-left: 0.5em;
  font-size: 0.7em;
  line-height: 1;
}
.menu[data-field='drum'] ul li.active { background: rgba(240, 185, 92, 0.94); }

.menu ul::-webkit-scrollbar { width: 6px; }
.menu ul::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.4); }
.menu ul::-webkit-scrollbar-thumb { background: rgba(150, 210, 235, 0.45); }
.menu ul::-webkit-scrollbar-thumb:hover { background: rgba(150, 210, 235, 0.7); }

/* VT323 runs small for its px size, so the rows take a multiplier on the
   fitted base. The shrink-to-fit pass binary-searches --menu-fs, so a constant
   factor is safe — it simply converges on a smaller base. Column variants are
   restated because their selectors in GenreSelector.css outrank the plain one. */
/* ONE font multiplier for every layout. Each column count used to apply its
   own (1.05 / 0.95 / 0.85) while the fit compared raw --menu-fs ratios across
   layouts — so it was ranking apples against oranges and could hand the prize
   to a three-column layout that actually rendered SMALLER text than the
   two-column runner-up. With the factor equal, the ratio the fit compares IS
   the rendered size, and the widest-type layout genuinely wins. Column count
   now buys space through padding alone. */
/* ROW CHROME IS WHAT CAPS THE TYPE. A twelve-entry menu came out at 21.5px
   using 91% of the tube's width but only 68% of its height: the fit had picked
   three columns because two columns ran out of HEIGHT first — every row was
   carrying line-height 1.3 plus vertical padding, so a six-row layout cost far
   more than it should. Cheap rows make taller layouts viable, and a taller,
   narrower layout is exactly what a width-bound menu needs. VT323 carries its
   own generous internal leading, so 1.12 still reads as spaced. */
.menu-overlay .menu ul li {
  font-size: calc(var(--menu-fs) * 1.05);
  padding: 0.04em 0.5em;
  line-height: 1.12;
}
.menu-overlay .menu ul.menu-dense li {
  padding: 0.03em 0.42em;
}
.menu-overlay .menu ul.menu-three-col li {
  padding: 0.02em 0.34em;
}
.menu-overlay .menu ul {
  row-gap: 0.06em;
  -moz-column-gap: 0.36em;
       column-gap: 0.36em;
}
@keyframes vcrDeckCarriage {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(55%);
  }
}

.vcr-deck {
  width: min(520px, 82%);
  min-width: 260px;
  aspect-ratio: 5 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
  line-height: 0.7rem;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}

.vcr-deck__top {
  width: 100%;
  height: 18%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.vcr-deck__carriage {
  width: 52%;
  height: 100%;
  margin-left: 8%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}

.vcr-deck__carriage--close {
  animation: vcrDeckCarriage 500ms ease-out forwards;
}

.vcr-deck__carriage--open {
  animation: vcrDeckCarriage 500ms ease-out forwards reverse;
}

.vcr-deck__carriage-top {
  height: 4px;
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #6a6a6a, #bfbfbf, #7d7d7d);
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.vcr-deck__carriage-middle {
  width: 100%;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.2), rgba(0, 0, 0, 0.15)),
    linear-gradient(90deg, #767676, #bdbdbd, #8a8a8a);
  border: 1px solid rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  padding: 2px 6px;
  gap: 6px;
}

.vcr-deck__strut {
  width: 4px;
  height: 70%;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.65);
  opacity: 0.6;
}

.vcr-deck__tapespace {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
}

.vcr-deck__cassette {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(180deg, #1a1a1a, #050505);
  display: flex;
  align-items: center;
  padding: 2px;
  gap: 6px;
}

.vcr-deck__cassette-label {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg, #f8f8f8, #dedede);
  color: #141414;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 0.6rem;
}

.vcr-deck__cassette-spacer {
  width: 18%;
  height: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
}

.vcr-deck__front {
  width: 100%;
  height: 72%;
  border-radius: 12px;
  padding: 8px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.25)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px),
    linear-gradient(90deg, #7a7a7a, #bdbdbd, #7d7d7d);
  border: 1px solid rgba(0, 0, 0, 0.55);
  display: grid;
  grid-template-columns: 72px 1fr 132px;
  gap: 10px;
}

.vcr-deck__power {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vcr-deck__powerbtn {
  width: 48px;
  height: 38px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 10px;
  background: rgba(15, 15, 15, 0.85);
  padding: 2px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.vcr-deck__powerbtn:active {
  transform: translateY(1px);
}

.vcr-deck__powerbutton {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 10px 1fr;
  align-items: center;
  justify-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.vcr-deck__powerlight {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(120, 120, 120, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.vcr-deck__powerlight--on {
  background: #39ff14;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
}

.vcr-deck__powerlbl {
  display: none;
}

.vcr-deck__controls {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.6);
  padding: 8px;
}

.vcr-deck__cluster {
  height: 100%;
}

.vcr-deck__cluster--play {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.vcr-deck__cluster--stop {
  width: 64px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
}

.vcr-deck__cluster--eject {
  width: 52px;
  display: flex;
}

.vcr-deck__btn {
  width: 100%;
  height: 100%;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.35)),
    linear-gradient(90deg, #6d6d6d, #b0b0b0, #6f6f6f);
  cursor: pointer;
  position: relative;
  padding: 0;
}

.vcr-deck__btn:active {
  transform: translateY(1px);
}

.vcr-deck__glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.9rem;
  color: rgba(10, 10, 10, 0.9);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.vcr-deck__btn--play .vcr-deck__glyph {
  transform: rotate(90deg);
}

.vcr-deck__btn--record {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.4)),
    linear-gradient(90deg, #6d6d6d, #b0b0b0, #6f6f6f);
}

.vcr-deck__btn--record .vcr-deck__glyph {
  color: rgba(140, 0, 0, 0.95);
  text-shadow: none;
}

.vcr-deck__display {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vcr-deck__displayarea {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(0, 0, 0, 0.65);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vcr-deck__displaytext {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: rgba(160, 160, 160, 0.9);
}

.vcr-deck__displaytext--on {
  color: rgba(210, 240, 255, 0.95);
  text-shadow: 0 0 10px rgba(120, 200, 255, 0.22);
}

.vcr-deck__base {
  width: 92%;
  height: 10%;
  margin-top: -3px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.95));
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-top: 0;
  opacity: 0.9;
}
/* VCR on-screen display, painted over the TV picture.
 *
 * Everything here is namespaced `nsp-vhs`. GenreSelector.css ALREADY has a
 * `.scanlines` rule for the CRT effect on the same screen — reusing that name
 * would have silently restyled the existing overlay.
 *
 * Self-contained on purpose: the source this is adapted from pulled its grain
 * from a hotlinked PNG and its font from Google Fonts. Both are network
 * dependencies on an element that has to paint instantly when the tape spools,
 * so the grain is an inline SVG turbulence data URI and the type is the system
 * mono stack.
 */

.nsp-vhs {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  border-radius: 6px;
  /* The instrument underneath stays clickable — the subgenre menu lives on
     this glass. */
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #fff;
  transition: opacity 0.6s ease;
  /* The query container is THIS box, not the readout — an element cannot size
     its own font from container units it establishes itself. */
  container-type: inline-size;
}

/* The deck has finished working: the whole display switches off. It is only
   ever on while the tape is spooling — see the component header. */
.nsp-vhs--off {
  opacity: 0;
  transition: opacity 0.7s ease;
}

/* ── grain ───────────────────────────────────────────────────────────────── */
.nsp-vhs__noise {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
  transition: opacity 0.6s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

.nsp-vhs__noise--moving {
  opacity: 0.34;
  will-change: background-position;
  animation: nsp-vhs-noise 1s steps(6) infinite alternate;
}

/* ── scanlines ───────────────────────────────────────────────────────────── */
.nsp-vhs__scanlines {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%);
  background-size: 100% 4px;
  will-change: opacity;
  animation: nsp-vhs-flicker 3s linear infinite;
  transition: opacity 0.6s ease;
}

/* Spooling: the picture is unstable. Heavier grain, and the whole OSD jitters. */
.nsp-vhs--spooling .nsp-vhs__noise { opacity: 0.72; }
.nsp-vhs--spooling .nsp-vhs__scanlines { opacity: 0.62; }
.nsp-vhs--spooling .nsp-vhs__osd { animation: nsp-vhs-jitter 0.38s steps(3) infinite; }

/* ── the readout ─────────────────────────────────────────────────────────── */
.nsp-vhs__osd {
  position: absolute;
  inset: 0;
  padding: clamp(6px, 4%, 16px);
  font-weight: 700;
  /* Scales with the TV, which is sized by its container and changes a lot
     between the desktop console and the mobile theme. */
  font-size: clamp(9px, 4.4cqw, 20px);
  letter-spacing: 0.12em;
}

.nsp-vhs__label,
.nsp-vhs__time,
.nsp-vhs__speed {
  position: absolute;
  will-change: text-shadow;
  animation: nsp-vhs-rgb 2s steps(9) infinite alternate;
}

.nsp-vhs__label {
  left: clamp(6px, 4%, 16px);
  top: clamp(6px, 4%, 16px);
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.nsp-vhs__time {
  right: clamp(6px, 4%, 16px);
  top: clamp(6px, 4%, 16px);
  animation-duration: 1s;
}

.nsp-vhs__speed {
  left: clamp(6px, 4%, 16px);
  bottom: clamp(6px, 4%, 16px);
  font-size: 0.78em;
  opacity: 0.9;
  animation-duration: 1s;
}

.nsp-vhs__char {
  display: inline-block;
  animation: nsp-vhs-type 1.2s infinite alternate;
}

.nsp-vhs__chevrons {
  animation: nsp-vhs-chase 0.5s steps(2) infinite;
}

/* ── animations ──────────────────────────────────────────────────────────── */
@keyframes nsp-vhs-noise {
  0%, 100% { background-position: 0 0; }
  20% { background-position: -15% 5%; }
  40% { background-position: 20% 25%; }
  60% { background-position: 15% 5%; }
  80% { background-position: 25% 35%; }
}

@keyframes nsp-vhs-flicker {
  0% { opacity: 0.45; }
  25% { opacity: 0.28; }
  50% { opacity: 0.6; }
  75% { opacity: 0.36; }
  100% { opacity: 0.45; }
}

@keyframes nsp-vhs-type {
  0%, 19% { opacity: 0; }
  20%, 100% { opacity: 1; }
}

@keyframes nsp-vhs-chase {
  0% { opacity: 0.35; }
  100% { opacity: 1; }
}

@keyframes nsp-vhs-jitter {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33% { transform: translate3d(-1px, 1px, 0); }
  66% { transform: translate3d(1px, -1px, 0); }
}

/* The chromatic-aberration shimmer that makes text read as "off a tape". */
@keyframes nsp-vhs-rgb {
  0%, 25% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7),
      0 0 1px rgba(251, 0, 231, 0.8), 0 0 3px rgba(0, 233, 235, 0.8),
      0 0 3px rgba(0, 242, 14, 0.8), 0 0 3px rgba(244, 45, 0, 0.8);
  }
  45% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7),
      5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8),
      -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8);
  }
  55% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7),
      -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8),
      5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8);
  }
  100% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7),
      5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8),
      -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8);
  }
}

/* Respect the OS setting: the jitter and grain are exactly the kind of motion
   this exists to switch off. The readout itself stays. */
@media (prefers-reduced-motion: reduce) {
  .nsp-vhs__noise--moving,
  .nsp-vhs__scanlines,
  .nsp-vhs__char,
  .nsp-vhs__chevrons,
  .nsp-vhs__label,
  .nsp-vhs__time,
  .nsp-vhs__speed,
  .nsp-vhs--spooling .nsp-vhs__osd {
    animation: none;
  }
}
/* Enhanced button feedback styles */

/* General button active state enhancement for ALL buttons */
button:active,
div[role="button"]:active,
span[role="button"]:active,
.button:active,
.btn:active {
  transform: scale(0.95) !important;
  transition: transform 0.1s ease !important;
  position: relative;
  z-index: 2;
}

/* Mute button specific active state - target all possible mute buttons */
.mute-button:active,
button[data-control="mute"]:active,
button[data-type="mute"]:active,
button:active[class*="mute"],
div[role="button"]:active[class*="mute"],
span:active[class*="mute"],
.mute:active,
[aria-label*="mute" i]:active,
[title*="mute" i]:active {
  background-color: rgba(255, 50, 50, 0.7) !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

/* New button specific active state */
.new-button:active,
button[data-control="new"]:active,
button[data-type="new"]:active,
button:active[class*="new"],
div[role="button"]:active[class*="new"],
span:active[class*="new"],
.new:active,
[aria-label*="new" i]:active,
[title*="new" i]:active {
  background-color: rgba(50, 255, 50, 0.7) !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

/* Enhanced visual feedback for genre selector buttons */
.genre-button:active,
.region-button:active,
.control-button:active {
  transform: translateY(4px) scale(0.95) !important;
  box-shadow: 
    0 0 2px rgba(0, 0, 0, 0.8),
    inset 0 0 10px rgba(0, 0, 0, 0.8) !important;
  transition: all 0.1s ease !important;
  filter: brightness(1.2) !important;
}

/* Add a flash effect when buttons are clicked */
@keyframes button-flash {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

/* Add a pseudo-element for the flash effect */
button:active::before,
div[role="button"]:active::before,
span[role="button"]:active::before,
.button:active::before,
.btn:active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: inherit;
  animation: button-flash 0.2s ease;
  pointer-events: none;
  z-index: -1;
}

/* Special effects for SoundcraftTheme buttons */
.track-controls button:active,
.mixer-controls button:active,
.fader-container button:active,
[class*="track"] button:active,
[class*="mixer"] button:active,
[class*="control"] button:active {
  transform: scale(0.9) !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Make sure the active state is very visible on touch devices */
@media (hover: none) {
  button:active,
  div[role="button"]:active,
  span[role="button"]:active {
    transform: scale(0.9) !important;
  }
  
  button:active::before,
  div[role="button"]:active::before,
  span[role="button"]:active::before {
    background: rgba(255, 255, 255, 0.4);
  }
  
  /* Extra prominent effect for touch devices */
  .mute-button:active,
  button[data-control="mute"]:active,
  button[data-type="mute"]:active,
  button:active[class*="mute"],
  div[role="button"]:active[class*="mute"],
  span:active[class*="mute"] {
    background-color: rgba(255, 0, 0, 0.8) !important;
  }
}
/* LED indicator styles */
.led-indicator {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* The board's LED green, not a pure primary. Every other lit element on the
     desk settled on this family; a raw #00ff00 lamp beside them reads as a
     different device. */
  background-color: #4ade80;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 5px rgba(74, 222, 128, 0.9);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.led-active {
  opacity: 1;
}

/* ============================================================================
   DESIGNATION STRIP — the genre readout, rebuilt as a different object.
   ----------------------------------------------------------------------------
   The previous take was a lit LCD in a bezel, and dressing a lit rectangle up
   in more bezel only ever produces a nicer lit rectangle. So this is not a
   display at all.

   On a real desk the channel name is not a screen: it is a paper strip in a
   metal channel that the engineer fills in by hand with a marker. That is what
   this is now — an engraved plate, a recessed channel, and a bone card with
   the selection written on it in the same hand as the fader tape-labels. Cream
   paper on a black board is the loudest object on the whole surface and it
   does not light up a single pixel to get there.
   ============================================================================ */

.section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  /* Full-width strip across the head of its column, and FIXED: nothing in here
     is content-sized, so picking a long genre cannot resize the plate. */
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto 15px;
  justify-content: center;
  /* The scaled TV block (z-10) reaches an invisible corner over this and was
     eating clicks on the right half. This is a control; it wins the stack. */
  position: relative;
  z-index: 20;
  /* the mounting plate: brushed, slightly warm metal */
  padding: 9px 26px 10px 20px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.014) 0px, rgba(255, 255, 255, 0.014) 1px,
      transparent 1px, transparent 3px),
    linear-gradient(178deg, #3a3c42 0%, #2a2b30 42%, #232428 100%);
  border: 1px solid #191a1d;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 -1px 0 rgba(0, 0, 0, 0.55) inset,
    0 5px 12px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Two screws hold the plate to the board. The tell that this is a mounted
   part and not a painted-on panel graphic. */
.section-header::before,
.section-header::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 42%, rgba(10, 10, 12, 0.85) 42%, rgba(10, 10, 12, 0.85) 58%, transparent 58%),
    radial-gradient(circle at 34% 28%, #6f7178, #3c3d43 62%, #26272b);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.section-header::before { left: 7px; }
.section-header::after  { right: 8px; transform: rotate(58deg); }

/* The legend is ENGRAVED into the plate — cut in, catching light on the lower
   lip. Not a silkscreen, not a heading. */
.section-header .section-title {
  margin: 0;
  white-space: nowrap;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.05;
  text-transform: uppercase;
  flex: 0 0 auto;
  /* Paint-filled engraving: the legend is cut into the plate and the groove is
     filled with colour, which is how a real desk tells two identical-looking
     strips apart at a glance. Amber = drums, cyan = melody — both already in
     the board's palette rather than two new hues. */
  color: #a0a4ad;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.11), 0 -1px 1px rgba(0, 0, 0, 0.8);
}
.section-header[data-field='drum'] .section-title,
.section-header[data-field='music'] .section-title {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.10), 0 -1px 1px rgba(0, 0, 0, 0.85);
}
.section-header[data-field='drum'] .section-title { color: #f0b95c; }
.section-header[data-field='music'] .section-title { color: #6fc9f2; }

/* ---- the channel + the card ------------------------------------------------
   .led-display keeps its class name (JS and the LED-indicator rules reference
   it) but it is the CARD now. The stacked box-shadow rings are the channel it
   sits down inside: black walls, then a machined lip catching the light. */
.led-display {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* FIXED, never content-sized. The card is cut once, wide enough for the
     longest label in the tables ("Adult Contemporary", 18 characters), so
     picking a long genre can never make the strip jump a size. */
  padding: 3px 18px 4px 16px;
  flex: 0 0 auto;
  width: 246px;
  min-height: 34px;
  box-sizing: border-box;
  border-radius: 1.5px;
  /* bone card stock, fibres running with the strip */
  background:
    repeating-linear-gradient(88deg,
      rgba(120, 104, 74, 0.05) 0px, rgba(120, 104, 74, 0.05) 1px,
      transparent 1px, transparent 4px),
    linear-gradient(177deg, #efe8d6 0%, #e4dcc6 55%, #d6ccb2 100%);
  box-shadow:
        /* the channel the card sits in */
    0 0 0 4px #0c0c0e,
    0 0 0 5px #4b4d54,
    0 0 0 6px rgba(0, 0, 0, 0.55),
    /* the card's own lift off the channel floor */
    0 2px 3px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 4px rgba(120, 104, 74, 0.28);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

/* Written in by hand, in the same marker as the fader tape-labels — and
   sitting very slightly askew, the way writing on a card always does. */
.led-display-value {
  font-family: 'Desyrel', 'Comic Sans MS', cursive;
  /* One size for every label. The longest name shrinks to fit its own card
     rather than the card growing around it. */
  font-size: 1.34rem;
  line-height: 1.05;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1d2a44;
  transform: rotate(-0.55deg);
  transform-origin: center;
  /* marker bleeding a hair into the paper fibre */
  text-shadow: 0 0 0.7px rgba(29, 42, 68, 0.55);
}

/* The thumb notch cut into the card's edge — how you actually pull a
   designation strip out of its channel. It is also the affordance: a card you
   can grip is a card you can change. */
.led-caret {
  position: absolute;
  right: -1px;
  top: 50%;
  /* Shallow. A deep half-disc reads as a hole punched in the card rather than
     a scallop worn into its edge. */
  width: 7px;
  height: 15px;
  margin-top: -7.5px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(90deg, #101012, #1b1c20);
  box-shadow:
    inset 1px 0 2px rgba(0, 0, 0, 0.85),
    -1px 0 0 rgba(148, 130, 96, 0.5),
    -2px 0 3px rgba(120, 104, 74, 0.3);
}

/* Nothing chosen yet: a blank card with a ruling pencilled in, waiting to be
   filled. An empty form field, not a powered-down screen. */
.section-header[data-armed='false'] .led-display {
  background:
    repeating-linear-gradient(88deg,
      rgba(120, 104, 74, 0.05) 0px, rgba(120, 104, 74, 0.05) 1px,
      transparent 1px, transparent 4px),
    linear-gradient(177deg, #e6e0d0 0%, #d9d2be 55%, #cbc2a8 100%);
  padding-right: 16px;
}
.section-header[data-armed='false'] .led-display-value {
  color: #a99f86;
  letter-spacing: 0.12em;
  text-shadow: none;
}

/* Armed: the card can be pulled. It lifts a touch under the hand and presses
   back down into the channel on the click. */
.section-header[data-armed='true'] { cursor: pointer; }
.section-header[data-armed='true']:hover .led-display {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 4px #0c0c0e,
    0 0 0 5px #5a5c64,
    0 0 0 6px rgba(0, 0, 0, 0.55),
    0 4px 6px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 4px rgba(120, 104, 74, 0.28);
}
.section-header[data-armed='true']:active .led-display {
  transform: translateY(1px);
  box-shadow:
    0 0 0 4px #0c0c0e,
    0 0 0 5px #45474e,
    0 0 0 6px rgba(0, 0, 0, 0.55),
    0 1px 1px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 5px rgba(120, 104, 74, 0.4);
}

/* Narrower columns: the plate keeps its proportions, the card keeps a fixed
   (smaller) cut. Still no content sizing at any breakpoint. */
@media (max-width: 1500px) {
  .section-header { gap: 10px; padding: 9px 20px 10px 16px; }
  .section-header .section-title { font-size: 0.98rem; letter-spacing: 0.1em; }
  .led-display { width: 208px; }
  .led-display-value { font-size: 1.2rem; }
}
@media (max-width: 768px) {
  .section-header { padding: 7px 18px 8px 14px; gap: 9px; }
  .section-header .section-title { font-size: 0.88rem; }
  .led-display { width: 172px; min-height: 30px; }
  .led-display-value { font-size: 1.06rem; }
}

/* ============================================================================
   SUB-GENRE DROP-DOWN — the menu that opens off the designation card itself.
   ----------------------------------------------------------------------------
   Distinct from the tray on the CRT: this one is anchored to the strip you
   clicked, so it is built as an extension of that strip — the same machined
   plate, the same bone cards, the same hand. It used to be a generic #222 box
   with #333 buttons and a wall of inline styles, positioned in PAGE
   coordinates while being position:absolute inside a positioned ancestor, with
   nothing keeping it on screen. Placement now lives in a clamp effect in
   GenreSelector.tsx; this file owns the material only.
   ============================================================================ */

.subgenre-popup-menu {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Exactly as wide as the longest sub-genre on it. The cards are nowrap, so
     max-content resolves to the widest label plus its padding — no wider. */
  width: -moz-max-content;
  width: max-content;
  min-width: 150px;
  max-width: min(320px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px,
      transparent 1px, transparent 3px),
    linear-gradient(178deg, #3a3c42 0%, #292a2f 45%, #202126 100%);
  border: 1px solid #141518;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 -1px 0 rgba(0, 0, 0, 0.6) inset,
    0 12px 30px rgba(0, 0, 0, 0.75);
}

/* Says which strip you opened, in that strip's own engraved colour — the menu
   can be flipped above the card or clamped away from it, so it has to name
   itself rather than rely on sitting next to the thing it belongs to. */
.subgenre-popup-legend {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 1px 2px 5px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.09), 0 -1px 1px rgba(0, 0, 0, 0.8);
}
.subgenre-popup-menu[data-field='drum'] .subgenre-popup-legend { color: #f0b95c; }
.subgenre-popup-menu[data-field='music'] .subgenre-popup-legend { color: #6fc9f2; }

/* The cards you can slot into the channel. */
.subgenre-popup-menu .subgenre-popup-card {
  display: block;
  width: 100%;
  border: none;
  border-radius: 2px;
  padding: 5px 12px 6px;
  text-align: center;
  cursor: pointer;
  font-family: 'Desyrel', 'Comic Sans MS', cursive;
  font-size: 1.02rem;
  line-height: 1.25;
  color: #1d2a44;
  white-space: nowrap;
  background:
    repeating-linear-gradient(88deg,
      rgba(120, 104, 74, 0.05) 0px, rgba(120, 104, 74, 0.05) 1px,
      transparent 1px, transparent 4px),
    linear-gradient(177deg, #e7e0ce 0%, #dbd3bd 55%, #cdc4aa 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 1px 2px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.subgenre-popup-menu .subgenre-popup-card:hover {
  background:
    repeating-linear-gradient(88deg,
      rgba(120, 104, 74, 0.04) 0px, rgba(120, 104, 74, 0.04) 1px,
      transparent 1px, transparent 4px),
    linear-gradient(177deg, #fdf8ec 0%, #f1ead7 55%, #e2d9c1 100%);
  transform: translateY(-1px) rotate(-0.5deg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 7px rgba(0, 0, 0, 0.6);
}
.subgenre-popup-menu .subgenre-popup-card:active {
  transform: translateY(1px) rotate(0deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
}
/* Modern mixing console styling */

/* Main container with sleek dark finish */
.genre-selector-container {
  background: linear-gradient(to bottom, #1a1a1a, #111111);
  border: 1px solid #333;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 25px;
  position: relative;
  overflow: hidden;
}

/* Add subtle carbon fiber texture */
.carbon-fiber-texture {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.1) 75%,
      rgba(0, 0, 0, 0.1)
    ),
    linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.1) 75%,
      rgba(0, 0, 0, 0.1)
    );
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;
}

/* Section containers with clean, modern look */
.section-container, .middle-section {
  background: #222;
  border: 1px solid #444;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  padding: 15px;
  position: relative;
  margin-top: 20px !important; /* Centered between genres */
}

/* Section headers with modern styling */
.section-header {
  border-bottom: 1px solid #444;
  margin-bottom: 15px;
  padding-bottom: 10px;
}

/* Modern section titles */
.section-title, .region-title {
  color: #ddd;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 10px;
}

/* LED display with modern digital look */
.led-display {
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
}

/* LED display text */
.led-display-value {
  color: #f00;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255, 0, 0, 0.7);
}

/* Modern button styling */
.genre-button, .region-button, .control-button {
  background: #333;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin: 5px;
  padding: 0;
  position: relative;
  transition: all 0.2s ease;
}

/* Button outer container */
.button-outer {
  border-radius: 6px;
  padding: 2px;
  background: #222;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
}

/* Button inner container */
.button-inner {
  background: linear-gradient(to bottom, #444, #333);
  border-radius: 4px;
  color: #fff;
  padding: 8px 12px;
  text-align: center;
  transition: all 0.2s ease;
}

/* Active button state */
.genre-button.selected .button-inner,
.music-genre-selected .button-inner {
  background: linear-gradient(to bottom, #007bff, #0056b3);
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

/* LED indicator styling */
.led-indicator {
  background: #333;
  border-radius: 50%;
  height: 8px;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 8px;
  z-index: 2;
  transition: all 0.2s ease;
}

/* Active LED indicator */
.led-active {
  background: #f00;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.8);
}

/* TV screen container */
.tv-screen-container {
  background: #000;
  border: 2px solid #444;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  overflow: visible !important;
  position: relative;
  width: 100% !important;
  height: 600px !important;
  transform: scale(1.2) !important; /* Scale up the TV */
}

/* Control buttons section */
.control-buttons {
  background: #2a2a2a;
  border-radius: 6px;
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
  padding: 10px;
}

/* Control button styles */
.control-button {
  flex: 1;
  margin: 0 5px;
}

/* Control button inner styles */
.control-button .button-inner {
  background: linear-gradient(to bottom, #555, #444);
}

/* Control button hover effect */
.control-button:hover .button-inner {
  background: linear-gradient(to bottom, #666, #555);
}

/* Genre grid layout */
.genre-grid, .region-grid {
  background: #1a1a1a;
  border-radius: 6px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

/* Add subtle grid lines */
.grid-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 1;
}

/* Add subtle channel labels */
.channel-label {
  color: rgba(255, 255, 255, 0.3);
  font-size: 8px;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
}

/* Add subtle knob details */
.knob-detail {
  background: linear-gradient(to bottom, #444, #222);
  border-radius: 50%;
  height: 12px;
  left: 50%;
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  width: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Add subtle fader tracks */
.fader-track-vertical,
.fader-track-horizontal {
  background: rgba(255, 255, 255, 0.05);
  position: absolute;
  z-index: 0;
}

.fader-track-vertical {
  width: 2px;
  top: 10px;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.fader-track-horizontal {
  height: 2px;
  left: 10px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* Section labels */
.section-label {
  color: rgba(255, 255, 255, 0.2);
  font-size: 8px;
  letter-spacing: 1px;
  position: absolute;
  text-transform: uppercase;
  top: 5px;
  left: 15px;
}

/* Add subtle highlight to top edge */
.section-container::before,
.middle-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0)
  );
}

/* Add subtle shadow to bottom edge */
.section-container::after,
.middle-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0)
  );
}
/* Nspire button wrapper - positions the button at the bottom of the page */
.nspire-button-wrapper {
  position: absolute;
  top: -70px; /* Position it above the TV container */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: none; /* Allows clicks to pass through the wrapper */
  width: auto; /* Let the button define the width */
}

/* Main button styling */
.nspire-button {
  position: relative;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 30px;
  padding: 10px 25px;
  color: #00ffcc;
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: lowercase;
  letter-spacing: 3px;
  cursor: pointer;
  overflow: visible;
  pointer-events: auto; /* Makes the button clickable */
  transition: all 0.4s ease;
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
}

/* Inner container for text */
.nspire-button-inner {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Text styling with subtle animation */
.nspire-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #00ffcc, #00ccff, #00ffcc);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 8s linear infinite;
}

/* Circuit board design elements */
.nspire-circuit-left,
.nspire-circuit-right {
  position: absolute;
  height: 2px;
  background: #00ffcc;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.nspire-circuit-left {
  left: -50px;
  width: 40px;
}

.nspire-circuit-right {
  right: -50px;
  width: 40px;
}

/* Circuit nodes */
.nspire-circuit-left::before,
.nspire-circuit-right::before,
.nspire-circuit-left::after,
.nspire-circuit-right::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ffcc;
  top: 50%;
  transform: translateY(-50%);
}

.nspire-circuit-left::before {
  left: 0;
}

.nspire-circuit-left::after {
  left: 25px;
}

.nspire-circuit-right::before {
  right: 0;
}

.nspire-circuit-right::after {
  right: 25px;
}

/* Pulsing effect around the button */
.nspire-pulse {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  z-index: 0;
  opacity: 0;
  box-shadow: 0 0 0 rgba(0, 255, 204, 0);
  animation: pulse 2s infinite;
}

/* Hover effects */
.nspire-button:hover {
  background: rgba(0, 20, 20, 0.9);
  box-shadow: 0 0 30px rgba(0, 255, 204, 0.7);
  transform: translateY(-2px);
}

.nspire-button:hover .nspire-circuit-left,
.nspire-button:hover .nspire-circuit-right {
  background: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

.nspire-button:hover .nspire-circuit-left::before,
.nspire-button:hover .nspire-circuit-right::before,
.nspire-button:hover .nspire-circuit-left::after,
.nspire-button:hover .nspire-circuit-right::after {
  background: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

.nspire-button:hover .nspire-pulse {
  opacity: 1;
}

/* Active state */
.nspire-button:active {
  transform: translateY(1px);
  box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
}

/* Animations */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 204, 0.7);
    opacity: 1;
  }
  70% {
    box-shadow: 0 0 0 15px rgba(0, 255, 204, 0);
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 204, 0);
    opacity: 0;
  }
}
.shader-effect-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: hue-rotate(15deg) contrast(1.2);
}

.glitch-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.glitch-1,
.glitch-2,
.glitch-3,
.glitch-4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  mix-blend-mode: overlay;
}

/* Color shift effect for the entire page */
.color-shift {
  animation: colorShift 0.5s infinite alternate;
}

@keyframes colorShift {
  0% {
    filter: hue-rotate(0deg) saturate(1);
  }
  25% {
    filter: hue-rotate(45deg) saturate(1.5);
  }
  50% {
    filter: hue-rotate(90deg) saturate(1.2);
  }
  75% {
    filter: hue-rotate(180deg) saturate(1.7);
  }
  100% {
    filter: hue-rotate(270deg) saturate(1.3);
  }
}

.glitch-1 {
  background: linear-gradient(90deg, transparent 5%, rgba(0, 255, 255, 0.2) 10%, transparent 15%);
  animation: glitch1 2s infinite linear alternate-reverse;
  transform: skewX(45deg);
}

.glitch-2 {
  background: linear-gradient(180deg, transparent 5%, rgba(255, 0, 255, 0.2) 10%, transparent 15%);
  animation: glitch2 3s infinite linear alternate-reverse;
  transform: skewY(-45deg);
}

.glitch-3 {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 10%, transparent 15%, rgba(0, 0, 0, 0.1) 20%);
  background-size: 100px 100px;
  animation: glitch3 10s infinite linear;
}

.glitch-4 {
  background: repeating-linear-gradient(45deg, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1) 10px, rgba(0, 0, 255, 0.1) 10px, rgba(0, 0, 255, 0.1) 20px);
  mix-blend-mode: difference;
  animation: glitch4 0.5s steps(1) infinite;
  opacity: 0.3;
}

@keyframes glitch4 {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-5px, 5px); }
  20% { transform: translate(5px, -5px); }
  30% { transform: translate(3px, 3px); }
  40% { transform: translate(-3px, -3px); }
  50% { transform: translate(0, 5px); }
  60% { transform: translate(5px, 0); }
  70% { transform: translate(-5px, 0); }
  80% { transform: translate(0, -5px); }
  90% { transform: translate(2px, -2px); }
  100% { transform: translate(-2px, 2px); }
}

@keyframes glitch1 {
  0% {
    background-position: 0 0;
    filter: hue-rotate(0deg);
  }
  100% {
    background-position: 100vw 0;
    filter: hue-rotate(360deg);
  }
}

@keyframes glitch2 {
  0% {
    background-position: 0 0;
    filter: hue-rotate(180deg);
  }
  100% {
    background-position: 0 100vh;
    filter: hue-rotate(0deg);
  }
}

@keyframes glitch3 {
  0% {
    background-position: 0 0;
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    background-position: 100px 100px;
    opacity: 0.5;
  }
}

/* Add a scanline effect */
.shader-effect-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  animation: scanline 10s infinite linear;
  z-index: 1;
}

/* Add a color distortion effect */
.shader-effect-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    transparent 30%,
    rgba(255, 0, 255, 0.1) 70%,
    rgba(0, 255, 255, 0.2) 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  animation: pulse 5s infinite alternate;
  z-index: 2;
}

@keyframes scanline {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100vh;
  }
}

@keyframes pulse {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}
/* Screen shake effects */
.shake-hard {
  animation: shake-hard 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.shake-little {
  animation: shake-little 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.shake-horizontal {
  animation: shake-horizontal 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.shake-vertical {
  animation: shake-vertical 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake-hard {
  10%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 80% { transform: translate3d(10px, -10px, 0); }
  30%, 50%, 70% { transform: translate3d(-10px, 10px, 0); }
  40%, 60% { transform: translate3d(10px, 0, 0); }
}

@keyframes shake-little {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-2px, 2px, 0); }
  40%, 60% { transform: translate3d(1px, 0, 0); }
}

@keyframes shake-horizontal {
  10%, 90% { transform: translate3d(-5px, 0, 0); }
  20%, 80% { transform: translate3d(5px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

@keyframes shake-vertical {
  10%, 90% { transform: translate3d(0, -5px, 0); }
  20%, 80% { transform: translate3d(0, 5px, 0); }
  30%, 50%, 70% { transform: translate3d(0, -3px, 0); }
  40%, 60% { transform: translate3d(0, 3px, 0); }
}
/*
 * LINK UP drawer.
 *
 * Every height here is relative — the drawer's own height is set by the mixer
 * (the same band the samplers/remix menus use) and NOTHING in here may grow it.
 * Overflow scrolls internally instead.
 */

.lk-drawer {
  display: flex;
  gap: 8px;
  height: 100%;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  min-height: 0;
}

.lk-drawer-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.lk-drawer .lk-peerstrips {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 4px;
  overflow-x: auto;
  min-height: 0;
}

/* ── setup face ─────────────────────────────────────────────────────────── */

.lk-setup {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  color: #d7d8de;
  font-size: 12px;
}

/* One line: identity, the primary action, the invite. The drawer is a WIDE,
   SHORT band — stacking headings and subtitles down it spent the whole panel
   on gutter and left the content stranded in two narrow columns. */
.lk-bar { display: flex; align-items: center; gap: 10px; flex: none; }
.lk-setup-title {
  font-size: 12px; font-weight: 800; letter-spacing: .18em; color: #c9a7f5; flex: none;
}
.lk-setup-sub { font-size: 11px; color: #6f7280; flex: none; }
.lk-bar .lk-search { flex: 1; min-width: 0; max-width: 420px; margin-left: auto; }

.lk-invite {
  flex: none; background: #23262d; border: 1px solid #33374180;
}

.lk-invite-url {
  flex: none; display: flex; align-items: center; gap: 8px;
  font-size: 10px; color: #8b8d98; background: #0d0e12;
  border: 1px solid #23262d; border-radius: 4px; padding: 5px 5px 5px 9px;
}
.lk-invite-url code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-copy {
  flex: none; background: #663399; color: #fff; border: none; border-radius: 3px;
  padding: 4px 9px; font-size: 9px; font-weight: 700; letter-spacing: .1em; cursor: pointer;
}

/* Requests: a thin banner. They are rare — they should not hold a column open
   on every other day. */
.lk-reqs { flex: none; display: flex; flex-direction: column; gap: 4px; max-height: 84px; overflow-y: auto; }
.lk-req {
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(90deg, #241a33, #16181e);
  border: 1px solid #3a2d52; border-radius: 5px; padding: 6px 8px;
}

/* THE GRID — people flow across the width instead of down two columns. */
.lk-grid {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 6px;
  align-content: start;
}

.lk-card {
  display: flex; align-items: center; gap: 9px;
  background: #16181e; border: 1px solid #21242b; border-radius: 5px;
  padding: 7px 8px; min-width: 0;
}
.lk-card:hover { border-color: #33374a; }
.lk-card.lk-off { opacity: .55; }

/* Avatar puck carries the presence lamp, so the row needs no separate column
   for it. */
.lk-av {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 999px;
  background: #2c3038; color: #c9a7f5; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.lk-av .lk-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 8px; height: 8px; border-radius: 999px;
  background: #3a3d46; border: 2px solid #16181e;
}

.lk-name {
  flex: 1; min-width: 0; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lk-sub {
  display: block; font-style: normal; font-size: 10px; color: #6f7280;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lk-state { font-size: 10px; color: #6f7280; flex: none; }

.lk-dot { width: 8px; height: 8px; border-radius: 999px; background: #3a3d46; flex: none; }
.lk-dot.on { background: #22c55e; }
.lk-dot.idle { background: #d0a215; }

.lk-go, .lk-ghost, .lk-msg, .lk-invite, .lk-unlink {
  flex: none; border: none; border-radius: 4px; cursor: pointer;
  font-size: 9px; font-weight: 700; letter-spacing: .1em;
  padding: 5px 10px; color: #fff; background: #663399;
}
.lk-go:hover, .lk-invite:hover, .lk-unlink:hover { background: #8a2be2; }
.lk-ghost { background: #2c3038; color: #b8bac4; }
.lk-ghost:hover { background: #3a3f4a; }
.lk-msg { background: transparent; color: #7c7f8a; font-size: 13px; padding: 3px 5px; letter-spacing: 0; }
.lk-msg:hover { color: #c9a7f5; }
.lk-go:disabled, .lk-ghost:disabled { opacity: .35; cursor: default; background: #2c3038; }

.lk-search {
  background: #0d0e12; border: 1px solid #2b2e36; border-radius: 4px;
  color: #e8e8ea; padding: 6px 9px; font: inherit; font-size: 11px; width: 100%;
  box-sizing: border-box;
}
.lk-search::-moz-placeholder { color: #5b5e68; }
.lk-search::placeholder { color: #5b5e68; }
.lk-search:focus { outline: none; border-color: #663399; }

.lk-empty {
  grid-column: 1 / -1;
  color: #6f7280; font-size: 11px; margin: 2px 0; line-height: 1.6; max-width: 520px;
}
.lk-note { flex: none; font-size: 10px; color: #22c55e; letter-spacing: .06em; }

/* ── comms rail ─────────────────────────────────────────────────────────── */

.lk-comms {
  width: 320px;
  flex: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #0d0e12;
  border: 1px solid #23262d;
  border-radius: 6px;
  padding: 8px;
  box-sizing: border-box;
}

.lk-comms-head { display: flex; align-items: center; gap: 8px; flex: none; }
.lk-comms-who {
  flex: 1; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #c9a7f5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lk-unlink { background: #3a2020; }
.lk-unlink:hover { background: #5a2a2a; }

.lk-video { display: flex; gap: 6px; flex: none; }
.lk-tile {
  flex: 1; aspect-ratio: 4 / 3; border-radius: 4px; background: #16181e;
  border: 1px solid #23262d; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #6f7280; overflow: hidden;
}
.lk-tile-me { max-width: 38%; }
.lk-tile[data-empty='true'] { opacity: .4; }

.lk-callbar { display: flex; gap: 6px; flex: none; }
.lk-cbtn {
  flex: 1; background: #2c3038; border: none; border-radius: 4px; color: #d7d8de;
  padding: 5px; font-size: 13px; cursor: pointer;
}
.lk-cbtn:hover { background: #3a3f4a; }
.lk-cbtn:disabled { opacity: .35; cursor: default; }

.lk-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.lk-chat-lines {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  padding-right: 2px;
}

/* A received line MUST set align-self. In a flex column the default `stretch`
   renders it as a full-width slab and the two sides never read as a
   conversation — the same bug the DM thread had. */
.lk-line { display: flex; }
.lk-line .lk-bubble {
  align-self: flex-start;
  max-width: 82%;
  background: #3a3a3c; color: #fff;
  border-radius: 12px; padding: 5px 9px; font-size: 11px; line-height: 1.35;
  word-break: break-word;
}
.lk-line.mine { justify-content: flex-end; }
.lk-line.mine .lk-bubble { background: #0a84ff; }

.lk-chat-input { display: flex; gap: 5px; flex: none; }
.lk-chat-input button {
  background: #663399; border: none; border-radius: 4px; color: #fff;
  padding: 0 10px; font-size: 10px; font-weight: 700; cursor: pointer;
}
.lk-chat-input button:disabled { opacity: .4; cursor: default; }

/* Live call tiles. The <video> fills its tile; the label shows only when the
   track isn't there, so an empty tile never sits on top of a live picture. */
.lk-vid { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.lk-tile { position: relative; }
.lk-cbtn.on { background: #663399; color: #fff; }
.lk-callerr { flex: none; font-size: 10px; color: #f87171; }/**
 * NSR-10 front panel.
 *
 * The hardware is a black wedge: recessed green display, small hard
 * square keys with their labels printed ABOVE them on the case and the
 * keypad digits printed below, sliders on the left, two performance
 * wheels at the left end of the keybed.
 *
 * THE LAYOUT BREATHES. Nothing is permanently parked in a dock this
 * short, so the drawer (Wave/Seq/Browser), the utility bank and the
 * keybed all slide, and whatever is closed hands its room to what is
 * open. Sizes are driven by two vars — `--k` for key scale and `--pad`
 * for breathing room — so "there is space now" becomes one number change
 * rather than fifty overrides.
 */

.nsr-dock {
  --panel: #232427;
  --panel-lo: #131417;
  --edge: #0c0d0f;
  --key: #26272b;
  --key-hi: #35373c;
  --ink: #c9cdd3;
  --ink-dim: #7e838b;
  --tube: #46f0b4;
  --red: #ff4d3d;
  --amber: #ffb340;

  /* Key scale and padding — the whole panel zooms off these. */
  --k: 1;
  --pad: 10px;
  --slide: .34s cubic-bezier(.22, .68, .28, 1);

  position: fixed;
  /* The band's top is the mixer's bottom; this deck starts one chrome strip
     lower because .sdh-switch / .sdh-kitbar own that strip. */
  top: calc(var(--spotify-menu-top, 53.3vh) + var(--sdh-chrome, 22px));
  bottom: var(--spotify-menu-bottom, 0px);
  left: calc(var(--spotify-menu-left, 0px) + var(--soundcraft-width, 95px));
  right: var(--spotify-menu-right, 0px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-lo) 100%);
  color: var(--ink);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
/* `--k` is measured and set inline by the shell (see Nsr10Deck.tsx) —
   only the padding steps by state here. */
.nsr-dock.nsr-roomy { --pad: 14px; }
.nsr-dock.nsr-kbd-open { --pad: 8px; }
.nsr-dropping { outline: 2px dashed var(--tube); outline-offset: -4px; }

/* Border-box throughout. A key sized `width: 100%` under content-box
   sizing is 100% PLUS its two 1px borders, and eleven of those in the
   track row is exactly the 2px overflow that would not go away. */
.nsr-dock, .nsr-dock *, .nsr-dock *::before, .nsr-dock *::after { box-sizing: border-box; }

/* ---- Header: always reachable, whatever is open ---- */
.nsr-titlebar {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  padding: 5px 12px;
  background: linear-gradient(180deg, #2a2d33 0%, #1d1f24 100%);
  border-bottom: 1px solid #101216;
}
.nsr-ondot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tube); box-shadow: 0 0 7px var(--tube);
}



.nsr-title-status {
  margin-left: auto; margin-right: 6px;
  font-size: 7.5px; letter-spacing: .18em; text-transform: uppercase; color: #6d747d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nsr-hsep { width: 1px; height: 15px; background: #3a3d43; flex-shrink: 0; }
.nsr-hbtn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; cursor: pointer; flex-shrink: 0;
  padding: 4px 10px;
  background: #2c2f35; border: 1px solid #14161a; border-radius: 3px;
  color: var(--ink); font: inherit; font-size: 8.5px;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background .16s, color .16s, border-color .16s;
}
.nsr-hbtn:hover { background: #3a3e46; color: #fff; }
.nsr-hbtn.on {
  background: linear-gradient(180deg, #14403a 0%, #0d2f2b 100%);
  color: var(--tube); border-color: #0a6b5c;
  box-shadow: inset 0 0 10px rgba(70, 240, 180, .2);
}
.nsr-hclose { padding: 4px 8px; }

/* ---- Console beside the drawer ---- */
.nsr-stagerow { flex: 1; min-height: 0; display: flex; align-items: stretch; }
/* The row the paint is on. */
.nsr-stagerow { position: relative; }

.nsr-console {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  gap: var(--pad);
  /* Right padding is the strip the nameplate is painted on — reserved so
     no control is ever laid over it. */
  padding: 5px calc(236px * var(--k)) 4px var(--pad);
  transition: gap var(--slide), padding var(--slide);
  overflow-x: auto;
  overflow-y: hidden;
}
.nsr-console::-webkit-scrollbar { height: 5px; }
.nsr-console::-webkit-scrollbar-track { background: transparent; }
.nsr-console::-webkit-scrollbar-thumb { background: #34373c; border-radius: 3px; }
.nsr-bay { display: flex; flex-direction: column; min-width: 0; }

/* Case print: label above the key, digit below, amber accents. */
.nsr-pgcell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nsr-pglabel {
  font-size: calc(7px * var(--k)); letter-spacing: .08em;
  color: var(--ink); white-space: nowrap; line-height: 1.1;
  display: flex; flex-direction: column; align-items: center;
  transition: font-size var(--slide);
}
.nsr-pglabel em { font-style: normal; color: var(--amber); font-size: .82em; }
.nsr-pgdigit {
  font-size: calc(7.5px * var(--k)); font-weight: 700; color: var(--amber);
  line-height: 1; min-height: 8px; transition: font-size var(--slide);
}
.nsr-src-print { color: var(--tube); font-size: calc(6.5px * var(--k)); letter-spacing: .1em; }
.nsr-caption {
  font-size: calc(7px * var(--k)); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink); text-align: center;
}

/* ---- Keys: small, hard, square ---- */
.nsr-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: linear-gradient(180deg, var(--key-hi) 0%, var(--key) 100%);
  border: 1px solid #16181c;
  border-radius: 2px;
  color: var(--ink);
  font: inherit;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 2px rgba(0, 0, 0, .4);
  transition: background .12s, color .12s, transform .06s, width var(--slide), height var(--slide);
}
.nsr-btn:hover { background: linear-gradient(180deg, #41434a 0%, #2e3034 100%); color: #f2f6fa; }
.nsr-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); }
.nsr-btn:focus-visible { outline: 1px solid var(--tube); outline-offset: 1px; }
.nsr-btn:disabled { cursor: default; opacity: .8; }
.nsr-btn.active {
  background: linear-gradient(180deg, #14403a 0%, #0d2f2b 100%);
  color: var(--tube); border-color: #0a6b5c;
  box-shadow: inset 0 0 10px rgba(70, 240, 180, .2);
}
.nsr-btn.rec {
  background: linear-gradient(180deg, #3a1512 0%, #280d0b 100%);
  color: var(--red); border-color: #6b1a12;
}
.nsr-key-amber {
  background: linear-gradient(180deg, #8a6a24 0%, #6b4e16 100%);
  border-color: #3d2c0a; color: #ffe9b0;
}
.nsr-key-amber:hover { background: linear-gradient(180deg, #a17d2e 0%, #7c5b1c 100%); color: #fff3d0; }
.nsr-pgkey { width: calc(46px * var(--k)); height: calc(24px * var(--k)); }

/* ---- The Panel key and the drive/volume bay, far left ---- */
.nsr-bay-opener { flex-shrink: 0; justify-content: center; }
.nsr-bay-drive { flex-shrink: 0; flex-direction: row; align-items: center; gap: 10px; }
.nsr-bay-data { flex-shrink: 0; justify-content: center; }
/* The sampling block stacks: the six keys in their two columns, the
   transport printed underneath. Wide enough for BOTH — the keys set a
   narrow grid and three transport buttons need more than that, so the
   bay carries the wider of the two rather than letting one squeeze the
   other. */
.nsr-bay.nsr-bay-sample {
  flex-shrink: 0; justify-content: center; gap: calc(9px * var(--ks, var(--k)));
  align-items: center; flex-direction: column;
  /* Never clip the case print. With the keybed out the console is 152px
     shorter and this block was simply cut off at the bottom — the label
     under Play ("Continue") and the top row's names went with it. */
  overflow: visible;
  /* Two class names on purpose: the generic `.nsr-bay` rule sets
     `min-width: 0` further down and would otherwise win on source order,
     collapsing this bay onto its narrowest child. */
  min-width: calc(116px * var(--ks, var(--k)));
  /* A SET DISTANCE off the tube — not shoved to the far right.
     Anchoring it right put it 114px from the display in one state and
     389px in another, which reads as adrift rather than placed. A fixed
     margin keeps the same modest gap in every state. */
  margin-left: calc(34px * var(--ks, var(--k)));
  margin-right: 0;
}
.nsr-sample-grid { justify-content: center; }
/* HALF THE HEIGHT. These are shallow momentary keys on the case, not the
   deep instrument buttons — the width was always right. Halving the
   height is also what buys the block enough room to print its labels
   with the keybed out, where the console loses 152px of its own. */
/* All six match Sample: shallow momentary keys, full width. */
.nsr-sample-grid .nsr-pgkey { height: calc(12px * var(--ks, var(--k))); }
/* The block's keys and print hold the roomy size — --ks, not --k. */
.nsr-bay-sample .nsr-pgkey { width: calc(46px * var(--ks, var(--k))); }
.nsr-bay-sample .nsr-pglabel { font-size: calc(7px * var(--ks, var(--k))); }
.nsr-bay-sample .nsr-pgdigit { font-size: calc(7.5px * var(--ks, var(--k))); }
.nsr-bay-sample .nsr-src-print { font-size: calc(6.5px * var(--ks, var(--k))); }
.nsr-bay-sample .nsr-trklabel,
.nsr-bay-sample .nsr-trkbot { font-size: calc(6px * var(--ks, var(--k))); }
.nsr-bay-sample .nsr-pglabel,
.nsr-bay-sample .nsr-pgdigit { white-space: nowrap; }

/* The transport, printed under the sampling block. */
/* Back to three — Record, Stop, Play. Key Sync went up to the header. */
.nsr-transport-row {
  display: flex; align-items: start; justify-content: center;
  gap: calc(8px * var(--ks, var(--k)));
  width: 100%;
  min-width: 0;
}
.nsr-transport-row .nsr-trkcell { flex: 1 1 0; min-width: 0; max-width: calc(32px * var(--ks, var(--k))); }

/* The header lamp: same glass as the panel LEDs, sized for the strip. */
.nsr-hled { width: 6px; height: 6px; margin: 0 2px 0 -2px; flex-shrink: 0; }
/* Same depth as the eight above them — they are the same class of key. */
.nsr-transport-row .nsr-pgkey { height: calc(24px * var(--ks, var(--k))); }
.nsr-sample-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(7px * var(--ks, var(--k))) calc(10px * var(--ks, var(--k))); }
/* With the page cluster out, ease the block LEFT a touch so it keeps a
   respectful gap off the painted NSR logo instead of crowding it. */
.nsr-bank-open .nsr-bay.nsr-bay-sample {
  margin-left: calc(16px * var(--ks, var(--k)));
  margin-right: calc(20px * var(--ks, var(--k)));
}
/* VINTAGE MODE printed here said nothing the machine does — removed. */

/* ---- The button cluster: slides open, takes the drawer's room ---- */
.nsr-cluster {
  flex: 0 0 0px;
  overflow: hidden;
  /* max-height rides along with the width. Closed, this block was still
     250px TALL — zero width, invisible, and stretching the console from
     the inside, which is what pushed the whole row past its height
     whenever the bank was shut. A thing with no width should cost no
     height either. */
  max-height: 0;
  transition: flex-basis var(--slide), opacity var(--slide), max-height var(--slide);
  opacity: 0;
  display: flex; align-items: center;
}
.nsr-bank-open .nsr-cluster { flex-basis: calc(268px * var(--k)); opacity: 1; max-height: 100%; }
.nsr-cluster-inner {
  width: calc(268px * var(--k));
  display: flex; align-items: center; gap: calc(9px * var(--k));
}


.nsr-fader { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
/* A fader is a groove with a cap — the native rail reads as a scrollbar. */
.nsr-vslider {
  -moz-appearance: none;
       appearance: none; -webkit-appearance: none;
  height: 128px; width: 34px;
  writing-mode: vertical-lr;
  direction: rtl;                 /* up is louder */
  background: transparent; cursor: pointer; margin: 0;
}
.nsr-vslider::-webkit-slider-runnable-track {
  width: 8px;
  background: linear-gradient(90deg, #1a1c20 0%, #26282d 60%, #14161a 100%);
  border-radius: 3px; border: 1px solid #101216;
}
.nsr-vslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px; height: 16px; margin-left: -13px; border-radius: 2px;
  background: linear-gradient(180deg, #24262b 0%, #101216 45%, #3c4046 50%, #101216 55%, #1c1e23 100%);
  border: 1px solid #0a0b0d;
  box-shadow: 0 2px 4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
}
.nsr-vslider-data::-webkit-slider-thumb {
  background: linear-gradient(180deg, #2b2417 0%, #14100a 45%, #6d5522 50%, #14100a 55%, #201a10 100%);
}
.nsr-vslider:disabled { opacity: .35; cursor: not-allowed; }

/* ---- Mode column ---- */
.nsr-bay-mode { flex-shrink: 0; gap: calc(5px * var(--k)); justify-content: center; }

/* ---- Page block ---- */
.nsr-bay-pages { flex-shrink: 0; justify-content: center; }
.nsr-pages-row { display: flex; gap: calc(9px * var(--k)); }
.nsr-pgcol { display: flex; flex-direction: column; gap: calc(6px * var(--k)); }
.nsr-pggrid { display: flex; flex-direction: column; gap: calc(4px * var(--k)); }
.nsr-pgrow { display: flex; gap: calc(7px * var(--k)); }
.nsr-pgrow-track { justify-content: center; }

/* ---- Arrow diamond ---- */
.nsr-bay-arrows { flex-shrink: 0; gap: calc(9px * var(--k)); justify-content: center; margin-right: calc(8px * var(--k)); }
/* Four identical keys in a diamond, as on the case — up and down were
   spanning two columns and reading as bars rather than buttons. */
.nsr-diamond {
  display: grid;
  grid-template-columns: repeat(3, calc(30px * var(--k)));
  grid-template-rows: repeat(3, calc(20px * var(--k)));
  gap: calc(3px * var(--k)); justify-content: center;
}
.nsr-arrow { padding: 0; font-size: calc(9px * var(--k)); line-height: 1; }
.nsr-arrow-up { grid-column: 2; grid-row: 1; }
.nsr-arrow-left { grid-column: 1; grid-row: 2; }
.nsr-arrow-right { grid-column: 3; grid-row: 2; }
.nsr-arrow-down { grid-column: 2; grid-row: 3; }
.nsr-yesno { display: flex; gap: calc(7px * var(--k)); justify-content: center; }
.nsr-yes { border-color: #1d4536; }
.nsr-no { border-color: #4a2620; }

/* ---- Display bay: the tube is the last thing allowed to shrink ---- */
.nsr-bay-display {
  flex: 0 1 560px; min-width: 0; gap: 3px; justify-content: center;
  margin-left: calc(12px * var(--k));
  /* A floor on the distance to whatever sits beside it. Anchoring the
     sampling group to the right let a narrow row push the two together. */
  margin-right: calc(22px * var(--k));
}
.nsr-console > * { min-width: 0; }
.nsr-window {
  padding: 6px 9px 7px;
  background: #0a0c0d;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8);
}
.nsr-indicators { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.nsr-ind-gap { flex: 1; }
.nsr-chip {
  font-size: 7.5px; letter-spacing: .14em; padding: 1px 4px;
  border: 1px solid rgba(70,240,180,.5); border-radius: 2px; color: var(--tube);
}
.nsr-chip-rec { border-color: rgba(255,77,61,.6); color: var(--red); }
.nsr-led { font-size: 7.5px; letter-spacing: .18em; text-transform: uppercase; color: #2f3a38; }
.nsr-led.on { color: var(--tube); text-shadow: 0 0 8px rgba(70, 240, 180, .55); }
.nsr-led-page { color: var(--amber) !important; text-shadow: 0 0 8px rgba(255, 179, 64, .5); }

.nsr-meter { display: flex; gap: 3px; margin-top: 5px; }
.nsr-meter-cell { flex: 1; height: 5px; border-radius: 1px; background: rgba(70,240,180,.12); }
.nsr-meter-cell.on { background: var(--tube); box-shadow: 0 0 4px rgba(70,240,180,.6); }
/* The hardware ladder: green up the bar, amber near the ceiling, red IS
   the ceiling — lit red means the output stage is saturating. */
.nsr-meter-cell.amber { background: rgba(255,179,64,.14); }
.nsr-meter-cell.amber.on { background: var(--amber); box-shadow: 0 0 4px rgba(255,179,64,.65); }
.nsr-meter-cell.red { background: rgba(255,77,61,.14); }
.nsr-meter-cell.red.on { background: var(--red); box-shadow: 0 0 5px rgba(255,77,61,.75); }

/* ---- The eight track keys, tight under the glass ---- */
.nsr-under-display { display: flex; flex-direction: column; gap: 3px; }
/* Eight keys, alone on their line and centred under the display. With the
   transport gone from this row there is nothing to weight it to one side,
   so the cells take an even share of the tube's width. */
.nsr-track-row {
  display: flex; align-items: start; justify-content: center;
  gap: calc(8px * var(--k));
  min-width: 0;
  padding: 0 calc(6px * var(--k));
}
.nsr-track-row .nsr-trkcell { max-width: calc(40px * var(--k)); }
/* Eleven of these sit under a display bay that is not eleven page-keys
   wide, and on the hardware they are narrower anyway.
   They also SHRINK rather than overflow: the transport labels (Record,
   Continue) are wider than the keys they sit over, so any width I model
   for this row is wrong by however long the longest word is. Letting the
   cells give makes overflow structurally impossible instead. */
/* Three fixed slots — marker, key, print. The transport words are longer
   than the keys they sit over, so anything auto-height put Record/Stop/
   Play on a different line from tracks 1-8. A fixed grid cannot. */
.nsr-trkcell {
  display: grid;
  grid-template-rows: calc(8px * var(--k)) auto calc(9px * var(--k));
  justify-items: center; align-items: center;
  /* Share the row's exact width rather than summing eleven fixed bases —
     borders and sub-pixel rounding across eleven cells was enough to
     push the row 2px over on its own. */
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(28px * var(--k));
}
.nsr-trkcell .nsr-pgkey { width: 100%; }
.nsr-trktop { display: flex; gap: calc(7px * var(--k)); align-items: center; }
/* Case print spills past the key it names — "Record" is wider than the
   button under it on the real panel too. Zero width so it costs the
   layout nothing and can never push the row into overflow. */
.nsr-trklabel, .nsr-trkbot {
  font-size: calc(6px * var(--k)); line-height: 1;
  color: var(--ink); white-space: nowrap;
  width: 0; overflow: visible; text-align: center;
  display: flex; justify-content: center;
}
.nsr-trklabel > *, .nsr-trkbot > * { flex-shrink: 0; }
/* The 1-8 prints are white on the case; only Continue is amber. */
.nsr-trkbot { font-weight: 700; color: #f2f5f8; }
.nsr-trkbot.nsr-amber-print { color: var(--amber); }
/* The two LEDs live ABOVE the key on the case, not on the key. */
.nsr-track-gap { width: calc(10px * var(--k)); flex-shrink: 0; }
.nsr-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #2a2d33; display: inline-block; flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.7);
}
.nsr-dot.red.on { background: var(--red); box-shadow: 0 0 5px var(--red); }
.nsr-dot.green.on { background: #39e07a; box-shadow: 0 0 5px #39e07a; }
.nsr-dot.yellow.on { background: var(--amber); box-shadow: 0 0 5px var(--amber); }
/* A take going down blinks; a sequence recording holds steady. */
@keyframes nsrDotBlink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: .15; } }
.nsr-dot.blink { animation: nsrDotBlink .7s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) { .nsr-dot.blink { animation: none; } }
.nsr-track-captions {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 6.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
}
.nsr-track-captions .nsr-dot { width: 4px; height: 4px; }
.nsr-amber-print { color: var(--amber); }

/* ---- The nameplate: a real block on the panel, not a caption ----
   `flex: 1` alone gave it whatever was left after the display had taken
   its fill, which at most widths was thirty pixels — the machine's badge
   rendered as a smudge. A basis makes it ask for its own room; shrink 3
   makes it the FIRST thing to give it back, so it can still never be the
   reason something else is squeezed. */
/* PAINT, NOT A PANEL.
   Screen-printed on the case at a fixed spot: it never slides, never
   resizes with the drawer, and takes no part in the bay flow. The drawer
   passes over it and back off, revealing the paint underneath. It also
   costs the other controls nothing now — laying it out in the flex row
   was what forced every button 16% smaller to make room. */
.nsr-bay-badge {
  position: absolute;
  right: calc(72px * var(--k));
  top: calc(50% - 6px);
  transform: translateY(-50%);
  width: calc(164px * var(--k));
  max-width: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}
/* THE NAMEPLATE.
   On the hardware the wordmark is the largest thing on the panel after
   the display — it sits across its ellipse in the right-hand third, with
   the full name printed beneath. Sized here against the bay rather than
   in fixed pixels, so it grows into whatever room the closed drawers
   give back and shrinks out of the way instead of pushing anything. */
.nsr-badge-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(3px * var(--k));
  width: 100%; min-width: 0; min-height: 0; max-height: 100%;
}
.nsr-badge-line {
  font-size: calc(8px * var(--k));
  letter-spacing: .17em;
  color: #cfd8e2;
  white-space: nowrap;
}

.nsr-badge {
  width: 100%;
  max-width: calc(300px * var(--k));
  /* Never taller than the row it sits in. A flex item whose CONTENT is
     taller than its container stretches the container instead — which is
     how a 128px badge pushed the console 28px past its own height once
     the keybed took the room below it. */
  max-height: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  /* The art carries its own shadow; the panel adds only a touch of lift. */
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 calc(1px * var(--k)) calc(2px * var(--k)) rgba(0, 0, 0, .5));
}
.nsr-badge-word {
  font: italic 800 76px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .06em;
  fill: url(#nsrGold);
  stroke: #05070a;
  stroke-width: 6;
  paint-order: stroke fill;
}
.nsr-badge-sub {
  font: 500 13px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .16em;
  fill: #dfe6ee;
}

/* The model number rides low inside the ellipse, as it does on the case —
   smaller than the wordmark and tucked under its first letters rather
   than trailing the word. */
.nsr-badge-ten {
  font: italic 800 30px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .02em;
  fill: url(#nsrGold);
  stroke: #0a0d11;
  stroke-width: 2;
  paint-order: stroke fill;
}

/* The maker's mark: a boxed word, the way it is printed on the panel. */
.nsr-badge-maker rect {
  fill: #0d1014;
  stroke: #cbd3dd;
  stroke-width: 2.5;
}
.nsr-badge-maker text {
  font: 800 15px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .16em;
  fill: #e8eef6;
}
/* Nothing decorative survives a squeeze. */
/* Only a DRAWER hides the nameplate — it is the one thing that takes the
   console's WIDTH. The keybed slides up from the floor and costs height,
   which the badge scales against, so blanking it there just meant the
   machine lost its badge the moment you opened the keys. */
/* The paint stays put; only the room reserved for it changes. A drawer
   covers the mark, so the console stops holding a strip clear for it. */
.nsr-drawer-open .nsr-console { padding-right: var(--pad); }
.nsr-kbd-open .nsr-track-captions { display: none; }
.nsr-kbd-open .nsr-meter { display: none; }

/* ---- The drawer ---- */
.nsr-drawer {
  position: relative;
  z-index: 1;                       /* travels OVER the painted nameplate */
  background: var(--case, #14171c);
  flex: 0 0 0px;
  overflow: hidden;
  transition: flex-basis var(--slide), opacity var(--slide);
  opacity: 0;
}
.nsr-drawer.open { flex-basis: min(462px, 42%); opacity: 1; }
/* Fixed inner width so the contents don't reflow mid-slide. */
.nsr-drawer-inner {
  width: 100%; min-width: 290px; height: 100%;
  display: flex; flex-direction: column;
  padding: 6px 10px 6px 10px;
  border-left: 1px solid #2c2f35;
}
.nsr-drawer-inner > * { flex: 1; min-height: 0; }

/* ---- The record browser inside the drawer ----
   BrowserEmbed.css pins the suggestor's overlay/modal `absolute inset 0`
   to the nearest positioned ancestor, so this must BE that ancestor or
   the browser escapes and swallows the machine. */
.nsr-browser {
  position: relative;
  overflow: hidden;
  background: #17191d;
  border: 1px solid #101216; border-radius: 4px;
}

/* ---- Sequencer ---- */
.nsr-seq { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.nsr-seq-head { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nsr-seq-t { min-width: 50px; padding: 4px 6px; }
.nsr-seq-t.rec {
  color: var(--red); border-color: #6b1a12;
  background: linear-gradient(180deg,#3a1512 0%,#280d0b 100%);
}
.nsr-seq-field {
  display: flex; align-items: center; gap: 4px;
  font-size: 7px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim);
}
.nsr-seq-field input {
  width: 42px; padding: 2px 4px;
  background: #0d1013; border: 1px solid #14161a; border-radius: 2px;
  color: var(--tube); font: inherit; font-size: 9px; text-align: right;
}
.nsr-seq-playhead {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 100%; pointer-events: none; opacity: 0; z-index: 4;
}
.nsr-seq-playhead::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background: var(--tube); box-shadow: 0 0 6px var(--tube);
}
.nsr-seq-foot {
  font-size: 6.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
}

/* ---- Wave editor ---- */
.nsr-wave { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.nsr-wave-tools { display: flex; gap: 4px; }
.nsr-wave-t { flex: 1; padding: 5px 0; font-size: 7.5px; }
.nsr-wave-canvas {
  flex: 1; min-height: 0; position: relative;
  background: #07100c; border: 1px solid #000; border-radius: 3px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7); overflow: hidden;
}
.nsr-wave-canvas canvas { position: absolute; inset: 0; touch-action: none; }
.nsr-wave-info {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 6.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden;
}

/* ---- Keybed: slides up from the floor ---- */
.nsr-keybed {
  flex-shrink: 0;
  height: 0;
  overflow: hidden;
  transition: height var(--slide);
  background: linear-gradient(180deg, #1b1c1f 0%, #101114 100%);
}
.nsr-kbd-open .nsr-keybed { height: 152px; border-top: 1px solid #000; }
.nsr-keybed-inner {
  height: 152px;
  display: flex; gap: 10px; align-items: stretch;
  padding: 5px 12px 7px;
}
.nsr-wheels {
  display: flex; gap: 5px; align-items: stretch; flex-shrink: 0;
  padding: 6px 7px;
  background: linear-gradient(180deg, #232427 0%, #17181b 100%);
  border: 1px solid #000; border-radius: 4px;
}
.nsr-wheel {
  -moz-appearance: none;
       appearance: none; -webkit-appearance: none;
  width: 26px;
  writing-mode: vertical-lr; direction: rtl;
  background: transparent; cursor: pointer; margin: 0;
}
.nsr-wheel::-webkit-slider-runnable-track {
  width: 22px;
  background: linear-gradient(90deg, #08090b 0%, #1e2126 20%, #2b2e34 50%, #1e2126 80%, #08090b 100%);
  border-radius: 11px; border: 1px solid #000;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.8);
}
.nsr-wheel::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 10px; border-radius: 3px;
  background: linear-gradient(180deg, #3a3e45 0%, #22242a 40%, #101216 60%, #2a2d33 100%);
  border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.nsr-kbd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nsr-kbd-head { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.nsr-col-title, .nsr-kbd-hint {
  font-size: 6.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
}
.nsr-keys {
  flex: 1; display: flex; min-height: 0;
  background: #0c0d10; border: 1px solid #000; border-radius: 3px;
  padding: 2px; gap: 1px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7);
  touch-action: none;          /* a drag across the keys plays, not scrolls */
  overflow-x: auto; overscroll-behavior-x: contain;
}
/* Room to spend: all 61 share the width and nothing scrolls. */
.nsr-keys.spread { overflow-x: hidden; }
.nsr-white-slot { position: relative; flex: 0 0 38px; transition: flex-basis var(--slide); }
.nsr-keys.spread .nsr-white-slot { flex: 1 1 0; min-width: 0; }
.nsr-white {
  width: 100%; height: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; border: 1px solid #1a1c20; border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, #eef0f3 0%, #c9cdd4 100%);
  cursor: pointer; padding: 0;
}
.nsr-white.down { background: linear-gradient(180deg, #8fd8c8 0%, #57b7a2 100%); }
.nsr-black {
  position: absolute; top: 0; right: 0; z-index: 2;
  width: 62%; height: 60%; transform: translateX(50%);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; border: 1px solid #000; border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, #43464c 0%, #17191d 100%);
  cursor: pointer; padding: 0;
  box-shadow: 0 2px 3px rgba(0,0,0,.6);
}
.nsr-black.down { background: linear-gradient(180deg, #1c6357 0%, #0d3c34 100%); }

/* Root markers: the board shows what's taken before you commit. */
.nsr-white.mk-taken { box-shadow: inset 0 -6px 0 rgba(255,179,64,.85); }
.nsr-black.mk-taken { box-shadow: inset 0 -5px 0 rgba(255,179,64,.9), 0 2px 3px rgba(0,0,0,.6); }
.nsr-white.mk-fresh, .nsr-black.mk-fresh {
  box-shadow: inset 0 -6px 0 #39e07a, 0 0 10px rgba(57,224,122,.6);
}
@keyframes nsrDlPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(70,240,180,.9); }
  50% { box-shadow: inset 0 0 0 2px rgba(70,240,180,.15); }
}
.nsr-white.mk-downloading, .nsr-black.mk-downloading { animation: nsrDlPulse .7s ease-in-out infinite; }
.nsr-white.drop-here { background: linear-gradient(180deg, #b9f4e2 0%, #7fd7bd 100%); }
.nsr-black.drop-here { background: linear-gradient(180deg, #2f8a72 0%, #16584a 100%); }

/* ---- Status foot ---- */
.nsr-foot {
  flex-shrink: 0;
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 4px 12px 5px; border-top: 1px solid #000;
  font-size: 7px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-dim); background: #17181b;
}

/* Dark scrollbars — a chrome-white bar across a black machine is a torch. */
.nsr-keys::-webkit-scrollbar { height: 7px; }
.nsr-keys::-webkit-scrollbar-track { background: #0b0c0e; }
.nsr-keys::-webkit-scrollbar-thumb {
  background: #34373c; border-radius: 4px; border: 1px solid #0b0c0e;
}
.nsr-keys::-webkit-scrollbar-thumb:hover { background: #46f0b4; }

@media (prefers-reduced-motion: reduce) {
  .nsr-dock { --slide: 1ms; }
  .nsr-white.mk-downloading, .nsr-black.mk-downloading { animation: none; }
}

/* ==== Piano roll ==== */
.nsr-seq-trk {
  font-size: 7px; letter-spacing: .16em; color: var(--tube);
  padding-left: 4px; white-space: nowrap;
}
.nsr-seq-q { min-width: 46px; }

.nsr-roll {
  flex: 1; min-height: 0;
  display: flex; gap: 2px;
  background: #0b0d0f; border: 1px solid #000; border-radius: 3px;
  padding: 3px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7);
  overflow: hidden;
}
/* Key rail — black keys shade their row, so pitch reads without labels. */
.nsr-roll-keys {
  width: 26px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid #1a1c20;
}
.nsr-roll-key {
  flex: 1; min-height: 0; position: relative;
  background: #d8dce2; border-bottom: 1px solid #0b0d0f;
}
.nsr-roll-key.blk { background: #23262b; }
.nsr-roll-key b {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-size: 5.5px; font-weight: 700; color: #0b0d0f; letter-spacing: 0;
}

.nsr-roll-grid {
  position: relative; flex: 1; min-width: 0;
  overflow: hidden; cursor: crosshair; touch-action: none;
}
.nsr-roll-rows { position: absolute; inset: 0; display: flex; flex-direction: column; }
.nsr-roll-row { flex: 1; min-height: 0; background: rgba(255,255,255,.022); }
.nsr-roll-row.blk { background: rgba(0,0,0,.28); }
.nsr-roll-row.oct { box-shadow: inset 0 -1px 0 rgba(255,255,255,.10); }
.nsr-roll-bars { position: absolute; inset: 0; display: flex; pointer-events: none; }
.nsr-roll-bars > span { flex: 1; border-left: 1px solid rgba(255,255,255,.05); }
.nsr-roll-bars > .nsr-bar { border-left-color: rgba(255,255,255,.16); }

.nsr-roll-note {
  position: absolute; z-index: 3;
  background: var(--tube);
  border: 1px solid rgba(0,0,0,.55);
  border-radius: 2px;
  min-height: 3px;
  cursor: grab;
  box-shadow: 0 0 4px rgba(70,240,180,.45);
}
.nsr-roll-note:active { cursor: grabbing; }
.nsr-roll-note.sel {
  background: #fff; border-color: #fff;
  box-shadow: 0 0 7px rgba(255,255,255,.85);
  opacity: 1 !important;
}
.nsr-roll-box {
  position: absolute; z-index: 5; pointer-events: none;
  border: 1px solid var(--tube);
  background: rgba(70,240,180,.13);
}
.nsr-seq-playhead::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background: #fff; box-shadow: 0 0 6px #fff;
}

/* ==== A drag arms the track keys ====
   While something is being dragged onto the machine, the eight keys
   pulse so it's obvious they're the target; the one under the pointer
   lights solid and takes the selection. */
@keyframes nsrTrkArm {
  0%, 100% { box-shadow: 0 0 0 1px rgba(70,240,180,.25); }
  50%      { box-shadow: 0 0 6px 1px rgba(70,240,180,.75); }
}
.nsr-trkcell.armed .nsr-pgkey { animation: nsrTrkArm 1s ease-in-out infinite; }
/* A drag target announces itself with the LAMP, not with a box drawn
   round the key. The glowing outline sat exactly where you were trying
   to look, which is the opposite of helpful while dropping. */
.nsr-trkcell.over .nsr-pgkey {
  animation: none;
  background: linear-gradient(180deg, #14403a 0%, #0d2f2b 100%);
}
.nsr-trkcell.over .nsr-dot.yellow { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.nsr-trkcell.over .nsr-trkbot { color: var(--tube); }

/* The delete key wears its consequence. */

@media (prefers-reduced-motion: reduce) {
  .nsr-trkcell.armed .nsr-pgkey { animation: none; box-shadow: 0 0 0 1px rgba(70,240,180,.45); }
}

/* Per-wavesample level, in the wave toolbar. */
.nsr-wave-vol {
  display: flex; align-items: center; gap: 4px; flex: 1.4;
  font-size: 6.5px; letter-spacing: .14em; color: var(--ink-dim);
}
.nsr-wave-vol input { flex: 1; min-width: 0; accent-color: var(--tube); cursor: pointer; }
.nsr-wave-vol b { color: var(--tube); font-size: 8px; min-width: 16px; text-align: right; }

/* Sliders take the pointer, not the eye — no focus ring on a fader. */
/* The quantise menu wears the panel's materials, not the browser's. */
.nsr-seq-qsel select {
  background: #10131a; color: var(--tube); border: 1px solid #2a2f39;
  border-radius: 3px; font: inherit; padding: 1px 2px; min-width: 0;
}
.nsr-seq-qsel select:focus { outline: 1px solid var(--tube); }

/* The tempo readout: dragged, never typed. */
.nsr-seq-bpm { cursor: ns-resize; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.nsr-seq-bpm.is-sync { cursor: default; }
.nsr-seq-bpm.is-sync strong { color: var(--amber); text-shadow: 0 0 6px rgba(255,179,64,.45); }

/* A synced sample lights its readout — the clock is driving this one. */
.nsr-val.is-on strong { color: var(--tube); text-shadow: 0 0 6px rgba(70,240,180,.5); }

.nsr-wave-vol { min-width: 0; flex: 1 1 0; }
.nsr-wave-vol input { min-width: 0; }
.nsr-wave-vol input:focus, .nsr-wave-vol input:focus-visible,
.nsr-vslider:focus, .nsr-vslider:focus-visible,
.nsr-wheel:focus, .nsr-wheel:focus-visible { outline: none; }

/* Drag-to-set readouts in the wave strip — the STUDIO deck's gesture, sized
   for a slot too narrow to hold a slider. Label above value, whole box is the
   grab target, double-click resets. */
.nsr-val {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.28);
  cursor: ns-resize;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.nsr-val small { font-size: 6.5px; letter-spacing: .14em; color: var(--ink-dim); }
.nsr-val strong {
  min-width: 20px;
  text-align: right;
  font-size: 9px;
  font-weight: 700;
  color: var(--tube);
  font-variant-numeric: tabular-nums;
}
.nsr-val:hover { background: rgba(0, 0, 0, 0.42); }
.nsr-val.is-off { opacity: 0.4; cursor: default; }

/* ---- Scenes: the eight sequences taken together ---- */
/* The strip is pinned to the TUBE'S centre, not dropped wherever the
   header's flexbox leaves it — it names the sequences you are watching
   on that display, so it has to sit over it. The deck measures the bay
   and publishes the x as --scenex. */
.nsr-hgap { flex: 1 1 0; min-width: 0; }
.nsr-scenes {
  display: flex; gap: 3px;
  position: absolute; left: var(--scenex, 50%); transform: translateX(-50%);
  pointer-events: auto;
}
/* Readable at arm's length: the strip prints at the header's full size
   (the filled-green attempt read as a toy and the tiny SEQ was
   illegible), and the lit state is EXACTLY the KEY SYNC treatment —
   .nsr-hbtn.on — so one green means "on" everywhere on this line. */
.nsr-scene {
  padding: 4px 0; width: 52px; text-align: center; letter-spacing: .06em;
  font-size: 10px;
}
.nsr-scene-tag { opacity: 0.72; margin-right: 4px; }
/* A header too narrow for the full-dress strip (embedded studio with the
   drawer out): drop the SEQ word and tighten, rather than paint the strip
   over the KEYS button — a covered button is an unclickable button. */
.nsr-strip-tight .nsr-scene { width: 26px; }
.nsr-strip-tight .nsr-scene-tag { display: none; }
/* Dim = nothing recorded in it. The strip tells you where your work is
   at a glance, which is the whole reason it sits over the display. */
.nsr-scene.empty { color: #565c65; background: #212429; border-color: #17191d; }
/* Holds a part: brighter than empty even before you select it. */
.nsr-scene { color: #e4e8ee; }
/* PLAYING wins over empty — the scene you are ON is lit even before it
   holds a take. Same clothes as KEY SYNC (.nsr-hbtn.on), restated here
   because .empty is declared later and would strip it. */
.nsr-scene.on {
  background: linear-gradient(180deg, #14403a 0%, #0d2f2b 100%);
  color: var(--tube); border-color: #0a6b5c;
  box-shadow: inset 0 0 10px rgba(70, 240, 180, .2);
}

/* QUEUED flashes rather than lights: it is announcing what happens at the
   end of this sequence, not what is happening now. */
@keyframes nsrSceneNext {
  0%, 45%   {
    background: linear-gradient(180deg, #14403a 0%, #0d2f2b 100%);
    color: var(--tube); border-color: #0a6b5c;
    box-shadow: inset 0 0 10px rgba(70, 240, 180, .2);
  }
  55%, 100% { background: #2c2f35; color: var(--ink); border-color: #14161a; box-shadow: none; }
}
.nsr-scene.queued { animation: nsrSceneNext .5s steps(1, end) infinite; }

/* Anything that can be chosen while DELETE is asking pulses. */
@keyframes nsrPickPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 61, 0); }
  50%      { box-shadow: 0 0 8px 1px rgba(255, 77, 61, .75); }
}
.nsr-scene.picking,
.nsr-trkcell.picking .nsr-pgkey { animation: nsrPickPulse .7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .nsr-scene.queued { animation: none; box-shadow: inset 0 0 0 1px var(--tube); }
  .nsr-scene.picking, .nsr-trkcell.picking .nsr-pgkey { animation: none; box-shadow: 0 0 0 1px var(--red); }
}

/* ---- The disk drive drawer ---- */
.nsr-lib { display: flex; flex-direction: column; height: 100%; gap: 8px; min-height: 0; }
.nsr-lib-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nsr-lib-name {
  flex: 1 1 120px; min-width: 0;
  background: #0d0f11; border: 1px solid #23262b; border-radius: 3px;
  color: var(--tube); font: inherit; font-size: 10px; letter-spacing: .1em;
  padding: 5px 8px; text-transform: uppercase;
}
.nsr-lib-name::-moz-placeholder { color: #4a4f57; }
.nsr-lib-name::placeholder { color: #4a4f57; }
.nsr-lib-save { font-size: 9px; padding: 5px 9px; white-space: nowrap; }
.nsr-lib-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.nsr-lib-empty { color: #565c65; font-size: 9px; letter-spacing: .12em; padding: 14px 4px; text-align: center; }
.nsr-lib-row {
  display: flex; align-items: center; gap: 7px;
  background: #17191d; border: 1px solid #212429; border-radius: 3px;
  padding: 5px 7px;
}
.nsr-lib-tag {
  font-size: 8px; letter-spacing: .12em; padding: 2px 5px; border-radius: 2px; flex-shrink: 0;
  background: #10312a; color: var(--tube);
}
.nsr-lib-tag.bank { background: #33270e; color: var(--amber); }
.nsr-lib-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; letter-spacing: .08em; color: #e4e8ee;
}
.nsr-lib-meta { font-size: 8px; color: #7e838b; letter-spacing: .06em; flex-shrink: 0; }
.nsr-lib-load { font-size: 9px; padding: 4px 9px; flex-shrink: 0; }
.nsr-lib-del { font-size: 9px; padding: 4px 7px; flex-shrink: 0; color: #9aa0a8; }
.nsr-lib-del.armed { color: var(--red); border-color: #6b1a12; }

/* ---- The level ladder + trim, between the tube and the sampling keys ---- */
.nsr-bay.nsr-bay-meter {
  flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(6px * var(--k));
  margin-right: calc(10px * var(--k));
}
.nsr-vumeter {
  display: flex; flex-direction: column-reverse; gap: 2px;
  width: calc(11px * var(--k));
}
.nsr-vumeter .nsr-meter-cell { width: 100%; height: calc(4px * var(--k)); flex: none; }
.nsr-trimknob {
  width: calc(22px * var(--k)); height: calc(22px * var(--k));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a3d43 0%, #232529 55%, #17181c 100%);
  border: 1px solid #0c0d0f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 3px rgba(0, 0, 0, .5);
  cursor: ns-resize; position: relative; flex-shrink: 0;
  transform: rotate(var(--rot, 0deg));
  touch-action: none;
}
.nsr-trim-notch {
  position: absolute; left: 50%; top: 6%;
  width: 2px; height: 34%;
  margin-left: -1px; border-radius: 1px;
  background: var(--tube); box-shadow: 0 0 3px rgba(70, 240, 180, .6);
}
.nsr-trim-print {
  font-size: calc(6.5px * var(--k)); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink);
}

/* ---- The INPUT LEVEL lamps: 2 per side, analog glow, as on the case ---- */
.nsr-lamps {
  display: grid;
  grid-template-columns: auto calc(16px * var(--k)) calc(16px * var(--k));
  align-items: center; justify-items: center;
  -moz-column-gap: calc(5px * var(--k));
       column-gap: calc(5px * var(--k)); row-gap: calc(5px * var(--k));
}
/* RECTANGULAR, as on the case — these are little bar LEDs behind a
   window, not indicator dots. */
.nsr-lamp {
  width: calc(14px * var(--k)); height: calc(6px * var(--k));
  border-radius: 1px;
  border: 1px solid #0b0c0e;
  background: #141519;
}
/* SIGNAL: dim green floor that brightens and slides to yellow (--hue is
   set by the meter loop, 145 = green down to 52 = yellow). */
.nsr-lamp-sig {
  background: hsl(var(--hue, 145) 85% calc(12% + var(--v, 0) * 42%));
  box-shadow: 0 0 calc(var(--v, 0) * 9px) hsl(var(--hue, 145) 90% 55% / calc(var(--v, 0) * .9));
}
/* PEAK: dark, reddening in as the stage is approached, full at the clip. */
.nsr-lamp-peak {
  background: hsl(4 80% calc(10% + var(--v, 0) * 40%));
  box-shadow: 0 0 calc(var(--v, 0) * 10px) hsl(4 95% 55% / var(--v, 0));
}
.nsr-lamp-print {
  font-size: calc(6px * var(--k)); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim); justify-self: end;
}
.nsr-lamps .nsr-lamp-print:nth-last-child(-n+2) { justify-self: center; }

/* The disk drawer's tools row — search, filter chips, sort. */
.nsr-lib-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nsr-lib-tools .nsr-lib-name { flex: 1 1 90px; }
.nsr-lib-chip { font-size: 8.5px; padding: 4px 7px; white-space: nowrap; }
.nsr-lib-count { font-size: 8px; color: #7e838b; letter-spacing: .1em; margin-left: auto; }
/* NTAKT — loop sampler.
   Cold blue-grey instrument panel. The MODE recolours the accent, because the
   mode is the machine's identity: sampler amber, beat machine blue, time
   machine red, and every lit control follows.

   NOTHING IN HERE SCROLLS. Three columns, each a flex column that hands its
   spare height to the one thing that wants it (the wave). A short wide dock
   punishes vertical stacking, so the controls went to a rail on the right. */

.ntk-deck {
  --ntk-accent: #4aa3e0;
  position: fixed;
  top: calc(var(--spotify-menu-top, 53.3vh) + var(--sdh-chrome, 22px));
  bottom: 0;
  left: 0;
  right: var(--spotify-menu-right, 0px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #2b3440, #1d242d 55%, #171d24);
  color: #d6dee8;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  overflow: hidden;
}

/* ---- title strip ---- */
.ntk-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 5px 12px;
  border-bottom: 1px solid #3d4855;
  background: linear-gradient(180deg, #333e4b, #29323d);
}
.ntk-logo { font-size: 15px; font-weight: 900; letter-spacing: 0.22em; color: var(--ntk-accent); }
.ntk-sub { font-size: 8.5px; letter-spacing: 0.16em; color: #7f8b99; }
.ntk-file {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--ntk-accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
}
.ntk-status { margin-left: auto; font-size: 10px; color: #8fd9a8; letter-spacing: 0.08em; }
.ntk-chip {
  all: unset; cursor: pointer; font-size: 9.5px; font-weight: 900; letter-spacing: 0.1em;
  padding: 4px 9px; border-radius: 4px; color: #b8c3d0; box-shadow: inset 0 0 0 1px #4b5766;
}
.ntk-chip.is-on { background: var(--ntk-accent); color: #10161d; box-shadow: none; }

/* ---- three columns ---- */
.ntk-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  flex: 1;
  min-height: 0;
}
.ntk-body.has-browser { grid-template-columns: 280px minmax(0, 1fr) 300px; }

/* The left column is a two-drawer cabinet: records, or kits. */
.ntk-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid #3d4855;
  background: #1a2027;
  overflow: hidden;
}
.ntk-sidetabs { display: flex; flex-shrink: 0; }
.ntk-sidetab {
  all: unset; cursor: pointer; flex: 1; text-align: center;
  font-size: 9px; font-weight: 900; letter-spacing: 0.14em;
  padding: 5px 0; color: #7f8b99;
  background: #232c36; border-bottom: 1px solid #3d4855;
}
.ntk-sidetab.is-on { background: #1a2027; color: var(--ntk-accent); box-shadow: inset 0 -2px 0 var(--ntk-accent); }

/* Kept mounted, just hidden: the suggestor holds search state and a globe
   iframe, and remounting it on every tab flip would reload both. */
.ntk-browser.is-hidden { display: none; }

.ntk-kits { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 7px; gap: 6px; }
.ntk-kitsave { display: flex; gap: 5px; flex-shrink: 0; }
.ntk-kitsave input {
  flex: 1; min-width: 0; background: #141a21; border: 1px solid #3d4855; border-radius: 3px;
  color: #d6dee8; font: inherit; font-size: 11px; padding: 4px 7px; letter-spacing: 0.05em;
}
.ntk-kitlist { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ntk-kitempty { font-size: 9.5px; letter-spacing: 0.12em; color: #5b6675; text-align: center; padding: 14px 0; }
.ntk-kitrow { display: flex; align-items: center; gap: 3px; }
.ntk-kitname {
  all: unset; cursor: pointer; flex: 1; min-width: 0;
  font-size: 11px; color: #c3ccd8; padding: 5px 7px; border-radius: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #3a4552;
}
.ntk-kitname:hover { color: var(--ntk-accent); box-shadow: inset 0 0 0 1px var(--ntk-accent); }
.ntk-kitrow.is-on .ntk-kitname { color: var(--ntk-accent); box-shadow: inset 0 0 0 1px var(--ntk-accent); }
/* Always visible, fixed box, no reveal-on-hover: a delete you have to find is
   a delete you press by accident. */
.ntk-kitdel {
  all: unset; cursor: pointer; width: 22px; text-align: center; flex-shrink: 0;
  font-size: 10px; color: #7f8b99; padding: 5px 0; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #3a4552;
}
.ntk-kitdel:hover { color: #ff8f8f; box-shadow: inset 0 0 0 1px #ff8f8f66; }
.ntk-kitnote { font-size: 8.5px; line-height: 1.4; color: #5b6675; flex-shrink: 0; }

.ntk-browser {
  /* MUST be positioned: BrowserEmbed.css turns the suggestor's overlay into
     `absolute; inset: 0`, which needs an ancestor to land in. Without it the
     overlay resolves against .ntk-deck and covers the whole machine. */
  position: relative;
  min-width: 0;
  min-height: 0;
  flex: 1;
  background: #1a2027;
  overflow: hidden;
}

.ntk-centre {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 6px 10px;
  gap: 6px;
}
.ntk-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: 6px 8px;
  border-left: 1px solid #3d4855;
  background: #1b222a;
  overflow: hidden;
}

/* ---- source bar ---- */
.ntk-srcbar {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  background: #212a34; border-radius: 5px; box-shadow: inset 0 0 0 1px #3d4855;
  padding: 4px 8px;
}
.ntk-srcbar label { display: flex; align-items: center; gap: 4px; font-size: 8.5px; letter-spacing: 0.1em; color: #7f8b99; }
.ntk-srcbar input {
  width: 48px; background: #171d24; border: 1px solid #3d4855; border-radius: 3px;
  color: #d6dee8; font: inherit; font-size: 11px; padding: 2px 4px; text-align: center;
}
.ntk-srcbar input:disabled { opacity: 0.5; }
.ntk-gap { flex: 1; }
.ntk-factor {
  font-size: 11px; font-weight: 900; color: #8b97a6;
  padding: 2px 6px; border-radius: 3px; box-shadow: inset 0 0 0 1px #3d4855;
}
.ntk-factor.is-locked { color: #7ee787; box-shadow: inset 0 0 0 1px #7ee78766; }

.ntk-btn {
  all: unset; cursor: pointer; font-size: 9.5px; font-weight: 900; letter-spacing: 0.08em;
  padding: 4px 9px; border-radius: 4px; color: #b8c3d0; box-shadow: inset 0 0 0 1px #4b5766;
}
.ntk-btn.is-on { background: var(--ntk-accent); color: #10161d; box-shadow: none; }
.ntk-btn:disabled { opacity: 0.32; cursor: not-allowed; }

/* ---- the wave takes every spare pixel ---- */
.ntk-wave {
  position: relative;
  flex: 1;
  min-height: 90px;
  background: #121820;
  border-radius: 5px;
  box-shadow: inset 0 1px 5px #000000aa;
  overflow: hidden;
}
.ntk-wavesvg { display: block; width: 100%; height: 100%; }
.ntk-wave-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; letter-spacing: 0.16em; color: #5b6675;
}

/* ---- keys, directly under the wave ---- */
.ntk-keys { display: flex; align-items: stretch; gap: 6px; flex-shrink: 0; }
.ntk-latch {
  all: unset; cursor: pointer; align-self: center;
  font-size: 8.5px; font-weight: 900; letter-spacing: 0.1em;
  padding: 5px 8px; border-radius: 4px; color: #8b97a6; box-shadow: inset 0 0 0 1px #4b5766;
}
.ntk-latch.is-on { background: var(--ntk-accent); color: #10161d; box-shadow: none; }
.ntk-keybed { display: flex; flex: 1; min-width: 0; gap: 1px; height: 46px; }
.ntk-key {
  flex: 1; min-width: 0; background: #e8edf3; border-radius: 0 0 2px 2px; cursor: pointer;
  transition: background 0.08s;
}
.ntk-key.is-black { background: #2a333d; height: 62%; }
.ntk-key.is-zone { background: var(--ntk-accent); }
.ntk-key.is-slice { background: #57d6c4; }
.ntk-key.is-sel { box-shadow: inset 0 0 0 2px #7ee787; }
/* The drop range, lit as you drag across the keys. */
.ntk-key.is-drag { background: #7ee787; box-shadow: inset 0 0 0 1px #0d1b12; }

/* ---- right rail ---- */
.ntk-modes { display: flex; gap: 4px; flex-shrink: 0; }
.ntk-mode {
  all: unset; cursor: pointer; flex: 1; text-align: center;
  font-size: 8.5px; font-weight: 900; letter-spacing: 0.06em;
  padding: 6px 2px; border-radius: 4px; color: #b8c3d0; box-shadow: inset 0 0 0 1px #4b5766;
}
.ntk-mode-sampler.is-on { background: #e0b040; color: #1a1204; box-shadow: none; }
.ntk-mode-beat.is-on { background: #4aa3e0; color: #04131f; box-shadow: none; }
.ntk-mode-time.is-on { background: #e05a5a; color: #1e0707; box-shadow: none; }

.ntk-railsec {
  position: relative;
  background: #1e262f; border-radius: 5px; box-shadow: inset 0 0 0 1px #37424f;
  padding: 5px 6px; display: flex; flex-direction: column; gap: 4px;
  min-height: 0;
}
.ntk-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ntk-info { font-size: 9px; color: #7f8b99; }

.ntk-tabs { display: flex; gap: 2px; }
.ntk-tab {
  all: unset; cursor: pointer; flex: 1; text-align: center;
  font-size: 7.5px; font-weight: 900; letter-spacing: 0.04em;
  padding: 4px 1px; border-radius: 3px; color: #6f7c8b; box-shadow: inset 0 0 0 1px #3a4552;
}
/* Lit = engaged. Outlined = the one you are looking at. Both at once is
   normal, and that pair is why one header can do both jobs. */
.ntk-tab.is-on { color: var(--ntk-accent); }
.ntk-tab.is-sel { background: #2c3540; color: #d6dee8; box-shadow: inset 0 0 0 1px var(--ntk-accent); }
.ntk-tab.is-on.is-sel { color: var(--ntk-accent); }

.ntk-knobs { display: flex; flex-wrap: wrap; gap: 2px; justify-content: space-around; align-items: center; }
.ntk-waves { display: flex; gap: 2px; flex-wrap: wrap; width: 100%; justify-content: center; }
.ntk-mini {
  all: unset; cursor: pointer; font-size: 8px; font-weight: 900;
  padding: 2px 5px; border-radius: 3px; color: #8b97a6; box-shadow: inset 0 0 0 1px #4b5766;
}
.ntk-mini.is-on { background: var(--ntk-accent); color: #10161d; box-shadow: none; }

.ntk-cmdwrap { position: relative; }
.ntk-cmd {
  position: absolute; bottom: calc(100% + 4px); left: 0; min-width: 170px;
  background: #2a333f; border-radius: 5px;
  box-shadow: 0 0 0 1px #4b5766, 0 10px 24px #000000aa;
  padding: 3px; z-index: 30; display: flex; flex-direction: column;
}
.ntk-cmd button {
  all: unset; cursor: pointer; font-size: 10px; color: #d6dee8; padding: 4px 7px; border-radius: 3px;
}
.ntk-cmd button:hover { background: #38434f; color: var(--ntk-accent); }

.ntk-eq {
  position: relative; width: 100%; min-height: 40px;
  background: #121820; border-radius: 4px; box-shadow: inset 0 1px 4px #000000aa; overflow: hidden;
}
.ntk-eq-curve {
  position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ntk-accent) 35%, transparent), transparent);
  border-top: 1px solid var(--ntk-accent);
  border-radius: 40% 40% 0 0 / 80% 80% 0 0;
}
.ntk-eq-dot {
  position: absolute; left: 46%; top: 34%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ntk-accent); box-shadow: 0 0 8px var(--ntk-accent);
}
.ntk-notwired { font-size: 7.5px; letter-spacing: 0.1em; color: #e0b040; opacity: 0.75; text-align: center; }

/* ---- the shared crate browser, dressed as part of this machine ----
   The globe's white full bleed is deliberate and shared (BrowserEmbed.css);
   ours is the chrome around it and the height chain, so the card list gets
   room to actually show a card. */
.ntk-browser .sample-suggestor-overlay,
.ntk-browser .sample-suggestor-modal,
.ntk-browser .ss-body,
.ntk-browser .ss-tab-panel { background: transparent; }
.ntk-browser .sample-suggestor-modal { border: 0; box-shadow: none; }
.ntk-browser .sample-suggestor-overlay,
.ntk-browser .sample-suggestor-modal {
  display: flex; flex-direction: column; height: 100%; max-height: 100%; min-height: 0;
}
.ntk-browser .ss-body { flex: 1; min-height: 0; overflow-y: auto; }
.ntk-browser .ss-tabs {
  background: linear-gradient(180deg, #333e4b, #29323d);
  border-bottom: 1px solid #3d4855;
  padding: 0; gap: 0; flex-wrap: nowrap; overflow-x: auto;
}
.ntk-browser .ss-tab-btn {
  flex: 0 0 auto; border-radius: 0; padding: 5px 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  color: #8b97a6; border-right: 1px solid #3d4855;
}
.ntk-browser .ss-tab-btn.active { background: #1a2027; color: var(--ntk-accent); }
.ntk-browser .ss-tab-underline { background: var(--ntk-accent); height: 2px; }
.ntk-browser .ss-tab, .ntk-browser .ss-tab-globe { background: #1a2027; }
.ntk-browser .ss-decade-label { color: #8b97a6; }
/* NTONIC — the instrument's own panel. Anthracite metal with the channel
   strip glowing in signal orange; deliberately NOT a sampler grey, so the
   instruments family reads as its own species on the shelf. */

.nto-deck {
  position: fixed;
  top: calc(var(--spotify-menu-top, 53.3vh) + var(--sdh-chrome, 22px));
  bottom: 0;
  left: 0;
  right: var(--spotify-menu-right, 0px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #23262c, #17191d 60%, #131519);
  color: #e8e4da;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  overflow: hidden;
}

.nto-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 14px 6px;
  border-bottom: 1px solid #3a3e46;
  background: #1d2025;
}
.nto-logo {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: #ff9d45;
}
.nto-sub { font-size: 10px; letter-spacing: 0.14em; color: #8b8f98; }
.nto-close {
  all: unset;
  cursor: pointer;
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #aeb2bb;
  padding: 4px 10px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #3a3e46;
}
.nto-close:hover { color: #e8e4da; }

.nto-body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 10px;
  padding: 10px 14px;
}

/* ---- channel strip ---- */
.nto-channels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 236px;
  flex-shrink: 0;
  align-content: start;
  /* Eight pads can be taller than the dock on a short window; the column
     scrolls rather than running under the footer. */
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.nto-chan { display: flex; flex-direction: column; gap: 3px; }
.nto-pad {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  height: 56px;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #2c3038, #22252b);
  box-shadow: inset 0 0 0 1px #3e434c, 0 2px 6px #00000066;
  transition: box-shadow 80ms, transform 80ms;
  position: relative;
}
.nto-pad.is-sel { box-shadow: inset 0 0 0 2px #ff9d45, 0 2px 6px #00000066; }
.nto-pad.is-hit { transform: translateY(1px); box-shadow: inset 0 0 0 2px #7ee787, 0 0 14px #7ee78755; }
.nto-pad.is-muted { opacity: 0.45; }
.nto-pad-num { font-size: 10px; font-weight: 900; color: #6f747e; }
.nto-pad-name { font-size: 12.5px; font-weight: 900; letter-spacing: 0.08em; margin-top: auto; }
.nto-pad-choke {
  position: absolute; top: 5px; right: 7px;
  font-size: 7px; letter-spacing: 0.1em; color: #ff9d45; opacity: 0.8;
}
.nto-mute {
  all: unset;
  cursor: pointer;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 0;
  border-radius: 4px;
  color: #8b8f98;
  box-shadow: inset 0 0 0 1px #3a3e46;
}
.nto-mute.is-on { background: #c8452e; color: #fff; box-shadow: none; }

/* ---- patch section ---- */
.nto-patch {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 10px;
  overflow-y: auto;
}
.nto-sec {
  flex: 1;
  min-width: 0;
  background: #1c1f24;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #34383f;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-content: start;
  height: -moz-fit-content;
  height: fit-content;
}
.nto-sec-head {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: #ff9d45;
  padding-bottom: 2px;
  border-bottom: 1px solid #34383f;
}
.nto-sec-head-minor { color: #9aa0ab; margin-top: 6px; }

.nto-param { display: flex; align-items: center; gap: 8px; }
.nto-param-name {
  width: 64px;
  flex-shrink: 0;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: #9aa0ab;
  text-transform: uppercase;
}
.nto-param input[type='range'] { flex: 1; min-width: 0; height: 4px; accent-color: #ff9d45; }
.nto-param-val {
  width: 56px;
  flex-shrink: 0;
  text-align: right;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #e8e4da;
}

.nto-modes { display: flex; gap: 4px; }
.nto-mode {
  all: unset;
  cursor: pointer;
  flex: 1;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 4px 0;
  border-radius: 4px;
  color: #8b8f98;
  box-shadow: inset 0 0 0 1px #3a3e46;
}
.nto-mode.is-on { background: #ff9d45; color: #1c130a; box-shadow: none; }

.nto-toggle {
  all: unset;
  cursor: pointer;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 5px 8px;
  border-radius: 4px;
  color: #8b8f98;
  box-shadow: inset 0 0 0 1px #3a3e46;
}
.nto-toggle.is-on { background: #ff9d45; color: #1c130a; box-shadow: none; }
.nto-mix-toggles { display: flex; gap: 6px; }
.nto-mix-toggles .nto-toggle { flex: 1; }

.nto-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 8px;
  border-top: 1px solid #3a3e46;
  background: #1d2025;
}
.nto-foot-btn {
  all: unset;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: 4px;
  color: #cfd3da;
  box-shadow: inset 0 0 0 1px #3a3e46;
}
.nto-foot-btn:hover { color: #ff9d45; }
.nto-foot-note { margin-left: auto; font-size: 9.5px; letter-spacing: 0.08em; color: #6f747e; }

/* The INSTRUMENTS group on the device toolbar: same chrome as the sampler
   tabs, plus a caption and a divider, and the instrument tab keeps the
   signal-orange identity when lit. */
.sdh-group-label {
  align-self: flex-end;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #8b8f98;
  padding: 0 2px 4px 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.sdh-group-divider {
  align-self: flex-end;
  width: 1px;
  height: 14px;
  margin: 0 6px 3px 4px;
  background: #4a4f58;
}
.sdh-tab.sdh-tab-inst.is-on { background: #ff9d45; color: #1c130a; }

/* ---- pattern engine ---- */
.nto-pattern {
  border-top: 1px solid #3a3e46;
  background: #191c21;
  padding: 8px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.nto-transport {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
}
.nto-play {
  all: unset;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 6px 16px;
  border-radius: 5px;
  color: #cfd3da;
  box-shadow: inset 0 0 0 1px #3a3e46;
}
.nto-play.is-on { background: #7ee787; color: #0d1a10; box-shadow: none; }
.nto-tsp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: #8b8f98;
}
.nto-tsp input[type='number'] {
  width: 52px;
  background: #22252b;
  border: 1px solid #3a3e46;
  border-radius: 4px;
  color: #e8e4da;
  font: inherit;
  font-size: 12px;
  padding: 3px 6px;
  text-align: center;
}
.nto-tsp input[type='range'] { width: 90px; accent-color: #ff9d45; }
.nto-tsp b { font-size: 10.5px; color: #e8e4da; min-width: 32px; }
.nto-tsp-grow { flex-shrink: 1; }
.nto-rate { display: flex; gap: 3px; }
.nto-rate .nto-mode { padding: 3px 7px; flex: none; }
.nto-pats { display: flex; gap: 3px; margin-left: auto; }
.nto-pat {
  all: unset;
  cursor: pointer;
  width: 20px;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 0;
  border-radius: 4px;
  color: #cfd3da;
  box-shadow: inset 0 0 0 1px #3a3e46;
}
.nto-pat.is-empty { color: #5c616b; }
.nto-pat.is-on { background: #ff9d45; color: #1c130a; box-shadow: none; }

.nto-lane { display: flex; align-items: center; gap: 3px; }
.nto-lane-name {
  width: 34px;
  flex-shrink: 0;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #8b8f98;
}
.nto-step {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  flex: 1;
  height: 18px;
  border-radius: 3px;
  background: #23262c;
  box-shadow: inset 0 0 0 1px #34383f;
}
.nto-step.is-beat { box-shadow: inset 0 0 0 1px #4a4f58; }
.nto-step.is-dead { opacity: 0.25; pointer-events: none; }
.nto-step.is-play { box-shadow: inset 0 0 0 2px #7ee787; }
.nto-step-on.is-on { background: #ff9d45; }
.nto-step-accent.is-on { background: #ffd0a0; }
.nto-step-fill.is-on { background: #e0685a; }
.nto-step-len { height: 10px; }
.nto-step-len.is-on { background: #4a90c2; }

/* ---- matrix + chaining ---- */
.nto-pat-cell { display: inline-flex; align-items: center; gap: 3px; }
.nto-chain {
  all: unset;
  cursor: pointer;
  width: 10px;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  color: #4a4f58;
  line-height: 1;
}
.nto-chain.is-on { color: #7ee787; }
.nto-chain:hover { color: #8b8f98; }
.nto-pat.is-live { box-shadow: inset 0 0 0 2px #7ee787; }
.nto-pat.is-on.is-live { background: #ff9d45; box-shadow: 0 0 8px #7ee78788; }
.nto-matrix-btn { margin-left: 8px; }

.nto-lane-chan {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  width: 34px;
  flex-shrink: 0;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #8b8f98;
  overflow: hidden;
  white-space: nowrap;
}
.nto-lane-chan.is-sel { color: #ff9d45; }
.nto-mx { height: 15px; position: relative; }
.nto-mx.is-on { background: #ff9d45; }
.nto-mx.is-on.is-acc { background: #ffd0a0; }
.nto-mx.is-on.is-fill::after {
  content: '';
  position: absolute;
  inset: 3px auto 3px 3px;
  width: 5px;
  border-radius: 2px;
  background: #e0685a;
}

/* ---- morph + edit all ---- */
.nto-morph-btn.is-on { background: #4a90c2; color: #0c1620; box-shadow: none; }
.nto-editall-on { background: #ff9d45; color: #1c130a; box-shadow: none; }
.nto-morph-slider {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  color: #8b8f98;
}
.nto-morph-slider input[type='range'] { width: 180px; accent-color: #4a90c2; }

/* ---- presets + patch library ---- */
.nto-preset { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.nto-pre-step {
  all: unset; cursor: pointer; font-size: 9px; color: #8b8f98;
  padding: 4px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px #3a3e46;
}
.nto-pre-step:hover { color: #ff9d45; }
.nto-pre-name {
  background: #22252b; border: 1px solid #3a3e46; border-radius: 4px;
  color: #e8e4da; font: inherit; font-size: 11px; font-weight: 700;
  padding: 3px 8px; min-width: 150px; letter-spacing: 0.04em;
}
.nto-pre-save {
  all: unset; cursor: pointer; font-size: 10px; font-weight: 900;
  letter-spacing: 0.08em; color: #cfd3da; padding: 4px 8px;
  border-radius: 4px; box-shadow: inset 0 0 0 1px #3a3e46;
}
.nto-pre-save:hover { color: #ff9d45; }
.nto-pre-save.is-on { background: #ff9d45; color: #1c130a; box-shadow: none; }

.nto-lib {
  position: absolute; inset: 0; z-index: 30;
  background: #0e1013cc;
  display: flex; align-items: center; justify-content: center;
}
.nto-lib-panel {
  width: min(860px, 92%);
  max-height: 84%;
  overflow-y: auto;
  background: #1c1f24;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #3a3e46, 0 18px 50px #000000aa;
  padding: 12px 14px;
}
.nto-lib-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 900; letter-spacing: 0.14em; color: #ff9d45;
  margin-bottom: 10px;
}
.nto-lib-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nto-lib-cat-name {
  font-size: 9.5px; font-weight: 900; letter-spacing: 0.16em; color: #8b8f98;
  margin-bottom: 4px; border-bottom: 1px solid #34383f; padding-bottom: 2px;
}
.nto-lib-patch {
  all: unset; cursor: pointer; display: block; width: 100%;
  box-sizing: border-box;
  font-size: 11px; color: #cfd3da; padding: 4px 6px; border-radius: 4px;
}
.nto-lib-patch:hover { background: #2c3038; color: #ff9d45; }

/* ---- utility menus ---- */
.nto-util { position: relative; }
.nto-util-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: #262a31;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #4a4f58, 0 12px 30px #000000aa;
  padding: 5px;
  z-index: 40;
  display: flex;
  flex-direction: column;
}
.nto-util-menu button {
  all: unset;
  cursor: pointer;
  font-size: 11px;
  color: #d7dbe2;
  padding: 5px 8px;
  border-radius: 4px;
}
.nto-util-menu button:hover { background: #353b45; color: #ff9d45; }
.nto-util-sep { height: 1px; background: #3f4551; margin: 4px 2px; }
.nto-util-scope {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #9aa0ab;
  padding: 3px 8px;
}

/* ---- transport sync ---- */
.nto-play.is-armed { box-shadow: inset 0 0 0 2px #7ee787; color: #7ee787; }
.nto-stop.is-on { background: #c8452e; color: #fff; box-shadow: none; }
.nto-sync {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #6f747e;
  white-space: nowrap;
}
.nto-sync.is-live { color: #7ee787; }
.nto-tsp input:disabled { opacity: 0.55; cursor: not-allowed; }
.nto-detune {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  color: #8b8f98;
  padding-left: 2px;
}
.nto-detune b { color: #ff9d45; font-variant-numeric: tabular-nums; min-width: 40px; }
.nto-detune button {
  all: unset; cursor: pointer; font-size: 9px; color: #6f747e;
  padding: 1px 5px; border-radius: 3px; box-shadow: inset 0 0 0 1px #3a3e46;
}
.nto-detune button:hover { color: #ff9d45; }
/* Recipes Menu Styles - Spotify-inspired */
:root {
  --recipes-menu-top: 470px;
  --spotify-green: #1DB954;
  --spotify-black: #121212;
  --spotify-dark-gray: #181818;
  --spotify-light-gray: #282828;
  --spotify-text: #FFFFFF;
  --spotify-text-subdued: #b3b3b3;
  --spotify-highlight: #1DB954;
  --spotify-purple: #8A2BE2;
  --recipes-menu-left: 100px;
}

.recipes-container {
  position: fixed;
  /* Docked to the measured panel band. --recipes-menu-* (470px / 100px) were a
     second, slightly different guess at the same geometry as every other menu,
     so Recipes sat 10px off from the samplers; they survive only as fallbacks. */
  left: calc(var(--spotify-menu-left, 10px) + var(--soundcraft-width, 90px));
  right: var(--spotify-menu-right, 0px);
  top: var(--spotify-menu-top, var(--recipes-menu-top));
  bottom: var(--spotify-menu-bottom, 0px);
  z-index: 50;
  max-height: none;
  overflow: visible;
  font-family: 'Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} 

.recipes-modal {
  background: linear-gradient(135deg, var(--spotify-black) 0%, var(--spotify-dark-gray) 100%);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  max-height: none;
} 

.recipes-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--recipes-primary), var(--recipes-secondary));
  z-index: 1;
}

.recipes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}

.recipes-title {
  font-size: 28px;
  font-weight: 700;
  color: white;
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, var(--spotify-purple), var(--spotify-green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.5px;
}

.recipes-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--recipes-primary), var(--recipes-secondary));
  border-radius: 3px;
}

.recipes-close-button {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.recipes-close-button:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.recipes-menu-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 0;
  height: 100%;
  padding: 0 6px 6px 6px;
  flex: 1 1 auto;
  align-content: flex-start;
  max-height: none;
} 

.recipes-content::-webkit-scrollbar {
  width: 8px;
}

.recipes-content::-webkit-scrollbar-track {
  background: transparent;
}

.recipes-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.recipes-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.recipes-category {
  background: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 12px;
  min-width: 120px;
  max-width: 100vw;
  box-shadow: none;
  overflow: visible;
}

.recipes-category-title {
  font-size: 14px;
  font-weight: 700;
  color: white;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 0;
  background: none;
}

.recipes-category-title .category-icon {
  margin-right: 12px;
  color: var(--soundcraft-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipes-see-all {
  font-size: 14px;
  color: var(--spotify-text-subdued);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-left: auto;
  transition: color 0.2s ease;
}

.recipes-see-all:hover {
  color: var(--soundcraft-blue);
}

.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.6em;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  padding: 0.5em 0.5em 1em 0.5em;
  width: 100%;
  box-sizing: border-box;
} 

/* Toggle Switch for Lock Tempo */
.toggle-switch-container {
  display: flex;
  align-items: center;
  gap: 12px; /* Space between label and switch */
}

.toggle-switch-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--spotify-text-subdued);
  transition: color 0.3s ease;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--spotify-light-gray);
  border: 1px solid #444;
  transition: .4s;
  border-radius: 28px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: var(--spotify-green);
  border: 1px solid var(--spotify-green);
}

input:checked + .toggle-slider:before {
  transform: translateX(22px);
}

/* Change label color when active */
input:checked ~ .toggle-switch-label {
  color: var(--spotify-text);
}


.selected-recipe-title {
  margin-left: 1em;
  font-family: 'Press Start 2P', 'VT323', 'Courier New', Courier, monospace; /* Prioritize pixel/dot-matrix fonts */
  font-size: 2.2em; /* Even larger font size for dot-matrix title */
  color: #FFFFFF; /* White text */
  font-weight: bold; /* Bolder for emphasis */
  text-transform: uppercase; /* Optional: for a more classic dot-matrix feel */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px; /* Adjusted for potentially wider text */
  flex-shrink: 1;
  /* Optional: Add a subtle text shadow for a bit of glow if desired */
  /* text-shadow: 0 0 2px #FFFFFF, 0 0 5px #FFFFFF; */
}
.recipe-btn {
  background: rgba(24,24,24,0.90);
  color: #fff;
  font-weight: 600;
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 0.38em 1.1em;
  font-size: 1.02em;
  min-height: 40px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: background 0.2s, box-shadow 0.2s;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-clip: padding-box;
}

/* Neutral, elegant group color shades */
.btn-hiphop { background: #232f47 !important; }
.btn-latin { background: #473723 !important; }
.btn-pop { background: #44233b !important; }
.btn-rock { background: #34343a !important; }
.btn-electronic { background: #233a39 !important; }
.btn-jazz { background: #353a23 !important; }
.btn-other { background: #232323 !important; }


/* Flat, modern group colors */
.btn-hiphop { background: #223a5e !important; }
.btn-latin { background: #b86b00 !important; }
.btn-pop { background: #d72660 !important; }
.btn-rock { background: #63666a !important; }
.btn-electronic { background: #20898a !important; }
.btn-jazz { background: #7a8450 !important; }
.btn-other { background: #232323 !important; }

.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  justify-items: center;
  align-self: center;
  row-gap: 0.7em;
  -moz-column-gap: 0.25em;
       column-gap: 0.25em;
  width: 100%;
}



/* Per-group color shades */
.btn-hiphop { background: linear-gradient(90deg, #233a5e 0%, #324e7b 100%) !important; }
.btn-latin { background: linear-gradient(90deg, #4e2d0e 0%, #a45b15 100%) !important; }
.btn-pop { background: linear-gradient(90deg, #4e265e 0%, #7b3283 100%) !important; }
.btn-rock { background: linear-gradient(90deg, #3e2c1b 0%, #7b5e32 100%) !important; }
.btn-electronic { background: linear-gradient(90deg, #17424d 0%, #2f7b7b 100%) !important; }
.btn-jazz { background: linear-gradient(90deg, #2a2e3e 0%, #4e537b 100%) !important; }
.btn-other { background: linear-gradient(90deg, #2c2c2c 0%, #444 100%) !important; }


.recipe-btn:hover:not(:disabled) {
  background: rgba(40,40,40,0.92);
  border-color: rgba(255,255,255,0.4);
}

.recipe-btn-label {
  white-space: pre-line;
  text-align: center;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.recipe-btn-icon {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.recipe-card {
  background: var(--spotify-light-gray);
  border-radius: 4px;
  padding: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Dynamic card sizing based on category size */
.size-small .recipe-card {
  height: 65px;
}

.size-medium .recipe-card {
  height: 70px;
}

.size-large .recipe-card {
  height: 75px;
}

.recipe-image {
  width: 100%;
  height: 45px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 3px;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.recipe-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}

.recipe-card:hover .recipe-image img {
  transform: scale(1.05);
}

.recipe-play-button {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: var(--soundcraft-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  color: white;
}

.recipe-card:hover .recipe-play-button {
  opacity: 1;
  transform: translateY(0);
}

.recipe-name {
  font-weight: 700;
  font-size: 12px;
  color: white;
  margin-bottom: 2px;
  transition: color 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.recipe-description {
  font-size: 10px;
  color: var(--spotify-text-subdued);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 24px;
}

.recipe-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(29, 185, 84, 0.1));
  opacity: 0;
  transition: opacity 0.3s;
}

.recipe-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  background: linear-gradient(145deg, rgba(70, 70, 70, 0.7), rgba(50, 50, 50, 0.7));
}

.recipe-button:hover::before {
  opacity: 1;
}

.recipe-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Hip-Hop category */
.category-hiphop .recipe-button {
  border-left: 3px solid #8A2BE2;
}

/* Electronic category */
.category-electronic .recipe-button {
  border-left: 3px solid var(--soundcraft-blue);
}

/* Latin category */
.category-latin .recipe-button {
  border-left: 3px solid #FF6B6B;
}

/* Rock category */
.category-rock .recipe-button {
  border-left: 3px solid #4169E1;
}

/* Pop category */
.category-pop .recipe-button {
  border-left: 3px solid #FFD700;
}

/* Era category */
.category-era .recipe-button {
  border-left: 3px solid var(--soundcraft-teal);
}

/* World category */
.category-world .recipe-button {
  border-left: 3px solid var(--soundcraft-blue);
}

/* Roots category */
.category-roots .recipe-button {
  border-left: 3px solid #CD853F;
}

/* Jazz category */
.category-jazz .recipe-button {
  border-left: 3px solid #9370DB;
}

/* Special category */
.category-special .recipe-button {
  border-left: 3px solid #DC143C;
}
/* BEAT RECIPES — the toybox.
 *
 * ── CARTOON, NOT DARK ───────────────────────────────────────────────────────
 * Bright cream panel, saturated candy tiles, thick ink outlines and a hard
 * offset edge so every tile reads as a chunky plastic key. Pressing drives the
 * cap DOWN onto its edge (translateY + the edge shrinking to nothing), which is
 * the whole trick — the shadow is structure, not decoration.
 *
 * Each family carries its own fill AND its own ink, chosen per colour rather
 * than globally: white on the yellow would have been ~1.7:1. Every pairing here
 * clears 4.5:1 against its own tile.
 *
 * ── EVERYTHING IS SIZED AT RUNTIME ──────────────────────────────────────────
 * `--cols`, `--tile-h` and each tile's font-size are computed in the component
 * from the measured band and the CURRENT item count (see useRackFit). Nothing
 * here hardcodes a tile size, so adding recipes reflows the rack to fit instead
 * of pushing it into a scrollbar. Tiles are NOT uniform: long labels take two
 * columns, and dense grid flow backfills the gaps.
 */

.nsp-rec {
  position: fixed;
  left: calc(var(--spotify-menu-left, 10px) + var(--soundcraft-width, 90px));
  right: var(--spotify-menu-right, 0px);
  top: var(--spotify-menu-top, var(--recipes-menu-top, 470px));
  bottom: var(--spotify-menu-bottom, 0px);
  z-index: 50;

  /* Runtime-computed; the fallbacks only apply for the first paint. */
  --cols: 8;
  --tile-h: 56px;
  --gap: 10px;
  --ink: #2b1b46;
}

.nsp-rec__modal {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 18px;
  background: #fff7e8;
  border: 3px solid var(--ink);
  box-shadow: 0 8px 0 rgba(43, 27, 70, 0.28), 0 18px 34px rgba(43, 27, 70, 0.22);
  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--ink);
  overflow: hidden;
}

/* ── header ──────────────────────────────────────────────────────────────── */
.nsp-rec__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 3px solid var(--ink);
  background: #ffe08a;
}

.nsp-rec__title {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.nsp-rec__armed {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0f3d22;
  padding: 4px 9px;
  border-radius: 999px;
  background: #58d68d;
  border: 2px solid var(--ink);
}

.nsp-rec__legend {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b5a86;
}
.nsp-rec__legenditem { display: flex; align-items: center; gap: 4px; }
.nsp-rec__legenddot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--ink);
}

.nsp-rec__spacer { flex: 1 1 auto; }

.nsp-rec__body {
  flex: 1;
  min-height: 0;
  padding: var(--gap);
  /* The fit engine keeps content inside the band; this only catches a window
     so short that even the minimum tile will not fit. */
  overflow-y: auto;
  /* Reserve the scrollbar track. Without this, a layout that lands within a
     scrollbar's width of fitting can add the bar, which narrows the body, which
     re-runs the fit, which removes the bar — the rack jitters forever. */
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.nsp-rec__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: var(--tile-h);
  /* Dense so a two-column tile never leaves a hole behind it. */
  grid-auto-flow: row dense;
  gap: var(--gap);
  align-content: start;
}

.nsp-rec__cell { position: relative; }
.nsp-rec__cell--wide { grid-column: span 2; }

/* ── the tile: a chunky plastic key ──────────────────────────────────────── */
.nsp-rec__tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  /* Room for the cap to travel down onto its edge. */
  --edge: 5px;
}

.nsp-rec__face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: calc(100% - var(--edge));
  padding: 4px 8px;
  border-radius: 14px;
  border: 3px solid var(--ink);
  background: var(--fill, #ffd166);
  color: var(--tint, var(--ink));
  text-align: center;
  /* The hard offset IS the edge of the key. */
  box-shadow: 0 var(--edge) 0 var(--edge-color, rgba(43, 27, 70, 0.55));
  transform: translateY(0);
  transition: transform 0.11s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.11s ease-out;
}

/* Anticipation on hover — the key lifts a hair before it can be struck. */
.nsp-rec__tile:hover .nsp-rec__face {
  transform: translateY(-2px);
  box-shadow: 0 calc(var(--edge) + 2px) 0 var(--edge-color, rgba(43, 27, 70, 0.55));
}

/* Struck: the cap lands flush on its edge. */
.nsp-rec__tile:active .nsp-rec__face,
.nsp-rec__tile--on .nsp-rec__face {
  transform: translateY(var(--edge));
  box-shadow: 0 0 0 var(--edge-color, rgba(43, 27, 70, 0.55));
}
.nsp-rec__tile--on .nsp-rec__face {
  /* Held down: also ring it, so "armed" survives a colourblind read. */
  outline: 3px solid #fff;
  outline-offset: -6px;
}

.nsp-rec__tile:focus-visible .nsp-rec__face {
  outline: 3px dashed var(--ink);
  outline-offset: 3px;
}

.nsp-rec__name {
  /* Set per tile by the fit pass — see fitFont(). */
  font-size: var(--fs, 12px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.01em;
  /* NO mid-word breaking. fitFont() measures the real text and sizes the
     label so it fits, which is the correct fix; `overflow-wrap: anywhere` was
     papering over a bad estimate and chopping words in half to do it. */
  overflow-wrap: normal;
  hyphens: none;
}

/* ── save tile ───────────────────────────────────────────────────────────── */
.nsp-rec__tile--save .nsp-rec__face {
  background: repeating-linear-gradient(45deg, #58d68d 0 9px, #49c47d 9px 18px);
}

.nsp-rec__saveform {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  height: calc(100% - 5px);
  padding: 6px;
  border-radius: 14px;
  border: 3px solid var(--ink);
  background: #58d68d;
  box-shadow: 0 5px 0 rgba(43, 27, 70, 0.55);
}

.nsp-rec__input {
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fffdf6;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}
.nsp-rec__input:focus-visible { outline: 3px dashed var(--ink); outline-offset: 1px; }

.nsp-rec__saverow { display: flex; gap: 4px; }

.nsp-rec__minibtn {
  flex: 1;
  min-height: 22px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fffdf6;
  color: var(--ink);
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(43, 27, 70, 0.5);
}
.nsp-rec__minibtn--go { background: #ffe08a; }
.nsp-rec__minibtn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(43, 27, 70, 0.5); }

.nsp-rec__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 4px 2px;
  font-size: 11px;
  font-weight: 700;
  color: #6b5a86;
}

/* ── tempo lock ──────────────────────────────────────────────────────────── */
.nsp-rec__lock {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: #fffdf6;
  cursor: pointer;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(43, 27, 70, 0.5);
}
.nsp-rec__lock input { position: absolute; opacity: 0; pointer-events: none; }
.nsp-rec__lockled {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: #fffdf6;
}
.nsp-rec__lock--on { background: #ffd166; transform: translateY(4px); box-shadow: 0 0 0 rgba(43, 27, 70, 0.5); }
.nsp-rec__lock--on .nsp-rec__lockled { background: #ff8c1a; }
.nsp-rec__lock:focus-within { outline: 3px dashed var(--ink); outline-offset: 2px; }

.nsp-rec__close {
  width: 30px;
  height: 30px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #e2593b;
  color: #fff2ee;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 0 rgba(43, 27, 70, 0.5);
}
.nsp-rec__close:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(43, 27, 70, 0.5); }

/* Tiles pop in on a short stagger — the index is set per tile. */
@keyframes nsp-rec-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.86); }
  to { opacity: 1; transform: none; }
}
.nsp-rec__cell {
  animation: nsp-rec-pop 0.26s cubic-bezier(0.34, 1.45, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}

@media (prefers-reduced-motion: reduce) {
  .nsp-rec__cell { animation: none; }
  .nsp-rec__face,
  .nsp-rec__tile:hover .nsp-rec__face { transform: none; }
}

/* MIXED-KIT MARK. A saved key whose drums come from more than one genre is a
   built kit, not a genre snapshot — the count says how many genres are in it,
   so a DJ kit is tellable from a plain save without opening the tooltip. */
.nsp-rec__mix {
  position: absolute;
  top: 4px;
  /* Left corner: the key's label is centred, so a mark on either side
     clears it. Nothing else lives up here now. */
  left: 6px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #ffd166;
  color: #3a2400;
  font-size: 9px;
  font-weight: 900;
  line-height: 11px;
  text-align: center;
}

/* ── BEATING THE GLOBAL PRESS-SHRINK ─────────────────────────────────────────
 *
 * `GenreSelector/button-feedback.css` carries an unscoped, !important rule:
 *
 *     button:active, .btn:active, … {
 *       transform: scale(0.95) !important;
 *       transition: transform 0.1s ease !important;
 *     }
 *
 * EVERY button on the page shrinks 5% the moment it is pressed. On the little
 * 24px delete circle that is fatal: the element shrinks out from under the
 * cursor between mousedown and mouseup, so the pointer ends up outside it and
 * the click never lands — the "it dances and never pushes" bug. It also fought
 * the keys' own press, stacking a scale on top of the cap-onto-its-edge travel.
 *
 * That stylesheet is imported by GenreSelector, which the design lab does not
 * render — which is exactly why this reproduced on the deployed app and never
 * locally. Both rules are !important, so SPECIFICITY decides: `.nsp-rec__tile:active`
 * is (0,2,0) and beats `button:active` at (0,1,1).
 *
 * The flash pseudo-element from the same file is cancelled too — it paints an
 * absolutely positioned overlay inside the button on press.
 */
.nsp-rec__tile:active,
.nsp-rec__minibtn:active,
.nsp-rec__close:active {
  transform: none !important;
  transition: none !important;
}
.nsp-rec__tile:active::before {
  content: none !important;
}

/* The keys keep their OWN press — the cap travelling down onto its edge — which
   is the motion the global rule was overriding. */
.nsp-rec__tile:active .nsp-rec__face {
  transform: translateY(var(--edge)) !important;
}
.nsp-rec__minibtn:active { transform: translateY(3px) !important; }
.nsp-rec__close:active { transform: translateY(4px) !important; }

/* Delete, inside the double-click editor. In-flow like Cancel/Save — the one
   kind of control in this panel a real pointer click reliably reaches. */
.nsp-rec__minibtn--del {
  background: #e2593b;
  color: #fff2ee;
}

/* The editor now holds an input AND a three-button row, so it has to survive
   the shortest key the fit engine will produce (~46px). Everything shrinks
   rather than overflowing the cell. */
.nsp-rec__saveform { gap: 4px; padding: 5px; overflow: hidden; }
.nsp-rec__saveform .nsp-rec__input { padding: 2px 5px; font-size: 10px; }
.nsp-rec__saveform .nsp-rec__minibtn { min-height: 18px; font-size: 8px; padding: 0 2px; }
/* =============================================================================
   REMIX rail overrides for the embedded Sample Suggestor.

   The remix browser reuses .srt-browser so it inherits the whole deck-embed
   port (full-bleed globe, floating chips, picture tiles) from the shared
   BrowserEmbed.css — that sheet has three other consumers, so nothing here
   edits it. What does NOT carry over is the SIZE: those rules end with a
   block tuned for "a 340px shelf" that forces two-up grids and 8px type. The
   remix rail is wider on purpose, so it takes the tiles back to three across
   and lets the labels breathe.
   ========================================================================== */

.rmx-browser.srt-browser .ss-tab :is(.ss-grid, .ss-cards, .ss-results),
.rmx-browser.srt-browser .ss-screen-records,
.rmx-browser.srt-browser .ss-artist-grid,
.rmx-browser.srt-browser .ss-artist-tracks {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px;
}

/* At three-up the cards land near 110px, which is where these read properly. */
.rmx-browser.srt-browser .ss-card-title { font-size: 9.5px; }
.rmx-browser.srt-browser .ss-card-artist { font-size: 8.5px; }
.rmx-browser.srt-browser .ss-artist-name { font-size: 9.5px; }
.rmx-browser.srt-browser .ss-card-meta { padding: 14px 6px 5px; }

.rmx-browser.srt-browser .ss-circle-grid {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}

/* The pick key had to shrink to 34px to survive Serato's card; there is room
   for the real label here. */
.rmx-browser.srt-browser .ss-card-pick {
  width: 42px;
  height: 18px;
}
.rmx-browser.srt-browser .ss-card-pick::after { content: "+ REMIX"; font-size: 7.5px; }

/* The era dropdown clears the tab strip: the remix rail is wide enough that
   the tab labels sit on ONE line, so it does not need Serato's 122px drop. */
.rmx-browser.srt-browser .ss-decade-controls { top: 42px; }
.sample-suggestor-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at top, rgba(40,10,60,0.55), rgba(0,0,0,0.85));
  backdrop-filter: blur(14px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.sample-suggestor-modal {
  width: min(1200px, 100%);
  height: min(880px, 92vh);
  background: linear-gradient(160deg, #15161d 0%, #1c1a26 55%, #221726 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset;
  display: flex; flex-direction: column;
  overflow: hidden;
  color: #f1eef9;
}

.ss-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
}
.ss-header-title { display: flex; align-items: baseline; gap: 12px; font-size: 18px; font-weight: 700; letter-spacing: 0.4px; }
.ss-header-emoji { font-size: 24px; transform: translateY(2px); }
.ss-header-sub { color: rgba(255,255,255,0.45); font-size: 12px; font-weight: 400; letter-spacing: 0.6px; text-transform: uppercase; }
.ss-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff; width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 14px;
  transition: background 0.2s;
}
.ss-close:hover { background: rgba(255,80,120,0.3); }

.ss-tabs {
  display: flex; gap: 6px; padding: 8px 24px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ss-tab-btn {
  position: relative;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  padding: 14px 18px 16px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: color 0.2s;
}
.ss-tab-btn:hover { color: #fff; }
.ss-tab-btn.active { color: #fff; }
.ss-tab-icon { font-size: 18px; }
.ss-tab-underline {
  position: absolute; bottom: -1px; left: 14px; right: 14px;
  height: 3px;
  background: linear-gradient(90deg, #ff45a3, #8b5cf6, #00c9a2);
  border-radius: 3px;
}

.ss-body {
  flex: 1; overflow-y: auto;
  padding: 22px 28px 32px;
  position: relative;
}

.ss-tab-panel { display: none; min-height: 100%; }
.ss-tab-panel.active { display: block; }
.ss-tab {
  min-height: 100%;
}

.ss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}

.ss-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: border-color 0.2s;
}
.ss-card:hover { border-color: rgba(139,92,246,0.55); }

/**
 * THE CARD'S HOVER CONTRACT — read this before adding a control to a card.
 *
 * 1. The WRAPPER owns hover and never moves. The card lifts inside it, so a
 *    button near the card's edge can't escape the cursor and start a
 *    hover/un-hover flicker loop. Animating the hovered element itself is
 *    what made the save mark unpressable.
 * 2. Decorative layers are `pointer-events: none`. The title gradient covers
 *    the bottom of the artwork, so with it clickable a button in that corner
 *    only worked on the few pixels the text didn't reach — the classic
 *    "it only works if I press the right side".
 * 3. Real controls sit above every layer. z-index 3 clears the meta.
 */
.ss-card-wrap { display: block; min-width: 0; }
/**
 * A CARD WITH CONTROLS ON IT DOES NOT MOVE ON HOVER. AT ALL.
 *
 * The lift was a 6px translate plus a 2% scale, and the save mark sits ~5px
 * off the card's bottom edge. Even with the hover region pinned to a static
 * wrapper, the BUTTON still slid ~6px during the transition — so a press
 * begun while the card was settling landed somewhere else. This bug has come
 * back three times wearing a different hat each time.
 *
 * The card still answers the pointer; it just answers without moving. Nothing
 * that can be pressed is allowed to travel.
 */
.ss-card {
  transition: box-shadow 0.16s ease, filter 0.16s ease, border-color 0.16s ease;
}
.ss-card-wrap:hover .ss-card {
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 18px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .ss-card { transition: none; }
}
.ss-card-meta { pointer-events: none; }
/* Belt and braces with the draggable-attribute flip in SampleCard: a control
   is never itself a drag source, so a press on one cannot be reinterpreted as
   the start of a drag. */
.ss-card-play, .ss-card-save, .ss-card-pick, .ss-card-flip {
  -webkit-user-drag: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* z-index only — these are positioned by their own rules (absolute in an
   embed, in flow in the modal) and restating `position` here would move them. */
.ss-card-play, .ss-card-save, .ss-card-pick, .ss-card-flip { z-index: 3; }
.ss-card-art {
  aspect-ratio: 1;
  background: #2a2434 center/cover no-repeat;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.ss-card-art-placeholder {
  font-size: 48px; font-weight: 800; color: rgba(255,255,255,0.4);
}
.ss-card-play {
  /* Bottom-right belongs to the crate mark; the transport sits beside it. */
  position: absolute; right: 54px; bottom: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.2s;
}
.ss-card:hover .ss-card-play, .ss-card-play.playing { opacity: 1; }

/* THE CRATE MARK.
   Hidden until hover like the transport — but once the record is IN the
   crate it stays lit at all times, because that is a fact about the card
   and not a hover affordance. */
.ss-card-save {
  position: absolute; right: 10px; bottom: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.2s, color 0.2s, border-color 0.2s;
}
.ss-card:hover .ss-card-save { opacity: 1; }
.ss-save-mark {
  width: 17px; height: 17px;
  display: block;
  /* The card lifts on hover; a control that is being aimed at must not also
     be moving under the pointer, so nothing here transitions on hover. */
  pointer-events: none;
}
.ss-save-dots { line-height: 1; }
.ss-card-save.is-saving { opacity: 1; color: rgba(255,255,255,0.6); }
.ss-card-save.is-pending { opacity: 1; color: #ffc93f; border-color: rgba(255,201,63,0.5); }
.ss-card-save.is-saved { opacity: 1; color: #4ade80; border-color: rgba(74,222,128,0.55); }
.ss-card-save.is-error { opacity: 1; color: #ff6b6b; border-color: rgba(255,107,107,0.5); }

/* In the crate the same corner is the way OUT — remove, armed by a first
   click so a crate can't be thinned by accident. */
.ss-card-save.is-crate { font-size: 18px; }
.ss-card-save.is-crate.is-armed {
  opacity: 1; width: auto; padding: 0 9px; border-radius: 11px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  color: #ff6b6b; border-color: rgba(255,107,107,0.65);
}
/* A record still coming down the wire is in the crate but cannot play — say
   so on the card rather than letting a click do nothing. */
.ss-card-crate.is-pending { opacity: 0.75; }
.ss-card-crate.is-pending .ss-card-pick { opacity: 0.4; cursor: default; }
/* The pending banner runs the full width of the artwork and the remove key
   sits in its bottom-right corner — they were landing on top of each other.
   While a record is still coming down there is nothing to remove yet, so the
   key stands down and the banner gets the whole edge. */
.ss-card-crate.is-pending .ss-card-save.is-crate { display: none; }
.ss-card-pendingflag {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,0.72);
  color: #ffc93f;
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  text-align: center;
}
/* FLIP sits under Use Sample: the same width, quieter, and it turns amber
   when it is armed and one more click spends credits. */
.ss-card-flip {
  margin: 0 10px 10px;
  padding: 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.55);
  border-radius: 8px;
  font-weight: 700; font-size: 10px; letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ss-card-flip:hover:not(:disabled) { color: #fff; border-color: rgba(255,255,255,0.4); }
.ss-card-flip.is-armed {
  color: #0b0b0f; background: #ffc93f; border-color: #ffc93f;
}
.ss-card-flip:disabled { opacity: 0.35; cursor: default; }
.ss-crate-note {
  padding: 6px 10px;
  color: #ffc93f;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
}
/* The line between what the ACCOUNT holds and what this BOX happens to have.
   Quiet, because the shelf above it is the real crate. */
.ss-crate-divider {
  margin: 14px 10px 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.38);
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
}
.ss-disk-list { display: flex; flex-direction: column; gap: 2px; padding: 0 10px 12px; }
.ss-disk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px; align-items: center;
  padding: 5px 7px;
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255,255,255,0.62);
  font-size: 10px; text-align: left; cursor: pointer;
}
.ss-disk-row:hover:not(:disabled) { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); color: #fff; }
.ss-disk-row:disabled { opacity: 0.5; cursor: default; }
.ss-disk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-disk-meta { color: rgba(255,255,255,0.32); font-size: 9px; white-space: nowrap; }
.ss-disk-add { color: #ffc93f; font-weight: 800; font-size: 9px; letter-spacing: 0.06em; white-space: nowrap; }
.ss-disk-more {
  margin-top: 3px;
  padding: 6px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 6px;
  color: rgba(255,255,255,0.45);
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  cursor: pointer;
}
.ss-disk-more:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.ss-crate-count {
  margin-left: auto;
  align-self: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
}
.ss-card-meta { padding: 10px 12px 4px; }
.ss-card-artist { font-size: 12px; color: rgba(255,255,255,0.55); margin-bottom: 2px; }
.ss-card-title { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-card-sub { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 4px; }
.ss-card-pick {
  margin: 8px 10px 10px;
  padding: 8px;
  background: linear-gradient(90deg, #ff45a3, #8b5cf6);
  border: none; color: #fff;
  border-radius: 8px;
  font-weight: 600; font-size: 12px;
  cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.5px;
  transition: transform 0.15s;
}
.ss-card-pick:hover { transform: translateY(-1px); }

.ss-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ss-chiprow-sticky {
  position: sticky;
  top: -22px;
  z-index: 5;
  padding: 12px 0 14px;
  margin-top: -12px;
  background: linear-gradient(180deg, rgba(21,22,29,0.98) 0%, rgba(21,22,29,0.94) 72%, rgba(21,22,29,0) 100%);
  backdrop-filter: blur(12px);
}
.ss-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
}
.ss-chip:hover { color: #fff; border-color: rgba(139,92,246,0.4); }
.ss-chip.active {
  background: linear-gradient(90deg, rgba(255,69,163,0.25), rgba(139,92,246,0.25));
  color: #fff;
  border-color: rgba(255,69,163,0.6);
}
.ss-chip-emoji-icon { margin-right: 6px; }

.ss-err { color: #ff7a8c; font-size: 13px; padding: 12px 0; }
.ss-loading { color: rgba(255,255,255,0.5); font-size: 13px; padding: 12px 0; font-style: italic; }
.ss-loading-center {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.76);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ss-section-label {
  margin: 14px 0 10px;
  color: rgba(255,255,255,0.58);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ss-search-track-grid { margin-bottom: 18px; }

.ss-playlist-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin: -4px 0 18px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  background: rgba(0,0,0,0.2);
  color: #fff;
  text-decoration: none;
}
.ss-playlist-banner:hover {
  border-color: rgba(0,201,162,0.42);
  background: rgba(0,201,162,0.08);
}
.ss-playlist-art {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #2a2434 center/cover no-repeat;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}
.ss-playlist-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ss-playlist-kicker {
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ss-playlist-name {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

/* Globe tab */
.ss-tab-globe {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  isolation: isolate;
}
.ss-tab-globe.has-country-theme::before {
  content: "";
  position: absolute;
  inset: -22px -28px -32px;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,13,18,0.18), rgba(12,13,18,0.72)),
    radial-gradient(circle at 50% 15%, rgba(0,201,162,0.2), transparent 44%),
    var(--ss-country-bg);
  background-position: center;
  background-size: cover;
  filter: saturate(1.1);
  opacity: 0.58;
}
.ss-decade-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.ss-decade-btn {
  min-width: 62px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.ss-decade-btn:hover {
  border-color: rgba(0,201,162,0.45);
  color: #fff;
}
.ss-decade-btn.active {
  background: linear-gradient(135deg, rgba(0,201,162,0.28), rgba(255,69,163,0.18));
  border-color: rgba(0,201,162,0.65);
  color: #fff;
  box-shadow: 0 0 18px rgba(0,201,162,0.18);
}
.ss-globe-wrap { position: relative; width: 100%; display: flex; justify-content: center; }
.ss-globe-iframe {
  width: 540px; height: 540px; max-width: 100%;
  border: none; border-radius: 16px;
  background: #e4e5e6;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.ss-globe-readout {
  position: absolute; left: 20px; top: 20px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 200px;
}
.ss-globe-readout-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.5); }
.ss-globe-readout-name { font-size: 18px; font-weight: 700; margin-top: 2px; color: #fff; }

.ss-globe-loading {
  position: absolute;
  inset: 0;
  min-height: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0,0,0,0.45), rgba(0,0,0,0.08) 58%, transparent);
}
/* The dig key. Solid fill with near-black text, because this button sits over
   the globe's WHITE map — the old translucent teal pill with white text was
   invisible there. Opaque, high contrast, and legible at embed size. */
.ss-globe-dig {
  min-width: min(280px, 100%);
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #ffc93f;
  color: #17140a;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.ss-globe-dig:hover:not(:disabled) { background: #ffd968; }
.ss-globe-dig:active:not(:disabled) { background: #f0b92c; }
/* Even the waiting state stays dark-on-light — white text on this button is
   what made it disappear into the map in the first place. */
.ss-globe-dig:disabled {
  cursor: not-allowed;
  background: rgba(226, 226, 232, 0.92);
  color: rgba(23, 20, 10, 0.6);
  box-shadow: none;
}
.ss-globe-dig.is-busy { background: #ffd968; }
.ss-globe-result { width: 240px; margin-top: 8px; }

.ss-more-card {
  min-height: 150px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.8);
  border-radius: 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ss-more-card:hover:not(:disabled) {
  border-color: rgba(0,201,162,0.6);
  color: #fff;
  background: rgba(0,201,162,0.08);
}
.ss-more-card:disabled { opacity: 0.55; cursor: wait; }

/* Artists */
.ss-tab-artists {
  position: relative;
  isolation: isolate;
}
.ss-tab-artists.has-artist-theme::before {
  content: "";
  position: absolute;
  inset: -22px -28px -32px;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,13,18,0.2), rgba(12,13,18,0.82)),
    radial-gradient(circle at 16% 12%, rgba(255,69,163,0.18), transparent 38%),
    var(--ss-artist-bg);
  background-position: center;
  background-size: cover;
  filter: saturate(1.1);
  opacity: 0.58;
}
.ss-search {
  width: 100%;
  padding: 12px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 18px;
  outline: none;
}
.ss-search:focus { border-color: rgba(139,92,246,0.6); }
.ss-tab-artists .ss-search {
  position: sticky;
  top: -22px;
  z-index: 6;
  background: rgba(21,22,29,0.96);
  backdrop-filter: blur(12px);
}
.ss-artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.ss-artist-wrap { display: contents; }
.ss-artist-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  padding-bottom: 10px;
  transition: border-color 0.2s;
}
.ss-artist-card:hover { border-color: rgba(255,69,163,0.5); }
/* The hover contract, applied to artist tiles — the wrapper is the drag
   source and the stable hover region; the tile lifts inside it. */
.ss-artist-wrap { display: block; min-width: 0; }
.ss-artist-card { transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1); }
.ss-artist-wrap:hover .ss-artist-card { transform: translateY(-4px) scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .ss-artist-card { transition: none; }
  .ss-artist-wrap:hover .ss-artist-card { transform: none; }
}
.ss-artist-photo {
  aspect-ratio: 1;
  background: #2a2434 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.ss-artist-photo-fallback {
  color: rgba(255,255,255,0.38);
  font-size: 46px;
  font-weight: 900;
}
.ss-artist-name { padding: 10px 12px 2px; font-weight: 600; color: #fff; font-size: 14px; }
.ss-artist-genres { padding: 0 12px; font-size: 11px; color: rgba(255,255,255,0.4); text-transform: capitalize; }
.ss-artist-tracks {
  grid-column: 1 / -1;
  background: rgba(0,0,0,0.25);
  border-radius: 12px;
  padding: 16px;
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  overflow: hidden;
}

/* Artist info line + the related-artists circle. */
.ss-artist-info {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #fff;
}
.ss-artist-info b { font-size: 14px; }
.ss-artist-info span { font-size: 11px; color: rgba(255,255,255,0.55); }
.ss-artist-related { grid-column: 1 / -1; }
.ss-related-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-width: thin;
}
.ss-related-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}
.ss-related-chip:hover { border-color: rgba(139,92,246,0.6); }
.ss-related-chip i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2a2434 center/cover no-repeat;
  display: inline-block;
}

/* Era dropdown (replaces the decade button row). */
.ss-decade-controls { display: flex; align-items: center; gap: 8px; }
.ss-decade-label { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; opacity: 0.7; }
.ss-decade-select {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(18, 18, 22, 0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* A failed pull announces itself on the map (base look for the full modal;
   the deck embeds restyle it in BrowserEmbed.css). */
.ss-globe-err {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 10px auto;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #17181c;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
}
.ss-globe-err b { font-size: 13px; }
.ss-globe-err span { font-size: 11px; opacity: 0.7; }
.ss-globe-err button {
  margin-top: 4px;
  padding: 5px 14px;
  border: 0;
  border-radius: 7px;
  background: #17181c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* ==================== ARTISTS: browse dials + the journey ================= */
.ss-tab-artists { position: relative; }
.ss-filter-rows { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.ss-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ss-filter-row > b {
  flex: 0 0 44px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
}
.ss-filter-chip {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}
.ss-filter-chip:hover { border-color: rgba(255, 255, 255, 0.35); }
.ss-filter-chip.is-on { background: #ffc93f; border-color: #ffc93f; color: #17140a; }

.ss-wall-loading { text-align: center; padding: 18px 0; letter-spacing: 0.1em; }
.ss-wall-loading b { font-size: 12px; font-weight: 900; }

/* The artist screen: artwork is the room, the interface floats in it. */
.ss-artist-screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 8, 14, 0.82) 0%, rgba(10, 8, 14, 0.55) 34%, rgba(10, 8, 14, 0.92) 78%),
    var(--ss-screen-bg, linear-gradient(160deg, #241d31, #120e1a)) center/cover no-repeat;
}
.ss-screen-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-width: 0;
}
.ss-screen-back {
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.ss-screen-back:hover { background: rgba(0, 0, 0, 0.8); }
.ss-screen-trail {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ss-screen-trail::-webkit-scrollbar { display: none; }
.ss-trail-stop {
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  padding: 4px 9px;
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  white-space: nowrap;
}
.ss-trail-stop.is-here { background: #ffc93f; color: #17140a; }
.ss-screen-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 14px; }
.ss-screen-hero { cursor: grab; padding: 6px 0 2px; }
.ss-screen-hero h2 {
  margin: 0;
  font-size: clamp(22px, 4.4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
}
.ss-screen-meta { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.75); }
.ss-screen-records { margin-top: 4px; }

/* The circle: faces first, names under — built to be clicked through. */
.ss-circle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
  padding-bottom: 8px;
}
.ss-circle-card {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: center;
  color: inherit;
}
.ss-circle-card i {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2a2434 center/cover no-repeat;
  border: 2px solid rgba(255, 255, 255, 0.18);
  transition: border-color 120ms ease, transform 120ms ease;
}
.ss-circle-card:hover i { border-color: #ffc93f; transform: scale(1.04); }
.ss-circle-card span {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The story — a readable measure floating on the artwork, never a wall. */
.ss-screen-bio { max-width: 62ch; padding: 6px 0 2px; }
.ss-screen-bio p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  /* Long lives get long pages; the screen shows the opening chapter. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ss-screen-bio a {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffc93f;
  text-decoration: none;
}
.ss-screen-bio a:hover { text-decoration: underline; }
.ss-screen-bio.is-loading {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}

/* The album shelf: covers you flick through, sized to be scanned not read. */
.ss-album-shelf {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.ss-album-card {
  flex: 0 0 96px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.ss-album-card i {
  display: block;
  aspect-ratio: 1;
  border-radius: 4px;
  background: #2a2434 center/cover no-repeat;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  border: 2px solid transparent;
  transition: border-color 120ms ease, transform 120ms ease;
}
.ss-album-card:hover i { transform: translateY(-2px); border-color: rgba(255, 201, 63, 0.7); }
.ss-album-card.is-open i { border-color: #ffc93f; }
.ss-album-card b {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-album-card span { display: block; font-size: 8px; color: rgba(255, 255, 255, 0.6); }
.ss-album-close {
  margin-left: 8px;
  border: 0;
  background: transparent;
  color: #ffc93f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-transform: none;
}
.sampler-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sampler-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(90deg, #ff45a3, #8b5cf6, #00c9a2);
  background-size: 200% 100%;
  border: none;
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35);
  transition: background-position 0.6s ease, transform 0.15s ease, box-shadow 0.2s;
}
.sampler-search-btn:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 69, 163, 0.45);
}
.sampler-search-icon { font-size: 15px; }
.sampler-search-label { letter-spacing: 0.6px; }

:root {
  --sampler-menu-top: 470px; /* Match Recipes menu */
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #d2b48c;
  --scrollbar-thumb-hover: #c19a65;
  --scrollbar-width: 8px;
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari, etc.) */
.sampler-menu-container::-webkit-scrollbar,
.sampler-pads::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

.sampler-menu-container::-webkit-scrollbar-track,
.sampler-pads::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

.sampler-menu-container::-webkit-scrollbar-thumb,
.sampler-pads::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.sampler-menu-container::-webkit-scrollbar-thumb:hover,
.sampler-pads::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Custom scrollbar for Firefox */
.sampler-menu-container,
.sampler-pads {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.sampler-menu-container *,
.sampler-pads * {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.sampler-menu-container {
  position: fixed;
  left: 120px;
  top: var(--sampler-menu-top);
  bottom: 0;
  width: calc(100% - 120px);
  background-color: #111111;
  color: #fff;
  padding: 0 0 12px 0; /* Remove top/side padding so LCD is flush */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  z-index: 200;
  border-top: 2px solid #d2b48c;
  border-left: 2px solid #d2b48c;
  border-right: 2px solid #d2b48c;
  box-sizing: border-box;
}

.sampler-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
  background-color: #333;
  border-bottom: 1px solid #444;
}

.sampler-header h2 {
  color: #d2b48c; /* Akai MPC tan */
  margin: 0;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sampler-close-btn {
  background: none;
  border: none;
  color: #d2b48c;
  font-size: 24px;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}

.sampler-close-btn:hover {
  color: #fff;
}

.sampler-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0; /* Remove padding here, add to inner sections instead */
  overflow: hidden;
  flex: 1;
  min-height: 0;
  min-width: 0;
  margin-top: 0;
}

.sampler-main-layout {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  padding: 8px; /* Add padding back to the main layout content */
}

.pitch-fader-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  min-width: 70px;
  padding: 0 10px;
  background: #232323;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  margin-right: 10px;
}

.pitch-fader-label {
  color: #d2b48c;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.pitch-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 200px;
  position: relative;
}

.pitch-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d2b48c 0%, #a67c52 100%);
  border: 2px solid #888;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  color: #333;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.1s ease;
  outline: none;
}

.pitch-btn:hover {
  background: linear-gradient(135deg, #e6c9a8 0%, #ba8c5d 100%);
  transform: scale(1.05);
}

.pitch-btn:active {
  background: linear-gradient(135deg, #ba8c5d 0%, #8c6d45 100%);
  transform: scale(0.95);
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.pitch-fader-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #b0b0b0 70%, #e0e0e0 100%);
  border: 2px solid #555;
  box-shadow: 0 2px 8px #0008, inset 0 0 6px #fff8;
  position: relative;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pitch-fader-slider::-webkit-slider-thumb::before {
  content: '';
  display: block;
  width: 20px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #888, #888 2px, #bbb 2px, #bbb 4px);
  border-radius: 2px;
  position: absolute;
  left: 6px;
  top: 14px;
}

.pitch-fader-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #b0b0b0 70%, #e0e0e0 100%);
  border: 2px solid #555;
  box-shadow: 0 2px 8px #0008, inset 0 0 6px #fff8;
  position: relative;
  cursor: grab;
}

.pitch-fader-slider::-moz-range-thumb::before {
  content: '';
  display: block;
  width: 20px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #888, #888 2px, #bbb 2px, #bbb 4px);
  border-radius: 2px;
  position: absolute;
  left: 6px;
  top: 14px;
}

.pitch-fader-value {
  font-size: 16px;
  font-weight: bold;
  color: #d2b48c;
  text-shadow: 0 1px 2px #000;
  margin: 15px 0;
  background: rgba(0, 0, 0, 0.3);
  padding: 5px 10px;
  border-radius: 10px;
  text-align: center;
}

.time-controls {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 14px;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative; /* For positioning the close button */
}

.time-btn {
  background: linear-gradient(145deg, #444, #222 80%);
  color: #d2b48c;
  border: 2px solid #d2b48c;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 2px 8px #0004, inset 0 1px 2px #fff2;
  letter-spacing: 0.5px;
  min-width: 60px;
  min-height: 28px;
}

.time-btn:hover, .time-btn:focus {
  background: linear-gradient(145deg, #d2b48c, #b8860b 80%);
  color: #222;
  border-color: #ffd700;
  outline: none;
}

.auto-chop-btn {
  /* Matched to .toggle-btn style */
  background: linear-gradient(to bottom, #333, #222);
  color: white;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block; /* Prevent full width span */
  width: auto; /* Adjust width based on content */
  margin-bottom: 10px; /* Space from LCD below */
}

.auto-chop-btn.active, .auto-chop-btn:active {
  background: linear-gradient(to bottom, #d2b48c, #c9a06f); /* Active state like .toggle-btn.active */
  color: #333; /* Darker text for active state */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
  border-color: #b8860b; /* Keep a distinct border for active */
}

.auto-chop-btn:focus {
  outline: 1px solid #d2b48c;
  outline-offset: 1px;
}

.lcd-menu-item {
  cursor: pointer;
  transition: background-color 0.1s, color 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.3;
  position: relative;
}

.lcd-menu-title-line {
  position: relative;
  padding-right: 50px; /* Make room for the close button */
}

/* Style for close/off buttons in title bar */
.lcd-menu-close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  z-index: 2;
  text-transform: uppercase;
}

.lcd-menu-close:hover {
  background: rgba(0, 0, 0, 0.3);
  color: #000;
}

.lcd-menu-item:hover:not(.selected) {
  background-color: rgba(0, 0, 0, 0.2);
  color: #000;
}

.lcd-menu-item.selected {
  background-color: #000 !important; /* Force override any other background */
  color: #7a9c0f;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.lcd-menu-item.selected::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border: 1px solid #7a9c0f;
  border-radius: 2px;
  pointer-events: none;
  z-index: -1;
}

.lcd-menu-item.selected::after {
  content: ' <';
  color: #7a9c0f;
  font-weight: bold;
  margin-left: 4px;
}

.sampler-left-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  gap: 10px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.button-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  justify-content: flex-start;
  margin: 8px 0 6px 0;
}

.control-btn {
  position: relative;
  background: linear-gradient(145deg, #444, #222 80%);
  color: #d2b48c;
  border: 2px solid #d2b48c;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 2px 8px #0004, inset 0 1px 2px #fff2;
  letter-spacing: 0.5px;
  min-width: 80px;
  min-height: 28px;
  white-space: nowrap;
  flex: 1;
  width: 100px; /* Fixed width for all buttons */
  max-width: 100px; /* Same max-width for consistency */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 8px; /* Reset left padding for centered text */
}

.led {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #333;
  border: 1px solid #555;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.led.active {
  background-color: #f00;
  box-shadow: 0 0 10px #f00, 0 0 20px #f00, inset 0 0 5px rgba(255, 0, 0, 0.8);
  animation: blink 1s infinite alternate;
}

@keyframes blink {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

.control-btn:hover, .control-btn:focus {
  background: linear-gradient(145deg, #d2b48c, #b8860b 80%);
  color: #222;
  border-color: #ffd700;
  outline: none;
}

.control-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}

.sampler-pad-section {
  display: flex;
  flex: 1;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 10px;
  min-width: 300px;
}

.pitch-control {
  width: 60px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.pitch-slider-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 10px;
}

.pitch-slider-outer {
  width: 30px;
  height: 200px;
  padding: 10px 0;
  position: relative;
}

.pitch-slider {
  /* Modern approach for vertical sliders */
  writing-mode: vertical-lr;
  direction: rtl;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
}

/* Track styling */
.pitch-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 100%;
  background: #2a2a2a;
  border-radius: 4px;
  border: 1px solid #444;
}

.pitch-slider::-moz-range-track {
  width: 100%;
  height: 100%;
  background: #2a2a2a;
  border-radius: 4px;
  border: 1px solid #444;
}

/* Thumb styling */
.pitch-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d2b48c;
  cursor: pointer;
  margin-top: -12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
}

.pitch-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d2b48c;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
}

.pitch-value {
  font-size: 14px;
  font-weight: bold;
  color: #d2b48c;
  margin-bottom: 5px;
  min-height: 20px;
}

/* LCD Display styling */
.sampler-lcd {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  width: 100%;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  margin-bottom: 8px;
}

.sampler-lcd .lcd-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
  background-color: #7a9c0f;
  border: none;
  box-shadow: none;
}

.sampler-lcd .lcd-line {
  color: #000;
  font-family: "Courier New", monospace;
  font-weight: bold;
  padding: 0;
  line-height: 1.2;
  min-height: 0;
  display: flex;
  align-items: center;
  background-color: transparent;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sampler-lcd .lcd-menu-title-line {
  text-align: center;
  font-weight: bold;
  color: #000;
  margin: 0;
  padding: 6px 8px;
  font-family: "Courier New", monospace;
  font-size: 20px;
  text-shadow: none;
  background-color: transparent;
  border-radius: 0;
  border-bottom: none;
}

.lcd-scrollable-options {
  background-color: transparent;
  position: relative;
  color: #000;
  font-family: "Courier New", monospace;
  border-radius: 0;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  padding: 4px 2px;
  font-weight: bold;
  max-height: 120px; /* Increased height for better scrolling */
  overflow-y: auto;
  border-radius: 3px;
  box-shadow: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 8px;
  min-height: 70px;
  align-content: start;
  font-size: 12px;
}

.lcd-off-button {
  /* This will place it in the 4th column of the 2nd row if the grid has 8 slots */
  /* If the grid auto-sizes rows, this might just appear as the last item. */
  /* For explicit positioning in a 2x4 grid (8th cell): */
  grid-column: 4 / span 1; /* Occupy the 4th column */
  grid-row: 2 / span 1;    /* Occupy the 2nd row */
  justify-self: end; /* Align to the end (right) of its grid cell */
  align-self: end; /* Align to the end (bottom) of its grid cell */
}

/* Controls styling */
.jump-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background-color: #2a2a2a;
  border-radius: 6px;
  border: 1px solid #444;
  width: 100%;
  box-sizing: border-box;
}

.sample-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  width: 100%;
}

.sample-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 5px;
}

.sample-btn, .save-btn {
  flex: 1;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 1px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sample-btn {
  background: linear-gradient(145deg, #d2b48c, #b8860b);
  color: #222;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.save-delete-group {
  display: flex;
  gap: 2px;
  flex: 1;
}

.save-btn {
  background: linear-gradient(145deg, #7a9c0f, #5a7a0f);
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.2s;
  flex: 1;
}

.delete-btn {
  background: linear-gradient(145deg, #444, #333);
  color: #fff;
  padding: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.delete-btn.active {
  background: linear-gradient(145deg, #d63031, #c0392b) !important;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.delete-btn:hover {
  background: linear-gradient(145deg, #d63031, #c0392b);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.delete-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.save-btn.active {
  background: linear-gradient(145deg, #9cbf1f, #7a9c0f);
  box-shadow: 0 0 10px rgba(122, 156, 15, 0.7);
  color: #fff;
}

.sample-btn:hover {
  background: linear-gradient(145deg, #ffd700, #d2b48c);
  transform: translateY(-1px);
}

.save-btn:hover {
  background: linear-gradient(145deg, #8ab51e, #6a9510);
  transform: translateY(-1px);
}

.sample-btn:active, .save-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ── Kit name line (ASR-10 style) ─────────────────────────── */
.kit-load-btn {
  background: linear-gradient(145deg, #2a6496, #1a4a72) !important;
}
.kit-load-btn:hover {
  background: linear-gradient(145deg, #3a74a6, #2a5a82) !important;
  transform: translateY(-1px);
}

.kit-line {
  display: flex;
  align-items: center;
  width: 100%;
  height: 22px;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  padding: 0 8px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #d2b48c;
  overflow: hidden;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.kit-line-display {
  color: #d2b48c;
  font-weight: bold;
  letter-spacing: 1px;
}

.kit-line-edit {
  color: #ffd700;
  display: flex;
  align-items: center;
}

.kit-line-name {
  color: #fff;
  letter-spacing: 1px;
  min-width: 8ch;
}

.kit-line-cursor {
  color: #ffd700;
  animation: kit-blink 0.7s step-end infinite;
  font-size: 10px;
}

@keyframes kit-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.kit-line-overwrite {
  color: #ff6b35;
  display: flex;
  align-items: center;
  gap: 2px;
}

.kit-line-yes, .kit-line-no {
  cursor: pointer;
  font-weight: bold;
  padding: 0 2px;
}
.kit-line-yes { color: #7bc67e; }
.kit-line-yes:hover { text-decoration: underline; }
.kit-line-no { color: #e07474; }
.kit-line-no:hover { text-decoration: underline; }

.kit-line-load {
  display: flex;
  align-items: center;
  color: #a8d8ea;
  width: 100%;
  justify-content: space-between;
}

.kit-nav-btn {
  cursor: pointer;
  color: #d2b48c;
  font-size: 13px;
  padding: 0 4px;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.kit-nav-btn:hover { color: #ffd700; }
/* ── end kit line ─────────────────────────────────────────── */

.jump-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 5px;
}

.jump-buttons {
  display: flex;
  gap: 4px;
}

.jump-btn {
  background: linear-gradient(145deg, #444, #222);
  color: #d2b48c;
  border: 1px solid #555;
  border-radius: 4px;
  width: 40px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.jump-btn:hover {
  background: linear-gradient(145deg, #555, #333);
  color: #fff;
  border-color: #d2b48c;
}

.jump-btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.jump-label {
  color: #d2b48c;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 15px;
  min-width: 40px;
  text-align: center;
}

.time-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px;
  background-color: #2a2a2a;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
}

.time-btn {
  background: linear-gradient(145deg, #444, #222 80%);
  color: #d2b48c;
  border: 2px solid #d2b48c;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 2px 8px #0004, inset 0 1px 2px #fff2;
  letter-spacing: 0.5px;
  min-width: 100px;
  height: 36px;
  white-space: nowrap;
}

.time-btn:hover {
  background: linear-gradient(145deg, #d2b48c, #b8860b 80%);
  color: #222;
  border-color: #ffd700;
}

.time-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px #0004, inset 0 1px 2px #fff2;
}

/* Mute Controls */
.mute-controls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  background-color: #2a2a2a;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
}

.mute-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  color: #aaa;
  flex: 1;
  min-width: 0;
  position: relative;
  height: auto;
  margin: 0 2px;
}

.mute-btn:hover .mute-btn-inner {
  background: linear-gradient(145deg, #444, #333);
  border-color: #d2b48c;
}

.mute-btn.active .mute-btn-inner {
  background: linear-gradient(145deg, #d2b48c, #b8860b);
  border-color: #ffd700;
  box-shadow: 0 0 10px rgba(210, 180, 140, 0.5);
  color: #000;
}

.mute-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.mute-btn-inner {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #3a3a3a, #2d2d2d);
  border: 1px solid #444;
  border-radius: 6px;
  transition: all 0.2s;
  margin-bottom: 2px;
  overflow: hidden;
  position: relative;
}

.mute-icon {
  transition: all 0.2s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.mute-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.mute-btn:active .mute-icon {
  transform: scale(0.9);
}

.mute-label {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: normal;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  color: #d2b48c;
  padding: 3px 0 0;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}

.mute-btn-inner {
  z-index: 1;
}

.mute-label {
  z-index: 2;
}

.time-controls-inline {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

.time-controls-inline .time-btn {
  min-width: 0;
  width: auto;
  padding: 4px 8px;
  height: 28px;
  font-size: 11px;
}

.lcd-line {
  color: #000;
  font-family: "Courier New", monospace;
  font-weight: bold;
  padding: 0;
  line-height: 1.2;
  min-height: 0;
  display: flex;
  align-items: center;
  background-color: transparent;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  justify-content: center;
}

.lcd-os-version {
  font-size: 15px;
  color: #000;
  font-weight: bold;
}

.lcd-sample-title {
  font-size: 14px;
  color: #000;
  font-weight: normal;
}

.lcd-os-version,
.lcd-sample-title,
.lcd-menu-title-line,
.lcd-scrollable-options {
  padding: 6px 8px;
}

/* Sample Input Mode */
.lcd-input-mode {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  padding: 8px 10px;
  background-color: #7a9c0f;
  color: #000;
  font-family: 'Courier New', monospace;
}

.lcd-sample-title {
  font-weight: bold;
  text-align: center;
  margin: 0 0 4px 0;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.lcd-input-line {
  padding: 4px 8px;
  margin: 4px 0 8px 0;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
  font-size: 14px;
  min-height: 20px;
}

.lcd-input-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 4px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.lcd-input-footer .lcd-menu-item {
  padding: 4px 8px;
  margin: 0;
  cursor: pointer;
  color: #d2b48c;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  transition: all 0.15s;
  position: relative;
  background: none;
  border: none;
  border-radius: 2px;
  text-align: center;
}

.lcd-input-footer .lcd-menu-item:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
}

.lcd-input-footer .lcd-menu-item:active {
  transform: translateY(1px);
  background: rgba(0, 0, 0, 0.3);
}

.lcd-footer-left {
  text-transform: capitalize;
}

.lcd-footer-right {
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes blinkPad {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes blinkDelete {
  0% { 
    opacity: 1;
    background: linear-gradient(145deg, #d63031, #c0392b);
  }
  50% { 
    opacity: 0.7;
    background: linear-gradient(145deg, #e74c3c, #c0392b);
  }
  100% { 
    opacity: 1;
    background: linear-gradient(145deg, #d63031, #c0392b);
  }
}

.lcd-cursor {
  display: inline-block;
  width: 12px;
  height: 24px;
  background-color: #000;
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

.control-group {
  display: flex;
  flex-direction: column;
  min-width: 80px;
  flex: 1;
}

.control-group label {
  font-size: 12px;
  margin-bottom: 4px;
  color: #d2b48c; /* Akai MPC tan */
  font-weight: bold;
}

.sampler-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  background: #555;
  border-radius: 8px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  outline: none;
}

.sampler-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #d2b48c; /* Akai MPC tan */
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sampler-slider::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #d2b48c; /* Akai MPC tan */
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border: none;
}

.param-value {
  font-size: 12px;
  margin-top: 4px;
  text-align: center;
}

.toggle-controls {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding: 10px;
  background-color: #2a2a2a;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.toggle-btn {
  background: linear-gradient(to bottom, #333, #222);
  color: white;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-btn.active {
  background: linear-gradient(to bottom, #d2b48c, #c9a06f);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}

/* MPC Pads styling */
.sampler-pads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: none;
  background: #1a1a1a;
  border-radius: 10px;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.55);
  border: 1px solid #333;
  margin: 0 auto;
  flex: 1;
  overflow: hidden;
  z-index: 1;
}

.mpc-pad {
  background: linear-gradient(145deg, #444, #333);
  border: 1px solid #555;
  border-radius: 4px;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 3px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.1s ease;
  padding: 0;
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  min-height: 60px; /* Ensure minimum size for touch targets */
  aspect-ratio: 1/1; /* Keep pads square */
}

.mpc-pad::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%);
  border-radius: 3px;
}

.mpc-pad:hover {
  background: linear-gradient(145deg, #555, #444);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.6);
}

.mpc-pad.active {
  background: linear-gradient(145deg, #d2b48c, #c9a06f);
  transform: scale(0.98);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.mpc-pad:active {
  transform: scale(0.96);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Save mode styles */
.save-mode .mpc-pad:not(.empty) {
  opacity: 0.5;
  pointer-events: none;
}

.save-mode .mpc-pad.empty {
  animation: blinkPad 1s infinite;
}

.sampler-pads.delete-mode .mpc-pad.deletable {
  animation: blinkDelete 1s infinite;
  cursor: pointer;
}

@keyframes blink {
  from { opacity: 0.5; }
  to { opacity: 1; }
}



/* Responsive adjustments */
@media (max-width: 768px) {
  .sampler-menu-container {
    left: 0;
    width: 100%;
    height: 60vh;
  }
  
  .sampler-pads {
    gap: 8px;
    padding: 8px;
  }
  
  .control-group {
    min-width: 80px;
  }
}
/* =============================================================================
   Shared browser-embed rules: the GLOBE runs full bleed.

   The user's ask, verbatim honored: the globe (its white background) IS the
   whole area; the tab chips float over it with no grey slab behind them; the
   country readout loses its box and sits where there is room. Applies to
   every deck embed (.npc-browser, .srt-browser).
   ========================================================================== */
.npc-browser .ss-globe-wrap,
.srt-browser .ss-globe-wrap {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
  background: #fff;
}
.npc-browser .ss-globe-iframe,
.srt-browser .ss-globe-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}
/* Chips ride ON the globe: no slab, readable over white. */
.npc-browser .ss-globe-wrap ~ .ss-chiprow,
.npc-browser .ss-chiprow-sticky,
.srt-browser .ss-chiprow-sticky {
  position: relative;
  z-index: 2;
  background: transparent;
  border: 0;
}
.npc-browser .ss-globe-readout,
.srt-browser .ss-globe-readout {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  text-align: right;
  color: #1c1c22;
}
.npc-browser .ss-globe-readout-label,
.srt-browser .ss-globe-readout-label { font-size: 8px; letter-spacing: 0.14em; opacity: 0.6; }
.npc-browser .ss-globe-readout-name,
.srt-browser .ss-globe-readout-name { font-size: 11px; font-weight: 700; }
/* Centred WITHOUT transform.
   button-feedback.css carries a global `button:active { transform:
   scale(.95) !important }`. Against a button centred with
   `translateX(-50%)` that !important wins and replaces the centring, so
   the key jumped half its own width to the right the instant you pressed
   it — and if you had clicked near its left edge it slid out from under
   the cursor before the click landed, which is why it only ever seemed
   to work on the right-hand side. Auto margins centre it instead, so the
   active scale has nothing to clobber. */
.npc-browser .ss-globe-dig,
.srt-browser .ss-globe-dig,
.nsr-browser .ss-globe-dig {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: -moz-fit-content;
  width: fit-content;
  transform: none;
  z-index: 3;
  min-width: 0;
  min-height: 30px;
  padding: 0 14px;
  font-size: 11px;
}
.npc-browser .ss-globe-loading,
.srt-browser .ss-globe-loading { z-index: 2; }

/* The globe can only fill the area if every ancestor between it and the
   modal body actually stretches — by default the tab panel content-sizes. */
.npc-browser .ss-body,
.srt-browser .ss-body { display: flex; flex-direction: column; min-height: 0; }
.npc-browser .ss-tab-panel.active,
.srt-browser .ss-tab-panel.active { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.npc-browser .ss-tab-panel:not(.active),
.srt-browser .ss-tab-panel:not(.active) { display: none !important; }
.npc-browser .ss-tab,
.srt-browser .ss-tab { flex: 1; min-height: 0; }
.npc-browser .ss-tab-globe,
.srt-browser .ss-tab-globe { position: relative; }

/* Full bleed, literally: the globe anchors to the MODAL, not the tab panel,
   so the white map is the entire browser area; header and chips float over
   it (each chip keeps its own small pill, no grey slab behind the row). */
.npc-browser .sample-suggestor-modal,
.srt-browser .sample-suggestor-modal { position: relative; }
.npc-browser .ss-tab-globe,
.srt-browser .ss-tab-globe { position: static; }
.npc-browser .ss-header,
.srt-browser .ss-header,
.npc-browser .ss-chiprow,
.srt-browser .ss-chiprow,
.npc-browser .ss-chiprow-sticky,
.srt-browser .ss-chiprow-sticky {
  position: relative;
  z-index: 3;
  background: transparent;
  border: 0;
}
.npc-browser .ss-chip,
.srt-browser .ss-chip { backdrop-filter: blur(2px); }

/* The real anchor chain, measured: .ss-body is position:relative and the tab
   bar is .ss-tabs. Body goes static so the globe wrap climbs to the modal;
   header and tabs float above it. */
.npc-browser .ss-body,
.srt-browser .ss-body { position: static; }
.npc-browser .ss-tabs,
.srt-browser .ss-tabs,
.npc-browser .ss-header,
.srt-browser .ss-header {
  position: relative;
  z-index: 3;
  background: rgba(16, 17, 20, 0.62);
  backdrop-filter: blur(3px);
  border: 0;
}

/* ==================== Embed pass 3: readable, tiled, tight ================= */

/* Era dropdown floats on the globe; readout text is DARK on the white map. */
.npc-browser .ss-decade-controls,
.srt-browser .ss-decade-controls {
  position: relative;
  z-index: 3;
  padding: 4px 8px;
  background: transparent;
}
.npc-browser .ss-decade-label,
.srt-browser .ss-decade-label { color: #1c1c22; }
.npc-browser .ss-decade-select,
.srt-browser .ss-decade-select { padding: 3px 8px; font-size: 10px; }
.npc-browser .ss-globe-readout,
.npc-browser .ss-globe-readout-label,
.npc-browser .ss-globe-readout-name,
.srt-browser .ss-globe-readout,
.srt-browser .ss-globe-readout-label,
.srt-browser .ss-globe-readout-name { color: #17181c !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7); }
.npc-browser .ss-globe-loading,
.srt-browser .ss-globe-loading { color: #17181c !important; }

/* Heavily Sampled / Genres / results: PICTURE TILES. The art IS the card;
   the words ride a gradient at its foot. Three across in the NPC rail,
   three tighter in Serato's narrower shelf. */
.npc-browser .ss-card,
.srt-browser .ss-card {
  position: relative;
  display: block;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #17181c;
  aspect-ratio: 1 / 1;
}
.npc-browser .ss-card-art,
.srt-browser .ss-card-art,
.npc-browser .ss-card-art-placeholder,
.srt-browser .ss-card-art-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.npc-browser .ss-card-meta,
.srt-browser .ss-card-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 6px 5px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}
.npc-browser .ss-card-title,
.srt-browser .ss-card-title {
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.npc-browser .ss-card-artist,
.srt-browser .ss-card-artist {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.npc-browser .ss-card-sub,
.srt-browser .ss-card-sub { display: none; }
.npc-browser .ss-card-play,
.srt-browser .ss-card-play {
  position: absolute;
  top: 4px; left: 4px;
  z-index: 2;
}
.npc-browser .ss-card-pick,
.srt-browser .ss-card-pick {
  position: absolute;
  top: 4px; right: 4px;
  z-index: 2;
  padding: 3px 7px;
  font-size: 9px;
}
/* The crate mark keeps the bottom-right corner in a deck too — the only
   corner the transport and USE key do not already own. */
.npc-browser .ss-card-save,
.srt-browser .ss-card-save {
  right: 4px; bottom: 4px;
  width: 22px; height: 22px;
  font-size: 11px;
  z-index: 2;
}
.npc-browser .ss-save-mark,
.srt-browser .ss-save-mark { width: 13px; height: 13px; }
/* Embeds hide `.ss-card-sub` because a browse card's third line is year and
   country, which is decoration at this size. On a CRATE card that line is the
   BPM and the key — the only two things you actually pick a record by — so it
   comes back, quieter. */
.npc-browser .ss-card-crate .ss-card-sub,
.srt-browser .ss-card-crate .ss-card-sub {
  display: block;
  font-size: 7.5px;
  color: rgba(255, 201, 63, 0.75);
  letter-spacing: 0.04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.npc-browser .ss-disk-row,
.srt-browser .ss-disk-row { padding: 4px 5px; font-size: 8.5px; gap: 5px; }
.npc-browser .ss-disk-meta,
.srt-browser .ss-disk-meta { display: none; }
.npc-browser .ss-disk-list,
.srt-browser .ss-disk-list { padding: 0 4px 8px; }
.npc-browser .ss-crate-divider,
.srt-browser .ss-crate-divider { margin: 10px 4px 5px; font-size: 7.5px; }
/* ---------------------------------------------------------------------------
   THE FILTER ROW, IN A DECK — every tab, not just one.

   The shared row is built for the big modal: 38px chips inside 12/14px padding,
   hung on `margin-top: -12px` and `position: sticky; top: -22px`. Two things
   went wrong once an embed got hold of it.

   1. The embed override set `position: relative` but left `top: -22px` alone,
      and on a relative box that is a plain offset — so together with the
      negative margin the row sat 34px ABOVE the panel and the chips were
      sliced in half by its top edge. Measured on Genres and on the library.
   2. Relative also means it SCROLLS AWAY. The filters are how you steer the
      tab; losing them two rows down is the worst moment to lose them.

   So: genuinely sticky at the panel's top, and sized for a rail so it steers
   without eating the shelf. ~29px instead of 64px.
   --------------------------------------------------------------------------- */
.npc-browser .ss-tab .ss-chiprow-sticky,
.srt-browser .ss-tab .ss-chiprow-sticky,
.npc-browser .ss-tab .ss-chiprow,
.srt-browser .ss-tab .ss-chiprow {
  position: sticky;
  top: 0;
  z-index: 6;
  margin-top: 0;
  /* Extra room on the right: a trailing count is pushed to that edge and the
     panel's scrollbar sits over it otherwise. */
  padding: 5px 12px 6px 4px;
  /* Sticky over scrolling cards needs its own ground, or the cards read
     through it. */
  background: linear-gradient(180deg, rgba(18, 18, 22, 0.97) 0%, rgba(18, 18, 22, 0.92) 70%, rgba(18, 18, 22, 0) 100%);
  backdrop-filter: blur(8px);
}
/* A rail you cannot see the end of has to SAY there is more, or it reads as a
   truncated list. The right edge fades out; grabbing it pans (see
   useHorizontalRails.ts — a vertical wheel over a horizontal rail would
   otherwise scroll the page and the rail would look frozen). */
.npc-browser .ss-tab .ss-chiprow,
.srt-browser .ss-tab .ss-chiprow,
.npc-browser .ss-tab .ss-chiprow-sticky,
.srt-browser .ss-tab .ss-chiprow-sticky,
.npc-browser .ss-filter-row,
.srt-browser .ss-filter-row {
  cursor: grab;
  /* Fade the last 18px so the row visibly continues past its edge. */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent 100%);
}
.npc-browser .ss-tab .ss-chiprow.is-panning,
.srt-browser .ss-tab .ss-chiprow.is-panning,
.npc-browser .ss-tab .ss-chiprow-sticky.is-panning,
.srt-browser .ss-tab .ss-chiprow-sticky.is-panning,
.npc-browser .ss-filter-row.is-panning,
.srt-browser .ss-filter-row.is-panning { cursor: grabbing; }

/* ONE LINE, ALWAYS. Left to wrap, the genre chips grew to 101px in SMPLR's
   250px sidebar — a third of the shelf spent on filters. A single scrolling
   rail is bounded whatever the rail's width and however many chips arrive. */
.npc-browser .ss-tab .ss-chiprow,
.srt-browser .ss-tab .ss-chiprow,
.npc-browser .ss-tab .ss-chiprow-sticky,
.srt-browser .ss-tab .ss-chiprow-sticky {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.npc-browser .ss-tab .ss-chiprow::-webkit-scrollbar,
.srt-browser .ss-tab .ss-chiprow::-webkit-scrollbar,
.npc-browser .ss-tab .ss-chiprow-sticky::-webkit-scrollbar,
.srt-browser .ss-tab .ss-chiprow-sticky::-webkit-scrollbar { display: none; }
.npc-browser .ss-tab .ss-chip,
.srt-browser .ss-tab .ss-chip {
  flex: 0 0 auto;
  padding: 3px 8px;
  font-size: 8px;
  min-height: 0;
  line-height: 1.3;
}
/* The globe is the one exception: its chips ride ON the map, which is its own
   surface — a slab there would cover the thing you are pointing at. */
.npc-browser .ss-tab-globe .ss-chiprow,
.srt-browser .ss-tab-globe .ss-chiprow,
.npc-browser .ss-globe-wrap ~ .ss-chiprow {
  background: transparent;
  backdrop-filter: none;
}
.npc-browser .ss-card-save.is-crate,
.srt-browser .ss-card-save.is-crate { font-size: 14px; }
.npc-browser .ss-card-save.is-crate.is-armed,
.srt-browser .ss-card-save.is-crate.is-armed { font-size: 7px; padding: 0 5px; }
.npc-browser .ss-card-pendingflag,
.srt-browser .ss-card-pendingflag { font-size: 7px; padding: 2px 4px; letter-spacing: 0.04em; }
.npc-browser .ss-crate-count,
.srt-browser .ss-crate-count { font-size: 8px; }
/* An embed card is a PICTURE TILE: the art is absolute and fills it, so a
   button left in normal flow falls into the top-left corner — which is where
   the transport already lives. FLIP was landing on top of the play key.
   It stacks under USE instead, so the right edge reads as one action column
   and every corner has exactly one owner:
     top-left  transport      top-right  USE / FLIP
     bottom    title gradient  bottom-right  remove */
.npc-browser .ss-card-flip,
.srt-browser .ss-card-flip {
  position: absolute;
  top: 26px; right: 4px;
  z-index: 2;
  margin: 0;
  padding: 2px 6px;
  font-size: 8px; letter-spacing: 0.04em;
  border-radius: 5px;
  /* Dark-on-dark over album art is unreadable — it needs its own edge, not
     just a scrim. Quieter than USE, but present. */
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
}
.srt-browser .ss-card-flip { top: 23px; font-size: 7.5px; padding: 2px 5px; }
/* USE IS NOT THE HEADLINE — THE RECORD IS.
   A solid amber pill reading "Use Sample" was the loudest thing on every card
   in the shelf, louder than the title it sits on, and on a 90px NP 1200 card
   it wrapped onto two lines and ran through the chip below it. Compact and
   outlined: still the obvious action, no longer the first thing you see.
   `font-size: 0` + `::after` keeps the real text node for screen readers. */
.npc-browser .ss-card-pick {
  padding: 2px 6px;
  font-size: 0;
  line-height: 1;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 201, 63, 0.7);
  color: #ffc93f;
  backdrop-filter: blur(4px);
}
.npc-browser .ss-card-pick::after {
  content: '+ USE';
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.npc-browser .ss-card-crate .ss-card-pick {
  padding: 2px 6px;
  font-size: 0;
  line-height: 1;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 201, 63, 0.7);
  color: #ffc93f;
  backdrop-filter: blur(4px);
}
.npc-browser .ss-card-crate .ss-card-pick::after {
  content: '+ USE';
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
/* A record with no artwork gets a letter, not a billboard. */
.npc-browser .ss-card-crate .ss-card-art-placeholder,
.srt-browser .ss-card-crate .ss-card-art-placeholder {
  font-size: 26px;
  color: rgba(255, 255, 255, 0.14);
}
.npc-browser .ss-crate-note,
.srt-browser .ss-crate-note { padding: 4px 6px; font-size: 8px; }
/* The tile grids themselves. */
.npc-browser .ss-body .ss-grid,
.npc-browser .ss-tab-panel.active .ss-tab > div:not([class]),
.srt-browser .ss-body .ss-grid { display: grid; }
.npc-browser .ss-tab-panel.active .ss-tab,
.srt-browser .ss-tab-panel.active .ss-tab { overflow-y: auto; scrollbar-width: thin; }
.npc-browser .ss-card { width: auto; }
/* Whatever container holds the cards becomes a 3-up tile grid. */
.npc-browser .ss-tab :is(.ss-grid, .ss-cards, .ss-results),
.srt-browser .ss-tab :is(.ss-grid, .ss-cards, .ss-results) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
}

/* Era dropdown: the globe's RIGHT edge, under the country readout, BELOW the
   floating glass header+tabs (top 42px buried it behind that strip). Serato's
   narrow shelf wraps the tab labels into a taller bar, so it needs more
   clearance.

   It used to sit at the LEFT edge, which was fine while the pulled record was
   pinned to the centre of the map. Now the record lives in the bottom-left
   corner and on a short rail the two met. Two columns, one job each: the
   RIGHT is what you are asking for (country, era), the LEFT is what came
   back. */
.npc-browser .ss-decade-controls,
.srt-browser .ss-decade-controls {
  position: absolute;
  top: 86px;
  right: 8px;
  left: auto;
  z-index: 5;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 0;
  width: auto;
}
.srt-browser .ss-decade-controls { top: 122px; }
.npc-browser .ss-decade-select,
.srt-browser .ss-decade-select {
  background: #fff;
  color: #17181c;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 5px;
}
/* THE PULLED RECORD SITS IN THE BOTTOM-LEFT CORNER, NOT ON THE MAP.
   It used to be pinned to the centre, which put the artwork straight over the
   globe — the thing you dig with — so you could not pick a second country
   without dismissing the first record.

   No `transform` here on purpose, twice over: framer-motion writes its own
   inline transform for the card's entrance and would win against a centring
   one anyway, and corner anchoring needs no transform to be honest. Parked
   above the dig key (bottom 8px + 30px tall) and clear of the era dropdown
   at the top, so it never collides with either. */
.npc-browser .ss-globe-result,
.srt-browser .ss-globe-result {
  position: absolute;
  left: 6px;
  right: auto;
  top: auto;
  bottom: 46px;
  transform: none;
  z-index: 4;
  width: 118px;
  margin: 0;
}
.npc-browser .ss-globe-pull-btn,
.srt-browser .ss-globe-pull-btn { z-index: 5; }
.ss-globe-pull-btn.is-busy { animation: ss-pull-pulse 1.1s ease-in-out infinite; }
@keyframes ss-pull-pulse {
  50% { opacity: 0.55; }
}

/* A failed pull says so ON the map, in ink, with a retry — not a hidden div
   behind the full-bleed globe. */
.ss-globe-err {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  color: #17181c;
  text-align: center;
}
.ss-globe-err b { font-size: 12px; }
.ss-globe-err span { font-size: 10px; opacity: 0.7; }
.ss-globe-err button {
  margin-top: 4px;
  padding: 4px 12px;
  border: 0;
  border-radius: 6px;
  background: #17181c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

/* ARTISTS: same picture-tile grammar as Heavily Sampled and Genres — the
   photo IS the card, the name rides a gradient at its foot. */
.npc-browser .ss-artist-grid,
.srt-browser .ss-artist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
}
.npc-browser .ss-artist-card,
.srt-browser .ss-artist-card {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #17181c;
}
.npc-browser .ss-artist-photo,
.srt-browser .ss-artist-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.npc-browser .ss-artist-name,
.srt-browser .ss-artist-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 6px 5px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  font-size: 9px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.npc-browser .ss-artist-genres,
.srt-browser .ss-artist-genres { display: none; }
.npc-browser .ss-artist-tracks,
.srt-browser .ss-artist-tracks {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
}

/* The artist search was sticky at -22px — it slid up under the glass tab
   strip. Pin it at the panel top instead, fully visible. */
.npc-browser .ss-tab-artists .ss-search,
.srt-browser .ss-tab-artists .ss-search {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 6px 6px 8px;
  width: calc(100% - 12px);
  padding: 7px 10px;
  font-size: 11px;
  border-radius: 8px;
}

/* Related-artist chips shrink to fit the deck rails. */
.npc-browser .ss-related-chip,
.srt-browser .ss-related-chip { font-size: 9px; padding: 3px 8px 3px 3px; }
.npc-browser .ss-related-chip i,
.srt-browser .ss-related-chip i { width: 18px; height: 18px; }
.npc-browser .ss-artist-info b,
.srt-browser .ss-artist-info b { font-size: 11px; }
.npc-browser .ss-artist-info span,
.srt-browser .ss-artist-info span { font-size: 9px; }

/* ============ Embed pass 4: give the globe back its top edge ==============
   Inside a deck the browser is a narrow rail, and the modal chrome was eating
   the map: a "Sample Suggestor" wordmark and tagline, then a full-height tab
   row, both on tinted slabs with their own borders. The wordmark is redundant
   here — the deck already says where you are — so it goes, the tabs shrink to
   captions, and the bars lose their padding and rules. Everything the globe
   does not need becomes globe. */
.npc-browser .ss-header-title,
.srt-browser .ss-header-title,
.npc-browser .ss-close,
.srt-browser .ss-close { display: none; }
.npc-browser .ss-header,
.srt-browser .ss-header {
  min-height: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  backdrop-filter: none;
}
.npc-browser .ss-tabs,
.srt-browser .ss-tabs {
  gap: 2px;
  padding: 3px 4px 2px;
  min-height: 0;
  /* WAS 0.55 alpha, which measures as excellent contrast and reads as washed
     out: the Globe tab puts a near-WHITE map directly behind this bar, and a
     55%-opaque slab over white leaves pale grey labels on pale grey. A
     contrast number computed from the declared colour cannot see that.
     Nearly opaque keeps the glass feel and makes the labels legible on every
     tab, whatever is behind them. */
  background: rgba(16, 17, 20, 0.92);
  backdrop-filter: blur(6px);
}
.npc-browser .ss-tab-btn,
.srt-browser .ss-tab-btn {
  padding: 3px 7px;
  min-height: 0;
  min-width: 0;
  font-size: 9px;
  letter-spacing: 0.04em;
  line-height: 1.25;
  white-space: nowrap;
}
.npc-browser .ss-tab-label,
.srt-browser .ss-tab-label { font-size: 9px; letter-spacing: 0.04em; }
/* The era control was parked at top:86px to clear the old tall header+tabs.
   That strip is roughly half the height now, so the dropdown rides up with it
   instead of floating in the middle of the map. */
.npc-browser .ss-decade-controls,
.srt-browser .ss-decade-controls { top: 46px; }

/* ============ Embed pass 5: the modal must FIT its embed ==================
   Measured bug: inside the deck the shelf clipped at y=710 while the suggestor
   modal ran to y=768 — 58px of the browser, including the whole dig key, sat
   below the clip edge and outside the viewport. That is why the dig button
   "only worked on the right side": you were catching the one sliver that
   happened to peek through. The overlay is a full-bleed panel here, not a
   centred dialog over a page, so pin both to the embed exactly. */
.npc-browser .sample-suggestor-overlay,
.srt-browser .sample-suggestor-overlay {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  overflow: hidden;
}
.npc-browser .sample-suggestor-modal,
.srt-browser .sample-suggestor-modal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  transform: none;
  overflow: hidden;
}
/* The dig key rides just inside the bottom edge, always reachable. */
.npc-browser .ss-globe-dig,
.srt-browser .ss-globe-dig,
.nsr-browser .ss-globe-dig { bottom: 6px; z-index: 25; }

/* Tab labels: the bar height is right, the type was not filling it. */
.npc-browser .ss-tabs,
.srt-browser .ss-tabs { padding: 2px 4px; gap: 3px; }
.npc-browser .ss-tab-btn,
.srt-browser .ss-tab-btn {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.npc-browser .ss-tab-label,
.srt-browser .ss-tab-label { font-size: 11px; font-weight: 800; letter-spacing: 0.01em; }

/* The dig narration sits dead centre of the map, dark on white, and does not
   intercept clicks meant for the globe underneath. */
.npc-browser .ss-digging,
.srt-browser .ss-digging,
.ss-digging {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}
.ss-digging b { font-size: 12px; font-weight: 900; letter-spacing: 0.08em; }
.ss-digging span { font-size: 10px; opacity: 0.7; }
/* Retry state on a card's transport reads as an action, not an alarm. */
.ss-card-play.is-retry { color: #ffc93f; }

/* "+ MORE" rides the tile grid like a card — same square, dashed, obvious.
   It was styled for the big modal (min-height 150px, subtle) and read as
   nothing at deck size, which is why it looked like paging just ended. */
.npc-browser .ss-more-card,
.srt-browser .ss-more-card {
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 6px;
  border: 2px dashed rgba(255, 201, 63, 0.55);
  background: rgba(255, 201, 63, 0.08);
  color: #ffc93f;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.npc-browser .ss-more-card:hover,
.srt-browser .ss-more-card:hover { background: rgba(255, 201, 63, 0.16); }

/* Artist browse dials + journey screen at deck size: tighter everything. */
/* ---------------------------------------------------------------------------
   ARTISTS FILTERS IN A RAIL.

   Measured: search box + ERA row + a SOUND row that WRAPPED to two lines used
   ~155px of a ~290px shelf, so exactly one row of artists was visible and the
   filters scrolled away the moment you looked past it. Steering controls that
   cost you the thing you are steering are worse than no filters.

   So each row becomes a single horizontally-scrolling rail — no wrapping, no
   matter how many genres come back — and the whole block sticks to the top of
   the tab. ~72px instead of ~155px, and it never leaves.
   --------------------------------------------------------------------------- */
.npc-browser .ss-tab-artists .ss-search,
.srt-browser .ss-tab-artists .ss-search,
.npc-browser .ss-filter-rows,
.srt-browser .ss-filter-rows {
  position: sticky;
  z-index: 6;
  background: rgba(18, 18, 22, 0.97);
  backdrop-filter: blur(8px);
}
.npc-browser .ss-tab-artists .ss-search,
.srt-browser .ss-tab-artists .ss-search { top: 0; }
.npc-browser .ss-filter-rows,
.srt-browser .ss-filter-rows {
  top: 30px;
  margin: 0 0 6px;
  padding: 4px 6px 5px;
  gap: 2px;
}
.npc-browser .ss-filter-row,
.srt-browser .ss-filter-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 3px;
}
.npc-browser .ss-filter-row::-webkit-scrollbar,
.srt-browser .ss-filter-row::-webkit-scrollbar { display: none; }
.npc-browser .ss-filter-row > b,
.srt-browser .ss-filter-row > b {
  flex: 0 0 auto;
  position: sticky;
  left: 0;
  /* The row label has to stay legible while its own chips scroll under it. */
  background: rgba(18, 18, 22, 0.97);
  padding-right: 3px;
  font-size: 8px;
}
.npc-browser .ss-filter-chip,
.srt-browser .ss-filter-chip { flex: 0 0 auto; padding: 2px 7px; font-size: 9px; }
.npc-browser .ss-artist-screen,
.srt-browser .ss-artist-screen { border-radius: 0; z-index: 30; }
.npc-browser .ss-screen-hero h2,
.srt-browser .ss-screen-hero h2 { font-size: 20px; }
.npc-browser .ss-screen-scroll,
.srt-browser .ss-screen-scroll { padding: 2px 8px 10px; }
.npc-browser .ss-circle-grid,
.srt-browser .ss-circle-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.npc-browser .ss-screen-records,
.srt-browser .ss-screen-records {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

/* The story at deck size: tighter clamp, same measure discipline. */
/* ---------------------------------------------------------------------------
   THE ARTIST SCREEN IN A RAIL — records first, reading second.

   Measured in a 235px panel: bio 92px + album shelf 267px pushed the RECORDS
   grid to y=494. You open an artist to find something to sample, and had to
   scroll past half a page of prose and sleeves to reach a single one.

   The bio keeps two lines (enough to know who this is), and the album shelf
   stops stretching its cards to a uniform 261px — they were four times their
   own content height, because a flex row stretches its children by default.
   --------------------------------------------------------------------------- */
.npc-browser .ss-screen-bio p,
.srt-browser .ss-screen-bio p { font-size: 10px; line-height: 1.5; -webkit-line-clamp: 2; }
.npc-browser .ss-album-shelf,
.srt-browser .ss-album-shelf { align-items: flex-start; }
/* One sleeve in the row was coming out 233px wide instead of 70 — its
   flex-basis was not holding — and since its art is square, that single card
   made the whole row 261px tall. A flex row is as tall as its tallest child,
   so one runaway sleeve costs every other one. Pin both axes: the shelf is a
   row of thumbnails and none of them gets to be a feature. */
.npc-browser .ss-album-card,
.srt-browser .ss-album-card { flex: 0 0 70px; width: 70px; }
.npc-browser .ss-album-card i,
.srt-browser .ss-album-card i { width: 70px; height: 70px; }

/* ============ Serato side: sized for a 340px shelf ========================
   Serato's browser rail is narrower than NPC's, so a 3-up grid lands ~105px
   cards. At that size the shared controls were built for the full modal: the
   pick button ran 64px (61% of the card, colliding with the play key) and the
   play key was a 36px disc. Both shrink to fit the card they actually sit on.

   The label is replaced, not deleted — the button keeps its "Use Sample" text
   node for screen readers and shows a compact mark. */
.srt-browser .ss-card-pick {
  top: 3px;
  right: 3px;
  padding: 0;
  width: 34px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  font-size: 0;
  letter-spacing: 0;
}
.srt-browser .ss-card-pick::after {
  content: "+ USE";
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.srt-browser .ss-card-play {
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  font-size: 9px;
  /* Always legible on the art, not only on hover — at this size the card is
     mostly artwork and the transport is the only affordance. */
  opacity: 1;
  background: rgba(0, 0, 0, 0.62);
}
.srt-browser .ss-card-meta { padding: 12px 5px 4px; }
.srt-browser .ss-card-title { font-size: 8.5px; }
.srt-browser .ss-card-artist { font-size: 7.5px; }
/* Two across reads better than three in this rail: 105px squares turned the
   titles into ellipses. */
.srt-browser .ss-tab :is(.ss-grid, .ss-cards, .ss-results),
.srt-browser .ss-screen-records {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px;
}
.srt-browser .ss-circle-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
.srt-browser .ss-artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.srt-browser .ss-artist-name { font-size: 10px; }
.srt-browser .ss-artist-genres { font-size: 8px; }
.srt-browser .ss-search { font-size: 11px; padding: 6px 9px; }

/* Album shelf at deck size. */
.npc-browser .ss-album-card,
.srt-browser .ss-album-card { flex-basis: 70px; }
.npc-browser .ss-album-card b,
.srt-browser .ss-album-card b { font-size: 8px; }

/* =============================================================================
   THE SAVE MARK MUST BE PRESSABLE. (fourth time — see SampleSuggestor.css)

   Two things conspired against it inside a deck embed:

   1. It was `opacity: 0` until the card was hovered. Invisible until you are
      already on it means you aim at a target you cannot see, and any wobble
      on the way reads as "it moved". It is faintly visible now and comes up
      to full on hover, exactly the remedy the recipe delete-X needed.
   2. themes/mixer-z-index.css puts `z-index: 25 !important` on EVERY button
      app-wide. The card's own layers sit above 3, so anything at 25 that
      paints later wins the corner. 26 clears it, and `!important` is the only
      thing that beats an `!important`.
   ========================================================================== */
.npc-browser .ss-card-save,
.srt-browser .ss-card-save {
  opacity: 0.55;
  z-index: 26 !important;
}
.npc-browser .ss-card:hover .ss-card-save,
.srt-browser .ss-card:hover .ss-card-save,
.npc-browser .ss-card-save:hover,
.srt-browser .ss-card-save:hover { opacity: 1; }
/* Nothing under the pointer is allowed to travel while it is being aimed at. */
.npc-browser .ss-card-save,
.srt-browser .ss-card-save { transition: opacity 0.15s, color 0.15s, border-color 0.15s; }
/* =============================================================================
   MPC SAMPLER OS — a hardware sampler face living inside the cassette LCD.

   Deliberately NOT the shared translucent LCD skin: this page is a device
   within the device, the way the FX console is a pedalboard. Charcoal face,
   a green phosphor screen up top, and twelve rubber pads that light amber
   when they sound — the visual grammar every beatmaker already knows.
   ========================================================================== */

.mpc-face {
  --mpc-body: #26282b;
  --mpc-body-hi: #303336;
  --mpc-line: #0d0e10;
  --mpc-pad: #3b3e42;
  --mpc-pad-hi: #4a4e53;
  --mpc-amber: #ffb84d;
  --mpc-screen-bg: #0f2410;
  --mpc-screen-ink: #9fe870;
  --mpc-screen-dim: rgba(159, 232, 112, 0.55);
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 8px;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--mpc-body-hi), var(--mpc-body) 55%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), inset 0 -2px rgba(0, 0, 0, 0.45);
  font-family: 'Courier New', monospace;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

/* -- phosphor screen -------------------------------------------------------- */
.mpc-screen {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 40px;
  padding: 5px 9px;
  border: 1px solid var(--mpc-line);
  border-radius: 5px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(120% 140% at 50% 0%, #16351a, var(--mpc-screen-bg) 70%);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7), 0 1px rgba(255, 255, 255, 0.06);
  color: var(--mpc-screen-ink);
  text-shadow: 0 0 6px rgba(159, 232, 112, 0.45);
}
.mpc-screen-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.mpc-screen-title { font-size: 12px; }
.mpc-screen-info { font-size: 9px; color: var(--mpc-screen-dim); text-shadow: none; }
.mpc-marquee { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mpc-screen-meta { flex: 0 0 auto; font-size: 9px; color: var(--mpc-screen-dim); }

/* -- function keys ----------------------------------------------------------- */
.mpc-fkeys { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.mpc-fkey {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 5px 0 4px;
  text-align: center;
  font-family: inherit;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #a7adb3;
  border: 1px solid var(--mpc-line);
  border-radius: 4px;
  background: linear-gradient(#34373b, #2a2d30);
  box-shadow: 0 2px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.07);
  -webkit-tap-highlight-color: transparent;
}
.mpc-fkey.is-active {
  color: var(--mpc-amber);
  box-shadow: 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 3px rgba(0, 0, 0, 0.5);
  background: #232528;
  text-shadow: 0 0 7px rgba(255, 184, 77, 0.5);
}

/* -- the pads ----------------------------------------------------------------
   Rubber squares: soft top light, hard bottom seat. A lit pad glows amber
   from inside, the way silicone pads glow over their LEDs. Hit = instant
   (no transition on press), release decays — matches how a pad LED feels. */
.mpc-pad-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 7px;
}
.mpc-pad {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 0;
  border-radius: 7px;
  border: 1px solid var(--mpc-line);
  background: radial-gradient(120% 100% at 50% 18%, var(--mpc-pad-hi), var(--mpc-pad) 62%, #33363a);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.45), inset 0 1px rgba(255, 255, 255, 0.1), inset 0 -3px 5px rgba(0, 0, 0, 0.35);
  color: #c9ced3;
  text-align: center;
  transition: box-shadow 0.22s ease, background-color 0.22s ease;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.mpc-pad:active { transform: translateY(1px); }
.mpc-pad.is-lit {
  transition: none;
  background: radial-gradient(120% 110% at 50% 30%, #ffd9a0, var(--mpc-amber) 55%, #d98f2b);
  color: #3a2404;
  box-shadow: 0 0 14px rgba(255, 184, 77, 0.55), 0 3px 5px rgba(0, 0, 0, 0.45), inset 0 1px rgba(255, 255, 255, 0.5);
  text-shadow: none;
}
.mpc-pad.is-sel::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(255, 184, 77, 0.55);
  border-radius: 5px;
  pointer-events: none;
}
.mpc-pad.is-empty { opacity: 0.45; }
.mpc-pad-key {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 8px;
  font-weight: 900;
  opacity: 0.65;
}
.mpc-pad-name {
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.mpc-pad-tag { font-size: 8px; font-weight: 700; opacity: 0.7; }

/* -- edit page ---------------------------------------------------------------- */
.mpc-edit { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.mpc-pad-picker { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; flex: 0 0 auto; }
.mpc-pick {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 4px 0;
  text-align: center;
  font-family: inherit;
  font-size: 8px;
  font-weight: 900;
  color: #a7adb3;
  border: 1px solid var(--mpc-line);
  border-radius: 3px;
  background: #2c2f32;
}
.mpc-pick.is-sel { color: var(--mpc-amber); border-color: rgba(255, 184, 77, 0.6); }
.mpc-pick.is-lit { background: rgba(255, 184, 77, 0.25); }

.mpc-wave {
  flex: 0 0 46px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  padding: 4px 8px;
  border: 1px solid var(--mpc-line);
  border-radius: 5px;
  background: radial-gradient(120% 140% at 50% 0%, #16351a, var(--mpc-screen-bg) 70%);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.mpc-wave > span {
  flex: 1;
  min-width: 1px;
  border-radius: 1px;
  background: var(--mpc-screen-ink);
  box-shadow: 0 0 4px rgba(159, 232, 112, 0.4);
}
.mpc-wave-empty { align-self: center; font-size: 9px; font-weight: 900; color: var(--mpc-screen-dim); }

.mpc-params {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 6px;
}
.mpc-param {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 0;
  border: 1px solid var(--mpc-line);
  border-radius: 5px;
  background: linear-gradient(#313437, #292c2f);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07);
  color: #c9ced3;
  -webkit-tap-highlight-color: transparent;
}
.mpc-param small { font-size: 7px; font-weight: 900; letter-spacing: 0.16em; color: #868c93; }
.mpc-param strong { font-size: 12px; font-weight: 900; color: var(--mpc-amber); }
.mpc-stepper {
  cursor: default;
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 1px 4px;
  padding: 3px 4px;
}
.mpc-stepper small { grid-column: 1 / -1; }
.mpc-stepper strong { grid-row: 2; grid-column: 2; }
.mpc-stepper button:first-of-type { grid-row: 2; grid-column: 1; }
.mpc-stepper button:last-of-type { grid-row: 2; grid-column: 3; }
.mpc-stepper button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 24px;
  padding: 3px 0;
  text-align: center;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  color: #c9ced3;
  border: 1px solid var(--mpc-line);
  border-radius: 4px;
  background: #35383c;
  -webkit-tap-highlight-color: transparent;
}
.mpc-stepper button:active { background: #2a2d30; }

/* -- kits / load lists -------------------------------------------------------- */
.mpc-list-page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.mpc-save-row { flex: 0 0 auto; display: flex; gap: 6px; }
.mpc-input {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--mpc-line);
  border-radius: 5px;
  background: radial-gradient(120% 140% at 50% 0%, #16351a, var(--mpc-screen-bg) 70%);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7);
  color: var(--mpc-screen-ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.mpc-input::-moz-placeholder { color: var(--mpc-screen-dim); }
.mpc-input::placeholder { color: var(--mpc-screen-dim); }
.mpc-action {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid var(--mpc-line);
  border-radius: 5px;
  background: linear-gradient(#3a3d41, #2e3134);
  box-shadow: 0 2px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.08);
  color: var(--mpc-amber);
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  -webkit-tap-highlight-color: transparent;
}
.mpc-action:disabled { opacity: 0.4; cursor: default; }
.mpc-grow { flex: 1; }
.mpc-rows { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; -webkit-overflow-scrolling: touch; }
.mpc-row {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--mpc-line);
  border-radius: 5px;
  background: #2c2f32;
  color: #c9ced3;
  -webkit-tap-highlight-color: transparent;
}
.mpc-row.is-current { border-color: rgba(255, 184, 77, 0.6); color: var(--mpc-amber); }
.mpc-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 900; }
.mpc-row-meta { flex: 0 0 auto; font-size: 9px; font-weight: 700; opacity: 0.7; }
.mpc-empty { padding: 14px 8px; text-align: center; font-size: 9px; font-weight: 900; letter-spacing: 0.1em; color: #868c93; }

/* The LCD content box already pads its pages; the MPC face brings its own
   bezel, so it sits flush against the frame instead. */
.lcd-content.sampler-mode {
  /* The base .lcd-content is a 3-col grid for menu icons; the sampler is one
     full-bleed instrument. Flex column + hidden overflow stops the track
     rail's intrinsic width from bursting the face out of the drawer. */
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  padding: 4px;
  overflow: hidden;
}
.mpc-face { min-width: 0; max-width: 100%; }

/* ================= Mobile OS v2: tracks, transport, seq, wave ============== */

/* Track rail: the kit at a glance — six colored chips, always in reach. */
.mpc-tracks {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mpc-tracks::-webkit-scrollbar { display: none; }
.mpc-trk {
  flex: 1 0 auto;
  min-width: 92px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: 2px;
}
.mpc-trk-pick {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 6px 7px;
  border-radius: 5px;
  background: var(--mpc-pad);
  border: 1px solid var(--mpc-line);
  -webkit-tap-highlight-color: transparent;
}
.mpc-trk-pick i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--trk, #0a84ff);
}
.mpc-trk-pick span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  color: #cfd2d6;
}
.mpc-trk.is-sel .mpc-trk-pick {
  background: color-mix(in srgb, var(--trk) 30%, var(--mpc-pad));
  border-color: var(--trk);
}
.mpc-trk-mute {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 5px;
  border: 1px solid var(--mpc-line);
  background: var(--mpc-pad);
  font-size: 9px;
  font-weight: 900;
  color: #8a8f95;
  -webkit-tap-highlight-color: transparent;
}
.mpc-trk.is-muted .mpc-trk-mute { background: var(--mpc-amber); color: #1b1b1f; }
.mpc-trk.is-muted .mpc-trk-pick { opacity: 0.55; }

/* Transport rail: run the sequencer, launch scenes, chop the record. */
.mpc-transport {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 5px;
}
.mpc-run {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  min-width: 46px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--mpc-line);
  background: var(--mpc-pad);
  font-size: 13px;
  font-weight: 900;
  color: #e8eaec;
  -webkit-tap-highlight-color: transparent;
}
.mpc-run.is-on { background: #0a84ff; box-shadow: 0 0 12px rgba(10, 132, 255, 0.5); }
.mpc-run:disabled { opacity: 0.4; }
.mpc-chopbtn { font-size: 10px; letter-spacing: 0.08em; }
.mpc-scenes {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mpc-scenes::-webkit-scrollbar { display: none; }
.mpc-scene {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  flex: 1 0 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid var(--mpc-line);
  background: var(--mpc-pad);
  font-size: 11px;
  font-weight: 900;
  color: #aeb2b7;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.mpc-scene.is-on { background: var(--mpc-pad-hi); color: var(--mpc-amber); border-color: var(--mpc-amber); }
.mpc-scene.is-queued { animation: mpcQueue 0.5s steps(2, end) infinite; }
@keyframes mpcQueue { 50% { border-color: var(--mpc-amber); } }
.mpc-scene i {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--mpc-amber);
  transform-origin: left center;
}
/* Sounding but not the selected track's scene: ring the button so you can see
   which scene owns the running bar while you edit another one. */
.mpc-scene.is-playing:not(.is-on) { border-color: var(--mpc-amber); color: var(--mpc-amber); }

/* Voice-mode toggles sit beside the scenes; they must not eat scene width. */
.mpc-vmode { flex: 0 0 auto; padding: 0 6px; font-size: 9px; letter-spacing: 0.04em; }

/* Wave editor: draggable slice + edge handles + the shared red playhead. */
.mpc-wave-editor {
  position: relative;
  flex: 0 0 74px;
  touch-action: none;
}
.mpc-wave-slice {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border: 1px solid var(--mpc-amber);
  border-radius: 3px;
  background: rgba(255, 184, 77, 0.16);
  touch-action: none;
}
.mpc-hdl {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 16px;
  touch-action: none;
}
.mpc-hdl::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--mpc-amber);
}
.mpc-hdl-l { left: -8px; }
.mpc-hdl-l::after { left: 6px; }
.mpc-hdl-r { right: -8px; }
.mpc-hdl-r::after { right: 6px; }

/* Loop / trigger cluster (matches the desktop decks' two-axis model). */
.mpc-loopctl {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  align-items: stretch;
}
.mpc-lbtn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 7px 9px;
  border-radius: 5px;
  border: 1px solid var(--mpc-line);
  background: var(--mpc-pad);
  font-size: 10px;
  font-weight: 900;
  color: #cfd2d6;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.mpc-lbtn.is-on { background: var(--mpc-pad-hi); color: var(--mpc-amber); border-color: var(--mpc-amber); }
.mpc-lbtn:disabled { opacity: 0.4; }
.mpc-trig { margin-left: auto; }
.mpc-choppick {
  min-width: 0;
  border: 1px solid var(--mpc-line);
  border-radius: 5px;
  background: var(--mpc-pad);
  color: #cfd2d6;
  font-size: 10px;
  font-weight: 700;
}

/* Step sequencer: rows are the selected track's chops; key column pinned. */
.mpc-seq {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mpc-grid-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mpc-grid-scroll::-webkit-scrollbar { display: none; }
.mpc-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 100%;
}
.mpc-srow {
  flex: 1;
  min-height: 26px;
  display: grid;
  grid-template-columns: 74px repeat(16, minmax(24px, 1fr));
  gap: 2px;
}
.mpc-ghead {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid var(--mpc-line);
  background: var(--mpc-body-hi);
  -webkit-tap-highlight-color: transparent;
}
.mpc-ghead b { font-size: 9px; color: var(--mpc-amber); }
.mpc-ghead span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 700;
  color: #aeb2b7;
}
.mpc-ghead.is-lit { border-color: var(--mpc-amber); }
.mpc-srow.is-sel .mpc-ghead { background: var(--mpc-pad-hi); }
.mpc-cell {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 3px;
  border: 1px solid var(--mpc-line);
  background: var(--mpc-pad);
  -webkit-tap-highlight-color: transparent;
}
.mpc-cell.is-beat { background: var(--mpc-pad-hi); }
.mpc-cell.is-on { background: var(--mpc-amber); border-color: var(--mpc-amber); }
.mpc-cell.is-tail { background: color-mix(in srgb, var(--mpc-amber) 40%, var(--mpc-pad)); }
.mpc-cell.is-play { box-shadow: inset 0 0 0 1px #fff; }

/* Crate captions + browse button growth. */
.mpc-crate-cap {
  flex: 0 0 auto;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #8a8f95;
  padding: 4px 2px 0;
}
.mpc-grow-btn { flex: 1; }
/* =============================================================================
   MPC-12 — Akai MPC 2000 clone.

   The hardware grammar, kept honest: putty-gray body with dark silkscreen, a
   pea-green backlit LCD with dark pixels and inverse-video selection, six
   function keys under the screen, a DATA wheel, a cursor cluster, and unlit
   rubber pads whose state lives in a red LED beside each silkscreen legend.

   Footprint: the deck docks over the genre section — the same fixed anchors
   the artist menu (.spotify-container) uses, so it covers exactly that area
   and never the mixer.
   ========================================================================== */

.mpc2k {
  --putty: #c9c5b8;
  --putty-hi: #dedbd1;
  --putty-lo: #a5a196;
  --ink: #2c2f35;
  --red: #b5342a;
  --key-dark: #4e5157;
  --lcd-back: #a9b54a;
  --lcd-back-hi: #b8c356;
  --lcd-ink: #212912;
  position: fixed;
  /* The band's top is the mixer's bottom; this deck starts one chrome strip
     lower because .sdh-switch / .sdh-kitbar own that strip. */
  top: calc(var(--spotify-menu-top, 53.3vh) + var(--sdh-chrome, 22px));
  bottom: var(--spotify-menu-bottom, 0px);
  left: calc(var(--spotify-menu-left, 0px) + var(--soundcraft-width, 95px));
  right: var(--spotify-menu-right, 0px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 8px 14px 12px;
  border-top-left-radius: 12px;
  border-top: 2px solid var(--putty-hi);
  border-left: 2px solid var(--putty-hi);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 14px),
    var(--putty);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 -3px 8px rgba(0, 0, 0, 0.18);
  font-family: 'Helvetica Neue', Arial, sans-serif; /* impeccable-disable-line overused-font -- period-accurate: Akai's 90s silkscreen IS a Helvetica face */
  color: var(--ink);
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

/* -- silkscreen rail --------------------------------------------------------- */
.mpc2k-rail {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 2px 2px 6px;
  border-bottom: 1px solid var(--putty-lo);
}
.mpc2k-logo {
  font-size: 20px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.mpc2k-sub {
  flex: 1;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #55584f;
}
.mpc2k-brand { font-size: 10px; font-weight: 700; font-style: italic; color: #55584f; }

.mpc2k-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: 16px;
  padding-top: 8px;
}

/* -- LCD -------------------------------------------------------------------- */
.mpc2k-left { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
.mpc2k-lcd-bezel {
  flex: 1;
  min-height: 0;
  /* The glass is the container the readout has to fit in, so it is the glass
     the type is measured against — not the viewport. A vh-based size was
     right at both ends of a desktop range and wrong in the middle, because
     the LCD's share of the deck is not a fixed fraction of the window. */
  container-type: size;
  container-name: npclcd;
  padding: 7px;
  border-radius: 6px;
  background: linear-gradient(#3a3d42, #2c2f34);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.65), 0 1px rgba(255, 255, 255, 0.35);
}
.mpc2k-lcd {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  min-height: 0;
  padding: 6px 8px 4px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px),
    radial-gradient(140% 160% at 50% 0%, var(--lcd-back-hi), var(--lcd-back) 72%);
  box-shadow: inset 0 0 14px rgba(40, 46, 12, 0.35);
  font-family: 'VT323', 'Courier New', monospace;
  /* THE TYPE SIZES WITH THE GLASS. A flat 17px is right on a 1080p desk and
     far too big on a laptop, where the whole LCD is ~109px: four lines of it
     plus the head and the soft keys did not fit, and the overflow drew
     straight through the soft-key row.

     8.6cqh fit, but VT323 is a narrow pixel face and 10px of it on a laptop
     was too small to READ — which is the only thing a readout has to be. The
     glass buys the extra size back by showing FEWER LINES as it gets shorter
     (the breakpoints below), rather than by shrinking the type past legible.
     Floor raised 9 -> 12, slope 8.6 -> 12cqh, ceiling 17 -> 19. */
  font-size: clamp(12px, 12cqh, 19px);
  line-height: 1.05;
  color: var(--lcd-ink);
  overflow: hidden;
}
.mpc2k-lcd-head {
  /* Never shrinks and never grows: it is the machine's title bar. Left as a
     default flex item it competed with the page below it for the squeeze. */
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  border-bottom: 1px solid var(--lcd-ink);
  padding-bottom: 2px;
}
.mpc2k-lcd-head span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mpc2k-inv, .mpc2k-lcd-soft .is-on {
  background: var(--lcd-ink);
  color: var(--lcd-back);
  padding: 0 3px;
}

/* `overflow: hidden` is the BACKSTOP, not the fix — the fix is that the page
   is four lines and the type scales. But a flex column with min-height:0 and
   no overflow rule lets its children paint outside the box, and the LCD's own
   clip is further out, so the spill landed on the soft-key row rather than
   disappearing. Whatever the content grows into next, it stops here. */
.mpc2k-lcd-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 3px;
  white-space: pre;
  overflow: hidden;
}
/* Lines keep their height. As flex items they were shrinkable, so a page one
   line too tall squashed every line instead of showing you the problem. */
.mpc2k-lcd-main > div { flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; }
/* A TINY GLASS SHOWS LESS, it does not show the same thing badly. Projected
   onto the 3D machine the bezel can be ~50px, where even four 9px lines plus
   the head and the soft keys do not fit. Kit and Trk are the two you are not
   reading while you play; Pad and Mode stay. */
/* THE GLASS DROPS LINES, IT DOES NOT SHRINK THE TYPE PAST READING.
   Three steps, each one giving up the least useful line so the rest can stay
   legible. Kit and Trk go first (you do not read them while playing), then
   the page body entirely, leaving the head and the soft keys. */
@container npclcd (max-height: 116px) {
  .mpc2k-lcd-main > div:nth-child(1) { display: none; }
  .mpc2k-lcd { padding: 3px 6px 2px; gap: 2px; }
}
@container npclcd (max-height: 92px) {
  .mpc2k-lcd-main > div:nth-child(4) { display: none; }
  /* Padding and gaps are a bigger share of a small glass than the type is —
     at this size the 10px of padding was costing a whole line. */
  .mpc2k-lcd { padding: 2px 4px 1px; gap: 1px; }
  .mpc2k-lcd-main { padding-top: 1px; gap: 0; }
}
/* Smaller still and the page has to go: the head tells you where you are and
   the soft keys let you leave. Showing half a line of Pad under a clipped
   title bar would be worse than showing neither. */
@container npclcd (max-height: 62px) {
  .mpc2k-lcd-main,
  .mpc2k-lcd-fields,
  .npc-wave { display: none; }
}

.mpc2k-lcd-wave {
  flex: 0 0 34%;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  margin-top: 3px;
  padding: 2px;
  border: 1px solid var(--lcd-ink);
}
.mpc2k-lcd-wave i { flex: 1; min-width: 1px; background: var(--lcd-ink); }

.mpc2k-lcd-fields {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: start;
  gap: 2px 8px;
  padding-top: 3px;
}
.mpc2k-field {
  all: unset;
  cursor: pointer;
  display: flex;
  gap: 4px;
  white-space: nowrap;
  font-family: inherit;
  color: inherit;
}
.mpc2k-field em { font-style: normal; }
.mpc2k-field.is-sel em { background: var(--lcd-ink); color: var(--lcd-back); padding: 0 3px; }

.mpc2k-lcd-list { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 2px; overflow: hidden; }
.mpc2k-lcd-row {
  all: unset;
  cursor: pointer;
  /* A LIST ROW MAY NOT SHRINK. With 170 songs in a 132px list every row was
     a flex item free to shrink, so each one collapsed to about a pixel and
     the whole catalogue rendered as a grey smear. The list already scrolls
     (.npc-scroll); rows just have to keep their line. */
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  font-family: inherit;
  color: inherit;
}
.mpc2k-lcd-row.is-sel { background: var(--lcd-ink); color: var(--lcd-back); }
.mpc2k-lcd-input {
  all: unset;
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  caret-color: var(--lcd-ink);
}
.mpc2k-lcd-row.is-sel .mpc2k-lcd-input { color: var(--lcd-back); caret-color: var(--lcd-back); }
.mpc2k-lcd-input::-moz-placeholder { color: inherit; opacity: 0.55; }
.mpc2k-lcd-input::placeholder { color: inherit; opacity: 0.55; }

/* Column count follows the KEYS, it is not written down. CLOSE came off and a
   hard `repeat(6, 1fr)` would have left a sixth of the readout empty — and
   worse, the soft labels and the F-keys under them would have drifted out of
   register the moment either list changed. They are the same row twice. */
.mpc2k-lcd-soft {
  flex: 0 0 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  border-top: 1px solid var(--lcd-ink);
  padding-top: 2px;
  /* Relative, so the soft row shrinks with the rest of the readout instead of
     being the one fixed thing that pushes everything else off the glass. */
  font-size: 0.82em;
  text-align: center;
}

/* -- function keys ----------------------------------------------------------- */
.mpc2k-fkeys { flex: 0 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 0 7px; }
.mpc2k-fkey {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 5px 0;
  text-align: center;
  border-radius: 3px;
  background: linear-gradient(var(--key-dark), #3f4247);
  box-shadow: 0 2px rgba(0, 0, 0, 0.45), inset 0 1px rgba(255, 255, 255, 0.18);
  color: #d6d9dd;
  font-size: 10px;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.mpc2k-fkey:active { transform: translateY(1px); box-shadow: 0 1px rgba(0, 0, 0, 0.45); }

/* -- cursor / DATA wheel / utility keys -------------------------------------- */
.mpc2k-cluster {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 7px 0;
}
.mpc2k-key {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  background: linear-gradient(var(--putty-hi), var(--putty));
  box-shadow: 0 2px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.6), inset 0 0 0 1px var(--putty-lo);
  color: var(--ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  -webkit-tap-highlight-color: transparent;
}
.mpc2k-key:active { transform: translateY(1px); box-shadow: 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px var(--putty-lo); }
.mpc2k-cursor {
  display: grid;
  grid-template-areas: '. up .' 'left . right' '. down .';
  gap: 2px;
}
.mpc2k-cur-up { grid-area: up; }
.mpc2k-cur-down { grid-area: down; }
.mpc2k-cur-left { grid-area: left; }
.mpc2k-cur-right { grid-area: right; }

.mpc2k-wheel-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mpc2k-wheel {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: ns-resize;
  background:
    radial-gradient(circle at 34% 30%, #5a5d63, #3a3d42 58%, #303338);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.25), inset 0 0 0 4px #46494f;
  position: relative;
  touch-action: none;
}
.mpc2k-wheel-dimple {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #24262a, #17181b);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}
.mpc2k-silk { font-size: 8px; font-weight: 800; letter-spacing: 0.2em; color: #55584f; }

.mpc2k-utils { display: flex; flex-direction: column; gap: 5px; margin-left: auto; }
.mpc2k-wide { min-width: 92px; justify-content: center; }

/* -- pads -------------------------------------------------------------------- */
.mpc2k-padbank {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px 12px;
  min-height: 0;
  min-width: 0;
  padding: 2px 4px 0 0;
}
.mpc2k-padcell { display: flex; flex-direction: column; min-height: 0; }
.mpc2k-pad {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 6px;
  border-radius: 8px;
  background:
    radial-gradient(130% 110% at 50% 12%, #56534c, #45423c 55%, #3a3733);
  box-shadow:
    0 3px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -3px 6px rgba(0, 0, 0, 0.4);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
/* Rubber compresses; it does not glow. */
.mpc2k-pad:active, .mpc2k-pad.is-on {
  transform: translateY(1px);
  background: radial-gradient(130% 110% at 50% 12%, #4c4943, #3d3a35 55%, #33302c);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 2px 6px rgba(0, 0, 0, 0.5);
}
.mpc2k-pad.is-sel { outline: 1px dashed rgba(44, 47, 53, 0.7); outline-offset: 3px; }
.mpc2k-pad-mold {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.28); /* molded into the rubber, not printed */
}
.mpc2k-pad-silk {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 2px 0;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #55584f;
}
.mpc2k-pad-silk b { margin-left: auto; color: var(--ink); }
.mpc2k-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6e2019;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}
.mpc2k-led.is-on { background: #ff4133; box-shadow: 0 0 6px rgba(255, 65, 51, 0.8); }

/* ======================= NPC 2000 additions ================================
   Mouse-first rework: no wheel, no cursor cluster. Square 3x4 pads, an
   interactive wave editor on the LCD, and a modern right rail (global pad
   actions + the sample browser embedded in the deck). */

.npc-body { grid-template-columns: minmax(0, 30fr) auto minmax(0, 30fr); }

.npc-padbank {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px 10px;
  justify-content: center;
  min-height: 0; grid-template-columns: repeat(4, minmax(72px, 96px)); align-content: center;
}
/* flex:1 stretch from the base pad class would beat aspect-ratio — pin it. */
.npc-pad { flex: 0 0 auto; width: 100%; aspect-ratio: 1 / 1; height: auto; }
.mpc2k-padcell { min-width: 0; }

/* LCD niceties */
.npc-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--lcd-ink) transparent; }
/* THE READOUTS ARE FIXED, THE WAVE IS ELASTIC. Six fields in three columns is
   two rows, and as a `flex: 1` item sharing the glass with a wave claiming a
   hard 44% the second row was cut in half on a laptop — Gain, Rel and half of
   Len simply were not there. The wave gives the height up instead; it is the
   one thing on the page that reads fine at any size. */
.npc-fields { grid-template-columns: repeat(3, 1fr); flex: 0 0 auto; }
.mpc2k-field { touch-action: none; }

/* Wave editor: dark-ink bars on the backlight; the slice is an inverse-video
   window with grab handles, exactly the LCD's own visual language. */
.npc-wave {
  position: relative;
  /* Shrinkable: 44% is what it WANTS, not what it takes. See .npc-fields.
     The floor is 16px because on the shortest glass the readouts (two fixed
     rows) plus the head and the soft keys leave the wave about 17px, and a
     26px floor was pushing the soft-key row off the bottom. */
  flex: 1 1 44%;
  min-height: 16px;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  margin-top: 3px;
  padding: 2px;
  border: 1px solid var(--lcd-ink);
  overflow: hidden;
  touch-action: none;
}
.npc-wave i { flex: 1; min-width: 1px; background: var(--lcd-ink); pointer-events: none; }
/* Centred in the frame, in the LCD's own ink at reduced weight — a printed
   state, not an error. Never eats a drag aimed at the wave behind it. */
.npc-wave-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.55;
  letter-spacing: 0.08em;
}
.npc-wave-slice {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(33, 41, 18, 0.28);
  border-left: 2px solid var(--lcd-ink);
  border-right: 2px solid var(--lcd-ink);
  cursor: grab;
}
.npc-wave-slice:active { cursor: grabbing; }
.npc-wave-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: ew-resize;
}
.npc-wave-handle-l { left: -7px; }
.npc-wave-handle-r { right: -7px; }
/* A NON-LOOPING PAD HAS NO LOOP TO DRAW. Gate and one-shot play forward from
   the start and stop; framing them between two flags claims a repeat that
   does not exist. The start edge stays hard (that is the thing you aim), the
   tail fades out, and there is no right-hand flag to grab. */
.npc-wave-slice:not(.is-loop) {
  border-right: 0;
  background: linear-gradient(90deg, rgba(33, 41, 18, 0.3) 0%, rgba(33, 41, 18, 0.06) 70%, transparent 100%);
}
/* Zoom keys, bottom-right of the wave so they never sit under the slice's
   start flag. `pointer-events` stays on: the wave's own scrub handler ignores
   presses that land on them. */
.npc-wave-zoom {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 4;
  display: flex;
  gap: 2px;
}
.npc-wave-zoom button {
  all: unset;
  width: 15px;
  height: 13px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid var(--lcd-ink);
  border-radius: 2px;
  background: var(--lcd-back);
  color: var(--lcd-ink);
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
}
.npc-wave-zoom button:hover { background: var(--lcd-ink); color: var(--lcd-back); }

/* Right rail */
.npc-rail { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.npc-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 6px;
  background: linear-gradient(var(--putty-hi), var(--putty));
  box-shadow: inset 0 0 0 1px var(--putty-lo), inset 0 1px rgba(255, 255, 255, 0.5);
}
.npc-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.npc-mode-on { box-shadow: 0 1px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 0 0 1px var(--putty-lo); }
.npc-globals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.npc-release { display: flex; flex-direction: column; gap: 2px; }
.npc-release input[type='range'] {
  width: 100%;
  height: 14px;
  accent-color: var(--red);
}

/* The browser, reformatted to live inside the deck: neutralize its full-screen
   overlay and let the modal fill the rail. */
.npc-browser {
  flex: 1;
  min-height: 0;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--putty-lo);
}
.npc-browser .sample-suggestor-overlay {
  position: absolute;
  inset: 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
}
.npc-browser .sample-suggestor-modal {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
}
/* The pull shelf lives IN the crate now, floating at its foot — it used to
   take a strip of the panel below the browser, which put USE FULL on the
   machine rather than on the record it belongs to.

   z-index 9100, measured not guessed: the suggestor's own overlay is 9000
   even embedded (it is written as a modal), so the shelf has to clear THAT,
   not merely the app-wide `button { z-index: 25 !important }`. At 30 the
   globe iframe answered elementFromPoint over the shelf. */
.npc-browser .pull-shelf {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  z-index: 9100;
  max-height: 46%;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* ============ Browser embed, phone-formatted =================================
   The rail is ~340px wide — a phone, not a desktop modal. Everything inside
   the embedded browser compacts to that reality: single-column cards, chip
   row that scrolls sideways, small type, no oversized art. */
.npc-browser .ss-header { padding: 6px 8px; }
.npc-browser .ss-header-sub { display: none; }
.npc-browser .ss-close { display: none; }
.npc-browser .ss-chiprow,
.npc-browser .ss-chiprow-sticky {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  padding: 4px 6px;
}
.npc-browser .ss-chip { flex: 0 0 auto; padding: 4px 8px; font-size: 10px; }
.npc-browser .ss-body { padding: 6px; }
/* Card + artist-tile layout lives in BrowserEmbed.css (picture tiles: the art
   IS the button). The old row-card overrides that used to sit here fought it
   at equal specificity, so whichever stylesheet happened to be bundled last
   won — that is how the thumbnails kept shrinking back to 44px chips. */
.npc-browser .ss-globe-iframe { min-height: 220px; }

/* A fresh record on the pads: they breathe until the first audition. */
@keyframes pad-fresh-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 208, 138, 0); }
  50% { box-shadow: 0 0 14px 2px rgba(255, 208, 138, 0.75); }
}
.npc-pad.is-fresh { animation: pad-fresh-blink 1.1s ease-in-out infinite; }

/* ---- A RECORD LANDING ON A PAD -------------------------------------------
   The pad shows its own pull. A SWEEP rather than a filling bar, deliberately:
   the engine's import door is a single POST that answers only when the whole
   record has downloaded, so there is no byte count to draw and a bar creeping
   to 90% would be a number we made up. A sweep says "working" honestly, and
   the four-letter tag says which stage. */
.npc-pad-pull {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.npc-pad-pull i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 40%;
  background: #ffd08a;
  box-shadow: 0 0 8px rgba(255, 208, 138, 0.9);
  animation: npc-pull-sweep 1.15s ease-in-out infinite;
}
.npc-pad-pull b {
  position: relative;
  margin-bottom: 6px;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.62);
  color: #ffd08a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
@keyframes npc-pull-sweep {
  0% { left: -40%; }
  100% { left: 100%; }
}
/* Landed and waiting on you: stop sweeping, hold a full amber edge. */
.npc-pad.is-pull-ready .npc-pad-pull i { animation: none; left: 0; width: 100%; }
.npc-pad.is-pull-failed .npc-pad-pull i { animation: none; left: 0; width: 100%; background: var(--red); box-shadow: none; }
.npc-pad.is-pull-failed .npc-pad-pull b { color: #ffb4ae; }
/* The whole pad reads as busy, not just its foot. */
.npc-pad.is-pull-previewing,
.npc-pad.is-pull-downloading { box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.55); }
.mpc2k-led.is-fresh { animation: pad-fresh-blink 1.1s ease-in-out infinite; background: #ffd08a; }

/* Shared live playhead: unmissable — a hot needle with a glow, riding above
   every layer of the wave. */
.wave-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: #ff453a;
  box-shadow: 0 0 8px rgba(255, 69, 58, 0.9), 0 0 2px rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 6;
}

/* ================= NPC v3: half-height LCD, actions below, tall browser ==== */
.npc-body .mpc2k-lcd-bezel { flex: 0 0 46%; }
.npc-body .npc-actions { flex: 1; min-height: 0; justify-content: center; }
.npc-globals-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 5px; align-items: stretch; }
.npc-globals-row .npc-release { justify-content: center; }
.npc-body .npc-rail { min-height: 0; }
.npc-body .npc-browser { flex: 1; min-height: 0; }

/* Bigger, visibly gripped slice handles (all editors). */
.npc-wave-handle, .smp-flag, .srt-hdl { width: 18px; }
.npc-wave-handle-l, .smp-flag-l, .srt-hdl-l { left: -10px; }
.npc-wave-handle-r, .smp-flag-r, .srt-hdl-r { right: -10px; }
.npc-wave-handle::after, .srt-hdl::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 40%;
  transform: translate(-50%, -50%);
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
  opacity: 0.7;
}

/* The parked-audio dot on STUDIO track slots (replaces a tofu glyph). */
.srt-trk-idle {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid #7c7c88;
  background: transparent;
}

/* ================= Browser embed v2: phone logic, NPC skin =================
   The rail is a phone-sized column INSIDE a piece of putty hardware, so the
   browser drops its own dark-slate identity and dresses like the deck:
   charcoal panel, putty-ink text, amber highlights. Density up, chrome out. */
.npc-browser .sample-suggestor-modal {
  background: #2b2d30;
  box-shadow: none;
  border: 0;
}
.npc-browser .ss-header {
  padding: 4px 8px;
  background: #232527;
  border-bottom: 1px solid #1a1b1d;
}
.npc-browser .ss-header-emoji { display: none; }
.npc-browser .ss-header-title { font-size: 11px; letter-spacing: 0.1em; }
.npc-browser .ss-chip {
  background: #232527;
  border-color: #1a1b1d;
  color: #c9ced3;
}
.npc-browser .ss-chip.active, .npc-browser .ss-chip[aria-pressed='true'] {
  background: #ffb84d;
  color: #3a2404;
  border-color: #b5342a00;
}
/* Decade rail on the globe: a compact scrolling strip, not a button wall. */
.npc-browser .ss-decade-controls {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 3px;
  padding: 3px 6px;
  scrollbar-width: none;
}
.npc-browser .ss-decade-btn {
  flex: 0 0 auto;
  padding: 3px 8px;
  font-size: 9px;
  border-radius: 3px;
}
.npc-browser .ss-body { padding: 4px; gap: 4px; }
.npc-browser .ss-card { border-radius: 4px; background: #232527; }
.npc-browser .ss-card:hover { background: #2e3134; }
.npc-browser .ss-card-title { color: #e8e4da; }
.npc-browser .ss-card-artist { color: #a7a294; }
.npc-browser .ss-card-pick { background: #ffb84d; color: #3a2404; }

/* -- 3D face variant --------------------------------------------------------
   Projected onto the 3D machine's LCD area: just the screen column. The pads,
   slider and data wheel are real hardware around it, so no padbank/browser. */
.mpc2k-face .mpc2k-body {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0;
  padding-top: 0;
}
.mpc2k-face .mpc2k-left { flex: 1; }

/* A drag is over THIS pad. The pad you are pointing at is the one that takes
   the record, so it has to say so before you let go — the whole bank lighting
   up tells you nothing about where it lands. */
.mpc2k-pad.is-drop-hot {
  outline: 2px solid var(--red);
  outline-offset: -2px;
  background: linear-gradient(180deg, #6a6d74 0%, #4e5157 100%);
  box-shadow: 0 0 12px rgba(181, 52, 42, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.mpc2k-padcell.is-drop-hot .mpc2k-led { background: var(--red); box-shadow: 0 0 7px var(--red); }

/* CHOP | PADS — a two-position switch, printed on the panel. The lit half is
   the machine's red so you can read the mode across the room. */
.npc-padmode { display: inline-flex; gap: 0; }
.npc-padmode-key { border-radius: 0; }
.npc-padmode-key:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.npc-padmode-key:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.npc-padmode-key.is-on {
  background: linear-gradient(180deg, #c8443a 0%, #a52c23 100%);
  color: #f6efe6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 8px rgba(0, 0, 0, 0.35);
}
/* The two-stage pull readout. One layout, three skins — each deck's own
   materials, so it belongs to the panel it sits on. */

.pull-shelf {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  border-radius: 4px;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pull-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.pull-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}
.pull-phase { flex: 0 0 auto; opacity: 0.72; font-size: 7.5px; }
/* The pad number, so a shelf of three pulls tells you which is which. */
.pull-slot {
  flex: 0 0 auto;
  min-width: 14px;
  text-align: center;
  border-radius: 2px;
  font-weight: 800;
}
.pull-act, .pull-x {
  all: unset;
  flex: 0 0 auto;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 7.5px;
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
}
.pull-x { padding: 2px 4px; opacity: 0.55; }
.pull-x:hover { opacity: 1; }
/* Still coming: a slow breath, not a spinner. Nothing is stuck. */
.pull-row.is-previewing, .pull-row.is-downloading { animation: pull-breathe 1.8s ease-in-out infinite; }
@keyframes pull-breathe { 50% { opacity: 0.66; } }

/* NPC 2000 — LCD glass on the putty panel. */
.pull-npc { background: #9aa63f; box-shadow: inset 0 0 0 1px #6f7a2b; color: #212912; }
.pull-npc .pull-row { background: rgba(33, 41, 18, 0.1); }
.pull-npc .pull-slot { background: #212912; color: #a9b54a; }
.pull-npc .pull-act { background: #b5342a; color: #f4efe4; }
.pull-npc .pull-act:hover { background: #922a22; }
.pull-npc .pull-row.is-ready { background: rgba(33, 41, 18, 0.22); }

/* STUDIO — Serato's dark chrome, lighting to its blue. */
.pull-studio { background: #1d1d24; box-shadow: inset 0 0 0 1px #2a2a33; color: #e8e8ee; }
.pull-studio .pull-row { background: #24242d; }
.pull-studio .pull-slot { background: #0a84ff; color: #fff; }
.pull-studio .pull-act { background: #0a84ff; color: #fff; }
.pull-studio .pull-act:hover { background: #3ea0ff; }
.pull-studio .pull-row.is-ready { box-shadow: inset 0 0 0 1px #0a84ff; }
.pull-studio .pull-row.is-failed { box-shadow: inset 0 0 0 1px #ff453a; }

/* SMPLR RACK — Live's flat grey with the rack's amber. */
.pull-smplr { background: #3c3c3c; box-shadow: inset 0 0 0 1px #1f1f1f; color: #d8d8d8; border-radius: 2px; }
.pull-smplr .pull-row { background: #4a4a4a; border-radius: 2px; }
.pull-smplr .pull-slot { background: #ffa519; color: #1f1f1f; }
.pull-smplr .pull-act { background: #ffa519; color: #1f1f1f; }
.pull-smplr .pull-act:hover { background: #ffb949; }
.pull-smplr .pull-row.is-ready { box-shadow: inset 0 0 0 1px #ffa519; }
/* The phone layer for all five machines. Imported from the host because the
   host always loads, while each deck's own sheet rides a lazy chunk — a
   mobile rule that arrives after the deck has painted is a flash of the
   desktop layout. */
/* ═══════════════════════════════════════════════════════════════════════════
   THE SAMPLERS, ON A PHONE
   ---------------------------------------------------------------------------
   Five machines share one slot: NPC 2000, STUDIO, SMPLR RACK, NP 1200 and the
   NSR-10. Every one of them is a WIDE object — an LCD beside a pad bank beside
   a browser — because every one of them is a picture of real hardware sitting
   on a desk. Dropped into a 390px-wide, 396px-tall band they all fail the same
   way: the columns squeeze until the pads are unhittable, and the bottom third
   (modes, params, the transport row) falls out of the box entirely.

   THE RULE THIS FILE FOLLOWS. A phone sampler needs four things and nothing
   else, which is exactly the brief:

       trigger  ·  adjust (pitch, start, end, loop, level)  ·  mode  ·  seq

   Browsing for sounds is NOT one of them. You arrive at a shared session with
   the host's kit already loaded; digging for new records is a desk job. So on
   every machine the browser column is removed outright, and the width it was
   holding goes to the pads.

   WHAT IS NOT DONE. Each machine keeps its own face — the NPC stays putty and
   ink, STUDIO stays dark, the rack stays flat grey. They are turned into one
   column each; they are not merged into a single generic pad screen. The
   machine you picked should still be the machine you are looking at.

   Scope: body[data-cp-mobile='true']. Widening this to the host's own phone
   studio is a one-line change to the selector, but the host's mobile layout
   has not been measured yet and is not this pass.
   ═══════════════════════════════════════════════════════════════════════════ */
body[data-cp-mobile='true'] {
  /* The device tab strip is pinned to the bottom of the panel band and the
     SAMPLE PACK button to the top of it, so the machine itself gets what is
     left between them. Everything below sizes off this. */
  --smpm-kitbar: 20px;
  --smpm-devices: 30px;
  --smpm-deck-top: calc(var(--cpm-panel-top) + var(--smpm-kitbar));
  --smpm-deck-h: calc(var(--cpm-panel-h) - var(--smpm-kitbar) - var(--smpm-devices));
  /* The deck's height once the mixer has collapsed — which, on the sampler
     tab, is always. Kept as a named value because the other machines size
     their internals against it. */
  --smpm-deck-h-max: calc(var(--cpm-panel-h-max) - var(--smpm-kitbar) - var(--smpm-devices));
}
/* ── 0 · EVERY MACHINE ─────────────────────────────────────────────────────
   One box, one column, and it cannot leave the band. Written once against all
   five deck roots so a machine can never quietly grow past the tab bar again
   — which is how the NP 1200's pads and the NSR-10's keypad went missing. */
body[data-cp-mobile='true'] .mpc2k,
body[data-cp-mobile='true'] .srt-deck,
body[data-cp-mobile='true'] .smp-rack,
body[data-cp-mobile='true'] .sp12,
body[data-cp-mobile='true'] .nsr10 {
  top: var(--smpm-deck-top) !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--smpm-deck-h) !important;
  /* 12px at the foot, not 4: the bottom pad row's silkscreen legend sits
     under the pads and was landing hard against the device tab strip. */
  padding: 6px 8px 12px !important;
  border-radius: 0 !important;
  border-left: none !important;
  /* A MACHINE DOES NOT SCROLL. An earlier pass made the decks scrollable so
     the gesture could drive the mixer collapse — which worked, but meant you
     had to scroll a sampler before it was worth looking at, and left the
     bottom pad row under the tab strip until you did.

     The tab now opens collapsed (cp-mobile.css, `data-cp-tab='sampler'`), so
     the full height is there on arrival and every machine is laid out to
     exactly that height. A pad grid you have to scroll is not an instrument;
     you cannot play what you cannot see. */
  overflow: hidden;
}
/* THE BROWSER GOES. On every machine this is the column that exists to find
   new sounds, and finding sounds is not what a phone in a shared session is
   for. It is also the widest thing on each deck. */
body[data-cp-mobile='true'] .npc-rail,
body[data-cp-mobile='true'] .npc-browser,
body[data-cp-mobile='true'] .smp-browser,
body[data-cp-mobile='true'] .srt-browser,
body[data-cp-mobile='true'] .deck-browser { display: none !important; }
/* ── 1 · NPC 2000 ──────────────────────────────────────────────────────────
   The 12-pad machine, and the one a guest lands on. Its desk shape is
   LCD | pads | browser. On the phone the browser is gone and the other two
   stack, so the order down the screen is the order you work in:

       name → LCD (wave + the six numbers) → 12 pads → mode keys

   The LCD's EDIT page carries Pad · Ptch · Bar · Len · Gain · Rel, which is
   the whole "adjust" half of the brief already built and already drag-
   adjustable by touch (the fields set `touch-action: none`). Nothing new had
   to be invented for it — it only had to be made reachable. */
body[data-cp-mobile='true'] .npc-body {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  /* Fills the deck exactly — no overflow, nothing to scroll. The pad bank
     takes whatever the LCD and the key rows do not need (`flex: 1` below),
     so the whole of the collapse goes into pad size. */
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
/* Silkscreen header: the machine's name earns 18px, the paragraph of legend
   beside it does not. */
body[data-cp-mobile='true'] .mpc2k-rail {
  flex: 0 0 20px !important;
  height: 20px;
  gap: 8px;
  align-items: center;
}
body[data-cp-mobile='true'] .mpc2k-logo { font-size: 14px; line-height: 20px; }
body[data-cp-mobile='true'] .mpc2k-sub,
body[data-cp-mobile='true'] .mpc2k-brand { display: none !important; }
/* The glass. Fixed height so the pads below it are never the thing that gets
   squeezed — on a phone the pads are the instrument and everything else is
   labelling. */
/* ── THE 44px RULE, BECAUSE IT DECIDES THIS WHOLE FILE ─────────────────────
   themes/mobile-responsive.css:100 carries, under `max-width: 767px`:

       button, .btn, .fader-handle {
         min-height: 44px !important;
         min-width:  44px !important;
         padding:    0.75rem !important;
       }

   That is a good default and the reason it is here. It is also why every
   sampler collapses on a phone: a machine's silkscreen furniture — the NPC's
   five F-keys, its four mode keys, the SAMPLE PACK strip, STUDIO's chips —
   are all <button>, so each claimed 44px plus 24px of padding, and between
   them they left nothing for the pads. The SAMPLE PACK strip is the clearest
   case: a 20px bottom-aligned band whose button insisted on 44px, so it grew
   UPWARDS out of the band and landed on the play button.

   `!important` cannot be outbid by specificity, so the rows below set an
   explicit `height` and `min-height: 0 !important` instead. Every row that
   does so is a LEGEND or a MODE — read constantly, pressed rarely. The thing
   that keeps its full 44px is the PAD, which is the one control here you
   actually play, and which is what all the reclaimed height goes to. */
body[data-cp-mobile='true'] .mpc2k-left { flex: 0 0 auto !important; gap: 4px; }
/* 100, not 66. The phone lands on the EDIT page, and EDIT is a taller screen
   than MAIN: a waveform with its trim handles above two rows of readouts
   (Pad · Ptch · Bar / Len · Gain · Rel). Sized for MAIN it overflowed the
   deck by 5px and pushed the bottom pad row under the device tabs. */
body[data-cp-mobile='true'] .mpc2k-lcd-bezel { flex: 0 0 100px !important; padding: 3px; }
body[data-cp-mobile='true'] .npc-wave { min-height: 34px; }
/* Six numbers across three columns is two rows of readable type. Two rows of
   six would be 60px-wide cells, which is not enough for `Gain: 100`. */
body[data-cp-mobile='true'] .npc-fields { gap: 2px; }
body[data-cp-mobile='true'] .mpc2k-field {
  min-height: 26px;
  font-size: 11px;
}
/* F-keys pick the LCD page (MAIN · EDIT · SONGS · KITS · DO IT). They stay —
   EDIT is where the six numbers live, so this row is the way to the params —
   but they lose half their height. */
body[data-cp-mobile='true'] .mpc2k-fkeys {
  /* Pinned, not elastic. Left to itself this row took 44px — more than the
     glass it pages — because each F-key inherits the global button floor. */
  flex: 0 0 28px !important;
  gap: 3px;
  padding: 0 2px;
}
body[data-cp-mobile='true'] .mpc2k-fkey {
  min-height: 0 !important;
  height: 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}
/* The F-number keeps the machine's identity — it is silkscreened on the real
   panel — but shrinks to a hint above the word that actually says what the
   key does. */
body[data-cp-mobile='true'] .mpc2k-fkey-n { font-size: 6px; opacity: 0.5; letter-spacing: 0.08em; }
body[data-cp-mobile='true'] .mpc2k-fkey-l { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; }
/* The page you are on reads as a pressed key, so the row states where you
   are as well as where you can go. */
body[data-cp-mobile='true'] .mpc2k-fkey.is-on {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--putty-lo);
  color: var(--red);
}
/* THE PADS. They take every pixel the rest of the deck does not need. Four
   across is the machine's own bank layout and keeps each pad ~90px wide;
   three rows of ~52px clears the 44px touch floor with room for the LED and
   its legend underneath. */
body[data-cp-mobile='true'] .npc-padbank {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  /* 74px is the floor, `1fr` is the intent: with the tab opening collapsed
     the deck has ~544px, so after the name plate, the glass, the F-keys and
     the mode row the three rows land near 120px each. The floor only matters
     on a short phone, where the pads stay playable instead of vanishing. */
  grid-template-rows: repeat(3, minmax(74px, 1fr));
  /* Takes the slack, so every pixel the collapse buys goes to the pads rather
     than to the furniture around them. */
  flex: 1 1 auto;
  min-height: 0;
  gap: 4px 6px;
  padding: 0;
}
/* The desk pins pads square. Square at this width would be 90px tall and only
   two rows would fit, so on the phone they fill their cell instead. */
body[data-cp-mobile='true'] .npc-pad {
  aspect-ratio: auto !important;
  /* Not 100%: the pad's silkscreen legend and its LED sit UNDER the pad in
     the same cell, so a full-height pad pushed them down onto the row below
     and every legend read against the wrong pad. */
  height: calc(100% - 11px) !important;
  min-height: 0;
  padding: 2px;
}
body[data-cp-mobile='true'] .mpc2k-padcell { min-height: 0; justify-content: space-between; }
body[data-cp-mobile='true'] .mpc2k-pad-silk {
  font-size: 7px;
  line-height: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Mode keys — LOOP · 1SHOT · GATE · P-PONG — are the "loop" half of the brief
   and stay a full four-across row. */
body[data-cp-mobile='true'] .npc-actions { flex: 0 0 auto; gap: 4px; padding: 4px; }
body[data-cp-mobile='true'] .npc-modes { gap: 4px; }
body[data-cp-mobile='true'] .npc-actions .mpc2k-key {
  min-height: 0 !important;
  height: 26px;
  padding: 0 4px;
  font-size: 9px;
}
/* RELEASE already has a number on the glass (Rel:), and a 14px range slider
   is not a control anyone hits with a thumb. */
body[data-cp-mobile='true'] .npc-release { display: none !important; }
/* The globals row goes too, and for a reason rather than for space: CHOP/PADS
   decides where a DROPPED RECORD lands, and the chop button next to it works
   on whatever the browser just handed you. With the browser gone from the
   phone there is nothing to drop and nothing to point it at. Keeping a switch
   that governs an action you cannot perform is worse than not having it. */
body[data-cp-mobile='true'] .npc-globals-row { display: none !important; }
/* The chrome around the machine — GENERATE SAMPLE PACK's line at the top of
   the band and the device tab strip at the bottom — is positioned in
   styles/cp-mobile.css, which owns every band boundary on the page. It is not
   restated here: two sheets setting the same geometry would be decided by
   whichever import happened to land last, and this one rides a lazy chunk. */
/* ── 2 · STUDIO ────────────────────────────────────────────────────────────
   Serato's machine is a DAW head: a topbar of seven control groups over
   rack | timeline | browser. Two things break it on a phone.

   The topbar wraps. It is `flex-wrap: wrap` with seven groups, which at 390px
   became EIGHT stacked rows — transport, quantise, voice, bars, project,
   scenes, tools — and between them they filled the entire deck. The machine
   rendered as nothing but its own settings; the rack and the timeline were
   pushed out of the box completely.

   So it stops wrapping and becomes one scrollable line, the way the global
   strip above the mixer does. Same idea, same reason: a row that admits it
   continues past the edge beats a row that silently stacks. */
body[data-cp-mobile='true'] .srt-topbar {
  flex: 0 0 40px !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start;
  gap: 10px;
  padding-bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
body[data-cp-mobile='true'] .srt-topbar::-webkit-scrollbar { display: none; }
body[data-cp-mobile='true'] .srt-grp { flex: 0 0 auto; }
body[data-cp-mobile='true'] .srt-topbar .srt-chip {
  min-height: 0 !important;
  height: 28px;
  padding: 0 9px;
}
/* Then the three columns become one. The rack is STUDIO's trigger surface —
   one sample per slot — so it takes the room, and the timeline keeps enough
   to show the wave and its steps. The browser is gone for the same reason it
   is gone everywhere else on the phone. */
body[data-cp-mobile='true'] .srt-main,
body[data-cp-mobile='true'] .srt-main-v3 {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
}
body[data-cp-mobile='true'] .srt-rack { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body[data-cp-mobile='true'] .srt-center { flex: 0 0 152px; }
/* The soundbar is wave + a 236px controls block side by side. At 390px that
   left the wave 140px; stacked, the wave gets the width and the controls sit
   under it. */
body[data-cp-mobile='true'] .srt-soundbar {
  flex: 0 0 96px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 1fr auto;
}
body[data-cp-mobile='true'] .srt-seq { flex: 0 0 auto; max-height: 50px; }
/* ── 3 · SMPLR RACK ────────────────────────────────────────────────────────
   Live's device view: a 230px chain list beside the device panel. The list is
   the trigger surface (Q W E R A S ... one key per chain), so on the phone it
   goes on top and takes the height, and the device — wave, modes, controls —
   sits under it as a fixed strip. Side by side at 390px the device panel was
   simply off the right edge. */
body[data-cp-mobile='true'] .smp-body {
  display: flex !important;
  flex-direction: column;
}
body[data-cp-mobile='true'] .smp-chains {
  flex: 1 1 auto;
  min-height: 0;
  border-right: none;
  border-bottom: 1px solid var(--smp-line);
}
/* One row per chain at the touch floor — this list IS the pads here. */
body[data-cp-mobile='true'] .smp-chain-key { min-height: 44px; }
body[data-cp-mobile='true'] .smp-device { flex: 0 0 150px; }
body[data-cp-mobile='true'] .smp-wave { flex: 1 1 auto; min-height: 56px; padding: 4px 8px; }
body[data-cp-mobile='true'] .smp-controls { flex: 0 0 72px !important; padding: 6px 8px; }
/* Four stacked mode rows in 72px is 18px each. Two by two keeps them
   pressable without taking height off the wave. */
body[data-cp-mobile='true'] .smp-modes {
  grid-template-rows: repeat(2, 1fr) !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}
body[data-cp-mobile='true'] .smp-titlebar { flex: 0 0 24px; }
/* Shared live playhead — defined HERE because the host always loads: it used
   to live only in the NPC deck's lazy-chunk CSS, so opening STUDIO directly
   rendered the playhead transparent with no height. Every deck's wave uses
   this class. */
.wave-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: #ff453a;
  box-shadow: 0 0 8px rgba(255, 69, 58, 0.9), 0 0 2px rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 6;
}
/* Device switcher: a small tab strip riding the deck's top edge, above every
   clone (they all share the artist-menu footprint). */
.sdh-switch {
  position: fixed;
  /* Sits ON the band's top edge — this strip is the deck's first row, so it is
     what has to meet the bottom of the mixer. The deck body starts below it
     (see --sdh-chrome in the deck docks). */
  top: var(--spotify-menu-top, 53.3vh);
  height: var(--sdh-chrome, 22px);
  align-items: flex-end;
  right: calc(var(--spotify-menu-right, 0px) + 16px);
  z-index: 201;
  display: flex;
  gap: 4px;
}
.sdh-tab {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 4px 12px 6px;
  border-radius: 7px 7px 0 0;
  background: #23252a;
  box-shadow: inset 0 0 0 1px #101114;
  color: #9aa0a8;
  font-family: 'Helvetica Neue', Arial, sans-serif; /* impeccable-disable-line overused-font -- hardware silkscreen face shared with the decks */
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  -webkit-tap-highlight-color: transparent;
}
.sdh-tab.is-on { background: #34373d; color: #ffd08a; }
/* A tripped deck lands here instead of white-screening the studio. */
.sdh-crash {
  position: fixed;
  top: calc(var(--spotify-menu-top, 53.3vh) + var(--sdh-chrome, 22px));
  left: calc(var(--spotify-menu-left, 0px) + var(--soundcraft-width, 95px) + 16px);
  right: calc(var(--spotify-menu-right, 0px) + 16px);
  bottom: calc(var(--spotify-menu-bottom, 0px) + 12px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  background: #17181c;
  box-shadow: inset 0 0 0 1px #101114;
  color: #e8e2d6;
  font-family: 'Helvetica Neue', Arial, sans-serif; /* impeccable-disable-line overused-font -- hardware silkscreen face shared with the decks */
  letter-spacing: 0.08em;
}
.sdh-crash b { font-size: 13px; color: #ffd08a; }
.sdh-crash-why {
  max-width: 70%;
  font-size: 10px;
  color: #9aa0a8;
  text-align: center;
  overflow-wrap: anywhere;
}
/* Inline variant: fills whatever container it crashed inside (mobile LCD). */
.sdh-crash-inline {
  position: static;
  min-height: 180px;
  border-radius: 8px;
}
.sdh-crash button {
  all: unset;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 7px;
  background: #34373d;
  box-shadow: inset 0 0 0 1px #101114;
  color: #ffd08a;
  font-size: 10px;
  font-weight: 800;
}
/* GENERATE SAMPLE PACK.
   Its own strip on the SAME line as the device tabs, spanning the deck's full
   footprint so `justify-content: center` puts the button dead centre over the
   sampler — the identical spot on every machine. The strip itself is inert;
   only the button takes the pointer, or this invisible band would eat clicks
   meant for whatever sits above the deck. */
.sdh-kitbar {
  position: fixed;
  top: var(--spotify-menu-top, 53.3vh);
  height: var(--sdh-chrome, 22px);
  /* The decks all share this footprint (see .srt-deck / .mpc2k / .smp-rack). */
  left: calc(var(--spotify-menu-left, 0px) + var(--soundcraft-width, 95px));
  right: var(--spotify-menu-right, 0px);
  z-index: 201;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.sdh-kitbar .sdh-kit {
  all: unset;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
  /* Holds its width so DIGGING… / PULLING 6/12 cannot make the button jump
     around under the cursor mid-build. */
  min-width: 190px;
  padding: 4px 16px 6px;
  border-radius: 7px 7px 0 0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.sdh-kitbar .sdh-kit.is-working { cursor: default; animation: sdh-kit-pulse 1.1s ease-in-out infinite; }
@keyframes sdh-kit-pulse { 50% { opacity: 0.62; } }
/* The device tabs hold the right end of this same line. Centring is measured
   on the DECK, so on a narrow window a full-size button reaches them — it
   gives up type before it gives up the middle. Below ~900px they would meet
   whatever we do, and the sampler is barely operable there anyway. */
@media (max-width: 1100px) {
  .sdh-kitbar .sdh-kit { min-width: 0; padding: 4px 10px 6px; font-size: 9.5px; letter-spacing: 0.02em; }
}
/* Every theme rule below is written as `.sdh-kitbar .sdh-kit-*` on purpose.
   Tailwind's preflight carries `button, [type="button"] { background: transparent }`
   — an attribute selector, so it TIES with a plain class and whichever sheet
   is injected last wins. A lazy deck chunk is enough to flip that order, and
   the losing side is a button with no face at all. Two classes cannot tie. */
/* NPC 2000 — a putty key off the same panel, ink lettering, and the machine's
   red as the pressed/working colour. */
.sdh-kitbar .sdh-kit-npc {
  background: linear-gradient(180deg, #dedbd1 0%, #c1bdb0 100%);
  box-shadow: inset 0 0 0 1px #8e8a7f, inset 0 -1px 0 rgba(255, 255, 255, 0.5);
  color: #2c2f35;
}
.sdh-kitbar .sdh-kit-npc:hover,
.sdh-kitbar .sdh-kit-npc.is-working { background: linear-gradient(180deg, #ebe8de 0%, #cfcbbe 100%); color: #b5342a; }
/* STUDIO — Serato's dark chip, lighting to its blue. */
.sdh-kitbar .sdh-kit-studio {
  background: #2f2f3b;
  box-shadow: inset 0 0 0 1px #4a4a5c;
  color: #e8e8ee;
}
.sdh-kitbar .sdh-kit-studio:hover,
.sdh-kitbar .sdh-kit-studio.is-working { background: #0a84ff; box-shadow: inset 0 0 0 1px #0a84ff; color: #fff; }
/* NSR-10 — the machine's black panel, lettered in the display's own tube
   green. At 11px on the strip it is legible where the old 7.5px dim-grey
   legend on the name plate was not. */
.sdh-kitbar .sdh-kit-nsr10 {
  border-radius: 3px 3px 0 0;
  background: #1b1c1f;
  box-shadow: inset 0 0 0 1px rgba(70, 240, 180, 0.45);
  color: #46f0b4;
  text-shadow: 0 0 7px rgba(70, 240, 180, 0.45);
}
.sdh-kitbar .sdh-kit-nsr10:hover,
.sdh-kitbar .sdh-kit-nsr10.is-working {
  background: rgba(70, 240, 180, 0.16);
  box-shadow: inset 0 0 0 1px #46f0b4;
}
/* SMPLR RACK — Live's flat device grey with the amber the rack lights in. */
.sdh-kitbar .sdh-kit-smplr {
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #565656 0%, #484848 100%);
  box-shadow: inset 0 0 0 1px #1f1f1f;
  color: #d8d8d8;
}
.sdh-kitbar .sdh-kit-smplr:hover,
.sdh-kitbar .sdh-kit-smplr.is-working { background: #ffa519; box-shadow: inset 0 0 0 1px #c47c00; color: #1f1f1f; }
/* ═══════════════════════════════════════════════════════════════════════════
   THE SAMPLERS, ON A PHONE
   ---------------------------------------------------------------------------
   Five machines share one slot: NPC 2000, STUDIO, SMPLR RACK, NP 1200 and the
   NSR-10. Every one of them is a WIDE object — an LCD beside a pad bank beside
   a browser — because every one of them is a picture of real hardware sitting
   on a desk. Dropped into a 390px-wide, 396px-tall band they all fail the same
   way: the columns squeeze until the pads are unhittable, and the bottom third
   (modes, params, the transport row) falls out of the box entirely.

   THE RULE THIS FILE FOLLOWS. A phone sampler needs four things and nothing
   else, which is exactly the brief:

       trigger  ·  adjust (pitch, start, end, loop, level)  ·  mode  ·  seq

   Browsing for sounds is NOT one of them. You arrive at a shared session with
   the host's kit already loaded; digging for new records is a desk job. So on
   every machine the browser column is removed outright, and the width it was
   holding goes to the pads.

   WHAT IS NOT DONE. Each machine keeps its own face — the NPC stays putty and
   ink, STUDIO stays dark, the rack stays flat grey. They are turned into one
   column each; they are not merged into a single generic pad screen. The
   machine you picked should still be the machine you are looking at.

   Scope: body[data-cp-mobile='true']. Widening this to the host's own phone
   studio is a one-line change to the selector, but the host's mobile layout
   has not been measured yet and is not this pass.
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-cp-mobile='true'] {
  /* The device tab strip is pinned to the bottom of the panel band and the
     SAMPLE PACK button to the top of it, so the machine itself gets what is
     left between them. Everything below sizes off this. */
  --smpm-kitbar: 20px;
  --smpm-devices: 30px;
  --smpm-deck-top: calc(var(--cpm-panel-top) + var(--smpm-kitbar));
  --smpm-deck-h: calc(var(--cpm-panel-h) - var(--smpm-kitbar) - var(--smpm-devices));
  /* The deck's height once the mixer has collapsed — which, on the sampler
     tab, is always. Kept as a named value because the other machines size
     their internals against it. */
  --smpm-deck-h-max: calc(var(--cpm-panel-h-max) - var(--smpm-kitbar) - var(--smpm-devices));
}

/* ── 0 · EVERY MACHINE ─────────────────────────────────────────────────────
   One box, one column, and it cannot leave the band. Written once against all
   five deck roots so a machine can never quietly grow past the tab bar again
   — which is how the NP 1200's pads and the NSR-10's keypad went missing. */
body[data-cp-mobile='true'] .mpc2k,
body[data-cp-mobile='true'] .srt-deck,
body[data-cp-mobile='true'] .smp-rack,
body[data-cp-mobile='true'] .sp12,
body[data-cp-mobile='true'] .nsr10 {
  top: var(--smpm-deck-top) !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--smpm-deck-h) !important;
  /* 12px at the foot, not 4: the bottom pad row's silkscreen legend sits
     under the pads and was landing hard against the device tab strip. */
  padding: 6px 8px 12px !important;
  border-radius: 0 !important;
  border-left: none !important;
  /* A MACHINE DOES NOT SCROLL. An earlier pass made the decks scrollable so
     the gesture could drive the mixer collapse — which worked, but meant you
     had to scroll a sampler before it was worth looking at, and left the
     bottom pad row under the tab strip until you did.

     The tab now opens collapsed (cp-mobile.css, `data-cp-tab='sampler'`), so
     the full height is there on arrival and every machine is laid out to
     exactly that height. A pad grid you have to scroll is not an instrument;
     you cannot play what you cannot see. */
  overflow: hidden;
}

/* THE BROWSER GOES. On every machine this is the column that exists to find
   new sounds, and finding sounds is not what a phone in a shared session is
   for. It is also the widest thing on each deck. */
body[data-cp-mobile='true'] .npc-rail,
body[data-cp-mobile='true'] .npc-browser,
body[data-cp-mobile='true'] .smp-browser,
body[data-cp-mobile='true'] .srt-browser,
body[data-cp-mobile='true'] .deck-browser { display: none !important; }

/* ── 1 · NPC 2000 ──────────────────────────────────────────────────────────
   The 12-pad machine, and the one a guest lands on. Its desk shape is
   LCD | pads | browser. On the phone the browser is gone and the other two
   stack, so the order down the screen is the order you work in:

       name → LCD (wave + the six numbers) → 12 pads → mode keys

   The LCD's EDIT page carries Pad · Ptch · Bar · Len · Gain · Rel, which is
   the whole "adjust" half of the brief already built and already drag-
   adjustable by touch (the fields set `touch-action: none`). Nothing new had
   to be invented for it — it only had to be made reachable. */
body[data-cp-mobile='true'] .npc-body {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  /* Fills the deck exactly — no overflow, nothing to scroll. The pad bank
     takes whatever the LCD and the key rows do not need (`flex: 1` below),
     so the whole of the collapse goes into pad size. */
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
/* Silkscreen header: the machine's name earns 18px, the paragraph of legend
   beside it does not. */
body[data-cp-mobile='true'] .mpc2k-rail {
  flex: 0 0 20px !important;
  height: 20px;
  gap: 8px;
  align-items: center;
}
body[data-cp-mobile='true'] .mpc2k-logo { font-size: 14px; line-height: 20px; }
body[data-cp-mobile='true'] .mpc2k-sub,
body[data-cp-mobile='true'] .mpc2k-brand { display: none !important; }

/* The glass. Fixed height so the pads below it are never the thing that gets
   squeezed — on a phone the pads are the instrument and everything else is
   labelling. */
/* ── THE 44px RULE, BECAUSE IT DECIDES THIS WHOLE FILE ─────────────────────
   themes/mobile-responsive.css:100 carries, under `max-width: 767px`:

       button, .btn, .fader-handle {
         min-height: 44px !important;
         min-width:  44px !important;
         padding:    0.75rem !important;
       }

   That is a good default and the reason it is here. It is also why every
   sampler collapses on a phone: a machine's silkscreen furniture — the NPC's
   five F-keys, its four mode keys, the SAMPLE PACK strip, STUDIO's chips —
   are all <button>, so each claimed 44px plus 24px of padding, and between
   them they left nothing for the pads. The SAMPLE PACK strip is the clearest
   case: a 20px bottom-aligned band whose button insisted on 44px, so it grew
   UPWARDS out of the band and landed on the play button.

   `!important` cannot be outbid by specificity, so the rows below set an
   explicit `height` and `min-height: 0 !important` instead. Every row that
   does so is a LEGEND or a MODE — read constantly, pressed rarely. The thing
   that keeps its full 44px is the PAD, which is the one control here you
   actually play, and which is what all the reclaimed height goes to. */

body[data-cp-mobile='true'] .mpc2k-left { flex: 0 0 auto !important; gap: 4px; }
/* 100, not 66. The phone lands on the EDIT page, and EDIT is a taller screen
   than MAIN: a waveform with its trim handles above two rows of readouts
   (Pad · Ptch · Bar / Len · Gain · Rel). Sized for MAIN it overflowed the
   deck by 5px and pushed the bottom pad row under the device tabs. */
body[data-cp-mobile='true'] .mpc2k-lcd-bezel { flex: 0 0 100px !important; padding: 3px; }
body[data-cp-mobile='true'] .npc-wave { min-height: 34px; }
/* Six numbers across three columns is two rows of readable type. Two rows of
   six would be 60px-wide cells, which is not enough for `Gain: 100`. */
body[data-cp-mobile='true'] .npc-fields { gap: 2px; }
body[data-cp-mobile='true'] .mpc2k-field {
  min-height: 26px;
  font-size: 11px;
}
/* F-keys pick the LCD page (MAIN · EDIT · SONGS · KITS · DO IT). They stay —
   EDIT is where the six numbers live, so this row is the way to the params —
   but they lose half their height. */
body[data-cp-mobile='true'] .mpc2k-fkeys {
  /* Pinned, not elastic. Left to itself this row took 44px — more than the
     glass it pages — because each F-key inherits the global button floor. */
  flex: 0 0 28px !important;
  gap: 3px;
  padding: 0 2px;
}
body[data-cp-mobile='true'] .mpc2k-fkey {
  min-height: 0 !important;
  height: 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}
/* The F-number keeps the machine's identity — it is silkscreened on the real
   panel — but shrinks to a hint above the word that actually says what the
   key does. */
body[data-cp-mobile='true'] .mpc2k-fkey-n { font-size: 6px; opacity: 0.5; letter-spacing: 0.08em; }
body[data-cp-mobile='true'] .mpc2k-fkey-l { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; }
/* The page you are on reads as a pressed key, so the row states where you
   are as well as where you can go. */
body[data-cp-mobile='true'] .mpc2k-fkey.is-on {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--putty-lo);
  color: var(--red);
}

/* THE PADS. They take every pixel the rest of the deck does not need. Four
   across is the machine's own bank layout and keeps each pad ~90px wide;
   three rows of ~52px clears the 44px touch floor with room for the LED and
   its legend underneath. */
body[data-cp-mobile='true'] .npc-padbank {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  /* 74px is the floor, `1fr` is the intent: with the tab opening collapsed
     the deck has ~544px, so after the name plate, the glass, the F-keys and
     the mode row the three rows land near 120px each. The floor only matters
     on a short phone, where the pads stay playable instead of vanishing. */
  grid-template-rows: repeat(3, minmax(74px, 1fr));
  /* Takes the slack, so every pixel the collapse buys goes to the pads rather
     than to the furniture around them. */
  flex: 1 1 auto;
  min-height: 0;
  gap: 4px 6px;
  padding: 0;
}
/* The desk pins pads square. Square at this width would be 90px tall and only
   two rows would fit, so on the phone they fill their cell instead. */
body[data-cp-mobile='true'] .npc-pad {
  aspect-ratio: auto !important;
  /* Not 100%: the pad's silkscreen legend and its LED sit UNDER the pad in
     the same cell, so a full-height pad pushed them down onto the row below
     and every legend read against the wrong pad. */
  height: calc(100% - 11px) !important;
  min-height: 0;
  padding: 2px;
}
body[data-cp-mobile='true'] .mpc2k-padcell { min-height: 0; justify-content: space-between; }
body[data-cp-mobile='true'] .mpc2k-pad-silk {
  font-size: 7px;
  line-height: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mode keys — LOOP · 1SHOT · GATE · P-PONG — are the "loop" half of the brief
   and stay a full four-across row. */
body[data-cp-mobile='true'] .npc-actions { flex: 0 0 auto; gap: 4px; padding: 4px; }
body[data-cp-mobile='true'] .npc-modes { gap: 4px; }
body[data-cp-mobile='true'] .npc-actions .mpc2k-key {
  min-height: 0 !important;
  height: 26px;
  padding: 0 4px;
  font-size: 9px;
}
/* RELEASE already has a number on the glass (Rel:), and a 14px range slider
   is not a control anyone hits with a thumb. */
body[data-cp-mobile='true'] .npc-release { display: none !important; }
/* The globals row goes too, and for a reason rather than for space: CHOP/PADS
   decides where a DROPPED RECORD lands, and the chop button next to it works
   on whatever the browser just handed you. With the browser gone from the
   phone there is nothing to drop and nothing to point it at. Keeping a switch
   that governs an action you cannot perform is worse than not having it. */
body[data-cp-mobile='true'] .npc-globals-row { display: none !important; }

/* The chrome around the machine — GENERATE SAMPLE PACK's line at the top of
   the band and the device tab strip at the bottom — is positioned in
   styles/cp-mobile.css, which owns every band boundary on the page. It is not
   restated here: two sheets setting the same geometry would be decided by
   whichever import happened to land last, and this one rides a lazy chunk. */


/* ── 2 · STUDIO ────────────────────────────────────────────────────────────
   Serato's machine is a DAW head: a topbar of seven control groups over
   rack | timeline | browser. Two things break it on a phone.

   The topbar wraps. It is `flex-wrap: wrap` with seven groups, which at 390px
   became EIGHT stacked rows — transport, quantise, voice, bars, project,
   scenes, tools — and between them they filled the entire deck. The machine
   rendered as nothing but its own settings; the rack and the timeline were
   pushed out of the box completely.

   So it stops wrapping and becomes one scrollable line, the way the global
   strip above the mixer does. Same idea, same reason: a row that admits it
   continues past the edge beats a row that silently stacks. */
body[data-cp-mobile='true'] .srt-topbar {
  flex: 0 0 40px !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start;
  gap: 10px;
  padding-bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
body[data-cp-mobile='true'] .srt-topbar::-webkit-scrollbar { display: none; }
body[data-cp-mobile='true'] .srt-grp { flex: 0 0 auto; }
body[data-cp-mobile='true'] .srt-topbar .srt-chip {
  min-height: 0 !important;
  height: 28px;
  padding: 0 9px;
}

/* Then the three columns become one. The rack is STUDIO's trigger surface —
   one sample per slot — so it takes the room, and the timeline keeps enough
   to show the wave and its steps. The browser is gone for the same reason it
   is gone everywhere else on the phone. */
body[data-cp-mobile='true'] .srt-main,
body[data-cp-mobile='true'] .srt-main-v3 {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
}
body[data-cp-mobile='true'] .srt-rack { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body[data-cp-mobile='true'] .srt-center { flex: 0 0 152px; }
/* The soundbar is wave + a 236px controls block side by side. At 390px that
   left the wave 140px; stacked, the wave gets the width and the controls sit
   under it. */
body[data-cp-mobile='true'] .srt-soundbar {
  flex: 0 0 96px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 1fr auto;
}
body[data-cp-mobile='true'] .srt-seq { flex: 0 0 auto; max-height: 50px; }

/* ── 3 · SMPLR RACK ────────────────────────────────────────────────────────
   Live's device view: a 230px chain list beside the device panel. The list is
   the trigger surface (Q W E R A S ... one key per chain), so on the phone it
   goes on top and takes the height, and the device — wave, modes, controls —
   sits under it as a fixed strip. Side by side at 390px the device panel was
   simply off the right edge. */
body[data-cp-mobile='true'] .smp-body {
  display: flex !important;
  flex-direction: column;
}
body[data-cp-mobile='true'] .smp-chains {
  flex: 1 1 auto;
  min-height: 0;
  border-right: none;
  border-bottom: 1px solid var(--smp-line);
}
/* One row per chain at the touch floor — this list IS the pads here. */
body[data-cp-mobile='true'] .smp-chain-key { min-height: 44px; }
body[data-cp-mobile='true'] .smp-device { flex: 0 0 150px; }
body[data-cp-mobile='true'] .smp-wave { flex: 1 1 auto; min-height: 56px; padding: 4px 8px; }
body[data-cp-mobile='true'] .smp-controls { flex: 0 0 72px !important; padding: 6px 8px; }
/* Four stacked mode rows in 72px is 18px each. Two by two keeps them
   pressable without taking height off the wave. */
body[data-cp-mobile='true'] .smp-modes {
  grid-template-rows: repeat(2, 1fr) !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}
body[data-cp-mobile='true'] .smp-titlebar { flex: 0 0 24px; }
/* STUDIO — Serato Studio's project model: a track rack with clip columns, a
   step grid whose rows are the selected track's chops, and a sound panel.
   Near-black stage, one hue per track. Same footprint as the other decks. */

.srt-deck {
  --srt-bg: #141419;
  --srt-panel: #1d1d24;
  --srt-panel-hi: #24242d;
  --srt-line: #2a2a33;
  --srt-text: #e8e8ee;
  --srt-dim: #7c7c88;
  position: fixed;
  /* The band's top is the mixer's bottom; this deck starts one chrome strip
     lower because .sdh-switch / .sdh-kitbar own that strip. */
  top: calc(var(--spotify-menu-top, 53.3vh) + var(--sdh-chrome, 22px));
  bottom: var(--spotify-menu-bottom, 0px);
  left: calc(var(--spotify-menu-left, 0px) + var(--soundcraft-width, 95px));
  right: var(--spotify-menu-right, 0px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 8px 12px 10px;
  border-top-left-radius: 12px;
  background: var(--srt-bg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  font-family: 'Helvetica Neue', Arial, sans-serif; /* impeccable-disable-line overused-font -- matches the referenced product's UI face */
  color: var(--srt-text);
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

/* -- top bar ---------------------------------------------------------------- */
/* One row of evenly-spaced chips gave every control the same weight, so nothing
   grouped and nothing led. The bar is now SECTIONS: 3px inside a section, a
   hairline and 20px between them. Sections wrap whole rather than spilling
   controls, so a narrow deck never orphans a button from its label. */
.srt-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  row-gap: 6px;
  padding-bottom: 7px;
  /* Spare width goes BETWEEN the sections instead of pooling in one gap before
     the tools. The seams then sit in real space and the row uses its full
     length, which is the whole point of having sections. */
  justify-content: space-between;
}
.srt-logo { font-size: 14px; font-weight: 900; font-style: italic; letter-spacing: 0.12em; }
.srt-grp {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  /* 4px inside the seam against 3px between siblings still reads as a break
     because the hairline does the separating — spending more here pushed the
     tools group onto a second row, which costs the deck 34px of height. */
  padding: 0 4px;
  /* Hairline between jobs. Exactly 1px and neutral — a panel seam, not trim. */
  border-left: 1px solid var(--srt-line);
}
/* The logo already separates it; a seam right after it would read as clutter. */
.srt-grp-transport { border-left: 0; padding-left: 6px; }
/* Section captions are one system: the group labels and the SCENE / BAR
   captions that were already here. --srt-dim lands at 4.45:1 against the bar,
   which is under the floor for 8px type, so captions in this row get their own
   slightly brighter neutral rather than shifting the deck-wide token. */
.srt-grp-label,
.srt-topbar .srt-scenes-master > b,
.srt-topbar .srt-bars small {
  color: #92929c;
}
.srt-grp-label {
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-right: 3px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* A section's label wears the colour its controls light up in, so the row can
   be read before anything is switched on. */
.srt-grp-take .srt-grp-label { color: #c2635c; }
.srt-grp-voice .srt-grp-label { color: #4f9fb0; }
/* space-between already carries the tools to the right edge; an auto margin on
   top of it would swallow all the slack again and re-bunch the middle. */
.srt-grp-tools { margin-left: 0; }

/* Controls whose LABEL changes with their state reserve the width of their
   longest word, so toggling MONO->POLY or REPITCH->STRETCH cannot shove the
   neighbouring sections around. A control that moves when you press it makes
   the next press a guess. */
.srt-chip.srt-mode {
  display: inline-flex;
  justify-content: center;
  /* Measured, not guessed: STRETCH is the widest of the four labels at 46.4px
     of text plus 18px of padding = 64.4px. 68 clears it with room for the font
     to render slightly wider before it falls back to the webfont. */
  min-width: 68px;
}
.srt-play {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 6px 13px;
  border-radius: 5px;
  background: var(--srt-panel-hi);
  box-shadow: inset 0 0 0 1px var(--srt-line);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--srt-text);
  -webkit-tap-highlight-color: transparent;
}
.srt-play.is-on { background: #0a84ff; box-shadow: 0 0 14px rgba(10, 132, 255, 0.45); color: #fff; }
/* Must follow the block above: that one re-declares `all: unset`, which would
   otherwise wipe these. PLAY and STOP are different lengths, and the transport
   must not change width when you start the sequencer. */
.srt-play {
  display: inline-flex;
  justify-content: center;
  min-width: 74px;
}
.srt-bpm {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 5px 10px;
  border-radius: 5px;
  background: var(--srt-panel-hi);
  box-shadow: inset 0 0 0 1px var(--srt-line);
  font-size: 13px;
  font-weight: 900;
  cursor: ns-resize;
  touch-action: none;
}
.srt-bpm small { font-size: 8px; color: var(--srt-dim); letter-spacing: 0.1em; }
.srt-meta { font-size: 10px; font-weight: 700; color: var(--srt-dim); white-space: nowrap; }
.srt-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--srt-dim);
}
.srt-chip {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 5px;
  background: var(--srt-panel-hi);
  box-shadow: inset 0 0 0 1px var(--srt-line);
  font-size: 10px;
  font-weight: 800;
  color: var(--srt-text);
  -webkit-tap-highlight-color: transparent;
}
.srt-chip:disabled { opacity: 0.4; cursor: default; }

.srt-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 216px;
  gap: 9px;
}

/* -- track rack (clip matrix) ---------------------------------------------- */
.srt-rack { display: flex; flex-direction: column; min-height: 0; gap: 4px; }
.srt-rack-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--srt-dim);
}
.srt-rack-scenes { display: grid; grid-template-columns: repeat(8, 13px); gap: 2px; }
.srt-allscene {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  border-radius: 2px;
  background: var(--srt-panel);
  font-size: 8px;
  font-weight: 800;
  color: var(--srt-dim);
  -webkit-tap-highlight-color: transparent;
}
.srt-allscene:hover { color: var(--srt-text); background: var(--srt-panel-hi); }

.srt-rack-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; scrollbar-width: thin; }
.srt-trk {
  flex: 1;
  min-height: 20px;
  display: grid;
  /* pick | meter | M | S (loading = tap the slot, or drop anything on it) */
  grid-template-columns: minmax(0, 1fr) 7px 17px 17px;
  align-items: stretch;
  gap: 2px;
}
/* Live level per track — a thin bar climbing from the row's floor. */
.srt-trk-meter {
  position: relative;
  display: block;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.srt-trk-meter b {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, var(--row, #32d74b), #ffd60a);
  transition: height 70ms linear;
}
.srt-trk-pick {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--srt-panel);
  -webkit-tap-highlight-color: transparent;
}
.srt-trk.is-sel .srt-trk-pick { background: color-mix(in srgb, var(--row) 26%, var(--srt-panel)); box-shadow: inset 0 0 0 1px var(--row); }
.srt-swatch { width: 7px; height: 7px; border-radius: 2px; background: var(--row); flex: 0 0 auto; }
.srt-trk-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 700;
}
.srt-trk:not(.is-sel) .srt-trk-name { color: #b9b9c4; }
.srt-trk-idle { font-style: normal; font-size: 9px; color: var(--srt-dim); }
.srt-trk-mute, .srt-trk-solo, .srt-trk-load {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: var(--srt-panel);
  font-size: 8px;
  font-weight: 800;
  color: var(--srt-dim);
  -webkit-tap-highlight-color: transparent;
}
.srt-trk.is-muted .srt-trk-mute { background: #ff9f0a; color: #1b1b1f; }
.srt-trk.is-muted .srt-trk-pick { opacity: 0.5; }
.srt-trk.is-solo .srt-trk-solo { background: #32d74b; color: #1b1b1f; }

/* Transport toggles: REC burns red while armed; QUANT/OVDUB light up on.
   ARMED IS NOT RECORDING, so it does not pulse. A key that throbs while it is
   merely ready teaches you to ignore the throb, which is the one signal that
   has to mean something when a take really is going down. Red fill still says
   plainly that it is on. */
.srt-chip.srt-rec.is-on {
  background: #ff453a;
  color: #fff;
}
.srt-chip.srt-rec.is-recording {
  animation: srt-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes srt-rec-pulse {
  50% { box-shadow: 0 0 10px 1px rgba(255, 69, 58, 0.8); }
}
.srt-chip.srt-tgl.is-on { background: var(--srt-panel-hi); color: #ffd60a; }
/* VOICE toggles are standing settings, not part of a take, so they light in
   their own colour. Both read as "engaged" without reading as the same thing.
   Unlit keeps full-strength text — MONO and REPITCH are real states you must be
   able to read at a glance, not absences. */
.srt-chip.srt-mode.is-on {
  background: var(--srt-panel-hi);
  color: #40c8e0;
  box-shadow: inset 0 0 0 1px rgba(64, 200, 224, 0.55);
}
/* Destructive controls stay quiet until reached for — CLEAR wipes a pattern and
   PANIC kills every voice, and neither should shout during a performance. */
.srt-chip.srt-danger:hover:not(:disabled) { color: #ff6b61; box-shadow: inset 0 0 0 1px rgba(255, 69, 58, 0.5); }
.srt-chip.srt-close { padding: 6px 9px; color: var(--srt-dim); }
.srt-chip.srt-close:hover { color: var(--srt-text); }
/* Transport leads the row: it is the one control the eye should find first. */
.srt-play { font-size: 11.5px; padding: 7px 13px; }
/* The row has to hold seven sections on one line — a wrap here costs the deck
   34px of working height. Chips give back a pixel each side to pay for the
   labels and seams that make the sections legible. */
.srt-topbar .srt-chip { padding: 6px 9px; }

/* Scene loop length: 1 / 2 / 4 / 8 bars, one setting per scene. */
.srt-bars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.srt-bars small { font-size: 8px; font-weight: 800; color: var(--srt-dim); margin-left: 2px; }
.srt-bar-chip {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  min-width: 16px;
  padding: 3px 4px;
  border-radius: 3px;
  background: var(--srt-panel);
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--srt-dim);
  -webkit-tap-highlight-color: transparent;
}
.srt-bar-chip.is-on { background: var(--srt-panel-hi); color: #ffd60a; }

/* Long scenes scroll sideways; the key column stays pinned. */
.srt-seq { overflow-x: auto; scrollbar-width: thin; }
.srt-head { position: sticky; left: 0; z-index: 2; }

.srt-clips { display: grid; grid-template-columns: repeat(8, 13px); gap: 2px; }
.srt-clip {
  all: unset;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  border-radius: 2px;
  background: #1a1a21;
  box-shadow: inset 0 0 0 1px var(--srt-line);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.srt-clip.has-notes { background: color-mix(in srgb, var(--row) 42%, #1a1a21); }
.srt-clip.is-playing { box-shadow: inset 0 0 0 1px #fff; }
/* Queued clip blinks until the bar line hands it over. */
.srt-clip.is-queued { animation: srt-queue 0.5s steps(2, end) infinite; }
@keyframes srt-queue {
  0% { box-shadow: inset 0 0 0 1px var(--row); }
  100% { box-shadow: inset 0 0 0 1px transparent; }
}
.srt-clip-progress {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

/* -- step grid -------------------------------------------------------------- */
.srt-seq { display: flex; flex-direction: column; min-height: 0; min-width: 0; gap: 4px; }
.srt-seq-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--srt-panel);
  font-size: 10px;
  font-weight: 700;
}
.srt-seq-scene { margin-left: auto; font-size: 8px; letter-spacing: 0.14em; color: var(--srt-dim); }
.srt-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.srt-row {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 2px;
}
.srt-head {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--srt-panel);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.srt-row.is-sel .srt-head { box-shadow: inset 0 0 0 1px var(--row); }
.srt-head.is-on { background: color-mix(in srgb, var(--row) 34%, var(--srt-panel)); }
.srt-head b { font-size: 9px; color: var(--row); }
.srt-head-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  color: var(--srt-dim);
}

.srt-cell {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 2px;
  background: var(--srt-panel);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.srt-cell.is-beat { background: var(--srt-panel-hi); }
/* A note spans its length, so a long note reads as one bar, not four blips. */
.srt-cell.is-on { background: var(--row); box-shadow: 0 0 7px color-mix(in srgb, var(--row) 50%, transparent); }
.srt-cell.is-tail { display: none; }
.srt-cell.is-drag { background: color-mix(in srgb, var(--row) 55%, var(--srt-panel)); }
.srt-cell.is-play { outline: 1px solid rgba(255, 255, 255, 0.65); outline-offset: -1px; }
.srt-cell.is-play.is-on { filter: brightness(1.3); }

/* -- sound panel ------------------------------------------------------------ */
.srt-sound { display: flex; flex-direction: column; gap: 5px; min-height: 0; min-width: 0; }
.srt-sound-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--srt-panel);
  font-size: 10px;
  font-weight: 700;
}
.srt-sound-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srt-sound-title b { margin-left: auto; color: var(--srt-dim); }
.srt-sound-wave {
  position: relative;
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 5px;
  border-radius: 4px;
  background: #101015;
  overflow: hidden;
  touch-action: none;
}
.srt-sound-wave > i { flex: 1; min-width: 1px; border-radius: 1px; background: #3f6f8f; pointer-events: none; }
.srt-wave-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; color: var(--srt-dim); }
.srt-sound-slice {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--row) 18%, transparent);
  border-left: 2px solid var(--row);
  border-right: 2px solid var(--row);
  cursor: grab;
}
.srt-sound-slice:active { cursor: grabbing; }
.srt-hdl { position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize; }
.srt-hdl-l { left: -7px; }
.srt-hdl-r { right: -7px; }

.srt-modes { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.srt-mode {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 5px 0;
  text-align: center;
  border-radius: 4px;
  background: var(--srt-panel);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--srt-dim);
  -webkit-tap-highlight-color: transparent;
}
.srt-mode.is-on { background: var(--row); color: #14141a; }

.srt-sound-params { flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.srt-val {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 0;
  border-radius: 4px;
  background: var(--srt-panel);
  cursor: ns-resize;
  touch-action: none;
}
.srt-val small { font-size: 7px; letter-spacing: 0.1em; color: var(--srt-dim); }
.srt-val strong { font-size: 11px; font-weight: 800; }

/* -- sample picker ---------------------------------------------------------- */
.srt-picker {
  position: absolute;
  inset: 34px 12px 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: #16161c;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), inset 0 0 0 1px var(--srt-line);
  overflow: hidden;
}
.srt-picker-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--srt-line);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.srt-picker-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.srt-picker-row {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #1d1d24;
  -webkit-tap-highlight-color: transparent;
}
.srt-picker-row:hover { background: var(--srt-panel); }
.srt-picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.srt-picker-meta { flex: 0 0 auto; font-size: 10px; color: var(--srt-dim); }
.srt-picker-empty { padding: 20px; text-align: center; font-size: 10px; color: var(--srt-dim); }

/* ==================== v3: wave above grid, shelf on the right ============== */
.srt-main-v3 { grid-template-columns: 252px minmax(0, 1fr) 340px; }
.srt-center { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
.srt-soundbar {
  flex: 0 0 108px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 6px;
  min-height: 0;
}
.srt-wave-top { min-height: 0; }
.srt-soundbar-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.srt-soundbar-side .srt-sound-params { grid-template-columns: repeat(5, 1fr); }
.srt-seq { flex: 1; }
.srt-row { min-height: 16px; }

.srt-shelf { display: flex; flex-direction: column; gap: 5px; min-height: 0; min-width: 0; }
.srt-shelf-tabs { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }
.srt-shelf-tab.is-on { background: #0a84ff; color: #fff; }
.srt-loadhint { font-size: 9px; font-weight: 800; color: #ff9f0a; letter-spacing: 0.08em; }
.srt-lib {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  background: #16161c;
  box-shadow: inset 0 0 0 1px var(--srt-line);
  scrollbar-width: thin;
}
.srt-browser {
  flex: 1;
  min-height: 0;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--srt-line);
}
.srt-browser .sample-suggestor-overlay {
  position: absolute;
  inset: 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
}
.srt-browser .sample-suggestor-modal {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  background: #16161c;
  box-shadow: none;
  border: 0;
}
.srt-browser .ss-header { padding: 4px 8px; }
.srt-browser .ss-header-emoji, .srt-browser .ss-header-sub, .srt-browser .ss-close { display: none; }
.srt-browser .ss-chiprow, .srt-browser .ss-chiprow-sticky { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding: 4px 6px; }
.srt-browser .ss-chip { flex: 0 0 auto; padding: 4px 8px; font-size: 10px; }
.srt-browser .ss-body { padding: 5px; }
/* Card + artist-tile layout lives in BrowserEmbed.css (picture tiles: the art
   IS the button). The old row-card overrides that used to sit here fought it
   at equal specificity, so whichever stylesheet happened to be bundled last
   won — that is how the thumbnails kept shrinking back to 40px chips. */

/* =================== v4: master scene, search, zoom, wider rack ============ */
.srt-scenes-master { display: inline-flex; align-items: center; gap: 3px; }
.srt-scenes-master > b { font-size: 8px; font-weight: 800; letter-spacing: 0.14em; color: var(--srt-dim); margin-right: 2px; }
.srt-mscene {
  all: unset;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  width: 22px;
  padding: 5px 0 6px;
  text-align: center;
  border-radius: 4px;
  background: var(--srt-panel-hi);
  box-shadow: inset 0 0 0 1px var(--srt-line);
  font-size: 10px;
  font-weight: 800;
  color: var(--srt-dim);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.srt-mscene.is-on { background: #0a84ff; color: #fff; }
.srt-mscene.is-queued { animation: srt-queue 0.5s steps(2, end) infinite; }
.srt-mscene-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  transform-origin: left center;
  background: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}
/* Sounding but not the selected track's scene: white-on-dark reads as noise,
   so the bar takes the accent and the button gets a faint ring — you can see
   which scene owns the bar even when you are editing another one. */
.srt-mscene.is-playing:not(.is-on) { color: var(--srt-text); box-shadow: inset 0 0 0 1px #0a84ff; }
.srt-mscene.is-playing:not(.is-on) .srt-mscene-progress { background: #0a84ff; }

/* Rack rows: clips gone, name/M/LOAD get the width. */
.srt-trk { grid-template-columns: minmax(0, 1fr) 7px 17px 17px; }
.srt-trk-name { font-size: 11px; }
.srt-trk-mute, .srt-trk-solo, .srt-trk-load { font-size: 9px; }

/* Wave zoom + click affordance */
.srt-wave-top { cursor: crosshair; }
.srt-zoom {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 3;
  display: flex;
  gap: 3px;
}
.srt-zoom button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 18px;
  padding: 2px 0;
  text-align: center;
  border-radius: 3px;
  background: rgba(20, 20, 26, 0.75);
  color: var(--srt-text);
  font-size: 11px;
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
}

/* Chop preset picker */
.srt-choppick {
  width: 100%;
  padding: 4px 6px;
  border: 0;
  border-radius: 4px;
  background: var(--srt-panel);
  box-shadow: inset 0 0 0 1px var(--srt-line);
  color: var(--srt-text);
  font-size: 10px;
  font-weight: 700;
}

/* Library search */
.srt-lib-search {
  all: unset;
  box-sizing: border-box;
  margin: 6px;
  padding: 6px 9px;
  border-radius: 4px;
  background: var(--srt-panel);
  box-shadow: inset 0 0 0 1px var(--srt-line);
  color: var(--srt-text);
  font-size: 11px;
}
.srt-lib-search::-moz-placeholder { color: var(--srt-dim); }
.srt-lib-search::placeholder { color: var(--srt-dim); }
.srt-picker-row { cursor: grab; }
.srt-picker-row:active { cursor: grabbing; }

/* ============ v5: loop control cluster + a truer waveform ================== */
.srt-loopctl { display: grid; grid-template-columns: auto 1fr auto; gap: 4px; align-items: stretch; }
.srt-loop-toggle { min-width: 62px; }
.srt-loop-toggle.is-on { background: #0a84ff; color: #fff; }
.srt-loop-radios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.srt-loop-radios .srt-mode:disabled { opacity: 0.35; cursor: default; }
.srt-trig-toggle { min-width: 52px; background: var(--srt-panel-hi); }
.srt-loopctl .srt-choppick { grid-column: 1 / -1; }

/* Traditional wave: hundreds of hairline bars mirrored around the centre. */
.srt-sound-wave { gap: 0; }
.srt-sound-wave > i { min-width: 0; border-radius: 0; opacity: 0.9; }

/* v6: start-anchored zoom, view-level playhead, draggable library rows. */
.srt-playhead { z-index: 6; width: 3px; }

/* A fresh record on the rows: key buttons pulse until the first audition. */
@keyframes srt-fresh-blink {
  0%, 100% { box-shadow: inset 0 0 0 1px transparent; }
  50% { box-shadow: inset 0 0 0 1px var(--row, #0a84ff), 0 0 10px 1px var(--row, #0a84ff); }
}
.srt-head.is-fresh { animation: srt-fresh-blink 1.1s ease-in-out infinite; }
.srt-picker-row { -webkit-user-drag: element; -webkit-user-select: none; -moz-user-select: none; user-select: none; }


/* ============ v6: note bars, wave-bottom title, centered scenes ============ */
.srt-lane {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 2px;
}
/* Notes are BARS riding over the cells: drag the body to move, the edges to
   trim (end is unsnapped unless QUANT is lit), click to delete. */
.srt-note {
  position: absolute;
  top: 12%;
  height: 76%;
  border-radius: 3px;
  background: var(--row, #0a84ff);
  box-shadow: 0 0 7px color-mix(in srgb, var(--row, #0a84ff) 50%, transparent);
  cursor: grab;
  /* ABOVE THE CELLS — 26, not 2.
     `themes/mixer-z-index.css` carries a global
     `button, .button, .control … { position: relative; z-index: 25 !important }`
     and every step in this lane is a <button>, so the cells were painting on
     top of the note bars: the note was rendered, correctly sized, and
     invisible. It also meant the cell, not the note, took the pointer — which
     is why notes could not be dragged or trimmed either, only erased.
     Raising this clears both. */
  z-index: 26;
}
.srt-note:active { cursor: grabbing; }
.srt-note-hdl {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: ew-resize;
}
.srt-note-l { left: -2px; border-radius: 3px 0 0 3px; }
.srt-note-r { right: -2px; border-radius: 0 3px 3px 0; }
.srt-note-hdl:hover { background: rgba(255, 255, 255, 0.35); }

/* Filename lives at the wave's foot now — the topbar space went to the
   scene strip. */
.srt-wave-title {
  position: absolute;
  left: 6px;
  bottom: 3px;
  z-index: 5;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(10, 10, 14, 0.72);
  font-size: 9px;
  font-weight: 700;
  color: var(--srt-text);
  pointer-events: none;
}
/* Was centred with auto margins on both sides. Now that the bar is sectioned
   and the tools group claims the right edge, the scene launcher just takes its
   place in the reading order — two competing auto margins only fought over the
   leftover space and moved the launcher every time a label changed width. */
.srt-scenes-master { margin-left: 0; margin-right: 0; }

/* ==================== Library rows: audition first ========================= */
/* A click on a row PREVIEWS the record now, so the row needs a play marker and
   the destructive/committing actions need their own targets. LOAD and delete
   only appear on hover or while a row is playing — the list stays a list. */
.srt-picker-play {
  flex: 0 0 auto;
  width: 14px;
  font-size: 8px;
  color: var(--srt-dim);
}
.srt-picker-play.is-on { color: #32d74b; }
.srt-picker-act {
  all: unset;
  box-sizing: border-box;
  flex: 0 0 auto;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--srt-panel-hi);
  box-shadow: inset 0 0 0 1px var(--srt-line);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--srt-text);
  opacity: 0;
}
.srt-picker-row:hover .srt-picker-act,
.srt-picker-row:focus-within .srt-picker-act { opacity: 1; }
.srt-picker-act:hover { background: #2a2a34; }
.srt-picker-del:hover { color: #ff6b61; box-shadow: inset 0 0 0 1px rgba(255, 69, 58, 0.5); }
/* Touch has no hover: there the keys are always visible. */
@media (hover: none) {
  .srt-picker-act { opacity: 1; }
}

/* ==================== SAVE / LOAD shelf =================================== */
.srt-files {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  background: #16161c;
  box-shadow: inset 0 0 0 1px var(--srt-line);
}
.srt-files-save { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.srt-files-savebtns { display: flex; gap: 6px; }
.srt-files-savebtns .srt-chip { flex: 1; text-align: center; }
.srt-files-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 8px 4px;
  border-top: 1px solid var(--srt-line);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #92929c;
}
.srt-files-head small { font-size: 8px; font-weight: 700; letter-spacing: 0; color: var(--srt-dim); text-transform: none; }
.srt-file-row { cursor: default; }
.srt-file-row:active { cursor: default; }

/* Quantize division: only meaningful while QUANT is lit, so it dims rather
   than vanishing — a control that disappears takes the row's spacing with it. */
.srt-qdiv { display: inline-flex; align-items: center; gap: 2px; }
.srt-qdiv.is-off { opacity: 0.4; }
.srt-qdiv-chip {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  min-width: 22px;
  padding: 5px 4px;
  border-radius: 4px;
  text-align: center;
  background: var(--srt-panel);
  font-size: 8px;
  font-weight: 800;
  color: var(--srt-dim);
  -webkit-tap-highlight-color: transparent;
}
.srt-qdiv-chip.is-on { background: var(--srt-panel-hi); color: #ffd60a; box-shadow: inset 0 0 0 1px rgba(255, 214, 10, 0.45); }

/* ==================== Drag targets: say where it can land ================== */
/* While anything is being dragged, every slot that accepts it shows a quiet
   dashed edge — you can see the whole board's landing zones at a glance. */
body.nspire-dragging .srt-trk .srt-trk-pick,
body.nspire-dragging .srt-sound-wave {
  box-shadow: inset 0 0 0 1px rgba(255, 201, 63, 0.34);
}
/* The one you are actually over lights up in the track's own colour and lifts,
   so "where will this land" is never a guess. Selection follows the pointer,
   so this is also a preview of which track you are about to edit. */
.srt-trk.is-drop-hot .srt-trk-pick {
  background: color-mix(in srgb, var(--row) 34%, var(--srt-panel));
  box-shadow: inset 0 0 0 2px var(--row), 0 0 14px color-mix(in srgb, var(--row) 45%, transparent);
}
.srt-trk.is-drop-hot .srt-trk-name { color: #fff; }
.srt-sound-wave.is-drop-hot {
  box-shadow: inset 0 0 0 2px var(--row, #ffc93f), 0 0 18px rgba(255, 201, 63, 0.3);
}

/* A note that keeps sounding past the step you played: solid head = what you
   played, fading tail = it is still ringing. Without this a one-shot slice
   that runs for bars either drew as a one-cell blip (wrong) or as a solid
   block claiming the whole bar (also wrong). */
.srt-note.is-ring {
  background: linear-gradient(
    90deg,
    var(--row, #0a84ff) 0,
    var(--row, #0a84ff) 14px,
    color-mix(in srgb, var(--row, #0a84ff) 55%, transparent) 42%,
    color-mix(in srgb, var(--row, #0a84ff) 12%, transparent) 100%
  );
  box-shadow: none;
}
/* The head keeps a hard edge so the note's START is never ambiguous. */
.srt-note.is-ring::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  border-radius: 3px 0 0 3px;
  background: var(--row, #0a84ff);
}
/* SMPLR RACK — Ableton Live device grammar: flat gray device chrome, the
   amber-on-black sample display with start/end flags, drag-value number
   boxes, and a drum-rack chain list on the left. Same footprint as the
   other decks. */

.smp-rack {
  --smp-bg: #3c3c3c;
  --smp-device: #4a4a4a;
  --smp-panel: #2b2b2b;
  --smp-line: #1f1f1f;
  --smp-text: #d8d8d8;
  --smp-dim: #9a9a9a;
  --smp-amber: #ffa519;
  position: fixed;
  /* The band's top is the mixer's bottom; this deck starts one chrome strip
     lower because .sdh-switch / .sdh-kitbar own that strip. */
  top: calc(var(--spotify-menu-top, 53.3vh) + var(--sdh-chrome, 22px));
  bottom: var(--spotify-menu-bottom, 0px);
  left: calc(var(--spotify-menu-left, 0px) + var(--soundcraft-width, 95px));
  right: var(--spotify-menu-right, 0px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 12px;
  overflow: hidden;
  background: var(--smp-bg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  font-family: Arial, 'Helvetica Neue', sans-serif; /* impeccable-disable-line overused-font -- matches the referenced product's UI face */
  font-size: 11px;
  color: var(--smp-text);
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

.smp-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(#565656, #484848);
  border-bottom: 1px solid var(--smp-line);
}
.smp-ondot { width: 9px; height: 9px; border-radius: 50%; background: var(--smp-amber); box-shadow: 0 0 5px rgba(255, 165, 25, 0.7); }
.smp-title { font-weight: 700; }
.smp-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--smp-dim); }
.smp-chip {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 2px;
  background: var(--smp-panel);
  box-shadow: inset 0 0 0 1px var(--smp-line);
  color: var(--smp-text);
  -webkit-tap-highlight-color: transparent;
}
.smp-chip:disabled { opacity: 0.4; cursor: default; }

.smp-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
}

/* Chain list */
.smp-chains {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  background: var(--smp-panel);
  border-right: 1px solid var(--smp-line);
  scrollbar-width: thin;
}
.smp-chain {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: 1;
  min-height: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--smp-line);
  color: var(--smp-text);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.smp-chain.is-sel { background: var(--smp-device); }
.smp-chain.is-on { background: color-mix(in srgb, var(--smp-amber) 22%, var(--smp-panel)); color: #fff; }
.smp-chain-key { width: 14px; font-weight: 700; color: var(--smp-dim); }
.smp-chain.is-sel .smp-chain-key { color: var(--smp-amber); }
.smp-chain-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smp-chain-mode { font-size: 9px; color: var(--smp-dim); }

/* Device */
.smp-device { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.smp-device-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--smp-device);
  border-bottom: 1px solid var(--smp-line);
}
.smp-device-title em { font-style: italic; font-weight: 700; }
.smp-device-chain { color: var(--smp-dim); }

.smp-wave {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 8px 10px;
  background: #191919;
  overflow: hidden;
  touch-action: none;
}
.smp-wave i { flex: 1; min-width: 1px; background: var(--smp-amber); opacity: 0.85; border-radius: 1px; pointer-events: none; }
.smp-wave-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--smp-dim); }
.smp-slice {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(255, 165, 25, 0.13);
  border-left: 1px solid var(--smp-amber);
  border-right: 1px solid var(--smp-amber);
  cursor: grab;
}
.smp-slice:active { cursor: grabbing; }
.smp-flag {
  position: absolute;
  top: 0;
  width: 12px;
  bottom: 0;
  cursor: ew-resize;
}
.smp-flag::before {
  content: '';
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  background: var(--smp-amber);
}
.smp-flag-l { left: -6px; }
.smp-flag-l::before { left: 2px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.smp-flag-r { right: -6px; }
.smp-flag-r::before { right: 2px; clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* Controls */
.smp-controls {
  flex: 0 0 84px;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px;
  background: var(--smp-device);
  border-top: 1px solid var(--smp-line);
}
.smp-modes { display: grid; grid-template-rows: repeat(4, 1fr); gap: 3px; }
.smp-mode {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 2px;
  background: var(--smp-panel);
  box-shadow: inset 0 0 0 1px var(--smp-line);
  font-size: 10px;
  color: var(--smp-text);
  -webkit-tap-highlight-color: transparent;
}
.smp-mode.is-on { background: var(--smp-amber); color: #1c1c1c; font-weight: 700; }
.smp-value {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 2px;
  background: var(--smp-panel);
  box-shadow: inset 0 0 0 1px var(--smp-line);
  cursor: ns-resize;
  touch-action: none;
}
.smp-value small { font-size: 9px; color: var(--smp-dim); }
.smp-value strong { font-size: 12px; font-weight: 700; color: var(--smp-amber); }
.smp-empty-note { align-items: center; justify-content: center; color: var(--smp-dim); }

/* A fresh record in the rack: chains pulse amber until the first audition. */
@keyframes smp-fresh-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 170, 60, 0); }
  50% { box-shadow: inset 0 0 0 1px var(--smp-amber), 0 0 10px 1px rgba(255, 170, 60, 0.6); }
}
.smp-chain.is-fresh { animation: smp-fresh-blink 1.1s ease-in-out infinite; }

/* ===========================================================================
   THE BROWSER, in Live's clothes.

   Layout comes from BrowserEmbed.css (the `npc-browser` class) so card sizes,
   the globe and the artist wall stay defined in one place. Everything here is
   MATERIAL: Live's browser is flat grey with square corners, a hairline rule
   between rows, and amber only where something is selected or live. The stock
   embed is a dark neon panel, which would read as a different application
   bolted onto the side of the device.
   =========================================================================== */
.smp-body.has-browser { grid-template-columns: 250px 230px minmax(0, 1fr); }

.smp-browser {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--smp-panel);
  border-right: 1px solid var(--smp-line);
}
/* The suggestor paints its own dark slab; the device supplies the surface. */
.smp-browser .sample-suggestor-overlay,
.smp-browser .sample-suggestor-modal,
.smp-browser .ss-body,
.smp-browser .ss-tab-panel { background: transparent; }
.smp-browser .sample-suggestor-modal { border: 0; box-shadow: none; }

/* Live's browser header: a flat strip of square tabs, the live one amber. */
.smp-browser .ss-tabs {
  background: linear-gradient(#565656, #484848);
  border-bottom: 1px solid var(--smp-line);
  padding: 0;
  gap: 0;
  /* Five tabs do not fit across a 250px sidebar — unwrapped they overlapped
     into each other. Live stacks its browser labels; these wrap onto a second
     row rather than shrinking to unreadable. */
  flex-wrap: wrap;
}
.smp-browser .ss-tab-btn {
  border-radius: 0;
  padding: 4px 7px;
  font-family: Arial, 'Helvetica Neue', sans-serif; /* impeccable-disable-line overused-font -- matches the referenced product's UI face */
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--smp-dim);
  border-right: 1px solid var(--smp-line);
}
.smp-browser .ss-tab-btn.active { background: var(--smp-device); color: var(--smp-text); }
/* The underline is a neon bar in the stock skin — Live marks the live tab by
   its surface, so the bar becomes a thin amber seat instead. */
.smp-browser .ss-tab-underline { background: var(--smp-amber); height: 2px; }

/* Square everything. Live has no pills. */
.smp-browser .ss-chip,
.smp-browser .ss-card,
.smp-browser .ss-card-pick,
.smp-browser .ss-card-flip,
.smp-browser .ss-card-save,
.smp-browser .ss-disk-row,
.smp-browser .ss-disk-more,
.smp-browser .ss-more-card { border-radius: 2px; }

.smp-browser .ss-chip {
  background: var(--smp-panel);
  box-shadow: inset 0 0 0 1px var(--smp-line);
  color: var(--smp-dim);
  border: 0;
}
.smp-browser .ss-chip.active {
  background: var(--smp-device);
  color: var(--smp-text);
  box-shadow: inset 0 0 0 1px var(--smp-amber);
}
.smp-browser .ss-chiprow-sticky { background: transparent; backdrop-filter: none; }

/* The shared embed lays cards out 3-up, which is right in a 340px rail and
   absurd in a 250px sidebar: 56px tiles, where the title is three letters and
   the buttons cover the artwork. Two across, and the artist wall with them. */
.smp-browser .ss-tab :is(.ss-grid, .ss-cards, .ss-results),
.smp-browser .ss-screen-records {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px;
  padding: 5px;
}
.smp-browser .ss-artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.smp-browser .ss-circle-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }

.smp-browser .ss-card { background: #1e1e1e; box-shadow: inset 0 0 0 1px var(--smp-line); }
.smp-browser .ss-card:hover { box-shadow: inset 0 0 0 1px var(--smp-amber); }
.smp-browser .ss-card-title { color: var(--smp-text); }
.smp-browser .ss-card-artist { color: var(--smp-dim); }
.smp-browser .ss-card-sub { color: var(--smp-amber); }

/* Amber, flat, no gradient — the same key as every other control here. */
.smp-browser .ss-card-pick {
  background: var(--smp-panel);
  box-shadow: inset 0 0 0 1px var(--smp-amber);
  border: 0;
  color: var(--smp-amber);
}
.smp-browser .ss-card-flip {
  background: var(--smp-panel);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(216, 216, 216, 0.45);
  color: var(--smp-text);
}
.smp-browser .ss-card-play,
.smp-browser .ss-card-save {
  background: rgba(43, 43, 43, 0.85);
  border-color: var(--smp-line);
  color: var(--smp-text);
  backdrop-filter: none;
}
.smp-browser .ss-card-save.is-saved { color: var(--smp-amber); border-color: var(--smp-amber); }

/* The machine list reads as Live's file rows: hairline separators, no cards. */
.smp-browser .ss-crate-divider {
  color: var(--smp-dim);
  border-bottom-color: var(--smp-line);
  letter-spacing: 0;
}
.smp-browser .ss-disk-list { gap: 0; }
.smp-browser .ss-disk-row {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--smp-line);
  color: var(--smp-text);
}
.smp-browser .ss-disk-row:hover:not(:disabled) { background: var(--smp-device); }
.smp-browser .ss-disk-add { color: var(--smp-amber); }
.smp-browser .ss-disk-more { border-style: solid; border-color: var(--smp-line); color: var(--smp-dim); }

.smp-chip.is-on { background: var(--smp-device); box-shadow: inset 0 0 0 1px var(--smp-amber); color: var(--smp-text); }
/* =============================================================================
   SHARE PASS — the creator's sharing wizard + listener-perspective preview.

   The wizard wears the studio's night chrome. The PREVIEW stage wears the
   pass's chosen look: Blacklight (dark | light) or Deckside (putty | night).
   ========================================================================== */
.shp-overlay {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  place-items: center;
  background: rgba(8, 8, 11, 0.66);
  backdrop-filter: blur(7px);
  font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.shp-window {
  width: min(960px, 94vw);
  max-height: min(680px, 92vh);
  display: flex;
  flex-direction: column;
  background: #16161c;
  color: #eceae4;
  border: 1px solid #282833;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}
.shp-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid #282833;
  background: #1c1c24;
  flex: 0 0 auto;
}
.shp-titlebar b { font-size: 13px; letter-spacing: 0.02em; }
.shp-titlebar .shp-sub { font-family: 'SF Mono', Consolas, monospace; font-size: 10.5px; color: #94928b; letter-spacing: 0.08em; }
.shp-x {
  margin-left: auto;
  border: 0;
  background: none;
  color: #94928b;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 7px;
}
.shp-x:hover { color: #eceae4; background: rgba(255, 255, 255, 0.06); }

.shp-main { display: grid; grid-template-columns: 196px 1fr; flex: 1; min-height: 0; }
.shp-rail { border-right: 1px solid #282833; padding: 14px 0; background: rgba(0, 0, 0, 0.16); overflow-y: auto; }
.shp-step {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  font-size: 13px;
  color: #94928b;
  background: none;
  border: 0;
  cursor: pointer;
}
.shp-step i {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 10.5px;
  font-style: normal;
  box-shadow: inset 0 0 0 1px #282833;
  flex: 0 0 auto;
}
.shp-step.done i { background: #e8a33d; color: #241a08; box-shadow: none; }
.shp-step.on { color: #eceae4; }
.shp-step.on i { box-shadow: inset 0 0 0 1.5px #e8a33d; color: #e8a33d; }

.shp-body { padding: 22px 26px; display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.shp-body h3 { font-size: 19px; margin: 0 0 4px; font-weight: 650; letter-spacing: -0.01em; }
.shp-hint { color: #94928b; font-size: 13px; margin: 0 0 18px; }
.shp-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 20px; flex: 0 0 auto; }
.shp-btn {
  border: 0;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  background: none;
  color: #eceae4;
  box-shadow: inset 0 0 0 1px #282833;
  font-family: inherit;
}
.shp-btn:hover { box-shadow: inset 0 0 0 1px #94928b; }
.shp-btn.gold { background: #e8a33d; color: #241a08; box-shadow: none; }
.shp-btn.gold:hover { background: #f3c078; }
.shp-btn:focus-visible { outline: 2px solid #e8a33d; outline-offset: 2px; }

/* step 1: audience */
.shp-auds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.shp-aud {
  padding: 12px 13px;
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px #282833;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  color: #94928b;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.shp-aud small { display: block; font-weight: 400; font-size: 11px; margin-top: 2px; opacity: 0.8; }
.shp-aud:hover { box-shadow: inset 0 0 0 1px #94928b; }
.shp-aud.on { color: #eceae4; box-shadow: inset 0 0 0 1.5px #e8a33d; background: rgba(232, 163, 61, 0.06); }

/* step 2: permissions */
.shp-perms { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 18px; }
.shp-perm {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 4px;
  font-size: 13.5px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: #94928b;
  font-family: inherit;
}
.shp-perm[disabled] { cursor: default; }
.shp-tog {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #2b2b35;
  position: relative;
  flex: 0 0 auto;
  transition: background 0.15s;
}
.shp-tog::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #7a7a86;
  transition: transform 0.15s, background 0.15s;
}
.shp-perm.on { color: #eceae4; }
.shp-perm.on .shp-tog { background: #e8a33d; }
.shp-perm.on .shp-tog::after { transform: translateX(13px); background: #241a08; }

/* step 3: the look — drawn thumbnails, not swatches */
.shp-looks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.shp-look { border: 0; background: none; cursor: pointer; border-radius: 12px; overflow: hidden; padding: 0; text-align: left; box-shadow: inset 0 0 0 1px #282833; font-family: inherit; }
.shp-look.on { box-shadow: 0 0 0 2px #e8a33d; }
.shp-look .nm { display: block; padding: 8px 10px 2px; font-size: 11.5px; font-weight: 700; color: #eceae4; }
.shp-look .ds { display: block; padding: 0 10px 9px; font-size: 10px; color: #94928b; }

.shp-thumb {
  display: block;
  position: relative;
  aspect-ratio: 1 / 0.78;
  overflow: hidden;
  padding: 8px;
}
.shp-thumb i { display: block; position: relative; }
/* tape */
.shp-thumb-tape { background: #f2efe9; }
.shp-thumb-tape .t-label { height: 26%; border-radius: 1px; background: #efe9dc; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.shp-thumb-tape .t-window {
  margin-top: 5px; height: 40%; border-radius: 2px; background: #201d19;
  display: flex; align-items: center; justify-content: space-around;
}
.shp-thumb-tape .t-reel { width: 26%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #3a2f26 0 1.5px, #2c231c 1.5px 3px); box-shadow: 0 0 0 1.5px #efe9dc inset; }
.shp-thumb-tape .t-keys { margin-top: 6px; display: flex; gap: 3px; justify-content: center; }
.shp-thumb-tape .t-keys i { width: 22%; height: 7px; border-radius: 2px; background: linear-gradient(180deg,#e9e4da,#d5cfc3); }
.shp-thumb-tape .t-keys i:nth-child(2) { background: linear-gradient(180deg,#c2643b,#a94b26); }
/* wave — white paper, one dark waveform, text keys */
.shp-thumb-wave { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.shp-thumb-wave .w-bars { height: 56%; display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.shp-thumb-wave .w-bars i { flex: 1; border-radius: 2px; background: #0a0a0a; }
.shp-thumb-wave .w-bars i:nth-child(1),  .shp-thumb-wave .w-bars i:nth-child(11) { height: 16%; }
.shp-thumb-wave .w-bars i:nth-child(2),  .shp-thumb-wave .w-bars i:nth-child(10) { height: 34%; }
.shp-thumb-wave .w-bars i:nth-child(3),  .shp-thumb-wave .w-bars i:nth-child(9)  { height: 62%; }
.shp-thumb-wave .w-bars i:nth-child(4),  .shp-thumb-wave .w-bars i:nth-child(8)  { height: 88%; }
.shp-thumb-wave .w-bars i:nth-child(5),  .shp-thumb-wave .w-bars i:nth-child(7)  { height: 54%; }
.shp-thumb-wave .w-bars i:nth-child(6) { height: 100%; }
.shp-thumb-wave .w-keys { margin-top: 8px; display: flex; gap: 4px; justify-content: center; }
.shp-thumb-wave .w-keys i { width: 24%; height: 7px; border-radius: 2px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.1); }
/* blacklight / gallery */
.shp-thumb-b-dark { background: #0a0a0d; }
.shp-thumb-b-light { background: #f5f5f7; }
.shp-thumb .b-art { height: 58%; border-radius: 6px; display: grid; place-items: center; }
.shp-thumb-b-dark .b-art { background: radial-gradient(80% 120% at 50% 25%, #241f3d, #0a0a0d 75%); }
.shp-thumb-b-light .b-art { background: radial-gradient(80% 120% at 50% 25%, #e7e4f8, #f5f5f7 75%); }
.shp-thumb .b-play { width: 34%; aspect-ratio: 1; border-radius: 50%; }
.shp-thumb-b-dark .b-play { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.shp-thumb-b-light .b-play { background: #141419; }
.shp-thumb .b-pills { margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.shp-thumb .b-pills i { height: 8px; border-radius: 99px; }
.shp-thumb-b-dark .b-pills i { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.shp-thumb-b-light .b-pills i { box-shadow: inset 0 0 0 1px rgba(20,20,25,.18); background: #fff; }
/* deckside */
.shp-thumb-c-light { background: linear-gradient(180deg,#ddd7cb,#cdc7ba); }
.shp-thumb-c-dark { background: linear-gradient(180deg,#33363d,#212429); }
.shp-thumb .d-lcd { height: 46%; border-radius: 3px; }
.shp-thumb-c-light .d-lcd { background: #b7c9a0; box-shadow: inset 0 0 0 2px #23252a; }
.shp-thumb-c-dark .d-lcd { background: #9db386; box-shadow: inset 0 0 0 2px #14151a, 0 0 10px rgba(150,190,120,.3); }
.shp-thumb .d-keys { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.shp-thumb .d-keys i { height: 11px; border-radius: 3px; }
.shp-thumb-c-light .d-keys i { background: linear-gradient(180deg,#f2ede3,#d8d2c6); box-shadow: 0 1.5px 0 #a49d90; }
.shp-thumb-c-dark .d-keys i { background: linear-gradient(180deg,#4a4e57,#383b42); box-shadow: 0 1.5px 0 #17181c; }

/* titlebar tab button */
.shp-tabbtn { margin-left: auto; padding: 6px 13px; font-size: 11.5px; }

/* ---- shared links panel ------------------------------------------------- */
.shp-links h4 { font-family: 'SF Mono', Consolas, monospace; font-size: 10px; letter-spacing: 0.17em; text-transform: uppercase; color: #94928b; margin: 16px 0 8px; }
.shp-linkrows { display: flex; flex-direction: column; gap: 7px; }
.shp-linkrow { border-radius: 11px; box-shadow: inset 0 0 0 1px #282833; overflow: hidden; }
.shp-linkrow.open { box-shadow: inset 0 0 0 1px #3d3a2b, 0 0 0 1px rgba(232,163,61,.25); }
.shp-linkrow.dead .shp-lr-name { opacity: 0.55; }
.shp-linkrow-head {
  width: 100%; display: flex; align-items: center; gap: 14px; justify-content: space-between;
  border: 0; background: none; cursor: pointer; padding: 12px 14px; text-align: left; font-family: inherit; color: #eceae4;
}
.shp-linkrow-head:hover { background: rgba(255, 255, 255, 0.03); }
.shp-lr-name { font-size: 13.5px; font-weight: 600; min-width: 0; }
.shp-lr-name small { display: block; font-family: 'SF Mono', Consolas, monospace; font-size: 10.5px; font-weight: 400; color: #94928b; margin-top: 2px; }
.shp-lr-stats { display: flex; align-items: baseline; gap: 6px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.shp-lr-stats b { font-size: 13px; color: #f3c078; }
.shp-lr-stats small { font-size: 9.5px; color: #94928b; margin-right: 8px; }
.shp-linkdetail { padding: 4px 14px 16px; border-top: 1px dashed #282833; }
.shp-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.shp-statgrid div { background: rgba(0, 0, 0, 0.22); border-radius: 9px; padding: 10px 12px; }
.shp-statgrid b { display: block; font-size: 17px; color: #eceae4; font-variant-numeric: tabular-nums; }
.shp-statgrid small { font-size: 10px; color: #94928b; letter-spacing: 0.05em; }
.shp-bars { display: grid; gap: 5px; margin-top: 12px; }
.shp-bar { display: grid; grid-template-columns: 92px 1fr 28px; align-items: center; gap: 9px; font-size: 11.5px; color: #94928b; }
.shp-bar i { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #b97a1e, #e8a33d); min-width: 3px; }
.shp-bar b { color: #f3c078; text-align: right; font-variant-numeric: tabular-nums; }
/* Each device that opened the link, and how deep into its ten it went. */
.shp-listeners { display: grid; gap: 5px; margin-top: 4px; }
.shp-listener { display: grid; grid-template-columns: 46px 1fr 46px 54px; align-items: center; gap: 9px; font-size: 11px; color: #94928b; }
.shp-listener .lid { font-family: 'SF Mono', Consolas, monospace; font-size: 10px; }
.shp-listener .lbar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.shp-listener .lbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #b97a1e, #e8a33d); }
.shp-listener .lnum { color: #f3c078; font-variant-numeric: tabular-nums; text-align: right; }
.shp-listener .ltime { text-align: right; font-variant-numeric: tabular-nums; }

.shp-notes { margin-top: 6px; }
.shp-note-row { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px dashed #282833; }
.shp-note-row .who { font-size: 11.5px; font-weight: 700; color: #eceae4; }
.shp-note-row .who small { font-weight: 400; color: #94928b; margin-left: 7px; font-size: 10px; }
.shp-note-row .what { font-size: 12.5px; color: #b8b5ad; }
.shp-perms-tight { gap: 2px 14px; }

/* step 4: rules */
.shp-rules { display: flex; flex-direction: column; }
.shp-rule {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed #282833;
  font-size: 13.5px;
}
.shp-rule:last-child { border-bottom: 0; }
.shp-rule .val {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 12px;
  color: #f3c078;
  background: rgba(232, 163, 61, 0.08);
  padding: 4px 10px;
  border-radius: 7px;
  border: 0;
  cursor: pointer;
}
.shp-rule input.val { cursor: text; min-width: 150px; }
.shp-welcome {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #282833;
  border-radius: 10px;
  color: #eceae4;
  padding: 11px;
  font-family: Georgia, serif;
  font-size: 14px;
  font-style: italic;
  margin-top: 14px;
  resize: vertical;
}

/* step 5: link */
.shp-linkcard { background: rgba(0, 0, 0, 0.25); border: 1px solid #282833; border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.shp-url { font-family: 'SF Mono', Consolas, monospace; font-size: 14px; color: #f3c078; word-break: break-all; }
.shp-linkacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.shp-protect {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: #94928b;
  border-left: 2px solid #e8a33d;
  padding-left: 12px;
  margin-top: 14px;
}

/* ========================= PREVIEW STAGE ================================= */
.shp-preview { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.shp-prevbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #282833; flex: 0 0 auto; }
.shp-prevbar .shp-btn { padding: 6px 12px; font-size: 12px; }
.shp-lookmini { display: inline-flex; gap: 4px; margin-left: auto; background: #1c1c24; border: 1px solid #282833; border-radius: 9px; padding: 3px; }
.shp-lookmini button { border: 0; background: none; color: #94928b; font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.shp-lookmini button.on { background: #e8a33d; color: #241a08; }

.shp-stage { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px; position: relative; transition: background 0.3s, color 0.3s; }
.shp-stage-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.shp-artist { display: flex; align-items: center; gap: 11px; }
.shp-artist .av { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; }
.shp-artist b { display: block; font-size: 15px; line-height: 1.2; }
.shp-artist small { font-size: 11.5px; opacity: 0.65; }
.shp-note { font-style: italic; font-size: 12.5px; opacity: 0.75; max-width: 34ch; text-align: right; }
.shp-grid { display: grid; grid-template-columns: 1fr 250px; gap: 22px; }
.shp-artbox { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/7; display: grid; place-items: center; margin-bottom: 14px; }
.shp-play {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s;
  font-family: inherit;
}
.shp-play:hover { transform: scale(1.05); }
.shp-play svg { width: 21px; height: 21px; }
.shp-transport { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.shp-tl { flex: 1; height: 5px; border-radius: 99px; position: relative; overflow: hidden; }
.shp-tl i { position: absolute; inset: 0; width: 0%; border-radius: 99px; }
.shp-tcode { font-family: 'SF Mono', Consolas, monospace; font-size: 11px; opacity: 0.75; min-width: 70px; font-variant-numeric: tabular-nums; }
.shp-bar { font-family: 'SF Mono', Consolas, monospace; font-size: 10px; letter-spacing: 0.14em; opacity: 0.65; }
.shp-changes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.shp-chg {
  position: relative;
  padding: 13px 12px 11px;
  border-radius: 12px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s;
  font-family: inherit;
}
.shp-chg small { display: block; font-weight: 400; font-size: 10.5px; opacity: 0.62; margin-top: 2px; }
.shp-chg:hover { transform: translateY(-2px); }
.shp-chg .q { position: absolute; inset: auto 0 0 0; height: 3px; transform: scaleX(0); transform-origin: left; }
.shp-chg.queued .q { animation: shp-sweep 2.6s linear forwards; }
@keyframes shp-sweep { to { transform: scaleX(1); } }
.shp-chg.hit { animation: shp-hit 0.5s ease; }
@keyframes shp-hit { 35% { transform: scale(1.05); } }
.shp-chg.locked { opacity: 0.42; cursor: not-allowed; }
.shp-side { display: flex; flex-direction: column; gap: 15px; }
.shp-side h4 { font-family: 'SF Mono', Consolas, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.62; margin: 0; }
.shp-vers { display: flex; flex-direction: column; gap: 6px; }
.shp-ver { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px; font-size: 12.5px; text-align: left; border: 0; cursor: pointer; background: none; font-family: inherit; }
.shp-ver .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.shp-counter {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  padding: 8px 12px;
  border-radius: 9px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-variant-numeric: tabular-nums;
  width: -moz-fit-content;
  width: fit-content;
}
.shp-counter i { width: 6px; height: 6px; border-radius: 50%; }
.shp-toast {
  position: sticky;
  bottom: 6px;
  margin: 10px auto 0;
  width: -moz-fit-content;
  width: fit-content;
  padding: 8px 15px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  white-space: nowrap;
}
.shp-toast.show { opacity: 1; }
.shp-sheet {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 8, 10, 0.6);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 4;
}
.shp-sheet.show { opacity: 1; pointer-events: auto; }
.shp-sheetcard { width: min(400px, 88%); border-radius: 16px; padding: 24px; text-align: center; }
.shp-sheetcard h3 { font-size: 19px; margin: 0 0 8px; }
.shp-sheetcard p { font-size: 13px; opacity: 0.75; margin: 0 0 14px; }
.shp-sheetcard ul { list-style: none; text-align: left; font-size: 12px; opacity: 0.8; margin: 0 auto 16px; max-width: 250px; display: grid; gap: 4px; padding: 0; }
.shp-sheetcard li::before { content: '+'; font-family: 'SF Mono', Consolas, monospace; margin-right: 8px; opacity: 0.7; }
.shp-sheetbtns { display: grid; gap: 7px; }
.shp-sheetbtns .b1 { padding: 11px; border-radius: 10px; font-weight: 700; font-size: 13px; border: 0; cursor: pointer; font-family: inherit; }
.shp-sheetbtns .b2 { padding: 9px; border-radius: 10px; font-size: 12.5px; opacity: 0.85; border: 0; cursor: pointer; background: none; color: inherit; font-family: inherit; }

/* ================= LOOK: B-DARK — Blacklight ============================= */
.shp-stage[data-look='b-dark'] { background: #0a0a0d; color: #f4f4f6; }
[data-look='b-dark'] .av { background: conic-gradient(from 200deg, #8f7bff, #3ec6c0, #8f7bff); }
[data-look='b-dark'] .shp-artbox { background: radial-gradient(90% 120% at 50% 30%, #241f3d 0%, #0a0a0d 70%); }
[data-look='b-dark'] .shp-play { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); color: #fff; }
[data-look='b-dark'] .shp-tl { background: rgba(255, 255, 255, 0.12); }
[data-look='b-dark'] .shp-tl i { background: #fff; }
[data-look='b-dark'] .shp-chg { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); border-radius: 999px; text-align: center; font-weight: 500; color: #f4f4f6; }
[data-look='b-dark'] .shp-chg small { display: none; }
[data-look='b-dark'] .shp-chg:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
[data-look='b-dark'] .shp-chg .q { background: #8f7bff; height: 2px; }
[data-look='b-dark'] .shp-ver { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); border-radius: 999px; color: #f4f4f6; }
[data-look='b-dark'] .shp-ver.on { box-shadow: inset 0 0 0 1.5px #8f7bff; }
[data-look='b-dark'] .shp-ver .dot { background: #8f7bff; }
[data-look='b-dark'] .shp-counter { color: #b9b3d9; background: rgba(143, 123, 255, 0.09); }
[data-look='b-dark'] .shp-counter i { background: #8f7bff; box-shadow: 0 0 8px #8f7bff; }
[data-look='b-dark'] .shp-toast { background: #8f7bff; color: #0a0a0d; }
[data-look='b-dark'] .shp-sheetcard { background: #141318; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 80px rgba(0, 0, 0, 0.7); }
[data-look='b-dark'] .shp-sheetbtns .b1 { background: #8f7bff; color: #0a0a0d; }
[data-look='b-dark'] .shp-sheetbtns .b2 { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }

/* ================= LOOK: B-LIGHT — Gallery =============================== */
.shp-stage[data-look='b-light'] { background: #f5f5f7; color: #141419; }
[data-look='b-light'] .av { background: conic-gradient(from 200deg, #6a55e8, #2ba7a1, #6a55e8); }
[data-look='b-light'] .shp-artbox { background: radial-gradient(90% 120% at 50% 30%, #e7e4f8 0%, #f5f5f7 70%); }
[data-look='b-light'] .shp-play { background: #141419; color: #fff; box-shadow: 0 8px 24px rgba(20, 20, 25, 0.25); }
[data-look='b-light'] .shp-tl { background: rgba(20, 20, 25, 0.12); }
[data-look='b-light'] .shp-tl i { background: #141419; }
[data-look='b-light'] .shp-chg { background: transparent; box-shadow: inset 0 0 0 1px rgba(20, 20, 25, 0.22); border-radius: 999px; text-align: center; font-weight: 500; color: #141419; }
[data-look='b-light'] .shp-chg small { display: none; }
[data-look='b-light'] .shp-chg:hover { box-shadow: inset 0 0 0 1.5px rgba(20, 20, 25, 0.6); }
[data-look='b-light'] .shp-chg .q { background: #6a55e8; height: 2px; }
[data-look='b-light'] .shp-ver { box-shadow: inset 0 0 0 1px rgba(20, 20, 25, 0.15); border-radius: 999px; color: #141419; }
[data-look='b-light'] .shp-ver.on { box-shadow: inset 0 0 0 1.5px #6a55e8; }
[data-look='b-light'] .shp-ver .dot { background: #6a55e8; }
[data-look='b-light'] .shp-counter { color: #4c3fb0; background: rgba(106, 85, 232, 0.09); }
[data-look='b-light'] .shp-counter i { background: #6a55e8; }
[data-look='b-light'] .shp-toast { background: #141419; color: #fff; }
[data-look='b-light'] .shp-sheet { background: rgba(245, 245, 247, 0.6); }
[data-look='b-light'] .shp-sheetcard { background: #fff; box-shadow: 0 0 0 1px rgba(20, 20, 25, 0.08), 0 30px 80px rgba(20, 20, 25, 0.25); }
[data-look='b-light'] .shp-sheetbtns .b1 { background: #6a55e8; color: #fff; }
[data-look='b-light'] .shp-sheetbtns .b2 { box-shadow: inset 0 0 0 1px rgba(20, 20, 25, 0.16); }

/* ================= LOOK: WAVE — the song drawn on white ================== */
/* The wizard preview stands in for the real face: white paper, black ink, and
   every control set as text lifted by a shadow rather than filled in. */
.shp-stage[data-look='wave'] { background: #fff; color: #0a0a0a; }
[data-look='wave'] .av { background: #0a0a0a; }
[data-look='wave'] .shp-note { font-style: italic; opacity: 0.6; }
[data-look='wave'] .shp-artbox {
  background: #fff;
  box-shadow: none;
  /* The stand-in waveform: mirrored bars, centred, in ink. */
  background-image: repeating-linear-gradient(90deg, #0a0a0a 0 3px, transparent 3px 13px);
  background-size: 100% 38%;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(70% 100% at 50% 50%, #000 20%, transparent 100%);
  mask-image: radial-gradient(70% 100% at 50% 50%, #000 20%, transparent 100%);
}
[data-look='wave'] .shp-play { background: #fff; color: #0a0a0a; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 22px -10px rgba(0,0,0,.4); }
[data-look='wave'] .shp-tl { background: rgba(0, 0, 0, 0.12); }
[data-look='wave'] .shp-tl i { background: #0a0a0a; }
[data-look='wave'] .shp-chg {
  background: #fff; color: #0a0a0a; border-radius: 9px; text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 18px -10px rgba(0,0,0,.28);
}
[data-look='wave'] .shp-chg:hover { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 26px -12px rgba(0,0,0,.34); }
[data-look='wave'] .shp-chg small { opacity: 0.55; }
[data-look='wave'] .shp-ver { background: #fff; color: #0a0a0a; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 18px -10px rgba(0,0,0,.28); border-radius: 9px; }
[data-look='wave'] .shp-ver.on { font-weight: 650; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 26px -12px rgba(0,0,0,.34); }
[data-look='wave'] .shp-ver .dot { background: #0a0a0a; }
[data-look='wave'] .shp-counter { background: #fff; color: #0a0a0a; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 18px -10px rgba(0,0,0,.28); }
[data-look='wave'] .shp-counter i { background: #0a0a0a; }
[data-look='wave'] .shp-side h4 { color: #767676; }

/* ================= LOOK: C-LIGHT — Deckside putty ======================== */
.shp-stage[data-look='c-light'] { background: linear-gradient(180deg, #ddd7cb, #d2ccc0); color: #26282c; font-family: 'SF Mono', Consolas, monospace; }
[data-look='c-light'] .av { background: radial-gradient(circle at 35% 30%, #4a4e55, #23252a); }
[data-look='c-light'] .shp-artbox { background: #b7c9a0; box-shadow: inset 0 2px 10px rgba(30, 40, 24, 0.35), inset 0 0 0 3px #23252a; border-radius: 9px; }
[data-look='c-light'] .shp-play { background: linear-gradient(180deg, #f2ede3, #cfc9bc); box-shadow: 0 3px 0 #9d968a, 0 6px 14px rgba(0, 0, 0, 0.25); color: #26282c; border-radius: 13px; }
[data-look='c-light'] .shp-play:active { transform: translateY(2px); box-shadow: 0 1px 0 #9d968a; }
[data-look='c-light'] .shp-tl { background: #b9b3a6; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); border-radius: 3px; }
[data-look='c-light'] .shp-tl i { background: #e0562e; border-radius: 3px; }
[data-look='c-light'] .shp-chg { background: linear-gradient(180deg, #f2ede3, #d8d2c6); box-shadow: 0 2.5px 0 #a49d90, 0 5px 10px rgba(0, 0, 0, 0.15); border-radius: 8px; color: #26282c; text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; }
[data-look='c-light'] .shp-chg small { text-transform: none; letter-spacing: 0; }
[data-look='c-light'] .shp-chg:hover { transform: none; }
[data-look='c-light'] .shp-chg:active { transform: translateY(2px); box-shadow: 0 0.5px 0 #a49d90; }
[data-look='c-light'] .shp-chg .q { background: #e0562e; }
[data-look='c-light'] .shp-ver { background: #b7c9a0; box-shadow: inset 0 0 0 2px #23252a; border-radius: 6px; color: #2c3a26; font-size: 11.5px; }
[data-look='c-light'] .shp-ver.on { background: #c6d8ab; }
[data-look='c-light'] .shp-ver .dot { background: #2c3a26; }
[data-look='c-light'] .shp-counter { background: #b7c9a0; color: #2c3a26; box-shadow: inset 0 0 0 2px #23252a; border-radius: 6px; text-transform: uppercase; }
[data-look='c-light'] .shp-counter i { background: #e0562e; }
[data-look='c-light'] .shp-toast { background: #23252a; color: #b7c9a0; }
[data-look='c-light'] .shp-sheet { background: rgba(221, 215, 203, 0.6); }
[data-look='c-light'] .shp-sheetcard { background: #ddd7cb; box-shadow: 0 0 0 3px #23252a, 0 30px 80px rgba(0, 0, 0, 0.5); color: #26282c; }
[data-look='c-light'] .shp-sheetbtns .b1 { background: #e0562e; color: #fff; box-shadow: 0 3px 0 #93361b; }
[data-look='c-light'] .shp-sheetbtns .b2 { box-shadow: inset 0 0 0 2px #23252a; }
[data-look='c-light'] .shp-note { font-style: normal; font-size: 11px; }

/* ================= LOOK: C-DARK — Deckside night ========================= */
.shp-stage[data-look='c-dark'] { background: linear-gradient(180deg, #33363d, #26282e); color: #e8e4da; font-family: 'SF Mono', Consolas, monospace; }
[data-look='c-dark'] .av { background: radial-gradient(circle at 35% 30%, #6a6f78, #33363c); }
[data-look='c-dark'] .shp-artbox { background: #9db386; box-shadow: inset 0 2px 10px rgba(15, 22, 10, 0.5), inset 0 0 0 3px #14151a, 0 0 22px rgba(150, 190, 120, 0.18); border-radius: 9px; }
[data-look='c-dark'] .shp-play { background: linear-gradient(180deg, #4a4e57, #33363c); box-shadow: 0 3px 0 #17181c, 0 6px 14px rgba(0, 0, 0, 0.5); color: #e8e4da; border-radius: 13px; }
[data-look='c-dark'] .shp-play:active { transform: translateY(2px); box-shadow: 0 1px 0 #17181c; }
[data-look='c-dark'] .shp-tl { background: #17181c; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); border-radius: 3px; }
[data-look='c-dark'] .shp-tl i { background: #e0562e; border-radius: 3px; box-shadow: 0 0 8px rgba(224, 86, 46, 0.6); }
[data-look='c-dark'] .shp-chg { background: linear-gradient(180deg, #4a4e57, #383b42); box-shadow: 0 2.5px 0 #17181c, 0 5px 10px rgba(0, 0, 0, 0.35); border-radius: 8px; color: #e8e4da; text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; }
[data-look='c-dark'] .shp-chg small { text-transform: none; letter-spacing: 0; }
[data-look='c-dark'] .shp-chg:hover { transform: none; }
[data-look='c-dark'] .shp-chg:active { transform: translateY(2px); box-shadow: 0 0.5px 0 #17181c; }
[data-look='c-dark'] .shp-chg .q { background: #e0562e; }
[data-look='c-dark'] .shp-ver { background: #1d2516; box-shadow: inset 0 0 0 2px #0f120b; border-radius: 6px; color: #b7c9a0; font-size: 11.5px; }
[data-look='c-dark'] .shp-ver.on { background: #2c3a26; box-shadow: inset 0 0 0 2px #0f120b, 0 0 10px rgba(150, 190, 120, 0.25); }
[data-look='c-dark'] .shp-ver .dot { background: #b7c9a0; }
[data-look='c-dark'] .shp-counter { background: #1d2516; color: #b7c9a0; box-shadow: inset 0 0 0 2px #0f120b, 0 0 10px rgba(150, 190, 120, 0.15); border-radius: 6px; text-transform: uppercase; }
[data-look='c-dark'] .shp-counter i { background: #e0562e; box-shadow: 0 0 6px rgba(224, 86, 46, 0.7); }
[data-look='c-dark'] .shp-toast { background: #b7c9a0; color: #1d2516; }
[data-look='c-dark'] .shp-sheetcard { background: #2b2d33; box-shadow: 0 0 0 3px #14151a, 0 30px 80px rgba(0, 0, 0, 0.65); color: #e8e4da; }
[data-look='c-dark'] .shp-sheetbtns .b1 { background: #e0562e; color: #fff; box-shadow: 0 3px 0 #93361b; }
[data-look='c-dark'] .shp-sheetbtns .b2 { box-shadow: inset 0 0 0 2px #14151a; }
[data-look='c-dark'] .shp-note { font-style: normal; font-size: 11px; }

@media (max-width: 760px) {
  .shp-main { grid-template-columns: 1fr; }
  .shp-rail { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid #282833; padding: 5px; }
  .shp-step { flex: 0 0 auto; padding: 8px 11px; }
  .shp-auds { grid-template-columns: 1fr 1fr; }
  .shp-perms { grid-template-columns: 1fr; }
  .shp-looks { grid-template-columns: 1fr 1fr; }
  .shp-lr-stats { display: grid; grid-template-columns: auto auto; gap: 2px 6px; }
  .shp-statgrid { grid-template-columns: 1fr 1fr; }
  .shp-grid { grid-template-columns: 1fr; }
  .shp-changes { grid-template-columns: 1fr 1fr; }
  .shp-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shp-chg.queued .q { animation-duration: 0.001s; }
}

/* The room picker — only shown for the 3D look. */
.shp-rooms { display: grid; gap: 8px; margin-top: 12px; }

/* ---- THE TAPE SHELF BUILDER (co-producer step) ------------------------- */
.shp-recipes {
  margin: 10px 0 16px;
  padding: 12px;
  border: 1px solid #2a2a30;
  border-radius: 8px;
  background: #131318;
}
.shp-recipes-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85;
}
.shp-recipes-head b { color: #e8b54a; font-size: 12px; }
.shp-recipes-head .shp-btn { margin-left: auto; padding: 3px 10px; font-size: 11px; }

.shp-recipe-fams { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.shp-recipe-fam {
  position: relative; padding: 5px 11px; border-radius: 5px; cursor: pointer;
  background: #1b1b21; color: #c8c8d0; border: 1px solid #2e2e36;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
.shp-recipe-fam.on { background: #2a2333; border-color: #7a5ea8; color: #fff; }
.shp-recipe-fam .dot {
  position: absolute; top: 3px; right: 3px; width: 5px; height: 5px;
  border-radius: 50%; background: #e8b54a;
}

.shp-recipe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shp-recipe-chip {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: #17171c; color: #b9b9c4; border: 1px solid #2c2c34; font-size: 13px;
}
.shp-recipe-chip:hover { border-color: #4a4a56; }
.shp-recipe-chip.on { background: #b97a1e; border-color: #d89a3e; color: #fff; font-weight: 600; }
.shp-recipe-chip.all { font-style: italic; opacity: 0.75; }

.shp-recipe-stack {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed #2c2c34;
}
.shp-recipe-stacked {
  display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
  padding: 4px 9px; border-radius: 5px;
  background: #22222a; border: 1px solid #34343e; color: #e6e6ee; font-size: 12px;
}
.shp-recipe-stacked i { font-style: normal; font-size: 10px; opacity: 0.5; text-transform: uppercase; }
.shp-recipe-stacked b { opacity: 0.5; font-size: 13px; }
.shp-recipe-stacked:hover { border-color: #7a3a3a; }
.shp-recipe-stacked:hover b { opacity: 1; color: #ff8a8a; }

/* ---- recipe builder: build one, add it, build the next ----------------- */
.shp-recipe-build {
  border: 1px solid #33333c; border-radius: 9px; padding: 12px;
  background: #101014; margin: 10px 0 14px;
}
.shp-recipe-build .shp-recipes { background: #16161c; margin: 0 0 10px; }
.shp-recipe-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shp-recipe-name {
  flex: 1 1 220px; min-height: 34px; padding: 6px 10px; font-size: 14px;
  border-radius: 6px; background: #1b1b21; color: #e6e6ee; border: 1px solid #33333c;
  box-sizing: border-box;
}
.shp-recipe-add .shp-btn.gold:disabled { opacity: 0.4; cursor: not-allowed; }

.shp-recipe-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.shp-recipe-card {
  border: 1px solid #2e2e38; border-left: 3px solid #b97a1e;
  border-radius: 7px; padding: 9px 12px; background: #15151a;
}
.shp-recipe-card-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.shp-recipe-card-head b { font-size: 14px; color: #f0f0f6; }
.shp-recipe-card-head span { font-size: 11px; opacity: 0.55; font-family: ui-monospace, monospace; }
.shp-recipe-card-head .shp-btn { margin-left: auto; padding: 3px 10px; font-size: 11px; }
.shp-recipe-card-body { display: flex; gap: 8px; font-size: 12px; line-height: 1.5; }
.shp-recipe-card-body .lbl {
  flex: 0 0 52px; opacity: 0.45; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 10px; padding-top: 2px;
}
.shp-recipe-card-body .vals { color: #c9c9d4; }


/* Caveat for the collaborator's name — the same hand the desk is signed in,
   so a take reads as coming from a person, not a system. Must be line 1. */
/*
 * THE TAKE TOAST. Bottom-right, above everything, stacking upward so the
 * newest is nearest the eye. Warm amber spine because this is the same
 * outward-facing family as Share — it is news from outside the room.
 */
.tkt-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  /* Over the studio's own 9999 chrome — a take landing is more important
     than anything it could cover, and it clears itself in 11s. */
  z-index: 2147483000;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: min(400px, calc(100vw - 36px));
}
.tkt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  border-radius: 11px;
  overflow: hidden;
  pointer-events: auto;
  color: #f2f2f5;
  /* Lifted off the desk, not flat on it. */
  background: linear-gradient(180deg, #23232a 0%, #191920 100%);
  border: 1px solid #35353f;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: tkt-in 420ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
@keyframes tkt-in {
  from { opacity: 0; transform: translateX(26px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.tkt--out {
  animation: tkt-out 240ms ease forwards;
}
@keyframes tkt-out {
  to { opacity: 0; transform: translateX(20px) scale(0.98); }
}
/* The amber edge — the Share family's colour, because this is news from
   outside the studio rather than something the desk did. */
.tkt__spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #e8a33e, #b97a1e);
}
.tkt__art {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 7px;
  -o-object-fit: cover;
     object-fit: cover;
  background: #101014;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.tkt__art--blank {
  display: flex; align-items: center; justify-content: center;
  color: #6c6c7a; font-size: 19px;
}
.tkt__body { flex: 1; min-width: 0; }
.tkt__eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e8a33e;
  margin-bottom: 3px;
}
.tkt__name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  /* Long take names truncate rather than wrapping the card open. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tkt__by {
  font-size: 12px;
  opacity: 0.62;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Their name in the same hand the desk is signed in. */
.tkt__by b {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: #f4e3c6;
  opacity: 1;
}
.tkt__by i { font-style: normal; opacity: 0.7; }
.tkt__hear {
  flex-shrink: 0;
  min-height: 34px;
  padding: 7px 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: #b97a1e;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.15s;
}
.tkt__hear:hover { background: #d89a3e; }
.tkt__x {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: transparent;
  color: #7c7c8a;
  font-size: 12px;
  line-height: 1;
}
.tkt__x:hover { color: #e6e6ee; background: rgba(255, 255, 255, 0.07); }
/* How long it will wait, drawn. */
.tkt__timer {
  position: absolute;
  left: 3px; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #b97a1e, #e8a33e);
  transform-origin: left center;
  animation: tkt-timer 11s linear forwards;
}
@keyframes tkt-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* Hovering holds the card AND its timer. */
.tkt:hover .tkt__timer { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tkt, .tkt--out { animation: none; }
  .tkt__timer { animation: none; transform: scaleX(1); }
}
@media (max-width: 640px) {
  .tkt-stack { right: 10px; bottom: 10px; left: 10px; max-width: none; }
  .tkt__name { font-size: 17px; }
}


/* Caveat for names — the same hand the co-producer desk is signed in, so a
   person reads as a person wherever they appear. Must be line 1. */
/* ===========================================================================
   SHARED WITH YOU — the Home rail.
   Time-sensitive by nature, so the countdown outranks everything but whose
   room it is.
   =========================================================================== */
.swy { margin: 26px 0 8px; }
.swy__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding: 0 2px;
}
.swy__title {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f0f0f5;
}
.swy__sub { font-size: 12.5px; opacity: 0.5; color: #cfd2d8; }
/* A rail, not a grid: these are invitations, and a horizontal shelf says
   "there may be more" where a grid says "this is all of it". */
.swy__rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
}
.swy-card {
  position: relative;
  flex: 0 0 268px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border-radius: 11px;
  text-decoration: none;
  color: #ececf2;
  background: linear-gradient(180deg, #23232b 0%, #191920 100%);
  border: 1px solid #34343e;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  transition: transform 0.14s ease, border-color 0.14s ease;
}
.swy-card:hover { transform: translateY(-2px); border-color: #4c4c5a; }
.swy-card--dead {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  filter: grayscale(0.5);
}
.swy-card__art {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 8px; -o-object-fit: cover; object-fit: cover; background: #101014;
}
.swy-card__art--blank {
  display: flex; align-items: center; justify-content: center;
  color: #62626f; font-size: 19px;
}
.swy-card__body { min-width: 0; flex: 1; }
/* Whose room it is, in the hand — a person, not a record. */
.swy-card__host {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #f4e3c6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.swy-card__session {
  font-size: 12.5px;
  opacity: 0.66;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.swy-card__session b {
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 11px; opacity: 0.8; margin-right: 6px;
}
.swy-card__meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
}
.swy-card__clock { color: #8fd9a8; }
/* Under an hour it changes colour rather than shouting — the number is
   already the message. */
.swy-card__clock.is-urgent { color: #e8a33e; }
.swy-card__takes { opacity: 0.45; }
.swy-card__rented { color: #b97a1e; }
.swy-card__dead { opacity: 0.5; }
.swy-card__go {
  flex-shrink: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #b97a1e;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.swy-card:hover .swy-card__go { opacity: 1; transform: none; }
/* ===========================================================================
   THE DERIVATIVE TREE — the creator's side.
   =========================================================================== */
.dtr { color: #e8e8ef; }
.dtr__head {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.dtr__title {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 19px;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.dtr__stat { margin: 3px 0 0; font-size: 12px; opacity: 0.55; }
.dtr__stat b { opacity: 1; color: #e8a33e; font-weight: 700; }
.dtr__sorts { margin-left: auto; display: flex; gap: 5px; }
.dtr__sort {
  padding: 5px 10px; border-radius: 5px; cursor: pointer;
  background: #1b1b22; color: #b8b8c4; border: 1px solid #303039;
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
}
.dtr__sort.on { background: #2a2333; border-color: #7a5ea8; color: #fff; }
.dtr__empty {
  font-size: 13px; opacity: 0.5; line-height: 1.6; max-width: 46ch;
  margin: 8px 0;
}
.dtr__people { display: flex; flex-direction: column; gap: 14px; }
.dtr__person {
  border: 1px solid #2c2c35;
  border-left: 3px solid #b97a1e;
  border-radius: 8px;
  padding: 10px 12px;
  background: #15151b;
}
.dtr__person-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px;
}
/* Their name in the hand — the tree is about people, not rows. */
.dtr__who {
  font-family: 'Caveat', cursive;
  font-weight: 700; font-size: 21px; line-height: 1;
  color: #f4e3c6;
}
.dtr__made {
  font-family: ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.45;
}
.dtr__last { margin-left: auto; font-size: 11px; opacity: 0.4; }
.dtr__feed { list-style: none; margin: 0; padding: 0; }
.dtr__row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0;
  font-size: 12.5px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.dtr__row:first-child { border-top: 0; }
.dtr__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #3d3d47; flex-shrink: 0;
}
/* Events that MADE something are the ones a creator is scanning for. */
.dtr__row.is-made .dtr__dot { background: #e8a33e; box-shadow: 0 0 6px rgba(232, 163, 62, 0.55); }
.dtr__what { flex: 1; min-width: 0; opacity: 0.82; }
.dtr__what b { font-family: 'Caveat', cursive; font-size: 16px; color: #f4e3c6; }
.dtr__what em { font-style: normal; color: #f0f0f5; }
.dtr__when { font-size: 11px; opacity: 0.38; white-space: nowrap; }
.dtr__hash {
  font-family: ui-monospace, monospace;
  font-size: 9.5px; opacity: 0.3;
  padding: 1px 4px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
}
.dtr__proof {
  margin: 14px 0 0;
  font-size: 11px; opacity: 0.35;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.04em;
}
@media (max-width: 640px) {
  .swy-card { flex: 0 0 232px; }
  .dtr__sorts { margin-left: 0; width: 100%; }
}
/* ===========================================================================
   THE LIBRARY PANEL — both directions behind one door.
   =========================================================================== */
.ssp { padding: 4px 2px 14px; }
.ssp__switch { display: flex; gap: 6px; margin-bottom: 14px; }
.ssp__side {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 6px; cursor: pointer;
  background: #1a1a21; color: #b9b9c5; border: 1px solid #2f2f39;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600;
}
.ssp__side.on { background: #2a2333; border-color: #7a5ea8; color: #fff; }
.ssp__side b {
  font-family: ui-monospace, monospace; font-size: 10px;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(255,255,255,0.08); font-weight: 700;
}
.ssp__list { display: flex; flex-direction: column; gap: 8px; }
.ssp-row {
  border: 1px solid #2b2b34; border-radius: 9px;
  background: #15151b; overflow: hidden;
}
.ssp-row.is-open { border-color: #46465a; }
.ssp-row.is-dead { opacity: 0.6; }
.ssp-row__head {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; cursor: pointer;
  background: transparent; border: 0; text-align: left; color: inherit;
}
.ssp-row__head:hover { background: rgba(255,255,255,0.03); }
.ssp-row__art {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 7px; -o-object-fit: cover; object-fit: cover; background: #101014;
}
.ssp-row__art--blank {
  display: flex; align-items: center; justify-content: center;
  color: #5e5e6b; font-size: 17px;
}
.ssp-row__names { flex: 1; min-width: 0; }
/* The person, in the hand. */
.ssp-row__who {
  display: block;
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: 20px; line-height: 1.05; color: #f4e3c6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ssp-row__names small {
  /* 0.5 vanished under the handwritten name above it — this line carries
     the session and label, which is how you tell two rooms apart. */
  display: block; font-size: 12px; opacity: 0.68; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ssp-row__meta {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  font-family: ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
}
.ssp-row__meta em { font-style: normal; color: #8fd9a8; }
.ssp-row__meta em.is-urgent { color: #e8a33e; }
.ssp-row.is-dead .ssp-row__meta em { color: #86868f; }
.ssp-row__rented { font-style: normal; color: #b97a1e; }
.ssp-row__body {
  padding: 12px 14px 14px;
  border-top: 1px solid #26262f;
  background: #111116;
}
.ssp-row__enter {
  display: inline-block; margin-top: 12px;
  padding: 8px 18px; border-radius: 6px;
  background: #b97a1e; color: #fff; text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
}
.ssp-row__enter:hover { background: #d89a3e; }
/* The named-but-empty state, shown only to an account under review — for them
   this section is the whole screen, so a bare page would read as broken. */
.swy__empty {
  margin: 2px 2px 0;
  padding: 16px 18px;
  border-radius: 11px;
  border: 1px dashed #313139;
  background: rgba(255, 255, 255, 0.015);
  color: #8b8b97;
  font-size: 13px;
  line-height: 1.6;
  max-width: 52ch;
}
/**
 * SP-1200 face.
 *
 * SIZE IS THE CONSTRAINT: the dock is ~1185x240 (5:1) and the machine is
 * 1.32:1, so the modules run in COLUMNS and every control is drawn at the
 * real machine's proportion rather than whatever the flexbox left over.
 * Everything multiplies by `--k`, measured from the dock on both axes.
 *
 * THE FADERS ARE DRAWN, NOT DEFAULTED. A browser range input gives a round
 * chrome thumb on a hairline — nothing like the SP's wide dark caps riding
 * a ruled track. Both are built here: `repeating-linear-gradient` rules the
 * track the way the silkscreen does, and the thumb is a broad slab with a
 * white index line down its middle.
 *
 * THE PADS HAVE DEPTH: a lit bevel at the top, a shadow under the bottom
 * lip, and an inset press state, so they read as rubber sitting proud of
 * the case rather than as flat rectangles.
 */

.sp12-dock {
  position: fixed;
  /* The band's top is the mixer's bottom; this deck starts one chrome strip
     lower because .sdh-switch / .sdh-kitbar own that strip. */
  top: calc(var(--spotify-menu-top, 53.3vh) + var(--sdh-chrome, 22px));
  bottom: var(--spotify-menu-bottom, 0px);
  left: calc(var(--spotify-menu-left, 0px) + var(--soundcraft-width, 95px));
  right: var(--spotify-menu-right, 0px);
  z-index: 200;
  display: flex;
  border-top-left-radius: 12px;
  overflow: hidden;
  background: #131416;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.sp12-dock, .sp12-dock * { box-sizing: border-box; }
/* NOTHING HIGHLIGHTS UNDER THE HAND. Riding a fader used to leave a focus
   ring around it and drag-select the silkscreen print beside it — neither
   is something a panel does. The keyboard ring is kept (`:focus-visible`
   only fires for keyboard) so the machine is still reachable without a
   mouse; it is the POINTER highlight that goes. */
.sp12-dock {
  -webkit-tap-highlight-color: transparent;
  -moz-user-select: none;
       user-select: none; -webkit-user-select: none;
}
.sp12-dock :focus:not(:focus-visible) { outline: none; box-shadow: none; }
.sp12-dock input[type="range"]::-moz-focus-outer { border: 0; }
/* Belt and braces: `:focus-visible` is a browser heuristic, and it still
   latched a ring onto buttons and faders after a mouse press here. The
   dock also drops focus on pointerup (see the deck), so this only has to
   cover the moment between press and release. */
.sp12-dock.sp12-pointer :focus,
.sp12-dock.sp12-pointer :focus-visible { outline: none !important; box-shadow: none !important; }

.sp12-face {
  --k: 1;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #3c3f43 0%, #33363a 55%, #2c2f33 100%);
  border-top: 1px solid #4d5157;
  overflow: hidden;
}

/* ---- Header band ---- */
.sp12-header {
  flex-shrink: 0;
  display: flex; align-items: baseline; gap: calc(10px * var(--k));
  background: linear-gradient(180deg, #cfd2d6 0%, #b9bcc0 100%);
  padding: calc(3px * var(--k)) calc(14px * var(--k));
  border-bottom: calc(2px * var(--k)) solid #0e0f11;
}
.sp12-header b {
  color: #1b1d20; font-size: calc(15px * var(--k));
  letter-spacing: .01em; line-height: 1.15;
}
.sp12-header i {
  color: #4c5157; font-size: calc(7px * var(--k)); letter-spacing: .26em;
  font-style: normal; text-transform: uppercase;
}
.sp12-header-spec {
  color: #5d6268; font-size: calc(7px * var(--k)); letter-spacing: .16em;
  text-transform: uppercase;
}
.sp12-emu {
  margin-left: auto;
  color: #3a3e43; font-size: calc(8px * var(--k)); letter-spacing: .02em;
}

/* ---- Body: the machine, then the disk bay ---- */
.sp12-body {
  flex: 1; min-height: 0;
  display: flex; align-items: stretch;
  gap: calc(9px * var(--k));
  padding: calc(6px * var(--k)) calc(12px * var(--k)) calc(4px * var(--k));
}
.sp12-col { display: flex; flex-direction: column; gap: calc(4px * var(--k)); min-width: 0; min-height: 0; }
.sp12-col-machine { flex: 1 1 auto; min-width: calc(560px * var(--k)); }
.sp12-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(6px * var(--k));
  color: #e2e5e9; font-size: calc(9px * var(--k)); letter-spacing: .09em;
  padding-bottom: calc(2px * var(--k));
  border-bottom: calc(2px * var(--k)) solid #3d6a99;
  white-space: nowrap; flex-shrink: 0;
}

/* ---- Keys: hard squares with their print underneath ---- */
.sp12-key {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; cursor: pointer;
  width: calc(26px * var(--k)); height: calc(16px * var(--k));
  background: linear-gradient(180deg, #f6f5f2 0%, #d4d2cd 100%);
  border: 1px solid #0f1012; border-radius: calc(2px * var(--k));
  box-shadow: 0 calc(2px * var(--k)) calc(2px * var(--k)) rgba(0, 0, 0, .55),
              inset 0 1px 0 rgba(255, 255, 255, .8),
              inset 0 calc(-2px * var(--k)) calc(2px * var(--k)) rgba(0, 0, 0, .12);
  font: inherit; font-size: calc(8px * var(--k)); color: #24262a; padding: 0;
  flex-shrink: 0;
}
.sp12-key:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); }
.sp12-key.lit {
  background: linear-gradient(180deg, #ffe9a3 0%, #e6c561 100%);
  box-shadow: 0 0 calc(8px * var(--k)) rgba(255, 214, 110, .55);
}
.sp12-key-red { background: linear-gradient(180deg, #cd3a2f 0%, #97241c 100%); }
.sp12-key-red.lit {
  background: linear-gradient(180deg, #ff5b4d 0%, #cf3327 100%);
  box-shadow: 0 0 calc(10px * var(--k)) rgba(255, 80, 60, .65);
}
.sp12-key-dark { background: linear-gradient(180deg, #43474d 0%, #2b2e33 100%); color: #d8dbdf; }
.sp12-key-dark.lit {
  background: linear-gradient(180deg, #6a774f 0%, #4d573b 100%);
  box-shadow: 0 0 calc(8px * var(--k)) rgba(160, 200, 90, .45);
}
.sp12-pkey { display: flex; flex-direction: column; align-items: center; gap: calc(2px * var(--k)); min-width: 0; }
.sp12-pkey-label {
  font-size: calc(6.5px * var(--k)); letter-spacing: .02em; color: #c8ccd1;
  text-transform: uppercase; white-space: nowrap; line-height: 1;
}

/* ---- The top band: display, keys, transport, on one line ---- */
.sp12-topband {
  flex-shrink: 0;
  display: flex; align-items: center; gap: calc(9px * var(--k));
  padding-bottom: calc(3px * var(--k));
  border-bottom: calc(2px * var(--k)) solid #3d6a99;
}
.sp12-lcd {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #b6c24a;
  color: #17200a;
  border: calc(2px * var(--k)) solid #0f1012; border-radius: calc(2px * var(--k));
  padding: calc(3px * var(--k)) calc(6px * var(--k));
  font-size: calc(9.5px * var(--k)); line-height: 1.35; letter-spacing: .05em;
  white-space: pre; flex-shrink: 0;
  box-shadow: inset 0 calc(2px * var(--k)) calc(6px * var(--k)) rgba(0, 0, 0, .35);
}
.sp12-kgrid {
  flex: 1; min-width: 0;
  display: flex; flex-wrap: wrap; gap: calc(3px * var(--k)) calc(4px * var(--k));
  align-content: flex-start;
}
.sp12-transport { display: flex; align-items: flex-start; gap: calc(7px * var(--k)); flex-shrink: 0; }
.sp12-knob {
  width: calc(20px * var(--k)); height: calc(20px * var(--k)); border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #53585e 0%, #2d3035 62%, #1a1c1f 100%);
  border: 1px solid #0a0b0c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 calc(2px * var(--k)) calc(3px * var(--k)) rgba(0, 0, 0, .65);
  position: relative; cursor: ns-resize; touch-action: none;
  transform: rotate(var(--rot, 0deg));
}
.sp12-knob i {
  position: absolute; left: 50%; top: 6%;
  width: calc(2px * var(--k)); height: 36%; margin-left: calc(-1px * var(--k));
  background: #f0f2f4; border-radius: 1px;
}

/* ---- Performance: the faders and the pads, both given real size ---- */
.sp12-perf { flex: 1; min-height: 0; display: flex; gap: calc(10px * var(--k)); align-items: stretch; }
.sp12-selcol {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: calc(6px * var(--k)); flex-shrink: 0; padding-bottom: calc(2px * var(--k));
}
.sp12-selector { display: flex; align-items: center; gap: calc(6px * var(--k)); }
.sp12-selkey { width: calc(24px * var(--k)); height: calc(24px * var(--k)); }
.sp12-leds { display: flex; flex-direction: column; gap: calc(4px * var(--k)); }
.sp12-led {
  display: flex; align-items: center; gap: calc(5px * var(--k));
  font-size: calc(8px * var(--k)); letter-spacing: .03em; color: #868c93;
  white-space: nowrap; line-height: 1;
}
.sp12-led i {
  width: calc(6px * var(--k)); height: calc(6px * var(--k)); border-radius: 50%;
  background: #4a2420; border: 1px solid #16171a; flex-shrink: 0;
}
.sp12-led.on { color: #f0f2f4; }
.sp12-led.on i {
  background: #ff4436;
  box-shadow: 0 0 calc(7px * var(--k)) rgba(255, 68, 54, .95);
  border-color: #a3231a;
}

/* THE TWO BANKS SHARE ONE GEOMETRY. A fader has to sit dead over the pad
   it controls, so the columns, the gaps and the side padding are declared
   once here and inherited by both — the bank used to carry 8px of padding
   the pad row did not, which walked every cap off its own pad. `--padw`
   is the pad's width AND the cap's, so the cap reads as the top of the
   same control. */
.sp12-strip {
  --cols: repeat(8, 1fr);
  --colgap: calc(8px * var(--k));
  --edge: calc(8px * var(--k));
  --padw: calc(48px * var(--k));
  flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column;
}

/* THE FADER BANK — ruled track, wide dark caps. Rotated rather than
   `writing-mode`: a vertical-writing-mode range sizes itself off its
   ancestors and came out 514px tall inside a 62px bank. */
.sp12-faders {
  flex: 1; min-height: calc(54px * var(--k));
  display: grid; grid-template-columns: var(--cols);
  gap: var(--colgap);
  align-items: center;
  padding: 0 var(--edge);
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, .13) 0 1px,
      transparent 1px calc(11px * var(--k))),
    linear-gradient(180deg, #4a4e53 0%, #3f4348 100%);
  border-radius: calc(3px * var(--k));
  border: 1px solid #232529;
  box-shadow: inset 0 calc(2px * var(--k)) calc(6px * var(--k)) rgba(0, 0, 0, .4);
}
.sp12-fader { position: relative; height: 100%; min-width: 0; }
.sp12-fader input {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  position: absolute; top: 50%; left: 50%;
  /* Travel is published by the deck from the bank's measured height. */
  width: var(--travel, calc(52px * var(--k))); height: calc(16px * var(--k));
  margin-left: calc(var(--travel, calc(52px * var(--k))) / -2);
  margin-top: calc(-8px * var(--k));
  /* STATE THE ORIGIN: the studio's own sheet sets `transform-origin: 0 0`
     on inputs, which swung every cap a fader's length above its track. */
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  background: transparent; padding: 0; cursor: ns-resize;
}
.sp12-fader input::-webkit-slider-runnable-track {
  width: 100%; height: calc(4px * var(--k));
  background: linear-gradient(180deg, #101113 0%, #26292d 50%, #101113 100%);
  border-radius: 1px;
  box-shadow: inset 0 0 calc(2px * var(--k)) rgba(0, 0, 0, .9);
}
.sp12-fader input::-moz-range-track {
  width: 100%; height: calc(4px * var(--k));
  background: #14161a; border-radius: 1px;
}
/* THE CAP: `width` runs along the track, so after the rotation it is the
   cap's thickness; `height` becomes its width across the panel. */
.sp12-fader input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: calc(15px * var(--k)); height: var(--padw);
  /* Centre the cap on the 4px track: (4 - padw) / 2. */
  margin-top: calc((calc(4px * var(--k)) - var(--padw)) / 2);
  border-radius: calc(2px * var(--k));
  background:
    linear-gradient(90deg, #33373c 0%, #1c1f22 45%, #f0f2f4 45%, #f0f2f4 55%, #16181b 55%, #2c2f34 100%);
  border: 1px solid #08090a;
  box-shadow: 0 calc(2px * var(--k)) calc(4px * var(--k)) rgba(0, 0, 0, .75),
              inset 0 1px 0 rgba(255, 255, 255, .25);
}
.sp12-fader input::-moz-range-thumb {
  width: calc(15px * var(--k)); height: var(--padw);
  border-radius: calc(2px * var(--k));
  background:
    linear-gradient(90deg, #33373c 0%, #1c1f22 45%, #f0f2f4 45%, #f0f2f4 55%, #16181b 55%, #2c2f34 100%);
  border: 1px solid #08090a;
  box-shadow: 0 calc(2px * var(--k)) calc(4px * var(--k)) rgba(0, 0, 0, .75);
}
.sp12-fader input:focus-visible { outline: 1px solid #3d6a99; outline-offset: 2px; }
.sp12-fader input:focus:not(:focus-visible) { outline: none; }

/* One number per voice, riding between the two banks. */
.sp12-padnums {
  display: grid; grid-template-columns: var(--cols);
  gap: var(--colgap); padding: 0 var(--edge);
  justify-items: center; flex-shrink: 0;
  margin: calc(3px * var(--k)) 0 calc(2px * var(--k));
  font-size: calc(8.5px * var(--k)); color: #a4abb1; line-height: 1;
}

/* THE PADS — deep rubber, square, sitting on the floor of the module. */
.sp12-pads {
  flex-shrink: 0;
  display: grid; grid-template-columns: var(--cols);
  gap: var(--colgap); padding: 0 var(--edge);
  justify-items: center;
}
.sp12-pads > * { max-width: var(--padw); }
.sp12-pad {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; cursor: pointer;
  aspect-ratio: 1 / 1; width: 100%; height: auto;
  max-height: var(--padw);
  border: 1px solid #0a0b0c;
  border-radius: calc(5px * var(--k));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, #34383d 0%, #232629 55%, #16181b 100%);
  box-shadow:
    inset 0 calc(1px * var(--k)) 0 rgba(255, 255, 255, .18),
    inset 0 calc(-3px * var(--k)) calc(5px * var(--k)) rgba(0, 0, 0, .55),
    0 calc(3px * var(--k)) calc(6px * var(--k)) rgba(0, 0, 0, .6);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 calc(4px * var(--k)) calc(4px * var(--k));
  transition: transform .05s, box-shadow .05s, background .07s;
  min-width: 0;
}
.sp12-pad:active, .sp12-pad.lit {
  transform: translateY(calc(2px * var(--k)));
  background: linear-gradient(180deg, #4c5257 0%, #33373b 60%, #212427 100%);
  box-shadow:
    inset 0 calc(3px * var(--k)) calc(7px * var(--k)) rgba(0, 0, 0, .7),
    0 calc(1px * var(--k)) calc(1px * var(--k)) rgba(0, 0, 0, .5);
}
.sp12-pad.loaded { border-bottom: calc(2px * var(--k)) solid #3d8fd0; }
.sp12-pad.sel { border-color: #3d6a99; }
.sp12-pad.drop { outline: calc(2px * var(--k)) dashed #3d6a99; outline-offset: calc(-3px * var(--k)); }
.sp12-pad-print {
  font-size: calc(7px * var(--k)); letter-spacing: .02em; color: #8f979e;
  text-transform: uppercase; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.sp12-pad.loaded .sp12-pad-print { color: #a4d894; }

/* THE CHOP TRANSPORT — on the machine, beside the pads it chops into. */
/* A FIXED WIDTH. The label swaps between PLAY RECORD and STOP, and the
   shorter word let the whole transport slide out from under the pointer
   that had just pressed it. */
.sp12-chopplay {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; cursor: pointer;
  min-width: calc(84px * var(--k)); text-align: center;
  background: linear-gradient(180deg, #43474d 0%, #2b2e33 100%);
  border: 1px solid #0f1012; border-radius: calc(2px * var(--k));
  color: #dfe3e7; font: inherit; font-size: calc(7.5px * var(--k)); letter-spacing: .1em;
  padding: calc(3px * var(--k)) calc(9px * var(--k));
  box-shadow: 0 calc(2px * var(--k)) calc(2px * var(--k)) rgba(0, 0, 0, .5);
  white-space: nowrap;
}
.sp12-chopplay:disabled { opacity: .45; cursor: default; }
.sp12-chopplay.on {
  background: linear-gradient(180deg, #cd3a2f 0%, #97241c 100%);
  color: #ffe6e2; border-color: #6b1a12;
  box-shadow: 0 0 calc(9px * var(--k)) rgba(255, 80, 60, .55);
}
.sp12-chopstate {
  font-size: calc(6.5px * var(--k)); letter-spacing: .08em; color: #868c92;
  text-transform: uppercase; white-space: nowrap;
}
.sp12-chopstate.live { color: #ff8a7d; }

/* ---- The DISK bay: housed in the case ---- */
.sp12-col-disk {
  flex: 0 0 calc(300px * var(--k));
  transition: flex-basis .28s cubic-bezier(.22, .68, .28, 1);
}
/* WIDENING SPLITS THE PANEL, it does not add to it. Giving the bay a
   fixed 56% while the machine kept a 560px floor made the two columns
   add up to more than the dock has — measured, the widen key ended up at
   x=1681 in a 1600px window, off the edge and unreachable, so there was
   no way back. Both sides flex now and the machine drops its floor. */
.sp12-face.digging .sp12-col-machine { flex: 1 1 0; min-width: calc(300px * var(--k)); }
.sp12-face.digging .sp12-col-disk { flex: 1 1 0; min-width: calc(300px * var(--k)); }
.sp12-digkey {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; cursor: pointer;
  background: #23262a; border: 1px solid #0f1012; border-radius: calc(2px * var(--k));
  color: #b4b9be; font: inherit; font-size: calc(6.5px * var(--k)); letter-spacing: .12em;
  padding: calc(2px * var(--k)) calc(6px * var(--k));
}
.sp12-digkey.on { background: #3d6a99; color: #f2f6fa; border-color: #24455f; }

/* THE PLATTER: the record, its needle, and the window a pad may take. */
.sp12-platter {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'play scrub' 'play print';
  gap: calc(2px * var(--k)) calc(6px * var(--k));
  align-items: center;
  padding: calc(4px * var(--k)) calc(6px * var(--k));
  background: linear-gradient(180deg, #26292d 0%, #1c1f22 100%);
  border: 1px solid #101113; border-radius: calc(3px * var(--k));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.sp12-playkey { grid-area: play; width: calc(26px * var(--k)); height: calc(26px * var(--k)); font-size: calc(10px * var(--k)); }
.sp12-scrub {
  grid-area: scrub;
  position: relative; height: calc(13px * var(--k));
  background: linear-gradient(180deg, #0c0d0f 0%, #17191c 100%);
  border: 1px solid #0a0b0c; border-radius: calc(2px * var(--k));
  cursor: ew-resize; overflow: hidden;
  box-shadow: inset 0 1px calc(3px * var(--k)) rgba(0, 0, 0, .8);
}
.sp12-window {
  position: absolute; top: 0; bottom: 0;
  background: rgba(61, 106, 153, .42);
  border-left: 1px solid #6ba7dd; border-right: 1px solid #6ba7dd;
  pointer-events: none;
}
.sp12-needle {
  position: absolute; top: 0; bottom: 0; width: calc(2px * var(--k));
  margin-left: calc(-1px * var(--k));
  background: #ff4436; box-shadow: 0 0 calc(5px * var(--k)) rgba(255, 68, 54, .8);
  pointer-events: none;
}
.sp12-platter-print {
  grid-area: print;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; cursor: pointer; text-align: left;
  background: none; border: 0; padding: 0; font: inherit;
  font-size: calc(6.5px * var(--k)); letter-spacing: .08em; color: #868c92;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp12-platter-print:hover { color: #d3d7db; }
.sp12-platter.loaded .sp12-platter-print { color: #9ed08c; }

/* The crate sits behind its own bezel — the drive housing. */
.sp12-crate {
  flex: 1; min-height: 0;
  position: relative;
  /* Three views are stacked absolutely inside it, so it is their frame. */
  overflow: hidden;
  background: #0d0e10;
  border: calc(3px * var(--k)) solid #24272b;
  border-radius: calc(4px * var(--k));
  box-shadow:
    inset 0 0 0 1px #0a0b0c,
    inset 0 calc(3px * var(--k)) calc(10px * var(--k)) rgba(0, 0, 0, .75),
    0 1px 0 rgba(255, 255, 255, .05);
}
/* Pin the suggestor to the bay: it renders as a modal and came out 44px
   taller than this housing, dropping its dig controls off the bottom. */
.sp12-crate .sample-suggestor-overlay,
.sp12-crate .sample-suggestor-modal {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  min-height: 0; max-height: none; max-width: none;
  margin: 0; padding: 0;
  border-radius: 0; transform: none; overflow: hidden;
}

/* ---- The bay's view tabs: SCOPE / DISK / WAVE, and the widener ---- */
.sp12-baytabs {
  flex-shrink: 0;
  display: flex; align-items: stretch; gap: calc(3px * var(--k));
  padding-bottom: calc(3px * var(--k));
  border-bottom: calc(2px * var(--k)) solid #3d6a99;
}
/* THE TABS DO NOT GROW. They were `flex: 1`, so widening the bay
   stretched every one of them and slid the widen key out from under the
   pointer that had just pressed it. Fixed width, fixed order, and the
   toggle is anchored to the right edge. */
.sp12-baytab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; cursor: pointer;
  flex: 0 0 calc(52px * var(--k)); min-width: 0;
  background: linear-gradient(180deg, #34383d 0%, #24272b 100%);
  border: 1px solid #0f1012; border-radius: calc(2px * var(--k));
  color: #b9bfc5; font: inherit; font-size: calc(7.5px * var(--k)); letter-spacing: .12em;
  padding: calc(3px * var(--k)) calc(4px * var(--k));
  white-space: nowrap;
}
.sp12-baytab:hover { color: #eceef0; }
.sp12-baytab.on {
  background: linear-gradient(180deg, #4a7fb0 0%, #35597c 100%);
  color: #f4f8fb; border-color: #24455f;
}
/* The widener is a toggle and says which way it goes — the old key was a
   6px word in a corner and there was no obvious way back. */
.sp12-digtab { flex: 0 0 auto; margin-left: auto; }
.sp12-digtab.on { background: linear-gradient(180deg, #8a6a24 0%, #6b4e16 100%); border-color: #3d2c0a; color: #ffe9b0; }

/* One bay, three views stacked; only the live one is shown. */
.sp12-bayview { position: absolute; inset: 0; display: none; }
.sp12-bayview.on { display: block; }
.sp12-canvas { display: block; width: 100%; height: 100%; }

/* ---- WAVE editor ---- */
.sp12-wave.on { display: flex; flex-direction: column; }
.sp12-wave .sp12-canvas { flex: 1; min-height: 0; cursor: ew-resize; }
/* The tools WRAP rather than scroll: a row that runs off the edge hides
   the control you were reaching for, and at the bay's normal width three
   knobs plus the keys do not fit on one line. */
.sp12-wavetools {
  flex-shrink: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: calc(3px * var(--k)) calc(6px * var(--k));
  padding: calc(3px * var(--k)) calc(5px * var(--k));
  background: #16191b; border-top: 1px solid #0a0b0c;
}
.sp12-wavelab {
  font-size: calc(7px * var(--k)); letter-spacing: .1em; color: #8b9197;
  text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
}
.sp12-wavekey {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; cursor: pointer; flex-shrink: 0;
  background: linear-gradient(180deg, #3b3f45 0%, #2a2d32 100%);
  border: 1px solid #0f1012; border-radius: calc(2px * var(--k));
  color: #dfe3e7; font: inherit; font-size: calc(7px * var(--k)); letter-spacing: .1em;
  padding: calc(2px * var(--k)) calc(6px * var(--k)); white-space: nowrap;
}
.sp12-wavekey:disabled { opacity: .45; cursor: default; }
.sp12-waveknob {
  display: flex; align-items: center; gap: calc(4px * var(--k)); flex-shrink: 0;
  font-size: calc(6.5px * var(--k)); letter-spacing: .08em; color: #8b9197;
  text-transform: uppercase;
}
.sp12-waveknob input { width: calc(44px * var(--k)); accent-color: #5fe08a; }
.sp12-waveknob b { color: #cfd4d9; font-weight: 400; min-width: calc(24px * var(--k)); }
/* A wider bay puts them all back on one line. */
.sp12-face.digging .sp12-waveknob input { width: calc(74px * var(--k)); }
/* Spotify Artist Menu Styles */
/* The band defaults now live in index.css — every docked menu shares them, so
   they cannot belong to the artist menu's stylesheet. */

.spotify-container {
  background: linear-gradient(135deg, #121212 0%, #181818 100%);
  color: white;
  font-family: 'Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: fixed;
  top: var(--spotify-menu-top);
  bottom: var(--spotify-menu-bottom, 0px);
  left: calc(var(--spotify-menu-left) + var(--soundcraft-width));
  right: var(--spotify-menu-right, 0px);
  z-index: 200 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  border-top-left-radius: 12px;
  max-height: calc(100vh - var(--spotify-menu-top) - var(--spotify-menu-bottom, 0px));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.spotify-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(90deg, rgba(138, 43, 226, 0.2), rgba(29, 185, 84, 0.1));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 0;
  z-index: 201 !important;
  height: 60px;
}

.close-button {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.close-button:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.spotify-logo {
  width: 180px;
  margin-right: 24px;
  display: flex;
  align-items: center;
}

.spotify-logo-text {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #8A2BE2, #1DB954);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  margin-right: 20px;
  position: relative;
  padding-bottom: 4px;
}

.spotify-logo-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #8A2BE2, #1DB954);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(29, 185, 84, 0.3);
}

.spotify-logo-svg {
  width: 100%;
  height: auto;
}

.spotify-nav {
  display: flex;
  gap: 24px;
}

.nav-item {
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.nav-item:hover {
  opacity: 1;
}

.nav-item.active {
  opacity: 1;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  color: white;
}

.spotify-content {
  padding: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  height: calc(100% - 70px);
  position: relative;
}

.artist-grid-container {
  width: 50%;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  position: relative;
}

.artist-grid-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
  pointer-events: none;
  z-index: 1;
}

.artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 16px;
  padding-bottom: 20px;
  position: relative;
  z-index: 2;
}

.artist-card {
  background: linear-gradient(145deg, #1a1a1a, #222222);
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.artist-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(29, 185, 84, 0.05));
  opacity: 0;
  transition: opacity 0.3s;
}

.artist-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.artist-card:hover::before {
  opacity: 1;
}

.artist-card.selected {
  background: linear-gradient(145deg, #222222, #2a2a2a);
  box-shadow: 0 0 0 2px #1DB954, 0 8px 20px rgba(0, 0, 0, 0.4);
}

.artist-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  position: relative;
  transform: translateZ(0);
}

.artist-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
  opacity: 0.6;
  transition: opacity 0.3s;
}

.artist-card:hover .artist-image::after {
  opacity: 0.3;
}

.artist-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s;
}

.artist-card:hover .artist-image img {
  transform: scale(1.08);
}

.artist-name {
  font-weight: 700;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  color: #fff;
  margin-top: 8px;
}

.artist-type {
  font-size: 14px;
  color: #b3b3b3;
}

.artist-detail-container {
  width: 50%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  background: #181818;
  display: flex;
  flex-direction: column;
  position: relative;
}

.artist-detail-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.artist-detail-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(18,18,18,0.7) 0%, rgba(18,18,18,0.9) 60%, rgba(18,18,18,1) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.artist-detail-content,
.artist-detail-content-grid {
  width: 100%;
  padding: 36px 32px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  z-index: 2;
}

.artist-detail-content-grid {
  margin-top: 0;
}

.artist-detail-name-top {
  font-size: 2.1em;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  text-align: left;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  letter-spacing: 1px;
}

.artist-detail-main-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  width: 100%;
  align-items: flex-start;
}


.artist-detail-name {
  font-size: 2.2em;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  letter-spacing: 1px;
  text-align: center;
}

.artist-beat-style {
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 4px 12px;
  margin-bottom: 8px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  text-align: center;
  font-size: 1em;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artist-beat-style-right {
  background: rgba(0,0,0,0.55);
  border-radius: 10px;
  padding: 18px;
  color: #fff;
  text-align: left;
  font-size: 1.06em;
  width: 100%;
  min-height: 0;
  height: auto;
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: break-word;
  align-self: stretch;
  overflow: visible;
  box-shadow: none;
}

.artist-detail-main-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  width: 100%;
  align-items: stretch;
  align-content: stretch;
}


.artist-beat-style-right .beat-style-title {
  margin: 0 0 8px 0;
  font-size: 1.08em;
  font-weight: 700;
  color: #1db954;
}

.artist-beat-style-right .beat-style-description {
  margin: 0;
  font-size: 1em;
  color: #fff;
  white-space: normal;
  line-height: 1.4;
  width: 100%;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  display: block;
}


.songs-title {
  font-size: 1.1em;
  color: #fff;
  margin-bottom: 10px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.songs-list.songs-list-vertical {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  margin-top: 16px;
  position: static;
  padding: 0;
} 

.song-item.song-item-vertical {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: rgba(0,0,0,0.35);
  border-radius: 6px;
  padding: 4px 10px;
  min-height: 36px;
  width: 100%;
  transition: background 0.2s;
}
.song-item.song-item-vertical:hover {
  background: rgba(29,185,84,0.10);
}
.song-play-btn {
  background: #191414;
  border: none;
  outline: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.song-play-btn:hover {
  background: #1db954;
}
.song-play-btn svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}
.song-title-text {
  color: #fff;
  font-size: 1em;
  font-weight: 500;
  flex: 1 1 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-duration-text {
  color: #b3b3b3;
  font-size: 0.95em;
  margin-left: 10px;
  min-width: 40px;
  text-align: right;
}

.song-item.song-item-overlay:hover {
  background: rgba(29,185,84,0.15);
}

.song-play-icon {
  margin-right: 10px;
}

.song-title {
  font-size: 1em;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-duration {
  font-size: 0.9em;
  color: #b3b3b3;
}

.artist-detail-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.artist-detail-right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 0 0 0;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
}

.artist-detail-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  position: relative;
  transform: translateZ(0);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.artist-detail-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(29, 185, 84, 0.1));
  opacity: 0.6;
}

.artist-detail-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.artist-detail-name {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 10px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
  position: relative;
  display: inline-block;
}

.artist-detail-name::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #8A2BE2, #1DB954);
  border-radius: 3px;
}

.artist-detail-type {
  font-size: 14px;
  color: #b3b3b3;
  text-align: center;
}

.artist-beat-style {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.beat-style-title, .songs-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1DB954;
  margin-top: 0;
  display: flex;
  align-items: center;
}

.beat-style-title::before, .songs-title::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #8A2BE2, #1DB954);
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 2px 4px rgba(29, 185, 84, 0.3);
}

.beat-style-description {
  font-size: 14px;
  line-height: 1.5;
  color: #e0e0e0;
  margin-bottom: 0;
  background: linear-gradient(145deg, rgba(29, 185, 84, 0.05), rgba(138, 43, 226, 0.05));
  padding: 12px 15px;
  border-radius: 8px;
  border-left: 3px solid #1DB954;
  max-height: 70px;
  overflow-y: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.songs-title {
  font-size: 16px;
  font-weight: 700;
}

.songs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding: 0;
  width: 100%;
  max-height: 210px;
  overflow-y: auto;
}

.song-item-spotify {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(30, 30, 30, 0.6), rgba(20, 20, 20, 0.6));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  min-height: 28px;
  font-size: 13px;
}

.song-item-spotify:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.song-item-col-index {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b3b3b3;
  font-size: 14px;
}

.song-item-spotify .song-play-icon {
  display: none;
  fill: #fff;
}

.song-item-spotify .song-play-icon svg {
  display: block;
}

.song-item-spotify:hover .song-number {
  display: none;
}

.song-item-spotify:hover .song-play-icon {
  display: block;
}

.song-item-col-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.song-title-spotify {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.song-artist-spotify {
  font-size: 14px;
  color: #b3b3b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.song-item-col-duration {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #b3b3b3;
  font-variant-numeric: tabular-nums;
}

/* Artist Detail Page */
.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  margin-right: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.back-button:hover {
  background-color: rgba(0, 0, 0, 0.9);
  transform: scale(1.05);
}

.artist-detail-header {
  display: flex;
  align-items: flex-start;
  padding: 24px 20px 20px;
  background: linear-gradient(to bottom, rgba(138, 43, 226, 0.15), rgba(29, 185, 84, 0.05));
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.artist-header-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.artist-header-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.artist-header-info {
  margin-bottom: 24px;
}

.artist-type-label {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.artist-title {
  font-size: 72px;
  font-weight: 900;
  margin: 0 0 8px;
  line-height: 1;
}

.artist-stats {
  font-size: 14px;
  color: #b3b3b3;
}

.action-buttons {
  display: flex;
  align-items: center;
  margin: 24px 0;
  gap: 16px;
}

.play-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1db954;
  color: white;
  border: none;
  border-radius: 32px;
  padding: 8px 32px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s;
}

.play-button svg {
  margin-right: 8px;
  fill: currentColor;
}

.play-button:hover {
  transform: scale(1.04);
  background-color: #1ed760;
}

.follow-button {
  background-color: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.follow-button:hover {
  border-color: white;
}

.more-options {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.more-options svg {
  fill: #b3b3b3;
}

.more-options:hover svg {
  fill: white;
}

.song-list {
  margin-top: 16px;
}

.song-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(30, 30, 30, 0.6), rgba(20, 20, 20, 0.6));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

.song-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, #8A2BE2, #1DB954);
  opacity: 0;
  transition: opacity 0.3s;
}

.song-item:hover {
  background: linear-gradient(145deg, rgba(40, 40, 40, 0.7), rgba(30, 30, 30, 0.7));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.song-item:hover::before {
  opacity: 1;
}

.song-info {
  display: flex;
  flex-direction: column;
}

.song-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.song-duration {
  font-size: 11px;
  color: #b3b3b3;
}

.song-more svg {
  fill: #b3b3b3;
  opacity: 0;
}

.song-item:hover .song-more svg {
  opacity: 1;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 16px;
  color: #1DB954;
}
/* 3D STUDIO — fullscreen room over the flat app. Portaled to <body> and
   stacked above every studio overlay (load menus, headers, z-9999 panels)
   so nothing from the flat app can bleed into the room. */
.s3d-root {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #101013;
  cursor: crosshair;
}

/* ---- Screens in the room: real UI projected onto 3D glass ---- */
.s3d-surfaces { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.s3d-surfaces > div { pointer-events: none; }
.s3d-tv-frame { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.s3d-screen-idle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #39d0ff;
  background: #0b0e12;
  font-family: 'Helvetica Neue', Arial, sans-serif; /* impeccable-disable-line overused-font -- deck silkscreen face */
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
}
/* Decks dock via CSS vars with viewport fallbacks; inside a projected layer
   the layer IS the viewport (transform makes it the containing block for
   position:fixed), so zero the vars and let the deck fill the glass. */
.s3d-surface-deck {
  --spotify-menu-top: 0px;
  --spotify-menu-left: 0px;
  --soundcraft-width: 0px;
  --spotify-menu-right: 0px;
  --spotify-menu-bottom: 0px;
  --sdh-chrome: 0px;
  --spotify-menu-height: 820px;
}
/* On the desk these two ride the top edge of the panel band. There is no band
   inside the glass — the deck fills it — so keep them lifted off the surface
   exactly as they were before the band existed. */
.s3d-surface-deck .sdh-switch,
.s3d-surface-deck .sdh-kitbar { top: -22px; }
.s3d-canvas { position: absolute; inset: 0; }
/* A drag across the room is a LOOK, never a scroll. Without this the phone
   claims the gesture for panning/pull-to-refresh and cancels the pointer
   mid-swipe, so turning stalls partway through. */
.s3d-root canvas {
  display: block;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-touch-callout: none;
}
.s3d-root { overscroll-behavior: none; }

.s3d-crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.s3d-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: linear-gradient(rgba(8, 8, 10, 0.72), transparent);
  font-family: 'Helvetica Neue', Arial, sans-serif; /* impeccable-disable-line overused-font -- matches the deck silkscreen face */
  pointer-events: none;
}
.s3d-brand {
  color: #ffd08a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.s3d-hint {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.s3d-audio-warn { color: #7fd0ff; font-size: 10px; }
.s3d-exit,
.s3d-standup {
  all: unset;
  cursor: pointer;
  pointer-events: auto;
  padding: 7px 14px;
  border-radius: 7px;
  background: rgba(35, 37, 43, 0.9);
  box-shadow: inset 0 0 0 1px #101114;
  color: #ffd08a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.s3d-exit { margin-left: auto; }
.s3d-quality {
  all: unset;
  cursor: pointer;
  pointer-events: auto;
  margin-left: auto;
  padding: 7px 12px;
  border-radius: 7px;
  background: rgba(35, 37, 43, 0.9);
  box-shadow: inset 0 0 0 1px #101114;
  color: #9fb6e0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.s3d-quality + .s3d-door-btn,
.s3d-quality + .s3d-exit { margin-left: 0; }
.s3d-door-btn {
  all: unset;
  cursor: pointer;
  pointer-events: auto;
  margin-left: auto;
  padding: 7px 14px;
  border-radius: 7px;
  background: rgba(20, 110, 92, 0.85);
  box-shadow: inset 0 0 0 1px #0b3a30;
  color: #d9fff4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.s3d-door-btn + .s3d-exit { margin-left: 0; }

/* What the crosshair / cursor is over */
.s3d-aimhint {
  position: absolute;
  left: 50%;
  bottom: 104px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 7px;
  background: rgba(8, 8, 11, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.28);
  color: #ffd08a;
  font-family: 'Helvetica Neue', Arial, sans-serif; /* impeccable-disable-line overused-font -- deck silkscreen face */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  pointer-events: none;
  white-space: nowrap;
}

/* Seated station chips */
.s3d-chips {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  max-width: min(92vw, 900px);
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(8, 8, 11, 0.45);
  backdrop-filter: blur(7px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  font-family: 'Helvetica Neue', Arial, sans-serif; /* impeccable-disable-line overused-font -- deck silkscreen face */
}
.s3d-chip {
  all: unset;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(28, 31, 37, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: color 120ms ease, box-shadow 120ms ease, background 120ms ease, transform 120ms ease;
}
.s3d-chip:active { transform: translateY(1px); }
.s3d-chip:hover { color: #ffd08a; box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.4); }
.s3d-chip.is-on {
  background: rgba(255, 208, 138, 0.14);
  color: #ffd08a;
  box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.55);
}
.s3d-chip-back { color: #7fd0ff; }

/* The door: pick an experience */
.s3d-door {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: radial-gradient(ellipse at 50% 40%, rgba(10, 10, 14, 0.42), rgba(8, 8, 11, 0.86));
  font-family: 'Helvetica Neue', Arial, sans-serif; /* impeccable-disable-line overused-font -- deck silkscreen face */
}
.s3d-door-title {
  color: #ffd08a;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.3em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}
.s3d-door-cards { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; max-width: 1080px; }
.s3d-card {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 240px;
  padding: 22px 20px;
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(30, 32, 39, 0.94), rgba(16, 17, 21, 0.94));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px rgba(0, 0, 0, 0.5);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.s3d-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.55), 0 24px 48px rgba(0, 0, 0, 0.6);
}
.s3d-card b { color: #ffd08a; font-size: 13px; letter-spacing: 0.16em; }
.s3d-card span { color: #b9bec7; font-size: 11px; line-height: 1.55; }
.s3d-card i { color: #6d747e; font-size: 9px; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; }
.s3d-door-foot { color: rgba(255, 255, 255, 0.35); font-size: 10px; letter-spacing: 0.14em; }

/* A tripped room: message + retry instead of a dead app. */
.s3d-crash {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #e8e2d6;
  font-family: 'Helvetica Neue', Arial, sans-serif; /* impeccable-disable-line overused-font -- deck silkscreen face */
  letter-spacing: 0.08em;
  text-align: center;
}
.s3d-crash b { font-size: 14px; color: #ffd08a; }
.s3d-crash span { max-width: 60%; font-size: 11px; color: #9aa0a8; overflow-wrap: anywhere; }
.s3d-crash-row { display: flex; gap: 10px; margin-top: 6px; }
.s3d-crash-row button {
  all: unset;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 7px;
  background: #34373d;
  box-shadow: inset 0 0 0 1px #101114;
  color: #ffd08a;
  font-size: 10px;
  font-weight: 800;
}

/* The CRT takeover: the real deck laid onto the monitor's glass, room still
   visible around it — you're using the computer in the room, not in a modal. */
.s3d-crt { position: absolute; inset: 0; pointer-events: none; }
.s3d-crt-screen {
  position: absolute;
  overflow: hidden;
  pointer-events: auto;
  background: #05070a;
  box-shadow:
    inset 0 0 22px rgba(0, 0, 0, 0.9),
    inset 0 0 60px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(80, 170, 255, 0.16);
  border-radius: 6px / 8px;
}
.s3d-crt-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 1180px;
  height: 720px;
  transform-origin: 0 0;
}
/* Phosphor lines + corner falloff, matched to the tube in the scene. */
.s3d-crt-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.55) 100%),
    repeating-linear-gradient(rgba(0, 0, 0, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}

/* Seated: the real 2D gear UI over a dimmed room. */
.s3d-seat { position: absolute; inset: 0; }
.s3d-seat-veil {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 9, 0.45);
  backdrop-filter: blur(2px);
}
.s3d-seat-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffd08a;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.s3d-seat-browser {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, 92vw);
  height: min(640px, 86vh);
}
.s3d-seat-browser .sample-suggestor-overlay { position: absolute; inset: 0; }
.s3d-standup {
  position: absolute;
  top: 10px;
  right: 14px;
}


/* ---- Projected screens ---- */
/* The TV's player fills its glass exactly — nothing escapes the panel. */
.s3d-tv-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

/* Both decks are authored as viewport-docked panels (position: fixed with
   vh-based tops). Inside a projected 1180x820 layer those viewport units are
   nonsense — the deck must fill its screen edge-to-edge instead. This is
   what made the NPC look "stretched": it was docking to phantom viewport
   coordinates inside the glass. */
.s3d-surface-deck .mpc2k,
.s3d-surface-deck .srt-deck {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: 0 !important;
  z-index: 1 !important;
}

/* Warming up: the room renders (the canvas needs frames to become ready) but
   stays invisible, so the flat app keeps the page until the handoff. No
   black gap, and no stray clicks landing in an invisible room. */
.s3d-root.is-warming {
  opacity: 0;
  pointer-events: none;
}

/* The board on the wall: the adopted 2D app fills its projected layer.
   Compositing lives on the LAYER itself (that is the element the projector
   transforms) — this holder only needs to fill it. `contain: layout` here
   would put the app in its own layout context and shift its internals. */
.s3d-wallapp-holder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #101013;
}

/* Shown over the flat board while the room loads behind it, so pressing 3D
   never looks like it did nothing. */
.s3d-warming {
  /*
   * Centred and large, because it is the only thing on screen.
   *
   * This used to be an eleven-pixel pill in the bottom-right corner while
   * the building loaded — on a black screen for several seconds, with no
   * indication anything was happening, most people assume it has hung. It
   * now sits in the middle at a size you cannot miss, and says how far in
   * it is rather than just that it is trying.
   */
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #08080b;
  color: #ffd08a;
  font-family: 'Helvetica Neue', Arial, sans-serif; /* impeccable-disable-line overused-font -- deck silkscreen face */
  text-align: center;
  padding: 24px;
}

/*
 * The rotating line, and now the only words on the screen.
 *
 * "OPENING THE BUILDING" sat here in 48px caps with the line underneath it as
 * a subtitle, which made the flavour read as a footnote to a slogan. The line
 * has the size now and the slogan is gone. Sentence case and no tracking,
 * because it is a sentence — set as caps it reads as a title card rather than
 * as somebody talking.
 */
.s3d-warming__title {
  font-size: clamp(19px, 3.4vw, 30px);
  font-weight: 600;
  letter-spacing: 0.005em;
  margin: 0;
  max-width: min(30ch, 86vw);
  text-align: center;
  /* Two lines' worth, held: the longest lines wrap and the block below them
     must not hop up and down as they rotate. */
  min-height: 2.6em;
  animation: s3d-warm-line 420ms ease both;
}
@media (prefers-reduced-motion: reduce) {
  .s3d-warming__title { animation: none; }
}

.s3d-warming__pct {
  font-size: clamp(44px, 11vw, 96px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: #fff3df;
  margin: 0;
}

.s3d-warming__bar {
  width: min(420px, 74vw);
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 208, 138, 0.18);
  overflow: hidden;
}

.s3d-warming__bar i {
  display: block;
  height: 100%;
  background: #ffd08a;
  border-radius: inherit;
  /* Slow, because the bar moves in STEPS now: a milestone is a jump, and a
     jump that snaps looks like a glitch where a glide looks like progress. */
  transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * The sweep.
 *
 * Most of a cold load is spent between milestones — shaders compiling,
 * geometry uploading — and there is no honest fraction to report in that gap.
 * A still bar there reads as a hang, so the track carries a travelling
 * highlight: motion that promises nothing, over a number that never moves
 * unless something really happened.
 */
.s3d-warming__bar.is-working {
  position: relative;
}
.s3d-warming__bar.is-working::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 208, 138, 0) 0%,
    rgba(255, 208, 138, 0.42) 45%,
    rgba(255, 208, 138, 0) 90%
  );
  transform: translateX(-100%);
  animation: s3d-warm-sweep 1.7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes s3d-warm-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .s3d-warming__bar.is-working::after { animation: none; opacity: 0.25; transform: none; }
}

@keyframes s3d-warm-line {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes s3d-warm-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Build stamp — deliberately quiet, but findable without devtools. */
.s3d-build {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid rgba(233, 227, 214, 0.28);
  border-radius: 999px;
  color: rgba(233, 227, 214, 0.72);
  font: 500 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
/**
 * The stem desk. Rides the sl- tokens so it belongs to whichever library
 * opened it, and reads as a small console: a transport line, then one strip
 * per printed lane with its own M and S.
 */
/* It SLIDES DOWN out of the Stems line rather than appearing whole: the
   fold is the answer to a press, and the movement is what ties the two
   together. Height is animated from a grid track so the real content height
   is never guessed. */
.stemp {
  display: flex; flex-direction: column; gap: 10px; padding-top: 4px;
  animation: stemp-slide .18s ease-out;
}
@keyframes stemp-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .stemp { animation: none; } }

.stemp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stemp-play {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 1px solid var(--sl-acLn); background: var(--sl-acSoft); color: var(--sl-ac);
  font-size: 12px; line-height: 1; cursor: pointer;
}
.stemp-play:disabled { opacity: .5; cursor: default; }
.stemp-time {
  font-family: var(--sl-mono); font-size: 11px; color: var(--sl-tx2);
  font-variant-numeric: tabular-nums; flex: none;
}
.stemp-time i { opacity: .5; margin: 0 3px; font-style: normal; }

.stemp-scrub {
  flex: 1 1 140px; min-width: 120px; height: 6px; border-radius: 3px;
  background: var(--sl-raise); cursor: pointer; overflow: hidden;
}
.stemp-scrub i { display: block; height: 100%; background: var(--sl-ac); }
.stemp-scrub:focus-visible { outline: 2px solid var(--sl-ac); outline-offset: 3px; }

.stemp-zip {
  flex: none; border: 1px solid var(--sl-acLn); background: var(--sl-acSoft);
  color: var(--sl-ac); border-radius: 7px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.stemp-zip:hover:not(:disabled) { filter: brightness(1.12); }
.stemp-zip:disabled { opacity: .6; cursor: default; }

/* One strip per lane. Two columns on a wide panel, one on a phone. */
.stemp-lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; }
.stemp-lane { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 0; }
.stemp-lane.is-off .stemp-name { color: var(--sl-tx3); text-decoration: line-through; }

.stemp-m, .stemp-s {
  width: 22px; height: 22px; flex: none; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--sl-line); background: var(--sl-surf2); color: var(--sl-tx3);
  font-family: var(--sl-mono); font-size: 10px; line-height: 1; font-weight: 700;
}
.stemp-m[aria-pressed="true"] { background: #F26B6B22; border-color: #F26B6B; color: #F26B6B; }
.stemp-s.is-on { background: var(--sl-acSoft); border-color: var(--sl-acLn); color: var(--sl-ac); }

.stemp-name {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--sl-tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stemp-dl { font-size: 11px; color: var(--sl-tx3); text-decoration: none; border-bottom: 1px solid var(--sl-line); flex: none; }
.stemp-dl:hover { color: var(--sl-ac); border-color: var(--sl-acLn); }

/* Touch targets get bigger where fingers are. */
@media (max-width: 620px) {
  .stemp-m, .stemp-s { width: 30px; height: 30px; font-size: 11px; }
  .stemp-zip { width: 100%; min-height: 40px; }
}
/* nspire Library — Ink palette. Scoped under .sl-* so nothing here can leak
   into the deck's own styles, which share this document. */
.sl-scrim{
  --sl-bg:#0D0D0C; --sl-surf:#141413; --sl-surf2:#1A1A18; --sl-raise:#212120;
  --sl-tx:#F2F1ED; --sl-tx2:#A8A59D; --sl-tx3:#6E6B64;
  --sl-line:#252523; --sl-lineS:#1C1C1A;
  --sl-ac:#4ADE80; --sl-acFg:#08170E; --sl-acSoft:#132A1C; --sl-acLn:#1F4A31;
  --sl-mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;

  position:fixed; inset:0; z-index:1200; display:grid; place-items:center;
  background:rgba(6,6,5,.62); backdrop-filter:blur(3px); padding:24px;
}
/* An EXPLICIT light palette, applied when the toggle says so — same values as
   the prefers-color-scheme block below, but not at the mercy of the OS. The
   dark palette is the base, so .sl-dark needs no overrides at all: it simply
   opts out of the media query by being more specific than it. */
.sl-scrim.sl-light{
  --sl-bg:#F7F6F3; --sl-surf:#FFFFFF; --sl-surf2:#FBFAF8; --sl-raise:#FFFFFF;
  --sl-tx:#15150F; --sl-tx2:#55524A; --sl-tx3:#8B877D;
  --sl-line:#E4E1D9; --sl-lineS:#EEEBE4;
  --sl-ac:#12764A; --sl-acFg:#FFFFFF; --sl-acSoft:#E3F2E9; --sl-acLn:#B6DCC5;
  background:rgba(30,28,22,.4);
}
@media (prefers-color-scheme:light){
  /* Never let the OS light palette win over an explicit "dark". */
  .sl-scrim.sl-dark{
    --sl-bg:#0D0D0C; --sl-surf:#141413; --sl-surf2:#1A1A18; --sl-raise:#212120;
    --sl-tx:#F2F1ED; --sl-tx2:#A8A59D; --sl-tx3:#6E6B64;
    --sl-line:#252523; --sl-lineS:#1C1C1A;
    --sl-ac:#4ADE80; --sl-acFg:#08170E; --sl-acSoft:#132A1C; --sl-acLn:#1F4A31;
    background:rgba(6,6,5,.62);
  }
  .sl-scrim{
    --sl-bg:#F7F6F3; --sl-surf:#FFFFFF; --sl-surf2:#FBFAF8; --sl-raise:#FFFFFF;
    --sl-tx:#15150F; --sl-tx2:#55524A; --sl-tx3:#8B877D;
    --sl-line:#E4E1D9; --sl-lineS:#EEEBE4;
    --sl-ac:#12764A; --sl-acFg:#FFFFFF; --sl-acSoft:#E3F2E9; --sl-acLn:#B6DCC5;
    background:rgba(30,28,22,.4);
  }
}

.sl{
  width:min(1240px,100%); height:min(760px,92vh); background:var(--sl-bg); color:var(--sl-tx);
  border:1px solid var(--sl-line); border-radius:12px; overflow:hidden;
  /* Grid rather than flex-column: the row track pins the header height
     independently of whatever the header's own box is doing. */
  display:grid; grid-template-rows:54px minmax(0,1fr); grid-template-columns:100%;
  box-shadow:0 24px 70px -30px rgba(0,0,0,.85);
  font-family:ui-sans-serif,"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  font-size:14px; line-height:1.45;
}
.sl *{box-sizing:border-box}
/* :where() so this reset carries ZERO specificity. As `.sl button` it scored
   (0,1,1) and silently beat every single-class rule below it — .sl-b--go set a
   green fill and a white label and got neither, so the primary button rendered
   as plain text everywhere in this panel. */
:where(.sl) :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sl :focus-visible{outline:2px solid var(--sl-ac);outline-offset:2px;border-radius:4px}
.sl-n{font-family:var(--sl-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sl-k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-tx3);font-weight:600}
.sl-dim{color:var(--sl-tx3)}

.sl-bar{display:flex;align-items:center;gap:14px;padding:0 16px;
  /* NOTE: this class collided with the build sheet's element bar, which was
     also called .sl-bar and, being later in the file, handed the header
     width:34px. The element bar is .sl-elbar now — do not reuse this name. */
  height:54px;width:100%;
  background:var(--sl-surf);border-bottom:1px solid var(--sl-line)}
.sl-logo{display:flex;align-items:baseline;gap:7px}
.sl-logo b{font-size:15px;font-weight:750;letter-spacing:-.025em}
.sl-logo span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-tx3);font-weight:600}
.sl-find{flex:1;max-width:400px;display:flex;align-items:center;gap:9px;background:var(--sl-bg);
  border:1px solid var(--sl-line);border-radius:7px;padding:0 11px;height:32px;color:var(--sl-tx3)}
.sl-find:focus-within{border-color:var(--sl-acLn)}
.sl-find input{flex:1;border:0;background:none;color:var(--sl-tx);font:inherit;outline:none;min-width:0}
.sl-find input::-moz-placeholder{color:var(--sl-tx3)}
.sl-find input::placeholder{color:var(--sl-tx3)}
.sl-bar>.sl-b{flex:none}
.sl-spacer{flex:1 1 auto;min-width:0}
.sl-bar>.sl-find{flex:0 1 400px}
.sl-bar>.sl-logo{flex:none}

.sl-b{height:30px;padding:0 12px;border-radius:7px;border:1px solid var(--sl-line);
  background:var(--sl-surf2);color:var(--sl-tx2);font-size:12.5px;font-weight:550;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .14s,color .14s,border-color .14s}
.sl-b:hover{background:var(--sl-raise);color:var(--sl-tx);border-color:var(--sl-tx3)}
/* Downloads are anchors wearing the button. Strip the link decoration so an
   <a class="sl-b"> and a <button class="sl-b"> are indistinguishable. */
a.sl-b{text-decoration:none;cursor:pointer}
.sl-b--go{background:var(--sl-ac);border-color:var(--sl-ac);color:var(--sl-acFg);font-weight:650}
.sl-b--go:hover{background:var(--sl-ac);border-color:var(--sl-ac);color:var(--sl-acFg);filter:brightness(1.1)}
.sl-b:disabled{opacity:.55;cursor:default}

.sl-body{min-height:0;min-width:0;display:grid;grid-template-columns:170px minmax(0,1fr) 274px}
@media(max-width:1080px){.sl-body{grid-template-columns:170px minmax(0,1fr)}.sl-insp{display:none}}
@media(max-width:760px){.sl-body{grid-template-columns:minmax(0,1fr)}.sl-rail{display:none}}

.sl-rail{border-right:1px solid var(--sl-line);background:var(--sl-surf);padding:15px 9px;overflow-y:auto}
.sl-grp{display:flex;flex-direction:column;gap:1px}
.sl-grp>.sl-k{padding:0 9px 7px}
.sl-nav{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:7px;color:var(--sl-tx2);
  font-weight:500;text-align:left;width:100%;font-size:13px}
.sl-nav:hover:not(:disabled){background:var(--sl-surf2);color:var(--sl-tx)}
.sl-nav[aria-current="true"]{background:var(--sl-acSoft);color:var(--sl-ac);font-weight:650;
  box-shadow:inset 0 0 0 1px var(--sl-acLn)}
.sl-nav:disabled{color:var(--sl-tx3);cursor:default}
.sl-ct{margin-left:auto;font-family:var(--sl-mono);font-size:11px;color:var(--sl-ac)}
.sl-soon{margin-left:auto;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sl-tx3);border:1px dashed var(--sl-line);border-radius:3px;padding:1px 5px}

/* min-height:0 is what makes the list scroll. A grid item defaults to
   min-height:auto, so .sl-main grew to fit its rows instead of clipping them,
   and .sl-rows never had an overflow to scroll — the list just ran off the
   bottom of the panel. Adding the filter bar above it made the loss obvious. */
.sl-main{min-width:0;min-height:0;display:flex;flex-direction:column}
/* Titles get whatever is left. The fixed tracks were sized before rows grew a
   play button, which ate the title column — these are the smallest widths that
   still fit their longest real content (a venue pill, "Yesterday 22:35"). */
.sl-cols,.sl-row{display:grid;grid-template-columns:minmax(0,1fr) 104px 100px 80px 52px 58px;gap:10px;align-items:center}
/* The heading row has five cells; rows have a sixth for download + share. */
.sl-cols{grid-template-columns:minmax(0,1fr) 104px 100px 80px 52px 58px;padding:9px 16px;border-bottom:1px solid var(--sl-line);background:var(--sl-surf2);flex:none}
.sl-rows{flex:1;min-height:0;overflow-y:auto;
  /* Touch: keep the flick inside the list and let it carry momentum, rather
     than handing the gesture to the page behind the modal. */
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
.sl-row{padding:10px 16px;border-bottom:1px solid var(--sl-lineS);cursor:pointer;position:relative;
  background:var(--sl-bg);transition:background .12s}
.sl-row:hover{background:var(--sl-surf)}
.sl-row.is-on{background:var(--sl-acSoft)}
.sl-row.is-on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sl-ac)}
.sl-lead{display:flex;align-items:center;gap:12px;min-width:0}
.sl-stack{min-width:0;display:flex;flex-direction:column;gap:3px}
.sl-ttl{font-weight:600;font-size:13.5px;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-gen{font-size:11px;color:var(--sl-tx2);display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-gen i{width:7px;height:7px;border-radius:50%;flex:none}
.sl-badge{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--sl-tx3);
  border:1px solid var(--sl-line);border-radius:3px;padding:1px 5px;flex:none}
/* venue tag — where the session was recorded, read at a glance */
.sl-venue{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:bottom;font-size:10.5px;font-weight:600;letter-spacing:.03em;
  color:var(--sl-tx2);background:var(--sl-surf2);
  border:1px solid var(--sl-line);border-radius:999px;padding:2px 9px}

.sl-cell{font-size:12px;color:var(--sl-tx2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-acts{display:flex;justify-content:flex-end}

/* recipe glyph — the identity device */
.sl-glyph{border-radius:5px;background:var(--sl-surf2);border:1px solid var(--sl-line);flex:none;
  display:flex;flex-direction:column;justify-content:center;gap:2px;padding:5px;overflow:hidden}
.sl-glyph>span{height:3px;border-radius:2px;display:block}
/* A hairline between bars. Without it a session whose strips share one genre
   renders as a single flat square and the glyph stops reading as strips. */
.sl-glyph--lg{width:100%;aspect-ratio:1;border-radius:10px;gap:2px;padding:0;justify-content:stretch}
.sl-glyph--lg>span{height:auto;flex:1;border-radius:0}

.sl-empty{padding:52px 24px;text-align:center;color:var(--sl-tx3)}
.sl-empty b{display:block;font-size:14px;color:var(--sl-tx2);font-weight:600;margin-bottom:6px}
.sl-empty p{margin:0 auto;font-size:12.5px;max-width:46ch;line-height:1.55}
.sl-note{padding:9px 16px;border-top:1px solid var(--sl-line);background:var(--sl-surf);
  font-size:12px;color:var(--sl-tx2);flex:none}

.sl-insp{border-left:1px solid var(--sl-line);background:var(--sl-surf);padding:16px;
  min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.sl-h{margin:0;font-size:17px;font-weight:750;letter-spacing:-.025em;line-height:1.25;text-wrap:balance}
.sl-sub{margin:5px 0 0;font-size:12.5px;color:var(--sl-tx3)}
.sl-facts{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:12.5px;margin:0}
.sl-facts dt{color:var(--sl-tx3)}
.sl-facts dd{margin:0;color:var(--sl-tx2)}
.sl-build{border:1px solid var(--sl-line);border-radius:7px;overflow:hidden}
.sl-build>.sl-k{display:block;padding:9px 12px;background:var(--sl-surf2);border-bottom:1px solid var(--sl-line)}
.sl-el{display:flex;align-items:center;gap:11px;padding:7px 12px;border-bottom:1px solid var(--sl-lineS);font-size:12px}
.sl-el:last-child{border-bottom:0}
.sl-en{color:var(--sl-tx3);width:56px;flex:none;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:650}
.sl-elbar{height:5px;width:34px;border-radius:3px;flex:none}
.sl-gn{font-weight:650;text-transform:capitalize}
.sl-el.is-off .sl-gn{color:var(--sl-tx3);font-weight:500;font-style:italic;text-transform:none}
.sl-do{margin-top:auto;display:flex;flex-direction:column;gap:7px}
.sl-do .sl-b{width:100%;justify-content:center;height:34px}

@media (prefers-reduced-motion:reduce){.sl *{transition:none!important}}

/* audition: row play button + the panel's own transport */
.sl-play{width:26px;height:26px;border-radius:50%;border:1px solid var(--sl-line);
  background:var(--sl-surf2);display:grid;place-items:center;color:var(--sl-tx2);flex:none;
  transition:background .12s,color .12s,border-color .12s}
.sl-play:hover{background:var(--sl-ac);border-color:var(--sl-ac);color:var(--sl-acFg)}
.sl-row.is-on .sl-play{background:var(--sl-ac);border-color:var(--sl-ac);color:var(--sl-acFg)}

.sl-tp{display:flex;align-items:center;gap:12px;padding:10px 16px;flex:none;
  border-top:1px solid var(--sl-line);background:var(--sl-surf)}
.sl-tpgo{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--sl-ac);color:var(--sl-acFg)}
.sl-tpgo:hover{filter:brightness(1.1)}
.sl-tpname{font-size:12.5px;font-weight:600;max-width:220px;flex:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-tpt{font-size:11px;color:var(--sl-tx3);flex:none;min-width:34px}
.sl-seek{flex:1;min-width:0;height:6px;border-radius:3px;background:var(--sl-line);
  cursor:pointer;position:relative;overflow:hidden}
.sl-seek:hover{height:8px}
.sl-seekfill{position:absolute;inset:0 auto 0 0;background:var(--sl-ac);border-radius:3px}
.sl-b--sm{height:26px;padding:0 9px;font-size:11.5px}

/* the ledger drawer — opens under a row when you click it */
.sl-drawer{background:var(--sl-surf);border-bottom:1px solid var(--sl-line)}
.sl-dsec{padding:12px 16px 14px;border-bottom:1px solid var(--sl-lineS)}
.sl-dsec:last-child{border-bottom:0}
.sl-dsec>.sl-k{display:block;margin-bottom:9px}
.sl-ledger{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 18px}
.sl-dacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sl-take{display:flex;align-items:center;gap:11px}
.sl-take .sl-ttl{flex:1;min-width:0}
/* A take paired by timing rather than stored outright. Said quietly, but said. */
.sl-inf{font-style:normal;color:var(--sl-tx3);text-transform:none;letter-spacing:0}
/* Keeps the glyph column aligned on rows whose take has no audio to play. */
.sl-play--none{background:none;border-color:transparent}

/* filters — facet chips above the list */
.sl-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:none;
  padding:9px 16px;border-bottom:1px solid var(--sl-lineS);background:var(--sl-bg)}
.sl-fg{display:flex;align-items:center;gap:5px}
.sl-fg>.sl-k{margin-right:2px}
.sl-chip{height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--sl-line);
  background:var(--sl-surf2);color:var(--sl-tx2);font-size:11.5px;font-weight:600;
  white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
.sl-chip:hover{border-color:var(--sl-tx3);color:var(--sl-tx)}
.sl-chip.is-on{background:var(--sl-acSoft);border-color:var(--sl-acLn);color:var(--sl-ac)}
.sl-chip--clr{color:var(--sl-tx3);border-style:dashed}

/* stems — one row per file, play here or take it away */
.sl-stems{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:5px 16px}
.sl-stem{display:flex;align-items:center;gap:10px;min-width:0;padding:3px 0}
.sl-sn{flex:1;min-width:0;font-size:12.5px;text-transform:capitalize;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-stem.is-on .sl-sn{color:var(--sl-ac);font-weight:600}
/* Now a <button>, because a cross-origin <a download> only ever navigated.
   It has to keep looking exactly like the link it was. */
.sl-dl{font-size:11px;color:var(--sl-tx3);text-decoration:none;border-bottom:1px solid var(--sl-line);flex:none;background:none;border-left:0;border-right:0;border-top:0;padding:0;cursor:pointer;font-family:inherit}
.sl-dl:hover{color:var(--sl-ac);border-color:var(--sl-acLn)}
/* Taking the whole set is the headline action on this list, so it reads as a
   button rather than as one more quiet download link. */
.sl-dl--all{grid-column:1/-1;margin-top:8px;justify-self:start;border:1px solid var(--sl-acLn);
  border-radius:7px;padding:6px 12px;color:var(--sl-ac);background:var(--sl-acSoft);font-size:12px;font-weight:600}
.sl-dl--all:hover{filter:brightness(1.12);color:var(--sl-ac)}
.sl-dl--all:disabled{opacity:.6;cursor:default;filter:none}
.sl-stems__page{grid-column:1/-1;font-size:11px}
.sl-lnk{color:var(--sl-ac)}

/* versions — the lineage of a recording, as a tree */
.sl-vers{display:flex;flex-direction:column;gap:4px}
.sl-ver,.sl-vrow{display:flex;align-items:center;gap:9px;font-size:12.5px;position:relative}
.sl-vn{font-family:var(--sl-mono);font-size:11px;color:var(--sl-tx3);width:26px;flex:none}
.sl-vt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-vart{font-weight:650}
/* The elbow that says "this came from the one above it". */
.sl-branch{position:absolute;left:-14px;top:50%;width:11px;height:1px;background:var(--sl-line)}
.sl-branch::before{content:"";position:absolute;left:0;bottom:0;width:1px;height:20px;background:var(--sl-line)}
.sl-kind{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  border-radius:3px;padding:2px 6px;margin-right:7px}
.sl-kind--flip{color:#F075AE;background:rgba(240,117,174,.12)}
.sl-kind--extend{color:#5AA6F5;background:rgba(90,166,245,.12)}
.sl-kind--take{color:var(--sl-tx3);background:var(--sl-surf2)}
.sl-vct{font-family:var(--sl-mono);font-size:12px;color:var(--sl-tx3);
  display:inline-flex;align-items:center;gap:5px}
.sl-vct.is-new{color:var(--sl-ac);font-weight:700}
.sl-dot{width:6px;height:6px;border-radius:50%;background:var(--sl-ac);flex:none;
  box-shadow:0 0 0 3px var(--sl-acSoft)}

/* NEW SINCE YOU LOOKED. A flip lands minutes later, usually while you are
   somewhere else in the list — the row has to say so on its own. */
.sl-new{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--sl-acFg);background:var(--sl-ac);border-radius:3px;padding:1px 5px;flex:none}
.sl-row.has-new{background:linear-gradient(90deg,var(--sl-acSoft),transparent 42%)}
.sl-row.has-new::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--sl-ac)}
.sl-row.has-new:hover{background:linear-gradient(90deg,var(--sl-acSoft),var(--sl-surf) 42%)}
.sl-ver.is-new .sl-vt{font-weight:650}
.sl-ver.is-new::after{content:"new";font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--sl-ac);flex:none;order:-1}
.sl-newct{font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--sl-acFg);
  background:var(--sl-ac);border-radius:999px;padding:1px 6px;margin-left:auto}
.sl-newct + .sl-ct{margin-left:6px}

/* ---- BEAT TAPES ------------------------------------------------------- */
/* The split INVERTS in tape mode. A list of tape names and dates needs
   almost no width; the editor — artwork, running order, permissions —
   needs all of it. So the middle narrows and the right takes over. */
.sl-body--tapes{grid-template-columns:170px 300px minmax(0,1fr)}
@media(max-width:1080px){.sl-body--tapes{grid-template-columns:170px 260px minmax(0,1fr)}
  .sl-body--tapes .sl-insp{display:block}}
@media(max-width:760px){.sl-body--tapes{grid-template-columns:minmax(0,1fr)}
  .sl-body--tapes .sl-main{display:none}}

/* the tape list in the middle pane */
.sl-tapecards{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px}
.sl-tapecard{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px;border-radius:9px;transition:background .12s}
.sl-tapecard:hover{background:var(--sl-surf)}
.sl-tapecard.is-on{background:var(--sl-acSoft);box-shadow:inset 0 0 0 1px var(--sl-acLn)}
.sl-tapeart{width:46px;height:46px;border-radius:7px;overflow:hidden;flex:none;
  background:var(--sl-surf2);border:1px solid var(--sl-line);display:grid;place-items:center}
.sl-tapeart img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.sl-tapeart i{font-style:normal;font-size:17px;color:var(--sl-tx3)}
.sl-tapecardtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
/* The state is a footnote next to the name, not a headline. It was reading
   louder than the tape's own title. */
.sl-tapecard .sl-badge{font-size:8.5px;padding:0 4px;letter-spacing:.04em;
  border-color:transparent;background:none;color:var(--sl-tx3)}
.sl-tapecard .sl-badge--live{color:var(--sl-ac);background:none}
.sl-tapecard .sl-render{font-size:8.5px;padding:0 4px;background:none}

/* drag to reorder */
.sl-grip{cursor:grab;color:var(--sl-tx3);font-size:13px;line-height:1;flex:none;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;letter-spacing:-2px}
.sl-tapetrack{cursor:grab}
.sl-tapetrack.is-dragging{opacity:.4}
.sl-tapetrack.is-over{box-shadow:inset 0 2px 0 var(--sl-ac)}
.sl-tapetrack:active{cursor:grabbing}

/* a version's shape, on its own line */
.sl-verwave{flex:0 0 132px;min-width:0;opacity:.85}
.sl-ver:hover .sl-verwave{opacity:1}

/* the look picker at publish */
.sl-looks{flex:1;min-height:0;overflow-y:auto;padding:4px 12px 12px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.sl-look{display:flex;flex-direction:column;gap:5px;padding:9px;border-radius:9px;
  border:1px solid var(--sl-line);background:var(--sl-surf2);text-align:left;
  transition:border-color .12s,background .12s}
.sl-look:hover{border-color:var(--sl-tx3)}
.sl-look.is-on{border-color:var(--sl-ac);background:var(--sl-acSoft)}
.sl-lookthumb{height:52px;border-radius:6px;display:block;background:var(--sl-raise)}
.sl-lookthumb--tape{background:linear-gradient(135deg,#2b2b28,#4a4741)}
.sl-lookthumb--wave{background:linear-gradient(135deg,#f4f2ec,#d9d5cb)}
.sl-lookthumb--b-dark{background:linear-gradient(135deg,#120c1c,#3a1f52)}
.sl-lookthumb--b-light{background:linear-gradient(135deg,#faf7f2,#e6ddd0)}
.sl-lookthumb--c-light{background:linear-gradient(135deg,#e8e3d8,#c9c2b2)}
.sl-lookthumb--c-dark{background:linear-gradient(135deg,#26262a,#3d3d44)}
.sl-lookthumb--studio3d{background:linear-gradient(135deg,#0d1a24,#1f4a5e)}
.sl-lookname{font-size:12.5px;font-weight:650}
.sl-lookdesc{font-size:11px;color:var(--sl-tx3);line-height:1.35}

/* stems, on the right, with their price */
.sl-sidestems{display:flex;align-items:center;justify-content:space-between;gap:9px}
.sl-sidestems .sl-k{margin:0}


/* A tape is a shared session with more than one song in it, so its editor
   takes the whole middle rather than living in a drawer. */
.sl-tape{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.sl-tapehd{display:flex;align-items:flex-start;gap:14px;padding:16px;
  border-bottom:1px solid var(--sl-line)}
.sl-tapemeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.sl-titlein{font-size:19px;font-weight:750;letter-spacing:-.025em;color:var(--sl-tx);
  background:none;border:0;border-bottom:1px solid transparent;padding:2px 0;width:100%}
.sl-titlein:hover,.sl-titlein:focus{border-bottom-color:var(--sl-line);outline:none}
.sl-welcome{font:inherit;font-size:12.5px;color:var(--sl-tx2);background:var(--sl-surf2);
  border:1px solid var(--sl-line);border-radius:7px;padding:7px 9px;resize:vertical;width:100%}
.sl-taperow{display:flex;align-items:center;gap:8px;font-size:12px}
.sl-badge--live{color:var(--sl-acFg);background:var(--sl-ac);border-color:var(--sl-ac)}

/* artwork: a picture the tape carries itself */
/* .sl-cover--lg is width:100% for the inspector's big square; the tape's
   cover sits in a flex row and must NOT stretch, so it overrides both the
   width and the aspect-ratio it would otherwise inherit. */
.sl-artdrop.sl-cover--lg{width:104px;height:104px;aspect-ratio:auto;flex:none;
  cursor:pointer;position:relative;display:grid;place-items:center}
.sl-artdrop img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.sl-artadd{font-size:10.5px;color:var(--sl-tx3);text-align:center;padding:0 8px;line-height:1.4}
.sl-artdrop:hover .sl-artadd{color:var(--sl-ac)}

.sl-tapetrack{gap:9px}
.sl-trackin{flex:1;min-width:0;font:inherit;font-size:12.5px;color:var(--sl-tx);
  background:none;border:0;border-bottom:1px solid transparent;padding:2px 0}
.sl-trackin:hover,.sl-trackin:focus{border-bottom-color:var(--sl-line);outline:none}
.sl-tapemove{display:flex;gap:2px;flex:none}

/* what the listener may touch */
.sl-perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:6px 14px}
.sl-perm{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--sl-tx2);cursor:pointer}
.sl-perm input{accent-color:var(--sl-ac);width:14px;height:14px}

/* add-to-tape menu */
.sl-tapemenu{position:relative;display:inline-flex}
/* The menu PORTALS to document.body (see AddToTape), which means it renders
   with no .sl-scrim ancestor — and every colour it wears is an --sl-*
   variable that only .sl-scrim defines. Without these defaults the panel
   resolved to a TRANSPARENT background with inherit-coloured text: present,
   on top, and invisible. Direct-child-of-body is exactly the portal case, so
   the in-library panel keeps taking the scrim's own palette. */
body > .sl-tapemenu{
  --sl-raise:#212120; --sl-surf:#141413; --sl-surf2:#1A1A18;
  --sl-line:#252523; --sl-tx:#F2F1ED; --sl-tx2:#A8A59D; --sl-tx3:#6E6B64;
  --sl-ac:#4ADE80;
  --sl-mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
  font-family:ui-sans-serif,"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
}
body > .sl-tapemenu .sl-tapeitem{background:none;border:0;cursor:pointer;font:inherit;font-size:12.5px}
body > .sl-tapemenu .sl-tapenew{background:var(--sl-raise);border:1px solid var(--sl-line);
  border-radius:9px;padding:6px;box-shadow:0 16px 40px -16px rgba(0,0,0,.7)}
/* z-index above the panel itself (1200): the list is position:fixed to
   escape the row scroller's clip, so it is no longer inside the panel's
   stacking context and has to out-rank it. */
.sl-tapelist{position:absolute;bottom:calc(100% + 6px);left:0;z-index:1400;min-width:210px;
  max-height:260px;overflow-y:auto;padding:5px;border-radius:9px;
  background:var(--sl-raise);border:1px solid var(--sl-line);
  box-shadow:0 16px 40px -16px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:1px}
.sl-tapeitem{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;padding:7px 9px;border-radius:6px;font-size:12.5px;
  color:var(--sl-tx2);white-space:nowrap}
.sl-tapeitem:hover:not(:disabled){background:var(--sl-surf);color:var(--sl-tx)}
.sl-tapeitem i{font-style:normal;font-size:11px;color:var(--sl-tx3);font-family:var(--sl-mono)}
.sl-tapeitem--new{color:var(--sl-ac);font-weight:650;
  border-bottom:1px solid var(--sl-line);border-radius:6px 6px 0 0;margin-bottom:3px}
.sl-tapenew{display:inline-flex;align-items:center;gap:6px}
.sl-tapenew input{font:inherit;font-size:12.5px;height:26px;width:150px;padding:0 8px;
  border-radius:6px;border:1px solid var(--sl-ac);background:var(--sl-surf2);color:var(--sl-tx)}

/* the rail's tape list */
.sl-navtape{gap:7px}
.sl-navtitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.sl-railempty{margin:2px 10px 0;font-size:11.5px;color:var(--sl-tx3);line-height:1.5}

/* sortable headings */
.sl-sort{display:flex;align-items:center;gap:5px;padding:0;text-align:left;
  color:var(--sl-tx3);transition:color .12s}
.sl-sort:hover{color:var(--sl-tx2)}
.sl-sort.is-on{color:var(--sl-ac)}
.sl-sort i{font-style:normal;font-size:8px;line-height:1}

/* the only two actions on a row */
.sl-rowacts{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.sl-icon{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;flex:none;
  color:var(--sl-tx3);font-size:13px;text-decoration:none;line-height:1;
  transition:background .12s,color .12s}
.sl-icon:hover{background:var(--sl-surf2);color:var(--sl-ac)}

/* the inspector's own player — always the thing you can hear */
.sl-inspwave{display:flex;flex-direction:column;gap:7px}
.sl-inspplay{display:flex;align-items:center;gap:9px}

/* delete, and the question it always asks first */
.sl-b--quiet{color:var(--sl-tx3);border-style:dashed}
.sl-b--quiet:hover{color:#F26B6B;border-color:#F26B6B;border-style:solid}
.sl-b--kill{background:#F26B6B;border-color:#F26B6B;color:#2A0B0B;font-weight:650}
.sl-b--kill:hover{background:#F26B6B;border-color:#F26B6B;filter:brightness(1.08)}
.sl-danger{border:1px solid #6B2B2B;background:rgba(242,107,107,.08);
  border-radius:8px;padding:11px 12px;display:flex;flex-direction:column;gap:9px}
.sl-danger p{margin:0;font-size:12.5px;color:var(--sl-tx2);line-height:1.5}
.sl-dangerrow{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sl-do .sl-dangerrow .sl-b{width:100%;justify-content:center;height:32px}

/* cover art — a stable picture per record, glyph banded across the bottom */
.sl-cover{position:relative;flex:none;border-radius:6px;overflow:hidden;display:block;
  background:var(--sl-surf2);border:1px solid var(--sl-line)}
.sl-cover img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
/* The glyph is a BAND across the foot of the cover, not the cover itself.
   Glyph writes its own inline width/height, which beats any class — hence
   !important, or the band grows to full size and hides the picture. */
.sl-cover .sl-glyph{position:absolute;left:0;right:0;bottom:0;
  height:9px!important;width:auto!important;
  border:0;border-radius:0;padding:0;gap:0;background:rgba(0,0,0,.35);
  flex-direction:row;backdrop-filter:blur(2px)}
.sl-cover .sl-glyph>span{height:100%!important;flex:1;border-radius:0;width:auto!important}
.sl-cover--lg{width:100%;aspect-ratio:1;border-radius:10px}
.sl-cover--lg .sl-glyph{height:16px!important}

/* theme switch */
.sl-theme{gap:7px}
.sl-themew{font-size:11px;color:var(--sl-tx3)}

/* a version that is playable but not yet a finished file */
.sl-render{font-size:9px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:#5AA6F5;background:rgba(90,166,245,.14);border-radius:3px;padding:1px 5px;margin-left:7px}

/* vocals / beat only — one choice, both visible */
.sl-seg{display:inline-flex;border:1px solid var(--sl-line);border-radius:999px;
  overflow:hidden;background:var(--sl-surf2);flex:none}
.sl-segb{height:24px;padding:0 11px;font-size:11.5px;font-weight:600;color:var(--sl-tx3);
  white-space:nowrap;transition:background .12s,color .12s}
.sl-segb:hover{color:var(--sl-tx)}
.sl-segb.is-on{background:var(--sl-ac);color:var(--sl-acFg)}

/* the artist a version was aimed at, wearing their own face */
.sl-vface{border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;
  background:var(--sl-surf2);border:1px solid var(--sl-line);margin-right:7px;
  vertical-align:middle}
.sl-vface img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.sl-vface i{font-style:normal;font-size:10px;font-weight:700;color:var(--sl-tx3)}
.sl-vt{display:flex;align-items:center;gap:0}

/* the ghost: the row a generation will become, holding its place */
.sl-ghost{position:relative;overflow:hidden;border-radius:6px;
  background:var(--sl-surf2);padding:4px 8px;opacity:.92}
.sl-ghost .sl-vart{color:var(--sl-tx2)}
.sl-scan{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(74,222,128,.16) 50%,transparent 80%);
  transform:translateX(-100%);animation:sl-scan 1.9s ease-in-out infinite}
@keyframes sl-scan{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.sl-scan{animation:none;opacity:.35;transform:none}}
.sl-b--flat{opacity:.6;cursor:default}

/* extend: which end? asked before the credits go, never guessed */
.sl-side{display:inline-flex;align-items:center;gap:6px;
  padding:3px 7px;border-radius:8px;background:var(--sl-surf2);border:1px solid var(--sl-line)}
.sl-side .sl-k{margin:0}
.sl-sidepair{display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;gap:7px}
.sl-sidepair .sl-k{margin:0}
.sl-do .sl-sidepair .sl-b{width:100%;justify-content:center;height:34px}

/* waveform — the shape of the file, click anywhere to seek */
.sl-wave{display:flex;align-items:flex-end;gap:1px;width:100%;cursor:pointer;
  padding:0;border-radius:5px;background:var(--sl-surf2);overflow:hidden}
.sl-wave i{flex:1;min-width:1px;background:var(--sl-tx3);opacity:.55;border-radius:1px;
  transition:background .1s,opacity .1s}
.sl-wave i.is-played{background:var(--sl-ac);opacity:1}
.sl-wave:hover i{opacity:.8}
.sl-wave:hover i.is-played{opacity:1}
.sl-wave.is-loading i{opacity:.25}
.sl-wave.is-failed{cursor:default}

/* folds — stems and the build sheet, shut until asked for */
.sl-fold{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:0;text-align:left;color:inherit}
.sl-fold .sl-k{margin:0}
.sl-fold:hover .sl-k{color:var(--sl-tx2)}
.sl-caret{font-family:var(--sl-mono);font-size:14px;line-height:1;color:var(--sl-tx3)}

/* artist picker — a sheet over the library, not a second window */
.sl-scrim--over{z-index:1300;background:rgba(6,6,5,.5)}
.sl-ap{width:min(620px,100%);max-height:min(640px,88vh);background:var(--sl-bg);color:var(--sl-tx);
  border:1px solid var(--sl-line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 24px 70px -30px rgba(0,0,0,.85);
  font-family:ui-sans-serif,"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;font-size:14px}
.sl-ap *{box-sizing:border-box}
:where(.sl-ap) :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sl-aphd{display:flex;align-items:flex-start;gap:14px;padding:16px;border-bottom:1px solid var(--sl-line)}
.sl-aphd>div{flex:1;min-width:0}
.sl-aprow{display:flex;align-items:center;gap:9px;padding:12px 16px}
.sl-aprow .sl-find{flex:1;min-width:0}
.sl-apk{display:block;padding:0 16px 7px}
.sl-apl{flex:1;min-height:0;overflow-y:auto;padding:0 8px 12px}
.sl-art{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:9px 12px;border-radius:7px;transition:background .12s}
.sl-art:hover:not(:disabled){background:var(--sl-surf)}
.sl-art:disabled{opacity:.5;cursor:default}
.sl-artn{font-weight:600;font-size:13.5px;flex:none;max-width:46%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-arts{flex:1;min-width:0;font-size:11.5px;color:var(--sl-tx3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-artgo{flex:none;font-size:11px;font-weight:650;color:var(--sl-ac);opacity:0;
  display:inline-flex;align-items:center;gap:5px}
.sl-art:hover .sl-artgo,.sl-art:focus-visible .sl-artgo{opacity:1}
/* The price rides on the action. Tabular so it never jitters on hover. */
.sl-cost{font-family:var(--sl-mono);font-variant-numeric:tabular-nums;font-size:10.5px;
  font-weight:700;color:var(--sl-acFg);background:var(--sl-ac);border-radius:4px;padding:1px 5px}

/* artist portraits — names first, faces as they arrive */
.sl-face{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--sl-surf2);border:1px solid var(--sl-line);display:grid;place-items:center}
.sl-face img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.sl-facei{font-size:15px;font-weight:700;color:var(--sl-tx3)}
.sl-artx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sl-artx .sl-artn{max-width:100%}

/* the sheet's footer: what this costs and what it leaves you */
.sl-apft{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;border-top:1px solid var(--sl-line);background:var(--sl-surf);
  font-size:12px;color:var(--sl-tx3);flex:none}

/* a flip in flight, on the row it belongs to */
.sl-flipping{display:inline-flex;align-items:center;gap:7px}
.sl-flipart{width:22px;height:22px;border-radius:50%;-o-object-fit:cover;object-fit:cover;flex:none;
  border:1px solid var(--sl-acLn)}
.sl-flipart--none{background:var(--sl-surf2)}
.sl-flipbar{width:46px;height:4px;border-radius:2px;background:var(--sl-line);
  overflow:hidden;position:relative;flex:none}
.sl-flipbar i{position:absolute;inset:0;width:40%;border-radius:2px;background:var(--sl-ac);
  animation:sl-slide 1.4s ease-in-out infinite}
@keyframes sl-slide{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){.sl-flipbar i{animation:none;width:100%;opacity:.5}}

/* demucs output: four files, each its own download, no page in between */
.sl-splitstems{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.sl-splitstems .sl-dl{text-transform:capitalize;font-size:10.5px}

/* The desk's own add-to-tape button, beside History. It borrows the library's
   button but has to read on the dark header rather than the Ink panel. */
.nsp-tapebtn{position:relative;display:inline-flex;align-items:center;gap:8px}
.nsp-tapebtn .sl-b{height:32px;border-radius:6px;background:#333;border:1px solid #444;
  color:#e8e6e0;font-size:12px;white-space:nowrap}
.nsp-tapebtn .sl-b:hover{background:#444;border-color:#555;color:#fff}
.nsp-tapebtn .sl-addtape b{font-size:14px;line-height:1;color:#4ADE80;font-weight:700}
.nsp-tapenote{font-size:11px;color:#9c9a94;max-width:230px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* On the desk header the confirmation drops BELOW the button instead of
   sitting beside it. Inline, it was 230px of text appearing for three seconds
   inside a right-anchored row — every neighbour slid left and then back. */
.nsp-tapebtn[data-compact='1'] .nsp-tapenote{
  position:absolute;top:calc(100% + 4px);right:0;text-align:right;
  pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,0.9)}

/* ---- Genre scope (tape editor) -----------------------------------------
   Which categories a listener's NEW may land in. Chips, so the chosen set is
   countable at a glance without reopening a menu. The list is capped and
   scrolls: some genres carry thirty categories, and thirty chips would push
   Save off the panel. */
.sl-genres{display:grid;gap:14px;margin-top:4px}
.sl-genre-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9c9a94}
.sl-genre-head>span{flex:1}
.sl-genre-list{display:flex;flex-wrap:wrap;gap:6px;max-height:124px;
  overflow-y:auto;padding-right:2px}
.sl-chip{border:1px solid #3a3a38;border-radius:999px;padding:5px 11px;
  font-size:11px;line-height:1;background:transparent;color:#9c9a94;
  cursor:pointer;white-space:nowrap}
.sl-chip:hover{border-color:#55534e;color:#e8e6e0}
/* Chosen chips FILL rather than brighten — you should be able to count what
   you handed over without reading any of it. */
.sl-chip.is-on{background:#4ADE80;border-color:#4ADE80;color:#0D0D0C;font-weight:600}

/* ---- Flip Discovery ------------------------------------------------------
   The artist picker as a place to browse. Two columns: the crate (search,
   sounds, trending wall) and the profile (who they are + the flip controls).
   Rides the existing .sl-ap dialog chrome; everything below only adds. */
.sl-fd{width:min(1060px,96vw);height:min(680px,92vh);display:flex;flex-direction:column}
.sl-fdbody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0}
.sl-fdcrate{min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px;
  padding:4px 16px 10px;border-right:1px solid var(--sl-line)}
.sl-fdcrate>.sl-find{flex:none}
.sl-fdgenres{display:flex;flex-wrap:wrap;gap:6px;max-height:64px;overflow-y:auto;flex:none}
.sl-fdwall{flex:1;min-height:0;overflow-y:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;align-content:start;
  padding:2px 2px 8px}
.sl-fdtile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;
  border-radius:9px;border:1px solid transparent}
.sl-fdtile:hover{background:var(--sl-surf2)}
.sl-fdtile.is-on{border-color:var(--sl-acLn);background:var(--sl-acSoft)}
.sl-fdface{position:relative;width:64px;height:64px;border-radius:50%;overflow:visible;flex:none}
.sl-fdface img{width:100%;height:100%;border-radius:50%;-o-object-fit:cover;object-fit:cover;display:block}
.sl-fdface i{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:var(--sl-surf2);color:var(--sl-tx3);font-style:normal;font-weight:700;font-size:22px}
.sl-fdface--sm{width:36px;height:36px}
.sl-fdface--sm i{font-size:14px}
.sl-fdrank{position:absolute;right:-2px;bottom:-2px;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:var(--sl-ac);color:var(--sl-acFg);
  font-family:var(--sl-mono);font-size:10px;font-weight:700;display:grid;place-items:center}
.sl-fdname{font-size:11.5px;color:var(--sl-tx2);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sl-fdtile.is-on .sl-fdname{color:var(--sl-ac);font-weight:650}

.sl-fdprofile{min-width:0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
  gap:12px;padding:4px 16px 12px}
.sl-fdempty{margin:auto;text-align:center;max-width:300px}
.sl-fdemptyline{font-size:16px;font-weight:650;margin:0 0 8px}
.sl-fdtrail{display:flex;flex-wrap:wrap;gap:2px;flex:none}
.sl-fdcrumb{font-size:11px;color:var(--sl-tx3);padding:2px 4px;border-radius:4px}
.sl-fdcrumb:not(:disabled):hover{color:var(--sl-tx)}
.sl-fdcrumb:disabled{color:var(--sl-tx);font-weight:650;cursor:default}
.sl-fdhero{flex:none;border-radius:10px;aspect-ratio:16/8;background-size:cover;
  background-position:center 20%;background-color:var(--sl-surf2);position:relative;overflow:hidden;
  display:flex;align-items:flex-end}
.sl-fdheroink{width:100%;padding:24px 14px 10px;
  background:linear-gradient(180deg,transparent, rgba(6,6,5,.82))}
.sl-fdheroink h4{margin:0;font-size:20px;font-weight:750;letter-spacing:-.02em;color:#F2F1ED}
.sl-fdheroink p{margin:2px 0 0;font-size:11.5px;color:#c9c6bd}
.sl-fdbio{font-size:12.5px;line-height:1.55;color:var(--sl-tx2);margin:0;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.sl-fdsimilar{flex:none}
.sl-fdsimrow{display:flex;gap:6px;overflow-x:auto;padding:6px 0 4px}
.sl-fdsim{flex:none;display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;
  border-radius:999px;border:1px solid var(--sl-line);font-size:11.5px;color:var(--sl-tx2);
  white-space:nowrap}
.sl-fdsim:hover{border-color:var(--sl-tx3);color:var(--sl-tx)}
.sl-fdact{margin-top:auto;display:flex;flex-direction:column;gap:10px;flex:none;padding-top:6px}
.sl-fdgo{height:40px;justify-content:center;font-size:13.5px}
/* The PRICE cannot be missed: it wears the signal green, and when you are
   short it switches to the warning register instead of whispering. */
.sl-fdprice{display:inline-flex;align-items:center;gap:5px}
.sl-fdprice b{color:var(--sl-ac);background:var(--sl-acSoft);border:1px solid var(--sl-acLn);
  border-radius:6px;padding:1px 7px;font-family:var(--sl-mono);font-size:12px}
.sl-fdprice.is-short b{color:#ff7a68;background:rgba(255,122,104,.12);border-color:rgba(255,122,104,.4)}
.sl-fdft{flex:none}
@media(max-width:900px){
  .sl-fdbody{grid-template-columns:minmax(0,1fr)}
  /* On a phone the profile takes over when someone is chosen. */
  .sl-fd:has(.sl-fdhero) .sl-fdcrate{display:none}
  .sl-fdcrate{border-right:0}
}

/* Flip identity on the lane and in the inspector. */
.sl-rowflip{display:inline-flex;align-items:center;gap:5px;min-width:0}
.sl-rowflipn{color:var(--sl-tx2);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:110px}
.sl-inspflips{display:flex;flex-direction:column;gap:7px}
.sl-inspflip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px}
.sl-inspflip b{font-weight:650}

/* A tape row in the pulldown: the name adds, the pencil edits. */
.sl-tapeline{display:flex;align-items:center;gap:2px}
.sl-tapeline .sl-tapeitem{flex:1;min-width:0}
.sl-tapeedit{flex:none;width:26px;height:26px;border-radius:6px;display:grid;place-items:center;
  color:var(--sl-tx3);font-size:12px;background:none;border:0;cursor:pointer}
.sl-tapeedit:hover{background:var(--sl-surf);color:var(--sl-ac)}

/* Add-to-tape on the inspector, beside Extend and Stems. */
.sl-sidetape{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sl-sidetape .sl-k{flex:none}
/* The stems bill, standing in the editor while the tape is built. */
.sl-stemnote{border:1px solid var(--sl-acLn);background:var(--sl-acSoft);border-radius:9px;
  padding:10px 12px;display:flex;flex-direction:column;gap:5px}
.sl-stemnote>b{font-size:12.5px;color:var(--sl-ac)}
.sl-stemnote p{margin:0;font-size:12px;line-height:1.5;color:var(--sl-tx2)}
.sl-stemnote p b{color:var(--sl-tx);font-family:var(--sl-mono);font-size:11.5px}

/* Demucs at work: a real indeterminate bar, because a five-minute wait with
   no sign of movement reads as a button that did nothing. */
.sl-splitting,.sl-splitwait{display:inline-flex;align-items:center;gap:7px;
  font-size:11px;color:var(--sl-ac);white-space:nowrap}
.sl-splitwait{font-size:12px}
.sl-splitwait.is-idle{color:var(--sl-tx3)}
.sl-splitbar{position:relative;display:block;width:34px;height:3px;border-radius:2px;
  background:var(--sl-acSoft);overflow:hidden;flex:none}
.sl-splitbar b{position:absolute;inset:0 auto 0 0;width:40%;border-radius:2px;
  background:var(--sl-ac);animation:sl-splitrun 1.4s ease-in-out infinite}
@keyframes sl-splitrun{0%{left:-40%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.sl-splitbar b{animation:none;left:0;width:100%;opacity:.5}}

/* ---- Find the one -------------------------------------------------------
   Setting the downbeat by ear. Deliberately wordy for a panel this dense:
   most people have never been asked where a bar starts, and the instructions
   are the feature. */
.sl-findone{border:1px solid var(--sl-line);border-radius:9px;padding:12px 13px;
  display:flex;flex-direction:column;gap:9px;background:var(--sl-surf2)}
.sl-findonehd{display:flex;align-items:center;gap:10px}
.sl-findonehd b{flex:1;font-size:13px}
.sl-findonerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* The tap target is oversized on purpose — it is pressed in time with music,
   which is not a moment to be aiming. */
.sl-findonetap{height:40px;padding:0 18px;font-size:13px;font-weight:650}
.sl-findoneat{font-size:11px;color:var(--sl-tx3)}
.sl-findoneerr{color:#ff7a68;margin:0}
.sl-findoneacts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--sl-lineS);padding-top:9px}
.sl-findoneacts .sl-sub{margin:0;font-size:11.5px}
.sl-beatcheck{font-size:10px;letter-spacing:.06em;padding:0 7px;height:20px;
  border:1px solid var(--sl-line);border-radius:5px;color:var(--sl-tx3);width:auto}
.sl-beatcheck:hover{color:var(--sl-ac);border-color:var(--sl-acLn)}
.sl-beatrow{display:inline-flex;align-items:center;gap:5px}
.sl-beatcheck,.sl-beattest{height:22px;padding:0 9px;font-size:10.5px}
.sl-beattest{color:var(--sl-ac);border-color:var(--sl-acLn)}

/* ── The crate ─────────────────────────────────────────────────────────────
   A wall of sleeves. Artwork and a title, nothing else — that is how you read
   a crate: you flick until a sleeve stops you. Every fact and every button is
   on the right, for the one record you picked. */
.sl-smppad { padding: 18px 16px; }
.sl-smp { display: flex; flex-direction: column; min-height: 0; }

.sl-smphd {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid #ffffff14;
}
.sl-smpq {
  flex: 1; min-width: 0;
  padding: 7px 10px; border-radius: 8px;
  background: #00000026; border: 1px solid #ffffff1f;
  color: inherit; font: inherit; font-size: 13px;
}
.sl-smpq::-moz-placeholder { color: #8a8781; }
.sl-smpq::placeholder { color: #8a8781; }

/* auto-fill, not auto-fit: a crate with three records in it should show three
   records at their real size, not three tiles stretched across the panel. */
.sl-smpgrid {
  list-style: none; margin: 0; padding: 12px;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  overflow-y: auto; min-height: 0;
}

.sl-smptile {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; padding: 0; text-align: left;
  background: none; border: 0; color: inherit; cursor: pointer;
}
.sl-smpsleeve {
  position: relative; display: block;
  aspect-ratio: 1; width: 100%;
  border-radius: 8px; overflow: hidden;
  background: #ffffff0d; border: 1px solid #ffffff1a;
  transition: transform .12s ease, border-color .12s ease;
}
.sl-smpsleeve img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.sl-smpsleeve--none {
  display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(135deg, #ffffff08 0 8px, #ffffff03 8px 16px);
}
.sl-smptile:hover .sl-smpsleeve { transform: translateY(-2px); border-color: #ffffff33; }
.sl-smptile.is-on .sl-smpsleeve { border-color: #7DD3FC; box-shadow: 0 0 0 2px #7DD3FC55; }
.sl-smptile.is-waiting .sl-smpsleeve { opacity: .55; }

/* Still downloading, said on the sleeve rather than in a column nobody reads. */
.sl-smpdl {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 6px; font-size: 10px; text-align: center;
  background: #000000b3; color: #F0B46A;
}

.sl-smpname {
  font-size: 12px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The record pulled out of the crate. */
.sl-smpins { display: flex; flex-direction: column; gap: 8px; }
.sl-smpinshd { display: flex; align-items: center; gap: 12px; }
.sl-smpinsart {
  width: 84px; height: 84px; flex: none;
  border-radius: 8px; -o-object-fit: cover; object-fit: cover;
  background: #ffffff0d; border: 1px solid #ffffff1a;
}
.sl-smpinsname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-smpinsfacts { margin: 0; font-size: 11.5px; color: #8a8781; }

@media (max-width: 720px) {
  .sl-smpgrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding: 10px; }
}

/* Versions a crate record has grown, shown ON the record — not a note telling
   you to go looking for them somewhere else. */
.sl-smpvers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Drawn from the record's own id when it has no artwork: the same record is
   always the same colour, and no two are the same square. */
.sl-smpsleeve--drawn {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  font-size: 22px; font-weight: 700; letter-spacing: .04em;
  color: #ffffff5c;
}

/* A download now fetches the whole file before the save dialog can appear, so
   the control has to say it is working — otherwise pressing it looks like
   nothing happened, which is what it looked like before. */
.sl-dling { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.sl-dlspin {
  width: 11px; height: 11px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; opacity: .75;
  animation: slDlSpin .7s linear infinite;
}
.sl-dlpct { font-size: 10px; font-variant-numeric: tabular-nums; opacity: .8; }
@keyframes slDlSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sl-dlspin { animation-duration: 2.4s; }
}

/* ── CO-PRODUCE: the invites you sent ──────────────────────────────────────
   A ROW, not a card grid. These are correspondence — a short list you read
   top to bottom asking "has anyone answered yet" — and a grid of tiles makes
   that scan harder, not easier. */
.sl-invites {
  display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 16px;
  /* .sl-main clips (min-height:0) and every list inside it scrolls ITSELF —
     see .sl-rows. Without these three lines the invites simply ran off the
     bottom of the panel with no scrollbar to reach them. */
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
}

.sl-invite {
  display: flex; align-items: center; gap: 12px;
  background: var(--sl-surf2); border: 1px solid var(--sl-lineS);
  border-radius: 11px; padding: 10px 12px;
}
/* Unanswered reads QUIETER, not louder. An invite nobody has opened yet is
   not a problem to alarm about — it is simply the normal state of something
   just sent, and the eye should land on the ones that DID come back. */
.sl-invite.is-waiting { opacity: 0.72; }
.sl-invite.is-dead { opacity: 0.45; }
.sl-invite.is-dead .sl-invite__name { text-decoration: line-through; }

.sl-invite__art {
  width: 46px; height: 46px; flex: none; border-radius: 8px; overflow: hidden;
  background: var(--sl-raise); display: grid; place-items: center; color: var(--sl-tx3);
}
.sl-invite__art img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.sl-invite__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sl-invite__top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sl-invite__name {
  font-size: 13px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sl-invite__kind {
  flex: none; font-family: var(--sl-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sl-tx3);
  border: 1px solid var(--sl-line); border-radius: 4px; padding: 1px 5px;
}
.sl-invite__kind--dead { color: var(--sl-tx3); }
.sl-invite__state { font-size: 11px; color: var(--sl-tx2); }

/* The four numbers. Tabular so the column of them lines up down the list. */
.sl-invite__nums {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 11px; color: var(--sl-tx3);
}
.sl-invite__nums b {
  color: var(--sl-tx); font-variant-numeric: tabular-nums; margin-right: 3px;
}

.sl-invite__acts { display: flex; flex-direction: column; gap: 6px; flex: none; }
.sl-b--num { color: var(--sl-ac); border-color: var(--sl-acLn); }
.sl-b--num:hover { background: var(--sl-acSoft); }

@media (max-width: 620px) {
  /* The actions drop under the text rather than squeezing the name to
     nothing — a truncated person's name is the one thing on this row that
     must stay readable. */
  .sl-invite { flex-wrap: wrap; }
  .sl-invite__acts { flex-direction: row; width: 100%; }
  .sl-invite__acts .sl-b { flex: 1; }
}

/* ── CO-PRODUCE, INVERTED ──────────────────────────────────────────────────
   Same move tape mode makes, and for the same reason: the middle is a list of
   who you invited, which needs almost no width; the right panel is the whole
   invite — name, permissions, the link, and the ledger — which needs all of
   it. Scoped to this mode only; recordings keeps its wide table. */
.sl-body--invites { grid-template-columns: 170px 320px minmax(0, 1fr); }
@media (max-width: 1080px) {
  .sl-body--invites { grid-template-columns: 170px 280px minmax(0, 1fr); }
  .sl-body--invites .sl-insp { display: block; }
}
@media (max-width: 760px) {
  .sl-body--invites { grid-template-columns: minmax(0, 1fr); }
  .sl-body--invites .sl-main { display: none; }
}

/* In the narrow middle the row stacks: name and numbers first, the two link
   actions across the bottom. */
.sl-body--invites .sl-invite { flex-wrap: wrap; cursor: pointer; }
.sl-body--invites .sl-invite__acts { flex-direction: row; width: 100%; }
.sl-body--invites .sl-invite__acts .sl-b { flex: 1; }
.sl-invite.is-open {
  opacity: 1; border-color: var(--sl-acLn); background: var(--sl-acSoft);
}

/* The opened invite. */
.sl-invdetail { display: flex; flex-direction: column; gap: 16px; }
.sl-invdetail__hd { display: flex; align-items: center; gap: 12px; }
.sl-invdetail__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sl-invdetail__name input {
  width: 100%; background: var(--sl-surf2); color: var(--sl-tx);
  border: 1px solid var(--sl-line); border-radius: 7px; padding: 7px 9px;
  font: inherit; font-size: 15px; font-weight: 650;
}
.sl-invdetail__name input:focus { outline: none; border-color: var(--sl-ac); }

.sl-invdetail__link { display: flex; flex-direction: column; gap: 6px; }
.sl-invdetail__url {
  font-family: var(--sl-mono); font-size: 11.5px; color: var(--sl-tx2);
  background: var(--sl-surf2); border: 1px solid var(--sl-lineS);
  border-radius: 6px; padding: 6px 8px; overflow-x: auto; white-space: nowrap;
}
.sl-invdetail__acts { display: flex; gap: 8px; }

.sl-invdetail__perms { display: flex; flex-direction: column; gap: 2px; }
.sl-permrow {
  display: flex; align-items: flex-start; gap: 9px; padding: 6px 4px;
  border-bottom: 1px solid var(--sl-lineS); cursor: pointer; font-size: 12.5px;
}
.sl-permrow:last-child { border-bottom: 0; }
.sl-permrow input { margin-top: 2px; accent-color: var(--sl-ac); }
.sl-permrow b { font-weight: 600; }
.sl-permrow small { display: block; color: var(--sl-tx3); font-size: 11px; }

/* A link that is really a button — same look, no navigation. */
.sl-linkbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline}

/* ── PLAYLISTS: the runs the iMessage co-producer built ────────────────────
   Same inverted split as co-produce (see .sl-body--invites, which this mode
   shares): a list of covers needs little width, the opened playlist needs
   all of it. The cover is the identity here, so it leads every row and it
   is the biggest thing in the panel. */
.sl-plists {
  display: flex; flex-direction: column; gap: 4px; padding: 4px 2px 16px;
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
}
.sl-plrow {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 8px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  background: none; color: inherit; font: inherit;
}
.sl-plrow:hover { background: var(--sl-surf2); }
.sl-plrow.is-open { background: var(--sl-acSoft); border-color: var(--sl-acLn); }
.sl-plrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-plrow__name {
  font-size: 13px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sl-plrow__sub { font-size: 11px; color: var(--sl-tx2); }

/* The sleeve. Square, never distorted, and it degrades to a mark rather than
   a broken-image icon when a cover 404s. */
.sl-plart {
  flex: none; display: grid; place-items: center; overflow: hidden;
  border-radius: 7px; background: var(--sl-raise); color: var(--sl-tx3);
}
.sl-plart img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.sl-plart i { font-style: normal; font-size: 15px; }

.sl-pldetail { display: flex; flex-direction: column; gap: 14px; }
.sl-pldetail .sl-plart { border-radius: 10px; align-self: flex-start; }
.sl-plprompt { font-style: italic; margin-top: 6px; }

.sl-pltracks { display: flex; flex-direction: column; gap: 1px; }
.sl-pltrack {
  display: flex; align-items: center; gap: 10px; padding: 6px 4px;
  border-bottom: 1px solid var(--sl-lineS); min-width: 0;
}
.sl-pltrack:last-child { border-bottom: 0; }
.sl-pltrack.is-on .sl-pltrack__name { color: var(--sl-ac); font-weight: 600; }
.sl-pltrack__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sl-pltrack__name {
  font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-pltrack__tx small { font-size: 11px; color: var(--sl-tx3); }
.sl-pltrack__dur {
  font-family: var(--sl-mono); font-size: 11px; color: var(--sl-tx3);
  font-variant-numeric: tabular-nums; flex: none;
}

/* The per-track actions. They sit on the right of a track row and fold
   under it on a narrow panel rather than squeezing the name to nothing. */
.sl-plracts{display:flex;align-items:center;gap:6px;flex:none}
@media (max-width:900px){
  .sl-pltrack{flex-wrap:wrap}
  .sl-plracts{width:100%;justify-content:flex-end}
}

/* A track's stem desk, folded under the row it belongs to. */
.sl-plstems{padding:8px 4px 12px 44px;border-bottom:1px solid var(--sl-lineS)}
@media (max-width:900px){.sl-plstems{padding-left:8px}}
/**
 * THE NUMBERS — a chart page in the library's ledger.
 *
 * Rides the sl- tokens so it follows the library's bone/ink theme in both
 * modes. The one loud thing on the page is the EARNED stamp and the gold /
 * silver / bronze ranks — everything else stays quiet so the ranking reads
 * like a chart, not a dashboard.
 */
.tst { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; }
.tst-scrim { position: absolute; inset: 0; background: rgba(6, 6, 5, .55); backdrop-filter: blur(2px); }
.tst-card {
  position: relative; width: min(860px, calc(100vw - 28px)); max-height: min(86vh, 780px);
  overflow-y: auto; background: var(--sl-surf, #141413); color: var(--sl-tx, #F2F1ED);
  border: 1px solid var(--sl-line, #252523); border-radius: 14px;
  padding: 18px 20px 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}

/* Embedded: the same page, laid INTO a panel. It stops being an overlay
   entirely — no fixed frame, no card chrome, no height cap of its own; the
   panel it sits in owns the scrolling. */
.tst--flat { position: static; display: block; z-index: auto; }
.tst--flat .tst-card {
  width: auto; max-height: none; overflow: visible; background: none;
  border: 0; border-radius: 0; padding: 0; box-shadow: none;
}
.tst--flat .tst-title { font-size: 15px; }

.tst-hd { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.tst-hd > div { flex: 1; min-width: 0; }
.tst-eyebrow {
  font-family: var(--sl-mono, monospace); font-size: 10px; letter-spacing: .22em;
  color: var(--sl-tx3, #6E6B64);
}
.tst-title { margin: 2px 0 0; font-size: 20px; line-height: 1.15; text-wrap: balance; }

/* The stamp: the one hand-inked mark on a machined page. */
.tst-stamp {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 12px; border: 1.5px solid var(--sl-ac, #4ADE80); border-radius: 6px;
  color: var(--sl-ac, #4ADE80); font-family: var(--sl-mono, monospace);
  font-size: 9px; letter-spacing: .18em; transform: rotate(-3deg);
}
.tst-stamp b { font-size: 16px; letter-spacing: 0; }

.tst-x {
  border: 0; background: none; color: var(--sl-tx2, #A8A59D); font-size: 22px;
  line-height: 1; cursor: pointer; padding: 4px 8px; min-height: 44px;
}
.tst-x:hover { color: var(--sl-tx, #F2F1ED); }
.tst-dim { color: var(--sl-tx2, #A8A59D); }

/* Headline tiles. */
.tst-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tst-tile {
  flex: 1 1 90px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--sl-surf2, #1A1A18); border: 1px solid var(--sl-lineS, #1C1C1A);
  border-radius: 10px; padding: 10px 8px;
}
.tst-tile b { font-size: 18px; font-variant-numeric: tabular-nums; }
.tst-tile small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sl-tx3, #6E6B64); }

.tst-sec { margin-bottom: 16px; min-width: 0; }
.tst-k {
  display: block; font-family: var(--sl-mono, monospace); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sl-tx3, #6E6B64);
  margin: 10px 0 8px;
}

/* THE CHART. Ranked rows; the top three carry their metal. */
.tst-chart { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tst-r { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; background: var(--sl-surf2, #1A1A18); }
.tst-rank {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--sl-line, #252523);
  font-family: var(--sl-mono, monospace); font-size: 12px; color: var(--sl-tx2, #A8A59D);
}
.tst-r--1 .tst-rank { border-color: #D9B44A; color: #D9B44A; box-shadow: 0 0 0 1px rgba(217, 180, 74, .25); }
.tst-r--2 .tst-rank { border-color: #B9BDC4; color: #B9BDC4; }
.tst-r--3 .tst-rank { border-color: #C08A55; color: #C08A55; }
.tst-r--1 { background: linear-gradient(90deg, rgba(217, 180, 74, .08), var(--sl-surf2, #1A1A18) 60%); }
.tst-rtx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tst-rname { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tst-rbar { display: block; height: 5px; border-radius: 3px; background: var(--sl-lineS, #1C1C1A); overflow: hidden; }
.tst-rbar i { display: block; height: 100%; border-radius: 3px; background: var(--sl-ac, #4ADE80); transition: width .5s ease; }
.tst-r--1 .tst-rbar i { background: #D9B44A; }
.tst-rnums { display: flex; gap: 10px; align-items: baseline; flex: none; }
.tst-rnums b { font-size: 13px; font-variant-numeric: tabular-nums; }
.tst-rnums small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-tx3, #6E6B64); margin-left: -6px; }

/* Two weeks of days. */
.tst-days { display: flex; gap: 5px; align-items: flex-end; height: 74px; }
.tst-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; }
.tst-day i { display: block; width: 100%; max-width: 26px; border-radius: 3px 3px 0 0; background: var(--sl-ac, #4ADE80); opacity: .8; min-height: 2px; }
.tst-day small { font-size: 9px; color: var(--sl-tx3, #6E6B64); }

.tst-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 640px) { .tst-cols { grid-template-columns: 1fr; } }

/* The diggers. */
.tst-lead { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tst-lead li { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 8px; }
.tst-lead li:nth-child(odd) { background: var(--sl-surf2, #1A1A18); }
.tst-rank--sm { width: 20px; height: 20px; font-size: 10px; }
.tst-who { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; font-family: var(--sl-mono, monospace); }
.tst-who small { color: var(--sl-tx3, #6E6B64); font-size: 10px; }
.tst-whonums { font-size: 11px; color: var(--sl-tx2, #A8A59D); display: flex; align-items: center; gap: 6px; }
.tst-buyer {
  font-style: normal; font-family: var(--sl-mono, monospace); font-size: 9px;
  letter-spacing: .14em; color: var(--sl-ac, #4ADE80);
  border: 1px solid var(--sl-acLn, #1F4A31); border-radius: 4px; padding: 1px 5px;
}

/* Chips: what they changed, where they are. */
.tst-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tst-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: var(--sl-surf2, #1A1A18); border: 1px solid var(--sl-lineS, #1C1C1A);
  border-radius: 999px; padding: 4px 11px;
}
.tst-chip b { font-variant-numeric: tabular-nums; color: var(--sl-ac, #4ADE80); }
.tst-chip--place b { color: var(--sl-tx2, #A8A59D); }

.tst-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--sl-tx2, #A8A59D); }
.tst-notes b { color: var(--sl-tx, #F2F1ED); font-weight: 600; margin-right: 4px; }

/* Naming a listener: the row reads as editable without shouting about it. */
.tst-namebtn {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  color: inherit; font: inherit; border-bottom: 1px dashed transparent;
}
.tst-namebtn:hover { border-bottom-color: var(--sl-tx3, #6E6B64); }
.tst-namein {
  width: 100%; background: var(--sl-bg, #0D0D0C); color: var(--sl-tx, #F2F1ED);
  border: 1px solid var(--sl-acLn, #1F4A31); border-radius: 5px;
  padding: 3px 6px; font: inherit; min-height: 28px;
}

/* WHAT THEY MADE — versions saved on the link, playable right here. */
.tst-made { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tst-made li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--sl-surf2, #1A1A18); border: 1px solid var(--sl-lineS, #1C1C1A);
  border-radius: 9px;
}
.tst-made li.is-on { border-color: var(--sl-acLn, #1F4A31); background: var(--sl-acSoft, #132A1C); }
.tst-madetx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tst-madename { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tst-madetx small { font-size: 10px; color: var(--sl-tx3, #6E6B64); }
.tst-madeacts { display: flex; gap: 6px; flex: none; }
.tst-mb {
  min-height: 32px; padding: 0 12px; border-radius: 7px; cursor: pointer;
  font-size: 12px; background: transparent; color: var(--sl-tx, #F2F1ED);
  border: 1px solid var(--sl-line, #252523);
}
.tst-mb:hover:not(:disabled) { border-color: var(--sl-tx2, #A8A59D); }
.tst-mb:disabled { opacity: .45; cursor: default; }
.tst-mb--keep { color: var(--sl-ac, #4ADE80); border-color: var(--sl-acLn, #1F4A31); }
.tst-mb--keep:hover:not(:disabled) { background: var(--sl-acSoft, #132A1C); }
.tst-back {
  background: none; border: 0; cursor: pointer; padding: 4px 0;
  color: var(--sl-tx2, #A8A59D); font-size: 12px;
}
.tst-back:hover { color: var(--sl-tx, #F2F1ED); }
.tst-took {
  font-style: normal; font-family: var(--sl-mono, monospace); font-size: 9px;
  letter-spacing: .12em; color: var(--sl-tx2, #A8A59D);
  border: 1px solid var(--sl-line, #252523); border-radius: 4px; padding: 1px 5px;
}

/* ONE LISTENER'S STORY. Sits above the ledger it was opened from. */
.tst--story { z-index: 95; }
.tst-namein--big { font-size: 18px; margin-top: 2px; }
.tst-sub { margin: 4px 0 12px; font-size: 12px; color: var(--sl-tx2, #A8A59D); }
.tst-kept {
  font-style: normal; font-family: var(--sl-mono, monospace); font-size: 9px;
  letter-spacing: .14em; color: var(--sl-ac, #4ADE80); margin-left: 7px;
  border: 1px solid var(--sl-acLn, #1F4A31); border-radius: 4px; padding: 1px 5px;
}

/* The timeline: a marker column, the sentence, then when. */
.tst-time { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tst-time li {
  display: flex; align-items: baseline; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid var(--sl-lineS, #1C1C1A); font-size: 12px;
}
.tst-time li:last-child { border-bottom: 0; }
.tst-tmark {
  width: 16px; flex: none; text-align: center; color: var(--sl-tx3, #6E6B64);
  font-family: var(--sl-mono, monospace);
}
.tst-ttx { flex: 1; min-width: 0; }
.tst-tat {
  flex: none; color: var(--sl-tx3, #6E6B64); font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* The card's doorway to this page — reads as a button, not a badge. */
.sl-tapestats {
  cursor: pointer; color: var(--sl-ac, #4ADE80);
  border: 1px solid var(--sl-acLn, #1F4A31);
}
.sl-tapestats:hover { background: var(--sl-acSoft, #132A1C); }

@media (prefers-reduced-motion: reduce) {
  .tst-rbar i { transition: none; }
}


/* Caveat for people's names — the same hand the desk is signed in, so a person
   reads as a person wherever they turn up. Must be line 1. */
/* ===========================================================================
   THE CHIP. Quiet until it matters.
   =========================================================================== */
.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 5px 0 11px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid #3a3a44;
  background: #1d1d24;
  color: #e6e6ee;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.st-chip:hover { border-color: #57576a; }
/* Two minutes out. Warm, not alarming — panic makes people leave, not pay. */
.st-chip.is-low {
  border-color: #7a4a1e;
  background: #2a1b0e;
  color: #f0b46a;
}
.st-chip__tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.55;
}
.st-chip__clock { letter-spacing: -0.01em; }
/* Paused is the DEFAULT resting look — most of a session is spent thinking,
   and the meter should look calm when nothing is being spent. */
.st-chip__pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4a4a56;
  flex-shrink: 0;
}
.st-chip__pulse.on {
  background: #8fd9a8;
  box-shadow: 0 0 6px rgba(143, 217, 168, 0.7);
  animation: st-pulse 1.6s ease-in-out infinite;
}
@keyframes st-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.st-chip__mode {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.45;
}
.st-chip.is-running .st-chip__mode { color: #8fd9a8; opacity: 0.85; }
/* The clock itself dims when it isn't counting, so "not moving" reads as
   deliberate rather than stuck. */
.st-chip:not(.is-running) .st-chip__clock { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .st-chip__pulse.on { animation: none; }
}
.st-chip__plus {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #b97a1e;
  color: #140d04;
  font-family: system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
}
.st-chip.is-low .st-chip__plus { background: #f0b46a; }
/* ---------------------------------------------------------------------------
   TIME BACK, accruing next to the clock.

   Green against the clock's neutral grey, because these two numbers move in
   opposite directions and the eye should be able to tell which is which
   without reading either. It is a label, not a button — there is nothing to
   click yet, and dressing it as one would promise a checkout that doesn't
   exist.
   --------------------------------------------------------------------------- */
.st-earned {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid #2e4a37;
  background: #13210d;
  color: #8fd9a8;
  line-height: 34px;
  /* Slid in from the clock it grew out of, once, the first time it exists. */
  animation: st-earned-in 0.34s ease both;
}
@keyframes st-earned-in {
  from { opacity: 0; transform: translateX(-6px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.st-earned__tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.6;
}
.st-earned__amt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
}
/* The way into the shop, from the ribbon. Outlined rather than filled: it is
   an invitation, and a solid button up here would compete with Save take,
   which is the thing a co-producer actually came to do. */
.st-crate-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  border: 1px dashed #6b5a3a;
  color: #e0c48a;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.st-crate-btn:hover { border-style: solid; border-color: #b97a1e; color: #f0b46a; }
/* ===========================================================================
   THE BUY SHEET.
   =========================================================================== */
.st-sheet-wrap {
  position: fixed;
  inset: 0;
  /* Above the app-wide `button { z-index: 25 !important }` rule. */
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 6, 9, 0.72);
  backdrop-filter: blur(7px);
}
.st-sheet {
  width: min(460px, 100%);
  padding: 26px 26px 20px;
  border-radius: 15px;
  background: linear-gradient(180deg, #1d1d25 0%, #141419 100%);
  border: 1px solid #34343f;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.62);
  color: #eeeef4;
  text-align: center;
}
.st-sheet__eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #b97a1e;
  margin-bottom: 6px;
}
.st-sheet__title {
  margin: 0 0 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.02em;
}
.st-sheet__line {
  margin: 0 auto 20px;
  max-width: 38ch;
  font-size: 13.5px;
  line-height: 1.55;
  opacity: 0.68;
}
.st-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 16px;
}
.st-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 6px 11px;
  border-radius: 10px;
  cursor: pointer;
  background: #22222b;
  border: 1px solid #35353f;
  color: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.st-block:hover:not(:disabled) { transform: translateY(-2px); border-color: #b97a1e; background: #2a2131; }
.st-block:disabled { opacity: 0.55; cursor: default; }
/* Can't afford it — dimmed, not hidden. Hiding it hides the price. */
.st-block.is-short { opacity: 0.42; }
.st-block__mins {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1;
}
.st-block__mins small {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-left: 3px;
}
/* The cost, in credits. The unit is set smaller and dimmer than the number
   because on a wall of three blocks it is the QUANTITIES people compare — the
   "cr" only has to stop the figure reading as bare. */
.st-block__price { font-size: 15px; font-weight: 700; color: #f0b46a; }
.st-block__price small {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  opacity: 0.6;
  margin-left: 3px;
}
.st-block__credits {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  opacity: 0.42;
}
/* What comes back, on the card with what it costs. */
.st-block__back {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8fd9a8;
  margin-top: 2px;
}
.st-sheet__back {
  margin: 0 auto 14px;
  max-width: 40ch;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(143, 217, 168, 0.07);
  border: 1px solid rgba(143, 217, 168, 0.18);
  font-size: 12.5px;
  line-height: 1.55;
  color: #cfe8d7;
}
.st-sheet__back b { color: #8fd9a8; }
.st-sheet__fine {
  margin: 0 auto 12px;
  max-width: 40ch;
  font-size: 11.5px;
  line-height: 1.6;
  opacity: 0.46;
}
.st-sheet__bal {
  margin: 0 0 8px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0.5;
}
.st-sheet__bal b { color: #f0b46a; opacity: 1; }
.st-sheet__err {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: #f0916a;
}
.st-sheet__ghost {
  padding: 8px 20px;
  border-radius: 7px;
  cursor: pointer;
  background: transparent;
  border: 1px solid #3c3c48;
  color: #b9b9c6;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.st-sheet__ghost:hover { border-color: #5a5a6c; color: #fff; }
/* ===========================================================================
   THE CRATE — what's for sale in the room, and what you own afterwards.
   Same visual object either side of the purchase, so buying doesn't feel like
   the thing moved universes.
   =========================================================================== */
.st-crate { text-align: center; }
.st-goods { list-style: none; margin: 0 0 14px; padding: 0; }
.st-good {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 11px 12px;
  border-radius: 9px;
  background: #1b1b23;
  border: 1px solid #32323d;
  margin-bottom: 8px;
}
.st-good.is-owned { border-color: #2e4a37; background: #14211a; }
.st-good__body { flex: 1; min-width: 0; }
.st-good__name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.03em;
}
.st-good__what { font-size: 11.5px; opacity: 0.5; margin-top: 2px; }
.st-good__buy {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  flex-shrink: 0;
  padding: 8px 15px;
  border-radius: 7px;
  cursor: pointer;
  border: 0;
  background: #b97a1e;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.05em;
}
.st-good__buy:hover:not(:disabled) { background: #d89a3e; }
.st-good__buy:disabled { opacity: 0.5; cursor: default; }
/* The old price, struck. This is the whole payoff of time-back — seeing the
   hours you already put in take money off the thing you wanted. */
.st-good__was { opacity: 0.55; font-size: 12px; font-weight: 400; }
.st-good__due { font-size: 15px; }
.st-good__owned {
  flex-shrink: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fd9a8;
}
.st-crate__won {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: #8fd9a8;
}
.st-crate__won b { color: #cfe8d7; }
/* ---- the shelf in the library ---- */
.st-owned { margin-top: 4px; }
.st-own {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #2b2b34;
  border-left: 3px solid #8fd9a8;
  border-radius: 9px;
  background: #15151b;
  margin-bottom: 8px;
}
.st-own__art {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 7px; -o-object-fit: cover; object-fit: cover; background: #101014;
}
.st-own__body { flex: 1; min-width: 0; }
/* The producer, in the hand — you bought it from a person. */
.st-own__who {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.05;
  color: #f4e3c6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-own__what { font-size: 12px; opacity: 0.62; margin-top: 2px; }
.st-own__what em { font-style: normal; color: #8fd9a8; opacity: 0.9; }
.st-own__get {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 7px;
  cursor: pointer;
  background: transparent;
  border: 1px solid #4a6b55;
  color: #8fd9a8;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.st-own__get:hover:not(:disabled) { background: #17281d; border-color: #8fd9a8; }
.st-own__get:disabled { opacity: 0.5; cursor: default; }
/* ===========================================================================
   THE WARRANTY. Deliberately unlike the rest of the app: paper, not console.
   You are signing something, and it should feel like it.
   =========================================================================== */
.st-warranty { text-align: left; }
.st-warranty .st-sheet__title { text-align: center; }
.st-warranty__terms {
  list-style: none;
  margin: 4px 0 18px;
  padding: 16px 18px;
  border-radius: 9px;
  background: #f4f0e6;
  color: #23201a;
  border: 1px solid #d8d1c0;
}
.st-warranty__terms li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
  font-size: 13px;
  line-height: 1.55;
}
.st-warranty__terms li:last-child { margin-bottom: 0; }
.st-warranty__terms li::before {
  content: '';
  position: absolute;
  left: 4px; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #b97a1e;
}
.st-warranty__signline {
  display: block;
  width: 100%;
  padding: 6px 4px;
  margin-bottom: 4px;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid #57574a;
  color: #f4e3c6;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  outline: none;
}
.st-warranty__signline::-moz-placeholder { color: #6a6a5c; }
.st-warranty__signline::placeholder { color: #6a6a5c; }
.st-warranty__signline:focus { border-bottom-color: #b97a1e; }
.st-warranty__hint {
  margin: 0 0 18px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.4;
}
.st-warranty__acts { display: flex; gap: 9px; justify-content: center; }
.st-primary {
  padding: 10px 26px;
  border-radius: 7px;
  cursor: pointer;
  border: 0;
  background: #b97a1e;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.st-primary:hover:not(:disabled) { background: #d89a3e; }
.st-primary:disabled { opacity: 0.4; cursor: default; }
/* ===========================================================================
   DISCOVERY — rooms you can walk into.
   =========================================================================== */
.st-disc { margin: 26px 0 8px; }
.st-disc__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding: 0 2px;
}
.st-disc__title {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f0f0f5;
}
.st-disc__sub { font-size: 12.5px; opacity: 0.5; color: #cfd2d8; }
.st-disc__rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
}
.st-room {
  position: relative;
  flex: 0 0 250px;
  display: block;
  padding: 0 0 12px;
  border-radius: 11px;
  overflow: hidden;
  text-decoration: none;
  color: #ececf2;
  background: linear-gradient(180deg, #23232b 0%, #191920 100%);
  border: 1px solid #34343e;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  transition: transform 0.14s ease, border-color 0.14s ease;
}
.st-room:hover { transform: translateY(-2px); border-color: #b97a1e; }
.st-room__art {
  width: 100%;
  height: 128px;
  -o-object-fit: cover;
     object-fit: cover;
  background: #101014;
  display: block;
}
.st-room__art--blank {
  display: grid;
  place-items: center;
  color: #4e4e5c;
  font-size: 30px;
}
.st-room__body { padding: 10px 12px 0; }
/* Whose room it is, in the hand. */
.st-room__host {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
  color: #f4e3c6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-room__title {
  font-size: 12.5px;
  opacity: 0.66;
  margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-room__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
/* The free stretch is the hook, so it gets the colour. */
.st-room__free { color: #8fd9a8; }
.st-room__rate { color: #b97a1e; }
.st-room__played { opacity: 0.4; margin-left: auto; }
/* ===========================================================================
   THE HOST SIDE — listing editor + earnings.
   =========================================================================== */
.st-host { padding: 4px 2px 14px; color: #e8e8ef; }
.st-host__intro {
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.6;
  max-width: 56ch;
  margin: 0 0 16px;
}
/* ---------------------------------------------------------------------------
   TIME BACK, banked. Green like the chip that minted it, so the number a
   visitor watched climbing in the room is recognisably the same number here.
   --------------------------------------------------------------------------- */
.st-banked {
  border: 1px solid #2e4a37;
  border-left: 3px solid #8fd9a8;
  border-radius: 9px;
  background: linear-gradient(180deg, #14211a 0%, #111814 100%);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.st-banked__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
}
.st-banked__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fd9a8;
  opacity: 0.8;
}
.st-banked__total {
  margin-left: auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: #8fd9a8;
}
.st-banked__list { list-style: none; margin: 0; padding: 0; }
.st-banked__list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid rgba(143, 217, 168, 0.1);
}
.st-banked__list li:first-child { border-top: 0; }
/* The producer, in the hand — the balance belongs to a person, not a code. */
.st-banked__who {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.1;
  color: #f4e3c6;
  flex: 1;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-banked__amt {
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #cfe8d7;
}
.st-banked__rule {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  opacity: 0.5;
  max-width: 54ch;
}
.st-listing {
  border: 1px solid #2b2b34;
  border-left: 3px solid #b97a1e;
  border-radius: 9px;
  background: #15151b;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.st-listing__top {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}
.st-listing__name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.03em;
  flex: 1;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-state {
  font-family: ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.6;
}
.st-state.is-live { background: rgba(143, 217, 168, 0.14); color: #8fd9a8; opacity: 1; }
.st-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: 11px;
}
.st-field { display: flex; flex-direction: column; gap: 4px; }
.st-field label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.45;
}
.st-field input, .st-field textarea, .st-field select {
  padding: 7px 9px;
  border-radius: 6px;
  background: #101015;
  border: 1px solid #303039;
  color: #ececf2;
  font-size: 13px;
  font-family: inherit;
}
.st-field input:focus, .st-field textarea:focus { outline: none; border-color: #b97a1e; }
.st-field small { font-size: 10.5px; opacity: 0.38; }
.st-listing__acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* The sell block, marked off from the room's own settings by a rule rather
   than a box — it is a continuation of the same decision, not a new panel. */
.st-sell {
  margin: 2px 0 11px;
  padding-top: 10px;
  border-top: 1px dashed #2f2f3a;
}
.st-sell__head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.5;
}
/* The split, stated where the price is set. It is the argument for setting one. */
.st-sell__head em {
  font-style: normal;
  color: #8fd9a8;
  opacity: 0.9;
  letter-spacing: 0.08em;
}
.st-earn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #2b2b34;
  border-radius: 9px;
  background: #15151b;
  margin-bottom: 8px;
}
.st-earn__art {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 7px; -o-object-fit: cover; object-fit: cover; background: #101014;
}
/* A sale has no artwork of its own — it is a thing that left the room, so it
   gets the arrow rather than a borrowed cover. Green, because on this panel
   green has meant "money that is yours" since the banked block above it. */
.st-earn__art--sale {
  display: grid;
  place-items: center;
  background: #14211a;
  border: 1px solid #2e4a37;
  color: #8fd9a8;
  font-size: 17px;
  /* Without this the border grows the tile to 42px and a sale row sits 2px
     taller than the time row beside it — enough to make the list look ragged
     where the two rails alternate. */
  box-sizing: border-box;
}
.st-earn__body { flex: 1; min-width: 0; }
.st-earn__name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 16px; letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-earn__meta {
  font-family: ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.42; margin-top: 3px;
}
.st-earn__money { text-align: right; flex-shrink: 0; }
.st-earn__usd {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 21px; color: #8fd9a8; line-height: 1;
}
.st-earn__cr {
  font-family: ui-monospace, monospace;
  font-size: 9.5px; opacity: 0.4; letter-spacing: 0.06em;
}
/* Said once, at the bottom, in the open. An accrued balance you can't withdraw
   is a promise, and a promise you have to hunt for reads as a trick. */
.st-earn__note {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  opacity: 0.42;
  max-width: 52ch;
}
.st-empty {
  font-size: 13px;
  opacity: 0.5;
  line-height: 1.6;
  max-width: 48ch;
  margin: 10px 0;
}
@media (max-width: 640px) {
  .st-room { flex: 0 0 210px; }
  .st-blocks { grid-template-columns: repeat(3, 1fr); }
  .st-sheet { padding: 20px 18px 16px; }
}
/*
 * THE VENUE WALL.
 *
 * A marquee of posters, sized off the panel's height exactly like the
 * co-producer tape shelf, so it fills whatever band the desk hands it without
 * a media query per window. The posters are the only bright thing; the head
 * and foot are quiet type on a scrim, because this art runs from near-black
 * (The Strip) to bright noon sky (The Beach) and plain text over both would
 * disappear on one of them.
 */

/* THE DOCK — the same band every other menu on the desk uses. Published as
   --spotify-menu-* by the theme (measured, not guessed); the name is historic,
   it belongs to the band and not to the artist browser that used to fill it. */
.venue-menu-dock {
  position: fixed;
  top: var(--spotify-menu-top);
  bottom: var(--spotify-menu-bottom, 0px);
  left: calc(var(--spotify-menu-left) + var(--soundcraft-width));
  right: var(--spotify-menu-right, 0px);
  z-index: 200;
  max-height: calc(100vh - var(--spotify-menu-top) - var(--spotify-menu-bottom, 0px));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

.vg-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  color: #e8e8f0;
  overflow: hidden;
  background: linear-gradient(180deg, #0a0810 0%, #040305 100%);
  border-radius: 10px;
  border: 1px solid #241d29;
}

.vg-shelf {
  position: absolute;
  inset: 0;
}

.vg-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px 26px;
  flex-wrap: wrap;
  /* The bar itself must not eat drags — only the CLOSE button takes input. */
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(4, 3, 5, 0.9) 0%, rgba(4, 3, 5, 0.6) 55%, transparent 100%);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.vg-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--vg-accent, #e8c48a);
  transition: color 220ms ease;
}

.vg-sub { font-size: 13px; opacity: 0.55; }

.vg-close {
  pointer-events: auto;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 3px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  transition: color 140ms ease, border-color 140ms ease;
}

.vg-close:hover { color: #fff; border-color: rgba(255, 255, 255, 0.45); }

/* ---- the marquee -------------------------------------------------------- */

.vg-rail {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  /* Driven by the rAF loop — the browser must not also animate it. */
  overflow-x: hidden;
  overflow-y: hidden;
  scroll-behavior: auto;
  cursor: grab;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.vg-rail:active { cursor: grabbing; }

/* Empty space at each end of the strip — sized in JS off the panel's own
   measurements. Without it the outer two posters can never be centred. */
.vg-cap {
  flex: 0 0 auto;
  height: 100%;
  pointer-events: none;
}

.vg-item {
  position: relative;
  flex: 0 0 auto;
  /* FULL HEIGHT, like the tape shelf. Held at 78% the posters floated in a
     band with dead ground above and below them, which wasted the panel and
     made the art look small. The head and foot are already scrims floating
     OVER the rail, so they do not need reserved rows — they read fine on top
     of the art. */
  height: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  will-change: transform;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.vg-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55),
              0 0 0 1px var(--vg-item-accent, rgba(255, 255, 255, 0.4));
}

.vg-item:active { transform: translateY(-1px) scale(0.985); }

.vg-item:focus-visible {
  outline: 2px solid var(--vg-item-accent, #e8c48a);
  outline-offset: 3px;
}

.vg-item img {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Only just wider than the frame. The tape shelf runs 130% because a
     cassette has nothing to lose off its edges; a POSTER has its wordmark
     there, and at 130% "The Arena" read as "Aren". This is the smallest
     overscan the parallax can still travel inside. */
  width: 108%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: translate(-50%, -50%);
  will-change: transform;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ---- what you're looking at --------------------------------------------- */

.vg-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 26px 18px 14px;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(4, 3, 5, 0.9) 0%, rgba(4, 3, 5, 0.6) 55%, transparent 100%);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.vg-now {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.vg-now b {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vg-accent, #e8c48a);
}

.vg-now i {
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.5;
}

.vg-now em { font-style: normal; font-size: 13px; opacity: 0.72; }

/* ---- narrower rooms ------------------------------------------------------ */

@media (max-width: 1024px) {
  .vg-title { font-size: 22px; }
}

@media (max-width: 640px) {
  .vg-rail { gap: 12px; }
  .vg-head { padding: 10px 12px 22px; }
  .vg-foot { padding: 22px 12px 10px; }
  .vg-title { font-size: 19px; }
  .vg-sub { display: none; }
  .vg-now em { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vg-item { transition: none; }
}/* ═══════════════════════════════════════════════════════════════════════════
   THE REWIND LOOKS LIKE A TAPE REWINDING
   ---------------------------------------------------------------------------
   The reference is a WebGL post-process: a texture put through RGB split →
   static noise → a rolling tracking bar → scanlines → grain and vignette. The
   rolling bar is the signature; the rest is the bed it sits on.

   THAT APPROACH DOES NOT TRANSFER, and it is worth saying why rather than
   pretending this is a port. A fragment shader needs its input as a TEXTURE.
   nspire's studio is live DOM — faders being dragged, pads lighting, a
   cassette shelf mid-drag — and getting that into a texture every frame means
   rasterising the page, which is both slow and exactly the thing we have
   spent this whole layout avoiding on a phone running an audio graph.

   So the stack is rebuilt as composited layers OVER the studio. Same stages,
   same order, no readback:

     scanlines   a static repeating gradient — costs one paint, ever
     tracking    one band, moved with translateY — compositor only
     grain       an SVG turbulence tile, moved with translate — compositor only
     bleed       one filter on the studio shell, set once while it runs

   Everything that moves, moves by transform. Nothing here reads the page back.
   ═══════════════════════════════════════════════════════════════════════════ */

.vhs {
  position: fixed;
  inset: 0;
  z-index: 12050; /* over the whole studio, including the tabs */
  pointer-events: none; /* the transport stays usable underneath it */
  opacity: 0;
  transition: opacity 180ms ease;
  contain: strict;
}
.vhs.is-on { opacity: 1; }

/* ── SCANLINES ────────────────────────────────────────────────────────────
   The shader's `sin(uv.y * resolution.y * 1.5)`. A gradient is the same thing
   at a fixed frequency, and it never repaints. */
.vhs__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.28) 0px,
    rgba(0, 0, 0, 0.28) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}

/* ── THE TRACKING BAR ─────────────────────────────────────────────────────
   The one everybody recognises: the band of torn signal that crawls up the
   picture while the heads are moving. In the shader it is
   `fract(uv.y + time * 0.1)`; here it is a 90px band translated a full screen
   height and wrapped. Brighter and slightly smeared at its edges, because on
   tape the head is losing lock at the boundary, not in the middle. */
.vhs__track {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 90px;
  top: -90px;
  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.06) 12%,
      rgba(255, 255, 255, 0.17) 42%,
      rgba(180, 230, 255, 0.13) 58%,
      rgba(255, 255, 255, 0.05) 84%,
      transparent 100%
    );
  filter: blur(0.4px);
  will-change: transform;
  animation: vhs-track 1.45s linear infinite;
}
/* A second, faster band so the picture never looks like it is on a single
   loop — real tape has more than one thing slipping at once. */
.vhs__track--2 {
  height: 34px;
  top: -34px;
  opacity: 0.55;
  animation-duration: 0.72s;
  animation-direction: reverse;
}
@keyframes vhs-track {
  from { transform: translateY(0); }
  to { transform: translateY(calc(100vh + 90px)); }
}

/* ── GRAIN / STATIC ───────────────────────────────────────────────────────
   feTurbulence, inlined so it costs no request, on a tile bigger than the
   screen so it can be TRANSLATED rather than re-generated. `steps()` makes it
   jump between positions instead of sliding, which is what reads as static
   rather than as a texture drifting. */
.vhs__grain {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter>\
<rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
  will-change: transform;
  animation: vhs-grain 0.5s steps(6) infinite;
}
@keyframes vhs-grain {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-14px, 9px, 0); }
  40% { transform: translate3d(11px, -12px, 0); }
  60% { transform: translate3d(-7px, -6px, 0); }
  80% { transform: translate3d(13px, 7px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ── THE TUBE ─────────────────────────────────────────────────────────────
   Vignette and the faint cold cast a VHS picture carries. Static. */
.vhs__tube {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(rgba(120, 190, 255, 0.05), rgba(120, 190, 255, 0.05));
}

/* ── THE OSD ──────────────────────────────────────────────────────────────
   A VCR says what it is doing in the corner, and so should this: it is the
   one part of the effect that is also information. Blinking, because that is
   what the deck did, and because it separates "the picture is broken" from
   "the machine is rewinding". */
.vhs__osd {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 62px);
  left: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #eaf4ff;
  text-shadow: 0 0 8px rgba(120, 190, 255, 0.8), 0 1px 0 rgba(0, 0, 0, 0.9);
  animation: vhs-osd 0.9s steps(2, end) infinite;
}
.vhs__osd svg { width: 13px; height: 13px; }
@keyframes vhs-osd { 50% { opacity: 0.25; } }

/* ── WHAT THE STUDIO ITSELF DOES ──────────────────────────────────────────
   The colour bleed and the horizontal slip belong to the PICTURE, not to an
   overlay, so they are applied to the studio shell. One filter, set once for
   the duration — not animated, so it is rasterised a single time — plus a
   small horizontal jitter on the compositor. */
body[data-vhs='rewind'] .cp-studio-shift,
body[data-vhs='rewind'] .minimal-mobile-container {
  filter: saturate(1.5) contrast(1.06) hue-rotate(-5deg);
  will-change: transform;
  animation: vhs-slip 0.28s steps(3, end) infinite;
}
@keyframes vhs-slip {
  0% { transform: translate3d(0, 0, 0); }
  33% { transform: translate3d(-1.5px, 0, 0); }
  66% { transform: translate3d(2px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ── REDUCED MOTION ───────────────────────────────────────────────────────
   Rolling bands and jitter are exactly the motion this setting exists to
   refuse. The picture still says REWIND — it just holds still to do it. */
@media (prefers-reduced-motion: reduce) {
  .vhs__track,
  .vhs__grain,
  .vhs__osd { animation: none; }
  .vhs__track { opacity: 0.35; transform: translateY(38vh); }
  body[data-vhs='rewind'] .cp-studio-shift,
  body[data-vhs='rewind'] .minimal-mobile-container { animation: none; }
}
body{
  background-color: #750400;
  margin:0;
  
  background-image:url(
"https://media.freestocktextures.com/cache/ee/a7/eea7053352caf594e5ab1a7c3667e75d.jpg"  
  )
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}

.imgct {
  overflow: hidden;
  margin-right: 0px;
  margin-left: 23px;
  margin-top: 0px;
  float: left;
  position: absolute;
}

.imgct img {
  /*! grid-area: image; */
  position: relative;
  width: 120px;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 60px;
  border: 3px solid #fff;
  float: left;
}



.bookshelf {
  width: 900px;
  margin: 5rem auto;
  text-align: center;
  position: relative;
}

.bookshelf.first{
  margin-top:150px;
}



.book-grid {
  z-index: 2;
  position: relative;
  transform: translateY(-15px);
}
.book-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.book-grid ul li {
  justify-self: center;
}
.book-grid ul img {
  display: block;
  box-shadow: 3px 5px 18px 2px rgba(0, 0, 0, 0.6);
  width: 200px;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
}

.shelf-shadows {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  border-radius: 2px;
  z-index: 1;
  box-shadow: 0px -5px 3px 0px rgba(170, 170, 170, 0.2), 0px 15px 20px 0px rgba(39, 3, 3, 0.83), 0px 5px 5px 0px rgba(119, 119, 119, 0.3);
}

.shelf {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  background-color: #f9f9f9;
  border-radius: 2px;
  z-index: 3;
}
/* The in-world live badge. Sits under the 3D top bar, left-aligned with it,
   and is deliberately the only live UI inside the room. */

.lvh {
  position: fixed;
  left: 18px;
  top: 58px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px 7px 10px;
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.78);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(255, 59, 48, 0.42);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #f3f1ee;
  pointer-events: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.lvh.guest { border-color: rgba(0, 149, 246, 0.45); }

.lvh-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 8px #ff3b30;
  animation: lvh-pulse 2s ease-out infinite;
  flex: 0 0 auto;
}
.lvh.guest .lvh-dot { background: #0095f6; box-shadow: 0 0 8px #0095f6; }
@keyframes lvh-pulse {
  0%   { transform: scale(1);    opacity: 1; }
  55%  { transform: scale(1.35); opacity: 0.55; }
  100% { transform: scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .lvh-dot { animation: none; } }

.lvh-who { line-height: 1.2; }
.lvh-who b {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.lvh-who i {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  color: rgba(243, 241, 238, 0.55);
}

.lvh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 24px;
  padding: 0 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(243, 241, 238, 0.75);
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.lvh-btn.wide { padding: 0 10px; }
.lvh-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); color: #fff; }
.lvh-btn:disabled { opacity: 0.4; cursor: default; }
.lvh-btn.on { border-color: #ff3b30; color: #ff6a60; background: rgba(255, 59, 48, 0.14); }
.lvh-btn.leave:hover { border-color: #ff3b30; color: #ff6a60; }
/* ============================================================
   OPEN STUDIOS — live strip + room console.
   Lives inside THE BLOCK's panel, so it inherits the IG-dark
   tokens (--sbk-*) and only names its own accent: the ON AIR
   red. Everything here is instant — no entrance transitions,
   because a panel that depends on an animation completing has
   already stranded us once (see project-social-sidebar).
   ============================================================ */

.lv-wrap {
  --lv-air: #ff3b30;          /* on air */
  --lv-air-dim: #7a1c17;
  --lv-guest: #0095f6;        /* in someone else's room */
  --lv-gold: #f5a623;         /* audition / hand up */
  --lv-line: var(--sbk-line, #262626);
  --lv-ink: var(--sbk-ink, #f5f5f5);
  --lv-soft: var(--sbk-ink-soft, #c7c7cc);
  --lv-faint: var(--sbk-ink-faint, #8e8e93);
  border-bottom: 1px solid var(--lv-line);
  background: #060607;
  /* Never flex: the room takes the height it needs up to a hard cap and the
     feed below keeps the rest. Letting it grow made the console and the feed
     fight over the same pixels, and the loser was whichever the browser
     happened to lay out second. */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------------- strip ---------------- */

.lv-strip {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  flex: 0 0 46px;
}

.lv-onair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  border: 1px solid var(--lv-air-dim);
  background: rgba(255, 59, 48, 0.13);
  color: var(--lv-air);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
  white-space: nowrap;
}
.lv-onair.guest { border-color: #14486e; background: rgba(0, 149, 246, 0.13); color: var(--lv-guest); }
.lv-onair.audition { border-color: #7a5410; background: rgba(245, 166, 35, 0.14); color: var(--lv-gold); }

.lv-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: lv-pulse 2s ease-out infinite;
}
@keyframes lv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 59, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}
/* Reduced motion still needs to read as LIVE — keep the colour, drop the ring. */
@media (prefers-reduced-motion: reduce) { .lv-dot { animation: none; } }

.lv-strip-mid { flex: 1 1 auto; min-width: 0; cursor: pointer; line-height: 1.15; }
.lv-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--lv-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lv-meta { display: block; font-size: 10.5px; color: var(--lv-faint); }
.lv-sep { margin: 0 5px; opacity: 0.5; }
.lv-time { font-variant-numeric: tabular-nums; }
.lv-count { color: var(--lv-soft); }
.lv-off { color: var(--lv-gold); font-weight: 700; letter-spacing: 0.06em; }

.lv-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--lv-line);
  background: #131315;
  color: var(--lv-soft);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
}
.lv-icon:hover:not(:disabled) { background: #1c1c1e; color: var(--lv-ink); }
.lv-icon.on { border-color: var(--lv-air); color: var(--lv-air); background: rgba(255, 59, 48, 0.12); }
.lv-icon:disabled { opacity: 0.35; cursor: default; }
.lv-chev { width: 24px; font-size: 11px; }

/* ---------------- console ---------------- */

.lv-console {
  border-top: 1px solid var(--lv-line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Bounded on purpose: the room is a companion to the board, not a takeover.
     Everything inside scrolls. */
  max-height: min(52vh, 460px);
}

.lv-err {
  margin: 8px 10px 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255, 59, 48, 0.12);
  border: 1px solid var(--lv-air-dim);
  color: #ffb0aa;
  font-size: 11px;
}
.lv-err.soft { background: rgba(245, 166, 35, 0.1); border-color: #6b4a10; color: #f3cd8d; }

/* ---------------- monitor bus ---------------- */

.lv-monitor { padding: 10px 10px 8px; border-bottom: 1px solid var(--lv-line); }
.lv-monitor-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.lv-label { font-size: 9.5px; font-weight: 800; letter-spacing: 0.18em; color: var(--lv-faint); }
.lv-privately { font-size: 10px; color: var(--lv-gold); }
.lv-monitor-row { display: flex; flex-wrap: wrap; gap: 6px; }

.lv-mon {
  height: 26px;
  padding: 0 11px;
  border-radius: 13px;
  border: 1px solid var(--lv-line);
  background: #131315;
  color: var(--lv-soft);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lv-mon:hover { background: #1c1c1e; color: var(--lv-ink); }
.lv-mon.on { background: var(--lv-ink); color: #000; border-color: var(--lv-ink); }

.lv-hint { font-size: 10.5px; color: var(--lv-faint); align-self: center; }

.lv-monitor-act { display: flex; gap: 6px; margin-top: 8px; }
.lv-keep {
  flex: 1 1 auto;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: #1f8f4d;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.lv-keep:hover { background: #24a659; }
.lv-back {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--lv-line);
  background: #131315;
  color: var(--lv-soft);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------------- guest bar ---------------- */

.lv-guestbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 10px;
  border-bottom: 1px solid var(--lv-line);
}
.lv-guest-state { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: var(--lv-guest); }
.lv-guest-state.off { color: var(--lv-gold); }
.lv-follow, .lv-hand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  border: 1px solid var(--lv-line);
  background: #131315;
  color: var(--lv-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.lv-follow { border-color: #14486e; color: var(--lv-guest); }
.lv-hand.on { border-color: #7a5410; color: var(--lv-gold); background: rgba(245, 166, 35, 0.12); }
.lv-guestbar .lv-hand { margin-left: auto; }

/* ---------------- tabs ---------------- */

.lv-tabs { display: flex; border-bottom: 1px solid var(--lv-line); }
.lv-tabs button {
  flex: 1;
  height: 32px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--lv-faint);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  cursor: pointer;
}
.lv-tabs button.on { color: var(--lv-ink); border-bottom-color: var(--lv-ink); }
.lv-tabs em { font-style: normal; opacity: 0.7; margin-left: 4px; }

/* ---------------- people ---------------- */

.lv-people, .lv-chat { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.lv-people { padding: 6px 0; }

.lv-knocks { padding: 0 10px 6px; }
.lv-knock {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; margin-bottom: 5px;
  border-radius: 8px;
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid #6b4a10;
  font-size: 11px;
  color: #f3cd8d;
}
.lv-knock span { flex: 1 1 auto; }
.lv-yes, .lv-no {
  height: 22px; padding: 0 8px; border-radius: 11px;
  border: none; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; cursor: pointer;
}
.lv-yes { background: var(--lv-gold); color: #1a1200; }
.lv-no { background: #2a2a2c; color: var(--lv-soft); }

.lv-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 5px;
  padding: 4px 10px 8px;
}
.lv-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #0d0d0f; border: 1px solid var(--lv-line); }
.lv-tile video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.lv-tile.self video { transform: scaleX(-1); }
.lv-tile-name {
  position: absolute; left: 4px; bottom: 3px;
  font-size: 9px; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.lv-person {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px;
  border-left: 2px solid transparent;
}
.lv-person.speaking { border-left-color: #1f8f4d; background: rgba(31, 143, 77, 0.07); }
.lv-person.gone { opacity: 0.45; }

.lv-face {
  width: 30px; height: 30px; min-width: 30px;
  border-radius: 50%;
  background: #1c1c1e;
  border: 1px solid var(--lv-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: var(--lv-soft);
}
.lv-who { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.lv-name {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--lv-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lv-sub { display: block; font-size: 10px; color: var(--lv-faint); }

.lv-tag {
  font-style: normal;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.08em;
  padding: 1px 5px; border-radius: 4px;
  background: #1c1c1e; color: var(--lv-faint);
}
.lv-tag.host { background: rgba(255, 59, 48, 0.16); color: #ff8078; }
.lv-tag.desk { background: rgba(0, 149, 246, 0.16); color: #6cc0ff; }
.lv-tag.off  { background: rgba(245, 166, 35, 0.14); color: #f3cd8d; }

.lv-acts { display: flex; gap: 3px; }
.lv-act {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid var(--lv-line);
  background: #131315;
  color: var(--lv-faint);
  font-size: 11px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.lv-act:hover { background: #1c1c1e; color: var(--lv-ink); }
.lv-act.on { border-color: var(--lv-guest); color: var(--lv-guest); background: rgba(0, 149, 246, 0.12); }
.lv-act.danger:hover { border-color: var(--lv-air); color: var(--lv-air); }

.lv-empty { padding: 14px 10px; font-size: 11px; color: var(--lv-faint); text-align: center; }

/* ---------------- chat ---------------- */

.lv-chat { display: flex; flex-direction: column; }
.lv-chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 10px; }
.lv-msg { font-size: 12px; color: var(--lv-soft); margin-bottom: 5px; line-height: 1.35; word-break: break-word; }
.lv-msg b { color: var(--lv-ink); font-weight: 600; margin-right: 4px; }
.lv-msg.sys { color: var(--lv-faint); font-size: 11px; }

.lv-compose { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--lv-line); }
.lv-compose input {
  flex: 1 1 auto; min-width: 0;
  height: 30px; padding: 0 10px;
  border-radius: 15px;
  border: 1px solid var(--lv-line);
  background: #131315;
  color: var(--lv-ink);
  font-size: 12px;
  outline: none;
}
.lv-compose input:focus { border-color: #3a3a3c; }
.lv-compose button {
  height: 30px; padding: 0 12px;
  border-radius: 15px; border: none;
  background: var(--lv-guest); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; cursor: pointer;
}
.lv-compose button:disabled { opacity: 0.35; cursor: default; }

/* ---------------- footer ---------------- */

.lv-foot {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--lv-line);
}
.lv-share {
  flex: 1 1 auto;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--lv-line);
  background: #131315;
  color: var(--lv-soft);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lv-share:hover { background: #1c1c1e; color: var(--lv-ink); }
.lv-end {
  height: 28px; padding: 0 12px;
  border-radius: 8px; border: 1px solid var(--lv-air-dim);
  background: rgba(255, 59, 48, 0.12);
  color: var(--lv-air);
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  cursor: pointer;
  margin-left: auto;
}
.lv-end:hover { background: rgba(255, 59, 48, 0.2); }
/* ============================================================
   THE BLOCK — social sidebar, INSTAGRAM-DARK skin.
   Same component skeleton as the CONSOLE skin (every class kept);
   only the visual language changed: black glass, hairlines,
   gradient story rings, blue accent, red heart, system sans.
   The QuestArt SVGs read these variables too, so the seals and
   badges recolour themselves automatically.
   ============================================================ */

.sbk-root {
  --sbk-bone: #000000;        /* app background */
  --sbk-bone-2: #0f0f10;      /* card background */
  --sbk-bone-3: #1c1c1e;      /* raised background */
  --sbk-ink: #f5f5f5;         /* primary text */
  --sbk-ink-soft: #c7c7cc;    /* secondary text */
  --sbk-ink-faint: #8e8e93;   /* tertiary text */
  --sbk-line: #262626;        /* hairlines */
  --sbk-stamp: #0095f6;       /* IG action blue */
  --sbk-heart: #ed4956;       /* like red */
  --sbk-grad: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--sbk-ink);
}

/* ---------- edge tab (closed-state handle) ---------- */
.sbk-tab-handle {
  position: fixed;
  right: 0;
  top: 50%;
  /* Tucked away by default so it never covers studio buttons: only a 10px
     sliver peeks out; hovering (or keyboard focus) slides it fully out.
     The sliver alone is still clickable, so even where hover transitions
     don't run the panel can always be opened. */
  transform: translateY(-50%) translateX(calc(100% - 10px));
  /* Portaled to <body> and stacked above everything the studio can produce
     (splash z 99999, theme overlays z 100000). */
  z-index: 2147483000;
  background: #121214;
  color: var(--sbk-ink, #f5f5f5);
  border: 1px solid #2c2c2e;
  border-right: none;
  border-radius: 12px 0 0 12px;
  padding: 14px 8px;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  box-shadow: -6px 0 22px rgba(0, 0, 0, 0.5);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: transform 0.18s ease-out, background 0.15s ease;
  border-left: 3px solid transparent;
  -o-border-image: linear-gradient(180deg, #f9ce34, #ee2a7b, #6228d7) 1;
     border-image: linear-gradient(180deg, #f9ce34, #ee2a7b, #6228d7) 1;
}
.sbk-tab-handle:hover,
.sbk-tab-handle:focus-visible {
  transform: translateY(-50%) translateX(0);
  background: #1c1c1e;
}
.sbk-tab-handle:active { background: #2c2c2e; }
.sbk-tab-handle .sbk-badge {
  writing-mode: horizontal-tb;
  position: absolute;
  top: -8px;
  left: -8px;
  min-width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--sbk-heart, #ed4956);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #000;
}

/* ---------- panel ---------- */
.sbk-panel {
  /* Portaled to <body>: pinned to the viewport's right edge above every
     studio overlay. Home shrinks the stage by the panel width so nothing is
     hidden underneath. */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 372px;
  min-width: 372px;
  background: var(--sbk-bone);
  border-left: 1px solid var(--sbk-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2147483000;
  /* Deliberately NO entrance animation/transform: a panel whose visibility
     depends on an animation finishing is invisible anywhere animations are
     throttled or interrupted. The stage's positioning carries the slide. */
}

.sbk-hdr {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--sbk-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.sbk-hdr-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: var(--sbk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sbk-hdr-hand { font-size: 11px; color: var(--sbk-ink-faint); transform: none; }
.sbk-close {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--sbk-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sbk-close:hover { background: var(--sbk-bone-3); }

.sbk-tabs { display: flex; border-bottom: 1px solid var(--sbk-line); flex-shrink: 0; }
.sbk-tab {
  flex: 1;
  text-align: center;
  padding: 11px 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--sbk-ink-faint);
  background: transparent;
  position: relative;
  font-family: inherit;
}
.sbk-tab.on { color: var(--sbk-ink); border-bottom-color: var(--sbk-ink); }
.sbk-tab .sbk-badge {
  position: absolute;
  top: 4px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sbk-heart);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sbk-strip {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--sbk-ink-faint);
  padding: 8px 16px 2px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.sbk-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sbk-body::-webkit-scrollbar { width: 8px; }
.sbk-body::-webkit-scrollbar-thumb { background: #2c2c2e; border-radius: 8px; border: 2px solid #000; }

/* ---------- cards ---------- */
.sbk-card {
  background: var(--sbk-bone-2);
  border: 1px solid var(--sbk-line);
  border-radius: 14px;
  box-shadow: none;
  padding: 13px;
  position: relative;
  flex-shrink: 0;
}
.sbk-card.sbk-click { cursor: pointer; }
.sbk-card.sbk-click:hover { background: #17171a; }

.sbk-who { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.sbk-av {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border: none;
  border-radius: 50%;
  background: var(--sbk-bone-3);
  color: var(--sbk-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  overflow: hidden;
}
.sbk-av img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; display: block; }
.sbk-av-click { cursor: pointer; }
.sbk-av-click:hover { box-shadow: 0 0 0 2px var(--sbk-stamp); }
.sbk-nm { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbk-tm { font-size: 11px; color: var(--sbk-ink-faint); }
.sbk-txt { font-size: 13px; line-height: 1.5; margin-bottom: 10px; word-break: break-word; white-space: pre-wrap; }

.sbk-acts { display: flex; gap: 14px; font-size: 11px; color: var(--sbk-ink-soft); }
.sbk-act { background: none; border: none; font-family: inherit; font-size: 11px; color: var(--sbk-ink-soft); cursor: pointer; padding: 0; }
.sbk-act:hover { color: var(--sbk-ink); }
.sbk-act.liked { color: var(--sbk-heart); font-weight: 700; }

.sbk-stampmark {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: var(--sbk-heart);
  border: none;
  padding: 3px 8px;
  border-radius: 999px;
  transform: none;
  letter-spacing: 0.14em;
  pointer-events: none;
}
.sbk-stampmark.sbk-active { background: var(--sbk-stamp); color: #fff; }

/* ---------- compose ---------- */
.sbk-compose { display: flex; flex-direction: column; gap: 8px; }
.sbk-input, .sbk-textarea {
  width: 100%;
  background: var(--sbk-bone-2);
  border: 1px solid var(--sbk-line);
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--sbk-ink);
  padding: 9px 12px;
  outline: none;
  resize: none;
}
.sbk-input:focus, .sbk-textarea:focus { border-color: #3a3a3c; }
.sbk-input::-moz-placeholder, .sbk-textarea::-moz-placeholder { color: var(--sbk-ink-faint); }
.sbk-input::placeholder, .sbk-textarea::placeholder { color: var(--sbk-ink-faint); }

.sbk-btn {
  background: var(--sbk-stamp);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  cursor: pointer;
  align-self: flex-end;
}
.sbk-btn:hover { background: #1aa0f7; filter: brightness(1.05); }
.sbk-btn:disabled { opacity: 0.45; cursor: default; }
.sbk-btn.ghost { background: transparent; color: var(--sbk-stamp); }
.sbk-btn.ghost:hover { background: rgba(0, 149, 246, 0.12); filter: none; }

/* ---------- quests ---------- */
.sbk-quest { border-left: none; }
.sbk-qtitle { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; margin-bottom: 4px; text-transform: none; }
.sbk-qdesc { font-size: 12px; color: var(--sbk-ink-soft); line-height: 1.5; margin-bottom: 8px; }
.sbk-meter { height: 6px; border: none; border-radius: 99px; background: var(--sbk-bone-3); margin-bottom: 6px; overflow: hidden; }
.sbk-meter i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--sbk-grad);
  transition: width 0.4s ease;
}
.sbk-reward { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--sbk-ink-soft); }
.sbk-hand2 { font-family: inherit; font-size: 12px; font-weight: 600; color: var(--sbk-stamp); }

/* ---------- market ---------- */
.sbk-mkt { display: flex; gap: 10px; }
.sbk-thumb {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border: none;
  border-radius: 12px;
  background: var(--sbk-bone-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  overflow: hidden;
}
.sbk-price {
  font-size: 12px;
  font-weight: 700;
  background: var(--sbk-stamp);
  color: #fff;
  padding: 5px 11px;
  display: inline-block;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.sbk-price:hover { filter: brightness(1.08); }
.sbk-price:disabled { opacity: 0.45; cursor: default; }
.sbk-rarity { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; color: var(--sbk-ink-faint); text-transform: uppercase; }
.sbk-rarity.epic { color: #bf5af2; }
.sbk-rarity.legendary { color: #ff9f0a; }
.sbk-rarity.rare { color: #64d2ff; }
.sbk-owned {
  font-size: 9px;
  font-weight: 700;
  color: #30d158;
  border: 1px solid #30d158;
  padding: 3px 8px;
  border-radius: 999px;
  transform: none;
  letter-spacing: 0.16em;
  display: inline-block;
}
.sbk-cat-hdr {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--sbk-ink-faint);
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 4px;
  text-transform: uppercase;
}

/* ---------- DMs ---------- */
.sbk-dmrow { display: flex; align-items: center; gap: 10px; }
.sbk-dmmeta { flex: 1; min-width: 0; }
.sbk-dmlast { font-size: 12px; color: var(--sbk-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbk-callicons { display: flex; gap: 6px; }
.sbk-callbtn {
  background: none;
  border: 1px solid var(--sbk-line);
  border-radius: 50%;
  color: var(--sbk-ink-faint);
  width: 30px;
  height: 30px;
  font-size: 13px;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.sbk-callbtn.enabled { border-color: var(--sbk-stamp); color: var(--sbk-stamp); cursor: pointer; }
.sbk-callbtn.enabled:hover { background: rgba(0, 149, 246, 0.14); }

.sbk-thread { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sbk-thread-msgs {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px 10px;
}
.sbk-msg {
  max-width: 78%;
  padding: 9px 13px;
  font-size: 13px;
  line-height: 1.45;
  border: none;
  border-radius: 18px 18px 18px 5px;
  background: var(--sbk-bone-3);
  color: var(--sbk-ink);
  word-break: break-word;
  white-space: pre-wrap;
}
.sbk-msg.mine {
  align-self: flex-end;
  background: var(--sbk-stamp);
  color: #fff;
  border-radius: 18px 18px 5px 18px;
}
.sbk-msg .sbk-tm { display: block; margin-top: 3px; opacity: 0.7; font-size: 10px; }
.sbk-msg.mine .sbk-tm { color: rgba(255, 255, 255, 0.85); }
.sbk-thread-compose { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--sbk-line); }
.sbk-thread-compose .sbk-input { flex: 1; border-radius: 999px; }

/* ---------- footer ---------- */
.sbk-foot {
  border-top: 1px solid var(--sbk-line);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0a0a0b;
  flex-shrink: 0;
}
.sbk-lvl { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; white-space: nowrap; color: var(--sbk-ink-soft); }
.sbk-xpbar { flex: 1; height: 6px; border: none; border-radius: 99px; background: var(--sbk-bone-3); overflow: hidden; }
.sbk-xpbar i { display: block; height: 100%; border-radius: 99px; background: var(--sbk-grad); transition: width 0.5s ease; }
.sbk-pts { font-family: inherit; font-size: 13px; font-weight: 800; color: var(--sbk-ink); white-space: nowrap; }
.sbk-streak { font-size: 11px; color: var(--sbk-ink-soft); white-space: nowrap; }

/* ---------- fun quest cards ---------- */
/* Every quest kind carries its own gradient identity so the board reads like
   a wall of posters, not a settings list. */
.sbk-qk-sample_chop { --qg: linear-gradient(135deg, #ff9f0a, #ed4956); --qglow: rgba(255, 120, 40, 0.24); }
.sbk-qk-flip        { --qg: linear-gradient(135deg, #ee2a7b, #6228d7); --qglow: rgba(238, 42, 123, 0.22); }
.sbk-qk-constraint  { --qg: linear-gradient(135deg, #00c7be, #0095f6); --qglow: rgba(0, 180, 230, 0.22); }
.sbk-qk-listen      { --qg: linear-gradient(135deg, #f9ce34, #ff9f0a); --qglow: rgba(249, 190, 40, 0.2); }
.sbk-qk-social      { --qg: linear-gradient(135deg, #30d158, #00c7be); --qglow: rgba(48, 209, 120, 0.2); }
.sbk-qk-mix         { --qg: linear-gradient(135deg, #0095f6, #bf5af2); --qglow: rgba(120, 100, 250, 0.22); }
.sbk-qk-general, .sbk-qk-sample, .sbk-qk-relay { --qg: linear-gradient(135deg, #ff375f, #ff9f0a); --qglow: rgba(255, 80, 90, 0.22); }

.sbk-questcard {
  position: relative;
  border-radius: 16px;
  padding: 13px;
  background: var(--sbk-bone-2);
  border: 1px solid transparent;
  background-clip: padding-box;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* gradient hairline frame */
.sbk-questcard::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: var(--qg, var(--sbk-grad));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
}
/* soft colour wash in the corner */
.sbk-questcard::after {
  content: '';
  position: absolute;
  top: -46px;
  right: -46px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--qg, var(--sbk-grad));
  opacity: 0.14;
  filter: blur(28px);
  pointer-events: none;
}
.sbk-questcard:hover { transform: translateY(-1px); box-shadow: 0 8px 26px var(--qglow, rgba(0,0,0,0.4)); }
.sbk-questcard.hero { padding: 17px 15px; }
.sbk-questcard.hero::before { opacity: 0.95; }
.sbk-questcard.hero::after { opacity: 0.22; width: 200px; height: 200px; }
.sbk-questcard.claimed { opacity: 0.6; }
.sbk-questcard.claimed::before, .sbk-questcard.claimed::after { opacity: 0.15; }

.sbk-questrow { display: flex; gap: 12px; align-items: center; position: relative; }
.sbk-sealdisc {
  border-radius: 50%;
  background: var(--qg, var(--sbk-grad));
  padding: 2px;
  display: flex;
  flex-shrink: 0;
}
.sbk-sealdisc > svg {
  background: #0c0c0d;
  border-radius: 50%;
  padding: 6px;
  box-sizing: content-box;
}
.sbk-questgo { font-size: 20px; color: var(--sbk-ink-faint); flex-shrink: 0; }
.sbk-questcard:hover .sbk-questgo { color: var(--sbk-ink); }

.sbk-chiprow { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; align-items: center; }
.sbk-xpchip, .sbk-ptschip, .sbk-cadchip {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.sbk-xpchip { background: var(--qg, var(--sbk-grad)); color: #fff; }
.sbk-ptschip { background: var(--sbk-bone-3); color: var(--sbk-ink-soft); }
.sbk-cadchip { background: transparent; border: 1px solid var(--sbk-line); color: var(--sbk-ink-faint); }

.sbk-queststatus { display: flex; align-items: center; gap: 10px; margin-top: 11px; position: relative; }
.sbk-queststatus .sbk-meter { flex: 1; margin-bottom: 0; height: 7px; }
.sbk-queststatus .sbk-meter i { background: var(--qg, var(--sbk-grad)); }
.sbk-statustext { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--sbk-ink-soft); white-space: nowrap; }

.sbk-livechip {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.sbk-livechip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #30d158;
  animation: sbk-pulse 1.6s ease-in-out infinite;
}
@keyframes sbk-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.5); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(48, 209, 88, 0); }
}

/* ---------- fun market ---------- */
.sbk-mc-venue       { --mg: linear-gradient(135deg, #ff9f0a, #ee2a7b); }
.sbk-mc-sampler     { --mg: linear-gradient(135deg, #6228d7, #0095f6); }
.sbk-mc-instrument  { --mg: linear-gradient(135deg, #ee2a7b, #6228d7); }
.sbk-mc-drum_genre  { --mg: linear-gradient(135deg, #ed4956, #ff9f0a); }
.sbk-mc-melody_pack { --mg: linear-gradient(135deg, #00c7be, #0095f6); }
.sbk-mc-perk        { --mg: linear-gradient(135deg, #30d158, #f9ce34); }

.sbk-cathdr-grad {
  background: var(--sbk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border: none;
}

.sbk-mkthero {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(#101012, #101012) padding-box,
    linear-gradient(120deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34) border-box;
  border: 1.5px solid transparent;
  background-size: 100% 100%, 300% 300%;
  animation: sbk-shimmer 6s linear infinite;
  box-shadow: 0 6px 30px rgba(238, 42, 123, 0.16);
  flex-shrink: 0;
}
@keyframes sbk-shimmer {
  from { background-position: 0 0, 0% 50%; }
  to { background-position: 0 0, 300% 50%; }
}
.sbk-mktheroicon {
  width: 74px;
  height: 74px;
  min-width: 74px;
  border-radius: 18px;
  background: var(--mg, var(--sbk-grad));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.3);
}
.sbk-mkttitle { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }

.sbk-mktgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sbk-mkttile {
  border-radius: 16px;
  background: var(--sbk-bone-2);
  border: 1px solid var(--sbk-line);
  padding: 12px 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.sbk-mkttile:hover { transform: translateY(-2px); }
.sbk-mkttile.r-epic { border-color: rgba(191, 90, 242, 0.5); }
.sbk-mkttile.r-epic:hover { box-shadow: 0 8px 24px rgba(191, 90, 242, 0.22); }
.sbk-mkttile.r-rare { border-color: rgba(100, 210, 255, 0.4); }
.sbk-mkttile.r-rare:hover { box-shadow: 0 8px 24px rgba(100, 210, 255, 0.18); }
.sbk-mkttile.r-common:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
/* stagger the tiles so the wall doesn't read as a spreadsheet */
.sbk-mktgrid .sbk-mkttile:nth-child(4n+2) { transform: translateY(8px); }
.sbk-mktgrid .sbk-mkttile:nth-child(4n+2):hover { transform: translateY(6px); }
.sbk-mkttileicon {
  width: 100%;
  height: 62px;
  border-radius: 12px;
  background: var(--mg, var(--sbk-grad));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 3px;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.28);
}
.sbk-price.wide { width: 100%; text-align: center; margin-top: 4px; }

/* ============================================================
   QUEST BOARD - RPG log (plaques, crests, framed rewards)
   ============================================================ */
.sbk-rpgboard { gap: 14px; }

.sbk-rpghero {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 14px;
  border-radius: 12px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(212, 162, 78, 0.16), transparent 60%),
    linear-gradient(180deg, #17130c, #0d0b09);
  border: 1px solid #3a2f1e;
  box-shadow: inset 0 1px 0 rgba(212, 162, 78, 0.18);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.sbk-rpghero::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 9px;
  border: 1px solid rgba(212, 162, 78, 0.16);
  pointer-events: none;
}
.sbk-rpgcrest {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #4a3a1e, #191309);
  border: 2px solid #d4a24e;
  box-shadow: 0 0 18px rgba(212, 162, 78, 0.28), inset 0 0 14px rgba(0, 0, 0, 0.6);
}
.sbk-rpgname {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #f2e2bd;
  text-transform: uppercase;
}
.sbk-rpgsubtitle { font-size: 11px; color: #9d8a68; margin-top: 2px; }
.sbk-rpgxp {
  height: 7px;
  margin-top: 8px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #3a2f1e;
  overflow: hidden;
}
.sbk-rpgxp i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8a5a1a, #d4a24e 60%, #f3d693);
  box-shadow: 0 0 10px rgba(212, 162, 78, 0.55);
  transition: width 0.6s ease;
}

/* claim-all banner button */
.sbk-claimall {
  position: relative;
  border: 1px solid #2f6b34;
  border-radius: 9px;
  background: linear-gradient(180deg, #3f9147, #1f5b28);
  color: #f2ffe9;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 11px 14px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(40, 140, 60, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}
.sbk-claimall:hover { filter: brightness(1.08); }
.sbk-claimallglow {
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: sbk-sheen 2.6s ease-in-out infinite;
}
@keyframes sbk-sheen {
  0% { left: -60%; }
  60%, 100% { left: 130%; }
}

/* section banner */
.sbk-rpgsec { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.sbk-rpgsechdr { display: flex; align-items: center; gap: 9px; margin-top: 4px; }
.sbk-rpgbanner {
  position: relative;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  color: #f0d9a6;
  background: linear-gradient(180deg, #6d2f1e, #451a10);
  border: 1px solid #8c5a2b;
  border-radius: 4px;
  padding: 5px 14px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.2);
}
.sbk-rpgbanner::before, .sbk-rpgbanner::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  background: #8c5a2b;
  transform: translateY(-50%) rotate(45deg);
}
.sbk-rpgbanner::before { left: -4px; }
.sbk-rpgbanner::after { right: -4px; }
.sbk-rpgline {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 162, 78, 0.55), rgba(212, 162, 78, 0.08));
}
.sbk-rpgcount {
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  color: #d4a24e;
  white-space: nowrap;
}
.sbk-rpgcount.all { color: #6fcf7a; }

/* the quest plaque */
.sbk-plaque {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(180deg, #efdcae, #d9c08a);
  border: 1px solid #7a5a2c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 12px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  overflow: hidden;
}
.sbk-plaque::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--qg, linear-gradient(180deg, #d4a24e, #8a5a1a));
}
.sbk-plaque:hover {
  transform: translateX(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 18px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,162,78,0.5);
}
.sbk-plaque.is-done { filter: grayscale(0.5) brightness(0.82); }
.sbk-plaque.is-ready {
  background: linear-gradient(180deg, #f7e7b6, #e8cf92);
  animation: sbk-readyglow 2s ease-in-out infinite;
}
@keyframes sbk-readyglow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 12px rgba(0,0,0,0.45), 0 0 0 0 rgba(212, 162, 78, 0.55); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 12px rgba(0,0,0,0.45), 0 0 0 5px rgba(212, 162, 78, 0); }
}

.sbk-plaquecheck {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 5px;
  border: 2px solid #7a5a2c;
  background: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #4a3410;
}
.sbk-plaquecheck.is-done { background: #6fa24a; border-color: #47702f; color: #fff; }
.sbk-plaquecheck.is-ready { background: #d4a24e; border-color: #8a5a1a; color: #2a1c06; }

.sbk-plaquebody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sbk-plaquetitle {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 700;
  color: #5a3d12;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sbk-plaquesub {
  font-size: 11px;
  color: #6b5227;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sbk-plaquebar {
  position: relative;
  display: block;
  height: 9px;
  margin-top: 5px;
  border-radius: 99px;
  background: rgba(90, 61, 18, 0.25);
  border: 1px solid rgba(90, 61, 18, 0.4);
  overflow: hidden;
}
.sbk-plaquebar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8a5a1a, #d4a24e);
  transition: width 0.4s ease;
}
.sbk-plaquebar em {
  position: absolute;
  right: 5px;
  top: -1px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  color: #4a3410;
}

.sbk-plaquereward { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.sbk-rewardframe {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background: radial-gradient(circle at 35% 28%, #5c4318, #241a08);
  border: 2px solid #8c6a2b;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7), 0 0 10px rgba(212, 162, 78, 0.2);
}
.sbk-rewardframe svg circle,
.sbk-rewardframe svg path,
.sbk-rewardframe svg rect,
.sbk-rewardframe svg line { stroke: #f0d9a6; }
.sbk-rewardamt { font-size: 10px; font-weight: 800; color: #5a3d12; letter-spacing: 0.04em; }

/* ============================================================
   THE REALM — quests as a game screen: world map on top,
   mission log underneath.
   ============================================================ */
.sbk-realm {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #07090c;
}

.sbk-mapwrap {
  position: relative;
  height: 46%;
  min-height: 230px;
  flex-shrink: 0;
  border-bottom: 1px solid #3a2f1e;
  box-shadow: inset 0 -18px 34px rgba(0, 0, 0, 0.6);
}
.sbk-mapview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background: #05080b;
}
.sbk-mapview:active { cursor: grabbing; }
.sbk-mapstage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  background: #0b0a07;
}
.sbk-mapimg {
  display: block;
  width: 100%;
  height: 100%;
  /* the art is the world; keep it crisp when zoomed in */
  image-rendering: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  /* Deliberately NO opacity fade: a transition that never advances (throttled
     tab, reduced motion, non-compositing embed) would strand the whole map at
     opacity 0. The stage carries a dark backdrop so there is no flash. */
}

/* light layered over the places that already glow in the painting */
.sbk-mapfx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.sbk-ember {
  animation-name: sbk-emberpulse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform-origin: center;
}
@keyframes sbk-emberpulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .sbk-ember { animation: none; opacity: 0.6; }
}

/* ---- quest pins ---- */
.sbk-pin {
  position: absolute;
  transform-origin: 50% 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Georgia, 'Times New Roman', serif;
}
.sbk-pinbody {
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 35% 30%, #5c4318, #241a08);
  border: 2px solid #d4a24e;
  box-shadow: 0 0 14px rgba(212, 162, 78, 0.45), inset 0 0 10px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.sbk-pinglyph { font-size: 15px; font-weight: 700; color: #f0d9a6; line-height: 1; }
.sbk-pinstem {
  width: 2px;
  height: 12px;
  background: linear-gradient(180deg, #d4a24e, rgba(212, 162, 78, 0));
}
.sbk-pinlabel {
  margin-top: 1px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #e7d6ac;
  text-shadow: 0 1px 3px #000, 0 0 6px #000;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.14s ease;
  pointer-events: none;
}
.sbk-pin:hover { z-index: 5; }
.sbk-pin:hover .sbk-pinbody { transform: translateY(-3px) scale(1.12); box-shadow: 0 0 22px rgba(212, 162, 78, 0.85); }
.sbk-pin:hover .sbk-pinlabel { opacity: 1; }

.sbk-pin.is-ready .sbk-pinbody {
  border-color: #ffd166;
  animation: sbk-pinpulse 1.8s ease-in-out infinite;
}
@keyframes sbk-pinpulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 209, 102, 0.5), inset 0 0 10px rgba(0,0,0,0.7); }
  50% { box-shadow: 0 0 26px rgba(255, 209, 102, 0.95), inset 0 0 10px rgba(0,0,0,0.7); }
}
.sbk-pin.is-active .sbk-pinbody { border-color: #7fd4ff; box-shadow: 0 0 16px rgba(127, 212, 255, 0.55), inset 0 0 10px rgba(0,0,0,0.7); }
.sbk-pin.is-active .sbk-pinglyph { color: #cdefff; }
.sbk-pin.is-done .sbk-pinbody { border-color: #6fa24a; filter: saturate(0.6) brightness(0.8); }
.sbk-pin.is-done .sbk-pinglyph { color: #cfe6b8; }
.sbk-pin.selected .sbk-pinbody { transform: translateY(-3px) scale(1.16); border-color: #fff0c4; box-shadow: 0 0 26px rgba(255, 240, 196, 0.9); }
.sbk-pin.selected .sbk-pinlabel { opacity: 1; }

/* ---------- selected pin: sparks and halo ---------- */
.sbk-pinhalo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 138, 0.55), rgba(255, 190, 90, 0) 68%);
  animation: sbk-halobreathe 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sbk-halobreathe {
  0%, 100% { transform: scale(0.85); opacity: 0.55; }
  50% { transform: scale(1.18); opacity: 0.95; }
}
.sbk-pinring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 226, 168, 0.9);
  animation: sbk-ringout 1.9s ease-out infinite;
  pointer-events: none;
}
@keyframes sbk-ringout {
  0% { transform: scale(0.6); opacity: 0.95; }
  100% { transform: scale(2.4); opacity: 0; }
}
.sbk-pinspark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: #ffe7b0;
  box-shadow: 0 0 6px #ffd166;
  pointer-events: none;
  animation: sbk-sparkfly 2.6s ease-out infinite;
}
.sbk-pinspark.s1 { animation-delay: 0s;    --sx: 20px;  --sy: -30px; }
.sbk-pinspark.s2 { animation-delay: 0.55s; --sx: -22px; --sy: -26px; }
.sbk-pinspark.s3 { animation-delay: 1.15s; --sx: 26px;  --sy: -14px; }
.sbk-pinspark.s4 { animation-delay: 1.75s; --sx: -14px; --sy: -34px; }
@keyframes sbk-sparkfly {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(0.2); opacity: 0; }
}
.sbk-pin.selected .sbk-pinbody {
  border-color: #ffe7b0;
  box-shadow: 0 0 30px rgba(255, 214, 138, 0.95), inset 0 0 12px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   QUEST ARTWORK — the framed illustration that opens a mission
   ============================================================ */
.sbk-questart {
  position: relative;
  margin: -10px -14px 0;
  height: 268px;
  overflow: hidden;
  flex-shrink: 0;
  background: #06050a;
  border-bottom: 1px solid #3a2f1e;
}
.sbk-questartimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 34%;
     object-position: center 34%;
  /* a slow drift so the frame feels alive without distracting */
  animation: sbk-artdrift 22s ease-in-out infinite alternate;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}
@keyframes sbk-artdrift {
  from { transform: scale(1.04) translateY(0); }
  to { transform: scale(1.12) translateY(-10px); }
}
.sbk-questartveil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(6, 5, 10, 0.15) 0%, rgba(6, 5, 10, 0.2) 45%, rgba(6, 5, 10, 0.94) 100%);
  pointer-events: none;
}

/* embers rising over the art */
.sbk-questartsparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sbk-artspark {
  position: absolute;
  bottom: -6px;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: #ffd58a;
  box-shadow: 0 0 7px rgba(255, 190, 90, 0.95);
  opacity: 0;
  animation: sbk-artrise linear infinite;
}
@keyframes sbk-artrise {
  0% { transform: translateY(0) translateX(0) scale(0.7); opacity: 0; }
  12% { opacity: 0.95; }
  70% { opacity: 0.8; }
  100% { transform: translateY(-240px) translateX(var(--dx, 10px)) scale(0.25); opacity: 0; }
}
.sbk-artspark.sp0 { left: 8%;  animation-duration: 7.5s;  animation-delay: 0s;   --dx: 14px; }
.sbk-artspark.sp1 { left: 21%; animation-duration: 9.2s;  animation-delay: 1.1s; --dx: -10px; }
.sbk-artspark.sp2 { left: 35%; animation-duration: 6.8s;  animation-delay: 2.3s; --dx: 8px; }
.sbk-artspark.sp3 { left: 50%; animation-duration: 10.4s; animation-delay: 0.6s; --dx: -16px; }
.sbk-artspark.sp4 { left: 64%; animation-duration: 8.1s;  animation-delay: 3.0s; --dx: 12px; }
.sbk-artspark.sp5 { left: 78%; animation-duration: 7.0s;  animation-delay: 1.8s; --dx: -8px; }
.sbk-artspark.sp6 { left: 91%; animation-duration: 9.9s;  animation-delay: 2.7s; --dx: 16px; }
.sbk-questartsparks .sbk-artspark:nth-child(n + 8) { animation-duration: 12s; opacity: 0; }

.sbk-questartcopy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 16px 14px;
}
.sbk-questarttitle {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.08;
  color: #f7ecd2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 1);
  margin-top: 4px;
}
.sbk-questartrule {
  height: 3px;
  width: 84px;
  margin: 9px 0 10px;
  border-top: 1px solid rgba(212, 162, 78, 0.95);
  border-bottom: 1px solid rgba(212, 162, 78, 0.4);
}
.sbk-questartchips { display: flex; gap: 7px; flex-wrap: wrap; }
.sbk-artchip {
  font-family: Georgia, serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 3px;
  background: rgba(10, 8, 5, 0.72);
  border: 1px solid rgba(212, 162, 78, 0.45);
  color: #e7d6ac;
  backdrop-filter: blur(3px);
}
.sbk-artchip.gold {
  background: linear-gradient(180deg, #d4a24e, #9a6f22);
  border-color: #e6bd74;
  color: #1a1409;
  box-shadow: 0 2px 10px rgba(212, 162, 78, 0.35);
}
.sbk-artchip.ghost { border-color: rgba(212, 162, 78, 0.22); color: #a2937a; }

.sbk-questart .sbk-mregion {
  margin-bottom: 0;
  color: #d4a24e;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

@media (prefers-reduced-motion: reduce) {
  .sbk-questartimg { animation: none; transform: scale(1.05); }
  .sbk-artspark, .sbk-pinspark, .sbk-pinring, .sbk-pinhalo { animation: none; }
  .sbk-artspark { opacity: 0; }
}

/* ---- hover card ---- */
.sbk-maptip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: 74%;
  padding: 10px 13px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(20, 16, 10, 0.97), rgba(9, 8, 6, 0.97));
  border: 1px solid #6b5427;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(212, 162, 78, 0.25);
  pointer-events: none;
  z-index: 6;
}
.sbk-maptipregion { font-size: 9px; letter-spacing: 0.28em; color: #a08a5c; text-transform: uppercase; }
.sbk-maptipname {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  color: #f2e2bd;
  margin-top: 2px;
}
.sbk-maptipquest { font-size: 12px; color: #cbbfa4; margin-top: 4px; font-style: italic; }
.sbk-maptipreward { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: #d4a24e; margin-top: 6px; }

/* ---- map controls ---- */
.sbk-mapzoom {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 6;
}
.sbk-mapzoom button {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #6b5427;
  background: rgba(16, 13, 8, 0.9);
  color: #e7d6ac;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sbk-mapzoom button:hover { background: rgba(46, 36, 20, 0.95); border-color: #d4a24e; }
.sbk-maphint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(231, 214, 172, 0.5);
  text-transform: uppercase;
  pointer-events: none;
}

.sbk-realmpanel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sbk-realmpanel .sbk-body { padding-top: 10px; }

.sbk-mregion {
  font-size: 9px;
  letter-spacing: 0.24em;
  color: #a08a5c;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ============================================================
   THE STALL — market as an Elden Ring merchant.
   Cinematic category plates, rarity-lit relic slots, carved
   stone panels, pressed-gold trade buttons.
   ============================================================ */
.sbk-shop {
  --sh-gold: #d4a24e;
  --sh-gold-hi: #f0d9a6;
  --sh-ink: #f2e2bd;
  --sh-sub: #a2937a;
  --sh-line: #3a2f1e;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(212, 162, 78, 0.08), transparent 62%),
    linear-gradient(180deg, #14120d 0%, #0a0908 100%);
  color: var(--sh-ink);
  font-family: Georgia, 'Times New Roman', serif;
  padding: 0 0 16px;
  gap: 0;
}

.sbk-shopback {
  align-self: flex-start;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--sh-gold);
  cursor: pointer;
  padding: 14px 16px 6px;
  text-transform: uppercase;
}
.sbk-shopback:hover { color: var(--sh-gold-hi); }
.sbk-shopback.floating {
  position: absolute;
  top: 4px;
  left: 0;
  z-index: 3;
  text-shadow: 0 2px 8px #000;
}

.sbk-shoph1 { font-size: 22px; font-weight: 700; padding: 4px 16px 10px; }
.sbk-shoph2 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sh-gold);
  padding: 14px 16px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sbk-shoph2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 162, 78, 0.4), transparent);
}
.sbk-shopempty { padding: 40px 16px; text-align: center; color: var(--sh-sub); font-size: 13px; font-style: italic; }
.sbk-shopsep { height: 1px; background: linear-gradient(90deg, transparent, var(--sh-line), transparent); margin: 8px 16px; }

/* ---- merchant banner ---- */
.sbk-shopstorehead { flex-shrink: 0; }
.sbk-shopstorebanner {
  position: relative;
  height: 158px;
  background-image: url('/realm/shop/venue.webp');
  background-size: cover;
  background-position: center 42%;
  border-bottom: 1px solid var(--sh-line);
  display: flex;
  align-items: flex-end;
}
.sbk-shopbannerveil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 7, 5, 0.35) 0%, rgba(8, 7, 5, 0.15) 40%, rgba(10, 9, 8, 0.96) 100%);
}
.sbk-shopbannercopy { position: relative; padding: 0 16px 12px; width: 100%; }
.sbk-shopkicker {
  font-size: 9px;
  letter-spacing: 0.34em;
  color: var(--sh-gold);
  text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
}
.sbk-shopstorename {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--sh-ink);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.95);
  margin-top: 3px;
}
.sbk-shopbalance {
  margin: 12px 16px 0;
  padding: 12px 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #1c1811, #100d09);
  border: 1px solid var(--sh-line);
  box-shadow: inset 0 1px 0 rgba(212, 162, 78, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sbk-shopbalance span { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sh-sub); }
.sbk-shopbalance b { font-size: 20px; color: var(--sh-gold); }
.sbk-shopbalance b i { font-size: 11px; font-style: normal; letter-spacing: 0.16em; color: var(--sh-sub); }

/* ---- aisle nav ---- */
.sbk-shopnav {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.98), rgba(10, 9, 8, 0.9));
  border-bottom: 1px solid var(--sh-line);
  scrollbar-width: none;
  flex-shrink: 0;
  margin-top: 12px;
}
.sbk-shopnav::-webkit-scrollbar { display: none; }
.sbk-shopnavchip {
  border: 1px solid var(--sh-line);
  background: linear-gradient(180deg, #1b1710, #120f0a);
  color: var(--sh-ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 8px 14px;
  border-radius: 2px;
  white-space: nowrap;
  cursor: pointer;
  text-transform: uppercase;
}
.sbk-shopnavchip:hover { border-color: var(--sh-gold); color: var(--sh-gold-hi); }

/* ---- the cinematic plate that opens each aisle ---- */
.sbk-shopsection { padding: 16px 0 4px; flex-shrink: 0; scroll-margin-top: 54px; }
.sbk-shopplate {
  position: relative;
  height: 132px;
  margin: 0 0 6px;
  background-size: cover;
  background-position: center 45%;
  border-top: 1px solid var(--sh-line);
  border-bottom: 1px solid var(--sh-line);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.sbk-shopplateveil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 20% 20%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(180deg, rgba(10, 9, 8, 0.3) 0%, rgba(10, 9, 8, 0.25) 45%, rgba(10, 9, 8, 0.95) 100%);
}
.sbk-shopplatecopy { position: relative; padding: 0 16px 11px; }
.sbk-shopplatetitle {
  font-size: 20px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--sh-ink);
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.95);
}
.sbk-shopplatelore {
  font-size: 12px;
  font-style: italic;
  color: #cdbf9f;
  margin-top: 2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
  max-width: 88%;
}
.sbk-shopplatecount {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sh-gold);
  background: rgba(8, 7, 5, 0.7);
  border: 1px solid rgba(212, 162, 78, 0.4);
  border-radius: 2px;
  padding: 4px 9px;
  backdrop-filter: blur(3px);
}

/* ---- relic rows ---- */
.sbk-shopitem {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(58, 47, 30, 0.6);
  cursor: pointer;
  transition: background 0.14s ease;
}
.sbk-shopitem:hover { background: rgba(212, 162, 78, 0.055); }
.sbk-shopiteminfo { flex: 1; min-width: 0; }
.sbk-shopitemname { font-size: 15px; font-weight: 700; color: var(--sh-ink); }
.sbk-shopitemdesc {
  font-size: 12px;
  font-style: italic;
  color: var(--sh-sub);
  line-height: 1.45;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sbk-shopitemprice { font-size: 14px; font-weight: 700; color: var(--sh-gold); margin-top: 7px; }
.sbk-shopitemprice i { font-size: 10px; font-style: normal; letter-spacing: 0.16em; color: var(--sh-sub); }
.sbk-shoprarityline {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sh-sub);
  margin-bottom: 2px;
}
.sbk-shoprarityline.rare { color: #7fc4ff; }
.sbk-shoprarityline.epic { color: #c89bff; }
.sbk-shoprarityline.legendary { color: #ffc95e; }

/* the relic slot: category art behind a carved frame */
.sbk-shopitempic {
  position: relative;
  width: 86px;
  height: 86px;
  min-width: 86px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  border: 2px solid #6b5427;
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.sbk-shopitempic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.72));
  border-radius: 1px;
}
.sbk-shopitemglyph {
  position: relative;
  z-index: 1;
  font-size: 34px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.9));
}
.sbk-shopitem.r-rare .sbk-shopitempic { border-color: #3f6f96; box-shadow: inset 0 0 26px rgba(0,0,0,0.85), 0 0 12px rgba(127, 196, 255, 0.2); }
.sbk-shopitem.r-epic .sbk-shopitempic { border-color: #6f4a9c; box-shadow: inset 0 0 26px rgba(0,0,0,0.85), 0 0 14px rgba(200, 155, 255, 0.24); }
.sbk-shopitem.r-legendary .sbk-shopitempic {
  border-color: #c69233;
  box-shadow: inset 0 0 26px rgba(0,0,0,0.85), 0 0 18px rgba(255, 201, 94, 0.34);
}
.sbk-shopitem:hover .sbk-shopitempic { border-color: var(--sh-gold); }

.sbk-shopplus {
  position: absolute;
  right: -9px;
  bottom: -9px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #6b5427;
  background: radial-gradient(circle at 38% 30%, #2a2113, #100d08);
  color: var(--sh-gold);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.sbk-shopplus:hover { transform: scale(1.12); border-color: var(--sh-gold); }
.sbk-shopplus.added { background: linear-gradient(180deg, #d9ab58, #96691d); color: #191307; border-color: #e6bd74; }
.sbk-shopowned {
  position: absolute;
  right: -9px;
  bottom: -9px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #5f8a3f, #2c451c);
  color: #eaffdc;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #3f6127;
}

/* ---- the relic page ---- */
.sbk-shoppdp { padding-bottom: 90px; }
.sbk-shophero {
  position: relative;
  height: 232px;
  background-size: cover;
  background-position: center 45%;
  border-bottom: 1px solid var(--sh-line);
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}
.sbk-shopheroveil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(0, 0, 0, 0) 20%, rgba(6, 5, 4, 0.55) 100%),
    linear-gradient(180deg, rgba(6, 5, 4, 0.5) 0%, rgba(6, 5, 4, 0.2) 40%, rgba(10, 9, 8, 0.97) 100%);
}
.sbk-shopheroglyph {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 74px;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 18px rgba(212, 162, 78, 0.35));
  animation: sbk-relicfloat 5.5s ease-in-out infinite;
}
@keyframes sbk-relicfloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}
.sbk-shopherocopy { position: relative; padding: 0 16px 13px; width: 100%; }
.sbk-shoppdptitle {
  font-size: 25px;
  font-weight: 700;
  color: var(--sh-ink);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.95);
  line-height: 1.1;
}
.sbk-shoppdpprice { font-size: 16px; font-weight: 700; color: var(--sh-gold); margin-top: 4px; text-shadow: 0 2px 8px #000; }
.sbk-shopherocopy .sbk-shoprarityline { text-shadow: 0 2px 8px #000; }
.sbk-shoppdpdesc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #cdbf9f;
  font-style: italic;
  padding: 14px 16px 0;
}
.sbk-shoptags { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px 0; }
.sbk-shoptag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(212, 162, 78, 0.1);
  border: 1px solid rgba(212, 162, 78, 0.32);
  color: var(--sh-gold);
  padding: 5px 10px;
  border-radius: 2px;
}
.sbk-shoptag.epic { border-color: #6f4a9c; color: #d9b6ff; background: rgba(160, 111, 208, 0.13); }
.sbk-shoptag.legendary { border-color: #c69233; color: #ffdf9e; background: rgba(224, 161, 58, 0.14); }
.sbk-shoptag.rare { border-color: #3f6f96; color: #bfe2ff; background: rgba(95, 159, 208, 0.13); }
.sbk-shopbullets { margin: 0; padding: 0 16px 4px 34px; display: flex; flex-direction: column; gap: 8px; }
.sbk-shopbullets li { font-size: 13px; color: var(--sh-ink); line-height: 1.5; }
.sbk-shopspecs { display: flex; flex-direction: column; padding: 0 16px; }
.sbk-shopspecs > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(58, 47, 30, 0.6);
  font-size: 13px;
}
.sbk-shopspecs > div:last-child { border-bottom: none; }
.sbk-shopspecs span { color: var(--sh-sub); letter-spacing: 0.06em; }
.sbk-shopspecs b { color: var(--sh-ink); }

/* ---- buttons ---- */
.sbk-shopbtn {
  width: 100%;
  border: 1px solid var(--sh-line);
  border-radius: 3px;
  background: linear-gradient(180deg, #1c1811, #131009);
  color: var(--sh-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 14px;
  cursor: pointer;
  text-transform: uppercase;
}
.sbk-shopbtn.primary {
  background: linear-gradient(180deg, #d9ab58, #96691d);
  border-color: #e6bd74;
  color: #191307;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.6), inset 0 -1px 0 rgba(0,0,0,0.3), 0 4px 18px rgba(212, 162, 78, 0.24);
}
.sbk-shopbtn.primary:hover { filter: brightness(1.09); }
.sbk-shopbtn.primary:active { transform: translateY(1px); }
.sbk-shopbtn:disabled { opacity: 0.42; cursor: default; filter: grayscale(0.35); }
.sbk-shopstickybar {
  position: sticky;
  bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(10,9,8,0), #0a0908 34%);
  margin-top: auto;
}

.sbk-shopcartbar {
  position: sticky;
  bottom: 12px;
  margin: 12px 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e6bd74;
  border-radius: 3px;
  background: linear-gradient(180deg, #d9ab58, #96691d);
  color: #191307;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 14px 18px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 240, 200, 0.55);
}
.sbk-shopcartcount {
  background: rgba(25, 19, 7, 0.28);
  border-radius: 2px;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* ---- satchel + reckoning ---- */
.sbk-shopcard {
  margin: 0 16px;
  border: 1px solid var(--sh-line);
  border-radius: 3px;
  background: linear-gradient(180deg, #191610, #100e0a);
  box-shadow: inset 0 1px 0 rgba(212, 162, 78, 0.14);
  padding: 4px 14px;
  flex-shrink: 0;
}
.sbk-shopcartrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(58, 47, 30, 0.6); }
.sbk-shopcard .sbk-shopcartrow:last-child { border-bottom: none; }
.sbk-shopcartpic {
  position: relative;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  border: 1px solid #6b5427;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.85);
}
.sbk-shopcartname { font-size: 14px; font-weight: 700; }
.sbk-shopcartprice { font-size: 12px; color: var(--sh-gold); margin-top: 2px; }
.sbk-shopremove {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sh-sub);
  cursor: pointer;
  text-transform: uppercase;
}
.sbk-shopremove:hover { color: #e08a7a; }

.sbk-shopsummaryrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(58, 47, 30, 0.6);
  color: var(--sh-sub);
}
.sbk-shopcard .sbk-shopsummaryrow:last-child { border-bottom: none; }
.sbk-shopsummaryrow.total { font-size: 16px; font-weight: 700; color: var(--sh-ink); }
.sbk-shopsummaryrow.muted { font-size: 12px; }
.sbk-shopfree { color: #8fc46a; font-weight: 700; }
.sbk-shopqty {
  min-width: 22px;
  height: 22px;
  border-radius: 2px;
  background: rgba(212, 162, 78, 0.14);
  color: var(--sh-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.sbk-shoperror {
  margin: 10px 16px 0;
  padding: 12px 14px;
  border-radius: 3px;
  background: rgba(150, 40, 26, 0.16);
  border: 1px solid rgba(190, 80, 60, 0.42);
  color: #eab9a6;
  font-size: 12.5px;
  line-height: 1.5;
  font-style: italic;
}

/* ---- trade struck ---- */
.sbk-shopconfirm { text-align: center; padding: 34px 16px 18px; }
.sbk-shopsigil { position: relative; width: 84px; height: 84px; margin: 0 auto 16px; }
.sbk-shopsigilring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(212, 162, 78, 0.65);
  box-shadow: 0 0 26px rgba(212, 162, 78, 0.4), inset 0 0 22px rgba(212, 162, 78, 0.22);
  animation: sbk-sigilspin 9s linear infinite;
}
.sbk-shopsigilring::before,
.sbk-shopsigilring::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px solid rgba(212, 162, 78, 0.35);
}
.sbk-shopsigilring::after { inset: 18px; border-style: dashed; }
@keyframes sbk-sigilspin { to { transform: rotate(360deg); } }
.sbk-shopsigilcore {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: var(--sh-gold-hi);
  text-shadow: 0 0 20px rgba(212, 162, 78, 0.9);
  animation: sbk-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sbk-shopconfirmtitle { font-size: 23px; font-weight: 700; color: var(--sh-ink); }
.sbk-shopconfirmsub { font-size: 13px; color: var(--sh-sub); margin-top: 5px; font-style: italic; }
.sbk-shop .sbk-shopbtn { margin: 14px 16px 0; width: calc(100% - 32px); }

@media (prefers-reduced-motion: reduce) {
  .sbk-shopheroglyph, .sbk-shopsigilring, .sbk-shopsigilcore { animation: none; }
}

/* ============================================================
   DMs - Instagram inbox
   ============================================================ */
.sbk-iginbox { gap: 0; padding: 8px 0 16px; }
.sbk-igsearchwrap { position: relative; padding: 4px 14px 10px; flex-shrink: 0; }
.sbk-igsearchicon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-60%);
  color: var(--sbk-ink-faint);
  font-size: 14px;
  pointer-events: none;
}
.sbk-igsearch {
  width: 100%;
  background: #1c1c1e;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--sbk-ink);
  padding: 10px 12px 10px 32px;
  outline: none;
}
.sbk-igsearch::-moz-placeholder { color: var(--sbk-ink-faint); }
.sbk-igsearch::placeholder { color: var(--sbk-ink-faint); }

.sbk-iginboxhdr { font-size: 14px; font-weight: 700; padding: 8px 16px 6px; flex-shrink: 0; }
.sbk-igthread {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.sbk-igthread:hover { background: #121214; }
.sbk-igthreadmeta { flex: 1; min-width: 0; }
.sbk-igthreadname { font-size: 14px; font-weight: 400; color: var(--sbk-ink); }
.sbk-igthreadname.unread { font-weight: 700; }
.sbk-igthreadlast {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--sbk-ink-faint);
  margin-top: 2px;
  min-width: 0;
}
.sbk-igthreadlast.unread { color: var(--sbk-ink); font-weight: 600; }
.sbk-igpreview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 172px; }
.sbk-igdot { opacity: 0.6; }
.sbk-igunread { width: 9px; height: 9px; min-width: 9px; border-radius: 50%; background: #0095f6; }
.sbk-igcamera { color: var(--sbk-ink-faint); font-size: 17px; }

/* ---------- quest detail ---------- */
.sbk-questhead { display: flex; gap: 11px; align-items: flex-start; }
.sbk-questcta { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--sbk-stamp); }
.sbk-material { border-left: none; }
.sbk-withheld {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 9px;
  font-size: 11px;
  color: var(--sbk-ink-faint);
}
.sbk-role {
  border: 1px solid var(--sbk-heart);
  color: var(--sbk-heart);
  padding: 2px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 9px;
  font-weight: 700;
}
.sbk-rolebtn {
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.55;
}
.sbk-rolebtn.on {
  opacity: 1;
  background: var(--sbk-heart);
  color: #fff;
  border-style: solid;
}
.sbk-rulecard {
  margin-top: 10px;
  border: none;
  color: #fff;
  background: var(--sbk-grad);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: center;
  transform: none;
}
.sbk-chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 4px;
}
.sbk-chainlink { display: inline-flex; align-items: center; gap: 5px; }
.sbk-chainname { font-size: 11px; }
.sbk-chainarrow { color: var(--sbk-ink-faint); font-size: 12px; }
.sbk-chainyou { font-size: 12px; font-weight: 800; color: var(--sbk-stamp); transform: none; }

.sbk-dragchip {
  margin-top: 10px;
  border: 1.5px dashed #3a3a3c;
  background: var(--sbk-bone-3);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--sbk-ink-soft);
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.sbk-dragchip:hover { border-color: var(--sbk-stamp); color: var(--sbk-stamp); }
.sbk-dragchip:active { cursor: grabbing; background: #232326; }

.sbk-error {
  border: none;
  background: rgba(237, 73, 86, 0.12);
  border-radius: 10px;
  color: var(--sbk-heart);
  font-size: 12px;
  line-height: 1.5;
  padding: 9px 12px;
}
.sbk-body audio { filter: none; border-radius: 999px; }
@keyframes sbk-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- instagram-grammar feed ---------- */
.sbk-igfeed { gap: 14px; padding-top: 8px; }

.sbk-stories {
  display: flex;
  gap: 13px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--sbk-line);
  flex-shrink: 0;
  scrollbar-width: none;
}
.sbk-stories::-webkit-scrollbar { display: none; }
.sbk-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  min-width: 58px;
}
.sbk-storyring {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sbk-grad);
  padding: 2.5px;
  border: none;
  box-shadow: none;
}
.sbk-storyring > * {
  background: #000;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
}
.sbk-story.done .sbk-storyring { background: #2c2c2e; opacity: 0.7; }
.sbk-storylabel {
  font-size: 10px;
  color: var(--sbk-ink-soft);
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sbk-story.done .sbk-storylabel { text-decoration: none; opacity: 0.55; }

.sbk-igcompose { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.sbk-igcompose .sbk-btn { align-self: flex-end; }

.sbk-igpost {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--sbk-line);
  border-radius: 0;
  box-shadow: none;
  padding-bottom: 6px;
  flex-shrink: 0;
}
.sbk-ighead {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 2px;
}
.sbk-igwho { flex: 1; min-width: 0; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.sbk-ignm { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbk-igwho:hover .sbk-ignm { color: var(--sbk-ink-soft); }
.sbk-igquestflag {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--sbk-grad);
  border: none;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.sbk-igtime { font-size: 10px; color: var(--sbk-ink-faint); text-transform: none; letter-spacing: 0; }

.sbk-igmedia {
  position: relative;
  margin: 0;
  border: 1px solid var(--sbk-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--sbk-bone-2);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.sbk-igmedia img { width: 100%; display: block; max-height: 340px; -o-object-fit: cover; object-fit: cover; }
.sbk-igheartpop {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 80px;
  height: 80px;
  font-size: 72px;
  line-height: 80px;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  animation: sbk-heartpop 0.7s ease forwards;
  pointer-events: none;
}
@keyframes sbk-heartpop {
  0% { transform: scale(0.4); opacity: 0; }
  25% { transform: scale(1.15); opacity: 1; }
  60% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.sbk-igaudio { padding: 8px 0 0; }
.sbk-igaudio audio { width: 100%; height: 32px; }

.sbk-igacts { display: flex; align-items: center; gap: 4px; padding: 7px 0 0; }
.sbk-igact {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 21px;
  line-height: 1;
  color: var(--sbk-ink);
  cursor: pointer;
  padding: 4px 7px 4px 0;
}
.sbk-igact:hover { color: var(--sbk-ink-soft); }
.sbk-igact.liked { color: var(--sbk-heart); }
.sbk-igload {
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  margin-left: auto;
  border: none;
  background: var(--sbk-stamp);
  border-radius: 8px;
  padding: 6px 10px !important;
}
.sbk-igload:hover { filter: brightness(1.08); color: #fff; }
.sbk-igload:disabled { opacity: 0.5; cursor: default; }

.sbk-igbody { padding: 5px 2px 8px; }
.sbk-iglikes { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.sbk-igcaption { font-size: 13px; line-height: 1.45; word-break: break-word; color: var(--sbk-ink); }
.sbk-igcaption b, .sbk-igcomment b { cursor: pointer; font-weight: 600; }
.sbk-igcaption b:hover, .sbk-igcomment b:hover { color: var(--sbk-ink-soft); }
.sbk-igviewreplies {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--sbk-ink-faint);
  cursor: pointer;
  padding: 5px 0 0;
}
.sbk-igviewreplies:hover { color: var(--sbk-ink-soft); }
.sbk-igcomments {
  margin-top: 8px;
  border-top: 1px solid var(--sbk-line);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sbk-igcomment { font-size: 12px; line-height: 1.5; word-break: break-word; }

/* ---------- profile ---------- */
.sbk-profilehead { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.sbk-profilehead .sbk-av { font-size: 20px; }
.sbk-profilename { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.sbk-profiletag { font-family: inherit; font-size: 12px; color: var(--sbk-ink-faint); transform: none; }
.sbk-profilebadges { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; margin-top: 4px; color: var(--sbk-ink-soft); }
.sbk-profilestats {
  display: flex;
  border: 1px solid var(--sbk-line);
  border-radius: 14px;
  background: var(--sbk-bone-2);
  box-shadow: none;
  flex-shrink: 0;
  overflow: hidden;
}
.sbk-profilestats > div {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  border-right: 1px solid var(--sbk-line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sbk-profilestats > div:last-child { border-right: none; }
.sbk-profilestats b { font-size: 15px; }
.sbk-profilestats span { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; color: var(--sbk-ink-faint); text-transform: uppercase; }

/* ---------- toast ---------- */
.sbk-toast {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  background: #262628;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
  animation: sbk-toast-pop 2.6s ease forwards;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}
@keyframes sbk-toast-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.85); }
  12% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.03); }
  20% { transform: translateX(-50%) translateY(0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

.sbk-empty {
  text-align: center;
  color: var(--sbk-ink-faint);
  font-size: 12px;
  padding: 26px 10px;
  line-height: 1.8;
}
.sbk-empty .sbk-hand2 { font-size: 14px; font-weight: 700; display: block; color: var(--sbk-ink); }

.sbk-back {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sbk-ink-soft);
  cursor: pointer;
  padding: 0 0 6px;
  text-align: left;
}
.sbk-back:hover { color: var(--sbk-ink); }

/* ============================================================
   THE REALM PANEL — everything under the map wears the same
   carved-stone / parchment language. Scoped to .sbk-realm so the
   feed, DMs and profiles keep their Instagram look.
   ============================================================ */
.sbk-realm {
  --rm-gold: #d4a24e;
  --rm-gold-soft: rgba(212, 162, 78, 0.4);
  --rm-ink: #f2e2bd;
  --rm-sub: #a2937a;
  --rm-line: #3a2f1e;
}

/* the panel itself is stone, not a black void */
.sbk-realmpanel {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(212, 162, 78, 0.07), transparent 60%),
    linear-gradient(180deg, #14120d 0%, #0c0b08 100%);
}
.sbk-realm .sbk-body { color: var(--rm-ink); }

/* ---- the task card: carved stone tablet ---- */
.sbk-realm .sbk-mission {
  background:
    linear-gradient(180deg, rgba(255, 240, 200, 0.05), transparent 40%),
    repeating-linear-gradient(94deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #1c1811 0%, #12100b 100%);
  border: 1px solid var(--rm-line);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(212, 162, 78, 0.22),
    inset 0 0 40px rgba(0, 0, 0, 0.55),
    0 6px 20px rgba(0, 0, 0, 0.5);
  padding: 16px 16px 15px;
  position: relative;
}
/* gold hairline inset, like an engraved border */
.sbk-realm .sbk-mission::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(212, 162, 78, 0.16);
  border-radius: 2px;
  pointer-events: none;
}
.sbk-realm .sbk-mdesc {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.62;
  color: #cdbf9f;
  max-width: none;
}
.sbk-realm .sbk-mtag { color: var(--rm-gold); }

/* ---- material / info cards ---- */
.sbk-realm .sbk-card {
  background:
    linear-gradient(180deg, rgba(255, 240, 200, 0.035), transparent 45%),
    linear-gradient(180deg, #191610 0%, #100e0a 100%);
  border: 1px solid var(--rm-line);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(212, 162, 78, 0.14), 0 4px 14px rgba(0, 0, 0, 0.45);
}
.sbk-realm .sbk-material { border-left: 3px solid var(--rm-gold-soft); }
.sbk-realm .sbk-nm { color: var(--rm-ink); font-family: Georgia, serif; }
.sbk-realm .sbk-tm { color: var(--rm-sub); }

/* ---- section headers become gold rules ---- */
.sbk-realm .sbk-cat-hdr {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--rm-gold);
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}
.sbk-realm .sbk-cat-hdr::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rm-gold-soft), transparent);
}

/* ---- buttons: pressed gold, not IG blue ---- */
.sbk-realm .sbk-btn {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #d9ab58, #96691d);
  border: 1px solid #e6bd74;
  color: #191307;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(212, 162, 78, 0.22);
  transition: filter 0.12s ease, transform 0.08s ease;
}
.sbk-realm .sbk-btn:hover { filter: brightness(1.09); }
.sbk-realm .sbk-btn:active { transform: translateY(1px); filter: brightness(0.96); }
.sbk-realm .sbk-btn:disabled { opacity: 0.4; filter: grayscale(0.4); }

.sbk-realm .sbk-btn.ghost {
  background: linear-gradient(180deg, #1c1811, #131009);
  border: 1px solid var(--rm-line);
  color: var(--rm-ink);
  box-shadow: inset 0 1px 0 rgba(212, 162, 78, 0.14);
}
.sbk-realm .sbk-btn.ghost:hover { border-color: var(--rm-gold-soft); color: #ffe6ac; filter: none; }

.sbk-realm .sbk-back {
  font-family: Georgia, serif;
  color: var(--rm-gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sbk-realm .sbk-back:hover { color: #ffe6ac; }

/* ---- inputs ---- */
.sbk-realm .sbk-input,
.sbk-realm .sbk-textarea {
  background: #0d0b07;
  border: 1px solid var(--rm-line);
  border-radius: 3px;
  color: var(--rm-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
}
.sbk-realm .sbk-input:focus,
.sbk-realm .sbk-textarea:focus { border-color: var(--rm-gold-soft); }
.sbk-realm .sbk-input::-moz-placeholder, .sbk-realm .sbk-textarea::-moz-placeholder { color: #6d6250; font-style: italic; }
.sbk-realm .sbk-input::placeholder,
.sbk-realm .sbk-textarea::placeholder { color: #6d6250; font-style: italic; }

/* ---- misc themed bits ---- */
.sbk-realm .sbk-dragchip {
  background: linear-gradient(180deg, #1c1811, #12100b);
  border: 1.5px dashed var(--rm-gold-soft);
  border-radius: 3px;
  color: var(--rm-gold);
  font-family: Georgia, serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sbk-realm .sbk-dragchip:hover { border-color: var(--rm-gold); color: #ffe6ac; }
.sbk-realm .sbk-error {
  background: rgba(150, 40, 26, 0.16);
  border: 1px solid rgba(190, 80, 60, 0.45);
  border-radius: 3px;
  color: #eab9a6;
  font-family: Georgia, serif;
}
.sbk-realm .sbk-empty { color: var(--rm-sub); font-family: Georgia, serif; }
.sbk-realm .sbk-empty .sbk-hand2 { color: var(--rm-gold); font-family: Georgia, serif; }
.sbk-realm .sbk-role {
  border-color: var(--rm-gold-soft);
  color: var(--rm-gold);
  border-radius: 2px;
  font-family: Georgia, serif;
}
.sbk-realm .sbk-withheld { color: var(--rm-sub); }
.sbk-realm .sbk-meter {
  background: #0d0b07;
  border: 1px solid var(--rm-line);
  border-radius: 2px;
  height: 8px;
}
.sbk-realm .sbk-meter i { background: linear-gradient(90deg, #8a5a1a, var(--rm-gold)); }
.sbk-realm .sbk-reward { color: var(--rm-sub); font-family: Georgia, serif; }
.sbk-realm .sbk-hand2 { color: var(--rm-gold); font-family: Georgia, serif; font-style: italic; }
.sbk-realm audio { filter: sepia(0.35) saturate(0.7) brightness(0.85); }

/* the submissions wall under a quest keeps its own frame but goes warm */
.sbk-realm .sbk-igpost { border-bottom-color: var(--rm-line); }
.sbk-realm .sbk-igcaption { color: #cdbf9f; }
.sbk-realm .sbk-iglikes { color: var(--rm-ink); }
.sbk-realm .sbk-igload {
  background: linear-gradient(180deg, #d9ab58, #96691d);
  color: #191307;
  border: 1px solid #e6bd74;
  border-radius: 3px;
  font-family: Georgia, serif;
  letter-spacing: 0.12em;
}
.desktop-tape-library {
  --dtl-bg: #101213;
  --dtl-panel: #181b1c;
  --dtl-panel-2: #202425;
  --dtl-line: #3b4141;
  --dtl-text: #f0f2ed;
  --dtl-muted: #919a96;
  --dtl-accent: #79d78f;
  position: fixed;
  inset: 4vh 2.5vw;
  z-index: 7000;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  color: var(--dtl-text);
  background: var(--dtl-bg);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow: hidden;
  border: 1px solid #343a38;
  box-shadow: 0 28px 90px rgba(0,0,0,.84), 0 0 0 100vmax rgba(0,0,0,.62);
}
.desktop-tape-library::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.035) 3px 4px); }
.dtl-header { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 0 14px 0 18px; border-bottom: 1px solid #090a0a; box-shadow: inset 0 -1px rgba(255,255,255,.08), 0 5px 18px rgba(0,0,0,.45); background: linear-gradient(#292d2e, #191c1d); }
.dtl-wordmark { display: flex; align-items: center; gap: 10px; }
.dtl-wordmark > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #65706c; background: #0b0d0d; color: var(--dtl-accent); font: 800 11px/1 monospace; box-shadow: inset 0 0 0 2px #202525; }
.dtl-wordmark div, .dtl-workspace-bar > div, .dtl-panel-heading div { display: flex; flex-direction: column; min-width: 0; }
.dtl-wordmark strong { font-size: 13px; text-transform: uppercase; }
.dtl-wordmark small, .dtl-panel-heading span, .dtl-workspace-bar span { color: var(--dtl-muted); font: 10px/1.2 monospace; text-transform: uppercase; }
.dtl-now-playing { min-width: 240px; padding: 8px 16px; text-align: center; border: 1px solid #080909; background: #111414; color: #b9c2be; font: 11px/1 monospace; text-transform: uppercase; box-shadow: inset 0 1px 6px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtl-now-playing i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #59605d; }
.dtl-now-playing i.is-live { background: var(--dtl-accent); box-shadow: 0 0 8px var(--dtl-accent); }
.dtl-icon-button { justify-self: end; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #0b0c0c; color: #c9cecb; background: linear-gradient(#383d3e, #202425); box-shadow: inset 0 1px rgba(255,255,255,.13), 0 2px 3px #090a0a; }
.dtl-icon-button svg { width: 17px; }
.dtl-layout { min-height: 0; display: grid; grid-template-columns: 280px minmax(440px, 1fr) 330px; }
.dtl-shelf, .dtl-flip-browser { min-height: 0; position: relative; z-index: 1; display: flex; flex-direction: column; background: var(--dtl-panel); }
.dtl-shelf { border-right: 1px solid #050606; box-shadow: inset -1px 0 rgba(255,255,255,.07); }
.dtl-flip-browser { border-left: 1px solid #050606; box-shadow: inset 1px 0 rgba(255,255,255,.07); }
.dtl-panel-heading { height: 62px; flex: 0 0 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #080909; background: linear-gradient(#242829, #1b1e1f); }
.dtl-panel-heading strong { margin-top: 4px; font-size: 15px; }
.dtl-panel-heading > svg { width: 18px; color: var(--dtl-accent); }
.dtl-search { height: 38px; margin: 10px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #363d3b; background: #0e1010; box-shadow: inset 0 2px 5px #050606; }
.dtl-search:focus-within { border-color: var(--dtl-accent); }
.dtl-search svg { width: 15px; color: #77807c; }
.dtl-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--dtl-text); background: transparent; font: 12px/1 monospace; }
.dtl-cassette-stack { min-height: 0; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 28px 24px 14px; scrollbar-color: #4c5551 #101212; }
.dtl-cassette-spine { position: relative; width: 100%; height: 56px; margin: 0 0 5px; display: grid; grid-template-columns: 34px minmax(0,1fr) 16px 16px; align-items: center; padding: 0 10px 0 5px; text-align: left; color: #1c2220; border: 1px solid #050606; border-left: 8px solid var(--tape-color, #bdc5bb); /* impeccable-disable-line side-tab -- literal cassette spine: rows are tapes on a shelf, the edge is the tape itself */ background: linear-gradient(90deg, #dfe1d7, #b9beb5 78%, #858d87); box-shadow: inset 0 1px rgba(255,255,255,.8), inset 0 -2px rgba(0,0,0,.18), 4px 5px 7px rgba(0,0,0,.56); transform-origin: left center; }
.dtl-cassette-spine:nth-child(4n+2) { --tape-color: #cc704f; }
.dtl-cassette-spine:nth-child(4n+3) { --tape-color: #d6b85c; }
.dtl-cassette-spine:nth-child(4n+4) { --tape-color: #63859c; }
.dtl-cassette-spine:hover { filter: brightness(1.06); }
.dtl-cassette-spine:active { translate: 0 1px; }
.dtl-cassette-spine.is-selected { z-index: 3; outline: 2px solid var(--dtl-accent); box-shadow: inset 0 1px rgba(255,255,255,.9), 9px 9px 16px rgba(0,0,0,.7); }
.dtl-cassette-spine.is-playing .dtl-tape-index { color: #0f6a2c; }
.dtl-tape-index { font: 700 10px/1 monospace; }
.dtl-tape-label { min-width: 0; display: flex; flex-direction: column; border-left: 1px solid rgba(0,0,0,.2); padding-left: 8px; }
.dtl-tape-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.dtl-tape-label small { margin-top: 3px; font: 9px/1 monospace; text-transform: uppercase; color: #59615e; }
.dtl-new-dot { width: 7px; height: 7px; border-radius: 50%; background: #16933e; box-shadow: 0 0 5px #16933e; }
.dtl-tape-chevron { width: 14px; rotate: -90deg; }
.dtl-tape-skeleton, .dtl-artist-skeleton { background: linear-gradient(90deg, #242829, #353b39, #242829); background-size: 200% 100%; animation: dtl-shimmer 1.2s linear infinite; }
.dtl-tape-skeleton { height: 56px; margin-bottom: 5px; }
.dtl-empty { height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: var(--dtl-muted); text-align: center; }
.dtl-empty svg { width: 30px; }
.dtl-empty strong { color: var(--dtl-text); }
.dtl-empty span { max-width: 180px; font-size: 12px; }
.dtl-workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: 62px minmax(0, 1fr) 70px; background: #131616; }
.dtl-workspace-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 18px; border-bottom: 1px solid #080909; background: linear-gradient(#202425, #171a1b); }
.dtl-workspace-bar strong { margin-top: 4px; max-width: 390px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.desktop-tape-library .dtl-transport { position: static; width: auto; height: auto; display: flex; flex-direction: row; align-items: center; gap: 5px; transform: none; }
.dtl-transport button, .dtl-action-dock button, .dtl-action-dock a { border: 1px solid #090a0a; color: #cbd1cd; background: linear-gradient(#363c3a, #202523); box-shadow: inset 0 1px rgba(255,255,255,.13), 0 2px 3px #080909; }
.dtl-transport button { width: 34px; height: 34px; display: grid; place-items: center; }
.dtl-transport svg { width: 15px; }
.dtl-transport button:hover, .dtl-transport button.is-active { color: var(--dtl-accent); }
.dtl-transport button:active, .dtl-action-dock button:active, .dtl-action-dock a:active { transform: translateY(1px); box-shadow: inset 0 2px 5px #080909; }
.dtl-canvas-viewport { min-width: 0; min-height: 0; overflow: auto; background-color: #111414; background-image: radial-gradient(circle, #353c39 1px, transparent 1.5px); background-size: 22px 22px; scrollbar-color: #46504c #0e1010; }
.dtl-canvas { position: relative; min-width: 100%; min-height: 100%; }
.dtl-connectors { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.dtl-connectors path { fill: none; stroke: #65706b; stroke-width: 2; filter: drop-shadow(0 1px #050606); }
.dtl-version-node { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 12px 16px; color: #dfe4e0; text-align: left; border: 1px solid #080909; background: linear-gradient(145deg, #303635, #1d2221); box-shadow: inset 0 1px rgba(255,255,255,.12), 8px 9px 16px rgba(0,0,0,.52); }
.dtl-version-node:hover { border-color: #69746f; translate: 0 -2px; }
.dtl-version-node.is-selected { outline: 2px solid var(--dtl-accent); outline-offset: 2px; }
.dtl-version-node.is-playing { border-color: var(--dtl-accent); background: linear-gradient(145deg, #2b3a36, #1b2422); box-shadow: inset 0 1px rgba(255,255,255,.12), 8px 9px 16px rgba(0,0,0,.52); }
.dtl-node-type { display: flex; align-items: center; gap: 5px; color: var(--dtl-accent); font: 9px/1 monospace; text-transform: uppercase; }
.dtl-node-type svg { width: 11px; }
.dtl-version-node strong { width: 100%; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.dtl-version-node small { margin-top: 4px; color: var(--dtl-muted); font: 9px/1 monospace; }
.dtl-node-port { position: absolute; top: calc(50% - 5px); width: 10px; height: 10px; border: 2px solid #151918; border-radius: 50%; background: #75807b; }
.dtl-node-port-in { left: -6px; }.dtl-node-port-out { right: -6px; background: var(--dtl-accent); }
.dtl-action-dock { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-top: 1px solid #080909; background: linear-gradient(#202425, #171a1b); }
.dtl-action-dock button, .dtl-action-dock a { height: 46px; min-width: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 10px; text-decoration: none; }
.dtl-action-dock svg { width: 16px; height: 16px; }
.dtl-action-dock span { font: 9px/1 monospace; text-transform: uppercase; }
.dtl-action-dock .dtl-flip-focus { color: #07120a; border-color: #65bf79; background: linear-gradient(#9be3aa, #62b976); }
.dtl-action-dock button:disabled { opacity: .45; }
.dtl-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 10px 8px; }
.dtl-filter-row select { min-width: 0; height: 32px; padding: 0 7px; color: #cad1cd; border: 1px solid #3a4240; border-radius: 0; background: #111414; font: 10px/1 monospace; }
.dtl-mode-switch { display: grid; grid-template-columns: 1fr 1fr; margin: 0 10px 10px; border: 1px solid #38403d; }
.dtl-mode-switch button { height: 31px; color: #8f9894; border: 0; background: #111414; font: 10px/1 monospace; text-transform: uppercase; }
.dtl-mode-switch button.is-active { color: #07120a; background: var(--dtl-accent); }
.dtl-inline-error { margin: 0 10px 8px; padding: 7px; color: #ffc6b7; border: 1px solid #794536; background: #2d1b17; font-size: 10px; }
.dtl-artist-grid { min-height: 0; flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 7px; padding: 2px 10px 14px; scrollbar-color: #46504c #0e1010; }
.dtl-artist { position: relative; min-width: 0; height: 150px; display: flex; flex-direction: column; align-items: flex-start; padding: 0 8px 8px; overflow: hidden; text-align: left; color: var(--dtl-text); border: 1px solid #343a38; background: #202423; }
.dtl-artist > span { width: calc(100% + 16px); height: 88px; margin: 0 -8px 8px; display: grid; place-items: center; overflow: hidden; color: #172019; background: #798d7c; font: 800 22px/1 sans-serif; }
.dtl-artist img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; filter: saturate(.76) contrast(1.06); }
.dtl-artist strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.dtl-artist small { width: 100%; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dtl-muted); font: 8px/1 monospace; text-transform: uppercase; }
.dtl-artist i { position: absolute; right: 6px; top: 6px; padding: 4px 6px; color: #07120a; background: var(--dtl-accent); font: normal 8px/1 monospace; text-transform: uppercase; opacity: 0; transform: translateY(-4px); transition: .15s ease; }
.dtl-artist:hover { border-color: var(--dtl-accent); }.dtl-artist:hover i { opacity: 1; transform: translateY(0); }
.dtl-artist-skeleton { height: 150px; }
.dtl-more { height: 38px; margin: 0 10px 10px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #dbe0dd; border: 1px solid #424a47; background: #252a28; font: 10px/1 monospace; text-transform: uppercase; }
.dtl-theme-switch,.fml-theme-switch { display:flex; gap:3px; padding:3px; border:1px solid #34383b; background:#090b0e; }
.dtl-theme-switch button,.fml-theme-switch button { width:30px; height:28px; display:grid; place-items:center; border:0; color:#7f858d; background:transparent; }
.dtl-theme-switch button.is-active,.fml-theme-switch button.is-active { color:#c977ff; background:#271138; box-shadow:inset 0 0 0 1px #692997; }
.dtl-theme-switch svg,.fml-theme-switch svg { width:15px; }

/* Reference-matched Flip Mode theme */
.dtl-flip-theme { --fm-purple:#a84cff; --fm-cyan:#24e0d2; --fm-blue:#2b95ff; grid-template-rows:50px minmax(0,1fr); background:#030508; border-color:#1a1d23; font-family:Inter,"Segoe UI",sans-serif; /* impeccable-disable-line overused-font -- deliberately reference-matched Flip Mode theme; see note before changing */ }
.dtl-flip-theme::before { display:none; }
.fml-header { display:grid; grid-template-columns:110px 370px minmax(0,1fr) auto auto; align-items:center; border-bottom:1px solid #1b1e26; background:#030508; }
.fml-brand { padding-left:20px; font-size:24px; font-weight:800; }
.fml-title { align-self:stretch; display:flex; align-items:center; padding-left:28px; color:#bb68ff; border-left:1px solid #1b1e26; border-right:1px solid #1b1e26; font-size:18px; font-weight:700; }
.fml-mode-title { padding-left:20px; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.fml-mode-title strong{color:#c66cff}.fml-mode-title span{padding:0 9px;color:#777}
.fml-theme-switch { margin-right:8px; }.fml-close { height:34px; margin-right:14px; display:flex; align-items:center; gap:7px; padding:0 13px; border:1px solid #252a32; border-radius:6px; color:#e8e8ed; background:#080a0e; font-size:11px; }.fml-close svg{width:13px}
.fml-grid { min-height:0; display:grid; grid-template-columns:370px 420px minmax(500px,1fr); }
.fml-tracks,.fml-flow,.fml-browser { min-height:0; background:#05070a; }
.fml-tracks { display:grid; grid-template-rows:42px 38px minmax(0,1fr) 52px; gap:8px; padding:10px; border-right:1px solid #1c2028; }
.fml-track-count { display:flex; align-items:center; justify-content:space-between; padding:0 14px; border:1px solid #303441; border-radius:5px; background:linear-gradient(#11141a,#090b10); box-shadow:inset 0 1px rgba(255,255,255,.06); font-size:11px; }.fml-track-count span{color:#9da1aa}
.fml-track-search,.fml-artist-search { display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid #20242d; border-radius:5px; background:#05070a; }.fml-track-search svg,.fml-artist-search svg{width:14px;color:#8b8e96}.fml-track-search input,.fml-artist-search input{width:100%;border:0;outline:0;color:#eee;background:transparent;font-size:11px}
.fml-tape-list { min-height:0; overflow-y:auto; padding:2px 6px 10px; scrollbar-width:thin; scrollbar-color:#632594 #090a0d; }
.fml-tape { position:relative; width:100%; height:68px; margin-bottom:4px; padding:0; overflow:hidden; border:1px solid transparent; border-radius:4px; background:#05070a; }.fml-tape:hover,.fml-tape.is-selected{border-color:#af4cff;box-shadow:0 0 12px rgba(168,76,255,.4)}
.fml-tape>img { position:absolute; inset:0; width:100%; height:100%; -o-object-fit:fill; object-fit:fill; filter:brightness(.68) contrast(1.22) saturate(.74); }
.fml-tape.is-selected>img{filter:brightness(.82) contrast(1.16) saturate(1.05) hue-rotate(6deg)}
.fml-tape::after{content:"";position:absolute;left:54px;top:16px;width:205px;height:37px;background:#d7d2c9;box-shadow:inset 0 0 5px rgba(0,0,0,.25)}
.fml-tape-label{position:absolute;z-index:2;left:66px;top:20px;width:185px;display:flex;flex-direction:column;text-align:left;color:#141414;}.fml-tape-label strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:italic 700 14px/1.1 "Segoe Print","Comic Sans MS",cursive;text-transform:uppercase}.fml-tape-label small{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.fml-tape-status{position:absolute;z-index:2;right:11px;bottom:17px;padding:3px 7px;border-radius:4px;color:#e8d9ff;background:#3d1958;font-size:8px}.fml-tape-status.is-extend{color:#d7ffe3;background:#225437}.fml-tape-status.is-original{background:#40205d}
.fml-tape-loading{height:68px;margin-bottom:4px;background:#11141a;animation:dtl-shimmer 1.2s linear infinite}.fml-import{height:44px;border:1px solid #20242c;border-radius:5px;color:#eee;background:#080b10;font-size:11px}
.fml-flow { position:relative; display:flex; flex-direction:column; align-items:center; padding:12px 22px 16px; overflow-y:auto; border-right:1px solid #1c2028; }
.fml-now-card{width:100%;height:92px;display:grid;grid-template-columns:58px 1fr 36px;align-items:center;gap:12px;padding:10px;border:1px solid #252a34;border-radius:5px;background:#080b10}.fml-cover{width:56px;height:56px;display:grid;place-items:center;color:#c273ff;background:#1b1028;border-radius:5px}.fml-cover svg{width:22px}.fml-now-card>div:nth-child(2){display:flex;flex-direction:column}.fml-now-card strong{font-size:12px}.fml-now-card small{margin-top:5px;color:#9a9da4;font-size:10px}.fml-now-card button{width:32px;height:32px;display:grid;place-items:center;border:1px solid #343844;border-radius:50%;color:#fff;background:#0c0f14}.fml-now-card button svg{width:13px}
.fml-flow-heading{align-self:stretch;display:flex;flex-direction:column;gap:5px;margin:11px 0 18px;font-size:10px}.fml-flow-heading span{color:#b1b3ba}
.fml-step{width:276px;padding:17px;border:1px solid;border-radius:8px;background:#090c12}.fml-step>b{display:block;margin-bottom:13px;font-size:11px}.fml-step>div,.fml-step>button{width:100%;display:flex;align-items:center;gap:12px;padding:12px;border:0;border-top:1px solid rgba(255,255,255,.05);color:#e8e8ed;background:#0c1018;text-align:left}.fml-step svg{width:22px}.fml-step span{display:flex;flex-direction:column}.fml-step strong{font-size:10px}.fml-step small{margin-top:6px;color:#989ba4;font-size:9px}.fml-step-track{border-color:#6f258f}.fml-step-track>b,.fml-step-track svg{color:#cf70ff}.fml-step-artist{border-color:#147e78}.fml-step-artist>b,.fml-step-artist svg{color:var(--fm-cyan)}.fml-step-preview{border-color:#1c558d}.fml-step-preview>b,.fml-step-preview svg{color:var(--fm-blue)}
.fml-flow-line{height:46px;width:4px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:linear-gradient(var(--fm-purple),var(--fm-cyan))}.fml-flow-line i{width:6px;height:6px;border-radius:50%;background:#45e4d7;box-shadow:0 0 6px #45e4d7}.fml-flow-line.is-blue{background:linear-gradient(var(--fm-cyan),var(--fm-blue))}
.fml-credit-note{margin-top:auto;width:100%;display:flex;align-items:center;gap:15px;padding:15px 20px;border:1px solid #242831;border-radius:5px;background:#090c11}.fml-credit-note svg{width:17px;color:#d6bd78}.fml-credit-note span{display:flex;flex-direction:column}.fml-credit-note strong{font-size:10px}.fml-credit-note small{margin-top:5px;color:#94979e;font-size:9px;line-height:1.55}
.fml-browser{display:grid;grid-template-rows:42px 38px 40px 34px minmax(0,1fr) auto;gap:8px;padding:10px 12px 12px}.fml-progress{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #1d2129;border-radius:5px;overflow:hidden}.fml-progress span{display:grid;place-items:center;color:#a5a8b0;background:#090c11;font-size:9px}.fml-progress span.is-active{color:#fff;background:#371258;box-shadow:inset 0 0 0 1px #6d249d}.fml-browser-tools{display:grid;grid-template-columns:1fr 34px;gap:8px}.fml-browser-tools>button{display:grid;place-items:center;border:1px solid #20242d;border-radius:5px;color:#aaa;background:#07090d}.fml-browser-tools>button svg{width:14px}.fml-filters{display:flex;gap:7px}.fml-filters select,.fml-filters button,.fml-found select{height:32px;padding:0 10px;border:1px solid #242936;border-radius:5px;color:#c8cad0;background:#090c11;font-size:9px}.fml-filters button{display:flex;align-items:center;gap:6px}.fml-filters svg{width:13px}.fml-found{display:flex;align-items:center;justify-content:space-between;color:#ddd;font-size:9px}.fml-found span{display:flex;align-items:center;gap:6px}.fml-found svg{width:12px;color:#b957ff}
.fml-artist-grid{min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:10px;padding-right:3px;scrollbar-width:thin;scrollbar-color:#632594 #080a0d}.fml-artist-card{min-width:0;height:190px;padding:0 0 8px;overflow:hidden;text-align:left;border:1px solid #242938;border-radius:5px;color:#fff;background:#090c11}.fml-artist-card:hover{border-color:#a84cff;transform:translateY(-1px)}.fml-artist-art{position:relative;width:100%;height:125px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#132b58,#5a126d);font-size:24px}.fml-artist-art.art-1{background:linear-gradient(145deg,#76241c,#d17125)}.fml-artist-art.art-2{background:linear-gradient(145deg,#0e4565,#152746)}.fml-artist-art.art-3{background:linear-gradient(145deg,#4a164d,#160d26)}.fml-artist-art.art-4{background:linear-gradient(145deg,#134f3a,#101f25)}.fml-artist-art img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.fml-artist-art i{position:absolute;right:7px;bottom:7px;width:27px;height:27px;display:grid;place-items:center;border:1px solid #fff;border-radius:50%;background:rgba(0,0,0,.65)}.fml-artist-art i svg{width:11px;fill:#fff}.fml-artist-card>strong,.fml-artist-card>small{display:block;margin:7px 8px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fml-artist-card>strong{font-size:10px}.fml-artist-card>small{color:#9b9da5;font-size:8px}.fml-more{height:32px;border:1px solid #672494;border-radius:4px;color:#d9b2ff;background:#1e0d2c;font-size:9px;text-transform:uppercase}
@media(max-width:1280px){.fml-grid{grid-template-columns:300px 350px minmax(430px,1fr)}.fml-header{grid-template-columns:90px 300px minmax(0,1fr) auto auto}.fml-title{padding-left:18px}.fml-step{width:250px}.fml-artist-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fml-filters button{display:none}}
.dtl-spin { animation: dtl-spin .8s linear infinite; }
@keyframes dtl-spin { to { transform: rotate(360deg); } }
@keyframes dtl-shimmer { to { background-position: -200% 0; } }
@media (max-width: 1180px) { .dtl-layout { grid-template-columns: 240px minmax(390px,1fr) 290px; }.dtl-now-playing { min-width: 180px; }.dtl-action-dock button,.dtl-action-dock a { min-width: 64px; padding-inline: 7px; } }
@media (max-width: 899px) { .desktop-tape-library { display: none; } }
@media (prefers-reduced-motion: reduce) { .desktop-tape-library *, .desktop-tape-library *::before, .desktop-tape-library *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* THE STEM DESK, folded down above the action dock. Scrolls on its own so a
   record with many lanes cannot push the dock off the bottom. */
.dtl-stemdesk {
  margin: 0 16px 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(0, 0, 0, .35);
  max-height: 38vh;
  overflow-y: auto;
}
.hardware-studio-theme {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(59, 65, 68, 0.62), rgba(5, 7, 8, 0.92) 58%),
    #050607;
  color: #f6f7f4;
  font-family: Arial, Helvetica, sans-serif;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hardware-studio-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, calc(100dvh * 1376 / 768));
  height: min(100dvh, calc(100vw * 768 / 1376));
  aspect-ratio: 1376 / 768;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #101315;
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.7);
}

.hardware-studio-reference {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  pointer-events: none;
}

.hardware-asset {
  position: absolute;
  display: block;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

.hardware-sprite-crop {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.hardware-sprite-crop > img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  max-width: none;
  -o-object-fit: fill;
     object-fit: fill;
  transform-origin: top left;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

.hardware-crt-screen {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  background: #050706;
  border-radius: 8% 9% 12% 11% / 10% 11% 12% 12%;
  clip-path: polygon(0% 3%, 100% 0%, 100% 95%, 0% 100%);
  filter: saturate(0.82) contrast(1.08) brightness(0.9);
  pointer-events: none;
}

.hardware-crt-screen iframe {
  position: absolute;
  z-index: 1;
  left: -9%;
  top: -8%;
  width: 118%;
  height: 118%;
  border: 0;
  pointer-events: none;
}

.hardware-crt-screen::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  box-shadow:
    inset 10px 0 14px rgba(0, 0, 0, 0.84),
    inset -10px 0 14px rgba(0, 0, 0, 0.72),
    inset 0 9px 12px rgba(255, 255, 255, 0.08),
    inset 0 -12px 18px rgba(0, 0, 0, 0.78);
  pointer-events: none;
}

.hardware-crt-screen::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.11), transparent 18%, rgba(0, 0, 0, 0.18) 74%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(0, 0, 0, 0.1) 1px 3px);
  mix-blend-mode: screen;
  opacity: 0.34;
}

.hardware-tape-window-motion {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.hardware-tape-reel {
  z-index: 4;
  animation: hardware-reel-spin 960ms linear infinite;
  animation-play-state: paused;
  transform-origin: center;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.18));
}

.hardware-tape-reel-right {
  animation-direction: reverse;
}

.hardware-tape-shimmer {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.hardware-tape-shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: translateX(-120%);
  animation: hardware-tape-glint 850ms linear infinite;
}

.hardware-studio-theme[data-transport="PLAYING"] .hardware-tape-reel,
.hardware-studio-theme[data-transport="REC"] .hardware-tape-reel,
.hardware-studio-theme[data-transport="REWIND"] .hardware-tape-reel,
.hardware-studio-theme[data-transport="FORWARD"] .hardware-tape-reel {
  animation-play-state: running;
}

.hardware-studio-theme[data-transport="PLAYING"] .hardware-tape-shimmer,
.hardware-studio-theme[data-transport="REC"] .hardware-tape-shimmer,
.hardware-studio-theme[data-transport="REWIND"] .hardware-tape-shimmer,
.hardware-studio-theme[data-transport="FORWARD"] .hardware-tape-shimmer {
  opacity: 0.24;
}

.hardware-studio-theme[data-transport="REWIND"] .hardware-tape-reel-left,
.hardware-studio-theme[data-transport="FORWARD"] .hardware-tape-reel-right {
  animation-duration: 430ms;
}

.hardware-studio-theme[data-transport="REWIND"] .hardware-tape-reel-right,
.hardware-studio-theme[data-transport="FORWARD"] .hardware-tape-reel-left {
  animation-duration: 1280ms;
}

.hardware-fader-track-clean {
  z-index: 2;
  filter: brightness(0.98);
}

.hardware-fader-cap {
  z-index: 3;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.38));
  transition: top 190ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hardware-fader-cap-active {
  transition: none;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.48)) brightness(1.04);
}

.hardware-on-sprite {
  z-index: 5;
  border-radius: 4px;
  transform: scale(0.99);
  transform-origin: center;
  filter: brightness(1.13) saturate(1.38) contrast(1.04) drop-shadow(0 0 5px rgba(75, 255, 105, 0.52));
}

.hardware-on-sprite-record {
  filter: brightness(1.1) saturate(1.55) contrast(1.06) drop-shadow(0 0 7px rgba(255, 40, 30, 0.58));
}

.hardware-pressed-sprite {
  z-index: 6;
  border-radius: 4px;
  transform: scale(0.985);
  transform-origin: center;
  filter: brightness(0.82) saturate(1.06) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
  transition: transform 50ms ease-out, filter 50ms ease-out;
}

.hardware-lcd-main,
.hardware-display,
.hardware-transport-readout {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  color: #33e36a;
  font-family: "Courier New", Consolas, monospace;
  text-shadow: 0 0 5px rgba(46, 255, 119, 0.72);
  pointer-events: none;
}

.hardware-lcd-main {
  left: 4.1%;
  top: 0.2%;
  width: 31.6%;
  height: 1.5%;
  padding-left: 0.25%;
  background: linear-gradient(180deg, rgba(7, 11, 10, 0.99), rgba(2, 5, 4, 0.99));
  border-radius: 2px;
  font-size: clamp(6px, 0.75vw, 10px);
  line-height: 1;
  font-weight: 700;
}

.hardware-display {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.55%;
  background: linear-gradient(180deg, rgba(9, 13, 12, 0.98), rgba(2, 5, 4, 0.99));
  border-radius: 3px;
  font-size: clamp(9px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hardware-display-drum {
  left: 21.48%;
  top: 54.9%;
  width: 12.3%;
}

.hardware-display-genre {
  left: 82.1%;
  top: 54.9%;
  width: 12.3%;
}

.hardware-transport-readout {
  left: 73.8%;
  top: 39.4%;
  width: 22%;
  height: 2.8%;
  opacity: 0;
  font-size: clamp(7px, 0.78vw, 10px);
  text-align: right;
}

.hardware-producer-call {
  position: absolute;
  z-index: 5;
}

.hardware-producer-call > [role="button"] {
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  padding: 0 !important;
}

.hardware-producer-call > :not([role="button"]) {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 100000 !important;
}

.hardware-profile-menu {
  position: absolute;
  z-index: 100030;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(43, 47, 48, 0.98), rgba(15, 17, 18, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 18px 40px rgba(0, 0, 0, 0.52);
  color: #f4f7f2;
  font-family: Arial, Helvetica, sans-serif;
  pointer-events: auto;
}

.hardware-profile-menu-header {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.hardware-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(180deg, #eef2f0, #a9b4b0);
  color: #111819;
  font-size: 13px;
  font-weight: 800;
}

.hardware-profile-identity {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
}

.hardware-profile-identity span,
.hardware-profile-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hardware-profile-identity span {
  font-size: 12px;
  font-weight: 800;
}

.hardware-profile-identity small {
  color: rgba(244, 247, 242, 0.62);
  font-size: 10px;
}

.hardware-profile-menu button,
.hardware-profile-routing-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 36px;
  gap: 10px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: transparent;
  color: #f4f7f2;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0 13px;
  text-align: left;
}

.hardware-profile-menu button:hover,
.hardware-profile-routing-toggle:hover {
  background: rgba(68, 255, 107, 0.11);
}

.hardware-profile-menu svg {
  flex: 0 0 auto;
}

.hardware-profile-logout {
  color: #ff8a8a !important;
}

.hardware-profile-logout:hover {
  background: rgba(255, 52, 52, 0.14) !important;
}

.hardware-hotspot {
  position: absolute;
  z-index: 7;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  touch-action: manipulation;
}

.hardware-hotspot:hover {
  background: transparent;
  box-shadow: none;
}

.hardware-hotspot:active {
  background: transparent;
}

.hardware-hotspot:focus-visible {
  outline: 2px solid rgba(70, 255, 118, 0.9);
  outline-offset: 1px;
}

.hardware-fader-hit {
  cursor: ns-resize;
  touch-action: none;
}

.hardware-fader-hit:hover,
.hardware-fader-hit:active {
  background: transparent;
  box-shadow: none;
}

@keyframes hardware-reel-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hardware-tape-glint {
  to {
    transform: translateX(120%);
  }
}

@supports not (height: 100dvh) {
  .hardware-studio-stage {
    width: min(100vw, calc(100vh * 1376 / 768));
    height: min(100vh, calc(100vw * 768 / 1376));
  }
}

@media (max-width: 900px) {
  .hardware-studio-theme {
    overflow: auto;
  }

  .hardware-studio-stage {
    width: max(900px, 100vw);
    height: calc(max(900px, 100vw) * 768 / 1376);
    left: 0;
    top: 0;
    transform: none;
  }
}


/* Caveat is the handwriting. Of the pack's seven it holds up best at the size
   a name has to be read at, and it looks marked rather than typeset. MUST be
   the first rule in the file or the browser drops the @import — the same trap
   that made 'Inter' a lie everywhere else in this app. */
/*
 * "nspire'd By <host>" — signed across the empty desk under the drum strips.
 * Two voices on purpose: the machined line states the fact, the handwriting
 * IS the person. Non-interactive; it is a mark on the board, not a control.
 */
.hostsig {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  /* LEVEL. The handwriting is what makes it read as signed; tilting it as
     well was one gesture too many and fought the strips it lies across. */
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  max-width: 100%;
}
.hostsig__pre {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.15em;
  /* NO text-transform: the string is written with the casing it should have
     — lowercase mark, uppercase BY. Uppercasing it would eat that.
     It sits next to a 43px handwritten name, so at 15px/0.5 it simply
     disappeared — this is BRANDING, it has to be legible next to the
     thing it brands. */
  opacity: 0.88;
  color: var(--cp-text, #cfd2d8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.hostsig__name {
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-weight: 700;
  /* Big enough to read as signed rather than captioned. Caveat runs small
     for its point size, hence the jump. */
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--cp-accent, #e8e2d4);
  /* Ink, not glow: a soft drop makes it sit ON the desk instead of floating
     over it. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.hostsig--compact .hostsig__pre { font-size: 12px; letter-spacing: 0.13em; }
.hostsig--compact .hostsig__name { font-size: clamp(22px, 5vw, 30px); }
@media (max-width: 640px) {
  .hostsig { gap: 7px; }
  .hostsig__pre { font-size: 11px; letter-spacing: 0.12em; }
  .hostsig__name { font-size: 26px; }
}
/* ---- where each piece sits on the desk ---------------------------------
   Two separate marks, not a stacked block: the signature sits in from the
   left edge (clear of the KICK strip it used to start under), and the
   imprint is parked over on the right where the desk is empty. Both are
   absolute so the strips lose no layout to either. */
.hostsig-slot {
  position: absolute;
  /* In from the left edge, but not out in the middle of the desk — 13% put
     the name under the sampler columns and read as floating. */
  left: 5.5%;
  bottom: 12px;
  z-index: 5;
  pointer-events: none;
  max-width: 40%;
}
.hostsig-imprint-slot {
  position: absolute;
  right: 3%;
  bottom: 14px;
  z-index: 5;
  pointer-events: none;
  max-width: 34%;
  text-align: right;
}
/* label · session. Small, tracked, level — the printed line on the box. */
.hostsig__imprint {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.42;
  color: var(--cp-text, #cfd2d8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .hostsig-slot { left: 4%; }
  .hostsig-imprint-slot { display: none; }
}
/* Settings Dropdown Menu Styles for Mobile Cassette View */
.settings-dropdown {
  position: fixed;
  top: 60px;
  right: 10px;
  z-index: 10001 !important; /* Higher than button */
  background: rgba(17, 24, 39, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  max-width: 280px;
  animation: slideDown 0.2s ease-out;
  transform: translate3d(0, 0, 60px); /* Ensure it stays on top in 3D space, higher than button */
  pointer-events: auto !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.settings-close-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.settings-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.settings-dropdown-content {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-menu-item {
  background: transparent;
  border: none;
  color: white;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.settings-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.settings-menu-item:active {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(0.98);
}

.settings-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 8px;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .settings-dropdown {
    right: 10px;
    max-width: calc(100vw - 40px);
  }
  
  .settings-menu-item {
    padding: 14px 16px;
    font-size: 15px;
  }
}

/* Ensure dropdown is above cassette and other elements */
.settings-dropdown {
  pointer-events: auto;
}

/* Update settings button to use icon properly */
.switch-full-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Minimal Mobile Theme Styles */
.minimal-mobile-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  box-sizing: border-box;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 110px);
  /* Prevent viewport changes when keyboard appears */
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: auto;
}

.tutorial-end-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2147483647;
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(6px);
}

.tutorial-end-btn:active {
  transform: translateY(1px);
}

.tutorial-dim {
  position: fixed;
  background: rgba(0,0,0,0.72);
  pointer-events: auto;
  z-index: 2147483646;
}

.tutorial-dim-top {
  top: 0;
  left: 0;
  right: 0;
}

.tutorial-dim-bottom {
  left: 0;
  right: 0;
  bottom: 0;
}

.tutorial-dim-left {
  left: 0;
}

.tutorial-dim-right {
  right: 0;
  bottom: 0;
}

.tutorial-spotlight {
  position: fixed;
  z-index: 2147483647;
  pointer-events: auto;
  border-radius: 10px;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow:
    0 0 0 4px rgba(0,0,0,0.25),
    0 0 18px rgba(255,255,255,0.35);
  -webkit-tap-highlight-color: transparent;
}

.tutorial-spotlight-pulse {
  animation: tutorialSpotlightPulse 1.15s ease-in-out infinite;
}

@keyframes tutorialSpotlightPulse {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.25),
      0 0 18px rgba(255,255,255,0.35);
  }
  50% {
    transform: scale(1.035);
    box-shadow:
      0 0 0 6px rgba(0,0,0,0.22),
      0 0 26px rgba(255,255,255,0.55);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.25),
      0 0 18px rgba(255,255,255,0.35);
  }
}

.tutorial-spotlight-outline {
  position: fixed;
  z-index: 2147483647;
  pointer-events: none;
  border-radius: 14px;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow:
    0 0 0 4px rgba(0,0,0,0.25),
    0 0 18px rgba(255,255,255,0.35);
}

.tutorial-spotlight-blocker {
  position: fixed;
  z-index: 2147483647;
  pointer-events: auto;
  background: transparent;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}

.tutorial-spotlight:active {
  transform: scale(0.99);
}

.tutorial-tooltip {
  position: fixed;
  z-index: 2147483647;
  width: 360px;
  max-width: calc(100vw - 24px);
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.92);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.1px;
  backdrop-filter: blur(16px);
  pointer-events: auto;
}

.tutorial-tooltip-text {
  margin: 0;
}

.tutorial-next-btn {
  margin-top: 10px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: linear-gradient(90deg, rgba(34,211,238,0.92), rgba(59,130,246,0.92), rgba(236,72,153,0.92));
  color: rgba(5, 10, 20, 0.95);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
  -webkit-tap-highlight-color: transparent;
}

.tutorial-next-btn:active {
  transform: translateY(1px);
}

.tutorial-tooltip-actions {
  display: flex;
  justify-content: flex-end;
}

.tutorial-swipe-arrow {
  position: fixed;
  z-index: 2147483647;
  pointer-events: none;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(16px);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.55),
    0 0 26px rgba(34,211,238,0.18);
  color: rgba(255,255,255,0.96);
  font-size: 44px;
  font-weight: 900;
  animation: tutorialSwipeBlink 0.8s steps(2, end) infinite;
}

.tutorial-swipe-arrow.dir-up { transform: translate(-50%, -50%) translateY(10px); }
.tutorial-swipe-arrow.dir-down { transform: translate(-50%, -50%) translateY(-10px); }
.tutorial-swipe-arrow.dir-left { transform: translate(-50%, -50%) translateX(10px); }
.tutorial-swipe-arrow.dir-right { transform: translate(-50%, -50%) translateX(-10px); }

@keyframes tutorialSwipeBlink {
  0% { opacity: 1; }
  50% { opacity: 0.15; }
  100% { opacity: 1; }
}

.lcd-content.fx-mode {
  display: block;
  grid-template-columns: none;
  gap: 0;
}

.lcd-content.beats-mode {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0;
  overflow: hidden;
}

.lcd-fx-root {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 86px;
  grid-template-rows: auto 1fr;
  gap: 10px;
}

.lcd-fx-top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  grid-column: 1;
  grid-row: 1;
}

.lcd-fx-top-btn {
  height: 42px;
  padding: 6px 6px;
  border-radius: 6px;
  border: 1px solid rgba(0,34,68, 0.45);
  background: rgba(0, 34, 68, 0.10);
  color: var(--lcd-blue-text);
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  line-height: 1.05;
}

.lcd-fx-top-btn:active {
  transform: translateY(1px);
  background: rgba(0,34,68, 0.18);
}

.lcd-fx-top-btn.is-on {
  background: rgba(0,34,68, 0.28);
  border-style: solid;
  animation: lcdFxTopOnPulse 1.8s ease-in-out infinite;
}

@keyframes lcdFxTopOnPulse {
  0% {
    background: rgba(0,34,68, 0.14);
  }
  50% {
    background: rgba(0,34,68, 0.26);
  }
  100% {
    background: rgba(0,34,68, 0.14);
  }
}

.lcd-fx-scroll {
  overflow-y: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  padding-right: 2px;
  grid-column: 1;
  grid-row: 2;
}

.lcd-fx-fader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,34,68, 0.2);
  background: rgba(255,255,255,0.10);
  min-height: 0;
  grid-column: 2;
  grid-row: 1 / span 2;
}

.lcd-fx-fader-bar {
  width: 100%;
  max-width: 84px;
  flex: 1;
  height: auto;
  min-height: 188px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 -10px 18px rgba(0,0,0,0.10);
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
}

.lcd-fx-fader-bar::after {
  content: "";
  position: absolute;
  inset: -10px;
  /* expanded hit area without changing visuals */
}

.lcd-fx-fader-bar::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      to top,
      rgba(0, 20, 50, 0.10) 0px,
      rgba(0, 20, 50, 0.10) 1px,
      rgba(255,255,255,0.03) 1px,
      rgba(255,255,255,0.03) 12px
    );
  opacity: 0.9;
  pointer-events: none;
}

.lcd-status-left.lcd-status-fx {
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,34,68, 0.25);
  background: rgba(0,34,68, 0.12);
  animation: lcdFxHeaderFlash 0.9s step-end infinite;
}

@keyframes lcdFxHeaderFlash {
  50% {
    opacity: 0.25;
  }
}

@keyframes lcdFxSoftPulse {
  0% {
    background: rgba(0,34,68, 0.08);
  }
  50% {
    background: rgba(0,34,68, 0.18);
  }
  100% {
    background: rgba(0,34,68, 0.08);
  }
}

.lcd-content.is-slide-left {
  animation: lcdSlideLeft 0.26s ease-out;
}

.lcd-content.is-slide-right {
  animation: lcdSlideRight 0.26s ease-out;
}

@keyframes lcdSlideLeft {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-18px); opacity: 0.85; }
}

@keyframes lcdSlideRight {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(18px); opacity: 0.85; }
}

.lcd-status-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 54px;
}

.lcd-status-back {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  font: inherit;
  color: rgba(0,0,0,0.92);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  flex-direction: row;
  line-height: 1;
  height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 6px;
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  box-sizing: border-box;
}

.lcd-back-label {
  font-size: 11px;
  white-space: nowrap;
}

.scenery-float-layer {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.scenery-float-layer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lcd-back-arrow {
  margin-top: 1px;
  font-size: 11px;
}

.lcd-status-back:active {
  opacity: 0.5;
}

.lcd-content.scenery-scenes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 56px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.lcd-scenery-back {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  all: unset;
  cursor: pointer;
  height: 18px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid rgba(0,34,68,0.35);
  background: rgba(0,34,68,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  font-family: monospace;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.86);
  -webkit-tap-highlight-color: transparent;
}

.lcd-scenery-back:active {
  transform: translateY(1px);
}

.lcd-content.genres-mode {
  /* Immersive drawer: DRUMS top half, MELODY bottom half — no vertical
     scrolling; each lane's tiles scroll sideways instead. */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}

.lcd-genres-col {
  border: 1px solid rgba(0,34,68, 0.25);
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lcd-genres-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(255,255,255,0.24);
  border-bottom: 1px solid rgba(0,0,0,0.12);
  padding: 8px;
  font-family: "Courier New", monospace;
  color: var(--lcd-blue-text);
}

.lcd-genres-title {
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lcd-genres-selected {
  margin-top: 4px;
  font-weight: 900;
  font-size: 11px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lcd-genres-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lcd-genres-back {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.16);
  margin-top: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lcd-genres-btn {
  all: unset;
  cursor: pointer;
  border-radius: 10px;
  border: 1px dashed rgba(0,34,68, 0.3);
  background: rgba(255,255,255,0.10);
  padding: 8px 8px;
  color: var(--lcd-blue-text);
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  -webkit-tap-highlight-color: transparent;
  font-size: 14px;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.lcd-genres-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

 .lcd-genres-subheader .lcd-genres-title {
  flex: 1;
  min-width: 0;
 }

.lcd-genres-subclose {
  all: unset;
  cursor: pointer;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.20);
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}

.lcd-genres-subclose:active {
  transform: translateY(1px);
}

.lcd-genres-btn:active {
  transform: translateY(1px);
}

.lcd-genres-btn.is-active {
  background: rgba(0,34,68, 0.18);
  border-style: solid;
}

.lcd-content.genres-mode {
  position: relative;
}

.lcd-content.recipes-mode {
  display: block;
  padding: 8px;
  overflow-y: auto;
}

.lcd-content.recipes-mode .lcd-list-item,
.lcd-content.scenery-scenes .lcd-list-item {
  justify-content: center;
  text-align: center;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0,34,68, 0.45);
  background: rgba(0, 34, 68, 0.10);
  color: var(--lcd-blue-text);
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  line-height: 1.05;
}

.lcd-content.recipes-mode .lcd-list-item:active,
.lcd-content.scenery-scenes .lcd-list-item:active {
  transform: translateY(1px);
  background: rgba(0,34,68, 0.18);
}

.lcd-genres-subpanel {
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: calc(50% - 5px);
  background: rgba(240, 248, 255, 0.92);
  border: 1px solid rgba(0,34,68, 0.25);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 10;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

/* If selecting a DRUM style submenu, cover the melody column (right) */
.lcd-genres-subpanel.is-drum {
  left: calc(50% + 5px);
}

/* If selecting a MELODY genre submenu, cover the drum column (left) */
.lcd-genres-subpanel.is-melody {
  left: 10px;
}

.lcd-genres-subpanel .lcd-genres-header {
  background: rgba(255,255,255,0.84);
  padding: 5px 8px;
}

 .lcd-genres-subpanel .lcd-genres-title {
  font-size: 10px;
  line-height: 1;
 }

.lcd-content.mixer-mode {
  display: block;
  padding: 8px;
  overflow: hidden;
}

.lcd-mixer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  height: 100%;
  max-height: 100%;
}

.lcd-mixer-strip {
  border: 1px solid rgba(0,34,68, 0.25);
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.lcd-mixer-label {
  font-family: "Courier New", monospace;
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--lcd-blue-text);
}

.lcd-mixer-fader-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  overflow: hidden;
}

.lcd-mixer-fader {
  /* `slider-vertical` is deprecated and warns four times a page load;
     `writing-mode: vertical-lr` + `direction: rtl` is the standard
     replacement and gives the same bottom-to-top fader. */
  writing-mode: vertical-lr;
  direction: rtl;
  width: 26px;
  height: 128px;
  accent-color: transparent;
}

.lcd-mixer-fader::-webkit-slider-runnable-track {
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 999px;
}

.lcd-mixer-fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  margin-top: -4px;
}

.lcd-mixer-fader:focus {
  outline: none;
}

.lcd-mixer-fader::-webkit-slider-thumb:active {
  background: rgba(0,0,0,0.65);
}

.lcd-mixer-fader::-moz-range-track {
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 999px;
}

.lcd-mixer-fader::-moz-range-thumb {
  width: 30px;
  height: 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.lcd-mixer-meter {
  position: absolute;
  left: 8px;
  top: 16px;
  bottom: 46px;
  width: 6px;
  border-radius: 4px;
  background: linear-gradient(to top, rgba(0,34,68,0.35), rgba(0,34,68,0.06));
}

.lcd-mixer-ledmeter {
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 40px;
  width: 10px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
}

.lcd-mixer-ledmeter > div {
  width: 10px;
  height: 100%;
}

.lcd-mixer-mute {
  width: 100%;
  padding: 8px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0,34,68, 0.25);
  background: rgba(255,255,255,0.18);
  color: var(--lcd-blue-text);
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}

.lcd-mixer-mute.is-muted {
  background: rgba(0,34,68, 0.65);
  color: rgba(255,255,255,0.92);
}

.lcd-scene-item {
  justify-content: center;
  text-align: center;
  padding: 10px;
}


.lcd-status-time {
  font-size: 10px;
  opacity: 0.9;
}

.mobile-tempo-editor {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.58);
}

.mobile-tempo-editor-panel {
  width: min(280px, calc(100vw - 40px));
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background: #202020;
  box-shadow: 0 18px 48px rgba(0,0,0,0.48);
  padding: 18px;
  color: #fff;
}

.mobile-tempo-editor-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.mobile-tempo-editor-input {
  width: 100%;
  height: 46px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.18);
  background: #090909;
  color: #fff;
  font-family: monospace;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  outline: none;
}

.mobile-tempo-editor-input:focus {
  border-color: rgba(90,180,255,0.72);
  box-shadow: 0 0 0 2px rgba(90,180,255,0.2);
}

.mobile-tempo-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.mobile-tempo-editor-actions button {
  height: 40px;
  border: 0;
  border-radius: 7px;
  background: #343434;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.mobile-tempo-editor-actions button:last-child {
  background: #0879bf;
}

.scenery-tv-slot.is-zoomed .scenery-tv-iframe {
  left: 0;
  width: 100%;
}

@supports (-webkit-touch-callout: none) {
  .scenery-tv-slot.is-zoomed .scenery-tv-iframe {
    left: 0;
    width: 100%;
  }
}

.boombox-controls {
  overflow: visible;
}

.minimal-mobile-container.chat-open {
  padding-bottom: 0;
}

/* While the library overlay is open, hide top UI and LiveStream UI */
.minimal-mobile-container.library-open .top-branding,
.minimal-mobile-container.library-open .switch-full-btn,
.minimal-mobile-container.library-open .status-indicator {
  opacity: 0;
  pointer-events: none !important;
}

html[data-library-open="true"] .live-stream-wrapper {
  display: none !important;
}

/* When chat is zoomed, keep top overlay UI from sitting above the cassette */
.minimal-mobile-container .floating-cassette.zoomed ~ .top-branding,
.minimal-mobile-container .floating-cassette.zoomed ~ .switch-full-btn,
.minimal-mobile-container .floating-cassette.zoomed ~ .status-indicator {
  opacity: 0;
  pointer-events: none !important;
}

/* Background elements must NOT capture clicks */
.minimal-mobile-container .animated-background,
.minimal-mobile-container .three-smoke-container,
.minimal-mobile-container .color-fade,
.minimal-mobile-container .smoke-effect {
  pointer-events: none !important;
}

/* Re-enable pointer events ONLY for interactive children */
.minimal-mobile-container .top-branding,
.minimal-mobile-container .switch-full-btn,
.minimal-mobile-container .producer-overlay,
.minimal-mobile-container .settings-dropdown,
.minimal-mobile-container .mobile-library-overlay,
.minimal-mobile-container .floating-cassette,
.minimal-mobile-container .radial-menu,
.minimal-mobile-container .radial-backdrop,
.minimal-mobile-container .lcd-open-zone,
.minimal-mobile-container .lcd-drawer-handle,
.minimal-mobile-container .lcd-drawer-body,
.minimal-mobile-container .transport-controls,
.minimal-mobile-container .chat-button-container,
.minimal-mobile-container .boombox-controls {
  pointer-events: auto !important;
}


.library-transport-seek {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  padding: 0.45em 0.85em;
  background: rgba(15, 15, 18, 0.7);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.55);
  z-index: 3;
}

.boombox-controls {
  position: fixed;
}

.library-transport-title {
  font-family: Arial, Helvetica, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d6d6db;
  font-size: 0.72em;
  opacity: 0.9;
  margin-bottom: 0.55em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.library-transport-seek input[type="range"] {
  width: 100%;
  height: 4px;
  accent-color: rgba(255,255,255,0.6);
}

/* Top Branding Section */
.top-branding {
  position: fixed;
  top: 0px;
  left: 10px;
  z-index: 1200;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  transform: translateZ(50px); /* Force above cassette 3D context */
  pointer-events: auto;
}

.brand-title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 800;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 16px;
  text-transform: lowercase;
}

.brand-title-small {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-transform: lowercase;
  vertical-align: baseline;
}

.brand-by {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-transform: lowercase;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.producer-btn-compact {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%; /* round button */
  padding: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1305;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.producer-btn-compact:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.producer-call-btn-compact {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(134, 239, 172, 0.38);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1305;
  pointer-events: auto;
  touch-action: manipulation;
  color: rgba(240, 253, 244, 0.96);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.08), 0 8px 22px rgba(0, 0, 0, 0.24);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.producer-call-btn-compact:hover {
  background: rgba(34, 197, 94, 0.28);
  border-color: rgba(187, 247, 208, 0.62);
}

.producer-call-btn-compact:active {
  transform: scale(0.94);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.producer-call-btn-compact:focus,
.producer-call-btn-compact:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.08), 0 8px 22px rgba(0, 0, 0, 0.24);
}

.producer-thumb-compact {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}

.producer-emoji-compact {
  font-size: 20px;
  pointer-events: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none;
}

.producer-name {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  text-transform: uppercase;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.producer-name-large {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 800;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  font-size: 16px;
  text-transform: capitalize;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Hide admin/profile button in minimal mobile view */
.fixed.top-4.right-32 {
  display: none !important;
}

/* Mobile floating cassette animation */
.cassette-container.mobile-floating {
  animation: floatCassette 6s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes floatCassette {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(0.5deg);
  }
  50% {
    transform: translateY(-12px) rotate(0deg);
  }
  75% {
    transform: translateY(-8px) rotate(-0.5deg);
  }
}

/* Ensure floating animation works on iOS */
.cassette-container.mobile-floating * {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Hide horizontal bars on mobile devices (iOS specific fix) */
.cassette-container.mobile-floating .cassette {
  background-image: linear-gradient(273deg, #fff1, transparent) !important;
}

/* Ensure text display and arrow are visible on mobile */
.cassette-container.mobile-floating .top-text,
.cassette-container.mobile-floating .cassette .medium-tape .label-container .label .top-label .top-text {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 24px !important;
  line-height: 110% !important;
  text-align: center !important;
  padding: 6px 10px !important;
}

.cassette-container.mobile-floating .arrow-text,
.cassette-container.mobile-floating .cassette .medium-tape .label-container .label .bottom-label .arrow-text {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #4d7fb4 !important;
  font-size: 32px !important;
  transform: scaleX(1.5) translate(-6px, -3px) !important;
}

/* Ensure the top label container is visible */
.cassette-container.mobile-floating .top-label,
.cassette-container.mobile-floating .cassette .medium-tape .label-container .label .top-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 62px !important;
}

/* Ensure the bottom label container is visible */
.cassette-container.mobile-floating .bottom-label,
.cassette-container.mobile-floating .cassette .medium-tape .label-container .label .bottom-label {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 32px !important;
  justify-content: space-around !important;
  align-items: center !important;
}

/* Swipe animation - cassette shoots off screen then fades back in */
.cassette-container.cassette-swipe-left {
  animation: swipeLeft 1s ease-in-out !important;
}

.cassette-container.cassette-swipe-right {
  animation: swipeRight 1s ease-in-out !important;
}

.cassette-container.cassette-swipe-up {
  animation: swipeUp 1s ease-in-out !important;
}

.cassette-container.cassette-swipe-down {
  animation: swipeDown 1s ease-in-out !important;
}

@keyframes swipeLeft {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  50% { transform: translateX(-100vw) scale(0.8); opacity: 0; }
  51% { transform: translateX(100vw) scale(0.8); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes swipeRight {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  50% { transform: translateX(100vw) scale(0.8); opacity: 0; }
  51% { transform: translateX(-100vw) scale(0.8); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes swipeUp {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-100vh) scale(0.8); opacity: 0; }
  51% { transform: translateY(100vh) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes swipeDown {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(100vh) scale(0.8); opacity: 0; }
  51% { transform: translateY(-100vh) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Floating cassette and zoom functionality */
.floating-cassette {
  position: relative;
  z-index: 100;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}

.floating-cassette.zoomed {
  transform: scale(1.2);
}

/* iOS-specific optimizations for smooth zoom */
@supports (-webkit-appearance: none) {
  .floating-cassette {
    transform: translateZ(0);
    perspective: 1000px;
  }
  
  .floating-cassette.zoomed {
    transform: scale(1.2) translateZ(0);
  }
}

/* Chat button styling */
.chat-button-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
}

.chat-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.chat-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.chat-btn:active {
  transform: scale(0.95);
}

/* Boombox button styling (mobile minimal) */
.boombox-controls {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  width: 100vw;
  bottom: env(safe-area-inset-bottom, 0px);
  transform: none;
  z-index: 12000;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow:
    inset 0 -0.1em 0.1em -0.05em #fff2,
    inset 0 0.125em 0.25em #0003,
    inset 0 0.25em 0.25em #0001,
    inset -0.05em -0.1em 0.15em #0003,
    inset 0 -0.05em 0.1em #0002,
    inset 0 0 0 0.4em #2b2b2f;
  gap: 0.5em;
  padding: 0.8em;
  background: linear-gradient(#000 0 0) 50% 50% / 97.5% 97.5% no-repeat;
  display: flex;
  justify-content: space-between;
  font-size: clamp(0.9rem, 3.2vmin, 1.6rem);
  padding-bottom: calc(0.8em + env(safe-area-inset-bottom, 0px));
  transition: transform 0.2s ease, opacity 0.2s ease;
}

html[data-library-open="true"] .boombox-controls {
  z-index: 12000;
}

.minimal-mobile-container.chat-open .boombox-controls {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* -------------------------------------------------------------------------- */
/*                            LCD DRAWER MENU                                 */
/* -------------------------------------------------------------------------- */

:root {
  --lcd-blue-bg: #e6f0fa;
  --lcd-blue-text: #0b2f57;
  --lcd-blue-active: #1a4a7d;
  --lcd-bezel: #1a1a1a;
  --lcd-screen-bg: #8aa9cf; /* restore a cooler LCD blue */
}

/* NOTE: handle + body are positioned as standalone fixed elements */
.lcd-drawer-container {
  display: contents;
}

/* Drawer handle/tab that peeks from the TOP of the menu */
:root {
  --lcd-handle-peek: 14px;
  --lcd-open-under: 0px;
  --lcd-open-zone-top: 0px;
  --lcd-handle-bottom-offset: 14px;
  --lcd-handle-min-height: 28px;
}

.lcd-drawer-handle {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--transport-footer-safe, 140px) + var(--lcd-handle-bottom-offset));
  width: 72px;
  height: clamp(var(--lcd-handle-min-height), calc(var(--lcd-handle-peek) + 10px), 220px);
  background: var(--lcd-bezel);
  border-radius: 10px 10px 6px 6px;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.35);
  z-index: 11000;
  -webkit-tap-highlight-color: transparent;
}

.lcd-drawer-handle:active {
  transform: translateX(-50%) scale(0.97);
}

.lcd-handle-bar {
  width: 34px;
  height: 4px;
  background: #444;
  border-radius: 2px;
  opacity: 0.95;
}

/* The Drawer Body (Slides up) */
.lcd-drawer-body {
  width: 100%;
  max-width: none;
  background: var(--lcd-bezel);
  border-radius: 12px 12px 0 0;
  padding: 8px 8px 0 8px; /* Thin bezel */
  box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--transport-footer-safe, 140px);
  
  /* Initial state: Hidden (pushed down) */
  transform: translateY(calc(100% - var(--lcd-handle-peek)));
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
  z-index: 10900;
  
  /* Dynamic height will be set via JS, max-height as backup */
  max-height: 38vh; 
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Swipe/tap zone between cassette and handle (only rendered when closed) */
.lcd-open-zone {
  position: fixed;
  left: 0;
  right: 0;
  top: auto;
  bottom: var(--transport-footer-safe, 140px);
  height: 220px;
  z-index: 10950;
  pointer-events: auto;
  background: rgba(0,0,0,0.001);
  touch-action: none;
}


.lcd-drawer-body.is-open {
  transform: translateY(var(--lcd-open-under, 0px));
  pointer-events: auto;
}

/* The Screen (Inside Bezel) */
.lcd-screen {
  background: var(--lcd-screen-bg);
  flex: 1;
  border-radius: 6px 6px 0 0;
  border: 1px solid #6c8a9e;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Scanline overlay for LCD effect */
.lcd-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  opacity: 0.3;
}

/* Status Bar (Top of LCD) */
.lcd-status-bar {
  height: 34px;
  background: rgba(0,0,0,0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
  font-family: monospace;
  font-size: 12px;
  color: rgba(0,0,0,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.lcd-status-bar.is-closed {
  transform: translateY(-3px);
}

.lcd-status-left {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 92px;
  transform: translateY(-1px);
}

.lcd-status-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 92px;
}

.lcd-tempo-controls {
  gap: 3px;
  min-width: 112px;
}

.lcd-tempo-step,
.lcd-tempo-value {
  border: 1px solid rgba(0,0,0,0.28);
  background: rgba(255,255,255,0.16);
  color: rgba(0,0,0,0.88);
  font-family: monospace;
  line-height: 1;
  height: 22px;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
  -webkit-tap-highlight-color: transparent;
}

.lcd-tempo-step {
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}

.lcd-tempo-value {
  min-width: 52px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.lcd-tempo-step:active,
.lcd-tempo-value:active {
  transform: translateY(1px);
  background: rgba(0,0,0,0.12);
}

.lcd-status-new {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 92px;
  font: inherit;
  color: rgba(0,0,0,0.9);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  animation: lcdNewBlink 0.75s step-end infinite;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.lcd-status-off {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 92px;
  font: inherit;
  color: rgba(0,0,0,0.92);
  letter-spacing: 0.25px;
  text-transform: uppercase;
  animation: lcdOffBlink 1.6s step-end infinite;
  -webkit-tap-highlight-color: transparent;
  height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 6px;
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  box-sizing: border-box;
}

@keyframes lcdOffBlink {
  50% { opacity: 0.35; }
}

@keyframes lcdNewBlink {
  50% { opacity: 0.15; }
}

.lcd-activity-notif {
  display: none;
  width: calc(100% - 16px);
  margin: 6px 8px 0;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.10);
  color: rgba(0,0,0,0.85);
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 0.2px;
  text-transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 6px rgba(0,0,0,0.25);
  -webkit-tap-highlight-color: transparent;
}

.lcd-activity-notif:active {
  transform: translateY(1px);
}

.lcd-status-center {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  pointer-events: auto;
  cursor: pointer;
}

.lcd-status-center-inner {
  display: inline-block;
  white-space: nowrap;
  transform: translateX(0);
  pointer-events: none;
  padding: 2px 6px;
}

.lcd-status-center.is-marquee-on .lcd-status-center-inner {
  padding-left: 100%;
  animation: lcdMarquee 7s linear infinite;
}

.lcd-status-center.is-blink {
  animation: lcdStatusBlink 0.55s step-end 6;
}

@keyframes lcdStatusBlink {
  50% { opacity: 0.25; }
}

@keyframes lcdMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-200%); }
}

/* Content Area (Scrollable grid/list) */
.lcd-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Grid for main menu icons */
  gap: 8px;
  
  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--lcd-blue-text) transparent;
}

.lcd-content::-webkit-scrollbar {
  width: 4px;
}
.lcd-content::-webkit-scrollbar-thumb {
  background-color: var(--lcd-blue-text);
  border-radius: 4px;
}

/* List Mode (for Scenery submenus) */
.lcd-content.list-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* LCD Mixer (thumb friendly) */
.lcd-mixer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.lcd-mixer-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0, 34, 68, 0.25);
  background: rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}

.lcd-mixer-meter-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: linear-gradient(
    to top,
    rgba(0, 20, 50, 0.22),
    rgba(0, 20, 50, 0.08)
  );
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.lcd-mixer-strip > * {
  position: relative;
  z-index: 1;
}

.lcd-mixer-label {
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: var(--lcd-blue-text);
  line-height: 1;
}

.lcd-mixer-fader-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.lcd-mixer-bar {
  width: 100%;
  max-width: 84px;
  height: 168px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 -10px 18px rgba(0,0,0,0.10);
  position: relative;
  overflow: hidden;
  touch-action: none;
}

.lcd-mixer-bar-handle {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 10px;
  transform: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  pointer-events: none;
  top: calc(12px + (100% - 24px - 10px) * (1 - var(--lcd-mixer-v, 0)));
  bottom: auto;
}

.lcd-fx-fader .lcd-fx-fader-bar .lcd-mixer-bar-handle {
  height: var(--fx-handle-h, 10px);
  top: calc(
    var(--fx-pad-top, 12px) +
      (100% - (var(--fx-pad-top, 12px) + var(--fx-pad-bottom, 22px)) - var(--fx-handle-h, 10px)) *
        (1 - var(--lcd-mixer-v, 0))
  );
}

.lcd-mixer-bar::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      to top,
      rgba(0, 20, 50, 0.10) 0px,
      rgba(0, 20, 50, 0.10) 1px,
      rgba(255,255,255,0.03) 1px,
      rgba(255,255,255,0.03) 12px
    );
  opacity: 0.9;
  pointer-events: none;
}

.lcd-mixer-bar-fill {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 4px;
  background: rgba(0, 34, 68, 0.45);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.2),
    0 0 0 1px rgba(255,255,255,0.06);
  pointer-events: none;
}

.lcd-fx-fader .lcd-fx-fader-bar .lcd-mixer-bar-fill {
  bottom: var(--fx-pad-bottom, 22px);
}

.lcd-mixer-mute {
  width: 100%;
  max-width: 84px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.10);
  color: rgba(0, 25, 60, 0.85);
  font-family: "Courier New", monospace;
  font-weight: 900;
  letter-spacing: -0.3px;
  text-transform: uppercase;
}

.lcd-mixer-mute:active {
  transform: translateY(1px);
}

.lcd-mixer-mute.is-muted {
  background: rgba(0, 34, 68, 0.22);
  color: rgba(0, 25, 60, 0.95);
  border-style: solid;
}

/* LCD Items (Icons/Text) */
.lcd-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  justify-content: center;
  height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(0,34,68,0.25);
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0 10px;
}

.lcd-item:active {
  background: rgba(0,34,68, 0.1);
  transform: scale(0.96);
}

.lcd-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lcd-blue-text);
  background: transparent;
  mask: none;
  -webkit-mask: none;
  opacity: 0.85;
  flex: 0 0 auto;
}

.lcd-icon-svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.lcd-icon-cassette {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M10 14h44a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4V18a4 4 0 0 1 4-4zm4 6v18h36V20H14zm10 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm16 0a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM14 42v4h36v-4H14z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M10 14h44a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4V18a4 4 0 0 1 4-4zm4 6v18h36V20H14zm10 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm16 0a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM14 42v4h36v-4H14z'/%3E%3C/svg%3E");
}

.lcd-icon-tv {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M14 16h36a4 4 0 0 1 4 4v22a4 4 0 0 1-4 4H34v4h10v4H20v-4h10v-4H14a4 4 0 0 1-4-4V20a4 4 0 0 1 4-4zm0 6v18h36V22H14z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M14 16h36a4 4 0 0 1 4 4v22a4 4 0 0 1-4 4H34v4h10v4H20v-4h10v-4H14a4 4 0 0 1-4-4V20a4 4 0 0 1 4-4zm0 6v18h36V22H14z'/%3E%3C/svg%3E");
}

.lcd-icon-sliders {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M18 14h4v36h-4v-8h-6v-4h6V14zm34 0v24h-6v4h6v8h-4V14h4zM36 14h4v36h-4V14zM18 30h4v6h-4v-6zm30-8h4v6h-4v-6z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M18 14h4v36h-4v-8h-6v-4h6V14zm34 0v24h-6v4h6v8h-4V14h4zM36 14h4v36h-4V14zM18 30h4v6h-4v-6zm30-8h4v6h-4v-6z'/%3E%3C/svg%3E");
}

.lcd-icon-gear {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M36 10l2 6a18 18 0 0 1 6 2l6-3 4 7-5 4a18 18 0 0 1 0 8l5 4-4 7-6-3a18 18 0 0 1-6 2l-2 6h-8l-2-6a18 18 0 0 1-6-2l-6 3-4-7 5-4a18 18 0 0 1 0-8l-5-4 4-7 6 3a18 18 0 0 1 6-2l2-6h8zm-4 16a10 10 0 1 0 0 20 10 10 0 0 0 0-20z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M36 10l2 6a18 18 0 0 1 6 2l6-3 4 7-5 4a18 18 0 0 1 0 8l5 4-4 7-6-3a18 18 0 0 1-6 2l-2 6h-8l-2-6a18 18 0 0 1-6-2l-6 3-4-7 5-4a18 18 0 0 1 0-8l-5-4 4-7 6 3a18 18 0 0 1 6-2l2-6h8zm-4 16a10 10 0 1 0 0 20 10 10 0 0 0 0-20z'/%3E%3C/svg%3E");
}

.lcd-icon-spark {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M32 8l4 16 16 4-16 4-4 16-4-16-16-4 16-4 4-16zm18 24l2 8 8 2-8 2-2 8-2-8-8-2 8-2 2-8z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M32 8l4 16 16 4-16 4-4 16-4-16-16-4 16-4 4-16zm18 24l2 8 8 2-8 2-2 8-2-8-8-2 8-2 2-8z'/%3E%3C/svg%3E");
}

.lcd-icon-keys {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M14 18h36a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H14a4 4 0 0 1-4-4V22a4 4 0 0 1 4-4zm0 6v16h36V24H14zm6 0h4v10h-4V24zm8 0h4v10h-4V24zm8 0h4v10h-4V24zm8 0h4v10h-4V24z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M14 18h36a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H14a4 4 0 0 1-4-4V22a4 4 0 0 1 4-4zm0 6v16h36V24H14zm6 0h4v10h-4V24zm8 0h4v10h-4V24zm8 0h4v10h-4V24zm8 0h4v10h-4V24z'/%3E%3C/svg%3E");
}

.lcd-icon-drum {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M16 24c0-6 7-10 16-10s16 4 16 10-7 10-16 10-16-4-16-10zm0 0v16c0 6 7 10 16 10s16-4 16-10V24c0 6-7 10-16 10S16 30 16 24zm6 10h4v14h-4V34zm16 0h4v14h-4V34z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M16 24c0-6 7-10 16-10s16 4 16 10-7 10-16 10-16-4-16-10zm0 0v16c0 6 7 10 16 10s16-4 16-10V24c0 6-7 10-16 10S16 30 16 24zm6 10h4v14h-4V34zm16 0h4v14h-4V34z'/%3E%3C/svg%3E");
}

.lcd-label {
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -0.5px;
}

/* Scenery List Items */
.lcd-list-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(0,34,68, 0.2);
  border-radius: 4px;
  color: var(--lcd-blue-text);
  font-family: "Courier New", monospace;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
}

.lcd-list-item:active {
  background: rgba(0,34,68, 0.2);
}

.lcd-back-btn {
  background: rgba(0,0,0,0.1);
  border: 1px solid var(--lcd-blue-text);
  justify-content: center;
}

/* Swipe Area (Invisible, for gestures) */
.lcd-swipe-trigger {
  position: absolute;
  top: -150px; /* Area above handle */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9940; 
  /* Debug: background: rgba(255,0,0,0.1); */
}


.radial-wrap a:nth-child(1) div {
  background-image: url('/radial/library.svg');
}

.radial-wrap a:nth-child(2) {
  border-radius: 0 40vmin 0 0;
  left: 52.5%;
  transform-origin: -10% 110%;
}

.radial-wrap a:nth-child(2) div {
  background-image: url('/radial/genres.svg');
}

.radial-wrap a:nth-child(3) {
  border-radius: 0 0 0 40vmin;
  top: 52.5%;
  transform-origin: 110% -10%;
}

.radial-wrap a:nth-child(3) div {
  background-image: url('/radial/fx.svg');
}

.radial-wrap a:nth-child(4) {
  border-radius: 0 0 40vmin 0;
  top: 52.5%;
  left: 52.5%;
  transform-origin: -10% -10%;
}

.radial-wrap a:nth-child(4) div {
  background-image: url('/radial/scenery.svg');
}

.radial-wrap a:nth-child(5) {
  width: 55%;
  height: 55%;
  left: 22.5%;
  top: 22.5%;
  border-radius: 50vmin;
  box-shadow: 0 0 0 5vmin rgba(0, 0, 0, 0.25);
}

.radial-wrap a:nth-child(5) div {
  background-image: url('/radial/mixer.svg');
}

.boombox-controls legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -1000in;
}

.boombox-controls .boombox-btn {
  --spec: linear-gradient(#0000 0 0);
  --spec-checked:
    radial-gradient(50% 150% at 0 50%, #0004 6%, #0000 50%),
    radial-gradient(50% 130% at 100% 50%, #0004 10%, #0000 50%);
  --base:
    radial-gradient(at 20% 20%, #0000, #0003) 0 40% / 110% 120% padding-box,
    linear-gradient(#44444a, #28282f) 0 40% / 110% 120% padding-box,
    linear-gradient(#5b5b61, #28282f 50%, #202028) 0 40% / 110% 120% border-box;
  font-size: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex: 1 1 0;
  width: auto;
  height: clamp(58px, 10vmin, 92px);
  border-radius: 0.15em;
  border: 0.02em solid #0000;
  margin: 0;
  padding: 0;
  position: relative;
  background:
    var(--spec),
    var(--base);
  color: #fff5;
  transform: perspective(30em) translateZ(3em);
  box-shadow:
    inset 0 0 0.4em #0002,
    0 0 0.15em #0005,
    0.25em 0.15em 0.4em #000c,
    0.2em 0.25em 0.35em #0009;
  z-index: 2;
  transition: all 0.1s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.boombox-controls .boombox-btn:first-of-type {
  --spec-checked: radial-gradient(50% 100% at 100% 50%, #0004 10%, #0000 50%);
}

.boombox-controls .boombox-btn:last-of-type {
  --spec-checked: radial-gradient(50% 100% at 0% 50%, #0004 10%, #0000 50%);
}

.boombox-controls .boombox-btn.is-pressed {
  background:
    var(--spec-checked),
    var(--base);
  transform: perspective(30em) translateZ(0em);
  z-index: 1;
  box-shadow:
    inset 0 0 1em #0004,
    0 0 0 #0000,
    0 0 0 #0000,
    0.125em 0.125em 1em #0005;
}

.boombox-controls .boombox-btn::before {
  content: attr(value);
  transform: translate(-50%, -50%);
  font-size: 0.74em;
  left: 50%;
  top: 66%;
  position: absolute;
  text-transform: uppercase;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
}

.boombox-controls .boombox-btn::after {
  content: "";
  position: absolute;
  top: 34%;
  left: 50%;
  width: 0.98em;
  height: 0.78em;
  background: currentcolor;
  transform: translate(-50%, -50%);
}

.boombox-controls .boombox-btn[value="rec"] {
  color: #b44a;
}

.boombox-controls .boombox-btn.is-broken {
  opacity: 0.42;
  filter: grayscale(1) contrast(1.05);
  cursor: not-allowed;
}

.boombox-controls .boombox-btn.is-broken::before,
.boombox-controls .boombox-btn.is-broken::after {
  opacity: 0.45;
}

.boombox-controls .boombox-btn.is-broken::after {
  background:
    linear-gradient(135deg, currentcolor 0 0) 50% 50% / 100% 100% no-repeat;
  mask:
    radial-gradient(circle at 40% 40%, #0000 0 32%, #000 33%),
    linear-gradient(45deg, #000 0 12%, #0000 13% 40%, #000 41% 55%, #0000 56%);
  -webkit-mask:
    radial-gradient(circle at 40% 40%, #0000 0 32%, #000 33%),
    linear-gradient(45deg, #000 0 12%, #0000 13% 40%, #000 41% 55%, #0000 56%);
}

.boombox-controls .boombox-btn[value="rec"]::after {
  width: 0.78em;
  border-radius: 50%;
  background: currentcolor;
}

.boombox-controls .boombox-btn[value="rew"]::after {
  clip-path: polygon(0 50%, 50% 0, 50% 45%, 100% 0, 100% 100%, 50% 55%, 50% 100%);
}

.boombox-controls .boombox-btn[value="play"]::after {
  width: 0.86em;
  clip-path: polygon(100% 50%, 0% 0, 0% 100%);
}

.boombox-controls .boombox-btn[value="ffwd"]::after {
  clip-path: polygon(100% 50%, 50% 0, 50% 45%, 0% 0, 0% 100%, 50% 55%, 50% 100%);
}

.boombox-controls .boombox-btn[value="stop"]::after {
  width: 0.78em;
}

.boombox-controls .boombox-btn[value="chat"] {
  color: rgba(120, 170, 255, 0.75);
}

.boombox-controls .boombox-btn[value="home"] {
  color: rgba(110, 255, 160, 0.8);
}

.boombox-controls .boombox-btn[value="chat"]::after {
  width: 0.98em;
  height: 0.72em;
  background: currentcolor;
  border-radius: 0.18em;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 80%,
    65% 80%,
    52% 100%,
    52% 80%,
    0% 80%
  );
}

.boombox-controls .boombox-btn[value="home"]::after {
  width: 0.92em;
  height: 0.78em;
  background: currentcolor;
  clip-path: polygon(50% 0%, 100% 45%, 100% 100%, 0% 100%, 0% 45%);
}

/* Blinking REC dot while recording */
@keyframes boombox-rec-blink {
  0% { opacity: 1; filter: drop-shadow(0 0 0.35em rgba(255, 45, 85, 0.95)); }
  50% { opacity: 0.18; filter: drop-shadow(0 0 0.05em rgba(255, 45, 85, 0.25)); }
  100% { opacity: 1; filter: drop-shadow(0 0 0.35em rgba(255, 45, 85, 0.95)); }
}

.boombox-controls .boombox-btn.boombox-rec.is-recording::after {
  background: #ff2d55;
  animation: boombox-rec-blink 0.9s steps(2, end) infinite;
}

/* Invisible chat input for iOS keyboard trigger */
.invisible-chat-input {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Landscape mixer mode styling */
.landscape-mixer-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #0a0a1a 0%, #0f0c29 30%, #1a1a3d 60%, #2d1b4e 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mixer-scroll-container {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px 0;
  -webkit-overflow-scrolling: touch;
}

.mixer-channels {
  display: flex;
  gap: 20px;
  padding: 0 20px;
  min-width: -moz-max-content;
  min-width: max-content;
  height: 100%;
  align-items: flex-start;
}

.mixer-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 90px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 15px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.channel-label {
  color: white;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 5px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Track-specific controls */
.track-controls {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.control-btn {
  padding: 4px 8px;
  background: rgba(76, 175, 80, 0.2);
  border: 1px solid #4CAF50;
  color: #4CAF50;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.control-btn:hover {
  background: rgba(76, 175, 80, 0.4);
  transform: scale(1.05);
}

.control-btn.small {
  padding: 3px 6px;
  font-size: 8px;
}

.control-btn.genre-btn {
  background: rgba(156, 39, 176, 0.2);
  border-color: #9C27B0;
  color: #9C27B0;
}

.control-btn.genre-btn:hover {
  background: rgba(156, 39, 176, 0.4);
}

/* Pattern toggles */
.pattern-toggles {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
}

.pattern-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pattern-btn.active {
  background: rgba(76, 175, 80, 0.3);
  border-color: #4CAF50;
  color: #4CAF50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.4);
}

.pattern-btn:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
}

/* Fader container */
.fader-container {
  margin: 10px 0;
}

.channel-fader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

.channel-fader-max,
.channel-fader-min {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  line-height: 1;
}

.channel-fader {
  /* Modern vertical slider implementation */
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; /* Standard */
  width: 40px;
  height: 180px;
  background: linear-gradient(to top, #1a1a1a 0%, #333 50%, #1a1a1a 100%);
  outline: none;
  border-radius: 20px;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.channel-fader::-webkit-slider-runnable-track {
  margin: 9px 0;
}

.channel-fader::-moz-range-track {
  margin: 9px 0;
}

.channel-fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 0 15px rgba(76, 175, 80, 0.3);
}

.channel-fader::-moz-range-thumb {
  width: 36px;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 0 15px rgba(76, 175, 80, 0.3);
}

/* Transport controls at bottom */
.landscape-transport {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 130px;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.landscape-transport .transport-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.landscape-transport .transport-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.landscape-transport .transport-btn.active {
  background: rgba(76, 175, 80, 0.3);
  border-color: #4CAF50;
  color: #4CAF50;
}

.record-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f44336;
  border: 2px solid white;
}

/* Mute button */
.mute-btn {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 60px;
  text-align: center;
}

.mute-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.mute-btn.muted {
  background: rgba(244, 67, 54, 0.3);
  border-color: #f44336;
  color: #f44336;
  box-shadow: 0 0 15px rgba(244, 67, 54, 0.4);
}

/* NEW button */
.new-btn {
  padding: 6px 10px;
  background: rgba(68, 68, 68, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 50px;
  text-align: center;
  margin-top: 4px;
}

.new-btn:hover {
  background: rgba(85, 85, 85, 0.9);
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Horizontal branding layout complete */

/* --- Landscape sidebar & content layout (mobile only usage) --- */
.landscape-mixer-container {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

.landscape-sidebar {
  width: 72px;
  min-width: 72px;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.sidebar-button {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #eee;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  text-transform: uppercase;
}
.sidebar-button:hover { background: rgba(255,255,255,0.14); transform: translateY(-1px); }
.sidebar-button:active { transform: translateY(0); }
.sidebar-button.active {
  background: rgba(100, 200, 255, 0.18);
  border-color: rgba(100, 200, 255, 0.65);
  color: #c8ecff;
  box-shadow: 0 4px 14px rgba(100, 200, 255, 0.25);
}

.landscape-content {
  flex: 1;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Mixer channel area */
.mixer-scroll-container {
  position: relative;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.mixer-channels {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 14px;
  min-height: 100%;
  align-items: stretch;
}

.mixer-channel {
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.35), 0 8px 18px rgba(0,0,0,0.25);
  width: 120px;
  min-width: 120px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.pattern-toggles { display: flex; gap: 6px; margin: 6px 0 8px; }
.pattern-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: #eee;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pattern-btn:hover { background: rgba(255,255,255,0.16); }
.pattern-btn.active {
  background: rgba(76, 175, 80, 0.28);
  border-color: #4CAF50;
  color: #c9f3cf;
  box-shadow: 0 0 10px rgba(76,175,80,0.35);
}

.fader-container { width: 100%; margin: 8px 0; }

/* Full-screen panel wrapper for reused desktop menus */
.landscape-panel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

/* When desktop FX menu is rendered inside landscape-panel, override its fixed docking */
.landscape-panel .fx-menu-container {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: min(1024px, 96%) !important;
  height: min(90vh, 640px) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45) !important;
}

/* RecipesMenu: center and unfix inside landscape-panel */
.landscape-panel .recipes-container {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: min(1100px, 96%) !important;
  height: auto !important;
  max-height: 90vh !important;
  margin: 0 auto !important;
}
.landscape-panel .recipes-modal {
  height: 100% !important;
  max-height: 100% !important;
}

/* SpotifyArtistMenu: center container in panel */
.landscape-panel .spotify-container {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: min(1200px, 96%) !important;
  height: 100% !important; /* ensure children using height:100% have a basis */
  max-height: 100% !important;
  margin: 0 auto !important;
  overflow: auto !important;
}

/* Thinner header for menus in landscape to maximize interface area */
.landscape-panel .spotify-container .spotify-header {
  height: 44px !important;
  padding: 8px 12px !important;
}

.landscape-panel .spotify-container .spotify-logo-text {
  font-size: 18px !important;
  margin-right: 12px !important;
  padding-bottom: 2px !important;
}

.landscape-panel .spotify-container .close-button {
  width: 28px !important;
  height: 28px !important;
}

/* Adjust content area to new header height */
.landscape-panel .spotify-container .spotify-content {
  height: calc(100% - 44px) !important;
}

/* Themed, thinner scrollbar for artist list in landscape */
.landscape-panel .spotify-container .artist-grid-container {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #26c96f #121212; /* thumb color, track color */
}

.landscape-panel .spotify-container .artist-grid-container::-webkit-scrollbar {
  width: 8px;
}

.landscape-panel .spotify-container .artist-grid-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
}

.landscape-panel .spotify-container .artist-grid-container::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8A2BE2, #1DB954);
  border-radius: 8px;
  border: 2px solid rgba(0, 0, 0, 0.4);
}

.landscape-panel .spotify-container .artist-grid-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9b4dff, #26c96f);
}

/* SamplerMenu: generic container override if fixed */
.landscape-panel [class*="sampler"][class*="container"],
.landscape-panel .sampler-container,
.landscape-panel .genre-selector-container {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: min(1200px, 96%) !important;
  height: auto !important;
  max-height: 90vh !important;
  margin: 0 auto !important;
  overflow: auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-auto-rows: 1fr !important;
  gap: 10px !important;
  padding: 6px !important;
  margin: 0 !important; /* override desktop margin-top */
  align-items: stretch !important;
  justify-items: stretch !important;
}

.landscape-panel .genre-selector-container .control-button .button-inner span {
  font-size: 11px !important;
}

.landscape-panel .genre-selector-container .section-container {
  max-height: 100% !important;
}

/* ===== Final overrides: GenreSelector in landscape (no scrolling, two panes) ===== */
.landscape-panel .genre-selector-container {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 6px !important;
  /* keep content safely above fixed transport bar */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-auto-rows: 1fr !important;
  gap: 12px !important; /* extra gap to help visual separation */
  overflow: hidden !important;
}

.landscape-panel .genre-selector-container .middle-section {
  display: none !important;
}

.landscape-panel .genre-selector-container .section-container {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.landscape-panel .genre-selector-container .section-header {
  padding: 4px 6px !important; /* slightly larger for readability */
}

.landscape-panel .genre-selector-container .section-title {
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
}

.landscape-panel .genre-selector-container .led-display {
  height: 22px !important;
  min-width: 100px !important;
  padding: 2px 8px !important;
}

.landscape-panel .genre-selector-container .led-display-value {
  font-size: 11px !important;
}

/* Fit all buttons without inner scroll */
.landscape-panel .genre-selector-container .genre-grid {
  padding: 6px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* keep larger buttons */
  grid-auto-rows: 34px !important; /* taller rows to avoid overlap when text wraps */
  gap: 6px !important;
  overflow: hidden !important;
  align-items: stretch !important;    /* make grid items fill row height */
  justify-items: stretch !important;  /* make grid items fill column width */
  align-content: start !important;    /* pack rows from the top */
}

.landscape-panel .genre-selector-container .genre-button {
  min-height: 28px !important;
  border-radius: 10px !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.landscape-panel .genre-selector-container .genre-button .button-outer {
  border-radius: 8px !important;
  width: 100% !important;
  height: 100% !important;
}

.landscape-panel .genre-selector-container .genre-button .button-inner {
  padding: 4px 8px !important;
  border-radius: 10px !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.landscape-panel .genre-selector-container .genre-button span {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.1 !important;
  white-space: normal !important; /* allow wrap */
  word-break: break-word !important;
  hyphens: auto !important;
}

/* Clear separation between left (drums) and right (melody) panes */
.landscape-panel .genre-selector-container .section-container:nth-of-type(1) {
  border-right: 2px solid rgba(255, 255, 255, 0.16) !important; /* stronger divider */
  padding-right: 6px !important;
}
.landscape-panel .genre-selector-container .section-container:nth-of-type(2) {
  border-left: 2px solid rgba(255, 255, 255, 0.16) !important; /* stronger divider */
  padding-left: 6px !important;
}

.landscape-panel .genre-selector-container .control-buttons {
  display: none !important; /* hide bottom row in landscape */
}

.landscape-panel .genre-selector-container .control-button .button-inner span {
  font-size: 9px !important;
}
/* ===== End final overrides ===== */

/* SamplerMenu: ensure MPC pads fit and stay square in landscape panel */
.landscape-panel .sampler-main-layout {
  gap: 8px !important;
}

.landscape-panel .sampler-pad-section {
  min-width: 0 !important;
  padding: 6px !important;
}

.landscape-panel .sampler-left-section {
  max-width: 420px !important;
}

.landscape-panel .pitch-fader-section {
  width: 56px !important;
  min-width: 56px !important;
}

.landscape-panel .sampler-pads {
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: auto !important; /* let items/aspect-ratio drive row height */
  grid-template-rows: none !important; /* remove fixed rows from desktop css */
  gap: 6px !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important; /* override inline 500px maxHeight */
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.landscape-panel .mpc-pad {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Reduce vertical footprint of various Sampler pieces in landscape */
.landscape-panel .sampler-menu-container {
  padding: 6px 6px 12px 6px !important;
}

.landscape-panel .sampler-header h2 {
  font-size: 16px !important;
}

.landscape-panel .sampler-content { 
  margin-top: 6px !important; 
}

.landscape-panel .lcd-line { 
  min-height: 20px !important; 
  padding: 4px 6px !important; 
}

.landscape-panel .sampler-lcd { 
  min-height: 90px !important; 
  padding: 6px 8px !important; 
}

.landscape-panel .button-row { 
  margin: 8px 0 6px 0 !important; 
  gap: 8px !important; 
}

.landscape-panel .control-btn { 
  min-height: 24px !important; 
  min-width: 70px !important; 
  max-width: 90px !important; 
  font-size: 10px !important; 
  padding: 3px 6px !important; 
}

.landscape-panel .mute-controls,
.landscape-panel .time-controls,
.landscape-panel .jump-controls,
.landscape-panel .toggle-controls {
  padding: 6px 8px !important; 
}

.landscape-panel .mute-btn-inner { 
  width: 42px !important; 
  height: 42px !important; 
}

.landscape-panel .mute-label { 
  font-size: 9px !important; 
}

@media (max-width: 480px) {
  .brand-title { font-size: 14px; letter-spacing: 3px; }
  .brand-by { font-size: 10px; }
  .producer-name { font-size: 10px; }
  .producer-btn-compact { width: 35px; height: 35px; }
  .producer-call-btn-compact { width: 34px; height: 34px; }
  .producer-thumb-compact { width: 24px; height: 24px; }
  .producer-emoji-compact { font-size: 18px; }
}

/* When overlay is open, block background interactions */
.minimal-mobile-container.overlay-open .floating-cassette,
.minimal-mobile-container.overlay-open .transport-controls,
.minimal-mobile-container.overlay-open .chat-button-container,
.minimal-mobile-container.overlay-open .producer-btn,
.minimal-mobile-container.overlay-open .switch-full-btn {
  pointer-events: none;
  touch-action: none;
}

/* Prevent scrolling and viewport changes on mobile */
body {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

html {
  overflow: hidden;
  height: 100%;
}

/* Prevent zoom on input focus */
input {
  font-size: 16px !important;
  transform-origin: left top;
  zoom: 1;
}

/* Animated Background */
.animated-background {
  display: none;
}

/* Three.js smoke canvas container (behind UI, above base bg) */
.three-smoke-container {
  position: fixed;
  inset: 0;
  z-index: 0; /* above .animated-background (-1) but below UI */
  pointer-events: none; /* don't block touches */
}

/* Swipe hint overlay */
.swipe-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999 !important; /* force highest layer - above cassette tape */
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: swipeHintFade 0.3s ease-out;
}

/* Directional hint positioning */
.swipe-hint.hint-up {
  top: 35%;
  transform: translate(-50%, -50%);
}

.swipe-hint.hint-down {
  top: 70%; /* moved lower for "New Melody" */
  transform: translate(-50%, -50%);
}

.swipe-hint.hint-left {
  left: 25%;
  transform: translate(-50%, -50%);
}

.swipe-hint.hint-right {
  left: 75%;
  transform: translate(-50%, -50%);
}

@keyframes swipeHintFade {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Cassette swipe animations */
.floating-cassette.swipe-left {
  animation: swipeLeft 1s ease-in-out;
}

.floating-cassette.swipe-right {
  animation: swipeRight 1s ease-in-out;
}

.floating-cassette.swipe-up {
  animation: swipeUp 1s ease-in-out;
}

.floating-cassette.swipe-down {
  animation: swipeDown 1s ease-in-out;
}

@keyframes swipeLeft {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  50% { transform: translateX(-120vw) scale(0.8); opacity: 0; }
  51% { transform: translateX(120vw) scale(0.8); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes swipeRight {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  50% { transform: translateX(120vw) scale(0.8); opacity: 0; }
  51% { transform: translateX(-120vw) scale(0.8); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes swipeUp {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-120vh) scale(0.8); opacity: 0.3; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes swipeDown {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(120vh) scale(0.8); opacity: 0.3; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Smoke Effect */
.smoke-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse at 30% 40%, rgba(100, 120, 255, 0.1) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(ellipse at 70% 60%, rgba(150, 100, 255, 0.1) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(ellipse at 40% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
  animation: smokeFloat 8s ease-in-out infinite;
  opacity: 0.6;
  z-index: 2;
  mix-blend-mode: screen;
}

@keyframes smokeFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.3;
  }
  33% {
    transform: translateY(-20px) rotate(1deg);
    opacity: 0.5;
  }
  66% {
    transform: translateY(10px) rotate(-1deg);
    opacity: 0.4;
  }
}

/* Color Fade Effect */
.color-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(138, 43, 226, 0.1),
    rgba(30, 144, 255, 0.1),
    rgba(255, 20, 147, 0.1),
    rgba(50, 205, 50, 0.1)
  );
  background-size: 400% 400%;
  animation: colorShift 12s ease-in-out infinite;
}

/* Phones: two full-viewport layers animating (one of them mix-blend-mode:
   screen) force a recomposite of the whole screen every frame, all session —
   a straight battery/heat tax under the WebGL smoke that already reacts to
   the music. Keep the static gradients, drop their motion. */
@media (pointer: coarse) {
  .minimal-mobile-container .smoke-effect,
  .minimal-mobile-container .color-fade {
    animation: none !important;
  }
}

.minimal-mobile-container.power-save-idle .smoke-effect,
.minimal-mobile-container.power-save-idle .color-fade {
  animation: none !important;
}
/* The cassette keeps floating even when the page is otherwise idle — it IS
   the page's identity, and in native mode (no livestream levels) the idle
   state is the common one, so freezing it here read as "the tape broke".
   One transform animation on one small element is cheap. */

@keyframes colorShift {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Version Selector */
.version-selector {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
}

.switch-version-btn {
  position: absolute;
  top: 30px;
  right: 20px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  width: 40px;
  height: 40px;
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch-version-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.switch-version-btn:active {
  transform: scale(0.95);
}

/* removed duplicate .switch-version-btn block and stray properties */

/* Time Display */
.time-display {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  pointer-events: none; /* never intercept taps near producer button */
}

/* Base floating cassette styles */
.floating-cassette {
  position: relative;
  z-index: 50;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
  transform-origin: center center;
  will-change: transform;
  touch-action: none; /* Prevent default touch behaviors */
  /* Initial state */
  transform: scale(1) translateY(0);
  animation: floatCassette 6s ease-in-out infinite;
  transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Minimal theme anti-banding overrides */
.minimal-mobile-container .floating-cassette,
.minimal-mobile-container .cassette:not(.holding):not(.release-animating) {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

/* Simplify cassette background to remove repeating stripes in minimal theme */
.minimal-mobile-container .tascam-portastudio-container .cassette,
.minimal-mobile-container .cassette {
  background: var(--bgcolor) !important;
  background-image: none !important; /* fully remove repeating backgrounds */
  background-clip: padding-box;
  outline: 1px solid transparent;
}

/* Also simplify label background to avoid fine stripe artifacts */
.minimal-mobile-container .cassette .label,
.minimal-mobile-container .cassette .medium-tape .label-container .label {
  background: #eee !important;
  background-image: none !important;
}

/* Top tape small backgrounds can produce aliasing; make them transparent in minimal theme */
.minimal-mobile-container .cassette .top-tape .arrow-mark-container,
.minimal-mobile-container .cassette .top-tape .brand-mark {
  background: transparent !important;
}

/* Prevent hover wiggle/rotation in minimal theme (reduces subpixel artifacts) */
.minimal-mobile-container .cassette:hover:not(.holding):not(.release-animating) {
  animation: none !important;
}

/* Ensure the inner cassette element isn't being transformed fractionally */
.minimal-mobile-container .floating-cassette .cassette:not(.holding):not(.release-animating) {
  transform: none !important;
}

/* iOS-specific rendering tweaks */
@supports (-webkit-touch-callout: none) {
  .minimal-mobile-container .cassette:not(.holding):not(.release-animating) {
    transform: translateZ(0);
    border-color: rgba(64, 64, 64, 0.001) !important; /* minimize visible seam */
    box-shadow: none !important; /* avoid iOS top-edge shadow banding */
  }
  /* Hide external side notches that can alias on iOS */
  .minimal-mobile-container .cassette::before,
  .minimal-mobile-container .cassette::after {
    display: none !important;
  }
  /* Disable float animation to prevent fractional subpixel movement on iOS */
  .minimal-mobile-container .floating-cassette {
    animation: none !important;
  }
}

/* Minimal vertical view: make cassette slightly smaller (normal and zoomed) */
.minimal-mobile-container .floating-cassette:not(.zoomed) {
  transform: scale(0.95) translateY(clamp(26px, 4.5vh, 70px)) !important;
}

/* Default zoomed override (slightly smaller) */
.minimal-mobile-container .floating-cassette.zoomed {
  transform: scale(1.55) translateY(-4vh) !important;
}

/* Adjust zoom for medium screens */
@media (max-width: 1024px) {
  .minimal-mobile-container .floating-cassette.zoomed {
    transform: scale(1.25) translateY(-15vh) !important;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .minimal-mobile-container .floating-cassette.zoomed {
    transform: scale(1.55) translateY(-4vh) !important;
  }
  @media (max-height: 600px) {
    .minimal-mobile-container .floating-cassette.zoomed {
      transform: scale(1.05) translateY(-22vh) !important;
    }
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .minimal-mobile-container .floating-cassette.zoomed {
    transform: scale(1.15) translateY(-22vh) !important;
  }
  @media (max-height: 500px) {
    .minimal-mobile-container .floating-cassette.zoomed {
      transform: scale(1.05) translateY(-25vh) !important;
    }
  }
}

/* Swipe Hint */
.swipe-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 18px;
  font-weight: 500;
  z-index: 100;
  pointer-events: none;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.2s ease-out;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Ensure smooth transitions when dragging ends */
.floating-cassette {
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.15s ease;
}

/* Zoomed state for chat mode */
.floating-cassette.zoomed {
  transform: scale(1.6) translateY(-10vh) !important;
  z-index: 100;
  position: relative;
  animation: none !important; /* Disable float animation when zoomed */
}

/* Adjust zoom for medium screens */
@media (max-width: 1024px) {
  .floating-cassette.zoomed {
    transform: scale(1.3) translateY(-15vh);
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .floating-cassette {
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.15s ease;
    transform-origin: center center;
    will-change: transform;
  }

  .floating-cassette.zoomed {
    transform: scale(1.6) translateY(-10vh);
    transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  }
  
  /* When keyboard is visible on mobile */
  @media (max-height: 600px) {
    .floating-cassette.zoomed {
      transform: scale(1.1) translateY(-22vh);
    }
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .floating-cassette {
    transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1), 
                filter 0.35s ease-out, opacity 0.15s ease;
  }
  
  .floating-cassette.zoomed {
    transform: scale(1.2) translateY(-22vh);
  }
  
  /* When keyboard is visible on small mobile */
  @media (max-height: 500px) {
    .floating-cassette.zoomed {
      transform: scale(1.1) translateY(-25vh);
    }
  }
}

/* Slide down animation when sending message */
@keyframes slideDown {
  from {
    transform: scale(1.2) translateY(-15vh);
  }
  to {
    transform: scale(1) translateY(0);
  }
}

/* Apply slide down when message is sent */
.floating-cassette.slide-down {
  animation: slideDown 0.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes floatCassette {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(0.5deg);
  }
  66% {
    transform: translateY(5px) rotate(-0.5deg);
  }
}

/* Invisible Chat Input */
.invisible-chat-input {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  font-size: 16px; /* Prevent zoom on iOS */
  border: none;
  background: transparent;
  color: transparent;
  outline: none;
  z-index: -1;
}

/* Chat Controls */
.chat-controls {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  z-index: 20;
}

.invisible-send-btn {
  background: rgba(100, 255, 100, 0.2);
  border: 2px solid rgba(100, 255, 100, 0.5);
  border-radius: 15px;
  padding: 12px 24px;
  color: #64ff64;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.invisible-send-btn:hover:not(:disabled) {
  background: rgba(100, 255, 100, 0.3);
  border-color: rgba(100, 255, 100, 0.7);
  transform: translateY(-2px);
}

.invisible-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.invisible-close-btn {
  background: rgba(255, 100, 100, 0.2);
  border: 2px solid rgba(255, 100, 100, 0.5);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff6464;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 18px;
  font-weight: bold;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.invisible-close-btn:hover {
  background: rgba(255, 100, 100, 0.3);
  border-color: rgba(255, 100, 100, 0.7);
  transform: scale(1.1);
}

/* Zoom Effects */
.minimal-mobile-container.zoomed {
  overflow: hidden;
}

.floating-cassette.zoomed {
  transform: scale(1.5) translateY(-20px);
  z-index: 100;
  transition: transform 0.5s ease;
}

.floating-cassette:not(.zoomed) {
  transition: transform 0.5s ease;
}

/* Enhanced floating cassette for swipe gestures */
.floating-cassette {
  position: relative;
  z-index: 150; /* keep below header buttons */
  will-change: transform;
  touch-action: pan-y; /* Allow vertical scrolling but capture horizontal swipes */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* iPhone and small mobile specific adjustments */
@media (max-height: 700px) {
  .floating-cassette {
    transform: scale(0.75);
  }
  
  .transport-controls {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  }
  
  .minimal-status {
    bottom: 15px;
  }
  
  .chat-button-container {
    bottom: 10px;
    right: 10px;
  }
  
  .chat-btn {
    width: 45px;
    height: 45px;
  }
}

/* Keyboard open adjustments for iOS */
@media (max-height: 500px) {
  .floating-cassette {
    transform: scale(0.6) translateY(-20px);
  }
  
  .transport-controls {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }
  
  .chat-button-container {
    bottom: 5px;
    right: 5px;
  }
  
  .time-display {
    top: 10px;
  }
  
  .version-selector {
    top: 10px;
  }
}

/* Very small screens (iPhone SE, etc.) */
@media (max-height: 600px) {
  .floating-cassette {
    transform: scale(0.65);
  }
  
  .transport-controls {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    gap: 15px;
  }
  
  .transport-btn {
    width: 45px;
    height: 45px;
  }
  
  .minimal-status {
    bottom: 10px;
  }
  
  .status-indicator {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* Producer Selector - Button and Overlay */
.producer-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 56px; /* slightly larger hit area */
  height: 56px; /* slightly larger hit area */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.28);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  z-index: 3000; /* above cassette */
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: manipulation; /* reduce gesture conflicts */
  -webkit-tap-highlight-color: transparent; /* remove tap highlight */
}

.producer-btn::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
}

.producer-btn:hover { transform: scale(1.06); background: rgba(255,255,255,0.2); }
.producer-btn:active { transform: scale(0.95); }

/* Switch-to-Full button (moved from inline styles) */
.switch-full-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  cursor: pointer;
  z-index: 2147483647 !important; /* Max z-index to ensure it's on top */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: manipulation;
  pointer-events: auto !important;
  transform: translateZ(50px); /* Force above cassette 3D context */
}

.switch-full-btn:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateZ(50px) scale(1.06);
}

.switch-full-btn:active { transform: translateZ(50px) scale(0.95); }

.producer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  z-index: 12000; /* above LCD drawer */
  display: flex;
  flex-direction: column;
  touch-action: pan-x;
}

.producer-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  color: #eee;
  pointer-events: none;
}

.producer-title { font-size: 16px; font-weight: 600; letter-spacing: 0.6px; }
.producer-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
}

.producer-carousel {
  display: flex;
  gap: 18px;
  padding: 10px 20px 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  flex: 1;
}

.producer-card {
  scroll-snap-align: center;
  flex: 0 0 72vw;
  height: 58vh;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  border: 2px solid rgba(255,255,255,0.22);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  touch-action: pan-x;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.producer-card * {
  pointer-events: none;
}

.producer-card.active {
  border-color: rgba(100, 200, 255, 0.8);
  box-shadow: 0 10px 36px rgba(100, 200, 255, 0.35);
}

.producer-avatar { font-size: 64px; }
.producer-name { font-size: 18px; font-weight: 600; letter-spacing: 0.5px; opacity: 0.9; }

@media (max-width: 420px) {
  .producer-card { flex-basis: 78vw; height: 56vh; }
  .producer-avatar { font-size: 56px; }
}

/* Producer images */
.producer-thumb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.producer-avatar-img {
  width: 80%;
  height: 65%;
  border-radius: 16px;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.producer-btn { 
  pointer-events: auto; 
  z-index: 1001; 
  touch-action: manipulation; 
}

/* Scenery overlay (mobile minimal) */
.scenery-overlay {
  position: fixed;
  inset: 0;
  z-index: 6500;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  pointer-events: auto;
}

/* Scenery floating mode (no dim/overlay; hides cassette) */
.scenery-float-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--transport-footer-safe, 140px);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.001);
  touch-action: auto;
}

.scenery-float-layer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.scenery-build-stamp {
  display: none;
}

.scenery-back-btn {
  all: unset;
  position: fixed;
  left: 14px;
  bottom: calc(var(--transport-footer-safe, 140px) - 6px);
  z-index: 9002;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: rgba(120, 255, 120, 0.92);
  font-family: "Sys", monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 22px;
  text-shadow: 0 0 6px rgba(60, 255, 60, 0.45), 0 0 18px rgba(60, 255, 60, 0.25);
  filter: blur(0.35px);
  mix-blend-mode: screen;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  box-shadow: none;
}

.scenery-back-btn:active {
  transform: translateY(1px);
  background: rgba(0, 0, 0, 0.4);
}

.scenery-float-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scenery-main-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(64px + min(46vh, 520px) + 4px);
  bottom: calc(var(--transport-footer-safe, 140px) + 54px);
  z-index: 9002;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 10px;
  gap: clamp(12px, 2.4vh, 22px);
}

@supports (height: 100svh) {
  .scenery-main-menu {
    top: calc(64px + min(46svh, 520px) + 4px);
  }
}

@supports (-webkit-touch-callout: none) {
  .scenery-main-menu {
    bottom: calc(var(--transport-footer-safe, 140px) + 110px);
  }

  .scenery-word {
    font-size: clamp(16px, 4.2vw, 22px);
  }
}

.scenery-main-menu-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.001);
  touch-action: auto;
}

.lcd-drawer-handle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9002;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: rgba(120, 255, 120, 0.92);
  font-family: "Sys", monospace;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 22px;
  text-shadow: 0 0 8px rgba(60, 255, 60, 0.6), 0 0 20px rgba(60, 255, 60, 0.3);
  filter: blur(0.3px);
  mix-blend-mode: screen;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.scenery-main-menu .scenery-back-btn {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--transport-footer-safe, 140px) + 16px);
}

.scenery-word-clubs { grid-column: 1; grid-row: 1; justify-self: end; margin-right: 15px; }
.scenery-word-car { grid-column: 2; grid-row: 1; justify-self: start; margin-left: 15px; }
.scenery-word-concerts { grid-column: 1; grid-row: 2; justify-self: end; margin-right: 70px; }
.scenery-word-studio { grid-column: 2; grid-row: 2; justify-self: start; margin-left: 35px; }
.scenery-word-library { grid-column: 1; grid-row: 3; justify-self: end; margin-right: 50px; }
.scenery-word-nba { grid-column: 2; grid-row: 3; justify-self: start; margin-left: 15px; }

/* Ensure Scenery scanlines overlay always covers the TV viewport above the HUD */
.scenery-tv-slot .scenery-scanlines-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.scenery-float-layer .scenery-word {
  all: unset;
  cursor: pointer;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transform: translateZ(0);
  z-index: 9002;
  touch-action: manipulation;
  top: 0;
  left: 0;
  right: auto;
  animation: none !important;
}

.scenery-main-menu .scenery-word {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  pointer-events: auto;
  max-width: 92vw;
}

.scenery-main-menu .scenery-word-clubs { animation: sceneryFloatA 5.2s ease-in-out infinite; }
.scenery-main-menu .scenery-word-car { animation: sceneryFloatB 6.1s ease-in-out infinite; }
.scenery-main-menu .scenery-word-concerts { animation: sceneryFloatB 6.6s ease-in-out infinite; }
.scenery-main-menu .scenery-word-studio { animation: sceneryFloatA 5.8s ease-in-out infinite; }
.scenery-main-menu .scenery-word-library { animation: sceneryFloatA 6.3s ease-in-out infinite; }
.scenery-main-menu .scenery-word-nba { animation: sceneryFloatB 5.6s ease-in-out infinite; }

.scenery-smoke-text {
  display: inline-block;
  filter: url("#scenery-smoke-filter") blur(3px) contrast(108%);
  background: linear-gradient(#fff, #999, #ddd, #888);
  -webkit-background-clip: text; /* impeccable-disable-line gradient-text -- display artwork (smoke wordmark / brand lockup), not a heading or metric */
  background-clip: text; /* impeccable-disable-line gradient-text -- display artwork (smoke wordmark / brand lockup), not a heading or metric */
  color: transparent;
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.scenery-plain-text {
  display: inline-block;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.75), -2px -2px 0 rgba(0,0,0,0.55);
}

.scenery-word-sub .scenery-smoke-text {
  background: linear-gradient(#ffe9c2, #ffc77a, #f6e6ff, #a9d6ff);
  -webkit-background-clip: text; /* impeccable-disable-line gradient-text -- display artwork (smoke wordmark / brand lockup), not a heading or metric */
  background-clip: text; /* impeccable-disable-line gradient-text -- display artwork (smoke wordmark / brand lockup), not a heading or metric */
  font-size: clamp(34px, 7.2vw, 62px);
}

@keyframes sceneryAnchoredBob {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.scenery-word-anchored .scenery-smoke-text {
  animation: sceneryAnchoredBob 3.8s ease-in-out infinite;
}

.scenery-float-layer .scenery-word-single {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  animation: sceneryFloatA 5.8s ease-in-out infinite;
  max-width: 92vw;
  text-align: center;
}

.scenery-float-layer .scenery-word .container {
  display: inline-block;
  white-space: nowrap;
}

.scenery-float-layer .scenery-word .char {
  --delay: var(--d);
  display: inline-block;
  position: relative;
  font-family: "Google Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(54px, 10.2vw, 96px);
  line-height: 1;
}

.scenery-float-layer .scenery-word .base {
  z-index: 1;
  color: #fff;
  filter: blur(20px);
  opacity: 0;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.25),
    0 0 16px rgba(255, 255, 255, 0.22);
  animation: sceneryBaseReveal 0.6s ease-out calc(var(--delay) + 0.2s) forwards;
}

.scenery-float-layer .scenery-word .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(90deg, #3186FF 0%, #346BF1 50%, #4FA0FF 100%);
  -webkit-background-clip: text; /* impeccable-disable-line gradient-text -- display artwork (smoke wordmark / brand lockup), not a heading or metric */
  background-clip: text; /* impeccable-disable-line gradient-text -- display artwork (smoke wordmark / brand lockup), not a heading or metric */
  -webkit-text-fill-color: transparent;
  filter: blur(20px);
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  animation: sceneryGradientReveal 0.6s ease-out var(--delay) forwards;
}

@keyframes sceneryBaseReveal {
  0% {
    opacity: 0;
    filter: blur(20px);
    transform: translateY(8px);
  }
  50% {
    opacity: 1;
    filter: blur(8px);
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    filter: blur(2px);
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
@keyframes sceneryGradientReveal {
  0% {
    clip-path: inset(0 100% 0 0);
    filter: blur(20px);
    opacity: 1;
  }
  30% {
    clip-path: inset(0 60% 0 0);
    filter: blur(12px);
    opacity: 1;
  }
  60% {
    clip-path: inset(0 20% 0 0);
    filter: blur(6px);
    opacity: 1;
  }
  90% {
    clip-path: inset(0 0% 0 0);
    filter: blur(0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0% 0 0);
    opacity: 0;
  }
}

@keyframes sceneryFloatA {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes sceneryFloatB {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 12px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.scenery-float-layer .scenery-sceneoff {
  position: fixed;
  right: 14px;
  left: auto;
  transform: none;
  bottom: calc(var(--transport-footer-safe, 140px) - 64px) !important;
  z-index: 9002;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 11px;
}

/* 90s TV (scenery mode) */
.scenery-tv-slot {
  position: absolute;
  inset: 64px 0 auto 0;
  transform: none;
  width: 100%;
  height: min(46vh, 520px);
  aspect-ratio: auto;
  z-index: 9001;
  background: rgba(0, 0, 0, 0.62);
  pointer-events: none;
}

/* Remove zoom behavior styles */
.scenery-tv-slot.is-zoomed {
  /* Reset to default state */
  inset: 64px 0 auto 0 !important;
  width: 100% !important;
  height: min(46vh, 520px) !important;
  transform: none !important;
  pointer-events: none;
}


/* Override global .scanlines rules (GenreSelector) so Scenery CRT can be full-width */
 .scenery-tv-slot .scanlines {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
 }

 .scenery-tv-slot .scenery-crt.scanlines {
  width: 100% !important;
  height: 100% !important;
 }

/* Scoped CRT TV effect (ported from codevember10crt-tv-effect) */
.scenery-crt {
  position: relative;
  width: 100%;
  height: 100%;
}

.scenery-crt .screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scenery-crt .screen::before {
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 100%;
  z-index: -1;
}

.scenery-crt.scanlines .overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scenery-crt.scanlines .overlay::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  /* Glass, not a cabinet. This was crt.png — a bitmap of an entire vintage
     television bezel stretched across the picture. The desktop set dropped it
     when the frame was modernised; leaving it here meant the phone was still
     showing the old chunky cabinet, and paying a cross-origin image request
     for it on a mobile connection. Same treatment as the desktop tube: a soft
     corner vignette and one specular sweep. */
  background:
    radial-gradient(125% 125% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 38%);
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
}

.scenery-crt.scanlines .overlay::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 3;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.scenery-crt .picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
}

.scenery-crt .text {
  color: lime;
  opacity: 0.95;
  filter: blur(0.4px);
  font-family: Sys, monospace;
  font-size: 4.2vmin;
  left: 5%;
  position: absolute;
  text-shadow: 0 0 3px lime;
  top: 10%;
  width: 200px;
  z-index: 3;
}

.scenery-crt .menu {
  opacity: 1;
  background-color: rgba(0, 105, 255, 0.92);
  box-sizing: border-box;
  font-family: "Sys", monospace;
  font-size: clamp(22px, 4.2vmin, 38px);
  height: auto;
  text-transform: uppercase;
  width: calc(100% - 18px);
  max-width: none;
  text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
  filter: blur(0.35px);
  color: #fff;
  z-index: 3;
}

.scenery-crt .menu[aria-hidden="true"] {
  display: none;
}

.scenery-crt .menu header {
  color: #e7e05c;
  margin-bottom: 10px;
  padding: 8px 14px;
}

.scenery-crt .menu ul {
  margin: 0;
  padding: 0;
}

.scenery-crt .menu ul li {
  box-sizing: border-box;
  list-style: none;
  padding: 8px 14px;
}

.scenery-crt .menu ul li.active {
  background-color: rgba(26, 242, 255, 0.85);
}

.scenery-crt .menu ul li a {
  color: #fff;
  text-decoration: none;
}

.scenery-crt .menu footer {
  background-color: rgba(42, 253, 114, 0.9);
  margin-top: 10px;
  padding: 8px 14px;
  cursor: pointer;
}

.scenery-crt .menu footer::after {
  clear: both;
  content: " ";
  display: table;
}

.scenery-crt .menu footer .key {
  float: left;
  width: 50%;
}

.scenery-crt .menu footer .key span {
  background-color: rgba(0, 105, 255, 0.92);
  border: 4px solid #e7e05c;
  border-radius: 6px;
  display: inline-block;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  border-width: 3px;
}

.scenery-crt .menu footer .key:last-child {
  text-align: right;
}

@keyframes crtSmokePulse {
  0% { opacity: 1; filter: blur(0.2px); }
  45% { opacity: 0.25; filter: blur(1.6px); }
  60% { opacity: 0.8; filter: blur(0.4px); }
  100% { opacity: 1; filter: blur(0.2px); }
}

.scenery-crt .menu ul li a {
  animation: crtSmokePulse 6.5s ease-in-out infinite;
}

.scenery-tv {
  position: relative;
  width: 100%;
  height: 100%;
}

.scenery-tv-screen {
  position: absolute;
  inset: 0;
  background-image: url(https://alexandrevacassin.fr/codepen/old-tv/base.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 10;
  pointer-events: none;
}

.scenery-tv-container,
.scenery-tv-hud {
  position: absolute;
  inset: 12% 4% 10% 4% !important;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: transparent !important;
}

.scenery-tv-hud {
  position: absolute;
  inset: 12% 4% 10% 4% !important;
  z-index: 15;
  pointer-events: auto;
  font-family: "Sys", monospace;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  padding-bottom: 58px;
}

.scenery-vhs-av {
  position: absolute;
  left: 10px;
  top: 10px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.25);
  filter: blur(0.25px);
}

.scenery-vhs-menu {
  position: relative;
  margin: 44px 10px 0 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 8px;
  pointer-events: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

@media (max-width: 420px) {
  .scenery-main-menu {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10px;
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
}

.scenery-vhs-menu[aria-hidden="true"] {
  display: none;
}

.scenery-vhs-item {
  all: unset;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(22px, 4.2vmin, 40px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.85), -1px -1px 0 rgba(0,0,0,0.85);
  filter: blur(0.35px);
  padding: 2px 4px;
}

.scenery-tv-slot.is-zoomed .scenery-vhs-item {
  font-size: clamp(24px, 4.7vmin, 46px);
}

.scenery-vhs-item.is-active {
  background: rgba(255, 255, 255, 0.16);
}

.scenery-tv-iframe {
  position: absolute;
  inset: -10% -10% -10% -10% !important;
  width: 120% !important;
  height: 120% !important;
  border: 0 !important;
  background: #000 !important;
  display: block;
  filter: contrast(1.15) brightness(1.1);
  pointer-events: none;
}

@supports (-webkit-touch-callout: none) {
  .scenery-tv-container,
  .scenery-tv-hud {
    inset: 12% 4% 10% 4% !important;
  }

  .scenery-tv-iframe {
    inset: -12% -12% -12% -12% !important;
    width: 124% !important;
    height: 124% !important;
  }
}

.scenery-vhs-back {
  all: unset;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(28px, env(safe-area-inset-bottom, 0px));
  z-index: 40;
  cursor: pointer;
  font-family: "Sys", monospace;
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  color: rgba(120, 255, 120, 0.92);
  text-shadow: 0 0 6px rgba(60, 255, 60, 0.45), 0 0 18px rgba(60, 255, 60, 0.25);
  filter: blur(0.35px);
  mix-blend-mode: screen;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.scenery-vhs-back:active {
  opacity: 0.75;
}

.scenery-tv-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 0;
  filter: contrast(1.2) brightness(1.1);
  pointer-events: none;
}

.scenery-tv-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: 0.75;
  pointer-events: none;
  z-index: 3;
}

.scenery-tv-glitch {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: url("https://upload.wikimedia.org/wikipedia/commons/0/02/Television_static.gif");
  mix-blend-mode: multiply;
  opacity: 0.22;
  animation: glitchMove 0.2s infinite linear;
  z-index: 4;
}

.scenery-tv-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0.2) 1px,
    rgba(0, 0, 0, 0) 2px
  );
  pointer-events: none;
  z-index: 5;
}

.scenery-tv-snow {
  position: absolute;
  inset: 0;
  background: url("https://upload.wikimedia.org/wikipedia/commons/0/02/Television_static.gif");
  background-size: cover;
  opacity: 0;
  z-index: 6;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

.scenery-tabs .main-tabs-container {
  padding: 0 1rem 1rem 1rem;
}

.scenery-tabs .main-tabs-wrapper {
  position: relative;
}

.scenery-tabs ul.main-tabs,
.scenery-tabs ul.filter-tabs {
  list-style-type: none;
  display: flex;
}

.scenery-tabs ul.main-tabs li {
  display: inline-flex;
  position: relative;
  padding: 1.5rem;
  z-index: 1;
}

.scenery-tabs .avatar,
.scenery-tabs .avatar img {
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  pointer-events: none;
}

.scenery-tabs .avatar img {
  -o-object-fit: cover;
     object-fit: cover;
}

.scenery-tabs .round-button {
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease-in-out;
}

.scenery-tabs .round-button:hover,
.scenery-tabs .round-button.active {
  color: var(--round-button-active-color, rgba(255, 255, 255, 0.95));
}

.scenery-round-label {
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 11px;
}

.scenery-tabs .main-slider {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 1.5rem;
  z-index: 0;
  transition: transform 0.4s ease-in-out;
  transform: translateX(var(--translate-main-slider));
}

.scenery-tabs .main-slider-circle {
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 50%;
  transition: background-color 0.4s ease-in-out;
  background-color: var(--main-slider-color, rgba(255, 255, 255, 0.18));
}

.scenery-tabs .animate-jello {
  animation: scenery-jello-horizontal 0.9s both;
}

@keyframes scenery-jello-horizontal {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

.scenery-tabs .filters-container {
  overflow: hidden;
  padding: 0 3rem;
  transition: max-height 0.4s ease-in-out; /* impeccable-disable-line layout-transition -- one-shot disclosure on the scenery panel (hidden entirely in native mode), not a per-frame animation */
  max-height: var(--filters-container-height);
}

.scenery-tabs .filters-wrapper {
  position: relative;
  transition: opacity 0.2s ease-in-out;
  opacity: var(--filters-wrapper-opacity);
}

.scenery-tabs .filter-tabs {
  border-radius: 1rem;
  padding: 0.3rem;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.10);
}

.scenery-tabs .filter-tabs li {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 33.33%;
}

.scenery-tabs .filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  flex-grow: 1;
  height: 3rem;
  padding: 0 1.5rem;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
  font-size: 1.4rem;
  white-space: nowrap;
}

.scenery-tabs .filter-button.filter-active {
  transition: color 0.4s ease-in-out;
  color: rgba(15, 15, 16, 0.9);
}

.scenery-tabs .filter-slider {
  pointer-events: none;
  position: absolute;
  padding: 0.3rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.scenery-tabs .filter-slider-rect {
  height: 3rem;
  width: 33.33%;
  border-radius: 0.8rem;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.1rem 1rem -0.4rem rgba(0, 0, 0, 0.12);
  transition: transform 0.4s ease-in-out;
  transform: translateX(var(--translate-filters-slider));
}

/* Transport Controls - Portrait Mode */
.transport-controls {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 200;
}

.transport-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.1s ease; /* Reduced from 0.3s for instant feedback */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.transport-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.transport-btn:active {
  transform: scale(0.95);
  transition: all 0.05s ease; /* Even faster for press feedback */
}

.transport-btn.active {
  background: rgba(76, 175, 80, 0.3) !important;
  border-color: #4CAF50 !important;
  color: #4CAF50 !important;
}

/* --- Mobile performance overrides: reduce heavy effects --- */
@media (max-width: 768px) {
  /* Avoid expensive backdrop blur on mobile */
  .landscape-transport {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.72) !important;
  }
  .transport-btn,
  .chat-btn,
  .mute-btn,
  .new-btn {
    /* Lighter shadows to reduce GPU work */
    box-shadow: 0 1px 6px rgba(0,0,0,0.25) !important;
    border-color: rgba(255,255,255,0.25) !important;
  }
}

/* Respect reduced motion to save battery while keeping visuals */
@media (prefers-reduced-motion: reduce) {
  .cassette-container.mobile-floating,
  .floating-cassette,
  .floating-cassette.swipe-left,
  .floating-cassette.swipe-right,
  .floating-cassette.swipe-up,
  .floating-cassette.swipe-down,
  .cassette-container.cassette-swipe-left,
  .cassette-container.cassette-swipe-right,
  .cassette-container.cassette-swipe-up,
  .cassette-container.cassette-swipe-down,
  .swipe-hint {
    animation: none !important;
    transition: none !important;
  }
}

/* Minimal Status Indicator */
.minimal-status {
  position: fixed;
  bottom: 40px;
  left: calc(50% + 10px);
  transform: translateX(-50%);
  z-index: 50;
}

.status-indicator {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 8px 16px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.1s ease; /* Instant status updates */
}

.status-indicator.playing {
  color: #4CAF50;
  border-color: rgba(76, 175, 80, 0.4);
  background: rgba(76, 175, 80, 0.1);
}

.status-indicator.stopped {
  color: #f44336;
  border-color: rgba(244, 67, 54, 0.4);
  background: rgba(244, 67, 54, 0.1);
}

/* =========================================================================
   LCD CONSOLE PASS — one shared skin for every LCD page.

   The vault and the native FX console were built with their own type stack
   (VT323) and their own palette (rgba(127,184,207,...) borders on a bright
   #1a6fae fill), so LOAD/SAVE and FX read as a different device from GENRES /
   RECIPES / MIXER, which all use "Courier New" on --lcd-blue-text over the
   translucent-white panel. Everything below now inherits from one set of
   tokens, so any future LCD page starts consistent by default.
   ========================================================================= */

.lcd-content {
  --lcd-panel: rgba(255, 255, 255, 0.12);
  --lcd-panel-strong: rgba(255, 255, 255, 0.24);
  --lcd-edge: rgba(0, 34, 68, 0.28);
  --lcd-edge-soft: rgba(0, 34, 68, 0.16);
  --lcd-fill-active: rgba(0, 34, 68, 0.18);
}

/* Shared control skin: every tappable thing on an LCD page. */
.lcd-fx-native-tab,
.lcd-fx-chip,
.lcd-vault-tile,
.lcd-vault-back,
.lcd-tape-row,
.lcd-genres-tab,
.lcd-genre-row,
.lcd-genres-subback {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lcd-edge);
  border-radius: 10px;
  color: var(--lcd-blue-text);
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  -webkit-tap-highlight-color: transparent;
}

/* Backgrounds live in their own rule on purpose: inside the block above,
   `all: unset` swallows background-color (border/color/font survive it, that
   one does not), leaving every control transparent. Kept separate so the panel
   fill actually renders. */
.lcd-content .lcd-fx-native-tab,
.lcd-content .lcd-fx-chip,
.lcd-content .lcd-vault-tile,
.lcd-content .lcd-vault-back,
.lcd-content .lcd-tape-row,
.lcd-content .lcd-genres-tab,
.lcd-content .lcd-genre-row,
.lcd-content .lcd-genres-subback {
  background-color: var(--lcd-panel);
}

.lcd-content .lcd-fx-native-tab:active,
.lcd-content .lcd-fx-chip:active,
.lcd-content .lcd-vault-tile:active,
.lcd-content .lcd-vault-back:active,
.lcd-content .lcd-tape-row:active,
.lcd-content .lcd-genres-tab:active,
.lcd-content .lcd-genre-row:active,
.lcd-content .lcd-genres-subback:active {
  transform: translateY(1px);
  background-color: var(--lcd-fill-active);
}

.lcd-content .lcd-fx-native-tab.is-active,
.lcd-content .lcd-fx-chip.is-active,
.lcd-content .lcd-genres-tab.is-active,
.lcd-content .lcd-genre-row.is-active {
  background-color: var(--lcd-fill-active);
  border-color: var(--lcd-blue-text);
}

/* Shared page scaffolding. */
.lcd-fx-native,
.lcd-vault,
.lcd-genres-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.lcd-scroll,
.lcd-fx-native-grid,
.lcd-vault-list,
.lcd-genres-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 8px 8px;
  scrollbar-width: thin;
}

/* -- Native FX console: GROSS BEAT / TONE FLX / MASTER -------------------- */
.lcd-fx-native-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px 8px;
  flex: 0 0 auto;
}
.lcd-fx-native-tab {
  min-height: 38px;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  padding: 0 4px;
}
.lcd-fx-native-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}
.lcd-fx-chip {
  min-height: 42px;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  padding: 6px 8px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.lcd-fx-chip-off { grid-column: 1 / -1; min-height: 34px; }
.lcd-fx-chip-dice { grid-column: 1 / -1; border-style: dashed; }

/* -- Tape vault (Load/Save) ----------------------------------------------- */
.lcd-vault-header,
.lcd-genres-subtitle {
  font-family: "Courier New", monospace;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lcd-blue-text);
  opacity: 0.85;
  text-align: center;
  padding: 8px 8px 4px;
  flex: 0 0 auto;
}
.lcd-vault-menu {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: center;
  padding: 0 10px 10px;
}
.lcd-vault-tile {
  flex-direction: column;
  gap: 4px;
  min-height: 84px;
  border-style: dashed;
  text-align: center;
}
.lcd-vault-tile-icon { font-size: 17px; line-height: 1; opacity: 0.75; }
.lcd-vault-tile-label { font-size: 15px; letter-spacing: 0.12em; }
.lcd-vault-tile-sub { font-size: 10px; opacity: 0.7; letter-spacing: 0.04em; }
.lcd-vault-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  flex: 0 0 auto;
}
.lcd-vault-back,
.lcd-genres-subback {
  min-height: 34px;
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}
.lcd-vault-count {
  font-family: "Courier New", monospace;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--lcd-blue-text);
  opacity: 0.7;
}
.lcd-vault-empty {
  font-family: "Courier New", monospace;
  font-weight: 900;
  font-size: 11px;
  line-height: 1.5;
  color: var(--lcd-blue-text);
  opacity: 0.7;
  text-align: center;
  padding: 16px 12px;
}
.lcd-tape-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-bottom: 6px;
  padding: 4px 10px;
  /* impeccable-disable-next-line side-tab -- tape spine: the vault rows are cassettes, this is the label edge */
  border-left: 4px solid var(--lcd-edge);
  text-align: left;
  justify-content: stretch;
}
.lcd-tape-index { font-size: 11px; opacity: 0.6; }
.lcd-tape-name {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lcd-tape-go { font-size: 12px; opacity: 0.6; text-align: right; }

/* -- Genres: dual filmstrip console ---------------------------------------
   DRUMS and MELODY are both on screen at once, each as a horizontal reel under
   a fixed centre bracket. A reel costs one row of height instead of a whole
   list, which is the only way both lanes (plus sub-genre reels) fit the ~190px
   LCD. Uses the shared LCD skin tokens, so it matches every other page. */
.lcd-content.genres-mode {
  display: block;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.lcd-reels {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 6px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.lcd-reel-lane {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 auto;
}

.lcd-reel-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--lcd-blue-text);
  line-height: 1;
}
.lcd-reel-caption-label { font-size: 9px; letter-spacing: 0.18em; opacity: 0.7; }
.lcd-reel-caption-pick {
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0.95;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lcd-reel { position: relative; width: 100%; }

/* The bracket marks the commit position — whatever parks here is selected. */
.lcd-reel-bracket {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--reel-item, 132px);
  transform: translateX(-50%);
  /* Selection bracket, not a card accent: these two edges ARE the commit
     marker the reel scrolls under. */
  border-left: 2px solid var(--lcd-blue-text); /* impeccable-disable-line side-tab */
  border-right: 2px solid var(--lcd-blue-text); /* impeccable-disable-line side-tab */
  border-radius: 3px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}

.lcd-reel-track {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Half-item padding lets the first and last entries reach the centre. */
  padding-inline: calc(50% - (var(--reel-item, 132px) / 2));
  scrollbar-width: none;
}
.lcd-reel-track::-webkit-scrollbar { display: none; }

.lcd-reel-item {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: 0 0 var(--reel-item, 132px);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6px;
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--lcd-blue-text);
  opacity: 0.4;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.lcd-reel-item.is-active { opacity: 1; }

.lcd-reel-main .lcd-reel-track { height: 40px; }
.lcd-reel-main .lcd-reel-item { font-size: 15px; letter-spacing: 0.04em; }

/* Sub-genre reel: same mechanism, quieter and shorter so the lane it belongs
   to still reads as one unit. */
.lcd-reel-sub .lcd-reel-track { height: 26px; }
.lcd-reel-sub .lcd-reel-item { font-size: 11px; letter-spacing: 0.02em; }
.lcd-reel-sub .lcd-reel-bracket {
  border-left-style: dashed;
  border-right-style: dashed;
  opacity: 0.4;
}

/* Short screens: keep both lanes visible by trimming the reels, not by
   dropping one of them. */
@media (max-height: 700px) {
  .lcd-reel-main .lcd-reel-track { height: 36px; }
  .lcd-reel-main .lcd-reel-item { font-size: 14px; }
  .lcd-reel-sub .lcd-reel-track { height: 24px; }
}

/* -------------------------------------------------------------------------
   SAVE naming: park the cassette in the middle of what's actually visible.

   The zoom reused the chat-mode transform stack — scale(1.15) translateY(-22vh)
   on top of the float offset — which on a phone lifted the cassette clean off
   the top of the screen, so you were typing a name you couldn't see. vh is also
   the wrong unit here: iOS does NOT shrink vh when the keyboard opens, so the
   keyboard media queries never fired on the device that needed them.
   --app-height tracks visualViewport (main.tsx), i.e. the area above the
   keyboard, so centering against it holds with the keyboard up or down.
   The class is repeated in the selector on purpose: the older zoom rules are
   all `!important` at the same specificity, so a plain .beat-naming selector
   only won by source order — fragile the moment anything is appended after it.
   Doubling the class puts this rule a specificity step above all of them.
   ------------------------------------------------------------------------- */
.minimal-mobile-container .floating-cassette.beat-naming.beat-naming,
.floating-cassette.zoomed.beat-naming.beat-naming {
  position: fixed !important;
  left: 50% !important;
  top: calc(var(--app-height, 100vh) * 0.42) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) scale(1.15) !important;
  transform-origin: center center !important;
  animation: none !important;
  z-index: 400 !important;
  transition: transform 0.25s ease-out, top 0.2s ease-out !important;
}

/* Catches taps outside the zoomed cassette so it can zoom back out. z sits
   below the zoomed cassette (100 in chat, 400 while naming) so the cassette
   still takes its own taps, and below the LCD drawer and transport so those
   stay live controls rather than dismiss targets. Invisible by design. */
.cassette-zoom-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.001);
  touch-action: none;
}

/* Very short visible areas (keyboard up on a small phone): shrink, don't clip. */
@media (max-height: 620px) {
  .minimal-mobile-container .floating-cassette.beat-naming.beat-naming,
  .floating-cassette.zoomed.beat-naming.beat-naming {
    transform: translate(-50%, -50%) scale(0.95) !important;
  }
}

/* ============================================================================
   IMMERSIVE LCD (2026-07): when the drawer opens, the cassette docks small in
   the top-left — still tappable and swipeable (new drums/melody) — and the
   menu rises to just under it, so sampler pads, genres and FX get real room.
   ========================================================================== */
.minimal-mobile-container .floating-cassette.is-mini:not(.zoomed) {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  left: 10px;
  z-index: 11060; /* above the drawer (10900) and its handle (11000) */
  transform: scale(0.4) !important;
  transform-origin: top left;
  animation: none !important; /* no float bob in the corner (swipe animation
                                 lives on the child container and survives) */
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
}

/* The dock/undock FLIGHT: unhurried (~0.85s). The parent's transforms are
   !important (keyframes can't beat them), so the glide rides the CHILD —
   it starts inverse-scaled at the cassette's old spot and eases home. */
.minimal-mobile-container .floating-cassette.is-mini .cassette-container {
  transform-origin: top left;
  animation: mmtDockIn 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mmtDockIn {
  from { transform: translate(-28px, 85vh) scale(2.38); }
  to { transform: translate(0, 0) scale(1); }
}
.minimal-mobile-container .floating-cassette.is-undocking:not(.is-mini) .cassette-container {
  transform-origin: center center;
  animation: mmtDockOut 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mmtDockOut {
  from { transform: translate(13px, -35vh) scale(0.42); }
  to { transform: translate(0, 0) scale(1); }
}

/* ---- GENRES: a board, not a slot machine. Every genre is a visible tile;
        the picked one unfolds its sub-genres beneath; drums + melody both on
        screen at once. --------------------------------------------------- */
.lcd-genre-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  height: 100%;
}
.lcd-gb-lane {
  /* HALF AND HALF: drums own the top half, melody the bottom; each lane's
     tiles ride sideways. */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 34, 68, 0.3);
  border-radius: 10px;
  padding: 8px;
  background: rgba(0, 34, 68, 0.07);
}
.lcd-gb-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0 2px 8px;
}
.lcd-gb-title {
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.lcd-gb-pick {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lcd-gb-grid {
  /* Two stacked rows that SCROLL SIDEWAYS — thumb across, not eyes down. */
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(44px, 1fr));
  grid-auto-columns: minmax(104px, 1fr);
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.lcd-gb-grid::-webkit-scrollbar { display: none; }
.lcd-gb-chip {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  min-height: 40px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(0, 34, 68, 0.4);
  border-radius: 8px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.lcd-gb-chip.is-on {
  background: rgba(0, 34, 68, 0.88);
  color: var(--lcd-blue-bg, #9fd0ff);
  border-color: transparent;
}
.lcd-gb-subs {
  /* Sub-genres: one sideways-scrolling rail of pills. */
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 34, 68, 0.3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lcd-gb-subs::-webkit-scrollbar { display: none; }
.lcd-gb-sub {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  min-height: 30px;
  padding: 2px 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 34, 68, 0.35);
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  /* A pill wears its whole name: never shrink in the rail, never wrap.
     (These MUST live after the all:unset or it erases them.) */
  flex: 0 0 auto;
  white-space: nowrap;
}
.lcd-gb-sub.is-on {
  background: rgba(0, 34, 68, 0.88);
  color: var(--lcd-blue-bg, #9fd0ff);
  border-color: transparent;
}

/* ---- FX: all three racks stacked and visible — the lamp + name say what's
        running without opening anything. --------------------------------- */
.lcd-content.fx-mode {
  overflow: hidden;
}
.lcd-fx-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 0 6px;
  height: 100%;
  min-height: 0;
}
.lcd-fxs-rack {
  /* Desktop-console flavor: each rack is a dark module whose presets ride
     sideways on two rows, like the deck panels upstairs. */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 34, 68, 0.35);
  border-radius: 10px;
  padding: 8px;
  background: rgba(6, 16, 30, 0.28);
}
.lcd-fxs-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 8px;
}
.lcd-fxs-lamp {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 34, 68, 0.25);
  flex: 0 0 auto;
}
.lcd-fxs-lamp.is-on {
  background: #19c37d;
  box-shadow: 0 0 6px rgba(25, 195, 125, 0.9);
}
.lcd-fxs-title {
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.12em;
}
.lcd-fxs-now {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lcd-fxs-off,
.lcd-fxs-dice {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid rgba(0, 34, 68, 0.4);
  border-radius: 7px;
  font-weight: 800;
  font-size: 10px;
  -webkit-tap-highlight-color: transparent;
}
.lcd-fxs-off.is-active {
  background: rgba(0, 34, 68, 0.88);
  color: var(--lcd-blue-bg, #9fd0ff);
  border-color: transparent;
}
.lcd-fxs-grid {
  /* Two rows scrolling horizontally — every preset a swipe away. */
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(38px, 1fr));
  grid-auto-columns: minmax(96px, auto);
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lcd-fxs-grid::-webkit-scrollbar { display: none; }
.lcd-fxs-grid .lcd-fx-chip {
  min-height: 38px;
  white-space: nowrap;
}

/* Immersive pages: the top edge belongs to the docked cassette — producer,
   call, brand and Help clear out; only the profile button stays. */
.mmt-immersive .top-branding,
.mmt-immersive .mmt-help-btn {
  display: none !important;
}


.mobile-library-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc((var(--vh, 1vh) * 100));
  max-height: 100vh;
  background: #1a1a1d;
  z-index: 1500; /* Keep below boombox transport */
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  box-sizing: border-box;
  font-family: 'Kalam', cursive; /* Update font family */
  overflow: hidden;
  overscroll-behavior: none;
}

.mobile-library-overlay.is-search-focused {
  touch-action: none;
 }

.mobile-library-overlay.is-search-focused .library-paper.library-list {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
 }

.library-swipe-shell {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.library-swipe-actions {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.library-swipe-shell.is-swiped .library-swipe-actions {
  opacity: 1;
}

.library-swipe-action {
  width: 64px;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.library-swipe-trash {
  background: rgba(18, 24, 18, 0.82);
}

.library-swipe-edit {
  background: rgba(18, 24, 18, 0.62);
}

.library-swipe-row {
  transform: translateX(0);
  transition: transform 0.18s ease;
  will-change: transform;
}

.library-swipe-row.is-swiped {
  transform: translateX(-128px);
}

.lcd-rename-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px;
  border-top: 1px solid rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
}

.lcd-rename-input {
  width: 100%;
  max-width: 260px;
  margin: 4px auto 4px;
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.14);
  color: rgba(0,0,0,0.92);
  font-family: monospace;
  font-size: 14px;
  line-height: 1.15;
  text-align: center;
  outline: none;
  box-sizing: border-box;
}

.lcd-rename-input:focus {
  border-color: rgba(0,0,0,0.55);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.10);
}

.lcd-rename-prefix {
  opacity: 0.75;
}

.lcd-rename-value {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lcd-rename-cursor {
  display: inline-block;
  width: 10px;
  animation: lcdCursorBlink 0.7s step-end infinite;
}

.lcd-rename-hidden-input {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@keyframes lcdCursorBlink {
  50% { opacity: 0; }
}

/* LCD Header Style */

.library-header-lcd {
  background: #1f1f22;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  flex: 0 0 auto;
}

.lcd-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mobile-library-overlay .lcd-screen {
  flex: 0 0 auto;
  height: 156px;
  background: linear-gradient(180deg, #d3dbbf 0%, #c3cbb0 100%);
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 4px;
  padding: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    inset 0 -8px 14px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  font-family: 'VT323', monospace;
  color: rgba(18, 24, 18, 0.95);
}

.mobile-library-overlay .lcd-screen * {
  color: inherit;
}

.mobile-library-overlay .lcd-header {
  background-color: transparent;
  padding: 2px 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: none;
  flex-shrink: 0; /* Prevent shrinking */
  margin-bottom: 4px;
}

.lcd-new-indicator {
  position: absolute;
  left: 8px;
  top: 4px;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 800;
  color: rgba(18, 24, 18, 0.95);
  text-shadow: none;
  animation: blink 0.8s infinite step-end;
}

.mobile-library-overlay .lcd-header .lcd-close {
  position: absolute;
  right: 10px;
}

.lcd-close {
  font-family: 'VT323', monospace;
  font-size: 30px;
  line-height: 1;
  color: rgba(18, 24, 18, 0.95);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  width: 32px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.9;
  position: relative;
}

.lcd-close::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.55);
  border-radius: 2px;
  pointer-events: none;
}

.lcd-close:active {
  transform: translateY(1px);
  opacity: 1;
  background: rgba(182, 255, 214, 0.12);
}

.lcd-close-btn {
  position: absolute;
  right: 6px;
  top: 4px;
  width: 26px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.35);
  color: #000;
  cursor: pointer;
}

.lcd-close-btn:active {
  transform: translateY(1px);
}

.mobile-library-overlay .lcd-title {
  font-size: 18px;
  font-weight: normal;
  color: rgba(18, 24, 18, 0.95);
  opacity: 1;
  letter-spacing: 1px;
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-library-overlay .lcd-time {
  font-size: 20px;
  color: rgba(182, 255, 214, 0.78);
  opacity: 0.8;
  font-family: 'VT323', monospace;
}

.mobile-library-overlay .lcd-screen-content {
  padding: 4px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
 }

.mobile-library-overlay .lcd-titleline {
  flex: 0 0 auto;
  font-size: clamp(16px, 4.6vw, 22px);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  padding: 1px 6px;
  border: none;
  background: transparent;
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }

.mobile-library-overlay .lcd-midgrid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 6px;
  overflow: visible;
 }

.mobile-library-overlay .lcd-meter-slot {
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  overflow: visible;
 }

.lcd-led-meter {
  width: 100%;
  height: 100%;
  display: block;
  padding: 2px 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.lcd-led-meter-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.lcd-led-meter-label {
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0.9;
  white-space: nowrap;
}

.lcd-led-meter-bar {
  font-size: 20px;
  letter-spacing: 0.5px;
  color: rgba(18, 24, 18, 0.95);
  text-shadow: none;
  line-height: 1.1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-variant-ligatures: none;
  min-width: 0;
  position: relative;
  display: inline-block;
}

.lcd-led-meter-on {
  color: rgba(18, 24, 18, 0.95);
  position: relative;
  z-index: 2;
}

.lcd-led-meter-off {
  color: rgba(18, 24, 18, 0.25);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.mobile-library-overlay .lcd-readouts {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  align-items: flex-end;
  align-self: end;
 }

.mobile-library-overlay .lcd-readout-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  overflow: visible;
 }

.mobile-library-overlay .lcd-readout-label {
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0.9;
  white-space: nowrap;
 }

.mobile-library-overlay .lcd-readout-value {
  font-size: clamp(14px, 3.9vw, 18px);
  text-align: right;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2px;
 }

.mobile-library-overlay .lcd-statusline {
  flex: 0 0 auto;
  height: 22px;
  padding: 1px 6px;
  border: none;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
 }

.lcd-tagfilter {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
 }

.lcd-tagfilter-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 16px;
  gap: 2px;
  padding: 2px 6px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
 }

.lcd-tags-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  letter-spacing: 0.6px;
  opacity: 0.9;
 }

.lcd-tags-hit {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  padding: 0 0 0 6px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
 }

.lcd-tagclear {
  border: none;
  background: transparent;
  padding: 0;
  font-family: 'VT323', monospace;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.95;
  text-decoration: underline;
 }

.lcd-tags-inline-btn {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  opacity: 0.95;
 }

.lcd-tags-inline-value {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.95;
 }

.lcd-tagpicker {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 2px 6px;
 }

.lcd-tagitem {
  border: none;
  background: transparent;
  padding: 0;
  height: 16px;
  font-family: 'VT323', monospace;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.75;
 }

.lcd-tagitem.is-on {
  opacity: 1;
  text-decoration: underline;
 }

.lcd-seek-row {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  padding: 0 6px 2px;
}

.lcd-seek-time {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1px;
  opacity: 0.95;
}

.lcd-seekbar {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  touch-action: none;
  display: flex;
  align-items: center;
}

.lcd-seekbar-track {
  width: 100%;
  height: 16px;
  border-radius: 6px;
  background: rgba(18, 24, 18, 0.14);
  border: 1px solid rgba(18, 24, 18, 0.35);
  overflow: hidden;
 }

.lcd-seekbar-fill {
  height: 100%;
  width: 100%;
  background: rgba(18, 24, 18, 0.82);
  /* Composited reveal — see .lcd-uploadbar-fill. This one moves on every
     playback frame, so width animation was relayouting the overlay ~60x/sec. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 140ms linear;
}

.lcd-upload-row {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  padding: 0 6px 2px;
 }

.lcd-upload-percent {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0;
  opacity: 0.95;
 }

.lcd-uploadbar {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  display: flex;
  align-items: center;
 }

.lcd-uploadbar-track {
  width: 100%;
  height: 16px;
  border-radius: 6px;
  background: rgba(18, 24, 18, 0.14);
  border: 1px solid rgba(18, 24, 18, 0.35);
  overflow: hidden;
 }

.lcd-uploadbar-fill {
  height: 100%;
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    rgba(18, 24, 18, 0.9) 0,
    rgba(18, 24, 18, 0.9) 7px,
    rgba(18, 24, 18, 0.68) 7px,
    rgba(18, 24, 18, 0.68) 10px
  );
  /* Reveal by clipping, not by resizing. Animating width relayouts the bar on
     every tick; clip-path is composited. It also keeps the stripe pitch fixed,
     which scaleX would have stretched. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 140ms linear;
 }

.mobile-library-overlay .lcd-status-text {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  max-width: 100%;
  line-height: 1.05;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
 }

.mobile-library-overlay .lcd-seek {
  flex: 0 0 auto;
 }

.mobile-library-overlay .lcd-screen-content > * {
  min-height: 0;
 }

.mobile-library-overlay .lcd-default-screen,
 .mobile-library-overlay .lcd-main-info {
  flex: 1;
  min-height: 0;
 }

.mobile-library-overlay .lcd-main-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 1;
}

.mobile-library-overlay .lcd-row-group {
  display: flex;
  gap: 6px;
}

.mobile-library-overlay .lcd-row.half {
  flex: 1;
}

.mobile-library-overlay .lcd-row.sample-name {
  margin-bottom: 4px;
}

.mobile-library-overlay .lcd-row .label {
  font-size: 14px;
  font-weight: bold;
  color: inherit;
  min-width: 60px;
  opacity: 0.6;
}

.mobile-library-overlay .lcd-row .value {
  font-size: 16px;
  color: inherit;
  opacity: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
}

.lcd-value-center {
  text-align: center;
  width: 100%;
 }

.lcd-instruction {
  font-size: clamp(16px, 4.7vw, 22px);
  letter-spacing: 1px;
  line-height: 1.12;
  padding: 2px 6px 4px;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
 }

.track-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.6);
  background: rgba(0,0,0,0.08);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  animation: blink 0.8s infinite step-end;
}

.mobile-library-overlay .lcd-message-overlay {
  position: absolute;
  inset: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(182, 255, 214, 0.55);
  border-radius: 6px;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 10;
}

.mobile-library-overlay .lcd-msg-line {
  font-size: clamp(11px, 3.4vw, 14px);
  font-weight: 800;
  color: rgba(182, 255, 214, 0.95);
  opacity: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 8px;
  text-shadow: 0 0 10px rgba(182, 255, 214, 0.35);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-library-overlay .lcd-progress-bar {
  margin-top: 10px;
  height: 8px;
  border-radius: 4px;
  background: rgba(182, 255, 214, 0.12);
  overflow: hidden;
  border: 1px solid rgba(182, 255, 214, 0.25);
}

.mobile-library-overlay .lcd-progress-bar .progress-fill {
  height: 100%;
  width: 100%;
  background: rgba(182, 255, 214, 0.95);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 140ms linear;
  box-shadow: 0 0 10px rgba(182, 255, 214, 0.35);
}

@keyframes meter-bounce-h {
  0% { width: 10%; }
  100% { width: 90%; }
}

.mobile-library-overlay .lcd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
  font-family: 'VT323', monospace;
  font-weight: normal;
  text-shadow: none;
  opacity: 1;
  background-color: transparent;
  padding: 4px;
  border-radius: 2px;
  font-size: 18px;
}

.mobile-library-overlay .lcd-track-title {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.mobile-library-overlay .lcd-progress {
  font-size: 11px;
  letter-spacing: 1px;
  opacity: 0.8;
  white-space: nowrap;
}

.mpc-softkeys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
  padding: 6px 8px 10px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.mpc-softkey-panel {
  display: block;
  margin-top: 2px;
  padding: 0 8px 2px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.mpc-softkey-labels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 0;
  font-family: Arial, Helvetica, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.6);
  text-align: center;
  text-transform: uppercase;
}

.mpc-softkey-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  grid-auto-rows: 12px;
}

.mpc-softkey-btn {
  width: 100%;
  height: 12px;
  min-height: 12px;
  padding: 0;
  line-height: 0;
  display: block;
  border-radius: 2px;
  border: none;
  background: #3a3a3a;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset,
    0 2px 4px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: transform 0.05s;
}

.mobile-library-overlay .mpc-softkey-panel .mpc-softkey-buttons .mpc-softkey-btn {
  height: 12px !important;
  min-height: 12px !important;
  padding: 0 !important;
}

.mpc-softkey-btn:active,
.mpc-softkey-btn.is-pressed {
  transform: translateY(1px);
  box-shadow:
    0 0 0 rgba(255,255,255,0.1) inset,
    0 0 0 rgba(0,0,0,0.3) inset,
    0 1px 2px rgba(0,0,0,0.4);
  background: #2a2a2a;
}

.mpc-softkey-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.softkeys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.softkey {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.softkey-btn {
  width: 100%;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.35);
  background: linear-gradient(#ececf0, #cfcfd6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 2px 0 rgba(0,0,0,0.25);
  cursor: pointer;
}

.softkey-btn:active,
.softkey-btn.is-pressed {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 1px 0 rgba(0,0,0,0.25);
}

.softkey-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.softkey-label {
  font-family: Arial, Helvetica, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.6px;
  color: rgba(0,0,0,0.85);
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

.lcd-extend-choice {
  font-family: 'VT323', monospace;
  font-size: clamp(22px, 6vw, 30px);
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(182, 255, 214, 0.38);
  color: inherit;
  background: rgba(0,0,0,0.06);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 6px 14px rgba(0,0,0,0.35);
  cursor: pointer;
}

.lcd-extend-choice.is-selected {
  background: rgba(0,0,0,0.12);
  border-color: rgba(0,0,0,0.65);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 8px 18px rgba(0,0,0,0.45);
}

.lcd-extend-actions {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 10px;
  padding: 0 6px;
  flex-wrap: wrap;
}

.lcd-same-style-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 4px;
  font-family: 'VT323', monospace;
  font-size: clamp(18px, 5vw, 24px);
  line-height: 1;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.lcd-same-style-toggle input {
  width: 16px;
  height: 16px;
  accent-color: rgba(18, 24, 18, 0.9);
}

.lcd-extend-hint {
  font-size: clamp(14px, 4.2vw, 18px);
  letter-spacing: 1px;
  opacity: 0.9;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lcd-row.actions {
  justify-content: flex-start;
  gap: 10px;
}

.lcd-action {
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.75;
  padding: 2px 4px;
  border: 1px solid rgba(0,0,0,0.28);
  border-radius: 3px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lcd-action:active {
  opacity: 1;
  background: rgba(0,0,0,0.08);
}

.lcd-label {
  font-size: 10px;
  opacity: 0.7;
  color: #000;
}

.lcd-value {
  font-size: 12px;
  letter-spacing: 1px;
  color: #000;
  opacity: 0.8;
}

.lcd-default-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: inherit;
  opacity: 1;
  text-align: center;
  height: 100%;
}

.lcd-default-screen .lcd-large-brand {
  margin-bottom: 2px;
 }

.lcd-default-screen .lcd-instruction-typewriter {
  margin-top: -4px;
 }

.lcd-rename-screen {
  justify-content: flex-start;
  padding-top: 4px;
  gap: 4px;
  position: relative;
  width: 100%;
}

.lcd-rename-top {
  flex: 0 0 auto;
 }

.lcd-rename-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px;
 }

.lcd-rename-bar-text {
  min-width: 0;
 }

.lcd-rename-fields {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
 }

.lcd-rename-actions {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 2px 6px 4px;
 }

.lcd-rename-action {
  font-family: 'VT323', monospace;
  font-size: 18px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.18);
 }

.lcd-rename-screen .lcd-instruction {
  font-size: 16px;
  line-height: 1.05;
  padding: 0 6px;
 }

.lcd-rename-screen .lcd-extend-hint {
  font-size: 14px;
  letter-spacing: 1px;
 }

.lcd-rename-screen .lcd-rename-input {
  max-width: 236px;
  padding: 4px 6px;
  margin: 3px auto;
  font-size: 13px;
 }

.lcd-rename-screen .lcd-rename-actions {
  gap: 6px;
  padding: 0 6px 2px;
 }

.lcd-rename-screen .lcd-rename-action {
  height: 24px;
  font-size: 16px;
  padding: 0 8px;
  border-radius: 5px;
 }

.lcd-confirm-screen .lcd-instruction {
  font-size: 14px;
  line-height: 1.05;
  padding: 0 6px;
  -webkit-line-clamp: 3;
  line-clamp: 3;
 }

.lcd-confirm-screen .lcd-extend-hint {
  font-size: 14px;
  margin-top: 2px;
 }

.lcd-confirm-screen .lcd-extend-actions {
  padding: 0 6px;
  gap: 8px;
 }

.lcd-confirm-screen .lcd-extend-choice {
  height: 30px;
  font-size: 22px;
 }

.mobile-library-overlay .lcd-screen.is-prompting .lcd-screen-content {
  overflow: hidden;
 }

.lcd-prompt-screen {
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  gap: 1px;
  padding: 0 4px;
  box-sizing: border-box;
  overflow: hidden;
  overflow-x: hidden;
 }

.lcd-prompt-screen .lcd-instruction {
  flex: 0 0 auto;
  display: block;
  padding: 0 2px;
  font-size: clamp(13px, 3.6vw, 16px);
  line-height: 0.95;
  letter-spacing: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-clamp: unset;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
 }

.lcd-prompt-screen .lcd-rename-input {
  width: min(100%, 284px);
  max-width: none;
  min-height: 23px !important;
  height: 23px !important;
  margin: 0 auto;
  padding: 1px 6px !important;
  font-size: 14px !important;
  line-height: 1;
 }

.lcd-prompt-screen .lcd-same-style-toggle {
  margin: 0 auto;
  font-size: clamp(13px, 3.4vw, 15px);
  line-height: 0.95;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
 }

.lcd-prompt-screen .lcd-same-style-toggle input {
  width: 12px !important;
  min-width: 12px !important;
  height: 12px !important;
  min-height: 12px !important;
  padding: 0 !important;
 }

.lcd-vocal-mode-row {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  max-width: 100%;
  margin: 0 auto;
 }

.lcd-vocal-mode-choice {
  height: 18px !important;
  min-height: 18px !important;
  min-width: 60px;
  padding: 0 6px !important;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.38);
  background: rgba(255,255,255,0.08);
  color: inherit;
  font-family: 'VT323', monospace;
  font-size: clamp(13px, 3.4vw, 15px);
  line-height: 1;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.16);
 }

.lcd-vocal-mode-choice.is-selected {
  background: rgba(0,0,0,0.14);
  border-color: rgba(0,0,0,0.68);
  text-decoration: underline;
 }

.lcd-prompt-screen .lcd-extend-actions {
  flex: 0 0 auto;
  gap: 4px;
  margin-top: 1px;
  padding: 0;
 }

.lcd-prompt-screen .lcd-extend-choice {
  flex: 1 1 76px;
  max-width: 112px;
  min-height: 21px !important;
  min-width: 0 !important;
  height: 21px !important;
  padding: 0 6px !important;
  font-size: clamp(15px, 3.8vw, 17px);
  line-height: 1;
 }

.lcd-rename-action.is-primary {
  border-color: rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.08);
 }

.lcd-rename-screen .lcd-extend-hint {
  margin-top: 0;
 }

.lcd-rename-screen .lcd-extend-choice {
  height: 30px;
  font-size: clamp(18px, 5vw, 24px);
}

.lcd-rename-screen .lcd-extend-actions {
  margin-top: 0;
  padding-bottom: 6px;
}

.lcd-eye-pixel-grid {
  display: grid;
  grid-template-columns: repeat(13, 4px);
  grid-template-rows: repeat(9, 4px);
  gap: 1px;
}

.lcd-pixel {
  width: 100%;
  height: 100%;
  background-color: rgba(182, 255, 214, 0.95);
  opacity: 0.85;
}

.lcd-pixel.off {
  background-color: transparent;
}

.lcd-meter-container.stereo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  height: auto;
  min-height: 40px;
  width: 100%;
  padding: 0 10px;
  margin-top: auto;
}

.lcd-meter-channel {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.lcd-meter-label {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: rgba(182, 255, 214, 0.92);
  width: 12px;
}

.lcd-meter-bar-horizontal {
  flex: 1;
  height: 10px;
  background: rgba(182, 255, 214, 0.12);
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 1px;
}

.lcd-meter-fill-horizontal {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(
    90deg,
    rgba(182, 255, 214, 0.95) 0,
    rgba(182, 255, 214, 0.95) 3px,
    transparent 3px,
    transparent 4px
  );
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.05s ease-out;
  box-shadow: 0 0 8px rgba(182, 255, 214, 0.35);
}

@keyframes meter-bounce-h {
  0% { width: 10%; }
  100% { width: 90%; }
}

.lcd-large-brand {
  font-family: 'VT323', monospace;
  font-size: 42px;
  font-weight: bold;
  letter-spacing: 4px;
  color: rgba(182, 255, 214, 0.95);
  opacity: 1;
  text-shadow: 0 0 12px rgba(182, 255, 214, 0.35);
  margin-bottom: 10px;
}

.lcd-instruction-typewriter {
  font-family: 'VT323', monospace;
  font-size: clamp(16px, 4.5vw, 20px);
  color: rgba(182, 255, 214, 0.92);
  opacity: 1;
  letter-spacing: 0;
  min-height: 24px;
  max-width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
  line-height: 1.05;
  text-shadow: 0 0 8px rgba(182, 255, 214, 0.25);
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

.blink-cursor {
  animation: blink 0.8s infinite step-end;
  font-weight: bold;
}

.blink-text {
  animation: blink 0.8s infinite step-end;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.lcd-track-info {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: rgba(182, 255, 214, 0.78);
  opacity: 0.8;
  text-shadow: 0 0 6px rgba(182, 255, 214, 0.2);
}

.close-btn {
  align-self: flex-start;
  margin-top: -6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3a3a3e;
  border: none;
  color: #d6d6db;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3);
}

/* Tabs */

.library-tabs {
  display: flex;
  background: #222;
  padding: 4px;
  gap: 4px;
}

.library-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #666;
  padding: 10px;
  font-family: inherit;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  position: relative;
}

.tab-btn.active {
  color: #d6d6db;
  background: #333;
  border-radius: 2px;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #ff2d55; /* Accent red */
  border-radius: 50%;
  box-shadow: 0 0 4px #ff2d55;
}

/* Search */

.library-search {
  margin: 10px;
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 40px;
}

.search-icon {
  color: #555;
  margin-right: 8px;
}

.library-search input {
  background: transparent;
  border: none;
  flex: 1;
  color: #ccc;
  font-family: inherit;
  font-size: 14px;
  text-transform: uppercase;
  outline: none;
}

.library-search input::-moz-placeholder {
  color: #444;
}

.library-search input::placeholder {
  color: #444;
}

.library-fav-toggle {
  height: 28px;
  min-width: 44px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #333;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.library-fav-toggle.is-on {
  border-color: rgba(255, 45, 85, 0.8);
  background: rgba(255, 45, 85, 0.12);
  color: #ff2d55;
}

/* List */

.library-paper.library-list {
  position: relative;
  flex: 1;
  margin: 10px;
  background: #111;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  padding-bottom: calc(10px + var(--transport-footer-safe, 140px));
  gap: 4px;
  display: flex;
  flex-direction: column;
  background-image: none;
}

.library-paper.library-list .loading-state,
.library-paper.library-list .empty-state {
  padding-left: 0;
}

.library-item {
  display: flex;
  align-items: center;
  padding: 0;
  height: 48px;
  margin-bottom: 2px;
  gap: 0;
  background: #2a2a2a;
  border-radius: 2px;
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  position: relative;
  transform: translateZ(0);
  -webkit-tap-highlight-color: transparent;
  border: none;
  flex-shrink: 0;
}

.upload-ghost-wrap {
  opacity: 0.72;
  filter: saturate(0.8);
}

.upload-ghost-wrap.is-error {
  opacity: 0.84;
}

.library-item.upload-ghost {
  pointer-events: none;
  outline: 1px dashed rgba(255,255,255,0.38);
  overflow: hidden;
}

.library-item.upload-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.16) 46%,
    rgba(255,255,255,0) 72%
  );
  transform: translateX(-100%);
  animation: uploadGhostSweep 1.25s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.library-item.upload-ghost.is-error::before {
  animation: none;
}

.library-item.upload-ghost .item-icon {
  color: rgba(255,255,255,0.72);
}

.upload-spine {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.04) 0,
      rgba(0,0,0,0.04) 1px,
      transparent 1px,
      transparent 7px
    ),
    #eef2e6;
}

.upload-spine .item-title {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-tape-meter {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-family: 'VT323', monospace;
  line-height: 1;
}

.upload-tape-meter span {
  flex: 0 0 32px;
  color: rgba(15, 18, 22, 0.9);
  font-size: 14px;
  letter-spacing: 0;
}

.upload-tape-meter-track {
  flex: 1 1 auto;
  min-width: 0;
  height: 7px;
  border-radius: 2px;
  border: 1px solid rgba(15, 18, 22, 0.55);
  background: rgba(15, 18, 22, 0.12);
  overflow: hidden;
}

.upload-tape-meter-fill {
  height: 100%;
  width: 100%;
  background: rgba(15, 18, 22, 0.88);
  /* Composited reveal — see .lcd-uploadbar-fill. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 140ms linear;
}

.upload-ghost-actions {
  width: 64px;
  min-width: 64px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.upload-ghost-status {
  color: rgba(255,255,255,0.72);
  font-family: 'VT323', monospace;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

@keyframes uploadGhostSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.library-item-wrap,
.library-revision,
.revision-row {
  -webkit-tap-highlight-color: transparent;
}

.library-revision:active,
.revision-row:active {
  background: transparent;
}

.library-item.selected {
  transform: scale(1.02) translateZ(0);
  z-index: 10;
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.3);
  outline: 2px solid #74c986;
  transition: transform 0.1s;
}

.library-item:active {
  background: transparent;
}

.library-item,
.library-item-wrap,
.library-revision,
.revision-row {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.library-item.playing {
  /* Was a 4px left slab. The row already announces playback with the animated
     equaliser and its green title, so the accent bar was redundant weight. */
  background-color: rgba(116, 201, 134, 0.09);
}

.item-icon {
  width: 36px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255,255,255,0.5);
  font-family: 'Kalam', cursive; /* Update font family */
  font-size: 10px;
  font-weight: bold;
  border-right: 1px solid rgba(0,0,0,0.3);
  background: rgba(0,0,0,0.2);
  border-radius: 0;
}

.library-item.playing .item-icon {
  color: #74c986;
}

.item-info {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 4px;
  position: relative;
  background: #111; /* Fallback */
}

/* The paper insert inside the spine */

.spine-paper {
  flex: 1;
  height: 90%;
  background: #f4f1ea;
  border-radius: 1px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  position: relative;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.15);
  overflow: hidden;
  mask-image: linear-gradient(to right, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 95%, transparent 100%);
}

.spine-paper .item-title {
  padding: 0 6px;
}

.spine-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
  transition: transform 0.1s;
}

.spine-checkbox:active {
  transform: scale(0.95);
}

.spine-checkbox.checked::after {
  content: '✓';
  font-family: 'Kalam', cursive;
  font-weight: bold;
  font-size: 22px;
  color: #000;
  line-height: 1;
  transform: translate(1px, -2px) rotate(-5deg);
}

/* 3D Gloss overlay on the spine */

.library-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.03) 40%,
    rgba(255,255,255,0) 50%,
    rgba(0,0,0,0.1) 100%
  );
  pointer-events: none;
  border-radius: 2px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
}

.item-title {
  color: rgba(15, 18, 22, 0.92);
  font-size: 18px; /* Larger handwritten text */
  font-weight: bold;
  white-space: nowrap;
  line-height: 1;
  padding-top: 4px; /* Adjust for handwriting baseline */
  font-family: 'Kalam', cursive; /* Update font family */
}

.library-item.playing .item-title {
  color: #1a1a1a;
  text-decoration: underline;
  text-decoration-color: #74c986;
  text-decoration-thickness: 3px;
}

.library-revision.playing .revision-title {
  text-decoration: underline;
  text-decoration-color: #74c986;
  text-decoration-thickness: 3px;
}

.item-meta {
  display: none;
}

.separator {
  color: #333;
}

.action-btn {
  background: transparent;
  border: none;
  color: #d6d6db;
  padding: 8px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.action-btn:hover, .action-btn:active {
  opacity: 1;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

.action-btn-spacer {
  display: inline-block;
  width: 32px;
  height: 32px;
}

.mpc-key.is-pressed {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.55);
  opacity: 0.85;
}

.action-btn.expanded svg {
  transform: rotate(180deg);
}

@keyframes extArrowBlink {
  0% { opacity: 1; }
  49% { opacity: 1; }
  50% { opacity: 0.15; }
  100% { opacity: 0.15; }
}

.action-btn.has-new-rev svg {
  color: #b85cff;
  animation: extArrowBlink 0.8s steps(2, end) infinite;
}

.library-item-wrap {
  display: flex;
  flex-direction: column;
  transform: translate(var(--tape-stack-x, 0px), var(--tape-stack-y, 0px));
  transition: transform 0.2s ease;
}

.library-item.is-current {
  transform: translateX(-10px) scale(0.99) translateZ(0);
  z-index: 12;
  box-shadow:
    0 10px 18px rgba(0,0,0,0.78),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.35);
}

.library-item.is-current .spine-paper {
  filter: saturate(1.05) contrast(1.02);
}

.library-revisions {
  margin-left: 54px;
  border-left: 2px solid rgba(116, 201, 134, 0.22);
  padding-left: 12px;
}

.library-revision {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 16px;
  border-bottom: 1px solid #222;
}

.library-revision.is-extended {
  background: rgba(116, 201, 134, 0.03);
  border-left: 2px solid rgba(116, 201, 134, 0.28);
}

.library-revision.selected {
  background: rgba(255, 214, 102, 0.18);
  outline: 1px solid rgba(15, 18, 22, 0.14);
}

.library-revision:active,
.revision-row:active {
  background: transparent;
}

.library-revision.playing {
  /* Tinted fill + outline already carry the playing state; the 4px left slab
     on top of them was redundant weight. */
  background: rgba(116, 201, 134, 0.18);
  outline: 2px solid rgba(116, 201, 134, 0.35);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset, 0 10px 24px rgba(0,0,0,0.35);
}

.revision-left {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #555;
  margin-left: 6px;
}

.library-revision.playing .revision-left .mini-equalizer {
  margin-top: 6px;
 }

.library-revision.playing .revision-left .mini-equalizer .bar {
  background: #aaddff;
  box-shadow: 0 0 8px rgba(170, 221, 255, 0.65);
 }

.library-revision .cassette-thumb {
  width: 42px;
  height: 42px;
}

.revision-mid {
  flex: 1;
  min-width: 0;
}

.revision-title {
  color: #d6d6db;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.library-revision.is-extended .revision-title {
  color: rgba(214, 214, 219, 0.75);
}

.revision-meta {
  color: #666;
  font-size: 10px;
  text-transform: uppercase;
}

.library-revision.is-extended .revision-meta {
  color: rgba(102, 102, 102, 0.8);
}

/* Mini Equalizer Animation */

.mini-equalizer {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.mini-equalizer .bar {
  width: 3px;
  height: 100%;
  background: #74c986;
  transform-origin: bottom;
  /* Was animating `height` with ease-in-out, which relayouts the row on every
     frame of a permanently-running loop, and read as a dated bounce. scaleY on
     a smooth curve is composited and settles like a real meter. */
  animation: eq-pulse 0.6s infinite cubic-bezier(0.33, 1, 0.68, 1);
}

.mini-equalizer .bar:nth-child(2) { animation-delay: 0.1s; height: 60%; }

.mini-equalizer .bar:nth-child(3) { animation-delay: 0.2s; height: 30%; }

@keyframes eq-pulse {
  0%, 100% { transform: scaleY(0.2); }
  50% { height: 100%; }
}

.loading-state, .empty-state {
  text-align: center;
  padding: 40px;
  color: #444;
  font-size: 12px;
  letter-spacing: 1px;
}

/* -------------------------------------------------------------------------- */

/*                         Cassette liner (no cassette)                        */

/* -------------------------------------------------------------------------- */

.library-liner {
  padding: 10px 0 14px;
}

.library-liner .linerNotes {
  width: min(100%, 340px);
  margin: 10px auto;
  font-size: 14px;
  color: #4d4d4d;
}

.library-liner .clearfix:before,
.library-liner .clearfix:after {
  content: " ";
  display: table;
}

.library-liner .clearfix:after {
  clear: both;
}

.library-liner .green {
  color: #4b9121;
}

.library-liner .linerNotesTop {
  transform: rotate(180deg) skewX(10deg);
  position: relative;
  left: 0.3em;
  height: 3em;
  background: #f8f1e1;
  padding: 0.4em;
  box-shadow: rgba(0, 0, 0, 0.25) 0.35em 0.45em 0 0;
  border-radius: 6px 6px 0 0;
}

.library-liner .linerNotesTop .boxDesc {
  display: block;
  float: left;
  font-size: 0.68em;
  line-height: 1.1;
  max-width: 54%;
}

.library-liner .linerNotesTop .infoBoxes {
  display: block;
  float: right;
  width: 44%;
}

.library-liner .linerNotesTop .infoBoxes .box1,
.library-liner .linerNotesTop .infoBoxes .box2,
.library-liner .linerNotesTop .infoBoxes .box3 {
  display: block;
  float: left;
  text-transform: uppercase;
  text-align: center;
  border: #4d4d4d solid 0.2em;
  width: 33.33%;
  height: 2.35rem;
  line-height: 1rem;
  font-size: 0.6em;
}

.library-liner .linerNotesTop .infoBoxes .box1 {
  padding-top: 0.1em;
}

.library-liner .linerNotesTop .infoBoxes .box2 {
  background: #4d4d4d;
  color: #f8f1e1;
  font-weight: 900;
  padding-top: 0.72em;
}

.library-liner .linerNotesTop .infoBoxes .box3 {
  padding-top: 0.56em;
}

.library-liner .linerNotesTop .infoBoxes .boxCopyright {
  display: block;
  width: 100%;
  height: 0.8em;
  font-size: 0.6em;
  text-align: center;
  position: relative;
  top: -0.4em;
}

.library-liner .linerNotesSpine {
  transform: skewX(-10deg) rotate(180deg);
  position: relative;
  left: 0.3em;
  height: 3em;
  background: var(--liner-red, #fd6139);
  border-top: #4d4d4d solid 0.8em;
  border-bottom: #4d4d4d solid 0.8em;
  text-align: center;
  font-weight: 900;
  line-height: 1em;
  padding-top: 0.3em;
  box-shadow: inset var(--liner-gold, #e0c17a) 0 0.3em 0 0, inset var(--liner-gold, #e0c17a) 0 -0.3em 0 0, inset color-mix(in srgb, var(--liner-red, #fd6139) 70%, #000 30%) 0 -0.7em 0 0, rgba(0, 0, 0, 0.28) 0.25em 0.35em 0 0;
}

.library-liner .linerNotesSpine .spineTitle {
  display: block;
  background: var(--liner-gold, #e0c17a);
  width: 14em;
  max-width: 92%;
  margin: 0 auto;
  padding: 0 0.35em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.library-liner .linerNotesMainContent {
  position: relative;
  height: 12em;
  background: #f8f1e1;
  z-index: 1;
  border-radius: 0 0 6px 6px;
  box-shadow: rgba(0, 0, 0, 0.25) -0.35em 0.45em 0 0;
  overflow: hidden;
}

.library-liner .linerNotesMainContent:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  height: 12em;
  border-left: #4d4d4d solid 0.1em;
}

.library-liner .linerNotesMainContent:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20.5em;
  border-top: #eedeb8 solid 2em;
  border-right: transparent solid 0.5em;
}

.library-liner .linerNotesMainContent .side {
  float: left;
  position: relative;
  display: block;
  width: 50%;
  padding-left: 0.5em;
  border-bottom: #4d4d4d solid 0.2em;
  z-index: 2;
}

.library-liner .linerNotesMainContent .linerNotesMainContentInner {
  position: absolute;
  z-index: 100;
  top: 2.5em;
  left: 1.5em;
  width: calc(100% - 3em);
  height: calc(100% - 3.1em);
  font-family: "Shadows Into Light", cursive;
  color: #424ba8;
  transform: rotate(3deg);
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 2em;
}

.library-liner .linerNotesMainContent .linerNotesMainContentInner h1 {
  font-size: 1.15em;
  line-height: 1em;
  margin: 0 0 0.35em;
}

.library-liner .linerTrackGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2em;
}

.library-liner .linerTrackCol {
  display: flex;
  flex-direction: column;
  gap: 0.02em;
  min-width: 0;
  padding-bottom: 0.2em;
}

.library-liner .linerNotesMainContent .linerNotesMainContentInner .linerTitle {
  display: block;
  text-align: center;
  width: 100%;
}

.library-liner .linerTrackList {
  display: flex;
  flex-direction: column;
  gap: 0.06em;
}

.library-liner .linerTrack {
  all: unset;
  display: block;
  cursor: pointer;
  width: 100%;
  padding: 0;
  font-size: 0.95em;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(255,255,255,0.03);
  border-radius: 2px;
  margin-bottom: 1px;
}

.library-liner .linerTrackNum {
  display: inline-block;
  min-width: 1.6em;
}

.library-liner .linerTrack:active {
  opacity: 0.7;
}

.library-liner .linerTrack.is-playing {
  color: #4b9121;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.library-liner .linerNotesBottom {
  transform: rotate(180deg);
  position: relative;
  z-index: 2;
  height: 5.4em;
  background: #f8f1e1;
  box-shadow: inset color-mix(in srgb, var(--liner-red, #fd6139) 70%, #000 30%) 0 1.2em 0 0, inset var(--liner-red, #fd6139) 0 2.4em 0 0, inset #4d4d4d 0 3.6em 0 0, rgba(0, 0, 0, 0.25) 0.35em 0.4em 0 0;
  padding-top: 1.1em;
  text-align: center;
  border-radius: 0 0 6px 6px;
}

.library-liner .linerNotesBottom .black {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 0.62em;
}

.library-liner .linerNotesBottom .white {
  color: #efeeeb;
  font-size: 0.78em;
}

.library-liner .linerNotesBottom .title {
  font-weight: 900;
  font-size: 1.4em;
  line-height: 1.7em;
  padding-bottom: 0.1em;
}

/* =========================================================================
   RETRO OS PASS — the LCD reads like a small machine running its own OS.
   Everything below is additive and scoped under .mobile-library-overlay so
   it outranks the base rules without touching them.
   ========================================================================= */

/* -- Touch targets -------------------------------------------------------
   The MPC softkeys (DOWNLOAD / EXTEND / FLIP / SHARE) are drawn as 12px
   slivers — right for the hardware look, hopeless for thumbs. Keep the
   sliver, grow the hit area to ~44px by extending each key upward over its
   own label. The label strip stops eating taps so they fall through. */

.mobile-library-overlay .mpc-softkey-labels {
  pointer-events: none;
}

.mobile-library-overlay .mpc-softkey-btn {
  position: relative;
}

.mobile-library-overlay .mpc-softkey-btn::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  top: -26px;
  bottom: -8px;
}

.mobile-library-overlay .mpc-softkey-btn:disabled::after {
  display: none;
}

/* Swipe actions (trash / edit) get full-height 64px-wide zones already —
   just guarantee the minimum recommended size. */

.mobile-library-overlay .library-swipe-action {
  min-width: 56px;
  min-height: 44px;
}

/* -- LCD hardware --------------------------------------------------------
   Deeper backlight, a faint pixel grid, and a glass sheen: the flat mint
   panel becomes a lit segment display. */

.mobile-library-overlay .lcd-screen {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(180deg, #cfd8b6 0%, #b9c3a2 58%, #aab594 100%);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.22),
    inset 0 2px 6px rgba(30, 40, 24, 0.28),
    inset 0 -10px 16px rgba(30, 40, 24, 0.16);
}

.mobile-library-overlay .lcd-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image:
    repeating-linear-gradient(0deg, rgba(30, 40, 24, 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(30, 40, 24, 0.035) 0 1px, transparent 1px 3px);
}

.mobile-library-overlay .lcd-screen::after {
  content: '';
  position: absolute;
  left: -30%;
  top: -60%;
  width: 70%;
  height: 160%;
  transform: rotate(18deg);
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
}

/* -- OS chrome -----------------------------------------------------------
   The header becomes an inverted title bar, DOS-style: dark block, light
   bitmap text. */

.mobile-library-overlay .lcd-header {
  background: rgba(18, 24, 18, 0.92);
  color: #cfd8b6 !important;
  margin: -4px -4px 4px;
  padding: 3px 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mobile-library-overlay .lcd-header * {
  color: #cfd8b6 !important;
}

/* Menu choices read like a text-mode menu: bracketed, uppercase, and the
   selected entry is an inverted block — the way an old OS shows focus. */

.mobile-library-overlay .lcd-extend-choice,
.mobile-library-overlay .lcd-rename-action {
  font-family: 'VT323', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid rgba(18, 24, 18, 0.55);
  border-radius: 0;
  background: transparent;
  min-height: 40px;
  padding: 8px 14px;
}

.mobile-library-overlay .lcd-extend-choice::before { content: '['; opacity: 0.6; margin-right: 4px; }

.mobile-library-overlay .lcd-extend-choice::after { content: ']'; opacity: 0.6; margin-left: 4px; }

.mobile-library-overlay .lcd-extend-choice.is-selected,
.mobile-library-overlay .lcd-rename-action.is-primary {
  background: rgba(18, 24, 18, 0.92);
  color: #cfd8b6 !important;
  border-color: rgba(18, 24, 18, 0.92);
}

.mobile-library-overlay .lcd-extend-choice.is-selected::before,
.mobile-library-overlay .lcd-extend-choice.is-selected::after { opacity: 0.85; }

/* Prompt lines get the classic blinking block cursor. */

.mobile-library-overlay .lcd-extend-hint::after {
  content: '▮';
  margin-left: 4px;
  animation: lcd-cursor-blink 1.05s steps(1) infinite;
}

@keyframes lcd-cursor-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mobile-library-overlay .lcd-extend-hint::after { animation: none; }
}

/* -- Tabs as OS function keys -------------------------------------------- */

.mobile-library-overlay .library-tabs .tab-btn {
  font-family: 'VT323', monospace;
  letter-spacing: 0.1em;
  min-height: 44px;
}

/* Every interactive row keeps a finger-sized floor. */

.mobile-library-overlay .lcd-rename-actions button,
.mobile-library-overlay .lcd-extend-actions button,
.mobile-library-overlay .lcd-vocal-mode-row button {
  min-height: 40px;
  min-width: 64px;
}

/* =========================================================================
   RETRO OS PASS 2 — legibility + the flip/extend flows as full pages.
   ========================================================================= */

/* Base type up a notch: 10-11px bitmap text was below comfortable phone
   reading size. */

.mobile-library-overlay .lcd-screen { font-size: 15px; }

.mobile-library-overlay .lcd-instruction { font-size: 15px; letter-spacing: 0.08em; }

.mobile-library-overlay .lcd-extend-hint { font-size: 13px; }

/* The prompt/confirm flows read as one clear column instead of a cramped
   cluster: question, answer, choices, actions — in that order, spaced. */

.mobile-library-overlay .lcd-prompt-screen,
.mobile-library-overlay .lcd-confirm-screen {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 10px 12px;
}

/* 16px stops iOS from auto-zooming the input — that zoom is what shoved the
   bottom half of the screen away when the keyboard opened. */

.mobile-library-overlay .lcd-rename-input {
  font-size: 16px !important;
  min-height: 44px;
  width: 100%;
}

/* While typing, the LCD grows so input + choices + confirm all stay visible
   above the keyboard instead of clipping at the fixed 156px panel height. */

.mobile-library-overlay .lcd-screen.is-prompting {
  height: auto;
  min-height: 156px;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Choice rows become a real segmented control: two even halves, thumb-sized. */

.mobile-library-overlay .lcd-vocal-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.mobile-library-overlay .lcd-vocal-mode-row button {
  min-height: 44px;
  font-size: 13px;
}

/* Confirm actions: full-width, obvious, in reach. */

.mobile-library-overlay .lcd-extend-actions,
.mobile-library-overlay .lcd-rename-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.mobile-library-overlay .lcd-extend-actions .lcd-extend-choice,
.mobile-library-overlay .lcd-rename-actions .lcd-rename-action {
  min-height: 46px;
  font-size: 14px;
  width: 100%;
}

/* List rows in the tape list keep a readable size and a full-width tap. */

.mobile-library-overlay .library-swipe-row { min-height: 48px; }
* {
  box-sizing: border-box;
}

.recording-library-cover-score {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.recording-library-cover-score .cover-score-wrapper {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
}

.recording-library-cover-score .cover-score {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  padding: 24px;
  overflow: visible;
  justify-items: center;
  align-content: start;
  gap: 24px;
}

.recording-library-cover-score .cover-score .cover {
  align-self: end;
  position: relative;
}

.recording-library-cover-score .cover-score .cover .cover-img {
  transform: perspective(1090px) rotateX(10deg);
  width: 100%;
  height: 100%;
  position: relative;
}

.recording-library-cover-score .cover-score .cover .cover-img .img-fake {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: 0;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background-size: cover;
  transform: translate(-1px, 0) scaleY(0.99);
  filter: brightness(0.94) blur(0.2px) saturate(0.9);
  border-radius: inherit;
}

.recording-library-cover-score .cover-score .cover .cover-img .plastic {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 2px);
  height: calc(100% - 1px);
  background: url(https://pudding.cool/2021/10/judge-my-music/assets/images/plastic-small.jpg);
  background-size: contain;
  mix-blend-mode: difference;
  opacity: 0.35;
  z-index: 4;
  pointer-events: none;
}

.recording-library-cover-score .cover-score .cover .shelf {
  background: url("https://pudding.cool/2021/10/judge-my-music/assets/images/shelf-3.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  z-index: 3;
  transform: translate(calc((100% + 15px) * -0.0516129032), calc(65%));
  height: calc((100% + 15px) * 0.109677419);
  width: calc(100% + 15px);
  pointer-events: none;
}

.recording-library-cover-score .cover-score .cover .shelf-shadow {
  width: calc(100% + 31px);
  height: 13px;
  position: absolute;
  right: 0;
  margin: 0 auto;
  left: 0;
  bottom: -1px;
  z-index: -1;
  transform: translate(-6px, 0);
  display: none;
}

.recording-library-cover-score .cd {
  background-image: url(https://accord.dk/cdn/shop/t/9/assets/cd.png?v=42367682729110643861600767949);
  width: 120px;
  height: 120px;
  position: absolute;
  z-index: -1;
  background-size: cover;
  top: 0;
  left: 50px;
  pointer-events: none;
}

.recording-library-cover-score .image-card {
  width: 100%;
  height: 100%;
}

.recording-library-cover-score .image-card,
.recording-library-cover-score .image-card video {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.recording-library-cover-score .image-card video {
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.mini-cassette {
  position: relative;
  border-radius: 3px;
  background: #2b2b2f;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}

.mini-cassette-window {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 18%;
  height: 36%;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.25);
}

.mini-cassette-holes {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 24%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mini-cassette-holes span {
  display: block;
  border-radius: 999px;
  background: rgba(0,0,0,0.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.mini-cassette-bar {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 18%;
  height: 2px;
  background: rgba(255,255,255,0.22);
}

@media (max-width: 985px) {
  .recording-library-cover-score .cover-score {
    gap: 20px 10px;
  }
}

@media (max-width: 885px) {
  .recording-library-cover-score .cover-score {
    gap: 20px 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .recording-library-cover-score .cover-score {
    gap: 20px 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .recording-library-cover-score .cover-score {
    gap: 20px 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .recording-library-cover-score .cover {
    width: 100px !important;
  }

  .recording-library-cover-score .cover-img.cover-img-active {
    height: 100px !important;
  }

  .recording-library-cover-score .cd {
    width: 100px;
    height: 100px;
    left: 44px;
  }
}
@font-face {
  font-family: "BioRhyme";
  src: url(https://manzdev.github.io/twitch-cassette/assets/biorhyme.woff) format("woff");
}

@font-face {
  font-family: "Code";
  src: url(https://manzdev.github.io/twitch-cassette/assets/code.woff2) format("woff");
}

@font-face {
  font-family: "Desyrel";
  src:
    url(https://manzdev.github.io/twitch-cassette/assets/desyrel.woff) format("woff"),
    url(https://manzdev.github.io/twitch-cassette/assets/desyrel.woff2) format("woff2");
}

.tascam-portastudio-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 240px;
  transform: scale(0.65);
  margin-bottom: -20px;
}

.cassette {
  --width: 458px;
  --bgcolor: #2f2f2f;
  --border-color: #404040;
  --light-color: #555;
  --dark-color: #1c1c1c;
  --external-notch-shape: polygon(100% 0, 0 5%, 0 95%, 100% 100%);

  width: var(--width);
  background: var(--bgcolor);
  background-image:
    linear-gradient(273deg, #fff1, transparent),
    repeating-linear-gradient(to bottom, #1c1c1c 3px, #2c2c2c 6px);
  border: 3px solid var(--border-color);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 10px 2px #2227;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  transform-origin: center center;
}

@keyframes cassette-release-7s {
  0% {
    opacity: 1;
    transform: translateZ(0) rotate(0deg) scale(1);
    filter: blur(0px);
  }
  15% {
    opacity: 1;
    transform: translateZ(0) rotate(6deg) scale(1.02);
    filter: blur(0px);
  }
  35% {
    opacity: 0.1;
    transform: translateZ(0) rotate(-12deg) scale(0.18);
    filter: blur(2px);
  }
  50% {
    opacity: 0;
    transform: translateZ(0) rotate(0deg) scale(0.05);
    filter: blur(6px);
  }
  65% {
    opacity: 0;
    transform: translateZ(0) rotate(0deg) scale(0.05);
    filter: blur(6px);
  }
  85% {
    opacity: 0.9;
    transform: translateZ(0) rotate(2deg) scale(1.08);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) rotate(0deg) scale(1);
    filter: blur(0px);
  }
}

.cassette.release-animating {
  animation: cassette-release-7s 7s ease-in-out forwards !important;
}

.cassette::before,
.cassette::after {
  content: "";
  display: block;
  background: #333;
  width: 5px;
  height: 75px;
  position: absolute;
  bottom: 20px;
  clip-path: var(--external-notch-shape);
}

.cassette::before {
  left: -8px;
}

.cassette::after {
  right: -8px;
  transform: scaleX(-1);
  background: #444;
}

.cassette .top-tape {
  display: flex;
  justify-content: space-between;
  height: 25px;
  padding: 0 25px;
}

.cassette .top-tape .arrow-mark-container {
  background: #0004;
  display: flex;
}

.cassette .top-tape .arrow-mark-container .arrow-mark {
  color: var(--light-color);
  font-size: 32px;
  transform: scaleY(1.6) translate(0, -10px);
}

.cassette .top-tape .brand-mark {
  background: #0004;
  font-family: "BioRhyme", serif;
  padding: 0 6px;
  color: var(--light-color);
}

.cassette .medium-tape {
  display: flex;
  justify-content: center;
}

.cassette .medium-tape .label-container {
  width: 400px;
  background: var(--dark-color);
  border-radius: 4px;
  padding: 4px;
}

.cassette .medium-tape .label-container .label {
  background: #eee;
  background-image:
    repeating-linear-gradient(transparent 0 20px, #c6c6c6 20px 21px),
    linear-gradient(278deg, #eee, #ccc);
  border-radius: 10px;
}

.cassette .medium-tape .label-container .label .top-label {
  height: 62px;
  font-weight: normal;
  font-size: 16px;
  color: #333;
}

.cassette .medium-tape .label-container .label .top-label .predefined-text {
  font-family: Arial;
  font-size: 9px;
  padding: 6px 6px 4px;
  position: absolute;
}

.cassette .medium-tape .label-container .label .top-label .top-text {
  font-family: "Desyrel", sans-serif;
  padding: 6px 10px;
  font-size: 24px;
  line-height: 110%;
  text-shadow: 0 0 1px #444;
  text-align: center;
}

.cassette .medium-tape .label-container .label .medium-label {
  height: 95px;
  background: #4d7fb4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
}

.cassette .medium-tape .label-container .label .medium-label .side-name {
  width: 50px;
  font-weight: bold;
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #222;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container {
  width: 360px;
  height: 75px;
  border: 4px solid var(--dark-color);
  background: var(--bgcolor);
  background-image: linear-gradient(76deg, transparent, #aaa2);
  border-radius: 5px;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 4px solid #aaa;
  box-shadow: 0 0 0 4px #111;
  background: transparent;
  animation-play-state: paused;
}

.cassette.playing .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel {
  animation-play-state: running;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel.left {
  animation: spin 6s linear infinite reverse;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel.right {
  animation: spin 8s linear infinite reverse;
}

/* Tape-transport spin-up: reels ease in over the first half second of play
   (matches the native engine's 0.5s audio wind-up delay), then settle into
   the constant-speed spin. */
.cassette.playing .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel.left {
  animation: reel-spinup 0.5s ease-in reverse, spin 6s linear 0.5s infinite reverse;
}

.cassette.playing .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel.right {
  animation: reel-spinup 0.5s ease-in reverse, spin 8s linear 0.5s infinite reverse;
}

@keyframes reel-spinup {
  from { transform: rotate(0deg); }
  to { transform: rotate(30deg); }
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel .notch {
  background: linear-gradient(to right, #aaa 0 10%, transparent 12% 88%, #aaa 90% 100%);
  width: 50px;
  height: 8px;
  position: absolute;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel .notch-1 { transform: rotate(60deg); }
.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel .notch-2 { transform: rotate(0deg); }
.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel .notch-3 { transform: rotate(-60deg); }

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .central-gap {
  width: 100px;
  height: 50px;
  border: 3px solid #222;
  background: transparent;
  margin: 0 10px;
  overflow: hidden;
  position: relative;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .central-gap::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(transparent, #fff5, transparent);
  position: absolute;
  top: 0;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .central-gap .innertape {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(#999 45%, #3e3e3e 47% 100%);
  border: 2px solid #2e2e2e;
  position: relative;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .central-gap .innertape.left {
  transform: translate(-119px, -52px);
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .central-gap .innertape.right {
  transform: translate(66px, -206px);
  box-shadow: -10px -10px 15px #3335;
}

.cassette .medium-tape .label-container .label .medium-label .noise-reduction {
  width: 50px;
  font-size: 7px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 2px;
}

.cassette .medium-tape .label-container .label .medium-label .noise-reduction .box {
  display: flex;
  margin-top: 2px;
}

.cassette .medium-tape .label-container .label .medium-label .noise-reduction .box > div {
  border: 1px solid #444;
  background: #fff;
  font-size: 6px;
  padding: 0 3px;
  border-radius: 2px;
}

.cassette .medium-tape .label-container .label .bottom-label {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #eee;
  background-image: linear-gradient(-278deg, #eee, #ccc);
  height: 32px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.cassette .medium-tape .label-container .label .bottom-label .brand-text .maintext {
  font-family: "BioRhyme", sans-serif;
  font-size: 20px;
  color: #222;
  transform: translate(18px, 0) scaleX(1.4);
}

.cassette .medium-tape .label-container .label .bottom-label .brand-text .subtext {
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: #333;
  font-size: 7px;
  transform: translateY(-7px);
}

.cassette .medium-tape .label-container .label .bottom-label .arrow-text {
  color: #4d7fb4;
  font-size: 32px;
  transform: scaleX(1.5) translate(-6px, -3px);
}

.cassette .medium-tape .label-container .label .bottom-label .model-text {
  font-family: "Code", sans-serif;
  font-weight: bold;
  color: #222;
  font-size: 28px;
  transform: translate(0, 2px);
}

.cassette .medium-tape .label-container .label .bottom-label .model-text span {
  color: #4d7fb4;
}

.cassette .bottom-tape {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.cassette .bottom-tape .magnetic-shield-container {
  filter:
    drop-shadow(-4px 0 1px #131313)
    drop-shadow(4px 0 1px #383838)
    drop-shadow(0 -4px 0 #202020);
}

.cassette .bottom-tape .magnetic-shield-container .magnetic-shield {
  background: #2a2a2a;
  width: 350px;
  height: 65px;
  clip-path: polygon(0 100%, 4% 0, 96% 0, 100% 100%);
  display: flex;
  justify-content: space-between;
  background-image: repeating-linear-gradient(to bottom, #2c2c2c 3px, #1c1c1c 6px);
}

.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .left-hole-container,
.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .right-hole-container {
  width: 125px;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}

.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .hole.hole-2,
.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .hole.hole-3 {
  transform: translateY(-15px);
  border: 3px solid #222;
  width: 24px;
  height: 18px;
  border-radius: 30px;
  box-shadow: 0 0 0 2px #111;
}

.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .hole.hole-3 {
  width: 20px;
  border-radius: 10px;
  transform-origin: 50% 50%;
  transform: rotate(90deg) translateX(-17px);
}

.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .screw-container::before {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.75);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  top: 10px;
  z-index: 10;
}

.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .screw-container .screw {
  position: absolute;
  left: calc(50% - 8px);
  top: 10px;
  box-shadow:
    0 0 2px 4px #000,
    0 0 2px 8px #111;
}

.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .hole {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #111;
  border: 2px solid #191919;
  box-shadow: 0 0 0 2px #171717;
  transform: translateY(-5px);
}

.cassette .screw {
  background: linear-gradient(#555, #333);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #222;
  border-bottom: 1px solid #666;
  transform: rotate(-25deg);
  box-shadow: 0 0 2px 2px #111;
}

.cassette .screw .dot {
  width: 4px;
  height: 4px;
  background: #222;
  border-radius: 50%;
  position: absolute;
  z-index: 5;
  filter: blur(1px);
}

.cassette .screw::before,
.cassette .screw::after {
  content: " ";
  display: block;
  background: linear-gradient(to right, #222 10%, #111 45% 65%, #222 90%);
  width: 14px;
  height: 4px;
  border-radius: 2px;
  position: absolute;
}

.cassette .screw::before {
  transform: rotate(45deg);
}

.cassette .screw::after {
  transform: rotate(-45deg);
}

.cassette .screw.screw-1 {
  top: 4px;
  left: 4px;
}

.cassette .screw.screw-2 {
  top: 4px;
  right: 4px;
}

.cassette .screw.screw-3 {
  bottom: 4px;
  left: 4px;
}

.cassette .screw.screw-4 {
  bottom: 4px;
  right: 4px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Transport Controls */
.transport-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
  width: 100%;
}

.transport-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #333;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 
    0 3px 5px rgba(0,0,0,0.3),
    inset 0 1px 1px rgba(255,255,255,0.2);
  transition: all 0.1s;
  cursor: pointer;
}

.transport-button:hover {
  background: #444;
}

.transport-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.transport-button svg {
  width: 24px;
  height: 24px;
}

.transport-button.play {
  color: #00FF00;
}

.transport-button.stop {
  color: #FF5555;
}

.transport-button.rewind,
.transport-button.fastforward {
  color: #FFFF55;
}

.transport-button.fastforward {
  background: #2f2f2f;
  border: 1px solid rgba(255, 255, 85, 0.35);
}

.transport-button.record {
  color: #FF0000;
}

/* Recording state styles */
.cassette.recording {
  animation: recordingPulse 1s infinite alternate;
  border-color: #ff0000;
}

@keyframes recordingPulse {
  0% {
    box-shadow: 0 0 10px 2px #2227, 0 0 20px 5px rgba(255, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 10px 2px #2227, 0 0 30px 8px rgba(255, 0, 0, 0.6);
  }
}

.recording-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 0, 0, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: 'Code', monospace;
  font-weight: bold;
  font-size: 14px;
  z-index: 100;
  border: 2px solid #ff0000;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.recording-indicator.blink {
  opacity: 0.3;
}

/* Cassette hover and click animations */
.cassette {
  cursor: pointer;
  animation: none; /* Disable animation by default */
}

.cassette:hover {
  animation: none;
}

@keyframes cassetteWiggle {
  0% { transform: rotate(0.7deg); }
  25% { transform: rotate(-0.7deg); }
  50% { transform: rotate(0.5deg); }
  75% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0.5deg); }
}

.cassette.clicked {
  animation: cassetteClick 0.3s ease-in-out;
  transform-origin: center;
}

@keyframes cassetteClick {
  0% { transform: scale(1); }
  50% { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1); }
}

/* Disabled transport button styles */
.transport-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.transport-button.recording-active {
  background: #ff0000;
  color: white;
  box-shadow: 
    0 0 10px rgba(255, 0, 0, 0.5),
    inset 0 1px 1px rgba(255,255,255,0.2);
}

/* ── Rewind ────────────────────────────────────────────────────────────────
   A `/nspire` roll stops the transport and spends a second or more pulling
   new sounds for every track. The deck used to sit dead still through all of
   it. `.rewinding` is set for exactly the window the rewind bed is audible —
   which is until the last track has loaded — so the picture and the sound are
   the same event.

   The reels spin FORWARD here. Normal play is `reverse`, so dropping that is
   what reads as rewind, and the much shorter duration is the speed. The
   right reel is the take-up side, so it leads. */
.cassette.rewinding .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel.left {
  animation: spin 0.55s linear infinite;
  animation-play-state: running;
}
.cassette.rewinding .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel.right {
  animation: spin 0.42s linear infinite;
  animation-play-state: running;
}
.trash-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trash-can {
  width: 50px;
  height: 60px;
  position: relative;
  cursor: default;
  transition: transform 0.2s ease-in-out;
}

.trash-can.is-over {
  transform: scale(1.1);
}

.trash-can-lid {
  width: 54px;
  height: 8px;
  background-color: #c0c0c0;
  border: 1px solid #000;
  position: absolute;
  top: 0;
  left: -2px;
  border-radius: 4px 4px 0 0;
  z-index: 2;
  transition: transform 0.3s ease;
}

.trash-can-lid-handle {
    width: 20px;
    height: 4px;
    background-color: #a0a0a0;
    border: 1px solid #000;
    border-radius: 2px;
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
}

.trash-can.is-over .trash-can-lid {
  transform: translateY(-8px) rotate(-30deg);
  transform-origin: left center;
}

.trash-can-body {
  width: 100%;
  height: 52px;
  background-color: #d0d0d0;
  border: 1px solid #000;
  position: absolute;
  bottom: 0;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 5px;
  box-sizing: border-box;
}

.trash-can-line {
    width: 1px;
    height: 80%;
    background-color: #a0a0a0;
    border-right: 1px solid #f0f0f0;
}

.trash-can-label {
  font-family: 'Chicago', 'Monaco', monospace;
  font-size: 11px;
  color: #000;
  text-align: center;
  margin-top: 4px;
}
/* Album animation styles */
.album-container {
  margin: 20px;
  width: 150px;
  height: 150px;
  float: left;
  position: relative;
  cursor: pointer;
}

.album {
  position: absolute;
  z-index: 100;
  width: 150px;
  height: 150px;
  overflow: hidden;
  transition: .5s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.album img,
.record img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.album-container:hover .album {
  transform: rotate(-5deg);
  margin: 0 0 0 -15px;
}

.record {
  position: absolute;
  width: 140px;
  height: 140px;
  padding: 5px;
  overflow: hidden;
  transition: .75s ease;
}

.album-container:hover .record {
  margin: 0 0 0 30px;
  transform: rotate(360deg);
}

.artist-name {
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.album-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Tempo buttons */
.tempo-buttons {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.tempo-button {
  background-color: #444;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 10px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.tempo-button:hover {
  background-color: #666;
}
/* Retro computer screen style for beats display */
.beats-display-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #001a00;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  border: 2px solid #333;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 999; /* Higher z-index to ensure it's visible */
  height: 100%; /* Ensure it takes full height */
  width: 100%; /* Ensure it takes full width */
}

.beats-display-header {
  background-color: #002200;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #00ff00;
}

.beats-display-title {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.beats-display-close {
  background: none;
  border: none;
  color: #00ff00;
  cursor: pointer;
  font-size: 16px;
}

.beats-display-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-content: start;
}

.beat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 8px;
  border: 1px solid #004400;
  background-color: #001500;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  min-height: 80px;
  text-align: center;
}

.beat-item:active {
  background-color: #002200;
}

.trash-can-container {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 1001;
  padding: 20px;
  /* Larger drop zone for easier targeting */
}

.beat-item:hover {
  background-color: #003300;
}

.beat-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

/* iOS-style wiggle animation with independent variations */
.beat-item.wiggle,
.wiggle {
  animation: wiggle 0.3s ease-in-out infinite;
  position: relative;
}

/* Create multiple wiggle variations for independent movement */
.wiggle:nth-child(1) { animation: wiggle1 0.32s ease-in-out infinite; }
.wiggle:nth-child(2) { animation: wiggle2 0.28s ease-in-out infinite; }
.wiggle:nth-child(3) { animation: wiggle3 0.35s ease-in-out infinite; }
.wiggle:nth-child(4) { animation: wiggle4 0.30s ease-in-out infinite; }
.wiggle:nth-child(5) { animation: wiggle5 0.33s ease-in-out infinite; }
.wiggle:nth-child(6) { animation: wiggle6 0.29s ease-in-out infinite; }
.wiggle:nth-child(7) { animation: wiggle7 0.31s ease-in-out infinite; }
.wiggle:nth-child(8) { animation: wiggle8 0.34s ease-in-out infinite; }
.wiggle:nth-child(9) { animation: wiggle9 0.27s ease-in-out infinite; }
.wiggle:nth-child(10) { animation: wiggle10 0.36s ease-in-out infinite; }
.wiggle:nth-child(11) { animation: wiggle11 0.32s ease-in-out infinite; }
.wiggle:nth-child(12) { animation: wiggle12 0.29s ease-in-out infinite; }
.wiggle:nth-child(13) { animation: wiggle13 0.31s ease-in-out infinite; }
.wiggle:nth-child(14) { animation: wiggle14 0.33s ease-in-out infinite; }
.wiggle:nth-child(15) { animation: wiggle15 0.28s ease-in-out infinite; }
.wiggle:nth-child(16) { animation: wiggle16 0.35s ease-in-out infinite; }
.wiggle:nth-child(17) { animation: wiggle17 0.30s ease-in-out infinite; }
.wiggle:nth-child(18) { animation: wiggle18 0.34s ease-in-out infinite; }
.wiggle:nth-child(19) { animation: wiggle19 0.32s ease-in-out infinite; }
.wiggle:nth-child(20) { animation: wiggle20 0.29s ease-in-out infinite; }

@keyframes wiggle { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@keyframes wiggle1 { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.3deg); } }
@keyframes wiggle2 { 0%, 100% { transform: rotate(-0.8deg); } 50% { transform: rotate(0.9deg); } }
@keyframes wiggle3 { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.1deg); } }
@keyframes wiggle4 { 0%, 100% { transform: rotate(-0.9deg); } 50% { transform: rotate(1.4deg); } }
@keyframes wiggle5 { 0%, 100% { transform: rotate(-1.3deg); } 50% { transform: rotate(0.8deg); } }
@keyframes wiggle6 { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.2deg); } }
@keyframes wiggle7 { 0%, 100% { transform: rotate(-0.7deg); } 50% { transform: rotate(1.5deg); } }
@keyframes wiggle8 { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(0.9deg); } }
@keyframes wiggle9 { 0%, 100% { transform: rotate(-1.0deg); } 50% { transform: rotate(1.3deg); } }
@keyframes wiggle10 { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(0.7deg); } }
@keyframes wiggle11 { 0%, 100% { transform: rotate(-0.9deg); } 50% { transform: rotate(1.1deg); } }
@keyframes wiggle12 { 0%, 100% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.4deg); } }
@keyframes wiggle13 { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(0.8deg); } }
@keyframes wiggle14 { 0%, 100% { transform: rotate(-0.8deg); } 50% { transform: rotate(1.2deg); } }
@keyframes wiggle15 { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.0deg); } }
@keyframes wiggle16 { 0%, 100% { transform: rotate(-1.0deg); } 50% { transform: rotate(1.5deg); } }
@keyframes wiggle17 { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(0.9deg); } }
@keyframes wiggle18 { 0%, 100% { transform: rotate(-0.9deg); } 50% { transform: rotate(1.3deg); } }
@keyframes wiggle19 { 0%, 100% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.1deg); } }
@keyframes wiggle20 { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.4deg); } }

/* Delete animation */
.deleting {
  animation: delete-fade 0.3s ease-out forwards;
}

@keyframes delete-fade {
  0% { 
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(0.8) rotate(-10deg);
  }
  100% { 
    opacity: 0;
    transform: scale(0) rotate(-20deg);
  }
}

/* iOS-style delete X button */
.beat-delete-x {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ff3333;
  color: white;
  border: 2px solid #00ff00;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: pop-in 0.2s ease-out;
}

.beat-delete-x:hover {
  background: #ff0000;
  transform: scale(1.1);
}

.beat-delete-x:active {
  transform: scale(0.9);
}

@keyframes pop-in {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Done button */
.beats-display-done {
  background: #00ff00;
  color: #001a00;
  border: none;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  font-family: 'Courier New', monospace;
}

.beats-display-done:hover {
  background: #00cc00;
}

.beat-name {
  font-size: 12px;
  word-break: break-word;
  max-width: 100%;
}

.beat-number {
  font-size: 10px;
  opacity: 0.5;
  margin-bottom: 4px;
}

.beat-delete-btn {
  background: rgba(255, 51, 51, 0.1);
  border: 1px solid #ff3333;
  color: #ff3333;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  opacity: 0.7;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.beat-delete-btn:hover {
  opacity: 1;
  background: rgba(255, 51, 51, 0.2);
  transform: scale(1.1);
}

.beat-delete-btn:active {
  transform: scale(0.95);
}

/* Scanline effect */
.beats-display-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1;
}

/* Glow effect */
.beats-display-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 15px rgba(0, 255, 0, 0.3);
  pointer-events: none;
  z-index: 1;
}
/* Simple button pressed effect */
.button-pressed {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

.button-pressed button {
  opacity: 0.8;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Mute buttons should not have animation effects to ensure they respond quickly */
.button-pressed button.bg-red-500,
.button-pressed button.bg-red-600,
.button-pressed button.bg-red-700 {
  /* No animation effects for mute buttons */
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
}

/* New buttons should have a clear push-down animation but maintain their original color */
.button-pressed button.new-button,
.button-pressed button[data-type="new"],
.button-pressed button[class*="new"] {
  transform: scale(0.85) translateY(3px) !important;
  transition: all 0.1s ease !important;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9) !important;
}

button.button-pressed.new-button,
button.button-pressed[data-type="new"],
button.button-pressed[class*="new"] {
  transform: scale(0.85) translateY(3px) !important;
  transition: all 0.1s ease !important;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9) !important;
}
.circular-key-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 5px;
  z-index: 50; /* Reduced z-index to ensure it doesn't overlap with the vocal genre menu */
  height: 2.2em; /* Fixed height to prevent layout shifts */
  position: relative;
}

.circular-key-menu .items-wrapper {
  position: fixed; /* Changed from absolute to fixed to ensure it stays above other content */
  top: calc(50% - 70px); /* Center vertically */
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
  will-change: opacity;
  /* Ensure menu doesn't affect document flow */
  width: auto;
  height: auto;
  overflow: visible;
  z-index: 51; /* Higher than the menu container but lower than the genre menu */
}

.circular-key-menu.active .items-wrapper {
  pointer-events: auto;
  opacity: 1;
  /* Reset dimensions when active */
  width: auto;
  height: auto;
}

.circular-key-menu-label {
  font-size: 12px;
  color: #ffaa55; /* Mild orange color */
  margin-right: 8px;
  text-shadow: 0 0 5px rgba(255, 170, 85, 0.5);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.circular-key-menu .floating-btn {
  display: block;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background-color: #1b1b1b;
  color: hsl(0, 0%, 100%);
  text-align: center;
  line-height: 2.2em;
  cursor: pointer;
  outline: 0;
  box-shadow: 0 0 12px rgba(0, 170, 255, 0.7);
  border: 1px solid rgba(0, 170, 255, 0.5);
  transition: all 0.2s;
  font-weight: bold;
  font-size: 12px;
}

.circular-key-menu .floating-btn:hover {
  background-color: #2a2a2a;
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.9);
  transform: scale(1.05);
}

.circular-key-menu .floating-btn:active {
  background-color: #333333;
  box-shadow: 0 0 25px rgba(0, 200, 255, 1);
  transform: scale(0.98);
}

.circular-key-menu.active .floating-btn {
  background-color: #333333;
}

.circular-key-menu .items-wrapper {
  padding: 0;
  margin: 0;
}

.circular-key-menu .menu-item {
  position: absolute;
  top: 0.2em;
  right: 0.2em;
  z-index: 52; /* Higher than the menu wrapper but lower than the genre menu */
  text-transform: uppercase;
  pointer-events: auto; /* Ensure menu items are clickable */
  display: block;
  text-decoration: none;
  color: hsl(0, 0%, 100%);
  font-size: 1.1em;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  text-align: center;
  line-height: 2.6em;
  background-color: #1b1b1b;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 12px rgba(0, 170, 255, 0.7);
  border: 1px solid rgba(0, 170, 255, 0.5);
  font-weight: bold;
}

.circular-key-menu .menu-item:hover {
  background-color: #2a2a2a;
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.9);
  transform: scale(1.15) translateZ(0);
  z-index: 10;
  border-color: rgba(0, 200, 255, 0.7);
}

.circular-key-menu .menu-item:active {
  background-color: #333333;
  box-shadow: 0 0 25px rgba(0, 200, 255, 1);
  transform: scale(1.1) translateZ(0);
  z-index: 10;
  border-color: rgba(0, 200, 255, 0.9);
}

.circular-key-menu.active .menu-item {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Position the keys in a circle */
.circular-key-menu.active .menu-item:nth-child(1) {
  transform: translate3d(0, -5em, 0); /* C - 12 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(2) {
  transform: translate3d(-2.5em, -4.3em, 0); /* C# - 1 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(3) {
  transform: translate3d(-4.3em, -2.5em, 0); /* D - 2 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(4) {
  transform: translate3d(-5em, 0, 0); /* D# - 3 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(5) {
  transform: translate3d(-4.3em, 2.5em, 0); /* E - 4 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(6) {
  transform: translate3d(-2.5em, 4.3em, 0); /* F - 5 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(7) {
  transform: translate3d(0, 5em, 0); /* F# - 6 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(8) {
  transform: translate3d(2.5em, 4.3em, 0); /* G - 7 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(9) {
  transform: translate3d(4.3em, 2.5em, 0); /* G# - 8 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(10) {
  transform: translate3d(5em, 0, 0); /* A - 9 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(11) {
  transform: translate3d(4.3em, -2.5em, 0); /* A# - 10 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(12) {
  transform: translate3d(2.5em, -4.3em, 0); /* B - 11 o'clock */
}

/* Selected key styling */
.circular-key-menu .menu-item.selected {
  background-color: #1a4a6e;
  box-shadow: 0 0 20px rgba(0, 170, 255, 0.9);
  transform: scale(1.15) translateZ(0);
  z-index: 15;
  border-color: #00aaff;
}
/* Desk width cap.
   The console is built out of percentages — mixer strips, the 35/45/35 genre
   columns, the tape deck — so on a 1920+ display every section just keeps
   drifting apart and the desk reads as a scattering of panels instead of one
   piece of hardware. Past ~1680px the desk stops growing and centres; the
   gutters fall back to the stage's own #1A1A1A, so it still looks full-bleed.

   Deliberately outside the mobile/tablet range: below the cap nothing changes,
   and the mobile-layout branch never sees this at all. */
@media (min-width: 1681px) {
  .desktop-layout {
    max-width: 1680px;
    margin-inline: auto;
  }
}

/* Same deal vertically. The desk is inline-styled `height: calc(vh*100)` with a
   matching min-height, and min-height BEATS max-height in the CSS box algorithm
   — so the cap only bites if the floor is dropped first. That is the only reason
   for the !important: it is overriding an inline style, not winning a specificity
   fight with another rule.
   The desk stays anchored to the top rather than centring, because the panel band
   hangs off the bottom of the mixer and reads as part of it; floating the whole
   console in the middle of the screen would split that pairing. */
@media (min-height: 1001px) {
  .desktop-layout {
    min-height: 0 !important;
    max-height: 1000px;
  }
}
/* LCD Display Animation - First scroll across the screen */
@keyframes marquee-scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-120%);
  }
}

/* Second animation - Static display */
@keyframes marquee-static {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

/* Combined animation */
.animate-marquee {
  animation: 
    marquee-scroll 8s linear 1,
    marquee-static 5s linear 8s forwards;
}

/* LCD text container and animation */
.lcd-text {
  width: 100%;
  overflow: hidden;
  z-index: 10;
  position: relative;
  height: 14px;
  line-height: 14px;
}

.lcd-text-inner {
  display: inline-block;
  animation:
    marquee-scroll 8s linear 1,
    marquee-static 5s linear 8s forwards;
  padding-right: 10px; /* Space after text */
  font-family: monospace;
  font-size: 12px;
  line-height: 14px;
  color: #8aa9cf !important;
  text-shadow: 0 0 5px rgba(138, 169, 207, 0.7);
  white-space: nowrap;
}

/* Animation for hover state */
.lcd-text-inner.hover-scroll {
  animation: marquee-scroll 8s linear infinite;
}

/* Add a subtle scan line effect */
.lcd-display {
  position: relative;
  background: linear-gradient(to bottom, #0a1a2e, #0f2847);
  border: 1px solid #333333;
  border-radius: 2px;
  height: 32px;
  margin-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 4px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.lcd-display::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}
/* Ensure the mixer and cassette components stay on top of the Spotify menu */
.mixer-container {
  position: relative;
  z-index: 20 !important; /* Higher z-index to ensure it stays on top */
}

/* Ensure all mixer controls stay on top */
.fader-container,
.transport-controls,
.cassette-container,
.track-controls,
.master-controls {
  position: relative;
  z-index: 20 !important;
}

/* Ensure all buttons and interactive elements stay on top */
button, 
.button,
.control,
.slider,
.meter,
.knob {
  position: relative;
  z-index: 25 !important;
}
/* Mobile-specific styles for BeatzController */

/* Custom themed scrollbar styles */
/* For Webkit browsers like Chrome/Safari/Edge */
.mixer-channels-mobile::-webkit-scrollbar {
  height: 6px;
  background-color: #222222;
}

.mixer-channels-mobile::-webkit-scrollbar-thumb {
  background: #663399; /* Purple color matching theme buttons */
  border-radius: 10px;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

.mixer-channels-mobile::-webkit-scrollbar-thumb:hover {
  background: #8A2BE2; /* Lighter purple on hover */
}

.mixer-channels-mobile::-webkit-scrollbar-track {
  background-color: #333333;
  border-radius: 10px;
}

/* For Firefox */
.mixer-channels-mobile {
  scrollbar-width: thin;
  scrollbar-color: #663399 #333333;
}

/* Base mobile styles that apply to screens smaller than 768px */
@media (max-width: 767px) {
  /* Make the main content area take full height and enable vertical scrolling */
  .soundcraft-theme.mobile-layout > div {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  /* Mixer section - horizontal scrolling */
  .mixer-section {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden; /* Strictly prevent vertical scrolling */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1rem;
    padding: 0.5rem 0;
    margin: 0 -0.5rem;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    max-height: 400px; /* Fixed height to match simple mode */
    height: 400px; /* Explicit height */
  }
  
  .mixer-section::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
  }
  
  .mixer-section::-webkit-scrollbar:vertical {
    display: none; /* Explicitly hide vertical scrollbar */
  }
  
  /* Ensure mixer channels have minimum width for touch targets */
  .mixer-channel {
    min-width: 80px;
    scroll-snap-align: start;
    margin: 0 0.25rem;
    flex: 0 0 auto;
  }
  
  /* Bottom controls section - vertical scrolling */
  .bottom-controls-section {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
  }
  /* Make the main container full width */
  .soundcraft-theme.mobile-layout {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.5rem !important;
    overflow-x: hidden;
  }
  
  /* Enhanced mixer channel styles */
  .mixer-channel {
    width: 20vw !important; /* Set width to 20% of viewport width to show 4-5 faders */
    min-width: 80px;
    max-width: 120px;
    min-height: 200px;
    margin: 0 0.5rem 1rem;
    padding: 0.5rem;
    background: rgba(40, 40, 40, 0.8);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  /* Increase touch target sizes */
  button, .btn, .fader-handle {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.75rem !important;
    touch-action: manipulation;
  }
  
  /* Adjust fader heights and make them easier to use on touch */
  .fader-container {
    height: 180px !important;
    margin: 0.75rem auto;
    touch-action: pan-y;
    min-width: 50px;
  }
  
  /* FX fader container for mobile scrolling */
  .fx-fader-container {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0.5rem 0;
    margin: 0.5rem -0.5rem;
  }
  
  /* FX fader styling for mobile */
  .fx-fader-container .WildFader {
    min-width: 60px !important;
    width: 18vw !important;
    max-width: 100px !important;
    scroll-snap-align: start;
    margin: 0 0.25rem;
    flex: 0 0 auto;
  }
  
  /* Ensure fader handles are touch-friendly */
  .fader-handle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 20px !important;
  }
  
  /* Fix LCD display size on mobile */
  .lcd-display {
    display: none !important; /* Completely remove from layout flow */
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important; /* No flex growth or shrinking */
  }
  
  /* Transport controls layout */
  .transport-controls {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 0.5rem;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
  }
  
  .transport-controls::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
  }
  
  .transport-controls > * {
    flex: 0 0 auto;
  }
  
  /* Make buttons more touch-friendly */
  .btn {
    padding: 0.75rem 1rem !important;
    margin: 0.25rem;
    font-size: 1rem;
  }
  
  /* Adjust track controls */
  .track-controls {
    gap: 0.5rem;
    padding: 0.5rem;
  }
  
  /* Improve menu and dropdowns for touch */
  .dropdown-menu {
    position: fixed !important;
    bottom: 60px;
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1000;
    background: #2d2d2d;
    border-radius: 8px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
  }
  
  /* Mobile-responsive menus */
  .recipes-menu, .fx-menu, .sampler-menu {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 80px !important;
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 1050 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  }
  
  /* Ensure menu content is properly sized */
  .recipes-menu > div, .fx-menu > div, .sampler-menu > div {
    padding: 1rem !important;
    height: 100% !important;
    overflow-y: auto !important;
  }
  
  /* Make menu buttons touch-friendly */
  .recipes-menu button, .fx-menu button, .sampler-menu button {
    min-height: 48px !important;
    padding: 0.75rem 1rem !important;
    margin: 0.25rem 0 !important;
    font-size: 16px !important;
  }
  
  /* Style for bottom controls section */
  .bottom-controls {
    padding: 1rem;
    background: #1e1e1e;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    margin-top: 1rem;
  }
  
  /* Fix modals and dialogs */
  .modal-dialog {
    margin: 0.5rem !important;
    width: auto !important;
    max-width: 100% !important;
  }
  
  /* Adjust form controls */
  input, select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    min-height: 44px !important;
  }
  
  /* Prevent text from being too small */
  body {
    -webkit-text-size-adjust: 100%;
  }
  
  /* Hide elements specifically for mobile */
  .desktop-only {
    display: none !important;
  }
  
  /* Show elements specifically for mobile */
  .mobile-only {
    display: block !important;
  }
  
  /* Fix fixed elements */
  .fixed-top, .fixed-bottom {
    position: fixed !important;
    left: 0;
    right: 0;
    z-index: 1030;
  }
  
  /* Adjust padding for fixed elements */
  body { /* Adjust based on your footer height */
    padding-bottom: 70px;
  }
}

/* Tablet and up adjustments */
@media screen and (min-width: 768px) {
  /* Hide mobile-specific elements on desktop */
  .mobile-only {
    display: none !important;
  }
}

/* Utility classes for responsive behavior */
.mobile-stack {
  @media screen and (max-width: 767px) {
    flex-direction: column;
  }
}

.mobile-full-width {
  @media screen and (max-width: 767px) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Prevent horizontal scrolling on mobile */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  height: 100%;
}

/* Ensure the main app container takes full height */
#root, .App {
  height: 100%;
}

/* Add some spacing for the bottom navigation */
.bottom-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #222;
  padding: 0.5rem 0;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

/* Add padding to main content to account for fixed bottom navigation */
.main-content {
  padding-bottom: 70px;
}
/* Mobile-specific styles for BeatzController */

/* Only apply these styles on mobile devices */
@media (max-width: 768px) {
  /* Hide the cassette tape on mobile */
  .mobile-hide {
    display: none !important;
  }
  
  /* Main container adjustments */
  .mobile-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }
  
  /* BPM display at the top */
  .mobile-bpm-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #222222;
    z-index: 1000;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #333333;
  }
  
  /* Mixer section - horizontal scrolling */
  .mobile-mixer-container {
    margin-top: 50px; /* Space for BPM display */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 10px 5px;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    max-height: 400px; /* Fixed height to match simple mode */
    height: 400px; /* Explicit height to prevent vertical growth */
  }
  
  /* Strict vertical scroll prevention */
  .mobile-mixer-container::-webkit-scrollbar {
    height: 6px;
    width: 0; /* Hide vertical scrollbar */
  }
  
  .mobile-mixer-container::-webkit-scrollbar-track:vertical {
    background: transparent;
  }
  
  .mobile-mixer-container::-webkit-scrollbar-thumb:vertical {
    display: none;
  }
  
  /* Adjust fader tracks for mobile */
  .mobile-track {
    display: inline-block;
    vertical-align: top;
    width: 80px;
    margin-right: 10px;
    white-space: normal;
    height: 100%; /* Ensure tracks fill container height */
    max-height: 400px; /* Match container height */
  }
  
  /* Hide master track on mobile */
  .mobile-track.master-track {
    display: none;
  }
  
  /* Transport controls at the bottom */
  .mobile-transport-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #222222;
    border-top: 1px solid #333333;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  /* Adjust fader height for mobile */
  .mobile-track .fader-container {
    height: 200px;
  }
  
  /* Adjust button sizes for mobile */
  .mobile-button {
    padding: 12px !important;
    margin: 0 5px !important;
  }
  
  /* Make sure text is readable on mobile */
  .mobile-track-name {
    font-size: 12px;
    text-align: center;
    margin-bottom: 5px;
    white-space: normal;
    word-break: break-word;
  }
  
  /* Ensure the FX Menu is properly positioned on mobile */
  .fx-menu-container {
    /* Phones size this from the floor up; release the band's top/right or
       top + bottom + height fight each other. */
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60vh;
  }
  
  /* Adjust the buttons row in FX Menu for mobile */
  @media (max-width: 768px) {
    .fx-top-buttons, .fx-bottom-buttons {
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .fx-button {
      margin: 4px;
      min-width: 70px;
    }
  }
}
/* Radio Tile Button Styles */
.radio-tile-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Radio Tile Button Styles */
.radio-tile-button {
  position: relative;
  height: 6.5rem;
  width: 5.5rem;
  margin: 0.4rem;
}

.radio-button {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.radio-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  border: 2px solid #333;
  border-radius: 6px;
  padding: 0.8rem 0.5rem;
  background: linear-gradient(to bottom, #555, #333);
  color: #ddd;
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 2px 6px rgba(0,0,0,0.5),
    0 1px 1px rgba(0,0,0,0.3);
  transition: all 0.12s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* 3D pressed effect for active buttons */
.radio-tile.active {
  background: linear-gradient(to bottom, 
    rgba(var(--primary-color-rgb, 7, 154, 217), 0.9), 
    rgba(var(--primary-color-rgb, 7, 154, 217), 0.7));
  border-color: rgba(var(--primary-color-rgb, 7, 154, 217), 1);
  color: white;
  transform: translateY(2px);
  box-shadow: 
    inset 0 1px 3px rgba(0,0,0,0.3),
    inset 0 -1px 0 rgba(255,255,255,0.1),
    0 1px 2px rgba(0,0,0,0.2);
}

/* Reset button specific styling */
.radio-tile.reset-tile {
  background: linear-gradient(to bottom, #555, #3c0808);
  border-color: #541212;
}

.radio-tile.reset-tile:hover {
  background: linear-gradient(to bottom, #651212, #4d0606);
  border-color: #761818;
}

.radio-tile.reset-tile:active {
  background: linear-gradient(to bottom, #4d0606, #3c0808);
  transform: translateY(2px);
  box-shadow: 
    inset 0 1px 3px rgba(0,0,0,0.4),
    inset 0 -1px 0 rgba(255,255,255,0.1),
    0 1px 2px rgba(0,0,0,0.2);
}

.icon {
  height: 2.8rem;
  width: 2.8rem;
  color: #ddd;
  transition: all 0.15s ease;
  z-index: 2;
}

.radio-tile.active .icon {
  color: white;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.7));
}

.radio-tile-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #bdc3c7;
  transition: all 0.15s ease;
  margin-top: 0.5rem;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

.radio-tile.active .radio-tile-label {
  color: white;
}

/* Optional hover effect */
.radio-tile:not(.active):hover {
  transform: scale(1.05, 1.05);
  box-shadow: 0 0 8px rgba(7, 154, 217, 0.4);
}
/* Recording UI Animations */

/* Right-to-left marquee scrolling for LCD messages */
@keyframes marquee-rtl {
  0% { 
    transform: translateX(100vw); 
  }
  100% { 
    transform: translateX(-100%); 
  }
}

/* Blinking animation for record button */
@keyframes blink-record {
  0% { 
    background-color: #333333;
    color: #ff0000;
  }
  50% { 
    background-color: #ff0000;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
  }
  100% { 
    background-color: #333333;
    color: #ff0000;
  }
}

/* Record button active/recording state */
.recording-active {
  animation: blink-record 1s infinite;
}

/* Transport button dimming when disabled during recording */
button:disabled.transport-disabled {
  opacity: 0.3;
  pointer-events: none;
  filter: grayscale(50%);
}

/* LCD text marquee animation */
.lcd-text-inner.marquee-scrolling {
  animation: marquee-rtl 4s linear infinite;
  white-space: nowrap;
  width: -moz-max-content;
  width: max-content;
}

/* LCD display blinking during recording */
.lcd-display.recording-blink {
  animation: blink-record 2s infinite;
}
.btn-shine {
  display: inline-block;
  color: #fff;
  background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #868686 20%);
  background-position: 0;
  -webkit-background-clip: text; /* impeccable-disable-line gradient-text -- animated nspire wordmark: branding artwork, not a heading or metric */
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  -webkit-text-size-adjust: none;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  font-family: "Poppins", sans-serif;
}

@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
/* Enhanced button feedback for SoundcraftTheme */

/* Target ALL interactive elements within SoundcraftTheme */
.absolute.inset-0.z-20 *,
[data-component-name="SoundcraftTheme"] * {
  -webkit-tap-highlight-color: transparent;
}

/* Target any element that could be a button */
.absolute.inset-0.z-20 button,
.absolute.inset-0.z-20 [role="button"],
.absolute.inset-0.z-20 a,
.absolute.inset-0.z-20 input[type="button"],
.absolute.inset-0.z-20 input[type="submit"],
.absolute.inset-0.z-20 .btn,
.absolute.inset-0.z-20 .button,
.absolute.inset-0.z-20 [class*="btn"],
.absolute.inset-0.z-20 [class*="button"],
.absolute.inset-0.z-20 [onclick],
.absolute.inset-0.z-20 [class*="clickable"],
.absolute.inset-0.z-20 [class*="selectable"],
.absolute.inset-0.z-20 [class*="control"],
.absolute.inset-0.z-20 [class*="toggle"],
.absolute.inset-0.z-20 [class*="switch"] {
  position: relative;
  transition: transform 0.08s ease-out, background-color 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease !important;
}

/* Active state for all interactive elements */
.absolute.inset-0.z-20 button:active,
.absolute.inset-0.z-20 [role="button"]:active,
.absolute.inset-0.z-20 a:active,
.absolute.inset-0.z-20 input[type="button"]:active,
.absolute.inset-0.z-20 input[type="submit"]:active,
.absolute.inset-0.z-20 .btn:active,
.absolute.inset-0.z-20 .button:active,
.absolute.inset-0.z-20 [class*="btn"]:active,
.absolute.inset-0.z-20 [class*="button"]:active,
.absolute.inset-0.z-20 [onclick]:active,
.absolute.inset-0.z-20 [class*="clickable"]:active,
.absolute.inset-0.z-20 [class*="selectable"]:active,
.absolute.inset-0.z-20 [class*="control"]:active,
.absolute.inset-0.z-20 [class*="toggle"]:active,
.absolute.inset-0.z-20 [class*="switch"]:active {
  transform: scale(0.95) !important;
  filter: brightness(0.9) !important;
}

/* Mute buttons - target by class, or attributes */
.absolute.inset-0.z-20 [class*="mute"]:active,
.absolute.inset-0.z-20 [aria-label*="mute" i]:active,
.absolute.inset-0.z-20 [title*="mute" i]:active,
.absolute.inset-0.z-20 [data-*="mute"]:active,
.absolute.inset-0.z-20 .mute:active,
.absolute.inset-0.z-20 .mute-button:active,
.absolute.inset-0.z-20 .bg-red-500:active,
.absolute.inset-0.z-20 .bg-red-600:active,
.absolute.inset-0.z-20 .bg-red-700:active {
  background-color: rgba(255, 50, 50, 0.7) !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7) !important;
  filter: brightness(1.2) saturate(1.2) !important;
}

/* New buttons - target by class, or attributes */
.absolute.inset-0.z-20 [class*="new"]:active,
.absolute.inset-0.z-20 [aria-label*="new" i]:active,
.absolute.inset-0.z-20 [title*="new" i]:active,
.absolute.inset-0.z-20 [data-*="new"]:active,
.absolute.inset-0.z-20 .new:active,
.absolute.inset-0.z-20 .new-button:active,
.absolute.inset-0.z-20 .bg-green-500:active,
.absolute.inset-0.z-20 .bg-green-600:active,
.absolute.inset-0.z-20 .bg-green-700:active {
  background-color: rgba(50, 255, 50, 0.7) !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7) !important;
  filter: brightness(1.2) saturate(1.2) !important;
}

/* Flash effect for all buttons */
@keyframes button-flash {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 0; }
}

/* Add flash effect to buttons when clicked */
.absolute.inset-0.z-20 button:active::after,
.absolute.inset-0.z-20 [role="button"]:active::after,
.absolute.inset-0.z-20 a:active::after,
.absolute.inset-0.z-20 input[type="button"]:active::after,
.absolute.inset-0.z-20 input[type="submit"]:active::after,
.absolute.inset-0.z-20 .btn:active::after,
.absolute.inset-0.z-20 .button:active::after,
.absolute.inset-0.z-20 [class*="btn"]:active::after,
.absolute.inset-0.z-20 [class*="button"]:active::after,
.absolute.inset-0.z-20 [onclick]:active::after,
.absolute.inset-0.z-20 [class*="clickable"]:active::after,
.absolute.inset-0.z-20 [class*="selectable"]:active::after,
.absolute.inset-0.z-20 [class*="control"]:active::after,
.absolute.inset-0.z-20 [class*="toggle"]:active::after,
.absolute.inset-0.z-20 [class*="switch"]:active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: inherit;
  animation: button-flash 0.2s ease;
  pointer-events: none;
  z-index: 1;
}

/* Target specifically for Tailwind classes that might be used */
.absolute.inset-0.z-20 .bg-blue-500:active,
.absolute.inset-0.z-20 .bg-purple-500:active,
.absolute.inset-0.z-20 .bg-yellow-500:active,
.absolute.inset-0.z-20 .bg-orange-500:active,
.absolute.inset-0.z-20 .bg-indigo-500:active,
.absolute.inset-0.z-20 .bg-pink-500:active,
.absolute.inset-0.z-20 .bg-teal-500:active {
  filter: brightness(1.2) !important;
  transform: scale(0.95) !important;
}

/* Make sure the active state is very visible on touch devices */
@media (hover: none) {
  .absolute.inset-0.z-20 button:active,
  .absolute.inset-0.z-20 [role="button"]:active,
  .absolute.inset-0.z-20 a:active,
  .absolute.inset-0.z-20 input[type="button"]:active,
  .absolute.inset-0.z-20 input[type="submit"]:active,
  .absolute.inset-0.z-20 .btn:active,
  .absolute.inset-0.z-20 .button:active,
  .absolute.inset-0.z-20 [class*="btn"]:active,
  .absolute.inset-0.z-20 [class*="button"]:active,
  .absolute.inset-0.z-20 [onclick]:active,
  .absolute.inset-0.z-20 [class*="clickable"]:active,
  .absolute.inset-0.z-20 [class*="selectable"]:active,
  .absolute.inset-0.z-20 [class*="control"]:active,
  .absolute.inset-0.z-20 [class*="toggle"]:active,
  .absolute.inset-0.z-20 [class*="switch"]:active {
    transform: scale(0.9) !important;
  }
  
  .absolute.inset-0.z-20 button:active::after,
  .absolute.inset-0.z-20 [role="button"]:active::after,
  .absolute.inset-0.z-20 a:active::after,
  .absolute.inset-0.z-20 input[type="button"]:active::after,
  .absolute.inset-0.z-20 input[type="submit"]:active::after,
  .absolute.inset-0.z-20 .btn:active::after,
  .absolute.inset-0.z-20 .button:active::after,
  .absolute.inset-0.z-20 [class*="btn"]:active::after,
  .absolute.inset-0.z-20 [class*="button"]:active::after,
  .absolute.inset-0.z-20 [onclick]:active::after,
  .absolute.inset-0.z-20 [class*="clickable"]:active::after,
  .absolute.inset-0.z-20 [class*="selectable"]:active::after,
  .absolute.inset-0.z-20 [class*="control"]:active::after,
  .absolute.inset-0.z-20 [class*="toggle"]:active::after,
  .absolute.inset-0.z-20 [class*="switch"]:active::after {
    background: rgba(255, 255, 255, 0.4);
  }
}
/* Specific CSS targeting for SoundcraftTheme mute and new buttons */

/* Target all buttons in SoundcraftTheme */
.absolute.inset-0.z-20 button,
[data-component-name="SoundcraftTheme"] button {
  position: relative;
  transition: transform 0.08s ease-out, background-color 0.08s ease, box-shadow 0.08s ease !important;
}

/* Active state for all buttons */
.absolute.inset-0.z-20 button:active,
[data-component-name="SoundcraftTheme"] button:active {
  transform: scale(0.95) !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

/* Mute buttons - target common classes and attributes */
.absolute.inset-0.z-20 button[aria-label*="mute" i]:active,
.absolute.inset-0.z-20 button[title*="mute" i]:active,
.absolute.inset-0.z-20 button.mute:active,
.absolute.inset-0.z-20 button.mute-button:active,
.absolute.inset-0.z-20 button[class*="mute"]:active {
  background-color: rgba(255, 50, 50, 0.7) !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7) !important;
}

/* New buttons - target common classes and attributes */
.absolute.inset-0.z-20 button[aria-label*="new" i]:active,
.absolute.inset-0.z-20 button[title*="new" i]:active,
.absolute.inset-0.z-20 button.new:active,
.absolute.inset-0.z-20 button.new-button:active,
.absolute.inset-0.z-20 button[class*="new"]:active {
  background-color: rgba(50, 255, 50, 0.7) !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7) !important;
}

/* Add a flash effect when buttons are clicked */
@keyframes button-flash {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 0; }
}

.absolute.inset-0.z-20 button:active::after,
[data-component-name="SoundcraftTheme"] button:active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: inherit;
  animation: button-flash 0.2s ease;
  pointer-events: none;
}

/* Target common button colors */
.absolute.inset-0.z-20 button.bg-red-500:active,
.absolute.inset-0.z-20 button.bg-red-600:active,
.absolute.inset-0.z-20 button.bg-red-700:active {
  background-color: rgba(255, 50, 50, 0.7) !important;
}

.absolute.inset-0.z-20 button.bg-green-500:active,
.absolute.inset-0.z-20 button.bg-green-600:active,
.absolute.inset-0.z-20 button.bg-green-700:active {
  background-color: rgba(50, 255, 50, 0.7) !important;
}

/* Make sure the active state is very visible on touch devices */
@media (hover: none) {
  .absolute.inset-0.z-20 button:active,
  [data-component-name="SoundcraftTheme"] button:active {
    transform: scale(0.9) !important;
  }
  
  .absolute.inset-0.z-20 button:active::after,
  [data-component-name="SoundcraftTheme"] button:active::after {
    background: rgba(255, 255, 255, 0.4);
  }
}
/* Enhanced button feedback specifically for SoundcraftTheme overlays */

/* Target the clickable overlays */
.absolute.inset-0.z-20 {
  position: relative; /* Ensure the pseudo-element is positioned relative to this */
  transition: transform 0.08s ease-out !important;
}

/* Active state for the overlays */
.absolute.inset-0.z-20:active {
  transform: scale(0.95) !important;
}

/* Active state for the overlays - affect the button beneath */
.absolute.inset-0.z-20:active + button,
.absolute.inset-0.z-20:active ~ button {
  transform: scale(0.95) !important;
  filter: brightness(0.9) !important;
}

/* Mute button specific - the parent div contains both the overlay and the button */
.relative.w-full.mb-1\.5.h-10.cursor-pointer:active button {
  filter: brightness(0.8) contrast(1.2) !important;
  transform: scale(0.95) !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

/* Flash effect for the overlay */
@keyframes overlay-flash {
  0% { background-color: rgba(255, 255, 255, 0); }
  50% { background-color: rgba(255, 255, 255, 0.2); }
  100% { background-color: rgba(255, 255, 255, 0); }
}

/* Add flash effect to overlays when clicked */
.absolute.inset-0.z-20:active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: overlay-flash 0.2s ease;
  pointer-events: none;
  z-index: 1;
  border-radius: 5px;
}

/* Target red buttons (mute buttons) */
.relative.w-full.mb-1\.5.h-10.cursor-pointer:active .bg-red-500,
.relative.w-full.mb-1\.5.h-10.cursor-pointer:active .bg-red-600,
.relative.w-full.mb-1\.5.h-10.cursor-pointer:active .bg-red-700 {
  background-color: rgb(255, 50, 50) !important;
}

/* Target green buttons (new buttons) */
.relative.w-full.mb-1\.5.h-10.cursor-pointer:active .bg-green-500,
.relative.w-full.mb-1\.5.h-10.cursor-pointer:active .bg-green-600,
.relative.w-full.mb-1\.5.h-10.cursor-pointer:active .bg-green-700 {
  background-color: rgb(50, 255, 50) !important;
}

/* Make sure the active state is very visible on touch devices */
@media (hover: none) {
  .absolute.inset-0.z-20:active {
    transform: scale(0.9) !important;
  }
  
  .absolute.inset-0.z-20:active + button,
  .absolute.inset-0.z-20:active ~ button {
    transform: scale(0.9) !important;
  }
  
  .absolute.inset-0.z-20:active::after {
    background-color: rgba(255, 255, 255, 0.3);
  }
}
/* Stylish button row styles */
.stylish-button-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  justify-content: center;
}
.stylish-btn {
  font-size: 1em;
  padding: 10px 18px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  margin: 0 2px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.stylish-btn-neon {
  color: #fff;
  box-shadow: 0 0 8px #0ff, 0 0 16px #0ff;
  text-shadow: 0 0 4px #0ff;
}
.stylish-btn-glass {
  color: #222;
  background: rgba(255,255,255,0.5)!important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  backdrop-filter: blur(2px);
}
.stylish-btn-retro {
  color: #784212;
  background: #ffe6b3!important;
  font-family: monospace;
  border: 2px solid #784212;
}
.stylish-btn-lcd {
  color: #0f0;
  background: #222!important;
  font-family: 'Courier New', monospace;
  border: 1px solid #0f0;
}
.stylish-btn:active {
  transform: scale(0.95);
  box-shadow: 0 0 2px #000;
}
.vocal-genre-button {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #4f4;
  color: #0f0;
  font-family: 'Digital-7', monospace;
  font-size: 14px;
  padding: 6px 10px;
  cursor: pointer;
  text-align: center;
  width: 100%;
  border-radius: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
  transition: all 0.2s ease;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.8);
  position: relative;
  letter-spacing: 1px;
  font-weight: bold;
}

.vocal-genre-button:hover {
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}

.vocal-genre-label {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #0f0;
  font-family: 'Digital-7', monospace;
  font-size: 14px;
  padding: 4px 10px;
  border: 1px solid #4f4;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.8);
  z-index: 1001;
  pointer-events: none;
}

.vocal-genre-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px; /* Fixed width to accommodate all items */
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000; /* Ensure it's above other elements including the key button */
  border: 2px solid #4f4;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.7), 0 0 15px rgba(0, 0, 0, 0.7);
  padding: 5px;
}

.no-scroll {
  overflow: visible;
  max-height: none;
}

.vocal-genre-menu .genre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.era-section {
  margin-bottom: 6px;
  border: 1px solid #444;
  border-radius: 4px;
  overflow: hidden;
}

.era-title {
  font-size: 14px;
  padding: 5px 8px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
}

.genre-items-container {
  padding: 4px;
}

/* 2000's - Futuristic blue/purple */
.era-2000s .era-title {
  background: linear-gradient(to right, #1a237e, #4a148c);
  color: #fff;
  border-bottom: 2px solid #7e57c2;
}

.era-2000s {
  border-color: #7e57c2;
  box-shadow: 0 0 8px rgba(126, 87, 194, 0.3);
}

/* 90's - Vibrant pink/purple */
.era-90s .era-title {
  background: linear-gradient(to right, #880e4f, #4a148c);
  color: #fff;
  border-bottom: 2px solid #e91e63;
}

.era-90s {
  border-color: #e91e63;
  box-shadow: 0 0 8px rgba(233, 30, 99, 0.3);
}

/* 80's - Neon green/blue */
.era-80s .era-title {
  background: linear-gradient(to right, #004d40, #01579b);
  color: #fff;
  border-bottom: 2px solid #00bcd4;
}

.era-80s {
  border-color: #00bcd4;
  box-shadow: 0 0 8px rgba(0, 188, 212, 0.3);
}

/* 70's - Warm orange/brown */
.era-70s .era-title {
  background: linear-gradient(to right, #bf360c, #e65100);
  color: #fff;
  border-bottom: 2px solid #ff9800;
}

.era-70s {
  border-color: #ff9800;
  box-shadow: 0 0 8px rgba(255, 152, 0, 0.3);
}

.genre-item {
  padding: 6px 10px;
  margin: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #ddd;
  border-radius: 3px;
  text-align: center;
  font-weight: 500;
}

/* 2000's items */
.era-2000s .genre-item:hover {
  background: rgba(126, 87, 194, 0.3);
  color: #b39ddb;
  text-shadow: 0 0 5px rgba(179, 157, 219, 0.7);
}

.era-2000s .genre-item.selected {
  background: rgba(126, 87, 194, 0.2);
  color: #b39ddb;
  text-shadow: 0 0 5px rgba(179, 157, 219, 0.7);
  border: 1px solid #7e57c2;
}

/* 90's items */
.era-90s .genre-item:hover {
  background: rgba(233, 30, 99, 0.3);
  color: #f48fb1;
  text-shadow: 0 0 5px rgba(244, 143, 177, 0.7);
}

.era-90s .genre-item.selected {
  background: rgba(233, 30, 99, 0.2);
  color: #f48fb1;
  text-shadow: 0 0 5px rgba(244, 143, 177, 0.7);
  border: 1px solid #e91e63;
}

/* 80's items */
.era-80s .genre-item:hover {
  background: rgba(0, 188, 212, 0.3);
  color: #80deea;
  text-shadow: 0 0 5px rgba(128, 222, 234, 0.7);
}

.era-80s .genre-item.selected {
  background: rgba(0, 188, 212, 0.2);
  color: #80deea;
  text-shadow: 0 0 5px rgba(128, 222, 234, 0.7);
  border: 1px solid #00bcd4;
}

/* 70's items */
.era-70s .genre-item:hover {
  background: rgba(255, 152, 0, 0.3);
  color: #ffcc80;
  text-shadow: 0 0 5px rgba(255, 204, 128, 0.7);
}

.era-70s .genre-item.selected {
  background: rgba(255, 152, 0, 0.2);
  color: #ffcc80;
  text-shadow: 0 0 5px rgba(255, 204, 128, 0.7);
  border: 1px solid #ff9800;
}

/* Custom scrollbar for the menu */
.vocal-genre-menu::-webkit-scrollbar {
  width: 6px;
}

.vocal-genre-menu::-webkit-scrollbar-track {
  background: #111;
}

.vocal-genre-menu::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}

.vocal-genre-menu::-webkit-scrollbar-thumb:hover {
  background: #444;
}
/* Wildly different styles for each variant */
/* Base Styles */
.wild-fader {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 50px; /* Skinnier base width */
  margin: 0 6px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.fader-input {
  /* Replacing deprecated slider-vertical with modern alternative */
  writing-mode: vertical-lr;
  direction: rtl;
  /* Firefox legacy support */
  writing-mode: bt-lr;
  width: 40px; /* Styles for WildFader component */
  pointer-events: auto !important; /* Make sure input is interactable */
  z-index: 200 !important;
  cursor: pointer !important;
  opacity: 0; /* Hide visually but keep functional */
  touch-action: manipulation; /* Better touch support */
}

.fader-label {
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  margin-top: 6px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
  transform-origin: center center;
  backface-visibility: hidden;
}

@keyframes wildLabelGlitch {
  0%, 100% { transform: translateX(0) skewX(0deg); }
  25% { transform: translateX(-1px) skewX(-4deg); }
  50% { transform: translateX(1px) skewX(3deg); }
  75% { transform: translateX(-0.5px) skewX(-2deg); }
}

@keyframes wildLabelPunch {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.08); }
  70% { transform: scale(0.98); }
}

@keyframes wildLabelFocus {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

@keyframes wildLabelPixelFlicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.88; transform: scale(1.03); }
}

@keyframes wildLabelWhoa {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-2px); }
}

@keyframes wildLabelStutter {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-1px); }
  40% { transform: translateX(1px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

@keyframes wildLabelFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(180deg); }
}

@keyframes wildLabelChop {
  0% { clip-path: inset(0 0 0 0); }
  50% { clip-path: inset(0 0 45% 0); }
  100% { clip-path: inset(45% 0 0 0); }
}

@keyframes wildLabelSpectrum {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes wildLabelSlow {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50% { transform: scaleX(0.94) scaleY(1.12); }
}

@keyframes wildLabelWave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-1deg); }
  75% { transform: translateY(2px) rotate(1deg); }
}

@keyframes wildLabelDelay {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(2px); opacity: 0.88; }
}

@keyframes wildLabelFilter {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes wildLabelRise {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes wildLabelDrown {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(3px); opacity: 0.8; }
}

@keyframes wildLabelFlange {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1.5px); }
}

@keyframes wildLabelChip {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.08) translateY(-2px); }
}

@keyframes wildLabelPitchDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.fader-value {
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}

/* Different fader variants */
.wild-fader-neon .fader-label { 
  color: #ff00ff; 
  text-shadow: 0 0 5px #ff00ff; 
  animation: neonPulse 2s infinite;
}

.wild-fader-glass .fader-label { 
  color: #00f7ff; 
  text-shadow: 0 0 5px rgba(0, 247, 255, 0.7); 
  animation: trackGlow 2s infinite;
}

.wild-fader-retro .fader-label { 
  color: #ffcc00; 
  font-family: 'Courier New', monospace; 
  animation: retro-scan 2s infinite;
}

.wild-fader-lcd .fader-label { 
  color: #33ff33; 
  font-family: 'Courier New', monospace; 
  animation: lcd-flicker 2s infinite;
}

.wild-fader-wave .fader-label { 
  color: #0088ff; 
  animation: textFlicker 2s infinite;
}

.wild-fader-vintage .fader-label { 
  color: #ddbb99; 
  font-family: 'Times New Roman', serif; 
  animation: textGlitch 2s infinite;
}

.wild-fader-cosmic .fader-label { 
  color: #aa55ff; 
  animation: textDistort 2s infinite;
}

.wild-fader-candy .fader-label { 
  color: #ff55aa; 
  animation: colorShift 2s infinite;
}

.wild-fader-industrial .fader-label { 
  color: #aaaaaa; 
  animation: industrial-noise 2s infinite;
}

.wild-fader-sunset .fader-label { 
  color: #ff7700; 
  animation: thumbTwitch 2s infinite;
}

.wild-fader-jade .fader-label { 
  color: #00bb99; 
  animation: trackGlow 2s infinite;
}

.wild-fader-circuit .fader-label { 
  color: #44ff44; 
  animation: lcd-flicker 2s infinite;
}

.wild-fader-crimson .fader-label { 
  color: #ff3333; 
  animation: neonPulse 2s infinite;
}

.wild-fader-chrome .fader-label { 
  color: #dddddd; 
  animation: textFlicker 2s infinite;
}

.wild-fader-neon-blue .fader-label { 
  color: #0077ff; 
  animation: textGlitch 2s infinite;
}

/* Variant-specific track styles */
.wild-fader-neon .fader-track { 
  box-shadow: 0 0 5px #ff00ff; 
  animation: trackGlow 2s infinite;
}

.wild-fader-lcd .fader-track { 
  background: #001100 !important; 
  border: 1px solid #00ff00; 
  animation: lcd-flicker 2s infinite;
}

.wild-fader-candy .fader-track { 
  background: linear-gradient(45deg, #ff55aa, #ff88cc) !important; 
  animation: colorShift 2s infinite;
}

.wild-fader-industrial .fader-track { 
  background: #444444 !important; 
  border: 2px solid #666666; 
  animation: industrial-noise 2s infinite;
}

.wild-fader-circuit .fader-track { 
  background: #001100 !important; 
  border: 1px dotted #00ff00; 
  animation: lcd-flicker 2s infinite;
}

/* Animation keyframes */
@keyframes trackGlow {
  0% { box-shadow: 0 0 5px rgba(0, 247, 255, 0.7); }
  50% { box-shadow: 0 0 15px rgba(255, 0, 255, 0.9); }
  100% { box-shadow: 0 0 5px rgba(0, 247, 255, 0.7); }
}

@keyframes thumbTwitch {
  0% { transform: translateY(-50%) scale(1); }
  25% { transform: translateY(-50%) scale(1.05); }
  50% { transform: translateY(-50%) scale(1); }
  75% { transform: translateY(-50%) scale(0.95); }
  100% { transform: translateY(-50%) scale(1); }
}

@keyframes textFlicker {
  0% { opacity: 1.0; }
  3% { opacity: 0.4; }
  6% { opacity: 1.0; }
  7% { opacity: 0.4; }
  8% { opacity: 1.0; }
  9% { opacity: 0.4; }
  10% { opacity: 1.0; }
  100% { opacity: 1.0; }
}

@keyframes textGlitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: skew(2deg); }
  80% { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}

@keyframes textDistort {
  0% { letter-spacing: 0; }
  25% { letter-spacing: 1px; }
  50% { letter-spacing: -1px; }
  75% { letter-spacing: 2px; }
  100% { letter-spacing: 0; }
}

@keyframes colorShift {
  0% { color: #00f7ff; }
  30% { color: #ff00ff; }
  70% { color: #ffff00; }
  100% { color: #00f7ff; }
}

@keyframes neonPulse {
  0% { text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff; }
  50% { text-shadow: 0 0 15px #ff00ff, 0 0 25px #ff00ff; }
  100% { text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff; }
}

/* Stutter animations */
@keyframes visual-stutter {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@keyframes thumb-stutter {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(-3px) translateY(1px); }
  75% { transform: translateX(3px) translateY(-1px); }
}

@keyframes text-stutter {
  0%, 100% { transform: translateX(0); opacity: 1; }
  25% { transform: translateX(-1px); opacity: 0.8; }
  75% { transform: translateX(1px); opacity: 0.9; }
}

/* LCD flicker effect for SP1200 */
@keyframes lcd-flicker {
  0%, 100% { opacity: 1; }
  10% { opacity: 0.8; }
  20% { opacity: 0.9; }
  30% { opacity: 1; }
  40% { opacity: 0.8; }
  50% { opacity: 1; }
  60% { opacity: 0.9; }
  70% { opacity: 1; }
  80% { opacity: 0.8; }
  90% { opacity: 0.9; }
}

@keyframes retro-scan {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

@keyframes lcd-flicker {
  0% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.8; }
  94% { opacity: 1; }
  95% { opacity: 0.9; }
  96% { opacity: 1; }
  97% { opacity: 0.9; }
  98% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes industrial-noise {
  0% { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E"); }
  100% { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E"); }
}

/* NEON: Futuristic laser beam with intensity indicator */
.wild-fader-neon {
  width: 55px;
}

.wild-fader-neon .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 70px;
  height: 240px;
  background: linear-gradient(to bottom, 
    rgba(0,0,0,0.8) 0%, 
    rgba(0,0,0,0.4) 50%,
    rgba(0,0,0,0.8) 100%);
  border: 4px solid #333;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-neon .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 10px, rgba(0,255,255,0.1) 10px, rgba(0,255,255,0.1) 20px);
  z-index: 1;
}

.wild-fader-neon .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 66px;
  height: 30px;
  background: linear-gradient(to right, #00f7ff 0%, #ffffff 50%, #00f7ff 100%);
  border-radius: 15px;
  border: 2px solid white;
  box-shadow: 0 0 30px #0ff, 0 0 10px #fff;
  cursor: pointer;
  z-index: 3;
  position: relative;
}

.wild-fader-neon .fader-label {
  color: #00f7ff;
  font-size: 1.2em;
  text-transform: uppercase;
  text-shadow: 0 0 10px #00f7ff, 0 0 5px #fff;
  letter-spacing: 2px;
}

/* GLASS: 3D rotary knob with circular interface */
.wild-fader-glass {
  width: 58px;
  height: 300px;
}

.wild-fader-glass .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, 
    #fff 0%, 
    rgba(255,255,255,0.5) 30%, 
    rgba(100,150,255,0.2) 60%, 
    rgba(50,100,255,0.4) 100%);
  border: 4px solid rgba(255,255,255,0.8);
  box-shadow: 0 8px 32px rgba(50,100,255,0.3), 0 4px 8px rgba(0,0,0,0.3);
  transform: rotate(90deg);
  cursor: grab;
  margin-top: 40px;
}

.wild-fader-glass .fader-input:active {
  cursor: grabbing;
}

.wild-fader-glass .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 40px;
  background: linear-gradient(to right, #4a6eff, #fff);
  border-radius: 5px;
  border: 1px solid white;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  margin-top: -15px;
  cursor: grab;
}

.wild-fader-glass .fader-label {
  color: rgba(255,255,255,0.9);
  font-style: italic;
  margin-top: 40px;
  font-size: 1.1em;
  text-shadow: 0 0 10px rgba(70,140,255,0.8);
}

/* RETRO: Tape machine style vertical VU meter fader */
.wild-fader-retro {
  width: 54px;
}

.wild-fader-retro .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 80px;
  height: 200px;
  background: #241c11;
  border: 6px solid #784212;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 5px 0 #5d3307;
  position: relative;
  overflow: hidden;
}

.wild-fader-retro .fader-input::before {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  height: 190px;
  background: repeating-linear-gradient(to bottom, 
    #5d3307 0, #5d3307 5px, 
    #7b5a2b 5px, #7b5a2b 10px, 
    #5d3307 10px, #5d3307 15px,
    #7b5a2b 15px, #7b5a2b 20px);
  z-index: 1;
}

.wild-fader-retro .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 40px;
  background: linear-gradient(to bottom, #f5b041 0%, #fffbe6 90%);
  border: 3px solid #784212;
  border-radius: 6px;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  position: relative;
  z-index: 2;
}

.wild-fader-retro .fader-label {
  color: #f5b041;
  font-family: 'Courier New', monospace;
  font-size: 1.2em;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #000;
  font-weight: bold;
  margin-top: 10px;
}

/* LCD: Sci-fi touchscreen control with value display */
.wild-fader-lcd {
  width: 52px;
}

.wild-fader-lcd .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 80px;
  height: 240px;
  background: #000;
  border: 4px solid #222;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,255,0,0.5), inset 0 0 10px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-lcd .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(to bottom, 
      rgba(0,255,0,0.1) 0%, 
      rgba(0,255,0,0.05) 50%,
      rgba(0,255,0,0.1) 100%),
    repeating-linear-gradient(to bottom, 
      rgba(0,255,0,0.05) 0, 
      rgba(0,255,0,0.05) 1px, 
      transparent 1px, 
      transparent 5px);
  z-index: 1;
}

.wild-fader-lcd .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 76px;
  height: 50px;
  background: linear-gradient(to bottom, #0f0 0%, #050 100%);
  border-radius: 4px;
  border: 2px solid #0f0;
  box-shadow: 0 0 15px #0f0, 0 0 5px #fff;
  position: relative;
  z-index: 2;
}

.wild-fader-lcd .fader-label {
  color: #0f0;
  font-family: 'Courier New', monospace;
  font-size: 1.2em;
  text-transform: uppercase;
  text-shadow: 0 0 10px #0f0;
  letter-spacing: 1px;
}

/* WAVE: Water-fill liquid slider with waves */
.wild-fader-wave {
  width: 50px;
}

.wild-fader-wave .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 70px;
  height: 230px;
  background: #00151f;
  border: 3px solid #0af;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0,160,255,0.4), inset 0 0 10px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-wave .fader-input::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: linear-gradient(to bottom, 
    rgba(0,170,255,0.7) 0%, 
    rgba(0,120,255,0.9) 100%);
  border-radius: 0 0 12px 12px;
  z-index: 1;
  /* impeccable-disable-next-line layout-transition -- inert: this ::before is declared height:0% and nothing ever changes it, so the transition never fires */
  transition: height 0.3s ease-in-out;
  animation: wave 2s infinite ease-in-out;
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.wild-fader-wave .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 64px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border: 2px solid #0af;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,170,255,0.8), inset 0 0 20px rgba(0,170,255,0.5);
  position: relative;
  z-index: 2;
}

.wild-fader-wave .fader-label {
  color: #0af;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0,170,255,0.8);
  margin-top: 10px;
}

/* VINTAGE: Warm wood and brass with markers */
.wild-fader-vintage {
  width: 45px;
}

.wild-fader-vintage .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 35px;
  height: 180px;
  background: linear-gradient(to right, #8B4513 0%, #A0522D 50%, #8B4513 100%);
  border: 2px solid #B8860B;
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5), 2px 2px 4px rgba(0,0,0,0.2);
  position: relative;
}

.wild-fader-vintage .fader-input::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 5px;
  bottom: 5px;
  background: repeating-linear-gradient(to bottom, 
    transparent 0, transparent 15px, 
    #D2B48C 15px, #D2B48C 16px);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}

.wild-fader-vintage .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 33px;
  height: 20px;
  background: linear-gradient(to bottom, #D4AF37 0%, #B8860B 100%);
  border-radius: 2px;
  border: 1px solid #FFD700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-vintage .fader-label {
  color: #D4AF37;
  font-family: 'Times New Roman', serif;
  font-size: 1em;
  font-weight: normal;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
}

/* COSMIC: Purple galaxy with stars */
.wild-fader-cosmic {
  width: 48px;
}

.wild-fader-cosmic .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 38px;
  height: 190px;
  background: linear-gradient(to bottom, 
    #0b0033 0%, 
    #1a0061 40%, 
    #4b0082 70%, 
    #9370DB 100%);
  border: 1px solid #8A2BE2;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(138,43,226,0.5), inset 0 0 20px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-cosmic .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(1px 1px at 10px 10px, white 100%, transparent),
    radial-gradient(1px 1px at 20px 50px, white 100%, transparent),
    radial-gradient(2px 2px at 30px 100px, white 100%, transparent),
    radial-gradient(1px 1px at 10px 150px, white 100%, transparent);
  z-index: 1;
  opacity: 0.8;
}

.wild-fader-cosmic .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 25px;
  background: radial-gradient(circle at center, white 0%, #9370DB 40%, #4b0082 100%);
  border-radius: 8px;
  border: 1px solid #8A2BE2;
  box-shadow: 0 0 10px rgba(255,255,255,0.8), 0 0 20px rgba(138,43,226,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-cosmic .fader-label {
  color: #9370DB;
  font-family: 'Arial', sans-serif; /* impeccable-disable-line overused-font -- label face on an alternate fader skin */
  font-size: 1em;
  font-style: italic;
  text-shadow: 0 0 5px #8A2BE2, 0 0 10px rgba(255,255,255,0.5);
}

/* CANDY: Pink and sweet with a striped pattern */
.wild-fader-candy {
  width: 46px;
}

.wild-fader-candy .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 36px;
  height: 185px;
  background: linear-gradient(to right, #FF69B4 0%, #FFB6C1 50%, #FF69B4 100%);
  border: 2px solid #FF1493;
  border-radius: 25px;
  box-shadow: 0 0 10px rgba(255,20,147,0.6), inset 0 0 5px rgba(255,255,255,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-candy .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, 
    transparent 0, transparent 10px, 
    rgba(255,255,255,0.2) 10px, rgba(255,255,255,0.2) 20px);
  z-index: 1;
}

.wild-fader-candy .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 34px;
  background: radial-gradient(circle at center, white 0%, #FF1493 100%);
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 10px #FF1493;
  position: relative;
  z-index: 2;
}

.wild-fader-candy .fader-label {
  color: #FF1493;
  font-family: 'Comic Sans MS', cursive;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255,255,255,0.8);
}

/* INDUSTRIAL: Metal and rivets with a grungy look */
.wild-fader-industrial {
  width: 50px;
}

.wild-fader-industrial .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 40px;
  height: 195px;
  background: linear-gradient(to right, 
    #333 0%, 
    #777 20%, 
    #999 40%,
    #777 60%,
    #333 100%);
  border: 4px solid #111;
  border-radius: 0;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 2px 2px 4px rgba(0,0,0,0.4);
  position: relative;
}

.wild-fader-industrial .fader-input::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 10px;
  width: 8px;
  height: 8px;
  background: #333;
  border: 1px solid #111;
  border-radius: 50%;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
  z-index: 2;
}

.wild-fader-industrial .fader-input::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 10px;
  width: 8px;
  height: 8px;
  background: #333;
  border: 1px solid #111;
  border-radius: 50%;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
  z-index: 2;
}

.wild-fader-industrial .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  height: 20px;
  background: linear-gradient(to bottom, #AAA 0%, #666 100%);
  border: 2px solid #111;
  border-radius: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.8);
  position: relative;
  z-index: 3;
}

.wild-fader-industrial .fader-label {
  color: #AAA;
  font-family: 'Impact', sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #000;
}

/* SUNSET: Warm orange to red gradient */
.wild-fader-sunset {
  width: 46px;
}

.wild-fader-sunset .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 36px;
  height: 185px;
  background: linear-gradient(to bottom, 
    #FF4500 0%, 
    #FF8C00 25%, 
    #FFA500 50%, 
    #FF6347 75%, 
    #FF0000 100%);
  border: 2px solid #FF4500;
  border-radius: 18px;
  box-shadow: 0 0 15px rgba(255,69,0,0.5), inset 0 0 10px rgba(255,255,255,0.2);
  position: relative;
  overflow: hidden;
}

.wild-fader-sunset .fader-input::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: radial-gradient(ellipse at bottom, rgba(255,69,0,0.4) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.wild-fader-sunset .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 22px;
  background: linear-gradient(to bottom, #FFFF00 0%, #FF8C00 100%);
  border: 1px solid #FF4500;
  border-radius: 11px;
  box-shadow: 0 0 10px rgba(255,69,0,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-sunset .fader-label {
  color: #FF4500;
  font-family: 'Verdana', sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255,255,0,0.5);
}

/* JADE: Green gemstone style with facets */
.wild-fader-jade {
  width: 44px;
}

.wild-fader-jade .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 34px;
  height: 180px;
  background: linear-gradient(135deg, 
    #004d00 0%, 
    #00802b 20%, 
    #00cc66 50%, 
    #00802b 80%, 
    #004d00 100%);
  border: 2px solid #006633;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0,153,76,0.5), inset 0 0 10px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

.wild-fader-jade .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent 0%, 
    rgba(255,255,255,0.1) 25%, 
    transparent 50%, 
    rgba(255,255,255,0.1) 75%, 
    transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.wild-fader-jade .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 26px;
  background: linear-gradient(to bottom, #00e673 0%, #008040 100%);
  border: 1px solid #006633;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0,230,115,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-jade .fader-label {
  color: #00cc66;
  font-family: 'Georgia', serif;
  font-size: 1em;
  font-style: italic;
  text-shadow: 0 0 5px rgba(0,204,102,0.5);
}

/* CIRCUIT: Tech-inspired circuit board pattern */
.wild-fader-circuit {
  width: 45px;
}

.wild-fader-circuit .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 35px;
  height: 190px;
  background: #001a00;
  border: 2px solid #00ff00;
  border-radius: 0;
  box-shadow: 0 0 10px rgba(0,255,0,0.5), inset 0 0 8px rgba(0,255,0,0.2);
  position: relative;
  overflow: hidden;
}

/* impeccable-disable-next-line codex-grid-background -- the grid IS the circuit-board fader skin, not a decorative backdrop */
.wild-fader-circuit .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 49%, #00ff00 49%, #00ff00 51%, transparent 51%),
    linear-gradient(0deg, transparent 49%, #00ff00 49%, #00ff00 51%, transparent 51%),
    radial-gradient(circle at 12px 30px, #00ff00 0%, #00ff00 2px, transparent 3px),
    radial-gradient(circle at 22px 60px, #00ff00 0%, #00ff00 2px, transparent 3px),
    radial-gradient(circle at 12px 90px, #00ff00 0%, #00ff00 2px, transparent 3px),
    radial-gradient(circle at 22px 120px, #00ff00 0%, #00ff00 2px, transparent 3px),
    radial-gradient(circle at 12px 150px, #00ff00 0%, #00ff00 2px, transparent 3px);
  background-size: 35px 190px, 35px 190px, auto, auto, auto, auto, auto;
  opacity: 0.3;
  z-index: 1;
  pointer-events: none;
}

.wild-fader-circuit .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 33px;
  height: 18px;
  background: #001a00;
  border: 2px solid #00ff00;
  border-radius: 0;
  box-shadow: 0 0 10px #00ff00, inset 0 0 5px #00ff00;
  position: relative;
  z-index: 2;
}

.wild-fader-circuit .fader-label {
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 8px #00ff00;
}

/* CRIMSON: Deep red velvet with gold accents */
.wild-fader-crimson {
  width: 46px;
}

.wild-fader-crimson .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 36px;
  height: 185px;
  background: linear-gradient(to right, #660000 0%, #990000 50%, #660000 100%);
  border: 2px solid #800000;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(102,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}

.wild-fader-crimson .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(to bottom, 
    transparent 0, transparent 20px, 
    rgba(204,0,0,0.4) 20px, rgba(204,0,0,0.4) 21px);
  z-index: 1;
  pointer-events: none;
}

.wild-fader-crimson .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 28px;
  background: linear-gradient(to bottom, #d4af37 0%, #b8860b 100%);
  border: 1px solid #ffd700;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(212,175,55,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-crimson .fader-label {
  color: #d4af37;
  font-family: 'Palatino Linotype', serif;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 1px 1px 2px #660000;
}

/* CHROME: Polished metal with reflective surface */
.wild-fader-chrome {
  width: 48px;
}

.wild-fader-chrome .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 38px;
  height: 190px;
  background: linear-gradient(to right, 
    #666 0%, 
    #ccc 30%, 
    #fff 50%, 
    #ccc 70%, 
    #666 100%);
  border: 2px solid #888;
  border-radius: 6px;
  box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
}

.wild-fader-chrome .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    transparent 0%, 
    transparent 40%, 
    rgba(255,255,255,0.5) 45%, 
    rgba(255,255,255,0.5) 55%, 
    transparent 60%, 
    transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.wild-fader-chrome .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 24px;
  background: linear-gradient(to bottom, #eee 0%, #999 100%);
  border: 1px solid #666;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  position: relative;
  z-index: 2;
}

.wild-fader-chrome .fader-label {
  color: #333;
  font-family: 'Arial', sans-serif; /* impeccable-disable-line overused-font -- label face on an alternate fader skin */
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* NEON-BLUE: Electric blue neon light style */
.wild-fader-neon-blue {
  width: 45px;
}

.wild-fader-neon-blue .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 35px;
  height: 180px;
  background: #000033;
  border: 2px solid #0066ff;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0,102,255,0.8), inset 0 0 15px rgba(0,102,255,0.3);
  position: relative;
  overflow: hidden;
}

.wild-fader-neon-blue .fader-input::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #0066ff;
  box-shadow: 0 0 15px 3px #0066ff;
  z-index: 1;
  pointer-events: none;
}

.wild-fader-neon-blue .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 33px;
  height: 20px;
  background: rgba(0,30,60,0.7);
  border: 2px solid #0099ff;
  border-radius: 12px;
  box-shadow: 0 0 15px #0099ff, inset 0 0 8px #0099ff;
  position: relative;
  z-index: 2;
}

.wild-fader-neon-blue .fader-label {
  color: #0099ff;
  font-family: 'Segoe UI', sans-serif;
  font-size: 1em;
  font-weight: normal;
  text-shadow: 0 0 10px #0099ff, 0 0 20px #0099ff;
}

/* ===== FX FADER ANIMATIONS FOR DESKTOP THEME ===== */

.fx-faders-grid .fx-fader-item.fader-active .wild-fader-label {
  font-weight: bold !important;
  text-shadow: 0 0 8px currentColor !important;
  transform: scale(1.05) !important;
  transition: all 0.2s ease-in-out !important;
}
/*
  TAILWIND UTILITIES FOR THE GRAFTED PANELS.

  Tailwind only emits the classes it saw at build time. The frozen bundle's
  stylesheet therefore contains exactly the utilities the OLD app used — and
  the rebuilt FX faceplates use classes that app never did. Grafted in without
  this, a face mounts with correct DOM, loads its own chunk, and draws as two
  enormous shapes with no layout, which reads as a broken graft and is really
  a missing stylesheet.

  UTILITIES ONLY, deliberately. `base` is a global reset and `components` are
  the app's own layer; both already exist on the page and re-emitting them
  would have our copy land last and quietly restyle the flat studio around us.
  Utilities are single-class rules with the same name and the same
  declarations in both copies, so a duplicate is a no-op and a new one is the
  whole point of this file.
*/
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}
.pointer-events-none {
    pointer-events: none
}
.pointer-events-auto {
    pointer-events: auto
}
.\!visible {
    visibility: visible !important
}
.visible {
    visibility: visible
}
.invisible {
    visibility: hidden
}
.collapse {
    visibility: collapse
}
.static {
    position: static
}
.fixed {
    position: fixed
}
.absolute {
    position: absolute
}
.\!relative {
    position: relative !important
}
.relative {
    position: relative
}
.sticky {
    position: sticky
}
.-inset-\[10\%\] {
    inset: -10%
}
.inset-0 {
    inset: 0px
}
.inset-x-0 {
    left: 0px;
    right: 0px
}
.inset-x-\[-3px\] {
    left: -3px;
    right: -3px
}
.inset-x-\[14\%\] {
    left: 14%;
    right: 14%
}
.inset-x-\[16px\] {
    left: 16px;
    right: 16px
}
.inset-x-\[1px\] {
    left: 1px;
    right: 1px
}
.inset-x-\[2px\] {
    left: 2px;
    right: 2px
}
.inset-x-\[30px\] {
    left: 30px;
    right: 30px
}
.inset-y-0 {
    top: 0px;
    bottom: 0px
}
.inset-y-\[2px\] {
    top: 2px;
    bottom: 2px
}
.inset-y-\[3px\] {
    top: 3px;
    bottom: 3px
}
.inset-y-\[4px\] {
    top: 4px;
    bottom: 4px
}
.inset-y-\[5px\] {
    top: 5px;
    bottom: 5px
}
.-bottom-0 {
    bottom: -0px
}
.-bottom-0\.5 {
    bottom: -0.125rem
}
.-bottom-1 {
    bottom: -0.25rem
}
.-bottom-12 {
    bottom: -3rem
}
.-bottom-\[15px\] {
    bottom: -15px
}
.-bottom-\[2px\] {
    bottom: -2px
}
.-left-12 {
    left: -3rem
}
.-left-24 {
    left: -6rem
}
.-left-\[12\%\] {
    left: -12%
}
.-left-\[1px\] {
    left: -1px
}
.-left-\[4px\] {
    left: -4px
}
.-right-0 {
    right: -0px
}
.-right-0\.5 {
    right: -0.125rem
}
.-right-1 {
    right: -0.25rem
}
.-right-12 {
    right: -3rem
}
.-right-\[3px\] {
    right: -3px
}
.-top-0 {
    top: -0px
}
.-top-0\.5 {
    top: -0.125rem
}
.-top-1 {
    top: -0.25rem
}
.-top-12 {
    top: -3rem
}
.-top-\[1px\] {
    top: -1px
}
.-top-\[4px\] {
    top: -4px
}
.-top-\[5px\] {
    top: -5px
}
.-top-\[6px\] {
    top: -6px
}
.bottom-0 {
    bottom: 0px
}
.bottom-0\.5 {
    bottom: 0.125rem
}
.bottom-1 {
    bottom: 0.25rem
}
.bottom-1\.5 {
    bottom: 0.375rem
}
.bottom-1\/4 {
    bottom: 25%
}
.bottom-10 {
    bottom: 2.5rem
}
.bottom-12 {
    bottom: 3rem
}
.bottom-16 {
    bottom: 4rem
}
.bottom-2 {
    bottom: 0.5rem
}
.bottom-24 {
    bottom: 6rem
}
.bottom-3 {
    bottom: 0.75rem
}
.bottom-4 {
    bottom: 1rem
}
.bottom-\[-18\%\] {
    bottom: -18%
}
.bottom-\[-1px\] {
    bottom: -1px
}
.bottom-\[-5rem\] {
    bottom: -5rem
}
.bottom-\[1\.5px\] {
    bottom: 1.5px
}
.bottom-\[16px\] {
    bottom: 16px
}
.bottom-\[1px\] {
    bottom: 1px
}
.bottom-\[22px\] {
    bottom: 22px
}
.bottom-\[2px\] {
    bottom: 2px
}
.bottom-\[3px\] {
    bottom: 3px
}
.bottom-\[4px\] {
    bottom: 4px
}
.bottom-\[5px\] {
    bottom: 5px
}
.bottom-\[6px\] {
    bottom: 6px
}
.bottom-\[7px\] {
    bottom: 7px
}
.bottom-\[9px\] {
    bottom: 9px
}
.left-0 {
    left: 0px
}
.left-0\.5 {
    left: 0.125rem
}
.left-1 {
    left: 0.25rem
}
.left-1\.5 {
    left: 0.375rem
}
.left-1\/2 {
    left: 50%
}
.left-14 {
    left: 3.5rem
}
.left-2 {
    left: 0.5rem
}
.left-3 {
    left: 0.75rem
}
.left-4 {
    left: 1rem
}
.left-5 {
    left: 1.25rem
}
.left-7 {
    left: 1.75rem
}
.left-\[-4px\] {
    left: -4px
}
.left-\[1\%\] {
    left: 1%
}
.left-\[10\%\] {
    left: 10%
}
.left-\[10px\] {
    left: 10px
}
.left-\[112px\] {
    left: 112px
}
.left-\[12\%\] {
    left: 12%
}
.left-\[13px\] {
    left: 13px
}
.left-\[14\%\] {
    left: 14%
}
.left-\[14px\] {
    left: 14px
}
.left-\[15px\] {
    left: 15px
}
.left-\[16px\] {
    left: 16px
}
.left-\[17px\] {
    left: 17px
}
.left-\[1px\] {
    left: 1px
}
.left-\[2\%\] {
    left: 2%
}
.left-\[22px\] {
    left: 22px
}
.left-\[27\%\] {
    left: 27%
}
.left-\[2px\] {
    left: 2px
}
.left-\[30\%\] {
    left: 30%
}
.left-\[3px\] {
    left: 3px
}
.left-\[42px\] {
    left: 42px
}
.left-\[44px\] {
    left: 44px
}
.left-\[4px\] {
    left: 4px
}
.left-\[50\%\] {
    left: 50%
}
.left-\[59\%\] {
    left: 59%
}
.left-\[5px\] {
    left: 5px
}
.left-\[6px\] {
    left: 6px
}
.left-\[7px\] {
    left: 7px
}
.left-\[8\.5px\] {
    left: 8.5px
}
.left-\[8px\] {
    left: 8px
}
.left-\[95\.5px\] {
    left: 95.5px
}
.left-full {
    left: 100%
}
.right-0 {
    right: 0px
}
.right-1 {
    right: 0.25rem
}
.right-1\.5 {
    right: 0.375rem
}
.right-10 {
    right: 2.5rem
}
.right-16 {
    right: 4rem
}
.right-2 {
    right: 0.5rem
}
.right-2\.5 {
    right: 0.625rem
}
.right-3 {
    right: 0.75rem
}
.right-32 {
    right: 8rem
}
.right-4 {
    right: 1rem
}
.right-48 {
    right: 12rem
}
.right-5 {
    right: 1.25rem
}
.right-6 {
    right: 1.5rem
}
.right-96 {
    right: 24rem
}
.right-\[-1px\] {
    right: -1px
}
.right-\[-5rem\] {
    right: -5rem
}
.right-\[-8\%\] {
    right: -8%
}
.right-\[0px\] {
    right: 0px
}
.right-\[10px\] {
    right: 10px
}
.right-\[13px\] {
    right: 13px
}
.right-\[14px\] {
    right: 14px
}
.right-\[17px\] {
    right: 17px
}
.right-\[18\%\] {
    right: 18%
}
.right-\[18px\] {
    right: 18px
}
.right-\[1px\] {
    right: 1px
}
.right-\[24px\] {
    right: 24px
}
.right-\[28px\] {
    right: 28px
}
.right-\[2px\] {
    right: 2px
}
.right-\[30px\] {
    right: 30px
}
.right-\[3px\] {
    right: 3px
}
.right-\[4px\] {
    right: 4px
}
.right-\[5px\] {
    right: 5px
}
.right-\[60\%\] {
    right: 60%
}
.right-\[6px\] {
    right: 6px
}
.right-\[7px\] {
    right: 7px
}
.right-\[8\%\] {
    right: 8%
}
.right-\[8px\] {
    right: 8px
}
.right-auto {
    right: auto
}
.top-0 {
    top: 0px
}
.top-0\.5 {
    top: 0.125rem
}
.top-1 {
    top: 0.25rem
}
.top-1\.5 {
    top: 0.375rem
}
.top-1\/2 {
    top: 50%
}
.top-1\/4 {
    top: 25%
}
.top-12 {
    top: 3rem
}
.top-14 {
    top: 3.5rem
}
.top-2 {
    top: 0.5rem
}
.top-2\.5 {
    top: 0.625rem
}
.top-20 {
    top: 5rem
}
.top-24 {
    top: 6rem
}
.top-3 {
    top: 0.75rem
}
.top-3\.5 {
    top: 0.875rem
}
.top-4 {
    top: 1rem
}
.top-40 {
    top: 10rem
}
.top-5 {
    top: 1.25rem
}
.top-6 {
    top: 1.5rem
}
.top-60 {
    top: 15rem
}
.top-8 {
    top: 2rem
}
.top-\[1\.5px\] {
    top: 1.5px
}
.top-\[10\%\] {
    top: 10%
}
.top-\[110px\] {
    top: 110px
}
.top-\[12\%\] {
    top: 12%
}
.top-\[14px\] {
    top: 14px
}
.top-\[16px\] {
    top: 16px
}
.top-\[1px\] {
    top: 1px
}
.top-\[22\%\] {
    top: 22%
}
.top-\[22px\] {
    top: 22px
}
.top-\[26px\] {
    top: 26px
}
.top-\[28\%\] {
    top: 28%
}
.top-\[280px\] {
    top: 280px
}
.top-\[2px\] {
    top: 2px
}
.top-\[30px\] {
    top: 30px
}
.top-\[32px\] {
    top: 32px
}
.top-\[38\%\] {
    top: 38%
}
.top-\[3px\] {
    top: 3px
}
.top-\[46px\] {
    top: 46px
}
.top-\[4px\] {
    top: 4px
}
.top-\[50\%\] {
    top: 50%
}
.top-\[58\%\] {
    top: 58%
}
.top-\[5px\] {
    top: 5px
}
.top-\[60\%\] {
    top: 60%
}
.top-\[6px\] {
    top: 6px
}
.top-\[7px\] {
    top: 7px
}
.top-\[9px\] {
    top: 9px
}
.top-full {
    top: 100%
}
.isolate {
    isolation: isolate
}
.z-0 {
    z-index: 0
}
.z-10 {
    z-index: 10
}
.z-20 {
    z-index: 20
}
.z-30 {
    z-index: 30
}
.z-40 {
    z-index: 40
}
.z-50 {
    z-index: 50
}
.z-\[100000\] {
    z-index: 100000
}
.z-\[10000\] {
    z-index: 10000
}
.z-\[10001\] {
    z-index: 10001
}
.z-\[10002\] {
    z-index: 10002
}
.z-\[1000\] {
    z-index: 1000
}
.z-\[1001\] {
    z-index: 1001
}
.z-\[10020\] {
    z-index: 10020
}
.z-\[1002\] {
    z-index: 1002
}
.z-\[10030\] {
    z-index: 10030
}
.z-\[10050\] {
    z-index: 10050
}
.z-\[10059\] {
    z-index: 10059
}
.z-\[10060\] {
    z-index: 10060
}
.z-\[100\] {
    z-index: 100
}
.z-\[1\] {
    z-index: 1
}
.z-\[2000\] {
    z-index: 2000
}
.z-\[200\] {
    z-index: 200
}
.z-\[201\] {
    z-index: 201
}
.z-\[2147483000\] {
    z-index: 2147483000
}
.z-\[2147483646\] {
    z-index: 2147483646
}
.z-\[2147483647\] {
    z-index: 2147483647
}
.z-\[240\] {
    z-index: 240
}
.z-\[2\] {
    z-index: 2
}
.z-\[3000\] {
    z-index: 3000
}
.z-\[300\] {
    z-index: 300
}
.z-\[3\] {
    z-index: 3
}
.z-\[5\] {
    z-index: 5
}
.z-\[60\] {
    z-index: 60
}
.z-\[6\] {
    z-index: 6
}
.z-\[7000\] {
    z-index: 7000
}
.z-\[950\] {
    z-index: 950
}
.z-\[960\] {
    z-index: 960
}
.z-\[970\] {
    z-index: 970
}
.z-\[975\] {
    z-index: 975
}
.z-\[978\] {
    z-index: 978
}
.z-\[980\] {
    z-index: 980
}
.z-\[9999\] {
    z-index: 9999
}
.order-1 {
    order: 1
}
.order-2 {
    order: 2
}
.order-3 {
    order: 3
}
.col-span-1 {
    grid-column: span 1 / span 1
}
.col-span-2 {
    grid-column: span 2 / span 2
}
.col-span-3 {
    grid-column: span 3 / span 3
}
.col-span-5 {
    grid-column: span 5 / span 5
}
.col-span-6 {
    grid-column: span 6 / span 6
}
.col-span-8 {
    grid-column: span 8 / span 8
}
.col-span-9 {
    grid-column: span 9 / span 9
}
.col-span-full {
    grid-column: 1 / -1
}
.m-0 {
    margin: 0px
}
.m-\[6px\] {
    margin: 6px
}
.m-auto {
    margin: auto
}
.m-px {
    margin: 1px
}
.-mx-1 {
    margin-left: -0.25rem;
    margin-right: -0.25rem
}
.-mx-2 {
    margin-left: -0.5rem;
    margin-right: -0.5rem
}
.-mx-\[3px\] {
    margin-left: -3px;
    margin-right: -3px
}
.-my-\[5px\] {
    margin-top: -5px;
    margin-bottom: -5px
}
.-my-\[6px\] {
    margin-top: -6px;
    margin-bottom: -6px
}
.-my-\[7px\] {
    margin-top: -7px;
    margin-bottom: -7px
}
.mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem
}
.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem
}
.mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem
}
.mx-3\.5 {
    margin-left: 0.875rem;
    margin-right: 0.875rem
}
.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem
}
.mx-\[10px\] {
    margin-left: 10px;
    margin-right: 10px
}
.mx-\[18px\] {
    margin-left: 18px;
    margin-right: 18px
}
.mx-\[2px\] {
    margin-left: 2px;
    margin-right: 2px
}
.mx-\[3px\] {
    margin-left: 3px;
    margin-right: 3px
}
.mx-\[5px\] {
    margin-left: 5px;
    margin-right: 5px
}
.mx-\[6px\] {
    margin-left: 6px;
    margin-right: 6px
}
.mx-\[8px\] {
    margin-left: 8px;
    margin-right: 8px
}
.mx-\[9px\] {
    margin-left: 9px;
    margin-right: 9px
}
.mx-auto {
    margin-left: auto;
    margin-right: auto
}
.my-0 {
    margin-top: 0px;
    margin-bottom: 0px
}
.my-0\.5 {
    margin-top: 0.125rem;
    margin-bottom: 0.125rem
}
.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem
}
.my-1\.5 {
    margin-top: 0.375rem;
    margin-bottom: 0.375rem
}
.my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem
}
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem
}
.my-\[3px\] {
    margin-top: 3px;
    margin-bottom: 3px
}
.my-\[4px\] {
    margin-top: 4px;
    margin-bottom: 4px
}
.my-\[7px\] {
    margin-top: 7px;
    margin-bottom: 7px
}
.-mb-px {
    margin-bottom: -1px
}
.-ml-3 {
    margin-left: -0.75rem
}
.-ml-4 {
    margin-left: -1rem
}
.-mt-0 {
    margin-top: -0px
}
.-mt-0\.5 {
    margin-top: -0.125rem
}
.-mt-1 {
    margin-top: -0.25rem
}
.-mt-4 {
    margin-top: -1rem
}
.-mt-\[2px\] {
    margin-top: -2px
}
.mb-0 {
    margin-bottom: 0px
}
.mb-0\.5 {
    margin-bottom: 0.125rem
}
.mb-1 {
    margin-bottom: 0.25rem
}
.mb-1\.5 {
    margin-bottom: 0.375rem
}
.mb-10 {
    margin-bottom: 2.5rem
}
.mb-12 {
    margin-bottom: 3rem
}
.mb-2 {
    margin-bottom: 0.5rem
}
.mb-2\.5 {
    margin-bottom: 0.625rem
}
.mb-3 {
    margin-bottom: 0.75rem
}
.mb-4 {
    margin-bottom: 1rem
}
.mb-5 {
    margin-bottom: 1.25rem
}
.mb-6 {
    margin-bottom: 1.5rem
}
.mb-8 {
    margin-bottom: 2rem
}
.mb-\[15px\] {
    margin-bottom: 15px
}
.mb-\[2px\] {
    margin-bottom: 2px
}
.mb-\[3px\] {
    margin-bottom: 3px
}
.mb-\[4px\] {
    margin-bottom: 4px
}
.mb-\[6px\] {
    margin-bottom: 6px
}
.ml-0 {
    margin-left: 0px
}
.ml-0\.5 {
    margin-left: 0.125rem
}
.ml-1 {
    margin-left: 0.25rem
}
.ml-1\.5 {
    margin-left: 0.375rem
}
.ml-2 {
    margin-left: 0.5rem
}
.ml-3 {
    margin-left: 0.75rem
}
.ml-4 {
    margin-left: 1rem
}
.ml-8 {
    margin-left: 2rem
}
.ml-\[1px\] {
    margin-left: 1px
}
.ml-\[2px\] {
    margin-left: 2px
}
.ml-\[33px\] {
    margin-left: 33px
}
.ml-\[3px\] {
    margin-left: 3px
}
.ml-\[4px\] {
    margin-left: 4px
}
.ml-\[5px\] {
    margin-left: 5px
}
.ml-auto {
    margin-left: auto
}
.mr-1 {
    margin-right: 0.25rem
}
.mr-1\.5 {
    margin-right: 0.375rem
}
.mr-2 {
    margin-right: 0.5rem
}
.mr-3 {
    margin-right: 0.75rem
}
.mr-4 {
    margin-right: 1rem
}
.mr-\[3px\] {
    margin-right: 3px
}
.mr-auto {
    margin-right: auto
}
.mt-0 {
    margin-top: 0px
}
.mt-0\.5 {
    margin-top: 0.125rem
}
.mt-1 {
    margin-top: 0.25rem
}
.mt-1\.5 {
    margin-top: 0.375rem
}
.mt-12 {
    margin-top: 3rem
}
.mt-2 {
    margin-top: 0.5rem
}
.mt-24 {
    margin-top: 6rem
}
.mt-3 {
    margin-top: 0.75rem
}
.mt-4 {
    margin-top: 1rem
}
.mt-5 {
    margin-top: 1.25rem
}
.mt-6 {
    margin-top: 1.5rem
}
.mt-8 {
    margin-top: 2rem
}
.mt-\[-2px\] {
    margin-top: -2px
}
.mt-\[0px\] {
    margin-top: 0px
}
.mt-\[10px\] {
    margin-top: 10px
}
.mt-\[1px\] {
    margin-top: 1px
}
.mt-\[26px\] {
    margin-top: 26px
}
.mt-\[2px\] {
    margin-top: 2px
}
.mt-\[3px\] {
    margin-top: 3px
}
.mt-\[4px\] {
    margin-top: 4px
}
.mt-\[5px\] {
    margin-top: 5px
}
.mt-\[6px\] {
    margin-top: 6px
}
.mt-\[7px\] {
    margin-top: 7px
}
.mt-\[8px\] {
    margin-top: 8px
}
.mt-\[9px\] {
    margin-top: 9px
}
.mt-auto {
    margin-top: auto
}
.box-content {
    box-sizing: content-box
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}
.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
}
.line-clamp-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4
}
.block {
    display: block
}
.inline-block {
    display: inline-block
}
.inline {
    display: inline
}
.flex {
    display: flex
}
.inline-flex {
    display: inline-flex
}
.table {
    display: table
}
.\!grid {
    display: grid !important
}
.grid {
    display: grid
}
.contents {
    display: contents
}
.hidden {
    display: none
}
.aspect-square {
    aspect-ratio: 1 / 1
}
.aspect-video {
    aspect-ratio: 16 / 9
}
.size-4 {
    width: 1rem;
    height: 1rem
}
.h-0 {
    height: 0px
}
.h-0\.5 {
    height: 0.125rem
}
.h-1 {
    height: 0.25rem
}
.h-1\.5 {
    height: 0.375rem
}
.h-1\/3 {
    height: 33.333333%
}
.h-10 {
    height: 2.5rem
}
.h-11 {
    height: 2.75rem
}
.h-12 {
    height: 3rem
}
.h-14 {
    height: 3.5rem
}
.h-16 {
    height: 4rem
}
.h-2 {
    height: 0.5rem
}
.h-2\.5 {
    height: 0.625rem
}
.h-20 {
    height: 5rem
}
.h-24 {
    height: 6rem
}
.h-28 {
    height: 7rem
}
.h-3 {
    height: 0.75rem
}
.h-3\.5 {
    height: 0.875rem
}
.h-3\/4 {
    height: 75%
}
.h-32 {
    height: 8rem
}
.h-36 {
    height: 9rem
}
.h-4 {
    height: 1rem
}
.h-40 {
    height: 10rem
}
.h-48 {
    height: 12rem
}
.h-5 {
    height: 1.25rem
}
.h-6 {
    height: 1.5rem
}
.h-7 {
    height: 1.75rem
}
.h-72 {
    height: 18rem
}
.h-8 {
    height: 2rem
}
.h-80 {
    height: 20rem
}
.h-9 {
    height: 2.25rem
}
.h-96 {
    height: 24rem
}
.h-\[1\.5px\] {
    height: 1.5px
}
.h-\[10\%\] {
    height: 10%
}
.h-\[100dvh\] {
    height: 100dvh
}
.h-\[104px\] {
    height: 104px
}
.h-\[10px\] {
    height: 10px
}
.h-\[110px\] {
    height: 110px
}
.h-\[112px\] {
    height: 112px
}
.h-\[118px\] {
    height: 118px
}
.h-\[11px\] {
    height: 11px
}
.h-\[120px\] {
    height: 120px
}
.h-\[124px\] {
    height: 124px
}
.h-\[128px\] {
    height: 128px
}
.h-\[12px\] {
    height: 12px
}
.h-\[132px\] {
    height: 132px
}
.h-\[13px\] {
    height: 13px
}
.h-\[14px\] {
    height: 14px
}
.h-\[150px\] {
    height: 150px
}
.h-\[152px\] {
    height: 152px
}
.h-\[15px\] {
    height: 15px
}
.h-\[160px\] {
    height: 160px
}
.h-\[16px\] {
    height: 16px
}
.h-\[17px\] {
    height: 17px
}
.h-\[180px\] {
    height: 180px
}
.h-\[18px\] {
    height: 18px
}
.h-\[190px\] {
    height: 190px
}
.h-\[19px\] {
    height: 19px
}
.h-\[1px\] {
    height: 1px
}
.h-\[2\.5px\] {
    height: 2.5px
}
.h-\[200px\] {
    height: 200px
}
.h-\[20px\] {
    height: 20px
}
.h-\[210px\] {
    height: 210px
}
.h-\[21px\] {
    height: 21px
}
.h-\[22px\] {
    height: 22px
}
.h-\[23px\] {
    height: 23px
}
.h-\[24px\] {
    height: 24px
}
.h-\[250px\] {
    height: 250px
}
.h-\[25px\] {
    height: 25px
}
.h-\[26px\] {
    height: 26px
}
.h-\[27px\] {
    height: 27px
}
.h-\[28px\] {
    height: 28px
}
.h-\[29px\] {
    height: 29px
}
.h-\[2px\] {
    height: 2px
}
.h-\[3\.5px\] {
    height: 3.5px
}
.h-\[300px\] {
    height: 300px
}
.h-\[30px\] {
    height: 30px
}
.h-\[32px\] {
    height: 32px
}
.h-\[34px\] {
    height: 34px
}
.h-\[360px\] {
    height: 360px
}
.h-\[36px\] {
    height: 36px
}
.h-\[38px\] {
    height: 38px
}
.h-\[3px\] {
    height: 3px
}
.h-\[40px\] {
    height: 40px
}
.h-\[420px\] {
    height: 420px
}
.h-\[42px\] {
    height: 42px
}
.h-\[46px\] {
    height: 46px
}
.h-\[48px\] {
    height: 48px
}
.h-\[4px\] {
    height: 4px
}
.h-\[5\%\] {
    height: 5%
}
.h-\[520px\] {
    height: 520px
}
.h-\[54px\] {
    height: 54px
}
.h-\[56px\] {
    height: 56px
}
.h-\[5px\] {
    height: 5px
}
.h-\[600px\] {
    height: 600px
}
.h-\[60px\] {
    height: 60px
}
.h-\[64px\] {
    height: 64px
}
.h-\[66px\] {
    height: 66px
}
.h-\[6px\] {
    height: 6px
}
.h-\[70px\] {
    height: 70px
}
.h-\[74px\] {
    height: 74px
}
.h-\[76\%\] {
    height: 76%
}
.h-\[76px\] {
    height: 76px
}
.h-\[7px\] {
    height: 7px
}
.h-\[80px\] {
    height: 80px
}
.h-\[82px\] {
    height: 82px
}
.h-\[84px\] {
    height: 84px
}
.h-\[88px\] {
    height: 88px
}
.h-\[8px\] {
    height: 8px
}
.h-\[92px\] {
    height: 92px
}
.h-\[96px\] {
    height: 96px
}
.h-\[9px\] {
    height: 9px
}
.h-\[calc\(\(100\%-0\.75rem\)\/3\)\] {
    height: calc((100% - 0.75rem) / 3)
}
.h-\[calc\(100\%-16px\)\] {
    height: calc(100% - 16px)
}
.h-\[calc\(100\%-32px\)\] {
    height: calc(100% - 32px)
}
.h-\[calc\(100\%-8px\)\] {
    height: calc(100% - 8px)
}
.h-\[calc\(9rem-2px\)\] {
    height: calc(9rem - 2px)
}
.h-\[min\(78vh\2c 640px\)\] {
    height: min(78vh,640px)
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
    height: var(--radix-navigation-menu-viewport-height)
}
.h-\[var\(--radix-select-trigger-height\)\] {
    height: var(--radix-select-trigger-height)
}
.h-auto {
    height: auto
}
.h-dvh {
    height: 100dvh
}
.h-full {
    height: 100%
}
.h-px {
    height: 1px
}
.h-screen {
    height: 100vh
}
.h-svh {
    height: 100svh
}
.max-h-24 {
    max-height: 6rem
}
.max-h-32 {
    max-height: 8rem
}
.max-h-48 {
    max-height: 12rem
}
.max-h-52 {
    max-height: 13rem
}
.max-h-56 {
    max-height: 14rem
}
.max-h-64 {
    max-height: 16rem
}
.max-h-\[--radix-context-menu-content-available-height\] {
    max-height: var(--radix-context-menu-content-available-height)
}
.max-h-\[--radix-select-content-available-height\] {
    max-height: var(--radix-select-content-available-height)
}
.max-h-\[260px\] {
    max-height: 260px
}
.max-h-\[300px\] {
    max-height: 300px
}
.max-h-\[340px\] {
    max-height: 340px
}
.max-h-\[400px\] {
    max-height: 400px
}
.max-h-\[80vh\] {
    max-height: 80vh
}
.max-h-\[82vh\] {
    max-height: 82vh
}
.max-h-\[84vh\] {
    max-height: 84vh
}
.max-h-\[90vh\] {
    max-height: 90vh
}
.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
    max-height: var(--radix-dropdown-menu-content-available-height)
}
.max-h-full {
    max-height: 100%
}
.max-h-screen {
    max-height: 100vh
}
.min-h-0 {
    min-height: 0px
}
.min-h-12 {
    min-height: 3rem
}
.min-h-5 {
    min-height: 1.25rem
}
.min-h-6 {
    min-height: 1.5rem
}
.min-h-7 {
    min-height: 1.75rem
}
.min-h-\[100dvh\] {
    min-height: 100dvh
}
.min-h-\[100svh\] {
    min-height: 100svh
}
.min-h-\[24px\] {
    min-height: 24px
}
.min-h-\[26px\] {
    min-height: 26px
}
.min-h-\[28px\] {
    min-height: 28px
}
.min-h-\[30px\] {
    min-height: 30px
}
.min-h-\[32px\] {
    min-height: 32px
}
.min-h-\[34px\] {
    min-height: 34px
}
.min-h-\[36px\] {
    min-height: 36px
}
.min-h-\[40px\] {
    min-height: 40px
}
.min-h-\[42px\] {
    min-height: 42px
}
.min-h-\[44px\] {
    min-height: 44px
}
.min-h-\[80px\] {
    min-height: 80px
}
.min-h-dvh {
    min-height: 100dvh
}
.min-h-full {
    min-height: 100%
}
.min-h-screen {
    min-height: 100vh
}
.min-h-svh {
    min-height: 100svh
}
.w-0 {
    width: 0px
}
.w-0\.5 {
    width: 0.125rem
}
.w-1 {
    width: 0.25rem
}
.w-1\.5 {
    width: 0.375rem
}
.w-1\/2 {
    width: 50%
}
.w-1\/3 {
    width: 33.333333%
}
.w-10 {
    width: 2.5rem
}
.w-11 {
    width: 2.75rem
}
.w-12 {
    width: 3rem
}
.w-14 {
    width: 3.5rem
}
.w-16 {
    width: 4rem
}
.w-2 {
    width: 0.5rem
}
.w-2\.5 {
    width: 0.625rem
}
.w-20 {
    width: 5rem
}
.w-24 {
    width: 6rem
}
.w-28 {
    width: 7rem
}
.w-3 {
    width: 0.75rem
}
.w-3\.5 {
    width: 0.875rem
}
.w-3\/4 {
    width: 75%
}
.w-32 {
    width: 8rem
}
.w-36 {
    width: 9rem
}
.w-4 {
    width: 1rem
}
.w-40 {
    width: 10rem
}
.w-44 {
    width: 11rem
}
.w-48 {
    width: 12rem
}
.w-5 {
    width: 1.25rem
}
.w-52 {
    width: 13rem
}
.w-56 {
    width: 14rem
}
.w-6 {
    width: 1.5rem
}
.w-64 {
    width: 16rem
}
.w-7 {
    width: 1.75rem
}
.w-72 {
    width: 18rem
}
.w-8 {
    width: 2rem
}
.w-80 {
    width: 20rem
}
.w-9 {
    width: 2.25rem
}
.w-96 {
    width: 24rem
}
.w-\[--sidebar-width\] {
    width: var(--sidebar-width)
}
.w-\[1\.5px\] {
    width: 1.5px
}
.w-\[100px\] {
    width: 100px
}
.w-\[102px\] {
    width: 102px
}
.w-\[104px\] {
    width: 104px
}
.w-\[10px\] {
    width: 10px
}
.w-\[112px\] {
    width: 112px
}
.w-\[116px\] {
    width: 116px
}
.w-\[11px\] {
    width: 11px
}
.w-\[120px\] {
    width: 120px
}
.w-\[124px\] {
    width: 124px
}
.w-\[128px\] {
    width: 128px
}
.w-\[12px\] {
    width: 12px
}
.w-\[130px\] {
    width: 130px
}
.w-\[132px\] {
    width: 132px
}
.w-\[134px\] {
    width: 134px
}
.w-\[13px\] {
    width: 13px
}
.w-\[146px\] {
    width: 146px
}
.w-\[148px\] {
    width: 148px
}
.w-\[14px\] {
    width: 14px
}
.w-\[15\%\] {
    width: 15%
}
.w-\[150px\] {
    width: 150px
}
.w-\[152px\] {
    width: 152px
}
.w-\[156px\] {
    width: 156px
}
.w-\[15px\] {
    width: 15px
}
.w-\[164px\] {
    width: 164px
}
.w-\[168px\] {
    width: 168px
}
.w-\[16px\] {
    width: 16px
}
.w-\[170px\] {
    width: 170px
}
.w-\[172px\] {
    width: 172px
}
.w-\[176px\] {
    width: 176px
}
.w-\[178px\] {
    width: 178px
}
.w-\[17px\] {
    width: 17px
}
.w-\[180px\] {
    width: 180px
}
.w-\[184px\] {
    width: 184px
}
.w-\[186px\] {
    width: 186px
}
.w-\[188px\] {
    width: 188px
}
.w-\[18px\] {
    width: 18px
}
.w-\[190px\] {
    width: 190px
}
.w-\[196px\] {
    width: 196px
}
.w-\[19px\] {
    width: 19px
}
.w-\[1px\] {
    width: 1px
}
.w-\[2\.5px\] {
    width: 2.5px
}
.w-\[200px\] {
    width: 200px
}
.w-\[20px\] {
    width: 20px
}
.w-\[210px\] {
    width: 210px
}
.w-\[214px\] {
    width: 214px
}
.w-\[21px\] {
    width: 21px
}
.w-\[220px\] {
    width: 220px
}
.w-\[228px\] {
    width: 228px
}
.w-\[22px\] {
    width: 22px
}
.w-\[232px\] {
    width: 232px
}
.w-\[236px\] {
    width: 236px
}
.w-\[240px\] {
    width: 240px
}
.w-\[244px\] {
    width: 244px
}
.w-\[24px\] {
    width: 24px
}
.w-\[26px\] {
    width: 26px
}
.w-\[28px\] {
    width: 28px
}
.w-\[2px\] {
    width: 2px
}
.w-\[3\.5px\] {
    width: 3.5px
}
.w-\[30\%\] {
    width: 30%
}
.w-\[300px\] {
    width: 300px
}
.w-\[30px\] {
    width: 30px
}
.w-\[31\%\] {
    width: 31%
}
.w-\[312px\] {
    width: 312px
}
.w-\[320px\] {
    width: 320px
}
.w-\[32px\] {
    width: 32px
}
.w-\[340px\] {
    width: 340px
}
.w-\[34px\] {
    width: 34px
}
.w-\[352px\] {
    width: 352px
}
.w-\[360px\] {
    width: 360px
}
.w-\[36px\] {
    width: 36px
}
.w-\[38px\] {
    width: 38px
}
.w-\[3px\] {
    width: 3px
}
.w-\[404px\] {
    width: 404px
}
.w-\[40px\] {
    width: 40px
}
.w-\[420px\] {
    width: 420px
}
.w-\[42px\] {
    width: 42px
}
.w-\[44px\] {
    width: 44px
}
.w-\[46px\] {
    width: 46px
}
.w-\[48px\] {
    width: 48px
}
.w-\[4px\] {
    width: 4px
}
.w-\[50px\] {
    width: 50px
}
.w-\[520px\] {
    width: 520px
}
.w-\[52px\] {
    width: 52px
}
.w-\[54px\] {
    width: 54px
}
.w-\[56px\] {
    width: 56px
}
.w-\[58px\] {
    width: 58px
}
.w-\[5px\] {
    width: 5px
}
.w-\[62px\] {
    width: 62px
}
.w-\[63px\] {
    width: 63px
}
.w-\[64px\] {
    width: 64px
}
.w-\[68px\] {
    width: 68px
}
.w-\[6px\] {
    width: 6px
}
.w-\[70px\] {
    width: 70px
}
.w-\[72px\] {
    width: 72px
}
.w-\[74px\] {
    width: 74px
}
.w-\[760px\] {
    width: 760px
}
.w-\[78\%\] {
    width: 78%
}
.w-\[78px\] {
    width: 78px
}
.w-\[7px\] {
    width: 7px
}
.w-\[80px\] {
    width: 80px
}
.w-\[84px\] {
    width: 84px
}
.w-\[85\%\] {
    width: 85%
}
.w-\[86px\] {
    width: 86px
}
.w-\[8px\] {
    width: 8px
}
.w-\[92px\] {
    width: 92px
}
.w-\[96px\] {
    width: 96px
}
.w-\[9px\] {
    width: 9px
}
.w-\[calc\(100\%-30px\)\] {
    width: calc(100% - 30px)
}
.w-\[calc\(100\%-50px\)\] {
    width: calc(100% - 50px)
}
.w-\[calc\(100\%-55px\)\] {
    width: calc(100% - 55px)
}
.w-\[min\(390px\2c calc\(100vw-2rem\)\)\] {
    width: min(390px,calc(100vw - 2rem))
}
.w-\[min\(540px\2c calc\(100\%-1\.5rem\)\)\] {
    width: min(540px,calc(100% - 1.5rem))
}
.w-auto {
    width: auto
}
.w-full {
    width: 100%
}
.w-max {
    width: -moz-max-content;
    width: max-content
}
.w-px {
    width: 1px
}
.w-screen {
    width: 100vw
}
.min-w-0 {
    min-width: 0px
}
.min-w-10 {
    min-width: 2.5rem
}
.min-w-11 {
    min-width: 2.75rem
}
.min-w-5 {
    min-width: 1.25rem
}
.min-w-9 {
    min-width: 2.25rem
}
.min-w-\[12rem\] {
    min-width: 12rem
}
.min-w-\[14px\] {
    min-width: 14px
}
.min-w-\[2rem\] {
    min-width: 2rem
}
.min-w-\[30\%\] {
    min-width: 30%
}
.min-w-\[30px\] {
    min-width: 30px
}
.min-w-\[38px\] {
    min-width: 38px
}
.min-w-\[3rem\] {
    min-width: 3rem
}
.min-w-\[44px\] {
    min-width: 44px
}
.min-w-\[58px\] {
    min-width: 58px
}
.min-w-\[70px\] {
    min-width: 70px
}
.min-w-\[74px\] {
    min-width: 74px
}
.min-w-\[80px\] {
    min-width: 80px
}
.min-w-\[8rem\] {
    min-width: 8rem
}
.min-w-\[95px\] {
    min-width: 95px
}
.min-w-\[96px\] {
    min-width: 96px
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
    min-width: var(--radix-select-trigger-width)
}
.min-w-full {
    min-width: 100%
}
.max-w-2xl {
    max-width: 42rem
}
.max-w-3xl {
    max-width: 48rem
}
.max-w-48 {
    max-width: 12rem
}
.max-w-4xl {
    max-width: 56rem
}
.max-w-5xl {
    max-width: 64rem
}
.max-w-6xl {
    max-width: 72rem
}
.max-w-7xl {
    max-width: 80rem
}
.max-w-\[--skeleton-width\] {
    max-width: var(--skeleton-width)
}
.max-w-\[100vw\] {
    max-width: 100vw
}
.max-w-\[110px\] {
    max-width: 110px
}
.max-w-\[115px\] {
    max-width: 115px
}
.max-w-\[1180px\] {
    max-width: 1180px
}
.max-w-\[11ch\] {
    max-width: 11ch
}
.max-w-\[120px\] {
    max-width: 120px
}
.max-w-\[140px\] {
    max-width: 140px
}
.max-w-\[1440px\] {
    max-width: 1440px
}
.max-w-\[150px\] {
    max-width: 150px
}
.max-w-\[190px\] {
    max-width: 190px
}
.max-w-\[200px\] {
    max-width: 200px
}
.max-w-\[220px\] {
    max-width: 220px
}
.max-w-\[30\%\] {
    max-width: 30%
}
.max-w-\[320px\] {
    max-width: 320px
}
.max-w-\[400px\] {
    max-width: 400px
}
.max-w-\[420px\] {
    max-width: 420px
}
.max-w-\[440px\] {
    max-width: 440px
}
.max-w-\[52\%\] {
    max-width: 52%
}
.max-w-\[70\%\] {
    max-width: 70%
}
.max-w-\[70ch\] {
    max-width: 70ch
}
.max-w-\[84px\] {
    max-width: 84px
}
.max-w-\[85\%\] {
    max-width: 85%
}
.max-w-\[900px\] {
    max-width: 900px
}
.max-w-\[92vw\] {
    max-width: 92vw
}
.max-w-\[95px\] {
    max-width: 95px
}
.max-w-\[calc\(100vw-2rem\)\] {
    max-width: calc(100vw - 2rem)
}
.max-w-full {
    max-width: 100%
}
.max-w-lg {
    max-width: 32rem
}
.max-w-max {
    max-width: -moz-max-content;
    max-width: max-content
}
.max-w-md {
    max-width: 28rem
}
.max-w-none {
    max-width: none
}
.max-w-sm {
    max-width: 24rem
}
.max-w-xl {
    max-width: 36rem
}
.flex-1 {
    flex: 1 1 0%
}
.flex-\[118\] {
    flex: 118
}
.flex-\[168\] {
    flex: 168
}
.flex-\[2\] {
    flex: 2
}
.flex-none {
    flex: none
}
.flex-shrink-0 {
    flex-shrink: 0
}
.shrink {
    flex-shrink: 1
}
.shrink-0 {
    flex-shrink: 0
}
.flex-grow {
    flex-grow: 1
}
.flex-grow-\[1\.25\] {
    flex-grow: 1.25
}
.flex-grow-\[1\.5\] {
    flex-grow: 1.5
}
.grow {
    flex-grow: 1
}
.grow-0 {
    flex-grow: 0
}
.basis-full {
    flex-basis: 100%
}
.caption-bottom {
    caption-side: bottom
}
.border-collapse {
    border-collapse: collapse
}
.origin-\[--radix-context-menu-content-transform-origin\] {
    transform-origin: var(--radix-context-menu-content-transform-origin)
}
.origin-\[--radix-dropdown-menu-content-transform-origin\] {
    transform-origin: var(--radix-dropdown-menu-content-transform-origin)
}
.origin-\[--radix-hover-card-content-transform-origin\] {
    transform-origin: var(--radix-hover-card-content-transform-origin)
}
.origin-\[--radix-menubar-content-transform-origin\] {
    transform-origin: var(--radix-menubar-content-transform-origin)
}
.origin-\[--radix-popover-content-transform-origin\] {
    transform-origin: var(--radix-popover-content-transform-origin)
}
.origin-\[--radix-select-content-transform-origin\] {
    transform-origin: var(--radix-select-content-transform-origin)
}
.origin-\[--radix-tooltip-content-transform-origin\] {
    transform-origin: var(--radix-tooltip-content-transform-origin)
}
.origin-center {
    transform-origin: center
}
.origin-left {
    transform-origin: left
}
.origin-top-left {
    transform-origin: top left
}
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-x-\[1px\] {
    --tw-translate-x: -1px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-x-\[5px\] {
    --tw-translate-x: -5px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-x-px {
    --tw-translate-x: -1px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-0\.5 {
    --tw-translate-x: 0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-4 {
    --tw-translate-x: 1rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-6 {
    --tw-translate-x: 1.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-\[-50\%\] {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-px {
    --tw-translate-x: 1px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-0\.5 {
    --tw-translate-y: 0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-\[-15px\] {
    --tw-translate-y: -15px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-rotate-45 {
    --tw-rotate: -45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-rotate-90 {
    --tw-rotate: -90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-45 {
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-90 {
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-\[38deg\] {
    --tw-rotate: 38deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.scale-110 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.scale-\[1\.18\] {
    --tw-scale-x: 1.18;
    --tw-scale-y: 1.18;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8,0,1,1)
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0,0,0.2,1)
    }
}
.animate-bounce {
    animation: bounce 1s infinite
}
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0
    }
}
.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
}
@keyframes pulse {
    50% {
        opacity: .5
    }
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}
@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}
.animate-spin {
    animation: spin 1s linear infinite
}
.cursor-crosshair {
    cursor: crosshair
}
.cursor-default {
    cursor: default
}
.cursor-ew-resize {
    cursor: ew-resize
}
.cursor-grab {
    cursor: grab
}
.cursor-grabbing {
    cursor: grabbing
}
.cursor-not-allowed {
    cursor: not-allowed
}
.cursor-ns-resize {
    cursor: ns-resize
}
.cursor-pointer {
    cursor: pointer
}
.cursor-wait {
    cursor: wait
}
.touch-none {
    touch-action: none
}
.touch-pan-y {
    --tw-pan-y: pan-y;
    touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)
}
.touch-manipulation {
    touch-action: manipulation
}
.select-none {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none
}
.select-all {
    -webkit-user-select: all;
       -moz-user-select: all;
            user-select: all
}
.resize-none {
    resize: none
}
.resize {
    resize: both
}
.snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness)
}
.snap-mandatory {
    --tw-scroll-snap-strictness: mandatory
}
.snap-proximity {
    --tw-scroll-snap-strictness: proximity
}
.snap-start {
    scroll-snap-align: start
}
.snap-center {
    scroll-snap-align: center
}
.list-inside {
    list-style-position: inside
}
.list-decimal {
    list-style-type: decimal
}
.list-none {
    list-style-type: none
}
.appearance-none {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none
}
.grid-flow-col {
    grid-auto-flow: column
}
.auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr)
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}
.grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr))
}
.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr))
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr))
}
.grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr))
}
.grid-cols-\[1\.25fr_1fr_1fr_1fr_1fr_0\.95fr\] {
    grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr 0.95fr
}
.grid-cols-\[1fr_auto_auto\] {
    grid-template-columns: 1fr auto auto
}
.grid-cols-\[minmax\(0\2c 1fr\)_108px\] {
    grid-template-columns: minmax(0,1fr) 108px
}
.grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr))
}
.grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr))
}
.grid-rows-7 {
    grid-template-rows: repeat(7, minmax(0, 1fr))
}
.grid-rows-\[1fr_auto\] {
    grid-template-rows: 1fr auto
}
.grid-rows-\[minmax\(0\2c 1fr\)_auto\] {
    grid-template-rows: minmax(0,1fr) auto
}
.flex-row {
    flex-direction: row
}
.flex-row-reverse {
    flex-direction: row-reverse
}
.flex-col {
    flex-direction: column
}
.flex-col-reverse {
    flex-direction: column-reverse
}
.flex-wrap {
    flex-wrap: wrap
}
.place-items-center {
    place-items: center
}
.content-start {
    align-content: flex-start
}
.items-start {
    align-items: flex-start
}
.items-end {
    align-items: flex-end
}
.items-center {
    align-items: center
}
.items-baseline {
    align-items: baseline
}
.items-stretch {
    align-items: stretch
}
.justify-start {
    justify-content: flex-start
}
.justify-end {
    justify-content: flex-end
}
.justify-center {
    justify-content: center
}
.justify-between {
    justify-content: space-between
}
.justify-around {
    justify-content: space-around
}
.justify-items-center {
    justify-items: center
}
.gap-0 {
    gap: 0px
}
.gap-0\.5 {
    gap: 0.125rem
}
.gap-1 {
    gap: 0.25rem
}
.gap-1\.5 {
    gap: 0.375rem
}
.gap-2 {
    gap: 0.5rem
}
.gap-2\.5 {
    gap: 0.625rem
}
.gap-3 {
    gap: 0.75rem
}
.gap-4 {
    gap: 1rem
}
.gap-5 {
    gap: 1.25rem
}
.gap-6 {
    gap: 1.5rem
}
.gap-\[1\.5px\] {
    gap: 1.5px
}
.gap-\[10px\] {
    gap: 10px
}
.gap-\[11px\] {
    gap: 11px
}
.gap-\[12px\] {
    gap: 12px
}
.gap-\[14px\] {
    gap: 14px
}
.gap-\[1px\] {
    gap: 1px
}
.gap-\[2px\] {
    gap: 2px
}
.gap-\[3px\] {
    gap: 3px
}
.gap-\[4px\] {
    gap: 4px
}
.gap-\[5px\] {
    gap: 5px
}
.gap-\[6px\] {
    gap: 6px
}
.gap-\[7px\] {
    gap: 7px
}
.gap-\[8px\] {
    gap: 8px
}
.gap-\[9px\] {
    gap: 9px
}
.gap-px {
    gap: 1px
}
.gap-x-1 {
    -moz-column-gap: 0.25rem;
         column-gap: 0.25rem
}
.gap-x-3 {
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem
}
.gap-x-6 {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem
}
.gap-x-\[4px\] {
    -moz-column-gap: 4px;
         column-gap: 4px
}
.gap-x-\[8px\] {
    -moz-column-gap: 8px;
         column-gap: 8px
}
.gap-y-1 {
    row-gap: 0.25rem
}
.gap-y-1\.5 {
    row-gap: 0.375rem
}
.gap-y-2 {
    row-gap: 0.5rem
}
.gap-y-\[2px\] {
    row-gap: 2px
}
.gap-y-\[3px\] {
    row-gap: 3px
}
.gap-y-\[6px\] {
    row-gap: 6px
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse))
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse))
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}
.space-y-7 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.75rem * var(--tw-space-y-reverse))
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse))
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse))
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-divide-opacity))
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-divide-opacity))
}
.divide-gray-50 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(249 250 251 / var(--tw-divide-opacity))
}
.divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-divide-opacity))
}
.divide-gray-800 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-divide-opacity))
}
.divide-white\/5 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(255 255 255 / 0.05)
}
.self-start {
    align-self: flex-start
}
.self-end {
    align-self: flex-end
}
.self-center {
    align-self: center
}
.self-stretch {
    align-self: stretch
}
.justify-self-center {
    justify-self: center
}
.overflow-auto {
    overflow: auto
}
.overflow-hidden {
    overflow: hidden
}
.overflow-visible {
    overflow: visible
}
.overflow-x-auto {
    overflow-x: auto
}
.overflow-y-auto {
    overflow-y: auto
}
.overflow-x-hidden {
    overflow-x: hidden
}
.overflow-y-hidden {
    overflow-y: hidden
}
.overflow-y-scroll {
    overflow-y: scroll
}
.overscroll-contain {
    overscroll-behavior: contain
}
.overscroll-none {
    overscroll-behavior: none
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.text-ellipsis {
    text-overflow: ellipsis
}
.whitespace-normal {
    white-space: normal
}
.whitespace-nowrap {
    white-space: nowrap
}
.whitespace-pre-wrap {
    white-space: pre-wrap
}
.break-words {
    overflow-wrap: break-word
}
.break-all {
    word-break: break-all
}
.rounded {
    border-radius: 0.25rem
}
.rounded-2xl {
    border-radius: 1rem
}
.rounded-3xl {
    border-radius: 1.5rem
}
.rounded-\[0\.5px\] {
    border-radius: 0.5px
}
.rounded-\[1\.5px\] {
    border-radius: 1.5px
}
.rounded-\[1\.5rem\] {
    border-radius: 1.5rem
}
.rounded-\[1\.8rem\] {
    border-radius: 1.8rem
}
.rounded-\[10px\] {
    border-radius: 10px
}
.rounded-\[13px\] {
    border-radius: 13px
}
.rounded-\[14px\] {
    border-radius: 14px
}
.rounded-\[18px\] {
    border-radius: 18px
}
.rounded-\[1px\] {
    border-radius: 1px
}
.rounded-\[2\.5px\] {
    border-radius: 2.5px
}
.rounded-\[22px\] {
    border-radius: 22px
}
.rounded-\[2px\] {
    border-radius: 2px
}
.rounded-\[2rem\] {
    border-radius: 2rem
}
.rounded-\[3\.5px\] {
    border-radius: 3.5px
}
.rounded-\[3px\] {
    border-radius: 3px
}
.rounded-\[4px\] {
    border-radius: 4px
}
.rounded-\[50\%\] {
    border-radius: 50%
}
.rounded-\[5px\] {
    border-radius: 5px
}
.rounded-\[6px\] {
    border-radius: 6px
}
.rounded-\[7px\] {
    border-radius: 7px
}
.rounded-\[8px\] {
    border-radius: 8px
}
.rounded-\[9px\] {
    border-radius: 9px
}
.rounded-\[inherit\] {
    border-radius: inherit
}
.rounded-full {
    border-radius: 9999px
}
.rounded-lg {
    border-radius: var(--radius)
}
.rounded-md {
    border-radius: calc(var(--radius) - 2px)
}
.rounded-sm {
    border-radius: calc(var(--radius) - 4px)
}
.rounded-xl {
    border-radius: 0.75rem
}
.rounded-b-\[2px\] {
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px
}
.rounded-b-\[5px\] {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px
}
.rounded-b-lg {
    border-bottom-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius)
}
.rounded-b-md {
    border-bottom-right-radius: calc(var(--radius) - 2px);
    border-bottom-left-radius: calc(var(--radius) - 2px)
}
.rounded-l-\[3px\] {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px
}
.rounded-l-md {
    border-top-left-radius: calc(var(--radius) - 2px);
    border-bottom-left-radius: calc(var(--radius) - 2px)
}
.rounded-r {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem
}
.rounded-r-\[3px\] {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}
.rounded-r-\[4px\] {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}
.rounded-r-md {
    border-top-right-radius: calc(var(--radius) - 2px);
    border-bottom-right-radius: calc(var(--radius) - 2px)
}
.rounded-t-2xl {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem
}
.rounded-t-\[10px\] {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}
.rounded-t-\[5px\] {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}
.rounded-t-md {
    border-top-left-radius: calc(var(--radius) - 2px);
    border-top-right-radius: calc(var(--radius) - 2px)
}
.rounded-bl-\[5px\] {
    border-bottom-left-radius: 5px
}
.rounded-tl-sm {
    border-top-left-radius: calc(var(--radius) - 4px)
}
.border {
    border-width: 1px
}
.border-0 {
    border-width: 0px
}
.border-2 {
    border-width: 2px
}
.border-\[1\.5px\] {
    border-width: 1.5px
}
.border-y {
    border-top-width: 1px;
    border-bottom-width: 1px
}
.border-b {
    border-bottom-width: 1px
}
.border-b-2 {
    border-bottom-width: 2px
}
.border-l {
    border-left-width: 1px
}
.border-l-2 {
    border-left-width: 2px
}
.border-l-4 {
    border-left-width: 4px
}
.border-l-\[5px\] {
    border-left-width: 5px
}
.border-r {
    border-right-width: 1px
}
.border-r-\[5px\] {
    border-right-width: 5px
}
.border-t {
    border-top-width: 1px
}
.border-t-2 {
    border-top-width: 2px
}
.border-t-\[7px\] {
    border-top-width: 7px
}
.border-dashed {
    border-style: dashed
}
.border-none {
    border-style: none
}
.border-\[\#00000022\] {
    border-color: #00000022
}
.border-\[\#00A3FF\] {
    --tw-border-opacity: 1;
    border-color: rgb(0 163 255 / var(--tw-border-opacity))
}
.border-\[\#00ff00\] {
    --tw-border-opacity: 1;
    border-color: rgb(0 255 0 / var(--tw-border-opacity))
}
.border-\[\#00ff00\]\/20 {
    border-color: rgb(0 255 0 / 0.2)
}
.border-\[\#00ff00\]\/30 {
    border-color: rgb(0 255 0 / 0.3)
}
.border-\[\#00ff00\]\/40 {
    border-color: rgb(0 255 0 / 0.4)
}
.border-\[\#00ff00\]\/50 {
    border-color: rgb(0 255 0 / 0.5)
}
.border-\[\#07101f\] {
    --tw-border-opacity: 1;
    border-color: rgb(7 16 31 / var(--tw-border-opacity))
}
.border-\[\#111\] {
    --tw-border-opacity: 1;
    border-color: rgb(17 17 17 / var(--tw-border-opacity))
}
.border-\[\#143d74\] {
    --tw-border-opacity: 1;
    border-color: rgb(20 61 116 / var(--tw-border-opacity))
}
.border-\[\#152838\] {
    --tw-border-opacity: 1;
    border-color: rgb(21 40 56 / var(--tw-border-opacity))
}
.border-\[\#166534\] {
    --tw-border-opacity: 1;
    border-color: rgb(22 101 52 / var(--tw-border-opacity))
}
.border-\[\#17191f\] {
    --tw-border-opacity: 1;
    border-color: rgb(23 25 31 / var(--tw-border-opacity))
}
.border-\[\#181309\] {
    --tw-border-opacity: 1;
    border-color: rgb(24 19 9 / var(--tw-border-opacity))
}
.border-\[\#18d29f\]\/50 {
    border-color: rgb(24 210 159 / 0.5)
}
.border-\[\#1C212B\] {
    --tw-border-opacity: 1;
    border-color: rgb(28 33 43 / var(--tw-border-opacity))
}
.border-\[\#1a150e\] {
    --tw-border-opacity: 1;
    border-color: rgb(26 21 14 / var(--tw-border-opacity))
}
.border-\[\#1e2027\] {
    --tw-border-opacity: 1;
    border-color: rgb(30 32 39 / var(--tw-border-opacity))
}
.border-\[\#1f1f1f\] {
    --tw-border-opacity: 1;
    border-color: rgb(31 31 31 / var(--tw-border-opacity))
}
.border-\[\#1f5f3d\] {
    --tw-border-opacity: 1;
    border-color: rgb(31 95 61 / var(--tw-border-opacity))
}
.border-\[\#22242b\] {
    --tw-border-opacity: 1;
    border-color: rgb(34 36 43 / var(--tw-border-opacity))
}
.border-\[\#222\] {
    --tw-border-opacity: 1;
    border-color: rgb(34 34 34 / var(--tw-border-opacity))
}
.border-\[\#22384a\] {
    --tw-border-opacity: 1;
    border-color: rgb(34 56 74 / var(--tw-border-opacity))
}
.border-\[\#22c55e\] {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity))
}
.border-\[\#23232a\] {
    --tw-border-opacity: 1;
    border-color: rgb(35 35 42 / var(--tw-border-opacity))
}
.border-\[\#23262d\] {
    --tw-border-opacity: 1;
    border-color: rgb(35 38 45 / var(--tw-border-opacity))
}
.border-\[\#232833\] {
    --tw-border-opacity: 1;
    border-color: rgb(35 40 51 / var(--tw-border-opacity))
}
.border-\[\#241d14\] {
    --tw-border-opacity: 1;
    border-color: rgb(36 29 20 / var(--tw-border-opacity))
}
.border-\[\#241d29\] {
    --tw-border-opacity: 1;
    border-color: rgb(36 29 41 / var(--tw-border-opacity))
}
.border-\[\#242426\] {
    --tw-border-opacity: 1;
    border-color: rgb(36 36 38 / var(--tw-border-opacity))
}
.border-\[\#24262c\] {
    --tw-border-opacity: 1;
    border-color: rgb(36 38 44 / var(--tw-border-opacity))
}
.border-\[\#243246\] {
    --tw-border-opacity: 1;
    border-color: rgb(36 50 70 / var(--tw-border-opacity))
}
.border-\[\#25406b\] {
    --tw-border-opacity: 1;
    border-color: rgb(37 64 107 / var(--tw-border-opacity))
}
.border-\[\#2563eb\] {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity))
}
.border-\[\#262626\] {
    --tw-border-opacity: 1;
    border-color: rgb(38 38 38 / var(--tw-border-opacity))
}
.border-\[\#28422d\] {
    --tw-border-opacity: 1;
    border-color: rgb(40 66 45 / var(--tw-border-opacity))
}
.border-\[\#2E3542\] {
    --tw-border-opacity: 1;
    border-color: rgb(46 53 66 / var(--tw-border-opacity))
}
.border-\[\#2FD4C4\] {
    --tw-border-opacity: 1;
    border-color: rgb(47 212 196 / var(--tw-border-opacity))
}
.border-\[\#2a1414\] {
    --tw-border-opacity: 1;
    border-color: rgb(42 20 20 / var(--tw-border-opacity))
}
.border-\[\#2a2118\] {
    --tw-border-opacity: 1;
    border-color: rgb(42 33 24 / var(--tw-border-opacity))
}
.border-\[\#2a2a2a\] {
    --tw-border-opacity: 1;
    border-color: rgb(42 42 42 / var(--tw-border-opacity))
}
.border-\[\#2a2c33\] {
    --tw-border-opacity: 1;
    border-color: rgb(42 44 51 / var(--tw-border-opacity))
}
.border-\[\#2a5a3a\] {
    --tw-border-opacity: 1;
    border-color: rgb(42 90 58 / var(--tw-border-opacity))
}
.border-\[\#2b2f38\] {
    --tw-border-opacity: 1;
    border-color: rgb(43 47 56 / var(--tw-border-opacity))
}
.border-\[\#2b3b55\] {
    --tw-border-opacity: 1;
    border-color: rgb(43 59 85 / var(--tw-border-opacity))
}
.border-\[\#2b4c76\] {
    --tw-border-opacity: 1;
    border-color: rgb(43 76 118 / var(--tw-border-opacity))
}
.border-\[\#2c3d55\] {
    --tw-border-opacity: 1;
    border-color: rgb(44 61 85 / var(--tw-border-opacity))
}
.border-\[\#2c4a66\] {
    --tw-border-opacity: 1;
    border-color: rgb(44 74 102 / var(--tw-border-opacity))
}
.border-\[\#2f333c\] {
    --tw-border-opacity: 1;
    border-color: rgb(47 51 60 / var(--tw-border-opacity))
}
.border-\[\#2f3f59\] {
    --tw-border-opacity: 1;
    border-color: rgb(47 63 89 / var(--tw-border-opacity))
}
.border-\[\#2f6b3c\] {
    --tw-border-opacity: 1;
    border-color: rgb(47 107 60 / var(--tw-border-opacity))
}
.border-\[\#31445f\] {
    --tw-border-opacity: 1;
    border-color: rgb(49 68 95 / var(--tw-border-opacity))
}
.border-\[\#333333\] {
    --tw-border-opacity: 1;
    border-color: rgb(51 51 51 / var(--tw-border-opacity))
}
.border-\[\#333\] {
    --tw-border-opacity: 1;
    border-color: rgb(51 51 51 / var(--tw-border-opacity))
}
.border-\[\#3a2a4a\] {
    --tw-border-opacity: 1;
    border-color: rgb(58 42 74 / var(--tw-border-opacity))
}
.border-\[\#3a2c46\] {
    --tw-border-opacity: 1;
    border-color: rgb(58 44 70 / var(--tw-border-opacity))
}
.border-\[\#3a3325\] {
    --tw-border-opacity: 1;
    border-color: rgb(58 51 37 / var(--tw-border-opacity))
}
.border-\[\#3a362e\] {
    --tw-border-opacity: 1;
    border-color: rgb(58 54 46 / var(--tw-border-opacity))
}
.border-\[\#3a3a3a\] {
    --tw-border-opacity: 1;
    border-color: rgb(58 58 58 / var(--tw-border-opacity))
}
.border-\[\#3a3d45\] {
    --tw-border-opacity: 1;
    border-color: rgb(58 61 69 / var(--tw-border-opacity))
}
.border-\[\#3a3f49\] {
    --tw-border-opacity: 1;
    border-color: rgb(58 63 73 / var(--tw-border-opacity))
}
.border-\[\#3a5a6a\] {
    --tw-border-opacity: 1;
    border-color: rgb(58 90 106 / var(--tw-border-opacity))
}
.border-\[\#3a6a4a\] {
    --tw-border-opacity: 1;
    border-color: rgb(58 106 74 / var(--tw-border-opacity))
}
.border-\[\#3b2f13\] {
    --tw-border-opacity: 1;
    border-color: rgb(59 47 19 / var(--tw-border-opacity))
}
.border-\[\#3b6aa6\] {
    --tw-border-opacity: 1;
    border-color: rgb(59 106 166 / var(--tw-border-opacity))
}
.border-\[\#3b82f6\] {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity))
}
.border-\[\#3e3e42\] {
    --tw-border-opacity: 1;
    border-color: rgb(62 62 66 / var(--tw-border-opacity))
}
.border-\[\#3f7ad0\] {
    --tw-border-opacity: 1;
    border-color: rgb(63 122 208 / var(--tw-border-opacity))
}
.border-\[\#444444\] {
    --tw-border-opacity: 1;
    border-color: rgb(68 68 68 / var(--tw-border-opacity))
}
.border-\[\#44566a\] {
    --tw-border-opacity: 1;
    border-color: rgb(68 86 106 / var(--tw-border-opacity))
}
.border-\[\#4C5464\] {
    --tw-border-opacity: 1;
    border-color: rgb(76 84 100 / var(--tw-border-opacity))
}
.border-\[\#4a3768\] {
    --tw-border-opacity: 1;
    border-color: rgb(74 55 104 / var(--tw-border-opacity))
}
.border-\[\#4a4a4a\] {
    --tw-border-opacity: 1;
    border-color: rgb(74 74 74 / var(--tw-border-opacity))
}
.border-\[\#4a5060\] {
    --tw-border-opacity: 1;
    border-color: rgb(74 80 96 / var(--tw-border-opacity))
}
.border-\[\#4a5568\] {
    --tw-border-opacity: 1;
    border-color: rgb(74 85 104 / var(--tw-border-opacity))
}
.border-\[\#4ade80\] {
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity))
}
.border-\[\#4d4d4d\] {
    --tw-border-opacity: 1;
    border-color: rgb(77 77 77 / var(--tw-border-opacity))
}
.border-\[\#555555\] {
    --tw-border-opacity: 1;
    border-color: rgb(85 85 85 / var(--tw-border-opacity))
}
.border-\[\#555\] {
    --tw-border-opacity: 1;
    border-color: rgb(85 85 85 / var(--tw-border-opacity))
}
.border-\[\#57d6f0\] {
    --tw-border-opacity: 1;
    border-color: rgb(87 214 240 / var(--tw-border-opacity))
}
.border-\[\#5a2a2a\] {
    --tw-border-opacity: 1;
    border-color: rgb(90 42 42 / var(--tw-border-opacity))
}
.border-\[\#5a3a6a\] {
    --tw-border-opacity: 1;
    border-color: rgb(90 58 106 / var(--tw-border-opacity))
}
.border-\[\#5a5f6a\] {
    --tw-border-opacity: 1;
    border-color: rgb(90 95 106 / var(--tw-border-opacity))
}
.border-\[\#5b86be\] {
    --tw-border-opacity: 1;
    border-color: rgb(91 134 190 / var(--tw-border-opacity))
}
.border-\[\#5d5d5d\] {
    --tw-border-opacity: 1;
    border-color: rgb(93 93 93 / var(--tw-border-opacity))
}
.border-\[\#5d89c1\] {
    --tw-border-opacity: 1;
    border-color: rgb(93 137 193 / var(--tw-border-opacity))
}
.border-\[\#5ec8d8\]\/50 {
    border-color: rgb(94 200 216 / 0.5)
}
.border-\[\#5fe3a1\] {
    --tw-border-opacity: 1;
    border-color: rgb(95 227 161 / var(--tw-border-opacity))
}
.border-\[\#60a5fa\] {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity))
}
.border-\[\#65dcff\] {
    --tw-border-opacity: 1;
    border-color: rgb(101 220 255 / var(--tw-border-opacity))
}
.border-\[\#66d9b8\] {
    --tw-border-opacity: 1;
    border-color: rgb(102 217 184 / var(--tw-border-opacity))
}
.border-\[\#6a5432\] {
    --tw-border-opacity: 1;
    border-color: rgb(106 84 50 / var(--tw-border-opacity))
}
.border-\[\#6a6a6a\] {
    --tw-border-opacity: 1;
    border-color: rgb(106 106 106 / var(--tw-border-opacity))
}
.border-\[\#6d9fd0\] {
    --tw-border-opacity: 1;
    border-color: rgb(109 159 208 / var(--tw-border-opacity))
}
.border-\[\#6f9fd5\] {
    --tw-border-opacity: 1;
    border-color: rgb(111 159 213 / var(--tw-border-opacity))
}
.border-\[\#6fc7c0\] {
    --tw-border-opacity: 1;
    border-color: rgb(111 199 192 / var(--tw-border-opacity))
}
.border-\[\#73ff86\] {
    --tw-border-opacity: 1;
    border-color: rgb(115 255 134 / var(--tw-border-opacity))
}
.border-\[\#7a1c17\] {
    --tw-border-opacity: 1;
    border-color: rgb(122 28 23 / var(--tw-border-opacity))
}
.border-\[\#7ba7e0\] {
    --tw-border-opacity: 1;
    border-color: rgb(123 167 224 / var(--tw-border-opacity))
}
.border-\[\#7cb8ff\] {
    --tw-border-opacity: 1;
    border-color: rgb(124 184 255 / var(--tw-border-opacity))
}
.border-\[\#7ea8da\] {
    --tw-border-opacity: 1;
    border-color: rgb(126 168 218 / var(--tw-border-opacity))
}
.border-\[\#8a3a3a\] {
    --tw-border-opacity: 1;
    border-color: rgb(138 58 58 / var(--tw-border-opacity))
}
.border-\[\#8a5cff\] {
    --tw-border-opacity: 1;
    border-color: rgb(138 92 255 / var(--tw-border-opacity))
}
.border-\[\#8a6a3a\] {
    --tw-border-opacity: 1;
    border-color: rgb(138 106 58 / var(--tw-border-opacity))
}
.border-\[\#8ae0d0\] {
    --tw-border-opacity: 1;
    border-color: rgb(138 224 208 / var(--tw-border-opacity))
}
.border-\[\#8dffa1\] {
    --tw-border-opacity: 1;
    border-color: rgb(141 255 161 / var(--tw-border-opacity))
}
.border-\[\#8fd9a8\] {
    --tw-border-opacity: 1;
    border-color: rgb(143 217 168 / var(--tw-border-opacity))
}
.border-\[\#8fdcac\] {
    --tw-border-opacity: 1;
    border-color: rgb(143 220 172 / var(--tw-border-opacity))
}
.border-\[\#9aa8c4\] {
    --tw-border-opacity: 1;
    border-color: rgb(154 168 196 / var(--tw-border-opacity))
}
.border-\[\#C9F24D\] {
    --tw-border-opacity: 1;
    border-color: rgb(201 242 77 / var(--tw-border-opacity))
}
.border-\[\#E8B54A\] {
    --tw-border-opacity: 1;
    border-color: rgb(232 181 74 / var(--tw-border-opacity))
}
.border-\[\#E8B54A\]\/60 {
    border-color: rgb(232 181 74 / 0.6)
}
.border-\[\#FF4D6D\] {
    --tw-border-opacity: 1;
    border-color: rgb(255 77 109 / var(--tw-border-opacity))
}
.border-\[\#a8b4c8\] {
    --tw-border-opacity: 1;
    border-color: rgb(168 180 200 / var(--tw-border-opacity))
}
.border-\[\#a9b8e0\] {
    --tw-border-opacity: 1;
    border-color: rgb(169 184 224 / var(--tw-border-opacity))
}
.border-\[\#b48cff\] {
    --tw-border-opacity: 1;
    border-color: rgb(180 140 255 / var(--tw-border-opacity))
}
.border-\[\#b78ae0\] {
    --tw-border-opacity: 1;
    border-color: rgb(183 138 224 / var(--tw-border-opacity))
}
.border-\[\#c8b48a\] {
    --tw-border-opacity: 1;
    border-color: rgb(200 180 138 / var(--tw-border-opacity))
}
.border-\[\#c9f24d44\] {
    border-color: #c9f24d44
}
.border-\[\#c9f24d\] {
    --tw-border-opacity: 1;
    border-color: rgb(201 242 77 / var(--tw-border-opacity))
}
.border-\[\#d4b483\] {
    --tw-border-opacity: 1;
    border-color: rgb(212 180 131 / var(--tw-border-opacity))
}
.border-\[\#d8a06a\] {
    --tw-border-opacity: 1;
    border-color: rgb(216 160 106 / var(--tw-border-opacity))
}
.border-\[\#d9a441\] {
    --tw-border-opacity: 1;
    border-color: rgb(217 164 65 / var(--tw-border-opacity))
}
.border-\[\#dcefff\] {
    --tw-border-opacity: 1;
    border-color: rgb(220 239 255 / var(--tw-border-opacity))
}
.border-\[\#e05a5a\] {
    --tw-border-opacity: 1;
    border-color: rgb(224 90 90 / var(--tw-border-opacity))
}
.border-\[\#e06a8a\] {
    --tw-border-opacity: 1;
    border-color: rgb(224 106 138 / var(--tw-border-opacity))
}
.border-\[\#e08a4a\] {
    --tw-border-opacity: 1;
    border-color: rgb(224 138 74 / var(--tw-border-opacity))
}
.border-\[\#e0956a\] {
    --tw-border-opacity: 1;
    border-color: rgb(224 149 106 / var(--tw-border-opacity))
}
.border-\[\#e0c86a\] {
    --tw-border-opacity: 1;
    border-color: rgb(224 200 106 / var(--tw-border-opacity))
}
.border-\[\#e79ec4\] {
    --tw-border-opacity: 1;
    border-color: rgb(231 158 196 / var(--tw-border-opacity))
}
.border-\[\#e8c48a\] {
    --tw-border-opacity: 1;
    border-color: rgb(232 196 138 / var(--tw-border-opacity))
}
.border-\[\#f5fbff\] {
    --tw-border-opacity: 1;
    border-color: rgb(245 251 255 / var(--tw-border-opacity))
}
.border-\[\#ff5f6d\] {
    --tw-border-opacity: 1;
    border-color: rgb(255 95 109 / var(--tw-border-opacity))
}
.border-\[\#ff5f6d\]\/60 {
    border-color: rgb(255 95 109 / 0.6)
}
.border-\[\#ff6b5f\] {
    --tw-border-opacity: 1;
    border-color: rgb(255 107 95 / var(--tw-border-opacity))
}
.border-\[\#ff7a5c\] {
    --tw-border-opacity: 1;
    border-color: rgb(255 122 92 / var(--tw-border-opacity))
}
.border-\[\#ff7a7a\] {
    --tw-border-opacity: 1;
    border-color: rgb(255 122 122 / var(--tw-border-opacity))
}
.border-\[\#ff8a8a\] {
    --tw-border-opacity: 1;
    border-color: rgb(255 138 138 / var(--tw-border-opacity))
}
.border-\[\#ff8fb1\] {
    --tw-border-opacity: 1;
    border-color: rgb(255 143 177 / var(--tw-border-opacity))
}
.border-\[\#ffb454\] {
    --tw-border-opacity: 1;
    border-color: rgb(255 180 84 / var(--tw-border-opacity))
}
.border-\[\#ffcf4a\] {
    --tw-border-opacity: 1;
    border-color: rgb(255 207 74 / var(--tw-border-opacity))
}
.border-\[\#ffd16688\] {
    border-color: #ffd16688
}
.border-\[\#ffd479\] {
    --tw-border-opacity: 1;
    border-color: rgb(255 212 121 / var(--tw-border-opacity))
}
.border-\[\#ffffff88\] {
    border-color: #ffffff88
}
.border-\[--color-border\] {
    border-color: var(--color-border)
}
.border-\[color\:var\(--fx-accent\)\] {
    border-color: var(--fx-accent)
}
.border-\[color\:var\(--fx-field-edge\)\] {
    border-color: var(--fx-field-edge)
}
.border-\[color\:var\(--fx-quiet-edge\)\] {
    border-color: var(--fx-quiet-edge)
}
.border-\[color\:var\(--fx-strip-edge\)\] {
    border-color: var(--fx-strip-edge)
}
.border-amber-200\/25 {
    border-color: rgb(253 230 138 / 0.25)
}
.border-amber-400\/20 {
    border-color: rgb(251 191 36 / 0.2)
}
.border-amber-400\/25 {
    border-color: rgb(251 191 36 / 0.25)
}
.border-amber-500\/30 {
    border-color: rgb(245 158 11 / 0.3)
}
.border-black {
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity))
}
.border-black\/50 {
    border-color: rgb(0 0 0 / 0.5)
}
.border-blue-200 {
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity))
}
.border-blue-300 {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity))
}
.border-blue-400 {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity))
}
.border-blue-500 {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity))
}
.border-blue-500\/20 {
    border-color: rgb(59 130 246 / 0.2)
}
.border-blue-600 {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity))
}
.border-blue-900 {
    --tw-border-opacity: 1;
    border-color: rgb(30 58 138 / var(--tw-border-opacity))
}
.border-border\/50 {
    border-color: hsl(var(--border) / 0.5)
}
.border-current {
    border-color: currentColor
}
.border-cyan-400 {
    --tw-border-opacity: 1;
    border-color: rgb(34 211 238 / var(--tw-border-opacity))
}
.border-cyan-400\/20 {
    border-color: rgb(34 211 238 / 0.2)
}
.border-destructive {
    border-color: hsl(var(--destructive))
}
.border-destructive\/50 {
    border-color: hsl(var(--destructive) / 0.5)
}
.border-emerald-400 {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity))
}
.border-emerald-400\/30 {
    border-color: rgb(52 211 153 / 0.3)
}
.border-emerald-400\/35 {
    border-color: rgb(52 211 153 / 0.35)
}
.border-emerald-400\/40 {
    border-color: rgb(52 211 153 / 0.4)
}
.border-emerald-500 {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity))
}
.border-emerald-500\/20 {
    border-color: rgb(16 185 129 / 0.2)
}
.border-emerald-500\/40 {
    border-color: rgb(16 185 129 / 0.4)
}
.border-gray-100 {
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity))
}
.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity))
}
.border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity))
}
.border-gray-50 {
    --tw-border-opacity: 1;
    border-color: rgb(249 250 251 / var(--tw-border-opacity))
}
.border-gray-500 {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity))
}
.border-gray-600 {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity))
}
.border-gray-700 {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity))
}
.border-gray-700\/50 {
    border-color: rgb(55 65 81 / 0.5)
}
.border-gray-800 {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity))
}
.border-gray-900 {
    --tw-border-opacity: 1;
    border-color: rgb(17 24 39 / var(--tw-border-opacity))
}
.border-green-100 {
    --tw-border-opacity: 1;
    border-color: rgb(220 252 231 / var(--tw-border-opacity))
}
.border-green-200 {
    --tw-border-opacity: 1;
    border-color: rgb(187 247 208 / var(--tw-border-opacity))
}
.border-green-300 {
    --tw-border-opacity: 1;
    border-color: rgb(134 239 172 / var(--tw-border-opacity))
}
.border-green-400 {
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity))
}
.border-green-500 {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity))
}
.border-green-500\/50 {
    border-color: rgb(34 197 94 / 0.5)
}
.border-green-600 {
    --tw-border-opacity: 1;
    border-color: rgb(22 163 74 / var(--tw-border-opacity))
}
.border-green-700 {
    --tw-border-opacity: 1;
    border-color: rgb(21 128 61 / var(--tw-border-opacity))
}
.border-input {
    border-color: hsl(var(--input))
}
.border-neutral-600 {
    --tw-border-opacity: 1;
    border-color: rgb(82 82 82 / var(--tw-border-opacity))
}
.border-neutral-700 {
    --tw-border-opacity: 1;
    border-color: rgb(64 64 64 / var(--tw-border-opacity))
}
.border-neutral-800 {
    --tw-border-opacity: 1;
    border-color: rgb(38 38 38 / var(--tw-border-opacity))
}
.border-primary {
    border-color: hsl(var(--primary))
}
.border-purple-200 {
    --tw-border-opacity: 1;
    border-color: rgb(233 213 255 / var(--tw-border-opacity))
}
.border-purple-300 {
    --tw-border-opacity: 1;
    border-color: rgb(216 180 254 / var(--tw-border-opacity))
}
.border-purple-500 {
    --tw-border-opacity: 1;
    border-color: rgb(168 85 247 / var(--tw-border-opacity))
}
.border-purple-500\/20 {
    border-color: rgb(168 85 247 / 0.2)
}
.border-red-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 202 202 / var(--tw-border-opacity))
}
.border-red-400\/30 {
    border-color: rgb(248 113 113 / 0.3)
}
.border-red-400\/35 {
    border-color: rgb(248 113 113 / 0.35)
}
.border-red-500 {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity))
}
.border-red-500\/20 {
    border-color: rgb(239 68 68 / 0.2)
}
.border-red-500\/30 {
    border-color: rgb(239 68 68 / 0.3)
}
.border-red-500\/40 {
    border-color: rgb(239 68 68 / 0.4)
}
.border-red-500\/50 {
    border-color: rgb(239 68 68 / 0.5)
}
.border-red-600 {
    --tw-border-opacity: 1;
    border-color: rgb(220 38 38 / var(--tw-border-opacity))
}
.border-red-700 {
    --tw-border-opacity: 1;
    border-color: rgb(185 28 28 / var(--tw-border-opacity))
}
.border-red-800 {
    --tw-border-opacity: 1;
    border-color: rgb(153 27 27 / var(--tw-border-opacity))
}
.border-rose-400\/20 {
    border-color: rgb(251 113 133 / 0.2)
}
.border-sidebar-border {
    border-color: hsl(var(--sidebar-border))
}
.border-teal-500\/20 {
    border-color: rgb(20 184 166 / 0.2)
}
.border-transparent {
    border-color: transparent
}
.border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity))
}
.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1)
}
.border-white\/15 {
    border-color: rgb(255 255 255 / 0.15)
}
.border-white\/20 {
    border-color: rgb(255 255 255 / 0.2)
}
.border-white\/45 {
    border-color: rgb(255 255 255 / 0.45)
}
.border-white\/5 {
    border-color: rgb(255 255 255 / 0.05)
}
.border-white\/80 {
    border-color: rgb(255 255 255 / 0.8)
}
.border-white\/\[0\.06\] {
    border-color: rgb(255 255 255 / 0.06)
}
.border-yellow-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 240 138 / var(--tw-border-opacity))
}
.border-yellow-500 {
    --tw-border-opacity: 1;
    border-color: rgb(234 179 8 / var(--tw-border-opacity))
}
.border-yellow-500\/20 {
    border-color: rgb(234 179 8 / 0.2)
}
.border-yellow-500\/30 {
    border-color: rgb(234 179 8 / 0.3)
}
.border-yellow-600 {
    --tw-border-opacity: 1;
    border-color: rgb(202 138 4 / var(--tw-border-opacity))
}
.border-zinc-700 {
    --tw-border-opacity: 1;
    border-color: rgb(63 63 70 / var(--tw-border-opacity))
}
.border-l-\[color\:var\(--fx-accent\)\] {
    border-left-color: var(--fx-accent)
}
.border-l-gray-400 {
    --tw-border-opacity: 1;
    border-left-color: rgb(156 163 175 / var(--tw-border-opacity))
}
.border-l-transparent {
    border-left-color: transparent
}
.border-r-transparent {
    border-right-color: transparent
}
.border-t-amber-300 {
    --tw-border-opacity: 1;
    border-top-color: rgb(252 211 77 / var(--tw-border-opacity))
}
.border-t-blue-600 {
    --tw-border-opacity: 1;
    border-top-color: rgb(37 99 235 / var(--tw-border-opacity))
}
.border-t-transparent {
    border-top-color: transparent
}
.border-t-white {
    --tw-border-opacity: 1;
    border-top-color: rgb(255 255 255 / var(--tw-border-opacity))
}
.bg {
    background-color: hsl(var(--background))
}
.bg-\[\#00000099\] {
    background-color: #00000099
}
.bg-\[\#000000cc\] {
    background-color: #000000cc
}
.bg-\[\#0066CC\] {
    --tw-bg-opacity: 1;
    background-color: rgb(0 102 204 / var(--tw-bg-opacity))
}
.bg-\[\#0077DD\] {
    --tw-bg-opacity: 1;
    background-color: rgb(0 119 221 / var(--tw-bg-opacity))
}
.bg-\[\#00AA00\] {
    --tw-bg-opacity: 1;
    background-color: rgb(0 170 0 / var(--tw-bg-opacity))
}
.bg-\[\#00FF00\] {
    --tw-bg-opacity: 1;
    background-color: rgb(0 255 0 / var(--tw-bg-opacity))
}
.bg-\[\#00ff00\] {
    --tw-bg-opacity: 1;
    background-color: rgb(0 255 0 / var(--tw-bg-opacity))
}
.bg-\[\#08090b\] {
    --tw-bg-opacity: 1;
    background-color: rgb(8 9 11 / var(--tw-bg-opacity))
}
.bg-\[\#08090c\] {
    --tw-bg-opacity: 1;
    background-color: rgb(8 9 12 / var(--tw-bg-opacity))
}
.bg-\[\#081420\] {
    --tw-bg-opacity: 1;
    background-color: rgb(8 20 32 / var(--tw-bg-opacity))
}
.bg-\[\#09090b\] {
    --tw-bg-opacity: 1;
    background-color: rgb(9 9 11 / var(--tw-bg-opacity))
}
.bg-\[\#0B0C10\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 12 16 / var(--tw-bg-opacity))
}
.bg-\[\#0F2320\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 35 32 / var(--tw-bg-opacity))
}
.bg-\[\#0a0806\] {
    --tw-bg-opacity: 1;
    background-color: rgb(10 8 6 / var(--tw-bg-opacity))
}
.bg-\[\#0a0810\] {
    --tw-bg-opacity: 1;
    background-color: rgb(10 8 16 / var(--tw-bg-opacity))
}
.bg-\[\#0a0a0a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(10 10 10 / var(--tw-bg-opacity))
}
.bg-\[\#0a0a0c\] {
    --tw-bg-opacity: 1;
    background-color: rgb(10 10 12 / var(--tw-bg-opacity))
}
.bg-\[\#0a0b0e\] {
    --tw-bg-opacity: 1;
    background-color: rgb(10 11 14 / var(--tw-bg-opacity))
}
.bg-\[\#0a1410\] {
    --tw-bg-opacity: 1;
    background-color: rgb(10 20 16 / var(--tw-bg-opacity))
}
.bg-\[\#0a1a2a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(10 26 42 / var(--tw-bg-opacity))
}
.bg-\[\#0b0b0b\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 11 11 / var(--tw-bg-opacity))
}
.bg-\[\#0b0b0b\]\/95 {
    background-color: rgb(11 11 11 / 0.95)
}
.bg-\[\#0b0b0f\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 11 15 / var(--tw-bg-opacity))
}
.bg-\[\#0b0c0f\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 12 15 / var(--tw-bg-opacity))
}
.bg-\[\#0b0c10\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 12 16 / var(--tw-bg-opacity))
}
.bg-\[\#0b0d10\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 13 16 / var(--tw-bg-opacity))
}
.bg-\[\#0b1a33\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 26 51 / var(--tw-bg-opacity))
}
.bg-\[\#0b1b3a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 27 58 / var(--tw-bg-opacity))
}
.bg-\[\#0b2c17\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 44 23 / var(--tw-bg-opacity))
}
.bg-\[\#0b2c39\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 44 57 / var(--tw-bg-opacity))
}
.bg-\[\#0d0d0d\] {
    --tw-bg-opacity: 1;
    background-color: rgb(13 13 13 / var(--tw-bg-opacity))
}
.bg-\[\#0d0d10\] {
    --tw-bg-opacity: 1;
    background-color: rgb(13 13 16 / var(--tw-bg-opacity))
}
.bg-\[\#0d0e11\] {
    --tw-bg-opacity: 1;
    background-color: rgb(13 14 17 / var(--tw-bg-opacity))
}
.bg-\[\#0d0e12\] {
    --tw-bg-opacity: 1;
    background-color: rgb(13 14 18 / var(--tw-bg-opacity))
}
.bg-\[\#0d1a13\] {
    --tw-bg-opacity: 1;
    background-color: rgb(13 26 19 / var(--tw-bg-opacity))
}
.bg-\[\#0d2236\] {
    --tw-bg-opacity: 1;
    background-color: rgb(13 34 54 / var(--tw-bg-opacity))
}
.bg-\[\#0d2444\] {
    --tw-bg-opacity: 1;
    background-color: rgb(13 36 68 / var(--tw-bg-opacity))
}
.bg-\[\#0d2a1e\] {
    --tw-bg-opacity: 1;
    background-color: rgb(13 42 30 / var(--tw-bg-opacity))
}
.bg-\[\#0e0d0b\] {
    --tw-bg-opacity: 1;
    background-color: rgb(14 13 11 / var(--tw-bg-opacity))
}
.bg-\[\#0e2418\] {
    --tw-bg-opacity: 1;
    background-color: rgb(14 36 24 / var(--tw-bg-opacity))
}
.bg-\[\#0f0f0f\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 15 15 / var(--tw-bg-opacity))
}
.bg-\[\#0f0f11\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 15 17 / var(--tw-bg-opacity))
}
.bg-\[\#0f0f14\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 15 20 / var(--tw-bg-opacity))
}
.bg-\[\#0f1013\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 16 19 / var(--tw-bg-opacity))
}
.bg-\[\#0f1014\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 16 20 / var(--tw-bg-opacity))
}
.bg-\[\#0f264a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 38 74 / var(--tw-bg-opacity))
}
.bg-\[\#0f2c2a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 44 42 / var(--tw-bg-opacity))
}
.bg-\[\#100c07\] {
    --tw-bg-opacity: 1;
    background-color: rgb(16 12 7 / var(--tw-bg-opacity))
}
.bg-\[\#101010\] {
    --tw-bg-opacity: 1;
    background-color: rgb(16 16 16 / var(--tw-bg-opacity))
}
.bg-\[\#101016\] {
    --tw-bg-opacity: 1;
    background-color: rgb(16 16 22 / var(--tw-bg-opacity))
}
.bg-\[\#101114\] {
    --tw-bg-opacity: 1;
    background-color: rgb(16 17 20 / var(--tw-bg-opacity))
}
.bg-\[\#101114\]\/90 {
    background-color: rgb(16 17 20 / 0.9)
}
.bg-\[\#101216\] {
    --tw-bg-opacity: 1;
    background-color: rgb(16 18 22 / var(--tw-bg-opacity))
}
.bg-\[\#101218\] {
    --tw-bg-opacity: 1;
    background-color: rgb(16 18 24 / var(--tw-bg-opacity))
}
.bg-\[\#101418\] {
    --tw-bg-opacity: 1;
    background-color: rgb(16 20 24 / var(--tw-bg-opacity))
}
.bg-\[\#10151d\] {
    --tw-bg-opacity: 1;
    background-color: rgb(16 21 29 / var(--tw-bg-opacity))
}
.bg-\[\#101c28\] {
    --tw-bg-opacity: 1;
    background-color: rgb(16 28 40 / var(--tw-bg-opacity))
}
.bg-\[\#11100d\] {
    --tw-bg-opacity: 1;
    background-color: rgb(17 16 13 / var(--tw-bg-opacity))
}
.bg-\[\#111111\] {
    --tw-bg-opacity: 1;
    background-color: rgb(17 17 17 / var(--tw-bg-opacity))
}
.bg-\[\#111113\] {
    --tw-bg-opacity: 1;
    background-color: rgb(17 17 19 / var(--tw-bg-opacity))
}
.bg-\[\#111114\] {
    --tw-bg-opacity: 1;
    background-color: rgb(17 17 20 / var(--tw-bg-opacity))
}
.bg-\[\#111116\] {
    --tw-bg-opacity: 1;
    background-color: rgb(17 17 22 / var(--tw-bg-opacity))
}
.bg-\[\#111318\] {
    --tw-bg-opacity: 1;
    background-color: rgb(17 19 24 / var(--tw-bg-opacity))
}
.bg-\[\#11302b\] {
    --tw-bg-opacity: 1;
    background-color: rgb(17 48 43 / var(--tw-bg-opacity))
}
.bg-\[\#120d08\] {
    --tw-bg-opacity: 1;
    background-color: rgb(18 13 8 / var(--tw-bg-opacity))
}
.bg-\[\#121212\] {
    --tw-bg-opacity: 1;
    background-color: rgb(18 18 18 / var(--tw-bg-opacity))
}
.bg-\[\#122636\] {
    --tw-bg-opacity: 1;
    background-color: rgb(18 38 54 / var(--tw-bg-opacity))
}
.bg-\[\#122a24\] {
    --tw-bg-opacity: 1;
    background-color: rgb(18 42 36 / var(--tw-bg-opacity))
}
.bg-\[\#12452e\] {
    --tw-bg-opacity: 1;
    background-color: rgb(18 69 46 / var(--tw-bg-opacity))
}
.bg-\[\#140e1c\] {
    --tw-bg-opacity: 1;
    background-color: rgb(20 14 28 / var(--tw-bg-opacity))
}
.bg-\[\#141210\] {
    --tw-bg-opacity: 1;
    background-color: rgb(20 18 16 / var(--tw-bg-opacity))
}
.bg-\[\#141414\] {
    --tw-bg-opacity: 1;
    background-color: rgb(20 20 20 / var(--tw-bg-opacity))
}
.bg-\[\#14161a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(20 22 26 / var(--tw-bg-opacity))
}
.bg-\[\#141620\] {
    --tw-bg-opacity: 1;
    background-color: rgb(20 22 32 / var(--tw-bg-opacity))
}
.bg-\[\#14171F\] {
    --tw-bg-opacity: 1;
    background-color: rgb(20 23 31 / var(--tw-bg-opacity))
}
.bg-\[\#14171F\]\/95 {
    background-color: rgb(20 23 31 / 0.95)
}
.bg-\[\#14212a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(20 33 42 / var(--tw-bg-opacity))
}
.bg-\[\#14261a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(20 38 26 / var(--tw-bg-opacity))
}
.bg-\[\#14532d\] {
    --tw-bg-opacity: 1;
    background-color: rgb(20 83 45 / var(--tw-bg-opacity))
}
.bg-\[\#151515\] {
    --tw-bg-opacity: 1;
    background-color: rgb(21 21 21 / var(--tw-bg-opacity))
}
.bg-\[\#151517\] {
    --tw-bg-opacity: 1;
    background-color: rgb(21 21 23 / var(--tw-bg-opacity))
}
.bg-\[\#15151b\] {
    --tw-bg-opacity: 1;
    background-color: rgb(21 21 27 / var(--tw-bg-opacity))
}
.bg-\[\#15171d\] {
    --tw-bg-opacity: 1;
    background-color: rgb(21 23 29 / var(--tw-bg-opacity))
}
.bg-\[\#15376b\] {
    --tw-bg-opacity: 1;
    background-color: rgb(21 55 107 / var(--tw-bg-opacity))
}
.bg-\[\#1550a7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(21 80 167 / var(--tw-bg-opacity))
}
.bg-\[\#161616\] {
    --tw-bg-opacity: 1;
    background-color: rgb(22 22 22 / var(--tw-bg-opacity))
}
.bg-\[\#161A22\] {
    --tw-bg-opacity: 1;
    background-color: rgb(22 26 34 / var(--tw-bg-opacity))
}
.bg-\[\#161d28\] {
    --tw-bg-opacity: 1;
    background-color: rgb(22 29 40 / var(--tw-bg-opacity))
}
.bg-\[\#16202e\] {
    --tw-bg-opacity: 1;
    background-color: rgb(22 32 46 / var(--tw-bg-opacity))
}
.bg-\[\#16212D\] {
    --tw-bg-opacity: 1;
    background-color: rgb(22 33 45 / var(--tw-bg-opacity))
}
.bg-\[\#1674eb\] {
    --tw-bg-opacity: 1;
    background-color: rgb(22 116 235 / var(--tw-bg-opacity))
}
.bg-\[\#17130a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(23 19 10 / var(--tw-bg-opacity))
}
.bg-\[\#171717\] {
    --tw-bg-opacity: 1;
    background-color: rgb(23 23 23 / var(--tw-bg-opacity))
}
.bg-\[\#172019\] {
    --tw-bg-opacity: 1;
    background-color: rgb(23 32 25 / var(--tw-bg-opacity))
}
.bg-\[\#17202c\] {
    --tw-bg-opacity: 1;
    background-color: rgb(23 32 44 / var(--tw-bg-opacity))
}
.bg-\[\#173a24\] {
    --tw-bg-opacity: 1;
    background-color: rgb(23 58 36 / var(--tw-bg-opacity))
}
.bg-\[\#181818\] {
    --tw-bg-opacity: 1;
    background-color: rgb(24 24 24 / var(--tw-bg-opacity))
}
.bg-\[\#1871e4\] {
    --tw-bg-opacity: 1;
    background-color: rgb(24 113 228 / var(--tw-bg-opacity))
}
.bg-\[\#18d29f\] {
    --tw-bg-opacity: 1;
    background-color: rgb(24 210 159 / var(--tw-bg-opacity))
}
.bg-\[\#18d29f\]\/15 {
    background-color: rgb(24 210 159 / 0.15)
}
.bg-\[\#18d29f\]\/\[0\.05\] {
    background-color: rgb(24 210 159 / 0.05)
}
.bg-\[\#18d29f\]\/\[0\.09\] {
    background-color: rgb(24 210 159 / 0.09)
}
.bg-\[\#1A1A1A\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 26 26 / var(--tw-bg-opacity))
}
.bg-\[\#1A1E28\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 30 40 / var(--tw-bg-opacity))
}
.bg-\[\#1B2110\] {
    --tw-bg-opacity: 1;
    background-color: rgb(27 33 16 / var(--tw-bg-opacity))
}
.bg-\[\#1F2530\] {
    --tw-bg-opacity: 1;
    background-color: rgb(31 37 48 / var(--tw-bg-opacity))
}
.bg-\[\#1a1625\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 22 37 / var(--tw-bg-opacity))
}
.bg-\[\#1a1a1a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 26 26 / var(--tw-bg-opacity))
}
.bg-\[\#1a1c22\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 28 34 / var(--tw-bg-opacity))
}
.bg-\[\#1a1f2e\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 31 46 / var(--tw-bg-opacity))
}
.bg-\[\#1a2030\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 32 48 / var(--tw-bg-opacity))
}
.bg-\[\#1a2f4a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 47 74 / var(--tw-bg-opacity))
}
.bg-\[\#1a3a2a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 58 42 / var(--tw-bg-opacity))
}
.bg-\[\#1b2230\] {
    --tw-bg-opacity: 1;
    background-color: rgb(27 34 48 / var(--tw-bg-opacity))
}
.bg-\[\#1b2636\] {
    --tw-bg-opacity: 1;
    background-color: rgb(27 38 54 / var(--tw-bg-opacity))
}
.bg-\[\#1c0e0e\] {
    --tw-bg-opacity: 1;
    background-color: rgb(28 14 14 / var(--tw-bg-opacity))
}
.bg-\[\#1c1408\] {
    --tw-bg-opacity: 1;
    background-color: rgb(28 20 8 / var(--tw-bg-opacity))
}
.bg-\[\#1c1428\] {
    --tw-bg-opacity: 1;
    background-color: rgb(28 20 40 / var(--tw-bg-opacity))
}
.bg-\[\#1c1c1c\] {
    --tw-bg-opacity: 1;
    background-color: rgb(28 28 28 / var(--tw-bg-opacity))
}
.bg-\[\#1c1e24\] {
    --tw-bg-opacity: 1;
    background-color: rgb(28 30 36 / var(--tw-bg-opacity))
}
.bg-\[\#1d1b17\] {
    --tw-bg-opacity: 1;
    background-color: rgb(29 27 23 / var(--tw-bg-opacity))
}
.bg-\[\#1e1428\] {
    --tw-bg-opacity: 1;
    background-color: rgb(30 20 40 / var(--tw-bg-opacity))
}
.bg-\[\#1e1e1e\] {
    --tw-bg-opacity: 1;
    background-color: rgb(30 30 30 / var(--tw-bg-opacity))
}
.bg-\[\#1e1e22\] {
    --tw-bg-opacity: 1;
    background-color: rgb(30 30 34 / var(--tw-bg-opacity))
}
.bg-\[\#1f2a1f\] {
    --tw-bg-opacity: 1;
    background-color: rgb(31 42 31 / var(--tw-bg-opacity))
}
.bg-\[\#20262F\] {
    --tw-bg-opacity: 1;
    background-color: rgb(32 38 47 / var(--tw-bg-opacity))
}
.bg-\[\#213a57\] {
    --tw-bg-opacity: 1;
    background-color: rgb(33 58 87 / var(--tw-bg-opacity))
}
.bg-\[\#221244\] {
    --tw-bg-opacity: 1;
    background-color: rgb(34 18 68 / var(--tw-bg-opacity))
}
.bg-\[\#222222\] {
    --tw-bg-opacity: 1;
    background-color: rgb(34 34 34 / var(--tw-bg-opacity))
}
.bg-\[\#22242b\] {
    --tw-bg-opacity: 1;
    background-color: rgb(34 36 43 / var(--tw-bg-opacity))
}
.bg-\[\#222\] {
    --tw-bg-opacity: 1;
    background-color: rgb(34 34 34 / var(--tw-bg-opacity))
}
.bg-\[\#22331f\] {
    --tw-bg-opacity: 1;
    background-color: rgb(34 51 31 / var(--tw-bg-opacity))
}
.bg-\[\#22c55e\] {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity))
}
.bg-\[\#232326\] {
    --tw-bg-opacity: 1;
    background-color: rgb(35 35 38 / var(--tw-bg-opacity))
}
.bg-\[\#240e0e\] {
    --tw-bg-opacity: 1;
    background-color: rgb(36 14 14 / var(--tw-bg-opacity))
}
.bg-\[\#241a0e\] {
    --tw-bg-opacity: 1;
    background-color: rgb(36 26 14 / var(--tw-bg-opacity))
}
.bg-\[\#241a30\] {
    --tw-bg-opacity: 1;
    background-color: rgb(36 26 48 / var(--tw-bg-opacity))
}
.bg-\[\#243A2D\] {
    --tw-bg-opacity: 1;
    background-color: rgb(36 58 45 / var(--tw-bg-opacity))
}
.bg-\[\#262626\] {
    --tw-bg-opacity: 1;
    background-color: rgb(38 38 38 / var(--tw-bg-opacity))
}
.bg-\[\#283447\] {
    --tw-bg-opacity: 1;
    background-color: rgb(40 52 71 / var(--tw-bg-opacity))
}
.bg-\[\#2A2A2A\] {
    --tw-bg-opacity: 1;
    background-color: rgb(42 42 42 / var(--tw-bg-opacity))
}
.bg-\[\#2BE07A\] {
    --tw-bg-opacity: 1;
    background-color: rgb(43 224 122 / var(--tw-bg-opacity))
}
.bg-\[\#2D2D2D\] {
    --tw-bg-opacity: 1;
    background-color: rgb(45 45 45 / var(--tw-bg-opacity))
}
.bg-\[\#2a0f0d\] {
    --tw-bg-opacity: 1;
    background-color: rgb(42 15 13 / var(--tw-bg-opacity))
}
.bg-\[\#2a1214\] {
    --tw-bg-opacity: 1;
    background-color: rgb(42 18 20 / var(--tw-bg-opacity))
}
.bg-\[\#2a1218\] {
    --tw-bg-opacity: 1;
    background-color: rgb(42 18 24 / var(--tw-bg-opacity))
}
.bg-\[\#2a1219\] {
    --tw-bg-opacity: 1;
    background-color: rgb(42 18 25 / var(--tw-bg-opacity))
}
.bg-\[\#2a1a0e\] {
    --tw-bg-opacity: 1;
    background-color: rgb(42 26 14 / var(--tw-bg-opacity))
}
.bg-\[\#2a1d0c\] {
    --tw-bg-opacity: 1;
    background-color: rgb(42 29 12 / var(--tw-bg-opacity))
}
.bg-\[\#2a230f\] {
    --tw-bg-opacity: 1;
    background-color: rgb(42 35 15 / var(--tw-bg-opacity))
}
.bg-\[\#2a2a2a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(42 42 42 / var(--tw-bg-opacity))
}
.bg-\[\#2b3a12\] {
    --tw-bg-opacity: 1;
    background-color: rgb(43 58 18 / var(--tw-bg-opacity))
}
.bg-\[\#2b3b55\]\/70 {
    background-color: rgb(43 59 85 / 0.7)
}
.bg-\[\#2c1414\] {
    --tw-bg-opacity: 1;
    background-color: rgb(44 20 20 / var(--tw-bg-opacity))
}
.bg-\[\#2c151d\] {
    --tw-bg-opacity: 1;
    background-color: rgb(44 21 29 / var(--tw-bg-opacity))
}
.bg-\[\#2c1626\] {
    --tw-bg-opacity: 1;
    background-color: rgb(44 22 38 / var(--tw-bg-opacity))
}
.bg-\[\#2c2417\] {
    --tw-bg-opacity: 1;
    background-color: rgb(44 36 23 / var(--tw-bg-opacity))
}
.bg-\[\#2c2714\] {
    --tw-bg-opacity: 1;
    background-color: rgb(44 39 20 / var(--tw-bg-opacity))
}
.bg-\[\#2c2c2c\] {
    --tw-bg-opacity: 1;
    background-color: rgb(44 44 44 / var(--tw-bg-opacity))
}
.bg-\[\#2d2d2d\] {
    --tw-bg-opacity: 1;
    background-color: rgb(45 45 45 / var(--tw-bg-opacity))
}
.bg-\[\#2e2a1d\] {
    --tw-bg-opacity: 1;
    background-color: rgb(46 42 29 / var(--tw-bg-opacity))
}
.bg-\[\#2f8a42\] {
    --tw-bg-opacity: 1;
    background-color: rgb(47 138 66 / var(--tw-bg-opacity))
}
.bg-\[\#33150f\] {
    --tw-bg-opacity: 1;
    background-color: rgb(51 21 15 / var(--tw-bg-opacity))
}
.bg-\[\#33260f\] {
    --tw-bg-opacity: 1;
    background-color: rgb(51 38 15 / var(--tw-bg-opacity))
}
.bg-\[\#333333\] {
    --tw-bg-opacity: 1;
    background-color: rgb(51 51 51 / var(--tw-bg-opacity))
}
.bg-\[\#333A33\] {
    --tw-bg-opacity: 1;
    background-color: rgb(51 58 51 / var(--tw-bg-opacity))
}
.bg-\[\#333\] {
    --tw-bg-opacity: 1;
    background-color: rgb(51 51 51 / var(--tw-bg-opacity))
}
.bg-\[\#334155\] {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity))
}
.bg-\[\#3A3333\] {
    --tw-bg-opacity: 1;
    background-color: rgb(58 51 51 / var(--tw-bg-opacity))
}
.bg-\[\#3D3D3D\] {
    --tw-bg-opacity: 1;
    background-color: rgb(61 61 61 / var(--tw-bg-opacity))
}
.bg-\[\#3a1420\] {
    --tw-bg-opacity: 1;
    background-color: rgb(58 20 32 / var(--tw-bg-opacity))
}
.bg-\[\#3a2020\] {
    --tw-bg-opacity: 1;
    background-color: rgb(58 32 32 / var(--tw-bg-opacity))
}
.bg-\[\#3a2f1c\] {
    --tw-bg-opacity: 1;
    background-color: rgb(58 47 28 / var(--tw-bg-opacity))
}
.bg-\[\#3a3126\] {
    --tw-bg-opacity: 1;
    background-color: rgb(58 49 38 / var(--tw-bg-opacity))
}
.bg-\[\#3a3a3a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(58 58 58 / var(--tw-bg-opacity))
}
.bg-\[\#3a3d45\] {
    --tw-bg-opacity: 1;
    background-color: rgb(58 61 69 / var(--tw-bg-opacity))
}
.bg-\[\#3b82f6\] {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity))
}
.bg-\[\#3c5f3c\] {
    --tw-bg-opacity: 1;
    background-color: rgb(60 95 60 / var(--tw-bg-opacity))
}
.bg-\[\#3d4045\] {
    --tw-bg-opacity: 1;
    background-color: rgb(61 64 69 / var(--tw-bg-opacity))
}
.bg-\[\#43227a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(67 34 122 / var(--tw-bg-opacity))
}
.bg-\[\#444444\] {
    --tw-bg-opacity: 1;
    background-color: rgb(68 68 68 / var(--tw-bg-opacity))
}
.bg-\[\#49e06a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(73 224 106 / var(--tw-bg-opacity))
}
.bg-\[\#4A4A4A\] {
    --tw-bg-opacity: 1;
    background-color: rgb(74 74 74 / var(--tw-bg-opacity))
}
.bg-\[\#4CAF50\] {
    --tw-bg-opacity: 1;
    background-color: rgb(76 175 80 / var(--tw-bg-opacity))
}
.bg-\[\#4a1230\] {
    --tw-bg-opacity: 1;
    background-color: rgb(74 18 48 / var(--tw-bg-opacity))
}
.bg-\[\#4a1d63\] {
    --tw-bg-opacity: 1;
    background-color: rgb(74 29 99 / var(--tw-bg-opacity))
}
.bg-\[\#4a3a12\] {
    --tw-bg-opacity: 1;
    background-color: rgb(74 58 18 / var(--tw-bg-opacity))
}
.bg-\[\#4a4740\] {
    --tw-bg-opacity: 1;
    background-color: rgb(74 71 64 / var(--tw-bg-opacity))
}
.bg-\[\#4b435f\] {
    --tw-bg-opacity: 1;
    background-color: rgb(75 67 95 / var(--tw-bg-opacity))
}
.bg-\[\#547ca8\] {
    --tw-bg-opacity: 1;
    background-color: rgb(84 124 168 / var(--tw-bg-opacity))
}
.bg-\[\#555555\] {
    --tw-bg-opacity: 1;
    background-color: rgb(85 85 85 / var(--tw-bg-opacity))
}
.bg-\[\#5a6070\] {
    --tw-bg-opacity: 1;
    background-color: rgb(90 96 112 / var(--tw-bg-opacity))
}
.bg-\[\#60a5fa\] {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity))
}
.bg-\[\#65dc9a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(101 220 154 / var(--tw-bg-opacity))
}
.bg-\[\#663399\] {
    --tw-bg-opacity: 1;
    background-color: rgb(102 51 153 / var(--tw-bg-opacity))
}
.bg-\[\#666666\] {
    --tw-bg-opacity: 1;
    background-color: rgb(102 102 102 / var(--tw-bg-opacity))
}
.bg-\[\#67c3f0\] {
    --tw-bg-opacity: 1;
    background-color: rgb(103 195 240 / var(--tw-bg-opacity))
}
.bg-\[\#6b21a8\] {
    --tw-bg-opacity: 1;
    background-color: rgb(107 33 168 / var(--tw-bg-opacity))
}
.bg-\[\#73ff86\] {
    --tw-bg-opacity: 1;
    background-color: rgb(115 255 134 / var(--tw-bg-opacity))
}
.bg-\[\#79b1ff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(121 177 255 / var(--tw-bg-opacity))
}
.bg-\[\#7a2453\] {
    --tw-bg-opacity: 1;
    background-color: rgb(122 36 83 / var(--tw-bg-opacity))
}
.bg-\[\#7a2a2a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(122 42 42 / var(--tw-bg-opacity))
}
.bg-\[\#7a2b2b\] {
    --tw-bg-opacity: 1;
    background-color: rgb(122 43 43 / var(--tw-bg-opacity))
}
.bg-\[\#7db9ee\] {
    --tw-bg-opacity: 1;
    background-color: rgb(125 185 238 / var(--tw-bg-opacity))
}
.bg-\[\#8A2BE2\] {
    --tw-bg-opacity: 1;
    background-color: rgb(138 43 226 / var(--tw-bg-opacity))
}
.bg-\[\#8cc1f4\] {
    --tw-bg-opacity: 1;
    background-color: rgb(140 193 244 / var(--tw-bg-opacity))
}
.bg-\[\#9333ea\] {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity))
}
.bg-\[\#9bd0ff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(155 208 255 / var(--tw-bg-opacity))
}
.bg-\[\#9df0a4\] {
    --tw-bg-opacity: 1;
    background-color: rgb(157 240 164 / var(--tw-bg-opacity))
}
.bg-\[\#CC0066\] {
    --tw-bg-opacity: 1;
    background-color: rgb(204 0 102 / var(--tw-bg-opacity))
}
.bg-\[\#DD0077\] {
    --tw-bg-opacity: 1;
    background-color: rgb(221 0 119 / var(--tw-bg-opacity))
}
.bg-\[\#EDEFF5\] {
    --tw-bg-opacity: 1;
    background-color: rgb(237 239 245 / var(--tw-bg-opacity))
}
.bg-\[\#FF4D6D\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 77 109 / var(--tw-bg-opacity))
}
.bg-\[\#FF5500\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 85 0 / var(--tw-bg-opacity))
}
.bg-\[\#FF6611\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 102 17 / var(--tw-bg-opacity))
}
.bg-\[\#FF6B35\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 107 53 / var(--tw-bg-opacity))
}
.bg-\[\#FF6B6B\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 107 107 / var(--tw-bg-opacity))
}
.bg-\[\#FF9800\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 152 0 / var(--tw-bg-opacity))
}
.bg-\[\#FFA726\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 167 38 / var(--tw-bg-opacity))
}
.bg-\[\#a855f7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(168 85 247 / var(--tw-bg-opacity))
}
.bg-\[\#a8cbff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(168 203 255 / var(--tw-bg-opacity))
}
.bg-\[\#b8d7ff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(184 215 255 / var(--tw-bg-opacity))
}
.bg-\[\#b9d3f7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(185 211 247 / var(--tw-bg-opacity))
}
.bg-\[\#b9d8f6\] {
    --tw-bg-opacity: 1;
    background-color: rgb(185 216 246 / var(--tw-bg-opacity))
}
.bg-\[\#b9dcff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(185 220 255 / var(--tw-bg-opacity))
}
.bg-\[\#bfd0ea\] {
    --tw-bg-opacity: 1;
    background-color: rgb(191 208 234 / var(--tw-bg-opacity))
}
.bg-\[\#c7e4ff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(199 228 255 / var(--tw-bg-opacity))
}
.bg-\[\#c9f24d0f\] {
    background-color: #c9f24d0f
}
.bg-\[\#cae5fb\] {
    --tw-bg-opacity: 1;
    background-color: rgb(202 229 251 / var(--tw-bg-opacity))
}
.bg-\[\#cfe7ff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(207 231 255 / var(--tw-bg-opacity))
}
.bg-\[\#d1d5db\] {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity))
}
.bg-\[\#d5e9fb\] {
    --tw-bg-opacity: 1;
    background-color: rgb(213 233 251 / var(--tw-bg-opacity))
}
.bg-\[\#d8ecff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(216 236 255 / var(--tw-bg-opacity))
}
.bg-\[\#dcecff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(220 236 255 / var(--tw-bg-opacity))
}
.bg-\[\#e6f0ff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(230 240 255 / var(--tw-bg-opacity))
}
.bg-\[\#e8c48a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(232 196 138 / var(--tw-bg-opacity))
}
.bg-\[\#e8dcc0\] {
    --tw-bg-opacity: 1;
    background-color: rgb(232 220 192 / var(--tw-bg-opacity))
}
.bg-\[\#eeeeee\] {
    --tw-bg-opacity: 1;
    background-color: rgb(238 238 238 / var(--tw-bg-opacity))
}
.bg-\[\#ef4444\] {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity))
}
.bg-\[\#f3e8ff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity))
}
.bg-\[\#f5d76e\] {
    --tw-bg-opacity: 1;
    background-color: rgb(245 215 110 / var(--tw-bg-opacity))
}
.bg-\[\#f5d76e\]\/\[0\.05\] {
    background-color: rgb(245 215 110 / 0.05)
}
.bg-\[\#f5d76e\]\/\[0\.06\] {
    background-color: rgb(245 215 110 / 0.06)
}
.bg-\[\#fef3c7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity))
}
.bg-\[\#ff3b3b\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 59 59 / var(--tw-bg-opacity))
}
.bg-\[\#ff4da6\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 77 166 / var(--tw-bg-opacity))
}
.bg-\[\#ff5db1\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 93 177 / var(--tw-bg-opacity))
}
.bg-\[\#ff6b5f11\] {
    background-color: #ff6b5f11
}
.bg-\[\#ffd166\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 209 102 / var(--tw-bg-opacity))
}
.bg-\[\#ffffff12\] {
    background-color: #ffffff12
}
.bg-\[\#ffffff1a\] {
    background-color: #ffffff1a
}
.bg-\[\#ffffff1c\] {
    background-color: #ffffff1c
}
.bg-\[\#ffffff1f\] {
    background-color: #ffffff1f
}
.bg-\[\#ffffff44\] {
    background-color: #ffffff44
}
.bg-\[--color-bg\] {
    background-color: var(--color-bg)
}
.bg-\[color\:var\(--fx-field\)\] {
    background-color: var(--fx-field)
}
.bg-\[color\:var\(--fx-strip\)\] {
    background-color: var(--fx-strip)
}
.bg-accent {
    background-color: hsl(var(--accent))
}
.bg-amber-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(253 230 138 / var(--tw-bg-opacity))
}
.bg-amber-200\/70 {
    background-color: rgb(253 230 138 / 0.7)
}
.bg-amber-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 191 36 / var(--tw-bg-opacity))
}
.bg-amber-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity))
}
.bg-amber-500\/10 {
    background-color: rgb(245 158 11 / 0.1)
}
.bg-amber-500\/20 {
    background-color: rgb(245 158 11 / 0.2)
}
.bg-amber-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(217 119 6 / var(--tw-bg-opacity))
}
.bg-background {
    background-color: hsl(var(--background))
}
.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity))
}
.bg-black\/20 {
    background-color: rgb(0 0 0 / 0.2)
}
.bg-black\/25 {
    background-color: rgb(0 0 0 / 0.25)
}
.bg-black\/30 {
    background-color: rgb(0 0 0 / 0.3)
}
.bg-black\/40 {
    background-color: rgb(0 0 0 / 0.4)
}
.bg-black\/50 {
    background-color: rgb(0 0 0 / 0.5)
}
.bg-black\/55 {
    background-color: rgb(0 0 0 / 0.55)
}
.bg-black\/60 {
    background-color: rgb(0 0 0 / 0.6)
}
.bg-black\/65 {
    background-color: rgb(0 0 0 / 0.65)
}
.bg-black\/70 {
    background-color: rgb(0 0 0 / 0.7)
}
.bg-black\/75 {
    background-color: rgb(0 0 0 / 0.75)
}
.bg-black\/80 {
    background-color: rgb(0 0 0 / 0.8)
}
.bg-black\/85 {
    background-color: rgb(0 0 0 / 0.85)
}
.bg-black\/90 {
    background-color: rgb(0 0 0 / 0.9)
}
.bg-black\/95 {
    background-color: rgb(0 0 0 / 0.95)
}
.bg-blue-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity))
}
.bg-blue-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity))
}
.bg-blue-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity))
}
.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity))
}
.bg-blue-500\/20 {
    background-color: rgb(59 130 246 / 0.2)
}
.bg-blue-500\/5 {
    background-color: rgb(59 130 246 / 0.05)
}
.bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity))
}
.bg-blue-600\/80 {
    background-color: rgb(37 99 235 / 0.8)
}
.bg-blue-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity))
}
.bg-blue-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 58 138 / var(--tw-bg-opacity))
}
.bg-blue-900\/30 {
    background-color: rgb(30 58 138 / 0.3)
}
.bg-border {
    background-color: hsl(var(--border))
}
.bg-card {
    background-color: hsl(var(--card))
}
.bg-cyan-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 211 238 / var(--tw-bg-opacity))
}
.bg-cyan-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(6 182 212 / var(--tw-bg-opacity))
}
.bg-cyan-500\/10 {
    background-color: rgb(6 182 212 / 0.1)
}
.bg-destructive {
    background-color: hsl(var(--destructive))
}
.bg-emerald-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(52 211 153 / var(--tw-bg-opacity))
}
.bg-emerald-400\/15 {
    background-color: rgb(52 211 153 / 0.15)
}
.bg-emerald-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity))
}
.bg-emerald-500\/10 {
    background-color: rgb(16 185 129 / 0.1)
}
.bg-emerald-500\/15 {
    background-color: rgb(16 185 129 / 0.15)
}
.bg-emerald-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity))
}
.bg-emerald-600\/40 {
    background-color: rgb(5 150 105 / 0.4)
}
.bg-foreground {
    background-color: hsl(var(--foreground))
}
.bg-fuchsia-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(217 70 239 / var(--tw-bg-opacity))
}
.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity))
}
.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity))
}
.bg-gray-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity))
}
.bg-gray-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity))
}
.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}
.bg-gray-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity))
}
.bg-gray-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity))
}
.bg-gray-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity))
}
.bg-gray-700\/50 {
    background-color: rgb(55 65 81 / 0.5)
}
.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity))
}
.bg-gray-800\/40 {
    background-color: rgb(31 41 55 / 0.4)
}
.bg-gray-800\/50 {
    background-color: rgb(31 41 55 / 0.5)
}
.bg-gray-800\/80 {
    background-color: rgb(31 41 55 / 0.8)
}
.bg-gray-800\/90 {
    background-color: rgb(31 41 55 / 0.9)
}
.bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity))
}
.bg-gray-900\/50 {
    background-color: rgb(17 24 39 / 0.5)
}
.bg-gray-900\/60 {
    background-color: rgb(17 24 39 / 0.6)
}
.bg-gray-900\/70 {
    background-color: rgb(17 24 39 / 0.7)
}
.bg-gray-900\/80 {
    background-color: rgb(17 24 39 / 0.8)
}
.bg-gray-900\/90 {
    background-color: rgb(17 24 39 / 0.9)
}
.bg-gray-950 {
    --tw-bg-opacity: 1;
    background-color: rgb(3 7 18 / var(--tw-bg-opacity))
}
.bg-gray-950\/40 {
    background-color: rgb(3 7 18 / 0.4)
}
.bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity))
}
.bg-green-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(74 222 128 / var(--tw-bg-opacity))
}
.bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity))
}
.bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity))
}
.bg-green-500\/10 {
    background-color: rgb(34 197 94 / 0.1)
}
.bg-green-500\/20 {
    background-color: rgb(34 197 94 / 0.2)
}
.bg-green-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity))
}
.bg-green-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(21 128 61 / var(--tw-bg-opacity))
}
.bg-green-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(22 101 52 / var(--tw-bg-opacity))
}
.bg-indigo-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(238 242 255 / var(--tw-bg-opacity))
}
.bg-indigo-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(99 102 241 / var(--tw-bg-opacity))
}
.bg-indigo-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(79 70 229 / var(--tw-bg-opacity))
}
.bg-indigo-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(67 56 202 / var(--tw-bg-opacity))
}
.bg-muted {
    background-color: hsl(var(--muted))
}
.bg-muted\/50 {
    background-color: hsl(var(--muted) / 0.5)
}
.bg-neutral-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(115 115 115 / var(--tw-bg-opacity))
}
.bg-neutral-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(64 64 64 / var(--tw-bg-opacity))
}
.bg-neutral-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(38 38 38 / var(--tw-bg-opacity))
}
.bg-neutral-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(23 23 23 / var(--tw-bg-opacity))
}
.bg-neutral-950 {
    --tw-bg-opacity: 1;
    background-color: rgb(10 10 10 / var(--tw-bg-opacity))
}
.bg-neutral-950\/80 {
    background-color: rgb(10 10 10 / 0.8)
}
.bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity))
}
.bg-pink-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(244 114 182 / var(--tw-bg-opacity))
}
.bg-pink-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(236 72 153 / var(--tw-bg-opacity))
}
.bg-popover {
    background-color: hsl(var(--popover))
}
.bg-primary {
    background-color: hsl(var(--primary))
}
.bg-purple-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity))
}
.bg-purple-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(192 132 252 / var(--tw-bg-opacity))
}
.bg-purple-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(250 245 255 / var(--tw-bg-opacity))
}
.bg-purple-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(168 85 247 / var(--tw-bg-opacity))
}
.bg-purple-500\/20 {
    background-color: rgb(168 85 247 / 0.2)
}
.bg-purple-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity))
}
.bg-purple-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(126 34 206 / var(--tw-bg-opacity))
}
.bg-purple-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(107 33 168 / var(--tw-bg-opacity))
}
.bg-purple-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(88 28 135 / var(--tw-bg-opacity))
}
.bg-red-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity))
}
.bg-red-400\/45 {
    background-color: rgb(248 113 113 / 0.45)
}
.bg-red-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity))
}
.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity))
}
.bg-red-500\/10 {
    background-color: rgb(239 68 68 / 0.1)
}
.bg-red-500\/20 {
    background-color: rgb(239 68 68 / 0.2)
}
.bg-red-500\/\[0\.08\] {
    background-color: rgb(239 68 68 / 0.08)
}
.bg-red-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity))
}
.bg-red-600\/80 {
    background-color: rgb(220 38 38 / 0.8)
}
.bg-red-600\/90 {
    background-color: rgb(220 38 38 / 0.9)
}
.bg-red-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity))
}
.bg-red-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(153 27 27 / var(--tw-bg-opacity))
}
.bg-red-900\/50 {
    background-color: rgb(127 29 29 / 0.5)
}
.bg-red-950\/40 {
    background-color: rgb(69 10 10 / 0.4)
}
.bg-red-950\/60 {
    background-color: rgb(69 10 10 / 0.6)
}
.bg-rose-500\/10 {
    background-color: rgb(244 63 94 / 0.1)
}
.bg-secondary {
    background-color: hsl(var(--secondary))
}
.bg-sidebar {
    background-color: hsl(var(--sidebar-background))
}
.bg-sidebar-border {
    background-color: hsl(var(--sidebar-border))
}
.bg-sky-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(14 165 233 / var(--tw-bg-opacity))
}
.bg-sky-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(2 132 199 / var(--tw-bg-opacity))
}
.bg-slate-950 {
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity))
}
.bg-slate-950\/60 {
    background-color: rgb(2 6 23 / 0.6)
}
.bg-slate-950\/95 {
    background-color: rgb(2 6 23 / 0.95)
}
.bg-teal-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(20 184 166 / var(--tw-bg-opacity))
}
.bg-teal-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity))
}
.bg-transparent {
    background-color: transparent
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.bg-white\/10 {
    background-color: rgb(255 255 255 / 0.1)
}
.bg-white\/15 {
    background-color: rgb(255 255 255 / 0.15)
}
.bg-white\/20 {
    background-color: rgb(255 255 255 / 0.2)
}
.bg-white\/25 {
    background-color: rgb(255 255 255 / 0.25)
}
.bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05)
}
.bg-white\/85 {
    background-color: rgb(255 255 255 / 0.85)
}
.bg-white\/90 {
    background-color: rgb(255 255 255 / 0.9)
}
.bg-white\/\[\.07\] {
    background-color: rgb(255 255 255 / .07)
}
.bg-white\/\[0\.02\] {
    background-color: rgb(255 255 255 / 0.02)
}
.bg-white\/\[0\.03\] {
    background-color: rgb(255 255 255 / 0.03)
}
.bg-white\/\[0\.04\] {
    background-color: rgb(255 255 255 / 0.04)
}
.bg-white\/\[0\.05\] {
    background-color: rgb(255 255 255 / 0.05)
}
.bg-yellow-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 249 195 / var(--tw-bg-opacity))
}
.bg-yellow-300\/30 {
    background-color: rgb(253 224 71 / 0.3)
}
.bg-yellow-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(250 204 21 / var(--tw-bg-opacity))
}
.bg-yellow-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 252 232 / var(--tw-bg-opacity))
}
.bg-yellow-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(234 179 8 / var(--tw-bg-opacity))
}
.bg-yellow-500\/10 {
    background-color: rgb(234 179 8 / 0.1)
}
.bg-yellow-500\/15 {
    background-color: rgb(234 179 8 / 0.15)
}
.bg-yellow-500\/20 {
    background-color: rgb(234 179 8 / 0.2)
}
.bg-yellow-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(202 138 4 / var(--tw-bg-opacity))
}
.bg-yellow-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(161 98 7 / var(--tw-bg-opacity))
}
.bg-yellow-950\/20 {
    background-color: rgb(66 32 6 / 0.2)
}
.bg-zinc-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(24 24 27 / var(--tw-bg-opacity))
}
.bg-opacity-50 {
    --tw-bg-opacity: 0.5
}
.bg-opacity-75 {
    --tw-bg-opacity: 0.75
}
.bg-opacity-90 {
    --tw-bg-opacity: 0.9
}
.bg-\[linear-gradient\(135deg\2c \#202026\2c \#0b0b0f\)\] {
    background-image: linear-gradient(135deg,#202026,#0b0b0f)
}
.bg-\[linear-gradient\(180deg\2c \#09090b_0\%\2c \#0f1013_100\%\)\] {
    background-image: linear-gradient(180deg,#09090b 0%,#0f1013 100%)
}
.bg-\[linear-gradient\(180deg\2c \#9dc8f8_0\%\2c \#dceeff_50\%\2c \#8fbbea_100\%\)\] {
    background-image: linear-gradient(180deg,#9dc8f8 0%,#dceeff 50%,#8fbbea 100%)
}
.bg-\[linear-gradient\(180deg\2c rgba\(12\2c 12\2c 14\2c 0\.4\)\2c rgba\(9\2c 9\2c 11\2c 0\.92\)\)\2c radial-gradient\(circle_at_top_left\2c rgba\(255\2c 255\2c 255\2c 0\.08\)\2c transparent_26\%\)\] {
    background-image: linear-gradient(180deg,rgba(12,12,14,0.4),rgba(9,9,11,0.92)),radial-gradient(circle at top left,rgba(255,255,255,0.08),transparent 26%)
}
.bg-\[radial-gradient\(circle\2c \#f4c26e_0\%\2c \#f4c26e_9\%\2c \#15110b_10\%\2c \#15110b_42\%\2c \#302816_43\%\2c \#302816_56\%\2c \#090806_57\%\)\] {
    background-image: radial-gradient(circle,#f4c26e 0%,#f4c26e 9%,#15110b 10%,#15110b 42%,#302816 43%,#302816 56%,#090806 57%)
}
.bg-\[radial-gradient\(circle_at_50\%_35\%\2c rgba\(245\2c 186\2c 91\2c 0\.18\)\2c rgba\(0\2c 0\2c 0\2c 0\.96\)_64\%\)\] {
    background-image: radial-gradient(circle at 50% 35%,rgba(245,186,91,0.18),rgba(0,0,0,0.96) 64%)
}
.bg-\[radial-gradient\(circle_at_top\2c rgba\(99\2c 102\2c 241\2c 0\.28\)\2c transparent_32\%\)\2c radial-gradient\(circle_at_bottom_right\2c rgba\(236\2c 72\2c 153\2c 0\.18\)\2c transparent_28\%\)\] {
    background-image: radial-gradient(circle at top,rgba(99,102,241,0.28),transparent 32%),radial-gradient(circle at bottom right,rgba(236,72,153,0.18),transparent 28%)
}
.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
}
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))
}
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops))
}
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops))
}
.bg-gradient-to-tr {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops))
}
.from-\[\#101016\] {
    --tw-gradient-from: #101016 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 16 22 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-\[\#2a4a6a\] {
    --tw-gradient-from: #2a4a6a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(42 74 106 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-\[\#3b82f6\] {
    --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-\[\#4ade80\] {
    --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-amber-500\/30 {
    --tw-gradient-from: rgb(245 158 11 / 0.3) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-amber-700 {
    --tw-gradient-from: #b45309 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(180 83 9 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-black\/0 {
    --tw-gradient-from: rgb(0 0 0 / 0) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-blue-300 {
    --tw-gradient-from: #93c5fd var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(147 197 253 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-blue-400 {
    --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-blue-500 {
    --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-blue-500\/20 {
    --tw-gradient-from: rgb(59 130 246 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-blue-500\/30 {
    --tw-gradient-from: rgb(59 130 246 / 0.3) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-blue-600 {
    --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-blue-900 {
    --tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-blue-900\/10 {
    --tw-gradient-from: rgb(30 58 138 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-cyan-400 {
    --tw-gradient-from: #22d3ee var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-emerald-400\/5 {
    --tw-gradient-from: rgb(52 211 153 / 0.05) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-emerald-500 {
    --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-emerald-500\/10 {
    --tw-gradient-from: rgb(16 185 129 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-emerald-500\/20 {
    --tw-gradient-from: rgb(16 185 129 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-emerald-500\/30 {
    --tw-gradient-from: rgb(16 185 129 / 0.3) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-fuchsia-500\/10 {
    --tw-gradient-from: rgb(217 70 239 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-gray-300 {
    --tw-gradient-from: #d1d5db var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(209 213 219 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-gray-700 {
    --tw-gradient-from: #374151 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-gray-800 {
    --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-gray-900 {
    --tw-gradient-from: #111827 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-green-400 {
    --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-green-500 {
    --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-green-500\/20 {
    --tw-gradient-from: rgb(34 197 94 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-green-500\/30 {
    --tw-gradient-from: rgb(34 197 94 / 0.3) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-green-600 {
    --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-green-700 {
    --tw-gradient-from: #15803d var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(21 128 61 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-indigo-500\/40 {
    --tw-gradient-from: rgb(99 102 241 / 0.4) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-pink-400 {
    --tw-gradient-from: #f472b6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-pink-500\/20 {
    --tw-gradient-from: rgb(236 72 153 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-pink-500\/30 {
    --tw-gradient-from: rgb(236 72 153 / 0.3) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-purple-300 {
    --tw-gradient-from: #d8b4fe var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(216 180 254 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-purple-500 {
    --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-purple-600 {
    --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-red-400 {
    --tw-gradient-from: #f87171 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-red-500\/20 {
    --tw-gradient-from: rgb(239 68 68 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-red-600 {
    --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-red-700 {
    --tw-gradient-from: #b91c1c var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(185 28 28 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-slate-900 {
    --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-white\/15 {
    --tw-gradient-from: rgb(255 255 255 / 0.15) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-white\/\[0\.03\] {
    --tw-gradient-from: rgb(255 255 255 / 0.03) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-yellow-400 {
    --tw-gradient-from: #facc15 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-yellow-500 {
    --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-yellow-500\/20 {
    --tw-gradient-from: rgb(234 179 8 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-yellow-500\/30 {
    --tw-gradient-from: rgb(234 179 8 / 0.3) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.via-\[\#ffd479\] {
    --tw-gradient-to: rgb(255 212 121 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #ffd479 var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-black\/40 {
    --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-blue-500 {
    --tw-gradient-to: rgb(59 130 246 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #3b82f6 var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-emerald-900\/20 {
    --tw-gradient-to: rgb(6 78 59 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(6 78 59 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-gray-800 {
    --tw-gradient-to: rgb(31 41 55 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-purple-900 {
    --tw-gradient-to: rgb(88 28 135 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #581c87 var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-transparent {
    --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-white\/\[0\.015\] {
    --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.015) var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.to-\[\#60a5fa\] {
    --tw-gradient-to: #60a5fa var(--tw-gradient-to-position)
}
.to-\[\#7cc5ff\] {
    --tw-gradient-to: #7cc5ff var(--tw-gradient-to-position)
}
.to-\[\#ff7a7a\] {
    --tw-gradient-to: #ff7a7a var(--tw-gradient-to-position)
}
.to-amber-400\/5 {
    --tw-gradient-to: rgb(251 191 36 / 0.05) var(--tw-gradient-to-position)
}
.to-amber-950 {
    --tw-gradient-to: #451a03 var(--tw-gradient-to-position)
}
.to-black {
    --tw-gradient-to: #000 var(--tw-gradient-to-position)
}
.to-black\/90 {
    --tw-gradient-to: rgb(0 0 0 / 0.9) var(--tw-gradient-to-position)
}
.to-blue-500 {
    --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)
}
.to-blue-600 {
    --tw-gradient-to: #2563eb var(--tw-gradient-to-position)
}
.to-blue-600\/5 {
    --tw-gradient-to: rgb(37 99 235 / 0.05) var(--tw-gradient-to-position)
}
.to-blue-800 {
    --tw-gradient-to: #1e40af var(--tw-gradient-to-position)
}
.to-blue-900\/5 {
    --tw-gradient-to: rgb(30 58 138 / 0.05) var(--tw-gradient-to-position)
}
.to-cyan-500\/10 {
    --tw-gradient-to: rgb(6 182 212 / 0.1) var(--tw-gradient-to-position)
}
.to-emerald-400 {
    --tw-gradient-to: #34d399 var(--tw-gradient-to-position)
}
.to-emerald-600 {
    --tw-gradient-to: #059669 var(--tw-gradient-to-position)
}
.to-emerald-600\/10 {
    --tw-gradient-to: rgb(5 150 105 / 0.1) var(--tw-gradient-to-position)
}
.to-fuchsia-500 {
    --tw-gradient-to: #d946ef var(--tw-gradient-to-position)
}
.to-fuchsia-500\/20 {
    --tw-gradient-to: rgb(217 70 239 / 0.2) var(--tw-gradient-to-position)
}
.to-gray-400 {
    --tw-gradient-to: #9ca3af var(--tw-gradient-to-position)
}
.to-gray-800 {
    --tw-gradient-to: #1f2937 var(--tw-gradient-to-position)
}
.to-gray-900 {
    --tw-gradient-to: #111827 var(--tw-gradient-to-position)
}
.to-green-600\/5 {
    --tw-gradient-to: rgb(22 163 74 / 0.05) var(--tw-gradient-to-position)
}
.to-green-700 {
    --tw-gradient-to: #15803d var(--tw-gradient-to-position)
}
.to-green-800 {
    --tw-gradient-to: #166534 var(--tw-gradient-to-position)
}
.to-green-900 {
    --tw-gradient-to: #14532d var(--tw-gradient-to-position)
}
.to-indigo-900 {
    --tw-gradient-to: #312e81 var(--tw-gradient-to-position)
}
.to-orange-600 {
    --tw-gradient-to: #ea580c var(--tw-gradient-to-position)
}
.to-pink-500 {
    --tw-gradient-to: #ec4899 var(--tw-gradient-to-position)
}
.to-pink-600\/5 {
    --tw-gradient-to: rgb(219 39 119 / 0.05) var(--tw-gradient-to-position)
}
.to-purple-500 {
    --tw-gradient-to: #a855f7 var(--tw-gradient-to-position)
}
.to-purple-500\/10 {
    --tw-gradient-to: rgb(168 85 247 / 0.1) var(--tw-gradient-to-position)
}
.to-purple-600 {
    --tw-gradient-to: #9333ea var(--tw-gradient-to-position)
}
.to-purple-700 {
    --tw-gradient-to: #7e22ce var(--tw-gradient-to-position)
}
.to-purple-800 {
    --tw-gradient-to: #6b21a8 var(--tw-gradient-to-position)
}
.to-red-600 {
    --tw-gradient-to: #dc2626 var(--tw-gradient-to-position)
}
.to-red-600\/5 {
    --tw-gradient-to: rgb(220 38 38 / 0.05) var(--tw-gradient-to-position)
}
.to-red-700 {
    --tw-gradient-to: #b91c1c var(--tw-gradient-to-position)
}
.to-red-800 {
    --tw-gradient-to: #991b1b var(--tw-gradient-to-position)
}
.to-red-900 {
    --tw-gradient-to: #7f1d1d var(--tw-gradient-to-position)
}
.to-rose-500\/10 {
    --tw-gradient-to: rgb(244 63 94 / 0.1) var(--tw-gradient-to-position)
}
.to-sky-500\/10 {
    --tw-gradient-to: rgb(14 165 233 / 0.1) var(--tw-gradient-to-position)
}
.to-slate-900 {
    --tw-gradient-to: #0f172a var(--tw-gradient-to-position)
}
.to-stone-500\/10 {
    --tw-gradient-to: rgb(120 113 108 / 0.1) var(--tw-gradient-to-position)
}
.to-teal-500\/10 {
    --tw-gradient-to: rgb(20 184 166 / 0.1) var(--tw-gradient-to-position)
}
.to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position)
}
.to-white\/\[0\.035\] {
    --tw-gradient-to: rgb(255 255 255 / 0.035) var(--tw-gradient-to-position)
}
.to-yellow-600 {
    --tw-gradient-to: #ca8a04 var(--tw-gradient-to-position)
}
.to-yellow-600\/5 {
    --tw-gradient-to: rgb(202 138 4 / 0.05) var(--tw-gradient-to-position)
}
.bg-cover {
    background-size: cover
}
.bg-clip-text {
    -webkit-background-clip: text;
            background-clip: text
}
.bg-center {
    background-position: center
}
.fill-current {
    fill: currentColor
}
.object-contain {
    -o-object-fit: contain;
       object-fit: contain
}
.object-cover {
    -o-object-fit: cover;
       object-fit: cover
}
.object-\[50\%_68\%\] {
    -o-object-position: 50% 68%;
       object-position: 50% 68%
}
.p-0 {
    padding: 0px
}
.p-0\.5 {
    padding: 0.125rem
}
.p-1 {
    padding: 0.25rem
}
.p-1\.5 {
    padding: 0.375rem
}
.p-10 {
    padding: 2.5rem
}
.p-2 {
    padding: 0.5rem
}
.p-2\.5 {
    padding: 0.625rem
}
.p-3 {
    padding: 0.75rem
}
.p-4 {
    padding: 1rem
}
.p-5 {
    padding: 1.25rem
}
.p-6 {
    padding: 1.5rem
}
.p-8 {
    padding: 2rem
}
.p-\[1\.5px\] {
    padding: 1.5px
}
.p-\[1px\] {
    padding: 1px
}
.p-\[2px\] {
    padding: 2px
}
.p-\[3px\] {
    padding: 3px
}
.p-\[4px\] {
    padding: 4px
}
.p-\[5px\] {
    padding: 5px
}
.px-0 {
    padding-left: 0px;
    padding-right: 0px
}
.px-0\.5 {
    padding-left: 0.125rem;
    padding-right: 0.125rem
}
.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem
}
.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem
}
.px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem
}
.px-12 {
    padding-left: 3rem;
    padding-right: 3rem
}
.px-16 {
    padding-left: 4rem;
    padding-right: 4rem
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem
}
.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}
.px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem
}
.px-9 {
    padding-left: 2.25rem;
    padding-right: 2.25rem
}
.px-\[10px\] {
    padding-left: 10px;
    padding-right: 10px
}
.px-\[11px\] {
    padding-left: 11px;
    padding-right: 11px
}
.px-\[12px\] {
    padding-left: 12px;
    padding-right: 12px
}
.px-\[13px\] {
    padding-left: 13px;
    padding-right: 13px
}
.px-\[14px\] {
    padding-left: 14px;
    padding-right: 14px
}
.px-\[16px\] {
    padding-left: 16px;
    padding-right: 16px
}
.px-\[1px\] {
    padding-left: 1px;
    padding-right: 1px
}
.px-\[20px\] {
    padding-left: 20px;
    padding-right: 20px
}
.px-\[26px\] {
    padding-left: 26px;
    padding-right: 26px
}
.px-\[27px\] {
    padding-left: 27px;
    padding-right: 27px
}
.px-\[2px\] {
    padding-left: 2px;
    padding-right: 2px
}
.px-\[3px\] {
    padding-left: 3px;
    padding-right: 3px
}
.px-\[42px\] {
    padding-left: 42px;
    padding-right: 42px
}
.px-\[4px\] {
    padding-left: 4px;
    padding-right: 4px
}
.px-\[5px\] {
    padding-left: 5px;
    padding-right: 5px
}
.px-\[6px\] {
    padding-left: 6px;
    padding-right: 6px
}
.px-\[7px\] {
    padding-left: 7px;
    padding-right: 7px
}
.px-\[8px\] {
    padding-left: 8px;
    padding-right: 8px
}
.px-\[9px\] {
    padding-left: 9px;
    padding-right: 9px
}
.py-0 {
    padding-top: 0px;
    padding-bottom: 0px
}
.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem
}
.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem
}
.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
}
.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem
}
.py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem
}
.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}
.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem
}
.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}
.py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}
.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem
}
.py-\[10px\] {
    padding-top: 10px;
    padding-bottom: 10px
}
.py-\[1px\] {
    padding-top: 1px;
    padding-bottom: 1px
}
.py-\[2px\] {
    padding-top: 2px;
    padding-bottom: 2px
}
.py-\[3px\] {
    padding-top: 3px;
    padding-bottom: 3px
}
.py-\[4px\] {
    padding-top: 4px;
    padding-bottom: 4px
}
.py-\[5px\] {
    padding-top: 5px;
    padding-bottom: 5px
}
.py-\[6px\] {
    padding-top: 6px;
    padding-bottom: 6px
}
.py-\[7px\] {
    padding-top: 7px;
    padding-bottom: 7px
}
.py-\[8px\] {
    padding-top: 8px;
    padding-bottom: 8px
}
.py-\[9px\] {
    padding-top: 9px;
    padding-bottom: 9px
}
.py-px {
    padding-top: 1px;
    padding-bottom: 1px
}
.pb-0 {
    padding-bottom: 0px
}
.pb-0\.5 {
    padding-bottom: 0.125rem
}
.pb-1 {
    padding-bottom: 0.25rem
}
.pb-1\.5 {
    padding-bottom: 0.375rem
}
.pb-10 {
    padding-bottom: 2.5rem
}
.pb-16 {
    padding-bottom: 4rem
}
.pb-2 {
    padding-bottom: 0.5rem
}
.pb-20 {
    padding-bottom: 5rem
}
.pb-24 {
    padding-bottom: 6rem
}
.pb-28 {
    padding-bottom: 7rem
}
.pb-3 {
    padding-bottom: 0.75rem
}
.pb-32 {
    padding-bottom: 8rem
}
.pb-4 {
    padding-bottom: 1rem
}
.pb-6 {
    padding-bottom: 1.5rem
}
.pb-\[10px\] {
    padding-bottom: 10px
}
.pb-\[13px\] {
    padding-bottom: 13px
}
.pb-\[16px\] {
    padding-bottom: 16px
}
.pb-\[24px\] {
    padding-bottom: 24px
}
.pb-\[2px\] {
    padding-bottom: 2px
}
.pb-\[3px\] {
    padding-bottom: 3px
}
.pb-\[4px\] {
    padding-bottom: 4px
}
.pb-\[5px\] {
    padding-bottom: 5px
}
.pb-\[6px\] {
    padding-bottom: 6px
}
.pb-\[7px\] {
    padding-bottom: 7px
}
.pb-\[9px\] {
    padding-bottom: 9px
}
.pl-1 {
    padding-left: 0.25rem
}
.pl-10 {
    padding-left: 2.5rem
}
.pl-11 {
    padding-left: 2.75rem
}
.pl-2 {
    padding-left: 0.5rem
}
.pl-2\.5 {
    padding-left: 0.625rem
}
.pl-3 {
    padding-left: 0.75rem
}
.pl-4 {
    padding-left: 1rem
}
.pl-7 {
    padding-left: 1.75rem
}
.pl-8 {
    padding-left: 2rem
}
.pl-9 {
    padding-left: 2.25rem
}
.pl-\[10px\] {
    padding-left: 10px
}
.pl-\[16px\] {
    padding-left: 16px
}
.pl-\[22px\] {
    padding-left: 22px
}
.pl-\[2px\] {
    padding-left: 2px
}
.pl-\[32\%\] {
    padding-left: 32%
}
.pl-\[3px\] {
    padding-left: 3px
}
.pl-\[41px\] {
    padding-left: 41px
}
.pl-\[4px\] {
    padding-left: 4px
}
.pl-\[6px\] {
    padding-left: 6px
}
.pl-\[8px\] {
    padding-left: 8px
}
.pl-\[9px\] {
    padding-left: 9px
}
.pr-0 {
    padding-right: 0px
}
.pr-0\.5 {
    padding-right: 0.125rem
}
.pr-1 {
    padding-right: 0.25rem
}
.pr-1\.5 {
    padding-right: 0.375rem
}
.pr-10 {
    padding-right: 2.5rem
}
.pr-2 {
    padding-right: 0.5rem
}
.pr-2\.5 {
    padding-right: 0.625rem
}
.pr-24 {
    padding-right: 6rem
}
.pr-3 {
    padding-right: 0.75rem
}
.pr-4 {
    padding-right: 1rem
}
.pr-5 {
    padding-right: 1.25rem
}
.pr-8 {
    padding-right: 2rem
}
.pr-\[10px\] {
    padding-right: 10px
}
.pr-\[16px\] {
    padding-right: 16px
}
.pr-\[1px\] {
    padding-right: 1px
}
.pr-\[22px\] {
    padding-right: 22px
}
.pr-\[24px\] {
    padding-right: 24px
}
.pr-\[2px\] {
    padding-right: 2px
}
.pr-\[4px\] {
    padding-right: 4px
}
.pr-\[58px\] {
    padding-right: 58px
}
.pr-\[5px\] {
    padding-right: 5px
}
.pr-\[8px\] {
    padding-right: 8px
}
.pr-\[9px\] {
    padding-right: 9px
}
.pt-0 {
    padding-top: 0px
}
.pt-0\.5 {
    padding-top: 0.125rem
}
.pt-1 {
    padding-top: 0.25rem
}
.pt-1\.5 {
    padding-top: 0.375rem
}
.pt-2 {
    padding-top: 0.5rem
}
.pt-3 {
    padding-top: 0.75rem
}
.pt-36 {
    padding-top: 9rem
}
.pt-4 {
    padding-top: 1rem
}
.pt-6 {
    padding-top: 1.5rem
}
.pt-7 {
    padding-top: 1.75rem
}
.pt-8 {
    padding-top: 2rem
}
.pt-\[10px\] {
    padding-top: 10px
}
.pt-\[14px\] {
    padding-top: 14px
}
.pt-\[16px\] {
    padding-top: 16px
}
.pt-\[18px\] {
    padding-top: 18px
}
.pt-\[1px\] {
    padding-top: 1px
}
.pt-\[24px\] {
    padding-top: 24px
}
.pt-\[2px\] {
    padding-top: 2px
}
.pt-\[3px\] {
    padding-top: 3px
}
.pt-\[4px\] {
    padding-top: 4px
}
.pt-\[5px\] {
    padding-top: 5px
}
.pt-\[6px\] {
    padding-top: 6px
}
.pt-\[7px\] {
    padding-top: 7px
}
.pt-\[8px\] {
    padding-top: 8px
}
.pt-\[9px\] {
    padding-top: 9px
}
.text-left {
    text-align: left
}
.text-center {
    text-align: center
}
.text-right {
    text-align: right
}
.align-middle {
    vertical-align: middle
}
.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}
.font-sans {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}
.font-serif {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem
}
.text-5xl {
    font-size: 3rem;
    line-height: 1
}
.text-8xl {
    font-size: 6rem;
    line-height: 1
}
.text-\[0\.8rem\] {
    font-size: 0.8rem
}
.text-\[0\.95rem\] {
    font-size: 0.95rem
}
.text-\[1\.95rem\] {
    font-size: 1.95rem
}
.text-\[10\.5px\] {
    font-size: 10.5px
}
.text-\[10px\] {
    font-size: 10px
}
.text-\[11\.5px\] {
    font-size: 11.5px
}
.text-\[11px\] {
    font-size: 11px
}
.text-\[12\.5px\] {
    font-size: 12.5px
}
.text-\[12px\] {
    font-size: 12px
}
.text-\[13px\] {
    font-size: 13px
}
.text-\[14px\] {
    font-size: 14px
}
.text-\[15px\] {
    font-size: 15px
}
.text-\[16px\] {
    font-size: 16px
}
.text-\[17px\] {
    font-size: 17px
}
.text-\[18px\] {
    font-size: 18px
}
.text-\[19px\] {
    font-size: 19px
}
.text-\[20px\] {
    font-size: 20px
}
.text-\[21px\] {
    font-size: 21px
}
.text-\[22px\] {
    font-size: 22px
}
.text-\[27px\] {
    font-size: 27px
}
.text-\[5\.5px\] {
    font-size: 5.5px
}
.text-\[52px\] {
    font-size: 52px
}
.text-\[6\.5px\] {
    font-size: 6.5px
}
.text-\[6px\] {
    font-size: 6px
}
.text-\[7px\] {
    font-size: 7px
}
.text-\[8\.5px\] {
    font-size: 8.5px
}
.text-\[8px\] {
    font-size: 8px
}
.text-\[9\.5px\] {
    font-size: 9.5px
}
.text-\[9px\] {
    font-size: 9px
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem
}
.font-black {
    font-weight: 900
}
.font-bold {
    font-weight: 700
}
.font-extrabold {
    font-weight: 800
}
.font-light {
    font-weight: 300
}
.font-medium {
    font-weight: 500
}
.font-normal {
    font-weight: 400
}
.font-semibold {
    font-weight: 600
}
.uppercase {
    text-transform: uppercase
}
.lowercase {
    text-transform: lowercase
}
.capitalize {
    text-transform: capitalize
}
.normal-case {
    text-transform: none
}
.italic {
    font-style: italic
}
.not-italic {
    font-style: normal
}
.ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}
.slashed-zero {
    --tw-slashed-zero: slashed-zero;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}
.tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}
.leading-5 {
    line-height: 1.25rem
}
.leading-6 {
    line-height: 1.5rem
}
.leading-7 {
    line-height: 1.75rem
}
.leading-\[0\.95\] {
    line-height: 0.95
}
.leading-\[1\.02\] {
    line-height: 1.02
}
.leading-\[1\.15\] {
    line-height: 1.15
}
.leading-\[1\.25\] {
    line-height: 1.25
}
.leading-\[1\.2\] {
    line-height: 1.2
}
.leading-\[1\.35\] {
    line-height: 1.35
}
.leading-\[1\.45\] {
    line-height: 1.45
}
.leading-\[1\.4\] {
    line-height: 1.4
}
.leading-\[1\.5\] {
    line-height: 1.5
}
.leading-\[11px\] {
    line-height: 11px
}
.leading-\[12px\] {
    line-height: 12px
}
.leading-\[13px\] {
    line-height: 13px
}
.leading-\[14px\] {
    line-height: 14px
}
.leading-\[15px\] {
    line-height: 15px
}
.leading-\[16px\] {
    line-height: 16px
}
.leading-\[17px\] {
    line-height: 17px
}
.leading-\[20px\] {
    line-height: 20px
}
.leading-\[21px\] {
    line-height: 21px
}
.leading-\[23px\] {
    line-height: 23px
}
.leading-\[24px\] {
    line-height: 24px
}
.leading-\[26px\] {
    line-height: 26px
}
.leading-\[27px\] {
    line-height: 27px
}
.leading-\[7px\] {
    line-height: 7px
}
.leading-\[8px\] {
    line-height: 8px
}
.leading-\[9px\] {
    line-height: 9px
}
.leading-none {
    line-height: 1
}
.leading-relaxed {
    line-height: 1.625
}
.leading-snug {
    line-height: 1.375
}
.leading-tight {
    line-height: 1.25
}
.tracking-\[-0\.01em\] {
    letter-spacing: -0.01em
}
.tracking-\[-0\.02em\] {
    letter-spacing: -0.02em
}
.tracking-\[-0\.045em\] {
    letter-spacing: -0.045em
}
.tracking-\[-0\.04em\] {
    letter-spacing: -0.04em
}
.tracking-\[-0\.05em\] {
    letter-spacing: -0.05em
}
.tracking-\[\.18em\] {
    letter-spacing: .18em
}
.tracking-\[\.22em\] {
    letter-spacing: .22em
}
.tracking-\[\.2em\] {
    letter-spacing: .2em
}
.tracking-\[0\.01em\] {
    letter-spacing: 0.01em
}
.tracking-\[0\.02em\] {
    letter-spacing: 0.02em
}
.tracking-\[0\.03em\] {
    letter-spacing: 0.03em
}
.tracking-\[0\.04em\] {
    letter-spacing: 0.04em
}
.tracking-\[0\.05em\] {
    letter-spacing: 0.05em
}
.tracking-\[0\.06em\] {
    letter-spacing: 0.06em
}
.tracking-\[0\.07em\] {
    letter-spacing: 0.07em
}
.tracking-\[0\.08em\] {
    letter-spacing: 0.08em
}
.tracking-\[0\.09em\] {
    letter-spacing: 0.09em
}
.tracking-\[0\.10em\] {
    letter-spacing: 0.10em
}
.tracking-\[0\.12em\] {
    letter-spacing: 0.12em
}
.tracking-\[0\.13em\] {
    letter-spacing: 0.13em
}
.tracking-\[0\.14em\] {
    letter-spacing: 0.14em
}
.tracking-\[0\.16em\] {
    letter-spacing: 0.16em
}
.tracking-\[0\.18em\] {
    letter-spacing: 0.18em
}
.tracking-\[0\.1em\] {
    letter-spacing: 0.1em
}
.tracking-\[0\.20em\] {
    letter-spacing: 0.20em
}
.tracking-\[0\.22em\] {
    letter-spacing: 0.22em
}
.tracking-\[0\.24em\] {
    letter-spacing: 0.24em
}
.tracking-\[0\.25em\] {
    letter-spacing: 0.25em
}
.tracking-\[0\.26em\] {
    letter-spacing: 0.26em
}
.tracking-\[0\.28em\] {
    letter-spacing: 0.28em
}
.tracking-\[0\.2em\] {
    letter-spacing: 0.2em
}
.tracking-\[0\.32em\] {
    letter-spacing: 0.32em
}
.tracking-\[0\.34em\] {
    letter-spacing: 0.34em
}
.tracking-\[0\.35em\] {
    letter-spacing: 0.35em
}
.tracking-\[0\.3em\] {
    letter-spacing: 0.3em
}
.tracking-\[0\.42em\] {
    letter-spacing: 0.42em
}
.tracking-\[0\.4em\] {
    letter-spacing: 0.4em
}
.tracking-\[0\] {
    letter-spacing: 0
}
.tracking-normal {
    letter-spacing: 0em
}
.tracking-tight {
    letter-spacing: -0.025em
}
.tracking-tighter {
    letter-spacing: -0.05em
}
.tracking-wide {
    letter-spacing: 0.025em
}
.tracking-wider {
    letter-spacing: 0.05em
}
.tracking-widest {
    letter-spacing: 0.1em
}
.text-\[\#00A3FF\] {
    --tw-text-opacity: 1;
    color: rgb(0 163 255 / var(--tw-text-opacity))
}
.text-\[\#00FF00\] {
    --tw-text-opacity: 1;
    color: rgb(0 255 0 / var(--tw-text-opacity))
}
.text-\[\#00FF99\] {
    --tw-text-opacity: 1;
    color: rgb(0 255 153 / var(--tw-text-opacity))
}
.text-\[\#00ff00\] {
    --tw-text-opacity: 1;
    color: rgb(0 255 0 / var(--tw-text-opacity))
}
.text-\[\#00ff99\] {
    --tw-text-opacity: 1;
    color: rgb(0 255 153 / var(--tw-text-opacity))
}
.text-\[\#04140B\] {
    --tw-text-opacity: 1;
    color: rgb(4 20 11 / var(--tw-text-opacity))
}
.text-\[\#06101f\] {
    --tw-text-opacity: 1;
    color: rgb(6 16 31 / var(--tw-text-opacity))
}
.text-\[\#062352\] {
    --tw-text-opacity: 1;
    color: rgb(6 35 82 / var(--tw-text-opacity))
}
.text-\[\#07101f\] {
    --tw-text-opacity: 1;
    color: rgb(7 16 31 / var(--tw-text-opacity))
}
.text-\[\#0B0C10\] {
    --tw-text-opacity: 1;
    color: rgb(11 12 16 / var(--tw-text-opacity))
}
.text-\[\#0b2746\] {
    --tw-text-opacity: 1;
    color: rgb(11 39 70 / var(--tw-text-opacity))
}
.text-\[\#0b3161\] {
    --tw-text-opacity: 1;
    color: rgb(11 49 97 / var(--tw-text-opacity))
}
.text-\[\#0c0d10\] {
    --tw-text-opacity: 1;
    color: rgb(12 13 16 / var(--tw-text-opacity))
}
.text-\[\#0d1117\] {
    --tw-text-opacity: 1;
    color: rgb(13 17 23 / var(--tw-text-opacity))
}
.text-\[\#0f0\] {
    --tw-text-opacity: 1;
    color: rgb(0 255 0 / var(--tw-text-opacity))
}
.text-\[\#0f2c4e\] {
    --tw-text-opacity: 1;
    color: rgb(15 44 78 / var(--tw-text-opacity))
}
.text-\[\#111114\] {
    --tw-text-opacity: 1;
    color: rgb(17 17 20 / var(--tw-text-opacity))
}
.text-\[\#18d29f\] {
    --tw-text-opacity: 1;
    color: rgb(24 210 159 / var(--tw-text-opacity))
}
.text-\[\#22c55e\] {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity))
}
.text-\[\#2BE07A\] {
    --tw-text-opacity: 1;
    color: rgb(43 224 122 / var(--tw-text-opacity))
}
.text-\[\#2FD4C4\] {
    --tw-text-opacity: 1;
    color: rgb(47 212 196 / var(--tw-text-opacity))
}
.text-\[\#2c2a27\] {
    --tw-text-opacity: 1;
    color: rgb(44 42 39 / var(--tw-text-opacity))
}
.text-\[\#333\] {
    --tw-text-opacity: 1;
    color: rgb(51 51 51 / var(--tw-text-opacity))
}
.text-\[\#334455\] {
    --tw-text-opacity: 1;
    color: rgb(51 68 85 / var(--tw-text-opacity))
}
.text-\[\#336600\] {
    --tw-text-opacity: 1;
    color: rgb(51 102 0 / var(--tw-text-opacity))
}
.text-\[\#3A414F\] {
    --tw-text-opacity: 1;
    color: rgb(58 65 79 / var(--tw-text-opacity))
}
.text-\[\#3a2408\] {
    --tw-text-opacity: 1;
    color: rgb(58 36 8 / var(--tw-text-opacity))
}
.text-\[\#3b82f6\] {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity))
}
.text-\[\#3d434e\] {
    --tw-text-opacity: 1;
    color: rgb(61 67 78 / var(--tw-text-opacity))
}
.text-\[\#3f444f\] {
    --tw-text-opacity: 1;
    color: rgb(63 68 79 / var(--tw-text-opacity))
}
.text-\[\#3f5a70\] {
    --tw-text-opacity: 1;
    color: rgb(63 90 112 / var(--tw-text-opacity))
}
.text-\[\#403e3a\] {
    --tw-text-opacity: 1;
    color: rgb(64 62 58 / var(--tw-text-opacity))
}
.text-\[\#44607a\] {
    --tw-text-opacity: 1;
    color: rgb(68 96 122 / var(--tw-text-opacity))
}
.text-\[\#4C5464\] {
    --tw-text-opacity: 1;
    color: rgb(76 84 100 / var(--tw-text-opacity))
}
.text-\[\#4a3f30\] {
    --tw-text-opacity: 1;
    color: rgb(74 63 48 / var(--tw-text-opacity))
}
.text-\[\#4a505c\] {
    --tw-text-opacity: 1;
    color: rgb(74 80 92 / var(--tw-text-opacity))
}
.text-\[\#4a7a9a\] {
    --tw-text-opacity: 1;
    color: rgb(74 122 154 / var(--tw-text-opacity))
}
.text-\[\#4a8a5a\] {
    --tw-text-opacity: 1;
    color: rgb(74 138 90 / var(--tw-text-opacity))
}
.text-\[\#4aa3ff\] {
    --tw-text-opacity: 1;
    color: rgb(74 163 255 / var(--tw-text-opacity))
}
.text-\[\#4ade80\] {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity))
}
.text-\[\#4b5468\] {
    --tw-text-opacity: 1;
    color: rgb(75 84 104 / var(--tw-text-opacity))
}
.text-\[\#4d566c\] {
    --tw-text-opacity: 1;
    color: rgb(77 86 108 / var(--tw-text-opacity))
}
.text-\[\#553322\] {
    --tw-text-opacity: 1;
    color: rgb(85 51 34 / var(--tw-text-opacity))
}
.text-\[\#553344\] {
    --tw-text-opacity: 1;
    color: rgb(85 51 68 / var(--tw-text-opacity))
}
.text-\[\#5a4a6a\] {
    --tw-text-opacity: 1;
    color: rgb(90 74 106 / var(--tw-text-opacity))
}
.text-\[\#5a4d3a\] {
    --tw-text-opacity: 1;
    color: rgb(90 77 58 / var(--tw-text-opacity))
}
.text-\[\#5a6070\] {
    --tw-text-opacity: 1;
    color: rgb(90 96 112 / var(--tw-text-opacity))
}
.text-\[\#5a6779\] {
    --tw-text-opacity: 1;
    color: rgb(90 103 121 / var(--tw-text-opacity))
}
.text-\[\#5a6a80\] {
    --tw-text-opacity: 1;
    color: rgb(90 106 128 / var(--tw-text-opacity))
}
.text-\[\#5a7a8a\] {
    --tw-text-opacity: 1;
    color: rgb(90 122 138 / var(--tw-text-opacity))
}
.text-\[\#5a7a95\] {
    --tw-text-opacity: 1;
    color: rgb(90 122 149 / var(--tw-text-opacity))
}
.text-\[\#5a86a5\] {
    --tw-text-opacity: 1;
    color: rgb(90 134 165 / var(--tw-text-opacity))
}
.text-\[\#5d636e\] {
    --tw-text-opacity: 1;
    color: rgb(93 99 110 / var(--tw-text-opacity))
}
.text-\[\#5d6874\] {
    --tw-text-opacity: 1;
    color: rgb(93 104 116 / var(--tw-text-opacity))
}
.text-\[\#5f6672\] {
    --tw-text-opacity: 1;
    color: rgb(95 102 114 / var(--tw-text-opacity))
}
.text-\[\#5f6a84\] {
    --tw-text-opacity: 1;
    color: rgb(95 106 132 / var(--tw-text-opacity))
}
.text-\[\#5f6f85\] {
    --tw-text-opacity: 1;
    color: rgb(95 111 133 / var(--tw-text-opacity))
}
.text-\[\#60a5fa\] {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity))
}
.text-\[\#65738a\] {
    --tw-text-opacity: 1;
    color: rgb(101 115 138 / var(--tw-text-opacity))
}
.text-\[\#65dc9a\] {
    --tw-text-opacity: 1;
    color: rgb(101 220 154 / var(--tw-text-opacity))
}
.text-\[\#65dcff\] {
    --tw-text-opacity: 1;
    color: rgb(101 220 255 / var(--tw-text-opacity))
}
.text-\[\#663C00\] {
    --tw-text-opacity: 1;
    color: rgb(102 60 0 / var(--tw-text-opacity))
}
.text-\[\#666666\] {
    --tw-text-opacity: 1;
    color: rgb(102 102 102 / var(--tw-text-opacity))
}
.text-\[\#66727f\] {
    --tw-text-opacity: 1;
    color: rgb(102 114 127 / var(--tw-text-opacity))
}
.text-\[\#66728a\] {
    --tw-text-opacity: 1;
    color: rgb(102 114 138 / var(--tw-text-opacity))
}
.text-\[\#66d9b8\] {
    --tw-text-opacity: 1;
    color: rgb(102 217 184 / var(--tw-text-opacity))
}
.text-\[\#67758a\] {
    --tw-text-opacity: 1;
    color: rgb(103 117 138 / var(--tw-text-opacity))
}
.text-\[\#69707d\] {
    --tw-text-opacity: 1;
    color: rgb(105 112 125 / var(--tw-text-opacity))
}
.text-\[\#6a5a44\] {
    --tw-text-opacity: 1;
    color: rgb(106 90 68 / var(--tw-text-opacity))
}
.text-\[\#6a5a7a\] {
    --tw-text-opacity: 1;
    color: rgb(106 90 122 / var(--tw-text-opacity))
}
.text-\[\#6a7f96\] {
    --tw-text-opacity: 1;
    color: rgb(106 127 150 / var(--tw-text-opacity))
}
.text-\[\#6b7280\] {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity))
}
.text-\[\#6b7488\] {
    --tw-text-opacity: 1;
    color: rgb(107 116 136 / var(--tw-text-opacity))
}
.text-\[\#6b7c93\] {
    --tw-text-opacity: 1;
    color: rgb(107 124 147 / var(--tw-text-opacity))
}
.text-\[\#6b7d94\] {
    --tw-text-opacity: 1;
    color: rgb(107 125 148 / var(--tw-text-opacity))
}
.text-\[\#6d727a\] {
    --tw-text-opacity: 1;
    color: rgb(109 114 122 / var(--tw-text-opacity))
}
.text-\[\#6d7887\] {
    --tw-text-opacity: 1;
    color: rgb(109 120 135 / var(--tw-text-opacity))
}
.text-\[\#6db8d6\] {
    --tw-text-opacity: 1;
    color: rgb(109 184 214 / var(--tw-text-opacity))
}
.text-\[\#6e7480\] {
    --tw-text-opacity: 1;
    color: rgb(110 116 128 / var(--tw-text-opacity))
}
.text-\[\#6ee7b7\] {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity))
}
.text-\[\#6f7280\] {
    --tw-text-opacity: 1;
    color: rgb(111 114 128 / var(--tw-text-opacity))
}
.text-\[\#6f7b8a\] {
    --tw-text-opacity: 1;
    color: rgb(111 123 138 / var(--tw-text-opacity))
}
.text-\[\#6f8fb8\] {
    --tw-text-opacity: 1;
    color: rgb(111 143 184 / var(--tw-text-opacity))
}
.text-\[\#6fc7c0\] {
    --tw-text-opacity: 1;
    color: rgb(111 199 192 / var(--tw-text-opacity))
}
.text-\[\#737373\] {
    --tw-text-opacity: 1;
    color: rgb(115 115 115 / var(--tw-text-opacity))
}
.text-\[\#78849a\] {
    --tw-text-opacity: 1;
    color: rgb(120 132 154 / var(--tw-text-opacity))
}
.text-\[\#79818f\] {
    --tw-text-opacity: 1;
    color: rgb(121 129 143 / var(--tw-text-opacity))
}
.text-\[\#7A8296\] {
    --tw-text-opacity: 1;
    color: rgb(122 130 150 / var(--tw-text-opacity))
}
.text-\[\#7a6a8a\] {
    --tw-text-opacity: 1;
    color: rgb(122 106 138 / var(--tw-text-opacity))
}
.text-\[\#7a8698\] {
    --tw-text-opacity: 1;
    color: rgb(122 134 152 / var(--tw-text-opacity))
}
.text-\[\#7a90a5\] {
    --tw-text-opacity: 1;
    color: rgb(122 144 165 / var(--tw-text-opacity))
}
.text-\[\#7b7f82\] {
    --tw-text-opacity: 1;
    color: rgb(123 127 130 / var(--tw-text-opacity))
}
.text-\[\#7b8695\] {
    --tw-text-opacity: 1;
    color: rgb(123 134 149 / var(--tw-text-opacity))
}
.text-\[\#7ba7e0\] {
    --tw-text-opacity: 1;
    color: rgb(123 167 224 / var(--tw-text-opacity))
}
.text-\[\#7c3aed\] {
    --tw-text-opacity: 1;
    color: rgb(124 58 237 / var(--tw-text-opacity))
}
.text-\[\#7c828a\] {
    --tw-text-opacity: 1;
    color: rgb(124 130 138 / var(--tw-text-opacity))
}
.text-\[\#7d838e\] {
    --tw-text-opacity: 1;
    color: rgb(125 131 142 / var(--tw-text-opacity))
}
.text-\[\#7d8896\] {
    --tw-text-opacity: 1;
    color: rgb(125 136 150 / var(--tw-text-opacity))
}
.text-\[\#7d8899\] {
    --tw-text-opacity: 1;
    color: rgb(125 136 153 / var(--tw-text-opacity))
}
.text-\[\#7d8998\] {
    --tw-text-opacity: 1;
    color: rgb(125 137 152 / var(--tw-text-opacity))
}
.text-\[\#7dffb0\] {
    --tw-text-opacity: 1;
    color: rgb(125 255 176 / var(--tw-text-opacity))
}
.text-\[\#7f8b9e\] {
    --tw-text-opacity: 1;
    color: rgb(127 139 158 / var(--tw-text-opacity))
}
.text-\[\#7f8d83\] {
    --tw-text-opacity: 1;
    color: rgb(127 141 131 / var(--tw-text-opacity))
}
.text-\[\#7fb069\] {
    --tw-text-opacity: 1;
    color: rgb(127 176 105 / var(--tw-text-opacity))
}
.text-\[\#7fb8cf\] {
    --tw-text-opacity: 1;
    color: rgb(127 184 207 / var(--tw-text-opacity))
}
.text-\[\#8397ad\] {
    --tw-text-opacity: 1;
    color: rgb(131 151 173 / var(--tw-text-opacity))
}
.text-\[\#8590a4\] {
    --tw-text-opacity: 1;
    color: rgb(133 144 164 / var(--tw-text-opacity))
}
.text-\[\#86efac\] {
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity))
}
.text-\[\#88739c\] {
    --tw-text-opacity: 1;
    color: rgb(136 115 156 / var(--tw-text-opacity))
}
.text-\[\#888888\] {
    --tw-text-opacity: 1;
    color: rgb(136 136 136 / var(--tw-text-opacity))
}
.text-\[\#888\] {
    --tw-text-opacity: 1;
    color: rgb(136 136 136 / var(--tw-text-opacity))
}
.text-\[\#8892aa\] {
    --tw-text-opacity: 1;
    color: rgb(136 146 170 / var(--tw-text-opacity))
}
.text-\[\#8894aa\] {
    --tw-text-opacity: 1;
    color: rgb(136 148 170 / var(--tw-text-opacity))
}
.text-\[\#8994a4\] {
    --tw-text-opacity: 1;
    color: rgb(137 148 164 / var(--tw-text-opacity))
}
.text-\[\#8BC34A\] {
    --tw-text-opacity: 1;
    color: rgb(139 195 74 / var(--tw-text-opacity))
}
.text-\[\#8a7658\] {
    --tw-text-opacity: 1;
    color: rgb(138 118 88 / var(--tw-text-opacity))
}
.text-\[\#8a7a9a\] {
    --tw-text-opacity: 1;
    color: rgb(138 122 154 / var(--tw-text-opacity))
}
.text-\[\#8a8a8a\] {
    --tw-text-opacity: 1;
    color: rgb(138 138 138 / var(--tw-text-opacity))
}
.text-\[\#8a9096\] {
    --tw-text-opacity: 1;
    color: rgb(138 144 150 / var(--tw-text-opacity))
}
.text-\[\#8a919e\] {
    --tw-text-opacity: 1;
    color: rgb(138 145 158 / var(--tw-text-opacity))
}
.text-\[\#8ae0d0\] {
    --tw-text-opacity: 1;
    color: rgb(138 224 208 / var(--tw-text-opacity))
}
.text-\[\#8aefc7\] {
    --tw-text-opacity: 1;
    color: rgb(138 239 199 / var(--tw-text-opacity))
}
.text-\[\#8b9096\] {
    --tw-text-opacity: 1;
    color: rgb(139 144 150 / var(--tw-text-opacity))
}
.text-\[\#8b90a0\] {
    --tw-text-opacity: 1;
    color: rgb(139 144 160 / var(--tw-text-opacity))
}
.text-\[\#8b919c\] {
    --tw-text-opacity: 1;
    color: rgb(139 145 156 / var(--tw-text-opacity))
}
.text-\[\#8b93a1\] {
    --tw-text-opacity: 1;
    color: rgb(139 147 161 / var(--tw-text-opacity))
}
.text-\[\#8b97a6\] {
    --tw-text-opacity: 1;
    color: rgb(139 151 166 / var(--tw-text-opacity))
}
.text-\[\#8b98ac\] {
    --tw-text-opacity: 1;
    color: rgb(139 152 172 / var(--tw-text-opacity))
}
.text-\[\#8d99ad\] {
    --tw-text-opacity: 1;
    color: rgb(141 153 173 / var(--tw-text-opacity))
}
.text-\[\#8d9aab\] {
    --tw-text-opacity: 1;
    color: rgb(141 154 171 / var(--tw-text-opacity))
}
.text-\[\#8ef0b0\] {
    --tw-text-opacity: 1;
    color: rgb(142 240 176 / var(--tw-text-opacity))
}
.text-\[\#8f7aa4\] {
    --tw-text-opacity: 1;
    color: rgb(143 122 164 / var(--tw-text-opacity))
}
.text-\[\#8f9298\] {
    --tw-text-opacity: 1;
    color: rgb(143 146 152 / var(--tw-text-opacity))
}
.text-\[\#8fa0b8\] {
    --tw-text-opacity: 1;
    color: rgb(143 160 184 / var(--tw-text-opacity))
}
.text-\[\#8fa3b8\] {
    --tw-text-opacity: 1;
    color: rgb(143 163 184 / var(--tw-text-opacity))
}
.text-\[\#8fb8e0\] {
    --tw-text-opacity: 1;
    color: rgb(143 184 224 / var(--tw-text-opacity))
}
.text-\[\#8fc1e4\] {
    --tw-text-opacity: 1;
    color: rgb(143 193 228 / var(--tw-text-opacity))
}
.text-\[\#8fc4f0\] {
    --tw-text-opacity: 1;
    color: rgb(143 196 240 / var(--tw-text-opacity))
}
.text-\[\#8fd6ff\] {
    --tw-text-opacity: 1;
    color: rgb(143 214 255 / var(--tw-text-opacity))
}
.text-\[\#8fd9a8\] {
    --tw-text-opacity: 1;
    color: rgb(143 217 168 / var(--tw-text-opacity))
}
.text-\[\#8fdcac\] {
    --tw-text-opacity: 1;
    color: rgb(143 220 172 / var(--tw-text-opacity))
}
.text-\[\#92400e\] {
    --tw-text-opacity: 1;
    color: rgb(146 64 14 / var(--tw-text-opacity))
}
.text-\[\#93a1b8\] {
    --tw-text-opacity: 1;
    color: rgb(147 161 184 / var(--tw-text-opacity))
}
.text-\[\#93a6cc\] {
    --tw-text-opacity: 1;
    color: rgb(147 166 204 / var(--tw-text-opacity))
}
.text-\[\#93e7ff\] {
    --tw-text-opacity: 1;
    color: rgb(147 231 255 / var(--tw-text-opacity))
}
.text-\[\#999999\] {
    --tw-text-opacity: 1;
    color: rgb(153 153 153 / var(--tw-text-opacity))
}
.text-\[\#9a9a9a\] {
    --tw-text-opacity: 1;
    color: rgb(154 154 154 / var(--tw-text-opacity))
}
.text-\[\#9aa0a5\] {
    --tw-text-opacity: 1;
    color: rgb(154 160 165 / var(--tw-text-opacity))
}
.text-\[\#9aa0aa\] {
    --tw-text-opacity: 1;
    color: rgb(154 160 170 / var(--tw-text-opacity))
}
.text-\[\#9aa3b1\] {
    --tw-text-opacity: 1;
    color: rgb(154 163 177 / var(--tw-text-opacity))
}
.text-\[\#9aa4bb\] {
    --tw-text-opacity: 1;
    color: rgb(154 164 187 / var(--tw-text-opacity))
}
.text-\[\#9aa7b8\] {
    --tw-text-opacity: 1;
    color: rgb(154 167 184 / var(--tw-text-opacity))
}
.text-\[\#9aa8c4\] {
    --tw-text-opacity: 1;
    color: rgb(154 168 196 / var(--tw-text-opacity))
}
.text-\[\#9df0a4\] {
    --tw-text-opacity: 1;
    color: rgb(157 240 164 / var(--tw-text-opacity))
}
.text-\[\#9fb4ff\] {
    --tw-text-opacity: 1;
    color: rgb(159 180 255 / var(--tw-text-opacity))
}
.text-\[\#9fe6f2\] {
    --tw-text-opacity: 1;
    color: rgb(159 230 242 / var(--tw-text-opacity))
}
.text-\[\#9fe8f7\] {
    --tw-text-opacity: 1;
    color: rgb(159 232 247 / var(--tw-text-opacity))
}
.text-\[\#A972FF\] {
    --tw-text-opacity: 1;
    color: rgb(169 114 255 / var(--tw-text-opacity))
}
.text-\[\#AA00FF\] {
    --tw-text-opacity: 1;
    color: rgb(170 0 255 / var(--tw-text-opacity))
}
.text-\[\#AAAAAA\] {
    --tw-text-opacity: 1;
    color: rgb(170 170 170 / var(--tw-text-opacity))
}
.text-\[\#C7CEDA\] {
    --tw-text-opacity: 1;
    color: rgb(199 206 218 / var(--tw-text-opacity))
}
.text-\[\#C9F24D\] {
    --tw-text-opacity: 1;
    color: rgb(201 242 77 / var(--tw-text-opacity))
}
.text-\[\#CCCCCC\] {
    --tw-text-opacity: 1;
    color: rgb(204 204 204 / var(--tw-text-opacity))
}
.text-\[\#E8B54A\] {
    --tw-text-opacity: 1;
    color: rgb(232 181 74 / var(--tw-text-opacity))
}
.text-\[\#EDEFF5\] {
    --tw-text-opacity: 1;
    color: rgb(237 239 245 / var(--tw-text-opacity))
}
.text-\[\#FF0000\] {
    --tw-text-opacity: 1;
    color: rgb(255 0 0 / var(--tw-text-opacity))
}
.text-\[\#FF4D6D\] {
    --tw-text-opacity: 1;
    color: rgb(255 77 109 / var(--tw-text-opacity))
}
.text-\[\#FF5500\] {
    --tw-text-opacity: 1;
    color: rgb(255 85 0 / var(--tw-text-opacity))
}
.text-\[\#FF8FA3\] {
    --tw-text-opacity: 1;
    color: rgb(255 143 163 / var(--tw-text-opacity))
}
.text-\[\#FF9800\] {
    --tw-text-opacity: 1;
    color: rgb(255 152 0 / var(--tw-text-opacity))
}
.text-\[\#a2a7ad\] {
    --tw-text-opacity: 1;
    color: rgb(162 167 173 / var(--tw-text-opacity))
}
.text-\[\#a3a3a3\] {
    --tw-text-opacity: 1;
    color: rgb(163 163 163 / var(--tw-text-opacity))
}
.text-\[\#a3b0c1\] {
    --tw-text-opacity: 1;
    color: rgb(163 176 193 / var(--tw-text-opacity))
}
.text-\[\#a7adb5\] {
    --tw-text-opacity: 1;
    color: rgb(167 173 181 / var(--tw-text-opacity))
}
.text-\[\#a89f8a\] {
    --tw-text-opacity: 1;
    color: rgb(168 159 138 / var(--tw-text-opacity))
}
.text-\[\#a8b4c8\] {
    --tw-text-opacity: 1;
    color: rgb(168 180 200 / var(--tw-text-opacity))
}
.text-\[\#a8f5cf\] {
    --tw-text-opacity: 1;
    color: rgb(168 245 207 / var(--tw-text-opacity))
}
.text-\[\#a9aeb6\] {
    --tw-text-opacity: 1;
    color: rgb(169 174 182 / var(--tw-text-opacity))
}
.text-\[\#a9b0bb\] {
    --tw-text-opacity: 1;
    color: rgb(169 176 187 / var(--tw-text-opacity))
}
.text-\[\#aab6c6\] {
    --tw-text-opacity: 1;
    color: rgb(170 182 198 / var(--tw-text-opacity))
}
.text-\[\#aeb3b9\] {
    --tw-text-opacity: 1;
    color: rgb(174 179 185 / var(--tw-text-opacity))
}
.text-\[\#aeb4c2\] {
    --tw-text-opacity: 1;
    color: rgb(174 180 194 / var(--tw-text-opacity))
}
.text-\[\#aeb6c4\] {
    --tw-text-opacity: 1;
    color: rgb(174 182 196 / var(--tw-text-opacity))
}
.text-\[\#b3bec9\] {
    --tw-text-opacity: 1;
    color: rgb(179 190 201 / var(--tw-text-opacity))
}
.text-\[\#b6a4c6\] {
    --tw-text-opacity: 1;
    color: rgb(182 164 198 / var(--tw-text-opacity))
}
.text-\[\#b6a892\] {
    --tw-text-opacity: 1;
    color: rgb(182 168 146 / var(--tw-text-opacity))
}
.text-\[\#b6bac1\] {
    --tw-text-opacity: 1;
    color: rgb(182 186 193 / var(--tw-text-opacity))
}
.text-\[\#b892cf\] {
    --tw-text-opacity: 1;
    color: rgb(184 146 207 / var(--tw-text-opacity))
}
.text-\[\#b8f0ea\] {
    --tw-text-opacity: 1;
    color: rgb(184 240 234 / var(--tw-text-opacity))
}
.text-\[\#b8f5cc\] {
    --tw-text-opacity: 1;
    color: rgb(184 245 204 / var(--tw-text-opacity))
}
.text-\[\#c0c6d4\] {
    --tw-text-opacity: 1;
    color: rgb(192 198 212 / var(--tw-text-opacity))
}
.text-\[\#c2c4ca\] {
    --tw-text-opacity: 1;
    color: rgb(194 196 202 / var(--tw-text-opacity))
}
.text-\[\#c2c7ce\] {
    --tw-text-opacity: 1;
    color: rgb(194 199 206 / var(--tw-text-opacity))
}
.text-\[\#c2cddf\] {
    --tw-text-opacity: 1;
    color: rgb(194 205 223 / var(--tw-text-opacity))
}
.text-\[\#c2f0e3\] {
    --tw-text-opacity: 1;
    color: rgb(194 240 227 / var(--tw-text-opacity))
}
.text-\[\#c3b3d0\] {
    --tw-text-opacity: 1;
    color: rgb(195 179 208 / var(--tw-text-opacity))
}
.text-\[\#c3cdd8\] {
    --tw-text-opacity: 1;
    color: rgb(195 205 216 / var(--tw-text-opacity))
}
.text-\[\#c3ced9\] {
    --tw-text-opacity: 1;
    color: rgb(195 206 217 / var(--tw-text-opacity))
}
.text-\[\#c4a48a\] {
    --tw-text-opacity: 1;
    color: rgb(196 164 138 / var(--tw-text-opacity))
}
.text-\[\#c6adda\] {
    --tw-text-opacity: 1;
    color: rgb(198 173 218 / var(--tw-text-opacity))
}
.text-\[\#c8b48a\] {
    --tw-text-opacity: 1;
    color: rgb(200 180 138 / var(--tw-text-opacity))
}
.text-\[\#c8c8c8\] {
    --tw-text-opacity: 1;
    color: rgb(200 200 200 / var(--tw-text-opacity))
}
.text-\[\#c8ccd4\] {
    --tw-text-opacity: 1;
    color: rgb(200 204 212 / var(--tw-text-opacity))
}
.text-\[\#c8d6e4\] {
    --tw-text-opacity: 1;
    color: rgb(200 214 228 / var(--tw-text-opacity))
}
.text-\[\#c8f5ea\] {
    --tw-text-opacity: 1;
    color: rgb(200 245 234 / var(--tw-text-opacity))
}
.text-\[\#c9a8ff\] {
    --tw-text-opacity: 1;
    color: rgb(201 168 255 / var(--tw-text-opacity))
}
.text-\[\#c9ccd4\] {
    --tw-text-opacity: 1;
    color: rgb(201 204 212 / var(--tw-text-opacity))
}
.text-\[\#c9ced4\] {
    --tw-text-opacity: 1;
    color: rgb(201 206 212 / var(--tw-text-opacity))
}
.text-\[\#c9cfd9\] {
    --tw-text-opacity: 1;
    color: rgb(201 207 217 / var(--tw-text-opacity))
}
.text-\[\#c9ecff\] {
    --tw-text-opacity: 1;
    color: rgb(201 236 255 / var(--tw-text-opacity))
}
.text-\[\#c9f24d\] {
    --tw-text-opacity: 1;
    color: rgb(201 242 77 / var(--tw-text-opacity))
}
.text-\[\#cfc4a8\] {
    --tw-text-opacity: 1;
    color: rgb(207 196 168 / var(--tw-text-opacity))
}
.text-\[\#cfcfcf\] {
    --tw-text-opacity: 1;
    color: rgb(207 207 207 / var(--tw-text-opacity))
}
.text-\[\#cfe2f8\] {
    --tw-text-opacity: 1;
    color: rgb(207 226 248 / var(--tw-text-opacity))
}
.text-\[\#d3b8ff\] {
    --tw-text-opacity: 1;
    color: rgb(211 184 255 / var(--tw-text-opacity))
}
.text-\[\#d4b483\] {
    --tw-text-opacity: 1;
    color: rgb(212 180 131 / var(--tw-text-opacity))
}
.text-\[\#d5d5d5\] {
    --tw-text-opacity: 1;
    color: rgb(213 213 213 / var(--tw-text-opacity))
}
.text-\[\#d6e0ee\] {
    --tw-text-opacity: 1;
    color: rgb(214 224 238 / var(--tw-text-opacity))
}
.text-\[\#d6e0f0\] {
    --tw-text-opacity: 1;
    color: rgb(214 224 240 / var(--tw-text-opacity))
}
.text-\[\#d6e6ff\] {
    --tw-text-opacity: 1;
    color: rgb(214 230 255 / var(--tw-text-opacity))
}
.text-\[\#d8c199\] {
    --tw-text-opacity: 1;
    color: rgb(216 193 153 / var(--tw-text-opacity))
}
.text-\[\#d9ecff\] {
    --tw-text-opacity: 1;
    color: rgb(217 236 255 / var(--tw-text-opacity))
}
.text-\[\#dbe7f4\] {
    --tw-text-opacity: 1;
    color: rgb(219 231 244 / var(--tw-text-opacity))
}
.text-\[\#dde3ec\] {
    --tw-text-opacity: 1;
    color: rgb(221 227 236 / var(--tw-text-opacity))
}
.text-\[\#dfe3ea\] {
    --tw-text-opacity: 1;
    color: rgb(223 227 234 / var(--tw-text-opacity))
}
.text-\[\#dfe4ec\] {
    --tw-text-opacity: 1;
    color: rgb(223 228 236 / var(--tw-text-opacity))
}
.text-\[\#dfe7f8\] {
    --tw-text-opacity: 1;
    color: rgb(223 231 248 / var(--tw-text-opacity))
}
.text-\[\#e08a4a\] {
    --tw-text-opacity: 1;
    color: rgb(224 138 74 / var(--tw-text-opacity))
}
.text-\[\#e0b06a\] {
    --tw-text-opacity: 1;
    color: rgb(224 176 106 / var(--tw-text-opacity))
}
.text-\[\#e0c33c\] {
    --tw-text-opacity: 1;
    color: rgb(224 195 60 / var(--tw-text-opacity))
}
.text-\[\#e2d8c6\] {
    --tw-text-opacity: 1;
    color: rgb(226 216 198 / var(--tw-text-opacity))
}
.text-\[\#e2edf7\] {
    --tw-text-opacity: 1;
    color: rgb(226 237 247 / var(--tw-text-opacity))
}
.text-\[\#e6c07a\] {
    --tw-text-opacity: 1;
    color: rgb(230 192 122 / var(--tw-text-opacity))
}
.text-\[\#e6d3f5\] {
    --tw-text-opacity: 1;
    color: rgb(230 211 245 / var(--tw-text-opacity))
}
.text-\[\#e6dcee\] {
    --tw-text-opacity: 1;
    color: rgb(230 220 238 / var(--tw-text-opacity))
}
.text-\[\#e6ebf2\] {
    --tw-text-opacity: 1;
    color: rgb(230 235 242 / var(--tw-text-opacity))
}
.text-\[\#e79ec4\] {
    --tw-text-opacity: 1;
    color: rgb(231 158 196 / var(--tw-text-opacity))
}
.text-\[\#e7f0ff\] {
    --tw-text-opacity: 1;
    color: rgb(231 240 255 / var(--tw-text-opacity))
}
.text-\[\#e8c07a\] {
    --tw-text-opacity: 1;
    color: rgb(232 192 122 / var(--tw-text-opacity))
}
.text-\[\#e8c48a\] {
    --tw-text-opacity: 1;
    color: rgb(232 196 138 / var(--tw-text-opacity))
}
.text-\[\#e8dcc0\] {
    --tw-text-opacity: 1;
    color: rgb(232 220 192 / var(--tw-text-opacity))
}
.text-\[\#e8ddc8\] {
    --tw-text-opacity: 1;
    color: rgb(232 221 200 / var(--tw-text-opacity))
}
.text-\[\#e8ecf2\] {
    --tw-text-opacity: 1;
    color: rgb(232 236 242 / var(--tw-text-opacity))
}
.text-\[\#e8f4f8\] {
    --tw-text-opacity: 1;
    color: rgb(232 244 248 / var(--tw-text-opacity))
}
.text-\[\#e9ccff\] {
    --tw-text-opacity: 1;
    color: rgb(233 204 255 / var(--tw-text-opacity))
}
.text-\[\#eef3fc\] {
    --tw-text-opacity: 1;
    color: rgb(238 243 252 / var(--tw-text-opacity))
}
.text-\[\#eef4f9\] {
    --tw-text-opacity: 1;
    color: rgb(238 244 249 / var(--tw-text-opacity))
}
.text-\[\#eef7ff\] {
    --tw-text-opacity: 1;
    color: rgb(238 247 255 / var(--tw-text-opacity))
}
.text-\[\#ef4444\] {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity))
}
.text-\[\#eff3f9\] {
    --tw-text-opacity: 1;
    color: rgb(239 243 249 / var(--tw-text-opacity))
}
.text-\[\#f0d5a2\] {
    --tw-text-opacity: 1;
    color: rgb(240 213 162 / var(--tw-text-opacity))
}
.text-\[\#f0e0c0\] {
    --tw-text-opacity: 1;
    color: rgb(240 224 192 / var(--tw-text-opacity))
}
.text-\[\#f0e2cc\] {
    --tw-text-opacity: 1;
    color: rgb(240 226 204 / var(--tw-text-opacity))
}
.text-\[\#f0e4c8\] {
    --tw-text-opacity: 1;
    color: rgb(240 228 200 / var(--tw-text-opacity))
}
.text-\[\#f1f3f5\] {
    --tw-text-opacity: 1;
    color: rgb(241 243 245 / var(--tw-text-opacity))
}
.text-\[\#f4fbff\] {
    --tw-text-opacity: 1;
    color: rgb(244 251 255 / var(--tw-text-opacity))
}
.text-\[\#f5d76e\] {
    --tw-text-opacity: 1;
    color: rgb(245 215 110 / var(--tw-text-opacity))
}
.text-\[\#f6cdd8\] {
    --tw-text-opacity: 1;
    color: rgb(246 205 216 / var(--tw-text-opacity))
}
.text-\[\#f6ecc0\] {
    --tw-text-opacity: 1;
    color: rgb(246 236 192 / var(--tw-text-opacity))
}
.text-\[\#facc15\] {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity))
}
.text-\[\#ff4aa3\] {
    --tw-text-opacity: 1;
    color: rgb(255 74 163 / var(--tw-text-opacity))
}
.text-\[\#ff5f6d\] {
    --tw-text-opacity: 1;
    color: rgb(255 95 109 / var(--tw-text-opacity))
}
.text-\[\#ff6a60\] {
    --tw-text-opacity: 1;
    color: rgb(255 106 96 / var(--tw-text-opacity))
}
.text-\[\#ff7a7a\] {
    --tw-text-opacity: 1;
    color: rgb(255 122 122 / var(--tw-text-opacity))
}
.text-\[\#ff8f8f\] {
    --tw-text-opacity: 1;
    color: rgb(255 143 143 / var(--tw-text-opacity))
}
.text-\[\#ff9a9a\] {
    --tw-text-opacity: 1;
    color: rgb(255 154 154 / var(--tw-text-opacity))
}
.text-\[\#ff9b9b\] {
    --tw-text-opacity: 1;
    color: rgb(255 155 155 / var(--tw-text-opacity))
}
.text-\[\#ff9c8f\] {
    --tw-text-opacity: 1;
    color: rgb(255 156 143 / var(--tw-text-opacity))
}
.text-\[\#ffb0aa\] {
    --tw-text-opacity: 1;
    color: rgb(255 176 170 / var(--tw-text-opacity))
}
.text-\[\#ffb59f\] {
    --tw-text-opacity: 1;
    color: rgb(255 181 159 / var(--tw-text-opacity))
}
.text-\[\#ffb9b9\] {
    --tw-text-opacity: 1;
    color: rgb(255 185 185 / var(--tw-text-opacity))
}
.text-\[\#ffb9cb\] {
    --tw-text-opacity: 1;
    color: rgb(255 185 203 / var(--tw-text-opacity))
}
.text-\[\#ffc4de\] {
    --tw-text-opacity: 1;
    color: rgb(255 196 222 / var(--tw-text-opacity))
}
.text-\[\#ffc9c9\] {
    --tw-text-opacity: 1;
    color: rgb(255 201 201 / var(--tw-text-opacity))
}
.text-\[\#ffcccc\] {
    --tw-text-opacity: 1;
    color: rgb(255 204 204 / var(--tw-text-opacity))
}
.text-\[\#ffcf4a\] {
    --tw-text-opacity: 1;
    color: rgb(255 207 74 / var(--tw-text-opacity))
}
.text-\[\#ffcf9a\] {
    --tw-text-opacity: 1;
    color: rgb(255 207 154 / var(--tw-text-opacity))
}
.text-\[\#ffd479\] {
    --tw-text-opacity: 1;
    color: rgb(255 212 121 / var(--tw-text-opacity))
}
.text-\[\#ffd79a\] {
    --tw-text-opacity: 1;
    color: rgb(255 215 154 / var(--tw-text-opacity))
}
.text-\[\#ffd7a8\] {
    --tw-text-opacity: 1;
    color: rgb(255 215 168 / var(--tw-text-opacity))
}
.text-\[\#ffd98c\] {
    --tw-text-opacity: 1;
    color: rgb(255 217 140 / var(--tw-text-opacity))
}
.text-\[\#ffd9a0\] {
    --tw-text-opacity: 1;
    color: rgb(255 217 160 / var(--tw-text-opacity))
}
.text-\[\#ffe3b0\] {
    --tw-text-opacity: 1;
    color: rgb(255 227 176 / var(--tw-text-opacity))
}
.text-\[\#ffe8f4\] {
    --tw-text-opacity: 1;
    color: rgb(255 232 244 / var(--tw-text-opacity))
}
.text-\[\#ffe9a8\] {
    --tw-text-opacity: 1;
    color: rgb(255 233 168 / var(--tw-text-opacity))
}
.text-\[color\:var\(--fx-accent-lit\)\] {
    color: var(--fx-accent-lit)
}
.text-\[color\:var\(--fx-quiet-ink\)\] {
    color: var(--fx-quiet-ink)
}
.text-\[color\:var\(--fx-tail-ink\)\] {
    color: var(--fx-tail-ink)
}
.text-accent-foreground {
    color: hsl(var(--accent-foreground))
}
.text-amber-100 {
    --tw-text-opacity: 1;
    color: rgb(254 243 199 / var(--tw-text-opacity))
}
.text-amber-100\/80 {
    color: rgb(254 243 199 / 0.8)
}
.text-amber-100\/90 {
    color: rgb(254 243 199 / 0.9)
}
.text-amber-200 {
    --tw-text-opacity: 1;
    color: rgb(253 230 138 / var(--tw-text-opacity))
}
.text-amber-200\/80 {
    color: rgb(253 230 138 / 0.8)
}
.text-amber-300 {
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity))
}
.text-amber-400 {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity))
}
.text-amber-600 {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity))
}
.text-amber-700 {
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity))
}
.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity))
}
.text-blue-200 {
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity))
}
.text-blue-300 {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity))
}
.text-blue-400 {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity))
}
.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity))
}
.text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity))
}
.text-blue-700 {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity))
}
.text-blue-800 {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity))
}
.text-card-foreground {
    color: hsl(var(--card-foreground))
}
.text-current {
    color: currentColor
}
.text-cyan-100\/80 {
    color: rgb(207 250 254 / 0.8)
}
.text-cyan-300 {
    --tw-text-opacity: 1;
    color: rgb(103 232 249 / var(--tw-text-opacity))
}
.text-cyan-300\/80 {
    color: rgb(103 232 249 / 0.8)
}
.text-cyan-400 {
    --tw-text-opacity: 1;
    color: rgb(34 211 238 / var(--tw-text-opacity))
}
.text-cyan-50 {
    --tw-text-opacity: 1;
    color: rgb(236 254 255 / var(--tw-text-opacity))
}
.text-cyan-600 {
    --tw-text-opacity: 1;
    color: rgb(8 145 178 / var(--tw-text-opacity))
}
.text-destructive {
    color: hsl(var(--destructive))
}
.text-destructive-foreground {
    color: hsl(var(--destructive-foreground))
}
.text-emerald-100 {
    --tw-text-opacity: 1;
    color: rgb(209 250 229 / var(--tw-text-opacity))
}
.text-emerald-300 {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity))
}
.text-emerald-400 {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity))
}
.text-emerald-400\/70 {
    color: rgb(52 211 153 / 0.7)
}
.text-emerald-50 {
    --tw-text-opacity: 1;
    color: rgb(236 253 245 / var(--tw-text-opacity))
}
.text-foreground {
    color: hsl(var(--foreground))
}
.text-foreground\/50 {
    color: hsl(var(--foreground) / 0.5)
}
.text-fuchsia-300\/70 {
    color: rgb(240 171 252 / 0.7)
}
.text-gray-100 {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity))
}
.text-gray-200 {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity))
}
.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity))
}
.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity))
}
.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity))
}
.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity))
}
.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity))
}
.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity))
}
.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity))
}
.text-green-200 {
    --tw-text-opacity: 1;
    color: rgb(187 247 208 / var(--tw-text-opacity))
}
.text-green-300 {
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity))
}
.text-green-400 {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity))
}
.text-green-500 {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity))
}
.text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity))
}
.text-green-700 {
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity))
}
.text-green-800 {
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity))
}
.text-indigo-700 {
    --tw-text-opacity: 1;
    color: rgb(67 56 202 / var(--tw-text-opacity))
}
.text-muted-foreground {
    color: hsl(var(--muted-foreground))
}
.text-neutral-100 {
    --tw-text-opacity: 1;
    color: rgb(245 245 245 / var(--tw-text-opacity))
}
.text-neutral-200 {
    --tw-text-opacity: 1;
    color: rgb(229 229 229 / var(--tw-text-opacity))
}
.text-neutral-300 {
    --tw-text-opacity: 1;
    color: rgb(212 212 212 / var(--tw-text-opacity))
}
.text-neutral-400 {
    --tw-text-opacity: 1;
    color: rgb(163 163 163 / var(--tw-text-opacity))
}
.text-neutral-500 {
    --tw-text-opacity: 1;
    color: rgb(115 115 115 / var(--tw-text-opacity))
}
.text-neutral-600 {
    --tw-text-opacity: 1;
    color: rgb(82 82 82 / var(--tw-text-opacity))
}
.text-pink-300 {
    --tw-text-opacity: 1;
    color: rgb(249 168 212 / var(--tw-text-opacity))
}
.text-pink-400 {
    --tw-text-opacity: 1;
    color: rgb(244 114 182 / var(--tw-text-opacity))
}
.text-popover-foreground {
    color: hsl(var(--popover-foreground))
}
.text-primary {
    color: hsl(var(--primary))
}
.text-primary-foreground {
    color: hsl(var(--primary-foreground))
}
.text-purple-300 {
    --tw-text-opacity: 1;
    color: rgb(216 180 254 / var(--tw-text-opacity))
}
.text-purple-400 {
    --tw-text-opacity: 1;
    color: rgb(192 132 252 / var(--tw-text-opacity))
}
.text-purple-500 {
    --tw-text-opacity: 1;
    color: rgb(168 85 247 / var(--tw-text-opacity))
}
.text-purple-600 {
    --tw-text-opacity: 1;
    color: rgb(147 51 234 / var(--tw-text-opacity))
}
.text-purple-700 {
    --tw-text-opacity: 1;
    color: rgb(126 34 206 / var(--tw-text-opacity))
}
.text-red-100 {
    --tw-text-opacity: 1;
    color: rgb(254 226 226 / var(--tw-text-opacity))
}
.text-red-200 {
    --tw-text-opacity: 1;
    color: rgb(254 202 202 / var(--tw-text-opacity))
}
.text-red-300 {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity))
}
.text-red-400 {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity))
}
.text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity))
}
.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity))
}
.text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity))
}
.text-red-800 {
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity))
}
.text-rose-100 {
    --tw-text-opacity: 1;
    color: rgb(255 228 230 / var(--tw-text-opacity))
}
.text-secondary-foreground {
    color: hsl(var(--secondary-foreground))
}
.text-sidebar-foreground {
    color: hsl(var(--sidebar-foreground))
}
.text-sidebar-foreground\/70 {
    color: hsl(var(--sidebar-foreground) / 0.7)
}
.text-slate-900 {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity))
}
.text-slate-950 {
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity))
}
.text-transparent {
    color: transparent
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.text-white\/20 {
    color: rgb(255 255 255 / 0.2)
}
.text-white\/30 {
    color: rgb(255 255 255 / 0.3)
}
.text-white\/35 {
    color: rgb(255 255 255 / 0.35)
}
.text-white\/40 {
    color: rgb(255 255 255 / 0.4)
}
.text-white\/45 {
    color: rgb(255 255 255 / 0.45)
}
.text-white\/50 {
    color: rgb(255 255 255 / 0.5)
}
.text-white\/55 {
    color: rgb(255 255 255 / 0.55)
}
.text-white\/60 {
    color: rgb(255 255 255 / 0.6)
}
.text-white\/65 {
    color: rgb(255 255 255 / 0.65)
}
.text-white\/70 {
    color: rgb(255 255 255 / 0.7)
}
.text-white\/75 {
    color: rgb(255 255 255 / 0.75)
}
.text-white\/80 {
    color: rgb(255 255 255 / 0.8)
}
.text-white\/85 {
    color: rgb(255 255 255 / 0.85)
}
.text-white\/90 {
    color: rgb(255 255 255 / 0.9)
}
.text-yellow-100 {
    --tw-text-opacity: 1;
    color: rgb(254 249 195 / var(--tw-text-opacity))
}
.text-yellow-100\/70 {
    color: rgb(254 249 195 / 0.7)
}
.text-yellow-200\/90 {
    color: rgb(254 240 138 / 0.9)
}
.text-yellow-300 {
    --tw-text-opacity: 1;
    color: rgb(253 224 71 / var(--tw-text-opacity))
}
.text-yellow-300\/90 {
    color: rgb(253 224 71 / 0.9)
}
.text-yellow-400 {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity))
}
.text-yellow-500 {
    --tw-text-opacity: 1;
    color: rgb(234 179 8 / var(--tw-text-opacity))
}
.text-yellow-700 {
    --tw-text-opacity: 1;
    color: rgb(161 98 7 / var(--tw-text-opacity))
}
.text-yellow-800 {
    --tw-text-opacity: 1;
    color: rgb(133 77 14 / var(--tw-text-opacity))
}
.text-yellow-900 {
    --tw-text-opacity: 1;
    color: rgb(113 63 18 / var(--tw-text-opacity))
}
.text-zinc-100 {
    --tw-text-opacity: 1;
    color: rgb(244 244 245 / var(--tw-text-opacity))
}
.text-zinc-400 {
    --tw-text-opacity: 1;
    color: rgb(161 161 170 / var(--tw-text-opacity))
}
.text-zinc-500 {
    --tw-text-opacity: 1;
    color: rgb(113 113 122 / var(--tw-text-opacity))
}
.text-zinc-600 {
    --tw-text-opacity: 1;
    color: rgb(82 82 91 / var(--tw-text-opacity))
}
.text-zinc-700 {
    --tw-text-opacity: 1;
    color: rgb(63 63 70 / var(--tw-text-opacity))
}
.underline {
    text-decoration-line: underline
}
.line-through {
    text-decoration-line: line-through
}
.underline-offset-2 {
    text-underline-offset: 2px
}
.underline-offset-4 {
    text-underline-offset: 4px
}
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.placeholder-\[\#3f5a70\]::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(63 90 112 / var(--tw-placeholder-opacity))
}
.placeholder-\[\#3f5a70\]::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(63 90 112 / var(--tw-placeholder-opacity))
}
.placeholder-\[\#737373\]::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(115 115 115 / var(--tw-placeholder-opacity))
}
.placeholder-\[\#737373\]::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(115 115 115 / var(--tw-placeholder-opacity))
}
.placeholder-gray-400::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(156 163 175 / var(--tw-placeholder-opacity))
}
.placeholder-gray-400::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(156 163 175 / var(--tw-placeholder-opacity))
}
.placeholder-gray-500::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(107 114 128 / var(--tw-placeholder-opacity))
}
.placeholder-gray-500::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(107 114 128 / var(--tw-placeholder-opacity))
}
.caret-blue-400 {
    caret-color: #60a5fa
}
.accent-\[\#00FF00\] {
    accent-color: #00FF00
}
.accent-\[\#57d6f0\] {
    accent-color: #57d6f0
}
.accent-\[\#5fe3a1\] {
    accent-color: #5fe3a1
}
.accent-\[\#65dc9a\] {
    accent-color: #65dc9a
}
.accent-\[\#65dcff\] {
    accent-color: #65dcff
}
.accent-\[\#68d8d6\] {
    accent-color: #68d8d6
}
.accent-\[\#7cc5ff\] {
    accent-color: #7cc5ff
}
.accent-\[\#8fd9a8\] {
    accent-color: #8fd9a8
}
.accent-\[\#9df0a4\] {
    accent-color: #9df0a4
}
.accent-\[\#c07cff\] {
    accent-color: #c07cff
}
.accent-\[\#c9a8ff\] {
    accent-color: #c9a8ff
}
.accent-\[\#c9f24d\] {
    accent-color: #c9f24d
}
.accent-\[\#d8a06a\] {
    accent-color: #d8a06a
}
.accent-\[\#d9a441\] {
    accent-color: #d9a441
}
.accent-\[\#e8c48a\] {
    accent-color: #e8c48a
}
.accent-\[\#ff5f6d\] {
    accent-color: #ff5f6d
}
.accent-\[\#ff7a5c\] {
    accent-color: #ff7a5c
}
.accent-\[\#ff8fb1\] {
    accent-color: #ff8fb1
}
.accent-\[\#ffb454\] {
    accent-color: #ffb454
}
.accent-\[\#ffb54a\] {
    accent-color: #ffb54a
}
.accent-\[\#ffd166\] {
    accent-color: #ffd166
}
.accent-emerald-500 {
    accent-color: #10b981
}
.accent-sky-400 {
    accent-color: #38bdf8
}
.opacity-0 {
    opacity: 0
}
.opacity-100 {
    opacity: 1
}
.opacity-20 {
    opacity: 0.2
}
.opacity-25 {
    opacity: 0.25
}
.opacity-30 {
    opacity: 0.3
}
.opacity-35 {
    opacity: 0.35
}
.opacity-40 {
    opacity: 0.4
}
.opacity-45 {
    opacity: 0.45
}
.opacity-50 {
    opacity: 0.5
}
.opacity-55 {
    opacity: 0.55
}
.opacity-60 {
    opacity: 0.6
}
.opacity-70 {
    opacity: 0.7
}
.opacity-75 {
    opacity: 0.75
}
.opacity-80 {
    opacity: 0.8
}
.opacity-85 {
    opacity: 0.85
}
.opacity-90 {
    opacity: 0.9
}
.opacity-95 {
    opacity: 0.95
}
.opacity-\[0\.03\] {
    opacity: 0.03
}
.opacity-\[0\.05\] {
    opacity: 0.05
}
.opacity-\[0\.14\] {
    opacity: 0.14
}
.opacity-\[0\.18\] {
    opacity: 0.18
}
.opacity-\[0\.20\] {
    opacity: 0.20
}
.opacity-\[0\.22\] {
    opacity: 0.22
}
.opacity-\[0\.24\] {
    opacity: 0.24
}
.opacity-\[0\.28\] {
    opacity: 0.28
}
.opacity-\[0\.35\] {
    opacity: 0.35
}
.opacity-\[0\.5\] {
    opacity: 0.5
}
.mix-blend-overlay {
    mix-blend-mode: overlay
}
.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
    --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.15\)\] {
    --tw-shadow: 0 0 0 1px rgba(255,255,255,0.15);
    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.18\)\] {
    --tw-shadow: 0 0 0 1px rgba(255,255,255,0.18);
    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.35\)\] {
    --tw-shadow: 0 0 0 1px rgba(255,255,255,0.35);
    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_0_1px_rgba\(34\2c 197\2c 94\2c 0\.35\)\] {
    --tw-shadow: 0 0 0 1px rgba(34,197,94,0.35);
    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_0_2px_rgba\(96\2c 165\2c 250\2c 0\.28\)\] {
    --tw-shadow: 0 0 0 2px rgba(96,165,250,0.28);
    --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_0_3px_rgba\(239\2c 68\2c 68\2c 0\.06\)\] {
    --tw-shadow: 0 0 0 3px rgba(239,68,68,0.06);
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_0_3px_rgba\(24\2c 210\2c 159\2c 0\.08\)\] {
    --tw-shadow: 0 0 0 3px rgba(24,210,159,0.08);
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_10px_rgba\(232\2c 181\2c 74\2c \.3\)\] {
    --tw-shadow: 0 0 10px rgba(232,181,74,.3);
    --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_10px_rgba\(255\2c 77\2c 166\2c 0\.95\)\] {
    --tw-shadow: 0 0 10px rgba(255,77,166,0.95);
    --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_10px_rgba\(255\2c 93\2c 177\2c 0\.95\)\] {
    --tw-shadow: 0 0 10px rgba(255,93,177,0.95);
    --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_12px_rgba\(43\2c 224\2c 122\2c 0\.45\)\] {
    --tw-shadow: 0 0 12px rgba(43,224,122,0.45);
    --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_14px_rgba\(251\2c 191\2c 36\2c 0\.55\)\] {
    --tw-shadow: 0 0 14px rgba(251,191,36,0.55);
    --tw-shadow-colored: 0 0 14px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_52px_rgba\(245\2c 158\2c 11\2c 0\.26\)\] {
    --tw-shadow: 0 0 52px rgba(245,158,11,0.26);
    --tw-shadow-colored: 0 0 52px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_5px_rgba\(255\2c 255\2c 255\2c 0\.75\)\] {
    --tw-shadow: 0 0 5px rgba(255,255,255,0.75);
    --tw-shadow-colored: 0 0 5px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_6px_rgba\(143\2c 217\2c 168\2c \.4\)\] {
    --tw-shadow: 0 0 6px rgba(143,217,168,.4);
    --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_8px_rgba\(180\2c 140\2c 255\2c \.35\)\] {
    --tw-shadow: 0 0 8px rgba(180,140,255,.35);
    --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_8px_rgba\(255\2c 122\2c 92\2c \.25\)\] {
    --tw-shadow: 0 0 8px rgba(255,122,92,.25);
    --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_8px_rgba\(255\2c 180\2c 84\2c \.25\)\] {
    --tw-shadow: 0 0 8px rgba(255,180,84,.25);
    --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_8px_rgba\(255\2c 207\2c 74\2c \.35\)\] {
    --tw-shadow: 0 0 8px rgba(255,207,74,.35);
    --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_8px_rgba\(255\2c 95\2c 109\2c \.35\)\] {
    --tw-shadow: 0 0 8px rgba(255,95,109,.35);
    --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_8px_rgba\(95\2c 227\2c 161\2c \.25\)\] {
    --tw-shadow: 0 0 8px rgba(95,227,161,.25);
    --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_10px_30px_rgba\(0\2c 0\2c 0\2c 0\.55\)\] {
    --tw-shadow: 0 10px 30px rgba(0,0,0,0.55);
    --tw-shadow-colored: 0 10px 30px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_10px_36px_rgba\(0\2c 0\2c 0\2c \.7\)\] {
    --tw-shadow: 0 10px 36px rgba(0,0,0,.7);
    --tw-shadow-colored: 0 10px 36px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_10px_36px_rgba\(0\2c 0\2c 0\2c \.8\)\] {
    --tw-shadow: 0 10px 36px rgba(0,0,0,.8);
    --tw-shadow-colored: 0 10px 36px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_10px_40px_rgba\(0\2c 0\2c 0\2c \.8\)\] {
    --tw-shadow: 0 10px 40px rgba(0,0,0,.8);
    --tw-shadow-colored: 0 10px 40px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_12px_30px_rgba\(0\2c 0\2c 0\2c 0\.22\)\] {
    --tw-shadow: 0 12px 30px rgba(0,0,0,0.22);
    --tw-shadow-colored: 0 12px 30px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_12px_40px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
    --tw-shadow: 0 12px 40px rgba(0,0,0,0.6);
    --tw-shadow-colored: 0 12px 40px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_18px_45px_rgba\(0\2c 0\2c 0\2c 0\.45\)\] {
    --tw-shadow: 0 18px 45px rgba(0,0,0,0.45);
    --tw-shadow-colored: 0 18px 45px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_18px_48px_rgba\(0\2c 0\2c 0\2c 0\.22\)\] {
    --tw-shadow: 0 18px 48px rgba(0,0,0,0.22);
    --tw-shadow-colored: 0 18px 48px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_18px_50px_rgba\(59\2c 130\2c 246\2c 0\.35\)\] {
    --tw-shadow: 0 18px 50px rgba(59,130,246,0.35);
    --tw-shadow-colored: 0 18px 50px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_18px_60px_rgba\(0\2c 0\2c 0\2c 0\.45\)\] {
    --tw-shadow: 0 18px 60px rgba(0,0,0,0.45);
    --tw-shadow-colored: 0 18px 60px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_18px_60px_rgba\(0\2c 0\2c 0\2c 0\.55\)\] {
    --tw-shadow: 0 18px 60px rgba(0,0,0,0.55);
    --tw-shadow-colored: 0 18px 60px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_20px_60px_rgba\(16\2c 185\2c 129\2c 0\.15\)\] {
    --tw-shadow: 0 20px 60px rgba(16,185,129,0.15);
    --tw-shadow-colored: 0 20px 60px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_22px_60px_rgba\(0\2c 0\2c 0\2c 0\.34\)\] {
    --tw-shadow: 0 22px 60px rgba(0,0,0,0.34);
    --tw-shadow-colored: 0 22px 60px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_24px_80px_rgba\(0\2c 0\2c 0\2c 0\.45\)\] {
    --tw-shadow: 0 24px 80px rgba(0,0,0,0.45);
    --tw-shadow-colored: 0 24px 80px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_24px_80px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
    --tw-shadow: 0 24px 80px rgba(0,0,0,0.6);
    --tw-shadow-colored: 0 24px 80px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_30px_120px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
    --tw-shadow: 0 30px 120px rgba(0,0,0,0.6);
    --tw-shadow-colored: 0 30px 120px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_4px_16px_rgba\(0\2c 0\2c 0\2c \.6\)\] {
    --tw-shadow: 0 4px 16px rgba(0,0,0,.6);
    --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_6px_24px_rgba\(0\2c 0\2c 0\2c \.6\)\] {
    --tw-shadow: 0 6px 24px rgba(0,0,0,.6);
    --tw-shadow-colored: 0 6px 24px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_8px_30px_rgba\(0\2c 0\2c 0\2c 0\.35\)\] {
    --tw-shadow: 0 8px 30px rgba(0,0,0,0.35);
    --tw-shadow-colored: 0 8px 30px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[inset_0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.42\)\] {
    --tw-shadow: inset 0 0 0 1px rgba(255,255,255,0.42);
    --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[inset_0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.48\)\2c 0_18px_40px_rgba\(0\2c 0\2c 0\2c 0\.45\)\] {
    --tw-shadow: inset 0 0 0 1px rgba(255,255,255,0.48),0 18px 40px rgba(0,0,0,0.45);
    --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color), 0 18px 40px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[inset_0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.55\)\2c 0_18px_40px_rgba\(0\2c 0\2c 0\2c 0\.55\)\] {
    --tw-shadow: inset 0 0 0 1px rgba(255,255,255,0.55),0 18px 40px rgba(0,0,0,0.55);
    --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color), 0 18px 40px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.25\)\] {
    --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.35\)\] {
    --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[inset_0_1px_2px_rgba\(255\2c 255\2c 255\2c \.12\)\] {
    --tw-shadow: inset 0 1px 2px rgba(255,255,255,.12);
    --tw-shadow-colored: inset 0 1px 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[inset_0_2px_6px_rgba\(0\2c 0\2c 0\2c \.25\)\] {
    --tw-shadow: inset 0 2px 6px rgba(0,0,0,.25);
    --tw-shadow-colored: inset 0 2px 6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px
}
.outline {
    outline-style: solid
}
.\!ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important
}
.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.ring-0 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.ring-inset {
    --tw-ring-inset: inset
}
.ring-\[\#22c55e\] {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity))
}
.ring-\[\#2BE07A\]\/40 {
    --tw-ring-color: rgb(43 224 122 / 0.4)
}
.ring-\[\#3F4756\] {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(63 71 86 / var(--tw-ring-opacity))
}
.ring-\[\#73ff86\]\/50 {
    --tw-ring-color: rgb(115 255 134 / 0.5)
}
.ring-\[\#ffb454\] {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 180 84 / var(--tw-ring-opacity))
}
.ring-\[color\:var\(--fx-accent\)\] {
    --tw-ring-color: var(--fx-accent)
}
.ring-blue-500 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity))
}
.ring-ring {
    --tw-ring-color: hsl(var(--ring))
}
.ring-sidebar-ring {
    --tw-ring-color: hsl(var(--sidebar-ring))
}
.ring-white {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity))
}
.ring-white\/10 {
    --tw-ring-color: rgb(255 255 255 / 0.1)
}
.ring-offset-background {
    --tw-ring-offset-color: hsl(var(--background))
}
.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.blur-\[120px\] {
    --tw-blur: blur(120px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.blur-\[125px\] {
    --tw-blur: blur(125px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.blur-\[130px\] {
    --tw-blur: blur(130px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.blur-\[135px\] {
    --tw-blur: blur(135px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.brightness-110 {
    --tw-brightness: brightness(1.1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.contrast-125 {
    --tw-contrast: contrast(1.25);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.drop-shadow {
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.drop-shadow-\[0_0_10px_rgba\(165\2c 180\2c 252\2c 0\.35\)\] {
    --tw-drop-shadow: drop-shadow(0 0 10px rgba(165,180,252,0.35));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.drop-shadow-\[0_0_14px_rgba\(165\2c 180\2c 252\2c 0\.6\)\] {
    --tw-drop-shadow: drop-shadow(0 0 14px rgba(165,180,252,0.6));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.saturate-150 {
    --tw-saturate: saturate(1.5);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.sepia {
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.\!filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important
}
.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-blur-2xl {
    --tw-backdrop-blur: blur(40px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-blur-lg {
    --tw-backdrop-blur: blur(16px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-blur-md {
    --tw-backdrop-blur: blur(12px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-blur-xl {
    --tw-backdrop-blur: blur(24px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-filter {
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-\[flex-basis\2c width\] {
    transition-property: flex-basis,width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-\[height\] {
    transition-property: height;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-\[left\2c right\2c width\] {
    transition-property: left,right,width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-\[left\] {
    transition-property: left;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-\[margin\2c opacity\] {
    transition-property: margin,opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-\[width\2c height\2c padding\] {
    transition-property: width,height,padding;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-\[width\] {
    transition-property: width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.duration-100 {
    transition-duration: 100ms
}
.duration-1000 {
    transition-duration: 1000ms
}
.duration-150 {
    transition-duration: 150ms
}
.duration-200 {
    transition-duration: 200ms
}
.duration-300 {
    transition-duration: 300ms
}
.duration-500 {
    transition-duration: 500ms
}
.duration-75 {
    transition-duration: 75ms
}
.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.ease-linear {
    transition-timing-function: linear
}
.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}
.will-change-\[height\] {
    will-change: height
}
@keyframes enter {
    from {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))
    }
}
@keyframes exit {
    to {
        opacity: var(--tw-exit-opacity, 1);
        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))
    }
}
.animate-in {
    animation-name: enter;
    animation-duration: 150ms;
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial
}
.fade-in {
    --tw-enter-opacity: 0
}
.fade-in-0 {
    --tw-enter-opacity: 0
}
.fade-in-80 {
    --tw-enter-opacity: 0.8
}
.fade-out {
    --tw-exit-opacity: 0
}
.zoom-in {
    --tw-enter-scale: 0
}
.zoom-in-95 {
    --tw-enter-scale: .95
}
.zoom-out {
    --tw-exit-scale: 0
}
.duration-100 {
    animation-duration: 100ms
}
.duration-1000 {
    animation-duration: 1000ms
}
.duration-150 {
    animation-duration: 150ms
}
.duration-200 {
    animation-duration: 200ms
}
.duration-300 {
    animation-duration: 300ms
}
.duration-500 {
    animation-duration: 500ms
}
.duration-75 {
    animation-duration: 75ms
}
.ease-in-out {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.ease-linear {
    animation-timing-function: linear
}
.ease-out {
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1)
}
.\!running {
    animation-play-state: running !important
}
.running {
    animation-play-state: running
}
.\!paused {
    animation-play-state: paused !important
}
.paused {
    animation-play-state: paused
}
.\[-webkit-overflow-scrolling\:touch\] {
    -webkit-overflow-scrolling: touch
}
.\[scrollbar-gutter\:stable\] {
    scrollbar-gutter: stable
}
.\[vite\:load-fallback\] {
    vite: load-fallback
}
.file\:border-0::file-selector-button {
    border-width: 0px
}
.file\:bg-transparent::file-selector-button {
    background-color: transparent
}
.file\:text-sm::file-selector-button {
    font-size: 0.875rem;
    line-height: 1.25rem
}
.file\:font-medium::file-selector-button {
    font-weight: 500
}
.file\:text-foreground::file-selector-button {
    color: hsl(var(--foreground))
}
.placeholder\:text-\[\#4C5464\]::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(76 84 100 / var(--tw-text-opacity))
}
.placeholder\:text-\[\#4C5464\]::placeholder {
    --tw-text-opacity: 1;
    color: rgb(76 84 100 / var(--tw-text-opacity))
}
.placeholder\:text-muted-foreground::-moz-placeholder {
    color: hsl(var(--muted-foreground))
}
.placeholder\:text-muted-foreground::placeholder {
    color: hsl(var(--muted-foreground))
}
.placeholder\:text-white\/30::-moz-placeholder {
    color: rgb(255 255 255 / 0.3)
}
.placeholder\:text-white\/30::placeholder {
    color: rgb(255 255 255 / 0.3)
}
.placeholder\:text-white\/35::-moz-placeholder {
    color: rgb(255 255 255 / 0.35)
}
.placeholder\:text-white\/35::placeholder {
    color: rgb(255 255 255 / 0.35)
}
.placeholder\:text-zinc-700::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(63 63 70 / var(--tw-text-opacity))
}
.placeholder\:text-zinc-700::placeholder {
    --tw-text-opacity: 1;
    color: rgb(63 63 70 / var(--tw-text-opacity))
}
.after\:absolute::after {
    content: var(--tw-content);
    position: absolute
}
.after\:-inset-2::after {
    content: var(--tw-content);
    inset: -0.5rem
}
.after\:inset-y-0::after {
    content: var(--tw-content);
    top: 0px;
    bottom: 0px
}
.after\:left-1\/2::after {
    content: var(--tw-content);
    left: 50%
}
.after\:w-1::after {
    content: var(--tw-content);
    width: 0.25rem
}
.after\:w-\[2px\]::after {
    content: var(--tw-content);
    width: 2px
}
.after\:-translate-x-1\/2::after {
    content: var(--tw-content);
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.first\:rounded-l-md:first-child {
    border-top-left-radius: calc(var(--radius) - 2px);
    border-bottom-left-radius: calc(var(--radius) - 2px)
}
.first\:border-l:first-child {
    border-left-width: 1px
}
.last\:rounded-r-md:last-child {
    border-top-right-radius: calc(var(--radius) - 2px);
    border-bottom-right-radius: calc(var(--radius) - 2px)
}
.last\:border-0:last-child {
    border-width: 0px
}
.focus-within\:relative:focus-within {
    position: relative
}
.focus-within\:z-20:focus-within {
    z-index: 20
}
.hover\:-translate-y-0:hover {
    --tw-translate-y: -0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:-translate-y-1:hover {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:scale-110:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:scale-\[1\.01\]:hover {
    --tw-scale-x: 1.01;
    --tw-scale-y: 1.01;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:scale-\[1\.02\]:hover {
    --tw-scale-x: 1.02;
    --tw-scale-y: 1.02;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:border-\[\#00A3FF\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(0 163 255 / var(--tw-border-opacity))
}
.hover\:border-\[\#00ff00\]\/50:hover {
    border-color: rgb(0 255 0 / 0.5)
}
.hover\:border-\[\#222\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(34 34 34 / var(--tw-border-opacity))
}
.hover\:border-\[\#241d14\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(36 29 20 / var(--tw-border-opacity))
}
.hover\:border-\[\#2f6b3c\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(47 107 60 / var(--tw-border-opacity))
}
.hover\:border-\[\#3a3a3e\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(58 58 62 / var(--tw-border-opacity))
}
.hover\:border-\[\#4C5464\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(76 84 100 / var(--tw-border-opacity))
}
.hover\:border-\[\#55555b\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(85 85 91 / var(--tw-border-opacity))
}
.hover\:border-\[\#65dcff\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(101 220 255 / var(--tw-border-opacity))
}
.hover\:border-\[\#667eea\]\/40:hover {
    border-color: rgb(102 126 234 / 0.4)
}
.hover\:border-\[\#6a6a6a\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(106 106 106 / var(--tw-border-opacity))
}
.hover\:border-\[\#E8B54A\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(232 181 74 / var(--tw-border-opacity))
}
.hover\:border-\[\#a8b4c8\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(168 180 200 / var(--tw-border-opacity))
}
.hover\:border-\[color\:var\(--fx-accent\)\]:hover {
    border-color: var(--fx-accent)
}
.hover\:border-blue-400\/50:hover {
    border-color: rgb(96 165 250 / 0.5)
}
.hover\:border-gray-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity))
}
.hover\:border-gray-400:hover {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity))
}
.hover\:border-gray-600:hover {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity))
}
.hover\:border-neutral-400:hover {
    --tw-border-opacity: 1;
    border-color: rgb(163 163 163 / var(--tw-border-opacity))
}
.hover\:border-neutral-700:hover {
    --tw-border-opacity: 1;
    border-color: rgb(64 64 64 / var(--tw-border-opacity))
}
.hover\:border-purple-400:hover {
    --tw-border-opacity: 1;
    border-color: rgb(192 132 252 / var(--tw-border-opacity))
}
.hover\:border-purple-500\/50:hover {
    border-color: rgb(168 85 247 / 0.5)
}
.hover\:border-white\/15:hover {
    border-color: rgb(255 255 255 / 0.15)
}
.hover\:border-white\/20:hover {
    border-color: rgb(255 255 255 / 0.2)
}
.hover\:border-white\/25:hover {
    border-color: rgb(255 255 255 / 0.25)
}
.hover\:border-white\/40:hover {
    border-color: rgb(255 255 255 / 0.4)
}
.hover\:bg-\[\#001a00\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(0 26 0 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#00DD00\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(0 221 0 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#0e2a31\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(14 42 49 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#0f3a4d\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 58 77 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#111\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(17 17 17 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#123049\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(18 48 73 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#123822\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(18 56 34 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#14141b\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(20 20 27 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#14305c\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(20 48 92 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#143421\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(20 52 33 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#161920\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(22 25 32 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#166534\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(22 101 52 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#171717\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(23 23 23 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#171a21\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(23 26 33 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#172019\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(23 32 25 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#18311f\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(24 49 31 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#1A1E28\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(26 30 40 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#1a1a1a\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(26 26 26 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#1a60c8\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(26 96 200 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#1b1e26\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(27 30 38 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#1b478a\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(27 71 138 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#1c1408\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(28 20 8 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#1c1e24\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(28 30 36 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#1d1d20\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 29 32 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#1d2938\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 41 56 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#1e1e1e\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(30 30 30 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#203423\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(32 52 35 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#222222\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(34 34 34 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#223149\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(34 49 73 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#242220\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(36 34 32 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#251a35\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(37 26 53 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#2563eb\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#26183a\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(38 24 58 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#262626\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(38 38 38 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#282520\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(40 37 32 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#2D4738\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(45 71 56 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#2a1414\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(42 20 20 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#2a1f0e\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(42 31 14 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#2a2f3e\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(42 47 62 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#2c1858\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(44 24 88 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#33270f\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(51 39 15 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#333333\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(51 51 51 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#333\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(51 51 51 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#341414\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(52 20 20 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#3a1420\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(58 20 32 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#3a1512\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(58 21 18 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#3a3015\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(58 48 21 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#3a3a3a\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(58 58 58 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#3d1f35\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(61 31 53 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#444444\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(68 68 68 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#45A049\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(69 160 73 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#4CEB93\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(76 235 147 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#4a4a4a\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(74 74 74 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#4b744b\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(75 116 75 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#555555\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(85 85 85 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#5A5A5A\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(90 90 90 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#5a2a2a\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(90 42 42 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#5e173d\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(94 23 61 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#5e5575\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(94 85 117 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#666666\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(102 102 102 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#667eea\]\/10:hover {
    background-color: rgb(102 126 234 / 0.1)
}
.hover\:bg-\[\#8A2BE2\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(138 43 226 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#8a3333\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(138 51 51 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#9370DB\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(147 112 219 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#E55A2B\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 90 43 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#FF5252\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 82 82 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#FF6B85\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 107 133 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#a43737\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(164 55 55 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#b6d6ff\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(182 214 255 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#c6ddff\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(198 221 255 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#c9d8f0\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(201 216 240 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#c9f24d22\]:hover {
    background-color: #c9f24d22
}
.hover\:bg-\[\#d6ebff\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(214 235 255 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#dc2626\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#ddedff\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(221 237 255 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#e0f0fd\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(224 240 253 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#ebf5ff\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(235 245 255 / var(--tw-bg-opacity))
}
.hover\:bg-\[\#f7df83\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(247 223 131 / var(--tw-bg-opacity))
}
.hover\:bg-\[color\:var\(--fx-accent-wash\)\]:hover {
    background-color: var(--fx-accent-wash)
}
.hover\:bg-\[color\:var\(--fx-quiet-wash\)\]:hover {
    background-color: var(--fx-quiet-wash)
}
.hover\:bg-accent:hover {
    background-color: hsl(var(--accent))
}
.hover\:bg-amber-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(180 83 9 / var(--tw-bg-opacity))
}
.hover\:bg-black:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity))
}
.hover\:bg-black\/35:hover {
    background-color: rgb(0 0 0 / 0.35)
}
.hover\:bg-black\/70:hover {
    background-color: rgb(0 0 0 / 0.7)
}
.hover\:bg-black\/90:hover {
    background-color: rgb(0 0 0 / 0.9)
}
.hover\:bg-blue-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity))
}
.hover\:bg-blue-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(191 219 254 / var(--tw-bg-opacity))
}
.hover\:bg-blue-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity))
}
.hover\:bg-blue-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity))
}
.hover\:bg-blue-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity))
}
.hover\:bg-blue-800\/50:hover {
    background-color: rgb(30 64 175 / 0.5)
}
.hover\:bg-cyan-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(34 211 238 / var(--tw-bg-opacity))
}
.hover\:bg-destructive\/80:hover {
    background-color: hsl(var(--destructive) / 0.8)
}
.hover\:bg-destructive\/90:hover {
    background-color: hsl(var(--destructive) / 0.9)
}
.hover\:bg-emerald-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(52 211 153 / var(--tw-bg-opacity))
}
.hover\:bg-emerald-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity))
}
.hover\:bg-emerald-500\/20:hover {
    background-color: rgb(16 185 129 / 0.2)
}
.hover\:bg-fuchsia-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(232 121 249 / var(--tw-bg-opacity))
}
.hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity))
}
.hover\:bg-gray-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity))
}
.hover\:bg-gray-300:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity))
}
.hover\:bg-gray-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity))
}
.hover\:bg-gray-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}
.hover\:bg-gray-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity))
}
.hover\:bg-gray-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity))
}
.hover\:bg-gray-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity))
}
.hover\:bg-gray-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity))
}
.hover\:bg-gray-800\/30:hover {
    background-color: rgb(31 41 55 / 0.3)
}
.hover\:bg-gray-900:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity))
}
.hover\:bg-green-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity))
}
.hover\:bg-green-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(187 247 208 / var(--tw-bg-opacity))
}
.hover\:bg-green-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity))
}
.hover\:bg-green-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity))
}
.hover\:bg-green-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity))
}
.hover\:bg-green-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(21 128 61 / var(--tw-bg-opacity))
}
.hover\:bg-indigo-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(99 102 241 / var(--tw-bg-opacity))
}
.hover\:bg-muted:hover {
    background-color: hsl(var(--muted))
}
.hover\:bg-muted\/50:hover {
    background-color: hsl(var(--muted) / 0.5)
}
.hover\:bg-neutral-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(82 82 82 / var(--tw-bg-opacity))
}
.hover\:bg-neutral-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(64 64 64 / var(--tw-bg-opacity))
}
.hover\:bg-neutral-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(38 38 38 / var(--tw-bg-opacity))
}
.hover\:bg-primary:hover {
    background-color: hsl(var(--primary))
}
.hover\:bg-primary\/80:hover {
    background-color: hsl(var(--primary) / 0.8)
}
.hover\:bg-primary\/90:hover {
    background-color: hsl(var(--primary) / 0.9)
}
.hover\:bg-purple-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity))
}
.hover\:bg-purple-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(233 213 255 / var(--tw-bg-opacity))
}
.hover\:bg-purple-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity))
}
.hover\:bg-purple-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(126 34 206 / var(--tw-bg-opacity))
}
.hover\:bg-red-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity))
}
.hover\:bg-red-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 202 202 / var(--tw-bg-opacity))
}
.hover\:bg-red-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity))
}
.hover\:bg-red-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity))
}
.hover\:bg-red-500\/20:hover {
    background-color: rgb(239 68 68 / 0.2)
}
.hover\:bg-red-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity))
}
.hover\:bg-red-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity))
}
.hover\:bg-red-900\/30:hover {
    background-color: rgb(127 29 29 / 0.3)
}
.hover\:bg-secondary:hover {
    background-color: hsl(var(--secondary))
}
.hover\:bg-secondary\/80:hover {
    background-color: hsl(var(--secondary) / 0.8)
}
.hover\:bg-sidebar-accent:hover {
    background-color: hsl(var(--sidebar-accent))
}
.hover\:bg-sky-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(3 105 161 / var(--tw-bg-opacity))
}
.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.hover\:bg-white\/10:hover {
    background-color: rgb(255 255 255 / 0.1)
}
.hover\:bg-white\/15:hover {
    background-color: rgb(255 255 255 / 0.15)
}
.hover\:bg-white\/20:hover {
    background-color: rgb(255 255 255 / 0.2)
}
.hover\:bg-white\/\[0\.02\]:hover {
    background-color: rgb(255 255 255 / 0.02)
}
.hover\:bg-white\/\[0\.04\]:hover {
    background-color: rgb(255 255 255 / 0.04)
}
.hover\:bg-white\/\[0\.06\]:hover {
    background-color: rgb(255 255 255 / 0.06)
}
.hover\:bg-yellow-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 249 195 / var(--tw-bg-opacity))
}
.hover\:bg-yellow-500\/25:hover {
    background-color: rgb(234 179 8 / 0.25)
}
.hover\:bg-yellow-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(202 138 4 / var(--tw-bg-opacity))
}
.hover\:bg-yellow-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(161 98 7 / var(--tw-bg-opacity))
}
.hover\:bg-opacity-90:hover {
    --tw-bg-opacity: 0.9
}
.hover\:from-cyan-300:hover {
    --tw-gradient-from: #67e8f9 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(103 232 249 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.hover\:from-purple-600:hover {
    --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.hover\:from-purple-700:hover {
    --tw-gradient-from: #7e22ce var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(126 34 206 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.hover\:from-red-700:hover {
    --tw-gradient-from: #b91c1c var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(185 28 28 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.hover\:via-blue-400:hover {
    --tw-gradient-to: rgb(96 165 250 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #60a5fa var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.hover\:to-blue-700:hover {
    --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position)
}
.hover\:to-fuchsia-400:hover {
    --tw-gradient-to: #e879f9 var(--tw-gradient-to-position)
}
.hover\:to-orange-700:hover {
    --tw-gradient-to: #c2410c var(--tw-gradient-to-position)
}
.hover\:text-\[\#00ff00\]:hover {
    --tw-text-opacity: 1;
    color: rgb(0 255 0 / var(--tw-text-opacity))
}
.hover\:text-\[\#18d29f\]:hover {
    --tw-text-opacity: 1;
    color: rgb(24 210 159 / var(--tw-text-opacity))
}
.hover\:text-\[\#93e7ff\]:hover {
    --tw-text-opacity: 1;
    color: rgb(147 231 255 / var(--tw-text-opacity))
}
.hover\:text-\[\#E8B54A\]:hover {
    --tw-text-opacity: 1;
    color: rgb(232 181 74 / var(--tw-text-opacity))
}
.hover\:text-\[\#EDEFF5\]:hover {
    --tw-text-opacity: 1;
    color: rgb(237 239 245 / var(--tw-text-opacity))
}
.hover\:text-\[\#FF4D6D\]:hover {
    --tw-text-opacity: 1;
    color: rgb(255 77 109 / var(--tw-text-opacity))
}
.hover\:text-\[\#c8ccd4\]:hover {
    --tw-text-opacity: 1;
    color: rgb(200 204 212 / var(--tw-text-opacity))
}
.hover\:text-\[\#d8c199\]:hover {
    --tw-text-opacity: 1;
    color: rgb(216 193 153 / var(--tw-text-opacity))
}
.hover\:text-\[\#dde3ec\]:hover {
    --tw-text-opacity: 1;
    color: rgb(221 227 236 / var(--tw-text-opacity))
}
.hover\:text-\[\#ef4444\]:hover {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity))
}
.hover\:text-\[\#f0b46a\]:hover {
    --tw-text-opacity: 1;
    color: rgb(240 180 106 / var(--tw-text-opacity))
}
.hover\:text-\[\#f7df83\]:hover {
    --tw-text-opacity: 1;
    color: rgb(247 223 131 / var(--tw-text-opacity))
}
.hover\:text-\[\#ff9a9a\]:hover {
    --tw-text-opacity: 1;
    color: rgb(255 154 154 / var(--tw-text-opacity))
}
.hover\:text-\[\#ffd27a\]:hover {
    --tw-text-opacity: 1;
    color: rgb(255 210 122 / var(--tw-text-opacity))
}
.hover\:text-\[color\:var\(--fx-accent-lit\)\]:hover {
    color: var(--fx-accent-lit)
}
.hover\:text-accent-foreground:hover {
    color: hsl(var(--accent-foreground))
}
.hover\:text-blue-200:hover {
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity))
}
.hover\:text-blue-300:hover {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity))
}
.hover\:text-blue-400:hover {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity))
}
.hover\:text-blue-500:hover {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity))
}
.hover\:text-blue-700:hover {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity))
}
.hover\:text-cyan-200:hover {
    --tw-text-opacity: 1;
    color: rgb(165 243 252 / var(--tw-text-opacity))
}
.hover\:text-foreground:hover {
    color: hsl(var(--foreground))
}
.hover\:text-gray-200:hover {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity))
}
.hover\:text-gray-300:hover {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity))
}
.hover\:text-gray-600:hover {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity))
}
.hover\:text-gray-700:hover {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity))
}
.hover\:text-gray-900:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity))
}
.hover\:text-green-500:hover {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity))
}
.hover\:text-muted-foreground:hover {
    color: hsl(var(--muted-foreground))
}
.hover\:text-pink-200:hover {
    --tw-text-opacity: 1;
    color: rgb(251 207 232 / var(--tw-text-opacity))
}
.hover\:text-primary-foreground:hover {
    color: hsl(var(--primary-foreground))
}
.hover\:text-purple-300:hover {
    --tw-text-opacity: 1;
    color: rgb(216 180 254 / var(--tw-text-opacity))
}
.hover\:text-red-300:hover {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity))
}
.hover\:text-red-500:hover {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity))
}
.hover\:text-red-600:hover {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity))
}
.hover\:text-red-700:hover {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity))
}
.hover\:text-sidebar-accent-foreground:hover {
    color: hsl(var(--sidebar-accent-foreground))
}
.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.hover\:text-white\/70:hover {
    color: rgb(255 255 255 / 0.7)
}
.hover\:text-white\/80:hover {
    color: rgb(255 255 255 / 0.8)
}
.hover\:text-white\/90:hover {
    color: rgb(255 255 255 / 0.9)
}
.hover\:text-zinc-200:hover {
    --tw-text-opacity: 1;
    color: rgb(228 228 231 / var(--tw-text-opacity))
}
.hover\:text-zinc-300:hover {
    --tw-text-opacity: 1;
    color: rgb(212 212 216 / var(--tw-text-opacity))
}
.hover\:text-zinc-400:hover {
    --tw-text-opacity: 1;
    color: rgb(161 161 170 / var(--tw-text-opacity))
}
.hover\:underline:hover {
    text-decoration-line: underline
}
.hover\:opacity-100:hover {
    opacity: 1
}
.hover\:opacity-60:hover {
    opacity: 0.6
}
.hover\:opacity-80:hover {
    opacity: 0.8
}
.hover\:opacity-90:hover {
    opacity: 0.9
}
.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
    --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.hover\:shadow-\[0_20px_65px_rgba\(96\2c 165\2c 250\2c 0\.45\)\]:hover {
    --tw-shadow: 0 20px 65px rgba(96,165,250,0.45);
    --tw-shadow-colored: 0 20px 65px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.hover\:shadow-\[0_8px_24px_rgba\(102\2c 126\2c 234\2c 0\.2\)\]:hover {
    --tw-shadow: 0 8px 24px rgba(102,126,234,0.2);
    --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.hover\:shadow-emerald-500\/50:hover {
    --tw-shadow-color: rgb(16 185 129 / 0.5);
    --tw-shadow: var(--tw-shadow-colored)
}
.hover\:after\:bg-sidebar-border:hover::after {
    content: var(--tw-content);
    background-color: hsl(var(--sidebar-border))
}
.focus\:border-\[\#3b82f6\]:focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity))
}
.focus\:border-\[\#4C5464\]:focus {
    --tw-border-opacity: 1;
    border-color: rgb(76 84 100 / var(--tw-border-opacity))
}
.focus\:border-\[\#65dcff\]:focus {
    --tw-border-opacity: 1;
    border-color: rgb(101 220 255 / var(--tw-border-opacity))
}
.focus\:border-\[\#6a5432\]:focus {
    --tw-border-opacity: 1;
    border-color: rgb(106 84 50 / var(--tw-border-opacity))
}
.focus\:border-\[\#8a6a3a\]:focus {
    --tw-border-opacity: 1;
    border-color: rgb(138 106 58 / var(--tw-border-opacity))
}
.focus\:border-\[color\:var\(--fx-accent\)\]:focus {
    border-color: var(--fx-accent)
}
.focus\:border-blue-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity))
}
.focus\:border-transparent:focus {
    border-color: transparent
}
.focus\:bg-accent:focus {
    background-color: hsl(var(--accent))
}
.focus\:bg-gray-800:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity))
}
.focus\:bg-primary:focus {
    background-color: hsl(var(--primary))
}
.focus\:bg-red-900\/30:focus {
    background-color: rgb(127 29 29 / 0.3)
}
.focus\:text-accent-foreground:focus {
    color: hsl(var(--accent-foreground))
}
.focus\:text-blue-300:focus {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity))
}
.focus\:text-primary-foreground:focus {
    color: hsl(var(--primary-foreground))
}
.focus\:text-red-300:focus {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity))
}
.focus\:opacity-100:focus {
    opacity: 1
}
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}
.focus\:ring-1:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus\:ring-\[\#18d29f\]\/20:focus {
    --tw-ring-color: rgb(24 210 159 / 0.2)
}
.focus\:ring-\[\#73ff86\]\/40:focus {
    --tw-ring-color: rgb(115 255 134 / 0.4)
}
.focus\:ring-blue-400\/60:focus {
    --tw-ring-color: rgb(96 165 250 / 0.6)
}
.focus\:ring-blue-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity))
}
.focus\:ring-cyan-400:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity))
}
.focus\:ring-green-400:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity))
}
.focus\:ring-neutral-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(115 115 115 / var(--tw-ring-opacity))
}
.focus\:ring-red-400:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity))
}
.focus\:ring-ring:focus {
    --tw-ring-color: hsl(var(--ring))
}
.focus\:ring-sky-400:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(56 189 248 / var(--tw-ring-opacity))
}
.focus\:ring-sky-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity))
}
.focus\:ring-opacity-75:focus {
    --tw-ring-opacity: 0.75
}
.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px
}
.focus-visible\:outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px
}
.focus-visible\:ring-1:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus-visible\:ring-2:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus-visible\:ring-ring:focus-visible {
    --tw-ring-color: hsl(var(--ring))
}
.focus-visible\:ring-sidebar-ring:focus-visible {
    --tw-ring-color: hsl(var(--sidebar-ring))
}
.focus-visible\:ring-offset-1:focus-visible {
    --tw-ring-offset-width: 1px
}
.focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px
}
.focus-visible\:ring-offset-background:focus-visible {
    --tw-ring-offset-color: hsl(var(--background))
}
.active\:translate-y-0:active {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.active\:translate-y-0\.5:active {
    --tw-translate-y: 0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.active\:scale-95:active {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.active\:scale-\[0\.98\]:active {
    --tw-scale-x: 0.98;
    --tw-scale-y: 0.98;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.active\:scale-\[0\.99\]:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.active\:cursor-grabbing:active {
    cursor: grabbing
}
.active\:bg-gray-700:active {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity))
}
.active\:bg-green-700:active {
    --tw-bg-opacity: 1;
    background-color: rgb(21 128 61 / var(--tw-bg-opacity))
}
.active\:bg-sidebar-accent:active {
    background-color: hsl(var(--sidebar-accent))
}
.active\:text-sidebar-accent-foreground:active {
    color: hsl(var(--sidebar-accent-foreground))
}
.active\:shadow-inner:active {
    --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.enabled\:hover\:scale-\[1\.015\]:hover:enabled {
    --tw-scale-x: 1.015;
    --tw-scale-y: 1.015;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.disabled\:pointer-events-none:disabled {
    pointer-events: none
}
.disabled\:transform-none:disabled {
    transform: none
}
.disabled\:cursor-default:disabled {
    cursor: default
}
.disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed
}
.disabled\:cursor-wait:disabled {
    cursor: wait
}
.disabled\:bg-gray-400:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity))
}
.disabled\:opacity-25:disabled {
    opacity: 0.25
}
.disabled\:opacity-30:disabled {
    opacity: 0.3
}
.disabled\:opacity-35:disabled {
    opacity: 0.35
}
.disabled\:opacity-40:disabled {
    opacity: 0.4
}
.disabled\:opacity-50:disabled {
    opacity: 0.5
}
.disabled\:opacity-60:disabled {
    opacity: 0.6
}
.disabled\:opacity-70:disabled {
    opacity: 0.7
}
.disabled\:hover\:scale-100:hover:disabled {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.disabled\:hover\:bg-\[\#333333\]:hover:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(51 51 51 / var(--tw-bg-opacity))
}
.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
    opacity: 1
}
.group:hover .group-hover\:translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:translate-x-0\.5 {
    --tw-translate-x: 0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:scale-\[1\.015\] {
    --tw-scale-x: 1.015;
    --tw-scale-y: 1.015;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group\/part:hover .group-hover\/part\:text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.group:hover .group-hover\:text-blue-400 {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity))
}
.group:hover .group-hover\:text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
    opacity: 1
}
.group\/part:hover .group-hover\/part\:opacity-60 {
    opacity: 0.6
}
.group:hover .group-hover\:opacity-100 {
    opacity: 1
}
.group.destructive .group-\[\.destructive\]\:border-muted\/40 {
    border-color: hsl(var(--muted) / 0.4)
}
.group.destructive .group-\[\.destructive\]\:text-red-300 {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity))
}
.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
    border-color: hsl(var(--destructive) / 0.3)
}
.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
    background-color: hsl(var(--destructive))
}
.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
    color: hsl(var(--destructive-foreground))
}
.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
    --tw-text-opacity: 1;
    color: rgb(254 242 242 / var(--tw-text-opacity))
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
    --tw-ring-color: hsl(var(--destructive))
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity))
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
    --tw-ring-offset-color: #dc2626
}
.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
    color: hsl(var(--sidebar-accent-foreground))
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
    cursor: not-allowed
}
.peer:disabled ~ .peer-disabled\:opacity-70 {
    opacity: 0.7
}
.has-\[\[data-variant\=inset\]\]\:bg-sidebar:has([data-variant=inset]) {
    background-color: hsl(var(--sidebar-background))
}
.has-\[\:disabled\]\:opacity-50:has(:disabled) {
    opacity: 0.5
}
.aria-disabled\:pointer-events-none[aria-disabled="true"] {
    pointer-events: none
}
.aria-disabled\:opacity-50[aria-disabled="true"] {
    opacity: 0.5
}
.aria-selected\:bg-accent[aria-selected="true"] {
    background-color: hsl(var(--accent))
}
.aria-selected\:bg-accent\/50[aria-selected="true"] {
    background-color: hsl(var(--accent) / 0.5)
}
.aria-selected\:text-accent-foreground[aria-selected="true"] {
    color: hsl(var(--accent-foreground))
}
.aria-selected\:text-muted-foreground[aria-selected="true"] {
    color: hsl(var(--muted-foreground))
}
.aria-selected\:opacity-100[aria-selected="true"] {
    opacity: 1
}
.data-\[disabled\=true\]\:pointer-events-none[data-disabled=true] {
    pointer-events: none
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
    pointer-events: none
}
.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction=vertical] {
    height: 1px
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction=vertical] {
    width: 100%
}
.data-\[side\=bottom\]\:translate-y-1[data-side=bottom] {
    --tw-translate-y: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.data-\[side\=left\]\:-translate-x-1[data-side=left] {
    --tw-translate-x: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.data-\[side\=right\]\:translate-x-1[data-side=right] {
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.data-\[side\=top\]\:-translate-y-1[data-side=top] {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.data-\[state\=checked\]\:translate-x-5[data-state=checked] {
    --tw-translate-x: 1.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked] {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.data-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel] {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe=end] {
    --tw-translate-x: var(--radix-toast-swipe-end-x);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe=move] {
    --tw-translate-x: var(--radix-toast-swipe-move-x);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@keyframes accordion-up {
    from {
        height: var(--radix-accordion-content-height)
    }
    to {
        height: 0
    }
}
.data-\[state\=closed\]\:animate-accordion-up[data-state=closed] {
    animation: accordion-up 0.2s ease-out
}
@keyframes accordion-down {
    from {
        height: 0
    }
    to {
        height: var(--radix-accordion-content-height)
    }
}
.data-\[state\=open\]\:animate-accordion-down[data-state=open] {
    animation: accordion-down 0.2s ease-out
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction=vertical] {
    flex-direction: column
}
.data-\[active\=true\]\:bg-sidebar-accent[data-active=true] {
    background-color: hsl(var(--sidebar-accent))
}
.data-\[selected\=\'true\'\]\:bg-accent[data-selected='true'] {
    background-color: hsl(var(--accent))
}
.data-\[state\=active\]\:bg-background[data-state=active] {
    background-color: hsl(var(--background))
}
.data-\[state\=checked\]\:bg-primary[data-state=checked] {
    background-color: hsl(var(--primary))
}
.data-\[state\=on\]\:bg-accent[data-state=on] {
    background-color: hsl(var(--accent))
}
.data-\[state\=open\]\:bg-accent[data-state=open] {
    background-color: hsl(var(--accent))
}
.data-\[state\=open\]\:bg-accent\/50[data-state=open] {
    background-color: hsl(var(--accent) / 0.5)
}
.data-\[state\=open\]\:bg-secondary[data-state=open] {
    background-color: hsl(var(--secondary))
}
.data-\[state\=selected\]\:bg-muted[data-state=selected] {
    background-color: hsl(var(--muted))
}
.data-\[state\=unchecked\]\:bg-input[data-state=unchecked] {
    background-color: hsl(var(--input))
}
.data-\[active\=true\]\:font-medium[data-active=true] {
    font-weight: 500
}
.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active=true] {
    color: hsl(var(--sidebar-accent-foreground))
}
.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
    color: hsl(var(--muted-foreground))
}
.data-\[selected\=true\]\:text-accent-foreground[data-selected=true] {
    color: hsl(var(--accent-foreground))
}
.data-\[state\=active\]\:text-foreground[data-state=active] {
    color: hsl(var(--foreground))
}
.data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
    color: hsl(var(--primary-foreground))
}
.data-\[state\=on\]\:text-accent-foreground[data-state=on] {
    color: hsl(var(--accent-foreground))
}
.data-\[state\=open\]\:text-accent-foreground[data-state=open] {
    color: hsl(var(--accent-foreground))
}
.data-\[state\=open\]\:text-muted-foreground[data-state=open] {
    color: hsl(var(--muted-foreground))
}
.data-\[disabled\=true\]\:opacity-50[data-disabled=true] {
    opacity: 0.5
}
.data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: 0.5
}
.data-\[state\=open\]\:opacity-100[data-state=open] {
    opacity: 1
}
.data-\[state\=active\]\:shadow-sm[data-state=active] {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.data-\[swipe\=move\]\:transition-none[data-swipe=move] {
    transition-property: none
}
.data-\[state\=closed\]\:duration-300[data-state=closed] {
    transition-duration: 300ms
}
.data-\[state\=open\]\:duration-500[data-state=open] {
    transition-duration: 500ms
}
.data-\[motion\^\=from-\]\:animate-in[data-motion^=from-] {
    animation-name: enter;
    animation-duration: 150ms;
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial
}
.data-\[state\=open\]\:animate-in[data-state=open] {
    animation-name: enter;
    animation-duration: 150ms;
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial
}
.data-\[state\=visible\]\:animate-in[data-state=visible] {
    animation-name: enter;
    animation-duration: 150ms;
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial
}
.data-\[motion\^\=to-\]\:animate-out[data-motion^=to-] {
    animation-name: exit;
    animation-duration: 150ms;
    --tw-exit-opacity: initial;
    --tw-exit-scale: initial;
    --tw-exit-rotate: initial;
    --tw-exit-translate-x: initial;
    --tw-exit-translate-y: initial
}
.data-\[state\=closed\]\:animate-out[data-state=closed] {
    animation-name: exit;
    animation-duration: 150ms;
    --tw-exit-opacity: initial;
    --tw-exit-scale: initial;
    --tw-exit-rotate: initial;
    --tw-exit-translate-x: initial;
    --tw-exit-translate-y: initial
}
.data-\[state\=hidden\]\:animate-out[data-state=hidden] {
    animation-name: exit;
    animation-duration: 150ms;
    --tw-exit-opacity: initial;
    --tw-exit-scale: initial;
    --tw-exit-rotate: initial;
    --tw-exit-translate-x: initial;
    --tw-exit-translate-y: initial
}
.data-\[swipe\=end\]\:animate-out[data-swipe=end] {
    animation-name: exit;
    animation-duration: 150ms;
    --tw-exit-opacity: initial;
    --tw-exit-scale: initial;
    --tw-exit-rotate: initial;
    --tw-exit-translate-x: initial;
    --tw-exit-translate-y: initial
}
.data-\[motion\^\=from-\]\:fade-in[data-motion^=from-] {
    --tw-enter-opacity: 0
}
.data-\[motion\^\=to-\]\:fade-out[data-motion^=to-] {
    --tw-exit-opacity: 0
}
.data-\[state\=closed\]\:fade-out-0[data-state=closed] {
    --tw-exit-opacity: 0
}
.data-\[state\=closed\]\:fade-out-80[data-state=closed] {
    --tw-exit-opacity: 0.8
}
.data-\[state\=hidden\]\:fade-out[data-state=hidden] {
    --tw-exit-opacity: 0
}
.data-\[state\=open\]\:fade-in-0[data-state=open] {
    --tw-enter-opacity: 0
}
.data-\[state\=visible\]\:fade-in[data-state=visible] {
    --tw-enter-opacity: 0
}
.data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
    --tw-exit-scale: .95
}
.data-\[state\=open\]\:zoom-in-90[data-state=open] {
    --tw-enter-scale: .9
}
.data-\[state\=open\]\:zoom-in-95[data-state=open] {
    --tw-enter-scale: .95
}
.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion=from-end] {
    --tw-enter-translate-x: 13rem
}
.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion=from-start] {
    --tw-enter-translate-x: -13rem
}
.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion=to-end] {
    --tw-exit-translate-x: 13rem
}
.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion=to-start] {
    --tw-exit-translate-x: -13rem
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
    --tw-enter-translate-y: -0.5rem
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
    --tw-enter-translate-x: 0.5rem
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
    --tw-enter-translate-x: -0.5rem
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
    --tw-enter-translate-y: 0.5rem
}
.data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed] {
    --tw-exit-translate-y: 100%
}
.data-\[state\=closed\]\:slide-out-to-left[data-state=closed] {
    --tw-exit-translate-x: -100%
}
.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] {
    --tw-exit-translate-x: -50%
}
.data-\[state\=closed\]\:slide-out-to-right[data-state=closed] {
    --tw-exit-translate-x: 100%
}
.data-\[state\=closed\]\:slide-out-to-right-full[data-state=closed] {
    --tw-exit-translate-x: 100%
}
.data-\[state\=closed\]\:slide-out-to-top[data-state=closed] {
    --tw-exit-translate-y: -100%
}
.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] {
    --tw-exit-translate-y: -48%
}
.data-\[state\=open\]\:slide-in-from-bottom[data-state=open] {
    --tw-enter-translate-y: 100%
}
.data-\[state\=open\]\:slide-in-from-left[data-state=open] {
    --tw-enter-translate-x: -100%
}
.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open] {
    --tw-enter-translate-x: -50%
}
.data-\[state\=open\]\:slide-in-from-right[data-state=open] {
    --tw-enter-translate-x: 100%
}
.data-\[state\=open\]\:slide-in-from-top[data-state=open] {
    --tw-enter-translate-y: -100%
}
.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open] {
    --tw-enter-translate-y: -48%
}
.data-\[state\=open\]\:slide-in-from-top-full[data-state=open] {
    --tw-enter-translate-y: -100%
}
.data-\[state\=closed\]\:duration-300[data-state=closed] {
    animation-duration: 300ms
}
.data-\[state\=open\]\:duration-500[data-state=open] {
    animation-duration: 500ms
}
.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction=vertical]::after {
    content: var(--tw-content);
    left: 0px
}
.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction=vertical]::after {
    content: var(--tw-content);
    height: 0.25rem
}
.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction=vertical]::after {
    content: var(--tw-content);
    width: 100%
}
.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction=vertical]::after {
    content: var(--tw-content);
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction=vertical]::after {
    content: var(--tw-content);
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.data-\[state\=open\]\:hover\:bg-accent:hover[data-state=open] {
    background-color: hsl(var(--accent))
}
.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state=open] {
    background-color: hsl(var(--sidebar-accent))
}
.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state=open] {
    color: hsl(var(--sidebar-accent-foreground))
}
.data-\[state\=open\]\:focus\:bg-accent:focus[data-state=open] {
    background-color: hsl(var(--accent))
}
.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
    left: calc(var(--sidebar-width) * -1)
}
.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
    right: calc(var(--sidebar-width) * -1)
}
.group[data-side=left] .group-data-\[side\=left\]\:-right-4 {
    right: -1rem
}
.group[data-side=right] .group-data-\[side\=right\]\:left-0 {
    left: 0px
}
.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:-mt-8 {
    margin-top: -2rem
}
.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:hidden {
    display: none
}
.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:\!size-8 {
    width: 2rem !important;
    height: 2rem !important
}
.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
    width: var(--sidebar-width-icon)
}
.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
    width: calc(var(--sidebar-width-icon) + 1rem)
}
.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
    width: calc(var(--sidebar-width-icon) + 1rem + 2px)
}
.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:w-0 {
    width: 0px
}
.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group[data-side=right] .group-data-\[side\=right\]\:rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group[data-state=open] .group-data-\[state\=open\]\:rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:overflow-hidden {
    overflow: hidden
}
.group[data-variant=floating] .group-data-\[variant\=floating\]\:rounded-lg {
    border-radius: var(--radius)
}
.group[data-variant=floating] .group-data-\[variant\=floating\]\:border {
    border-width: 1px
}
.group[data-side=left] .group-data-\[side\=left\]\:border-r {
    border-right-width: 1px
}
.group[data-side=right] .group-data-\[side\=right\]\:border-l {
    border-left-width: 1px
}
.group[data-variant=floating] .group-data-\[variant\=floating\]\:border-sidebar-border {
    border-color: hsl(var(--sidebar-border))
}
.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:\!p-0 {
    padding: 0px !important
}
.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:\!p-2 {
    padding: 0.5rem !important
}
.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:opacity-0 {
    opacity: 0
}
.group[data-variant=floating] .group-data-\[variant\=floating\]\:shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
    content: var(--tw-content);
    left: 100%
}
.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:hover {
    background-color: hsl(var(--sidebar-background))
}
.peer\/menu-button[data-size=default] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
    top: 0.375rem
}
.peer\/menu-button[data-size=lg] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
    top: 0.625rem
}
.peer\/menu-button[data-size=sm] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
    top: 0.25rem
}
.peer\/menu-button[data-active=true] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
    color: hsl(var(--sidebar-accent-foreground))
}
:is(.dark .dark\:border-destructive) {
    border-color: hsl(var(--destructive))
}
@media (min-width: 640px) {
    .sm\:-inset-\[18\%\] {
        inset: -18%
    }
    .sm\:bottom-0 {
        bottom: 0px
    }
    .sm\:left-\[14\%\] {
        left: 14%
    }
    .sm\:right-0 {
        right: 0px
    }
    .sm\:top-\[16\%\] {
        top: 16%
    }
    .sm\:top-auto {
        top: auto
    }
    .sm\:-mx-6 {
        margin-left: -1.5rem;
        margin-right: -1.5rem
    }
    .sm\:mx-0 {
        margin-left: 0px;
        margin-right: 0px
    }
    .sm\:mb-2 {
        margin-bottom: 0.5rem
    }
    .sm\:mb-4 {
        margin-bottom: 1rem
    }
    .sm\:ml-2 {
        margin-left: 0.5rem
    }
    .sm\:mt-0 {
        margin-top: 0px
    }
    .sm\:mt-2 {
        margin-top: 0.5rem
    }
    .sm\:mt-4 {
        margin-top: 1rem
    }
    .sm\:block {
        display: block
    }
    .sm\:inline {
        display: inline
    }
    .sm\:flex {
        display: flex
    }
    .sm\:table-cell {
        display: table-cell
    }
    .sm\:size-14 {
        width: 3.5rem;
        height: 3.5rem
    }
    .sm\:h-32 {
        height: 8rem
    }
    .sm\:h-8 {
        height: 2rem
    }
    .sm\:h-\[64\%\] {
        height: 64%
    }
    .sm\:min-h-\[40px\] {
        min-height: 40px
    }
    .sm\:w-24 {
        width: 6rem
    }
    .sm\:w-8 {
        width: 2rem
    }
    .sm\:w-\[58\%\] {
        width: 58%
    }
    .sm\:w-auto {
        width: auto
    }
    .sm\:min-w-\[40px\] {
        min-width: 40px
    }
    .sm\:max-w-\[425px\] {
        max-width: 425px
    }
    .sm\:max-w-sm {
        max-width: 24rem
    }
    .sm\:scale-\[1\.28\] {
        --tw-scale-x: 1.28;
        --tw-scale-y: 1.28;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
    .sm\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }
    .sm\:flex-row {
        flex-direction: row
    }
    .sm\:flex-col {
        flex-direction: column
    }
    .sm\:items-start {
        align-items: flex-start
    }
    .sm\:items-end {
        align-items: flex-end
    }
    .sm\:items-center {
        align-items: center
    }
    .sm\:justify-end {
        justify-content: flex-end
    }
    .sm\:justify-between {
        justify-content: space-between
    }
    .sm\:gap-2 {
        gap: 0.5rem
    }
    .sm\:gap-2\.5 {
        gap: 0.625rem
    }
    .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
    }
    .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1rem * var(--tw-space-x-reverse));
        margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
    }
    .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0px * var(--tw-space-y-reverse))
    }
    .sm\:rounded-lg {
        border-radius: var(--radius)
    }
    .sm\:p-1 {
        padding: 0.25rem
    }
    .sm\:p-2 {
        padding: 0.5rem
    }
    .sm\:p-2\.5 {
        padding: 0.625rem
    }
    .sm\:p-3 {
        padding: 0.75rem
    }
    .sm\:p-6 {
        padding: 1.5rem
    }
    .sm\:p-8 {
        padding: 2rem
    }
    .sm\:px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem
    }
    .sm\:px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem
    }
    .sm\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem
    }
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
    .sm\:py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem
    }
    .sm\:py-2\.5 {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem
    }
    .sm\:pr-5 {
        padding-right: 1.25rem
    }
    .sm\:text-left {
        text-align: left
    }
    .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
    }
    .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem
    }
    .sm\:text-6xl {
        font-size: 3.75rem;
        line-height: 1
    }
    .sm\:text-\[2\.3rem\] {
        font-size: 2.3rem
    }
    .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem
    }
    .sm\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem
    }
    .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {
        --tw-enter-translate-y: 100%
    }
}
@media (min-width: 768px) {
    .md\:absolute {
        position: absolute
    }
    .md\:mb-2 {
        margin-bottom: 0.5rem
    }
    .md\:mt-0 {
        margin-top: 0px
    }
    .md\:block {
        display: block
    }
    .md\:inline-block {
        display: inline-block
    }
    .md\:inline {
        display: inline
    }
    .md\:flex {
        display: flex
    }
    .md\:table-cell {
        display: table-cell
    }
    .md\:hidden {
        display: none
    }
    .md\:h-16 {
        height: 4rem
    }
    .md\:h-4 {
        height: 1rem
    }
    .md\:h-48 {
        height: 12rem
    }
    .md\:h-6 {
        height: 1.5rem
    }
    .md\:h-\[64px\] {
        height: 64px
    }
    .md\:h-auto {
        height: auto
    }
    .md\:w-20 {
        width: 5rem
    }
    .md\:w-4 {
        width: 1rem
    }
    .md\:w-48 {
        width: 12rem
    }
    .md\:w-6 {
        width: 1.5rem
    }
    .md\:w-80 {
        width: 20rem
    }
    .md\:w-\[340px\] {
        width: 340px
    }
    .md\:w-\[64px\] {
        width: 64px
    }
    .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
        width: var(--radix-navigation-menu-viewport-width)
    }
    .md\:w-auto {
        width: auto
    }
    .md\:min-w-\[400px\] {
        min-width: 400px
    }
    .md\:min-w-\[92px\] {
        min-width: 92px
    }
    .md\:max-w-\[420px\] {
        max-width: 420px
    }
    .md\:max-w-lg {
        max-width: 32rem
    }
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }
    .md\:flex-row {
        flex-direction: row
    }
    .md\:flex-col {
        flex-direction: column
    }
    .md\:items-start {
        align-items: flex-start
    }
    .md\:items-center {
        align-items: center
    }
    .md\:gap-2 {
        gap: 0.5rem
    }
    .md\:gap-3 {
        gap: 0.75rem
    }
    .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1rem * var(--tw-space-x-reverse));
        margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
    }
    .md\:self-auto {
        align-self: auto
    }
    .md\:self-start {
        align-self: flex-start
    }
    .md\:rounded-2xl {
        border-radius: 1rem
    }
    .md\:p-12 {
        padding: 3rem
    }
    .md\:p-2 {
        padding: 0.5rem
    }
    .md\:p-3 {
        padding: 0.75rem
    }
    .md\:p-4 {
        padding: 1rem
    }
    .md\:p-5 {
        padding: 1.25rem
    }
    .md\:p-6 {
        padding: 1.5rem
    }
    .md\:p-8 {
        padding: 2rem
    }
    .md\:px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem
    }
    .md\:px-3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem
    }
    .md\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem
    }
    .md\:py-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem
    }
    .md\:py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem
    }
    .md\:py-2\.5 {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem
    }
    .md\:pb-4 {
        padding-bottom: 1rem
    }
    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
    }
    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1
    }
    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem
    }
    .md\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem
    }
    .md\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem
    }
    .md\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem
    }
    .md\:opacity-0 {
        opacity: 0
    }
    .after\:md\:hidden::after {
        content: var(--tw-content);
        display: none
    }
    .peer[data-variant=inset] ~ .md\:peer-data-\[variant\=inset\]\:m-2 {
        margin: 0.5rem
    }
    .peer[data-state=collapsed][data-variant=inset] ~ .md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2 {
        margin-left: 0.5rem
    }
    .peer[data-variant=inset] ~ .md\:peer-data-\[variant\=inset\]\:ml-0 {
        margin-left: 0px
    }
    .peer[data-variant=inset] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl {
        border-radius: 0.75rem
    }
    .peer[data-variant=inset] ~ .md\:peer-data-\[variant\=inset\]\:shadow {
        --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }
}
@media (min-width: 1024px) {
    .lg\:relative {
        position: relative
    }
    .lg\:inset-auto {
        inset: auto
    }
    .lg\:flex {
        display: flex
    }
    .lg\:table-cell {
        display: table-cell
    }
    .lg\:grid {
        display: grid
    }
    .lg\:hidden {
        display: none
    }
    .lg\:h-\[100dvh\] {
        height: 100dvh
    }
    .lg\:h-full {
        height: 100%
    }
    .lg\:min-h-0 {
        min-height: 0px
    }
    .lg\:min-h-\[100dvh\] {
        min-height: 100dvh
    }
    .lg\:min-h-\[100svh\] {
        min-height: 100svh
    }
    .lg\:w-\[58\%\] {
        width: 58%
    }
    .lg\:max-w-\[500px\] {
        max-width: 500px
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }
    .lg\:grid-cols-\[1\.06fr_0\.94fr\] {
        grid-template-columns: 1.06fr 0.94fr
    }
    .lg\:grid-cols-\[320px_1fr_300px\] {
        grid-template-columns: 320px 1fr 300px
    }
    .lg\:flex-row {
        flex-direction: row
    }
    .lg\:items-center {
        align-items: center
    }
    .lg\:overflow-hidden {
        overflow: hidden
    }
    .lg\:overflow-visible {
        overflow: visible
    }
    .lg\:overflow-y-scroll {
        overflow-y: scroll
    }
    .lg\:overscroll-contain {
        overscroll-behavior: contain
    }
    .lg\:p-5 {
        padding: 1.25rem
    }
    .lg\:p-6 {
        padding: 1.5rem
    }
    .lg\:px-16 {
        padding-left: 4rem;
        padding-right: 4rem
    }
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }
    .lg\:py-10 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem
    }
}
@media (min-width: 1280px) {
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
    .xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }
    .xl\:grid-cols-\[1\.15fr_0\.85fr\] {
        grid-template-columns: 1.15fr 0.85fr
    }
    .xl\:px-16 {
        padding-left: 4rem;
        padding-right: 4rem
    }
    .xl\:px-20 {
        padding-left: 5rem;
        padding-right: 5rem
    }
    .xl\:py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem
    }
    .xl\:text-\[5\.4rem\] {
        font-size: 5.4rem
    }
}
.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {
    background-color: hsl(var(--accent))
}
.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
    border-top-left-radius: calc(var(--radius) - 2px);
    border-bottom-left-radius: calc(var(--radius) - 2px)
}
.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
    border-top-right-radius: calc(var(--radius) - 2px);
    border-bottom-right-radius: calc(var(--radius) - 2px)
}
.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside) {
    background-color: hsl(var(--accent) / 0.5)
}
.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
    border-top-right-radius: calc(var(--radius) - 2px);
    border-bottom-right-radius: calc(var(--radius) - 2px)
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
    padding-right: 0px
}
.\[\&\>button\]\:hidden>button {
    display: none
}
.\[\&\>button\]\:w-full>button {
    width: 100%
}
.\[\&\>button\]\:justify-start>button {
    justify-content: flex-start
}
.\[\&\>div\>button\]\:w-full>div>button {
    width: 100%
}
.\[\&\>div\>button\]\:justify-start>div>button {
    justify-content: flex-start
}
.\[\&\>div\>span\]\:hidden>div>span {
    display: none
}
.\[\&\>span\:last-child\]\:truncate>span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.\[\&\>span\]\:line-clamp-1>span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}
.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
    --tw-translate-y: -3px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.\[\&\>svg\]\:absolute>svg {
    position: absolute
}
.\[\&\>svg\]\:left-4>svg {
    left: 1rem
}
.\[\&\>svg\]\:top-4>svg {
    top: 1rem
}
.\[\&\>svg\]\:size-4>svg {
    width: 1rem;
    height: 1rem
}
.\[\&\>svg\]\:h-2\.5>svg {
    height: 0.625rem
}
.\[\&\>svg\]\:h-3>svg {
    height: 0.75rem
}
.\[\&\>svg\]\:h-3\.5>svg {
    height: 0.875rem
}
.\[\&\>svg\]\:w-2\.5>svg {
    width: 0.625rem
}
.\[\&\>svg\]\:w-3>svg {
    width: 0.75rem
}
.\[\&\>svg\]\:w-3\.5>svg {
    width: 0.875rem
}
.\[\&\>svg\]\:shrink-0>svg {
    flex-shrink: 0
}
.\[\&\>svg\]\:text-destructive>svg {
    color: hsl(var(--destructive))
}
.\[\&\>svg\]\:text-foreground>svg {
    color: hsl(var(--foreground))
}
.\[\&\>svg\]\:text-muted-foreground>svg {
    color: hsl(var(--muted-foreground))
}
.\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
    color: hsl(var(--sidebar-accent-foreground))
}
.\[\&\>svg\~\*\]\:pl-7>svg~* {
    padding-left: 1.75rem
}
.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
    border-bottom-width: 0px
}
.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
    fill: hsl(var(--muted-foreground))
}
.\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke='#ccc'] {
    stroke: hsl(var(--border) / 0.5)
}
.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
    stroke: hsl(var(--border))
}
.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
    stroke: transparent
}
.\[\&_\.recharts-layer\]\:outline-none .recharts-layer {
    outline: 2px solid transparent;
    outline-offset: 2px
}
.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
    stroke: hsl(var(--border))
}
.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
    fill: hsl(var(--muted))
}
.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
    fill: hsl(var(--muted))
}
.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
    stroke: hsl(var(--border))
}
.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
    stroke: transparent
}
.\[\&_\.recharts-sector\]\:outline-none .recharts-sector {
    outline: 2px solid transparent;
    outline-offset: 2px
}
.\[\&_\.recharts-surface\]\:outline-none .recharts-surface {
    outline: 2px solid transparent;
    outline-offset: 2px
}
.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
    padding-left: 0.5rem;
    padding-right: 0.5rem
}
.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
    font-size: 0.75rem;
    line-height: 1rem
}
.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
    font-weight: 500
}
.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
    color: hsl(var(--muted-foreground))
}
.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
    padding-top: 0px
}
.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
    padding-left: 0.5rem;
    padding-right: 0.5rem
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
    height: 1.25rem
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
    width: 1.25rem
}
.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
    height: 3rem
}
.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
    padding-left: 0.5rem;
    padding-right: 0.5rem
}
.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}
.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
    height: 1.25rem
}
.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
    width: 1.25rem
}
.\[\&_a\]\:text-blue-300 a {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity))
}
.\[\&_a\]\:underline a {
    text-decoration-line: underline
}
.\[\&_iframe\]\:absolute iframe {
    position: absolute
}
.\[\&_iframe\]\:left-1\/2 iframe {
    left: 50%
}
.\[\&_iframe\]\:top-1\/2 iframe {
    top: 50%
}
.\[\&_iframe\]\:h-full iframe {
    height: 100%
}
.\[\&_iframe\]\:min-h-\[155\%\] iframe {
    min-height: 155%
}
.\[\&_iframe\]\:w-full iframe {
    width: 100%
}
.\[\&_iframe\]\:min-w-\[155\%\] iframe {
    min-width: 155%
}
.\[\&_iframe\]\:origin-center iframe {
    transform-origin: center
}
.\[\&_iframe\]\:-translate-x-1\/2 iframe {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.\[\&_iframe\]\:-translate-y-1\/2 iframe {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.\[\&_iframe\]\:scale-\[1\.55\] iframe {
    --tw-scale-x: 1.55;
    --tw-scale-y: 1.55;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.\[\&_iframe\]\:border-0 iframe {
    border-width: 0px
}
.\[\&_img\]\:max-w-full img {
    max-width: 100%
}
.\[\&_p\]\:leading-relaxed p {
    line-height: 1.625
}
.\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none
}
.\[\&_svg\]\:size-4 svg {
    width: 1rem;
    height: 1rem
}
.\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0
}
.\[\&_table\]\:w-full table {
    width: 100%
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
    border-width: 0px
}
.\[\&_tr\]\:border-b tr {
    border-bottom-width: 1px
}
[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
    right: -0.5rem
}
[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
    cursor: e-resize
}
[data-side=left] .\[\[data-side\=left\]_\&\]\:cursor-w-resize {
    cursor: w-resize
}
[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
    left: -0.5rem
}
[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
    cursor: w-resize
}
[data-side=right] .\[\[data-side\=right\]_\&\]\:cursor-e-resize {
    cursor: e-resize
}


/*
! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

@keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }

*{
  border-color: hsl(var(--border));
}

body{
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

*{
  border-color: hsl(var(--border));
}

body{
  background-color: hsl(var(--background));
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Theme-specific styling */

/* Custom vertical slider styles for mixer theme */

input[type=range][class*='vertical-range'] {
    /* Replacing deprecated slider-vertical with modern alternative */
    writing-mode: vertical-lr;
    direction: rtl;
    /* Firefox legacy support */
    writing-mode: bt-lr;
  }

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

.\!container{
  width: 100% !important;
}

.container{
  width: 100%;
}

@media (min-width: 640px){

  .\!container{
    max-width: 640px !important;
  }

  .container{
    max-width: 640px;
  }
}

@media (min-width: 768px){

  .\!container{
    max-width: 768px !important;
  }

  .container{
    max-width: 768px;
  }
}

@media (min-width: 1024px){

  .\!container{
    max-width: 1024px !important;
  }

  .container{
    max-width: 1024px;
  }
}

@media (min-width: 1280px){

  .\!container{
    max-width: 1280px !important;
  }

  .container{
    max-width: 1280px;
  }
}

@media (min-width: 1536px){

  .\!container{
    max-width: 1536px !important;
  }

  .container{
    max-width: 1536px;
  }
}

.prose{
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  color: var(--tw-prose-bullets);
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align: top;
}

.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  text-align: start;
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose{
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 0;
}

.prose-sm{
  font-size: 0.875rem;
  line-height: 1.7142857;
}

.prose-sm :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}

.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 1.2857143em;
  line-height: 1.5555556;
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-sm :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.1111111em;
}

.prose-sm :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 2.1428571em;
  margin-top: 0;
  margin-bottom: 0.8em;
  line-height: 1.2;
}

.prose-sm :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 1.4285714em;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  line-height: 1.4;
}

.prose-sm :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 1.2857143em;
  margin-top: 1.5555556em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}

.prose-sm :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.4285714em;
  margin-bottom: 0.5714286em;
  line-height: 1.4285714;
}

.prose-sm :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}

.prose-sm :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
  border-radius: 0.3125rem;
  padding-top: 0.1428571em;
  padding-inline-end: 0.3571429em;
  padding-bottom: 0.1428571em;
  padding-inline-start: 0.3571429em;
}

.prose-sm :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
}

.prose-sm :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.9em;
}

.prose-sm :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8888889em;
}

.prose-sm :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
  line-height: 1.6666667;
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  border-radius: 0.25rem;
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.2857143em;
  margin-bottom: 0.2857143em;
}

.prose-sm :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.4285714em;
}

.prose-sm :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.4285714em;
}

.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.1428571em;
}

.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.1428571em;
}

.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}

.prose-sm :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
}

.prose-sm :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.2857143em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2.8571429em;
  margin-bottom: 2.8571429em;
}

.prose-sm :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}

.prose-sm :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}

.prose-sm :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}

.prose-sm :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}

.prose-sm :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
  line-height: 1.5;
}

.prose-sm :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}

.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}

.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}

.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}

.prose-sm :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}

.prose-sm :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
  line-height: 1.3333333;
  margin-top: 0.6666667em;
}

.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}

.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 0;
}

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none{
  pointer-events: none;
}

.pointer-events-auto{
  pointer-events: auto;
}

.\!visible{
  visibility: visible !important;
}

.visible{
  visibility: visible;
}

.invisible{
  visibility: hidden;
}

.collapse{
  visibility: collapse;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.\!relative{
  position: relative !important;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.-inset-\[10\%\]{
  inset: -10%;
}

.inset-0{
  inset: 0px;
}

.inset-x-0{
  left: 0px;
  right: 0px;
}

.inset-x-\[-3px\]{
  left: -3px;
  right: -3px;
}

.inset-x-\[14\%\]{
  left: 14%;
  right: 14%;
}

.inset-x-\[16px\]{
  left: 16px;
  right: 16px;
}

.inset-x-\[1px\]{
  left: 1px;
  right: 1px;
}

.inset-x-\[2px\]{
  left: 2px;
  right: 2px;
}

.inset-x-\[30px\]{
  left: 30px;
  right: 30px;
}

.inset-y-0{
  top: 0px;
  bottom: 0px;
}

.inset-y-\[2px\]{
  top: 2px;
  bottom: 2px;
}

.inset-y-\[3px\]{
  top: 3px;
  bottom: 3px;
}

.inset-y-\[4px\]{
  top: 4px;
  bottom: 4px;
}

.inset-y-\[5px\]{
  top: 5px;
  bottom: 5px;
}

.-bottom-0{
  bottom: -0px;
}

.-bottom-0\.5{
  bottom: -0.125rem;
}

.-bottom-1{
  bottom: -0.25rem;
}

.-bottom-12{
  bottom: -3rem;
}

.-bottom-\[15px\]{
  bottom: -15px;
}

.-bottom-\[2px\]{
  bottom: -2px;
}

.-left-12{
  left: -3rem;
}

.-left-24{
  left: -6rem;
}

.-left-\[12\%\]{
  left: -12%;
}

.-left-\[1px\]{
  left: -1px;
}

.-left-\[4px\]{
  left: -4px;
}

.-right-0{
  right: -0px;
}

.-right-0\.5{
  right: -0.125rem;
}

.-right-1{
  right: -0.25rem;
}

.-right-12{
  right: -3rem;
}

.-right-\[3px\]{
  right: -3px;
}

.-top-0{
  top: -0px;
}

.-top-0\.5{
  top: -0.125rem;
}

.-top-1{
  top: -0.25rem;
}

.-top-12{
  top: -3rem;
}

.-top-\[1px\]{
  top: -1px;
}

.-top-\[4px\]{
  top: -4px;
}

.-top-\[5px\]{
  top: -5px;
}

.-top-\[6px\]{
  top: -6px;
}

.bottom-0{
  bottom: 0px;
}

.bottom-0\.5{
  bottom: 0.125rem;
}

.bottom-1{
  bottom: 0.25rem;
}

.bottom-1\.5{
  bottom: 0.375rem;
}

.bottom-1\/4{
  bottom: 25%;
}

.bottom-10{
  bottom: 2.5rem;
}

.bottom-12{
  bottom: 3rem;
}

.bottom-16{
  bottom: 4rem;
}

.bottom-2{
  bottom: 0.5rem;
}

.bottom-24{
  bottom: 6rem;
}

.bottom-3{
  bottom: 0.75rem;
}

.bottom-4{
  bottom: 1rem;
}

.bottom-\[-18\%\]{
  bottom: -18%;
}

.bottom-\[-1px\]{
  bottom: -1px;
}

.bottom-\[-5rem\]{
  bottom: -5rem;
}

.bottom-\[1\.5px\]{
  bottom: 1.5px;
}

.bottom-\[16px\]{
  bottom: 16px;
}

.bottom-\[1px\]{
  bottom: 1px;
}

.bottom-\[22px\]{
  bottom: 22px;
}

.bottom-\[2px\]{
  bottom: 2px;
}

.bottom-\[3px\]{
  bottom: 3px;
}

.bottom-\[4px\]{
  bottom: 4px;
}

.bottom-\[5px\]{
  bottom: 5px;
}

.bottom-\[6px\]{
  bottom: 6px;
}

.bottom-\[7px\]{
  bottom: 7px;
}

.bottom-\[9px\]{
  bottom: 9px;
}

.left-0{
  left: 0px;
}

.left-0\.5{
  left: 0.125rem;
}

.left-1{
  left: 0.25rem;
}

.left-1\.5{
  left: 0.375rem;
}

.left-1\/2{
  left: 50%;
}

.left-14{
  left: 3.5rem;
}

.left-2{
  left: 0.5rem;
}

.left-3{
  left: 0.75rem;
}

.left-4{
  left: 1rem;
}

.left-5{
  left: 1.25rem;
}

.left-7{
  left: 1.75rem;
}

.left-\[-4px\]{
  left: -4px;
}

.left-\[1\%\]{
  left: 1%;
}

.left-\[10\%\]{
  left: 10%;
}

.left-\[10px\]{
  left: 10px;
}

.left-\[112px\]{
  left: 112px;
}

.left-\[12\%\]{
  left: 12%;
}

.left-\[13px\]{
  left: 13px;
}

.left-\[14\%\]{
  left: 14%;
}

.left-\[14px\]{
  left: 14px;
}

.left-\[15px\]{
  left: 15px;
}

.left-\[16px\]{
  left: 16px;
}

.left-\[17px\]{
  left: 17px;
}

.left-\[1px\]{
  left: 1px;
}

.left-\[2\%\]{
  left: 2%;
}

.left-\[22px\]{
  left: 22px;
}

.left-\[27\%\]{
  left: 27%;
}

.left-\[2px\]{
  left: 2px;
}

.left-\[30\%\]{
  left: 30%;
}

.left-\[3px\]{
  left: 3px;
}

.left-\[42px\]{
  left: 42px;
}

.left-\[44px\]{
  left: 44px;
}

.left-\[4px\]{
  left: 4px;
}

.left-\[50\%\]{
  left: 50%;
}

.left-\[59\%\]{
  left: 59%;
}

.left-\[5px\]{
  left: 5px;
}

.left-\[6px\]{
  left: 6px;
}

.left-\[7px\]{
  left: 7px;
}

.left-\[8\.5px\]{
  left: 8.5px;
}

.left-\[8px\]{
  left: 8px;
}

.left-\[95\.5px\]{
  left: 95.5px;
}

.left-full{
  left: 100%;
}

.right-0{
  right: 0px;
}

.right-1{
  right: 0.25rem;
}

.right-1\.5{
  right: 0.375rem;
}

.right-10{
  right: 2.5rem;
}

.right-16{
  right: 4rem;
}

.right-2{
  right: 0.5rem;
}

.right-2\.5{
  right: 0.625rem;
}

.right-3{
  right: 0.75rem;
}

.right-32{
  right: 8rem;
}

.right-4{
  right: 1rem;
}

.right-48{
  right: 12rem;
}

.right-5{
  right: 1.25rem;
}

.right-6{
  right: 1.5rem;
}

.right-96{
  right: 24rem;
}

.right-\[-1px\]{
  right: -1px;
}

.right-\[-5rem\]{
  right: -5rem;
}

.right-\[-8\%\]{
  right: -8%;
}

.right-\[0px\]{
  right: 0px;
}

.right-\[10px\]{
  right: 10px;
}

.right-\[13px\]{
  right: 13px;
}

.right-\[14px\]{
  right: 14px;
}

.right-\[17px\]{
  right: 17px;
}

.right-\[18\%\]{
  right: 18%;
}

.right-\[18px\]{
  right: 18px;
}

.right-\[1px\]{
  right: 1px;
}

.right-\[24px\]{
  right: 24px;
}

.right-\[28px\]{
  right: 28px;
}

.right-\[2px\]{
  right: 2px;
}

.right-\[30px\]{
  right: 30px;
}

.right-\[3px\]{
  right: 3px;
}

.right-\[4px\]{
  right: 4px;
}

.right-\[5px\]{
  right: 5px;
}

.right-\[60\%\]{
  right: 60%;
}

.right-\[6px\]{
  right: 6px;
}

.right-\[7px\]{
  right: 7px;
}

.right-\[8\%\]{
  right: 8%;
}

.right-\[8px\]{
  right: 8px;
}

.right-auto{
  right: auto;
}

.top-0{
  top: 0px;
}

.top-0\.5{
  top: 0.125rem;
}

.top-1{
  top: 0.25rem;
}

.top-1\.5{
  top: 0.375rem;
}

.top-1\/2{
  top: 50%;
}

.top-1\/4{
  top: 25%;
}

.top-12{
  top: 3rem;
}

.top-14{
  top: 3.5rem;
}

.top-2{
  top: 0.5rem;
}

.top-2\.5{
  top: 0.625rem;
}

.top-20{
  top: 5rem;
}

.top-24{
  top: 6rem;
}

.top-3{
  top: 0.75rem;
}

.top-3\.5{
  top: 0.875rem;
}

.top-4{
  top: 1rem;
}

.top-40{
  top: 10rem;
}

.top-5{
  top: 1.25rem;
}

.top-6{
  top: 1.5rem;
}

.top-60{
  top: 15rem;
}

.top-8{
  top: 2rem;
}

.top-\[1\.5px\]{
  top: 1.5px;
}

.top-\[10\%\]{
  top: 10%;
}

.top-\[110px\]{
  top: 110px;
}

.top-\[12\%\]{
  top: 12%;
}

.top-\[14px\]{
  top: 14px;
}

.top-\[16px\]{
  top: 16px;
}

.top-\[1px\]{
  top: 1px;
}

.top-\[22\%\]{
  top: 22%;
}

.top-\[22px\]{
  top: 22px;
}

.top-\[26px\]{
  top: 26px;
}

.top-\[28\%\]{
  top: 28%;
}

.top-\[280px\]{
  top: 280px;
}

.top-\[2px\]{
  top: 2px;
}

.top-\[30px\]{
  top: 30px;
}

.top-\[32px\]{
  top: 32px;
}

.top-\[38\%\]{
  top: 38%;
}

.top-\[3px\]{
  top: 3px;
}

.top-\[46px\]{
  top: 46px;
}

.top-\[4px\]{
  top: 4px;
}

.top-\[50\%\]{
  top: 50%;
}

.top-\[58\%\]{
  top: 58%;
}

.top-\[5px\]{
  top: 5px;
}

.top-\[60\%\]{
  top: 60%;
}

.top-\[6px\]{
  top: 6px;
}

.top-\[7px\]{
  top: 7px;
}

.top-\[9px\]{
  top: 9px;
}

.top-full{
  top: 100%;
}

.isolate{
  isolation: isolate;
}

.z-0{
  z-index: 0;
}

.z-10{
  z-index: 10;
}

.z-20{
  z-index: 20;
}

.z-30{
  z-index: 30;
}

.z-40{
  z-index: 40;
}

.z-50{
  z-index: 50;
}

.z-\[100000\]{
  z-index: 100000;
}

.z-\[10000\]{
  z-index: 10000;
}

.z-\[10001\]{
  z-index: 10001;
}

.z-\[10002\]{
  z-index: 10002;
}

.z-\[1000\]{
  z-index: 1000;
}

.z-\[1001\]{
  z-index: 1001;
}

.z-\[10020\]{
  z-index: 10020;
}

.z-\[1002\]{
  z-index: 1002;
}

.z-\[10030\]{
  z-index: 10030;
}

.z-\[10050\]{
  z-index: 10050;
}

.z-\[10059\]{
  z-index: 10059;
}

.z-\[10060\]{
  z-index: 10060;
}

.z-\[100\]{
  z-index: 100;
}

.z-\[1\]{
  z-index: 1;
}

.z-\[2000\]{
  z-index: 2000;
}

.z-\[200\]{
  z-index: 200;
}

.z-\[201\]{
  z-index: 201;
}

.z-\[2147483000\]{
  z-index: 2147483000;
}

.z-\[2147483646\]{
  z-index: 2147483646;
}

.z-\[2147483647\]{
  z-index: 2147483647;
}

.z-\[240\]{
  z-index: 240;
}

.z-\[2\]{
  z-index: 2;
}

.z-\[3000\]{
  z-index: 3000;
}

.z-\[300\]{
  z-index: 300;
}

.z-\[3\]{
  z-index: 3;
}

.z-\[5\]{
  z-index: 5;
}

.z-\[60\]{
  z-index: 60;
}

.z-\[6\]{
  z-index: 6;
}

.z-\[7000\]{
  z-index: 7000;
}

.z-\[950\]{
  z-index: 950;
}

.z-\[960\]{
  z-index: 960;
}

.z-\[970\]{
  z-index: 970;
}

.z-\[975\]{
  z-index: 975;
}

.z-\[978\]{
  z-index: 978;
}

.z-\[980\]{
  z-index: 980;
}

.z-\[9999\]{
  z-index: 9999;
}

.order-1{
  order: 1;
}

.order-2{
  order: 2;
}

.order-3{
  order: 3;
}

.col-span-1{
  grid-column: span 1 / span 1;
}

.col-span-2{
  grid-column: span 2 / span 2;
}

.col-span-3{
  grid-column: span 3 / span 3;
}

.col-span-5{
  grid-column: span 5 / span 5;
}

.col-span-6{
  grid-column: span 6 / span 6;
}

.col-span-8{
  grid-column: span 8 / span 8;
}

.col-span-9{
  grid-column: span 9 / span 9;
}

.col-span-full{
  grid-column: 1 / -1;
}

.m-0{
  margin: 0px;
}

.m-\[6px\]{
  margin: 6px;
}

.m-auto{
  margin: auto;
}

.m-px{
  margin: 1px;
}

.-mx-1{
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.-mx-2{
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.-mx-\[3px\]{
  margin-left: -3px;
  margin-right: -3px;
}

.-my-\[5px\]{
  margin-top: -5px;
  margin-bottom: -5px;
}

.-my-\[6px\]{
  margin-top: -6px;
  margin-bottom: -6px;
}

.-my-\[7px\]{
  margin-top: -7px;
  margin-bottom: -7px;
}

.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3{
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.mx-3\.5{
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}

.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-\[10px\]{
  margin-left: 10px;
  margin-right: 10px;
}

.mx-\[18px\]{
  margin-left: 18px;
  margin-right: 18px;
}

.mx-\[2px\]{
  margin-left: 2px;
  margin-right: 2px;
}

.mx-\[3px\]{
  margin-left: 3px;
  margin-right: 3px;
}

.mx-\[5px\]{
  margin-left: 5px;
  margin-right: 5px;
}

.mx-\[6px\]{
  margin-left: 6px;
  margin-right: 6px;
}

.mx-\[8px\]{
  margin-left: 8px;
  margin-right: 8px;
}

.mx-\[9px\]{
  margin-left: 9px;
  margin-right: 9px;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}

.my-0\.5{
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.my-1{
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-1\.5{
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.my-10{
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-\[3px\]{
  margin-top: 3px;
  margin-bottom: 3px;
}

.my-\[4px\]{
  margin-top: 4px;
  margin-bottom: 4px;
}

.my-\[7px\]{
  margin-top: 7px;
  margin-bottom: 7px;
}

.-mb-px{
  margin-bottom: -1px;
}

.-ml-3{
  margin-left: -0.75rem;
}

.-ml-4{
  margin-left: -1rem;
}

.-mt-0{
  margin-top: -0px;
}

.-mt-0\.5{
  margin-top: -0.125rem;
}

.-mt-1{
  margin-top: -0.25rem;
}

.-mt-4{
  margin-top: -1rem;
}

.-mt-\[2px\]{
  margin-top: -2px;
}

.mb-0{
  margin-bottom: 0px;
}

.mb-0\.5{
  margin-bottom: 0.125rem;
}

.mb-1{
  margin-bottom: 0.25rem;
}

.mb-1\.5{
  margin-bottom: 0.375rem;
}

.mb-10{
  margin-bottom: 2.5rem;
}

.mb-12{
  margin-bottom: 3rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-2\.5{
  margin-bottom: 0.625rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-5{
  margin-bottom: 1.25rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.mb-\[15px\]{
  margin-bottom: 15px;
}

.mb-\[2px\]{
  margin-bottom: 2px;
}

.mb-\[3px\]{
  margin-bottom: 3px;
}

.mb-\[4px\]{
  margin-bottom: 4px;
}

.mb-\[6px\]{
  margin-bottom: 6px;
}

.ml-0{
  margin-left: 0px;
}

.ml-0\.5{
  margin-left: 0.125rem;
}

.ml-1{
  margin-left: 0.25rem;
}

.ml-1\.5{
  margin-left: 0.375rem;
}

.ml-2{
  margin-left: 0.5rem;
}

.ml-3{
  margin-left: 0.75rem;
}

.ml-4{
  margin-left: 1rem;
}

.ml-8{
  margin-left: 2rem;
}

.ml-\[1px\]{
  margin-left: 1px;
}

.ml-\[2px\]{
  margin-left: 2px;
}

.ml-\[33px\]{
  margin-left: 33px;
}

.ml-\[3px\]{
  margin-left: 3px;
}

.ml-\[4px\]{
  margin-left: 4px;
}

.ml-\[5px\]{
  margin-left: 5px;
}

.ml-auto{
  margin-left: auto;
}

.mr-1{
  margin-right: 0.25rem;
}

.mr-1\.5{
  margin-right: 0.375rem;
}

.mr-2{
  margin-right: 0.5rem;
}

.mr-3{
  margin-right: 0.75rem;
}

.mr-4{
  margin-right: 1rem;
}

.mr-\[3px\]{
  margin-right: 3px;
}

.mr-auto{
  margin-right: auto;
}

.mt-0{
  margin-top: 0px;
}

.mt-0\.5{
  margin-top: 0.125rem;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-1\.5{
  margin-top: 0.375rem;
}

.mt-12{
  margin-top: 3rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-24{
  margin-top: 6rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.mt-5{
  margin-top: 1.25rem;
}

.mt-6{
  margin-top: 1.5rem;
}

.mt-8{
  margin-top: 2rem;
}

.mt-\[-2px\]{
  margin-top: -2px;
}

.mt-\[0px\]{
  margin-top: 0px;
}

.mt-\[10px\]{
  margin-top: 10px;
}

.mt-\[1px\]{
  margin-top: 1px;
}

.mt-\[26px\]{
  margin-top: 26px;
}

.mt-\[2px\]{
  margin-top: 2px;
}

.mt-\[3px\]{
  margin-top: 3px;
}

.mt-\[4px\]{
  margin-top: 4px;
}

.mt-\[5px\]{
  margin-top: 5px;
}

.mt-\[6px\]{
  margin-top: 6px;
}

.mt-\[7px\]{
  margin-top: 7px;
}

.mt-\[8px\]{
  margin-top: 8px;
}

.mt-\[9px\]{
  margin-top: 9px;
}

.mt-auto{
  margin-top: auto;
}

.box-content{
  box-sizing: content-box;
}

.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line-clamp-4{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.\!grid{
  display: grid !important;
}

.grid{
  display: grid;
}

.contents{
  display: contents;
}

.hidden{
  display: none;
}

.aspect-square{
  aspect-ratio: 1 / 1;
}

.aspect-video{
  aspect-ratio: 16 / 9;
}

.size-4{
  width: 1rem;
  height: 1rem;
}

.h-0{
  height: 0px;
}

.h-0\.5{
  height: 0.125rem;
}

.h-1{
  height: 0.25rem;
}

.h-1\.5{
  height: 0.375rem;
}

.h-1\/3{
  height: 33.333333%;
}

.h-10{
  height: 2.5rem;
}

.h-11{
  height: 2.75rem;
}

.h-12{
  height: 3rem;
}

.h-14{
  height: 3.5rem;
}

.h-16{
  height: 4rem;
}

.h-2{
  height: 0.5rem;
}

.h-2\.5{
  height: 0.625rem;
}

.h-20{
  height: 5rem;
}

.h-24{
  height: 6rem;
}

.h-28{
  height: 7rem;
}

.h-3{
  height: 0.75rem;
}

.h-3\.5{
  height: 0.875rem;
}

.h-3\/4{
  height: 75%;
}

.h-32{
  height: 8rem;
}

.h-36{
  height: 9rem;
}

.h-4{
  height: 1rem;
}

.h-40{
  height: 10rem;
}

.h-48{
  height: 12rem;
}

.h-5{
  height: 1.25rem;
}

.h-6{
  height: 1.5rem;
}

.h-7{
  height: 1.75rem;
}

.h-72{
  height: 18rem;
}

.h-8{
  height: 2rem;
}

.h-80{
  height: 20rem;
}

.h-9{
  height: 2.25rem;
}

.h-96{
  height: 24rem;
}

.h-\[1\.5px\]{
  height: 1.5px;
}

.h-\[10\%\]{
  height: 10%;
}

.h-\[100dvh\]{
  height: 100dvh;
}

.h-\[104px\]{
  height: 104px;
}

.h-\[10px\]{
  height: 10px;
}

.h-\[110px\]{
  height: 110px;
}

.h-\[112px\]{
  height: 112px;
}

.h-\[118px\]{
  height: 118px;
}

.h-\[11px\]{
  height: 11px;
}

.h-\[120px\]{
  height: 120px;
}

.h-\[124px\]{
  height: 124px;
}

.h-\[128px\]{
  height: 128px;
}

.h-\[12px\]{
  height: 12px;
}

.h-\[132px\]{
  height: 132px;
}

.h-\[13px\]{
  height: 13px;
}

.h-\[14px\]{
  height: 14px;
}

.h-\[150px\]{
  height: 150px;
}

.h-\[152px\]{
  height: 152px;
}

.h-\[15px\]{
  height: 15px;
}

.h-\[160px\]{
  height: 160px;
}

.h-\[16px\]{
  height: 16px;
}

.h-\[17px\]{
  height: 17px;
}

.h-\[180px\]{
  height: 180px;
}

.h-\[18px\]{
  height: 18px;
}

.h-\[190px\]{
  height: 190px;
}

.h-\[19px\]{
  height: 19px;
}

.h-\[1px\]{
  height: 1px;
}

.h-\[2\.5px\]{
  height: 2.5px;
}

.h-\[200px\]{
  height: 200px;
}

.h-\[20px\]{
  height: 20px;
}

.h-\[210px\]{
  height: 210px;
}

.h-\[21px\]{
  height: 21px;
}

.h-\[22px\]{
  height: 22px;
}

.h-\[23px\]{
  height: 23px;
}

.h-\[24px\]{
  height: 24px;
}

.h-\[250px\]{
  height: 250px;
}

.h-\[25px\]{
  height: 25px;
}

.h-\[26px\]{
  height: 26px;
}

.h-\[27px\]{
  height: 27px;
}

.h-\[28px\]{
  height: 28px;
}

.h-\[29px\]{
  height: 29px;
}

.h-\[2px\]{
  height: 2px;
}

.h-\[3\.5px\]{
  height: 3.5px;
}

.h-\[300px\]{
  height: 300px;
}

.h-\[30px\]{
  height: 30px;
}

.h-\[32px\]{
  height: 32px;
}

.h-\[34px\]{
  height: 34px;
}

.h-\[360px\]{
  height: 360px;
}

.h-\[36px\]{
  height: 36px;
}

.h-\[38px\]{
  height: 38px;
}

.h-\[3px\]{
  height: 3px;
}

.h-\[40px\]{
  height: 40px;
}

.h-\[420px\]{
  height: 420px;
}

.h-\[42px\]{
  height: 42px;
}

.h-\[46px\]{
  height: 46px;
}

.h-\[48px\]{
  height: 48px;
}

.h-\[4px\]{
  height: 4px;
}

.h-\[5\%\]{
  height: 5%;
}

.h-\[520px\]{
  height: 520px;
}

.h-\[54px\]{
  height: 54px;
}

.h-\[56px\]{
  height: 56px;
}

.h-\[5px\]{
  height: 5px;
}

.h-\[600px\]{
  height: 600px;
}

.h-\[60px\]{
  height: 60px;
}

.h-\[64px\]{
  height: 64px;
}

.h-\[66px\]{
  height: 66px;
}

.h-\[6px\]{
  height: 6px;
}

.h-\[70px\]{
  height: 70px;
}

.h-\[74px\]{
  height: 74px;
}

.h-\[76\%\]{
  height: 76%;
}

.h-\[76px\]{
  height: 76px;
}

.h-\[7px\]{
  height: 7px;
}

.h-\[80px\]{
  height: 80px;
}

.h-\[82px\]{
  height: 82px;
}

.h-\[84px\]{
  height: 84px;
}

.h-\[88px\]{
  height: 88px;
}

.h-\[8px\]{
  height: 8px;
}

.h-\[92px\]{
  height: 92px;
}

.h-\[96px\]{
  height: 96px;
}

.h-\[9px\]{
  height: 9px;
}

.h-\[calc\(\(100\%-0\.75rem\)\/3\)\]{
  height: calc((100% - 0.75rem) / 3);
}

.h-\[calc\(100\%-16px\)\]{
  height: calc(100% - 16px);
}

.h-\[calc\(100\%-32px\)\]{
  height: calc(100% - 32px);
}

.h-\[calc\(100\%-8px\)\]{
  height: calc(100% - 8px);
}

.h-\[calc\(9rem-2px\)\]{
  height: calc(9rem - 2px);
}

.h-\[min\(78vh\2c 640px\)\]{
  height: min(78vh,640px);
}

.h-\[var\(--radix-navigation-menu-viewport-height\)\]{
  height: var(--radix-navigation-menu-viewport-height);
}

.h-\[var\(--radix-select-trigger-height\)\]{
  height: var(--radix-select-trigger-height);
}

.h-auto{
  height: auto;
}

.h-dvh{
  height: 100dvh;
}

.h-full{
  height: 100%;
}

.h-px{
  height: 1px;
}

.h-screen{
  height: 100vh;
}

.h-svh{
  height: 100svh;
}

.max-h-24{
  max-height: 6rem;
}

.max-h-32{
  max-height: 8rem;
}

.max-h-48{
  max-height: 12rem;
}

.max-h-52{
  max-height: 13rem;
}

.max-h-56{
  max-height: 14rem;
}

.max-h-64{
  max-height: 16rem;
}

.max-h-\[--radix-context-menu-content-available-height\]{
  max-height: var(--radix-context-menu-content-available-height);
}

.max-h-\[--radix-select-content-available-height\]{
  max-height: var(--radix-select-content-available-height);
}

.max-h-\[260px\]{
  max-height: 260px;
}

.max-h-\[300px\]{
  max-height: 300px;
}

.max-h-\[340px\]{
  max-height: 340px;
}

.max-h-\[400px\]{
  max-height: 400px;
}

.max-h-\[80vh\]{
  max-height: 80vh;
}

.max-h-\[82vh\]{
  max-height: 82vh;
}

.max-h-\[84vh\]{
  max-height: 84vh;
}

.max-h-\[90vh\]{
  max-height: 90vh;
}

.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\]{
  max-height: var(--radix-dropdown-menu-content-available-height);
}

.max-h-full{
  max-height: 100%;
}

.max-h-screen{
  max-height: 100vh;
}

.min-h-0{
  min-height: 0px;
}

.min-h-12{
  min-height: 3rem;
}

.min-h-5{
  min-height: 1.25rem;
}

.min-h-6{
  min-height: 1.5rem;
}

.min-h-7{
  min-height: 1.75rem;
}

.min-h-\[100dvh\]{
  min-height: 100dvh;
}

.min-h-\[100svh\]{
  min-height: 100svh;
}

.min-h-\[24px\]{
  min-height: 24px;
}

.min-h-\[26px\]{
  min-height: 26px;
}

.min-h-\[28px\]{
  min-height: 28px;
}

.min-h-\[30px\]{
  min-height: 30px;
}

.min-h-\[32px\]{
  min-height: 32px;
}

.min-h-\[34px\]{
  min-height: 34px;
}

.min-h-\[36px\]{
  min-height: 36px;
}

.min-h-\[40px\]{
  min-height: 40px;
}

.min-h-\[42px\]{
  min-height: 42px;
}

.min-h-\[44px\]{
  min-height: 44px;
}

.min-h-\[80px\]{
  min-height: 80px;
}

.min-h-dvh{
  min-height: 100dvh;
}

.min-h-full{
  min-height: 100%;
}

.min-h-screen{
  min-height: 100vh;
}

.min-h-svh{
  min-height: 100svh;
}

.w-0{
  width: 0px;
}

.w-0\.5{
  width: 0.125rem;
}

.w-1{
  width: 0.25rem;
}

.w-1\.5{
  width: 0.375rem;
}

.w-1\/2{
  width: 50%;
}

.w-1\/3{
  width: 33.333333%;
}

.w-10{
  width: 2.5rem;
}

.w-11{
  width: 2.75rem;
}

.w-12{
  width: 3rem;
}

.w-14{
  width: 3.5rem;
}

.w-16{
  width: 4rem;
}

.w-2{
  width: 0.5rem;
}

.w-2\.5{
  width: 0.625rem;
}

.w-20{
  width: 5rem;
}

.w-24{
  width: 6rem;
}

.w-28{
  width: 7rem;
}

.w-3{
  width: 0.75rem;
}

.w-3\.5{
  width: 0.875rem;
}

.w-3\/4{
  width: 75%;
}

.w-32{
  width: 8rem;
}

.w-36{
  width: 9rem;
}

.w-4{
  width: 1rem;
}

.w-40{
  width: 10rem;
}

.w-44{
  width: 11rem;
}

.w-48{
  width: 12rem;
}

.w-5{
  width: 1.25rem;
}

.w-52{
  width: 13rem;
}

.w-56{
  width: 14rem;
}

.w-6{
  width: 1.5rem;
}

.w-64{
  width: 16rem;
}

.w-7{
  width: 1.75rem;
}

.w-72{
  width: 18rem;
}

.w-8{
  width: 2rem;
}

.w-80{
  width: 20rem;
}

.w-9{
  width: 2.25rem;
}

.w-96{
  width: 24rem;
}

.w-\[--sidebar-width\]{
  width: var(--sidebar-width);
}

.w-\[1\.5px\]{
  width: 1.5px;
}

.w-\[100px\]{
  width: 100px;
}

.w-\[102px\]{
  width: 102px;
}

.w-\[104px\]{
  width: 104px;
}

.w-\[10px\]{
  width: 10px;
}

.w-\[112px\]{
  width: 112px;
}

.w-\[116px\]{
  width: 116px;
}

.w-\[11px\]{
  width: 11px;
}

.w-\[120px\]{
  width: 120px;
}

.w-\[124px\]{
  width: 124px;
}

.w-\[128px\]{
  width: 128px;
}

.w-\[12px\]{
  width: 12px;
}

.w-\[130px\]{
  width: 130px;
}

.w-\[132px\]{
  width: 132px;
}

.w-\[134px\]{
  width: 134px;
}

.w-\[13px\]{
  width: 13px;
}

.w-\[146px\]{
  width: 146px;
}

.w-\[148px\]{
  width: 148px;
}

.w-\[14px\]{
  width: 14px;
}

.w-\[15\%\]{
  width: 15%;
}

.w-\[150px\]{
  width: 150px;
}

.w-\[152px\]{
  width: 152px;
}

.w-\[156px\]{
  width: 156px;
}

.w-\[15px\]{
  width: 15px;
}

.w-\[164px\]{
  width: 164px;
}

.w-\[168px\]{
  width: 168px;
}

.w-\[16px\]{
  width: 16px;
}

.w-\[170px\]{
  width: 170px;
}

.w-\[172px\]{
  width: 172px;
}

.w-\[176px\]{
  width: 176px;
}

.w-\[178px\]{
  width: 178px;
}

.w-\[17px\]{
  width: 17px;
}

.w-\[180px\]{
  width: 180px;
}

.w-\[184px\]{
  width: 184px;
}

.w-\[186px\]{
  width: 186px;
}

.w-\[188px\]{
  width: 188px;
}

.w-\[18px\]{
  width: 18px;
}

.w-\[190px\]{
  width: 190px;
}

.w-\[196px\]{
  width: 196px;
}

.w-\[19px\]{
  width: 19px;
}

.w-\[1px\]{
  width: 1px;
}

.w-\[2\.5px\]{
  width: 2.5px;
}

.w-\[200px\]{
  width: 200px;
}

.w-\[20px\]{
  width: 20px;
}

.w-\[210px\]{
  width: 210px;
}

.w-\[214px\]{
  width: 214px;
}

.w-\[21px\]{
  width: 21px;
}

.w-\[220px\]{
  width: 220px;
}

.w-\[228px\]{
  width: 228px;
}

.w-\[22px\]{
  width: 22px;
}

.w-\[232px\]{
  width: 232px;
}

.w-\[236px\]{
  width: 236px;
}

.w-\[240px\]{
  width: 240px;
}

.w-\[244px\]{
  width: 244px;
}

.w-\[24px\]{
  width: 24px;
}

.w-\[26px\]{
  width: 26px;
}

.w-\[28px\]{
  width: 28px;
}

.w-\[2px\]{
  width: 2px;
}

.w-\[3\.5px\]{
  width: 3.5px;
}

.w-\[30\%\]{
  width: 30%;
}

.w-\[300px\]{
  width: 300px;
}

.w-\[30px\]{
  width: 30px;
}

.w-\[31\%\]{
  width: 31%;
}

.w-\[312px\]{
  width: 312px;
}

.w-\[320px\]{
  width: 320px;
}

.w-\[32px\]{
  width: 32px;
}

.w-\[340px\]{
  width: 340px;
}

.w-\[34px\]{
  width: 34px;
}

.w-\[352px\]{
  width: 352px;
}

.w-\[360px\]{
  width: 360px;
}

.w-\[36px\]{
  width: 36px;
}

.w-\[38px\]{
  width: 38px;
}

.w-\[3px\]{
  width: 3px;
}

.w-\[404px\]{
  width: 404px;
}

.w-\[40px\]{
  width: 40px;
}

.w-\[420px\]{
  width: 420px;
}

.w-\[42px\]{
  width: 42px;
}

.w-\[44px\]{
  width: 44px;
}

.w-\[46px\]{
  width: 46px;
}

.w-\[48px\]{
  width: 48px;
}

.w-\[4px\]{
  width: 4px;
}

.w-\[50px\]{
  width: 50px;
}

.w-\[520px\]{
  width: 520px;
}

.w-\[52px\]{
  width: 52px;
}

.w-\[54px\]{
  width: 54px;
}

.w-\[56px\]{
  width: 56px;
}

.w-\[58px\]{
  width: 58px;
}

.w-\[5px\]{
  width: 5px;
}

.w-\[62px\]{
  width: 62px;
}

.w-\[63px\]{
  width: 63px;
}

.w-\[64px\]{
  width: 64px;
}

.w-\[68px\]{
  width: 68px;
}

.w-\[6px\]{
  width: 6px;
}

.w-\[70px\]{
  width: 70px;
}

.w-\[72px\]{
  width: 72px;
}

.w-\[74px\]{
  width: 74px;
}

.w-\[760px\]{
  width: 760px;
}

.w-\[78\%\]{
  width: 78%;
}

.w-\[78px\]{
  width: 78px;
}

.w-\[7px\]{
  width: 7px;
}

.w-\[80px\]{
  width: 80px;
}

.w-\[84px\]{
  width: 84px;
}

.w-\[85\%\]{
  width: 85%;
}

.w-\[86px\]{
  width: 86px;
}

.w-\[8px\]{
  width: 8px;
}

.w-\[92px\]{
  width: 92px;
}

.w-\[96px\]{
  width: 96px;
}

.w-\[9px\]{
  width: 9px;
}

.w-\[calc\(100\%-30px\)\]{
  width: calc(100% - 30px);
}

.w-\[calc\(100\%-50px\)\]{
  width: calc(100% - 50px);
}

.w-\[calc\(100\%-55px\)\]{
  width: calc(100% - 55px);
}

.w-\[min\(390px\2c calc\(100vw-2rem\)\)\]{
  width: min(390px,calc(100vw - 2rem));
}

.w-\[min\(540px\2c calc\(100\%-1\.5rem\)\)\]{
  width: min(540px,calc(100% - 1.5rem));
}

.w-auto{
  width: auto;
}

.w-full{
  width: 100%;
}

.w-max{
  width: -moz-max-content;
  width: max-content;
}

.w-px{
  width: 1px;
}

.w-screen{
  width: 100vw;
}

.min-w-0{
  min-width: 0px;
}

.min-w-10{
  min-width: 2.5rem;
}

.min-w-11{
  min-width: 2.75rem;
}

.min-w-5{
  min-width: 1.25rem;
}

.min-w-9{
  min-width: 2.25rem;
}

.min-w-\[12rem\]{
  min-width: 12rem;
}

.min-w-\[14px\]{
  min-width: 14px;
}

.min-w-\[2rem\]{
  min-width: 2rem;
}

.min-w-\[30\%\]{
  min-width: 30%;
}

.min-w-\[30px\]{
  min-width: 30px;
}

.min-w-\[38px\]{
  min-width: 38px;
}

.min-w-\[3rem\]{
  min-width: 3rem;
}

.min-w-\[44px\]{
  min-width: 44px;
}

.min-w-\[58px\]{
  min-width: 58px;
}

.min-w-\[70px\]{
  min-width: 70px;
}

.min-w-\[74px\]{
  min-width: 74px;
}

.min-w-\[80px\]{
  min-width: 80px;
}

.min-w-\[8rem\]{
  min-width: 8rem;
}

.min-w-\[95px\]{
  min-width: 95px;
}

.min-w-\[96px\]{
  min-width: 96px;
}

.min-w-\[var\(--radix-select-trigger-width\)\]{
  min-width: var(--radix-select-trigger-width);
}

.min-w-full{
  min-width: 100%;
}

.max-w-2xl{
  max-width: 42rem;
}

.max-w-3xl{
  max-width: 48rem;
}

.max-w-48{
  max-width: 12rem;
}

.max-w-4xl{
  max-width: 56rem;
}

.max-w-5xl{
  max-width: 64rem;
}

.max-w-6xl{
  max-width: 72rem;
}

.max-w-7xl{
  max-width: 80rem;
}

.max-w-\[--skeleton-width\]{
  max-width: var(--skeleton-width);
}

.max-w-\[100vw\]{
  max-width: 100vw;
}

.max-w-\[110px\]{
  max-width: 110px;
}

.max-w-\[115px\]{
  max-width: 115px;
}

.max-w-\[1180px\]{
  max-width: 1180px;
}

.max-w-\[11ch\]{
  max-width: 11ch;
}

.max-w-\[120px\]{
  max-width: 120px;
}

.max-w-\[140px\]{
  max-width: 140px;
}

.max-w-\[1440px\]{
  max-width: 1440px;
}

.max-w-\[150px\]{
  max-width: 150px;
}

.max-w-\[190px\]{
  max-width: 190px;
}

.max-w-\[200px\]{
  max-width: 200px;
}

.max-w-\[220px\]{
  max-width: 220px;
}

.max-w-\[30\%\]{
  max-width: 30%;
}

.max-w-\[320px\]{
  max-width: 320px;
}

.max-w-\[400px\]{
  max-width: 400px;
}

.max-w-\[420px\]{
  max-width: 420px;
}

.max-w-\[440px\]{
  max-width: 440px;
}

.max-w-\[52\%\]{
  max-width: 52%;
}

.max-w-\[70\%\]{
  max-width: 70%;
}

.max-w-\[70ch\]{
  max-width: 70ch;
}

.max-w-\[84px\]{
  max-width: 84px;
}

.max-w-\[85\%\]{
  max-width: 85%;
}

.max-w-\[900px\]{
  max-width: 900px;
}

.max-w-\[92vw\]{
  max-width: 92vw;
}

.max-w-\[95px\]{
  max-width: 95px;
}

.max-w-\[calc\(100vw-2rem\)\]{
  max-width: calc(100vw - 2rem);
}

.max-w-full{
  max-width: 100%;
}

.max-w-lg{
  max-width: 32rem;
}

.max-w-max{
  max-width: -moz-max-content;
  max-width: max-content;
}

.max-w-md{
  max-width: 28rem;
}

.max-w-none{
  max-width: none;
}

.max-w-sm{
  max-width: 24rem;
}

.max-w-xl{
  max-width: 36rem;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-\[118\]{
  flex: 118;
}

.flex-\[168\]{
  flex: 168;
}

.flex-\[2\]{
  flex: 2;
}

.flex-none{
  flex: none;
}

.flex-shrink-0{
  flex-shrink: 0;
}

.shrink{
  flex-shrink: 1;
}

.shrink-0{
  flex-shrink: 0;
}

.flex-grow{
  flex-grow: 1;
}

.flex-grow-\[1\.25\]{
  flex-grow: 1.25;
}

.flex-grow-\[1\.5\]{
  flex-grow: 1.5;
}

.grow{
  flex-grow: 1;
}

.grow-0{
  flex-grow: 0;
}

.basis-full{
  flex-basis: 100%;
}

.caption-bottom{
  caption-side: bottom;
}

.border-collapse{
  border-collapse: collapse;
}

.origin-\[--radix-context-menu-content-transform-origin\]{
  transform-origin: var(--radix-context-menu-content-transform-origin);
}

.origin-\[--radix-dropdown-menu-content-transform-origin\]{
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}

.origin-\[--radix-hover-card-content-transform-origin\]{
  transform-origin: var(--radix-hover-card-content-transform-origin);
}

.origin-\[--radix-menubar-content-transform-origin\]{
  transform-origin: var(--radix-menubar-content-transform-origin);
}

.origin-\[--radix-popover-content-transform-origin\]{
  transform-origin: var(--radix-popover-content-transform-origin);
}

.origin-\[--radix-select-content-transform-origin\]{
  transform-origin: var(--radix-select-content-transform-origin);
}

.origin-\[--radix-tooltip-content-transform-origin\]{
  transform-origin: var(--radix-tooltip-content-transform-origin);
}

.origin-center{
  transform-origin: center;
}

.origin-left{
  transform-origin: left;
}

.origin-top-left{
  transform-origin: top left;
}

.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-\[1px\]{
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-\[5px\]{
  --tw-translate-x: -5px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-px{
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0\.5{
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-4{
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-6{
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-\[-50\%\]{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-px{
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0\.5{
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[-15px\]{
  --tw-translate-y: -15px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[-50\%\]{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-45{
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-90{
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-45{
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[38deg\]{
  --tw-rotate: 38deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-110{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[1\.18\]{
  --tw-scale-x: 1.18;
  --tw-scale-y: 1.18;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes bounce{

  0%, 100%{
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50%{
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

.animate-bounce{
  animation: bounce 1s infinite;
}

@keyframes ping{

  75%, 100%{
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping{
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse{

  50%{
    opacity: .5;
  }
}

.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin{

  to{
    transform: rotate(360deg);
  }
}

.animate-spin{
  animation: spin 1s linear infinite;
}

.cursor-crosshair{
  cursor: crosshair;
}

.cursor-default{
  cursor: default;
}

.cursor-ew-resize{
  cursor: ew-resize;
}

.cursor-grab{
  cursor: grab;
}

.cursor-grabbing{
  cursor: grabbing;
}

.cursor-not-allowed{
  cursor: not-allowed;
}

.cursor-ns-resize{
  cursor: ns-resize;
}

.cursor-pointer{
  cursor: pointer;
}

.cursor-wait{
  cursor: wait;
}

.touch-none{
  touch-action: none;
}

.touch-pan-y{
  --tw-pan-y: pan-y;
  touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
}

.touch-manipulation{
  touch-action: manipulation;
}

.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.select-all{
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.resize-none{
  resize: none;
}

.resize{
  resize: both;
}

.snap-x{
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-mandatory{
  --tw-scroll-snap-strictness: mandatory;
}

.snap-proximity{
  --tw-scroll-snap-strictness: proximity;
}

.snap-start{
  scroll-snap-align: start;
}

.snap-center{
  scroll-snap-align: center;
}

.list-inside{
  list-style-position: inside;
}

.list-decimal{
  list-style-type: decimal;
}

.list-none{
  list-style-type: none;
}

.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-flow-col{
  grid-auto-flow: column;
}

.auto-rows-fr{
  grid-auto-rows: minmax(0, 1fr);
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-10{
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6{
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-8{
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-\[1\.25fr_1fr_1fr_1fr_1fr_0\.95fr\]{
  grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr 0.95fr;
}

.grid-cols-\[1fr_auto_auto\]{
  grid-template-columns: 1fr auto auto;
}

.grid-cols-\[minmax\(0\2c 1fr\)_108px\]{
  grid-template-columns: minmax(0,1fr) 108px;
}

.grid-rows-2{
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-4{
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid-rows-7{
  grid-template-rows: repeat(7, minmax(0, 1fr));
}

.grid-rows-\[1fr_auto\]{
  grid-template-rows: 1fr auto;
}

.grid-rows-\[minmax\(0\2c 1fr\)_auto\]{
  grid-template-rows: minmax(0,1fr) auto;
}

.flex-row{
  flex-direction: row;
}

.flex-row-reverse{
  flex-direction: row-reverse;
}

.flex-col{
  flex-direction: column;
}

.flex-col-reverse{
  flex-direction: column-reverse;
}

.flex-wrap{
  flex-wrap: wrap;
}

.place-items-center{
  place-items: center;
}

.content-start{
  align-content: flex-start;
}

.items-start{
  align-items: flex-start;
}

.items-end{
  align-items: flex-end;
}

.items-center{
  align-items: center;
}

.items-baseline{
  align-items: baseline;
}

.items-stretch{
  align-items: stretch;
}

.justify-start{
  justify-content: flex-start;
}

.justify-end{
  justify-content: flex-end;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.justify-around{
  justify-content: space-around;
}

.justify-items-center{
  justify-items: center;
}

.gap-0{
  gap: 0px;
}

.gap-0\.5{
  gap: 0.125rem;
}

.gap-1{
  gap: 0.25rem;
}

.gap-1\.5{
  gap: 0.375rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-2\.5{
  gap: 0.625rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-4{
  gap: 1rem;
}

.gap-5{
  gap: 1.25rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-\[1\.5px\]{
  gap: 1.5px;
}

.gap-\[10px\]{
  gap: 10px;
}

.gap-\[11px\]{
  gap: 11px;
}

.gap-\[12px\]{
  gap: 12px;
}

.gap-\[14px\]{
  gap: 14px;
}

.gap-\[1px\]{
  gap: 1px;
}

.gap-\[2px\]{
  gap: 2px;
}

.gap-\[3px\]{
  gap: 3px;
}

.gap-\[4px\]{
  gap: 4px;
}

.gap-\[5px\]{
  gap: 5px;
}

.gap-\[6px\]{
  gap: 6px;
}

.gap-\[7px\]{
  gap: 7px;
}

.gap-\[8px\]{
  gap: 8px;
}

.gap-\[9px\]{
  gap: 9px;
}

.gap-px{
  gap: 1px;
}

.gap-x-1{
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}

.gap-x-3{
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-6{
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-x-\[4px\]{
  -moz-column-gap: 4px;
       column-gap: 4px;
}

.gap-x-\[8px\]{
  -moz-column-gap: 8px;
       column-gap: 8px;
}

.gap-y-1{
  row-gap: 0.25rem;
}

.gap-y-1\.5{
  row-gap: 0.375rem;
}

.gap-y-2{
  row-gap: 0.5rem;
}

.gap-y-\[2px\]{
  row-gap: 2px;
}

.gap-y-\[3px\]{
  row-gap: 3px;
}

.gap-y-\[6px\]{
  row-gap: 6px;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-7 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}

.divide-gray-50 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-divide-opacity));
}

.divide-gray-700 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-divide-opacity));
}

.divide-gray-800 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-divide-opacity));
}

.divide-white\/5 > :not([hidden]) ~ :not([hidden]){
  border-color: rgb(255 255 255 / 0.05);
}

.self-start{
  align-self: flex-start;
}

.self-end{
  align-self: flex-end;
}

.self-center{
  align-self: center;
}

.self-stretch{
  align-self: stretch;
}

.justify-self-center{
  justify-self: center;
}

.overflow-auto{
  overflow: auto;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-visible{
  overflow: visible;
}

.overflow-x-auto{
  overflow-x: auto;
}

.overflow-y-auto{
  overflow-y: auto;
}

.overflow-x-hidden{
  overflow-x: hidden;
}

.overflow-y-hidden{
  overflow-y: hidden;
}

.overflow-y-scroll{
  overflow-y: scroll;
}

.overscroll-contain{
  overscroll-behavior: contain;
}

.overscroll-none{
  overscroll-behavior: none;
}

.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis{
  text-overflow: ellipsis;
}

.whitespace-normal{
  white-space: normal;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.whitespace-pre-wrap{
  white-space: pre-wrap;
}

.break-words{
  overflow-wrap: break-word;
}

.break-all{
  word-break: break-all;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-2xl{
  border-radius: 1rem;
}

.rounded-3xl{
  border-radius: 1.5rem;
}

.rounded-\[0\.5px\]{
  border-radius: 0.5px;
}

.rounded-\[1\.5px\]{
  border-radius: 1.5px;
}

.rounded-\[1\.5rem\]{
  border-radius: 1.5rem;
}

.rounded-\[1\.8rem\]{
  border-radius: 1.8rem;
}

.rounded-\[10px\]{
  border-radius: 10px;
}

.rounded-\[13px\]{
  border-radius: 13px;
}

.rounded-\[14px\]{
  border-radius: 14px;
}

.rounded-\[18px\]{
  border-radius: 18px;
}

.rounded-\[1px\]{
  border-radius: 1px;
}

.rounded-\[2\.5px\]{
  border-radius: 2.5px;
}

.rounded-\[22px\]{
  border-radius: 22px;
}

.rounded-\[2px\]{
  border-radius: 2px;
}

.rounded-\[2rem\]{
  border-radius: 2rem;
}

.rounded-\[3\.5px\]{
  border-radius: 3.5px;
}

.rounded-\[3px\]{
  border-radius: 3px;
}

.rounded-\[4px\]{
  border-radius: 4px;
}

.rounded-\[50\%\]{
  border-radius: 50%;
}

.rounded-\[5px\]{
  border-radius: 5px;
}

.rounded-\[6px\]{
  border-radius: 6px;
}

.rounded-\[7px\]{
  border-radius: 7px;
}

.rounded-\[8px\]{
  border-radius: 8px;
}

.rounded-\[9px\]{
  border-radius: 9px;
}

.rounded-\[inherit\]{
  border-radius: inherit;
}

.rounded-full{
  border-radius: 9999px;
}

.rounded-lg{
  border-radius: var(--radius);
}

.rounded-md{
  border-radius: calc(var(--radius) - 2px);
}

.rounded-sm{
  border-radius: calc(var(--radius) - 4px);
}

.rounded-xl{
  border-radius: 0.75rem;
}

.rounded-b-\[2px\]{
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}

.rounded-b-\[5px\]{
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.rounded-b-lg{
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.rounded-b-md{
  border-bottom-right-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.rounded-l-\[3px\]{
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.rounded-l-md{
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.rounded-r{
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-r-\[3px\]{
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.rounded-r-\[4px\]{
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.rounded-r-md{
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.rounded-t-2xl{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.rounded-t-\[10px\]{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.rounded-t-\[5px\]{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.rounded-t-md{
  border-top-left-radius: calc(var(--radius) - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
}

.rounded-bl-\[5px\]{
  border-bottom-left-radius: 5px;
}

.rounded-tl-sm{
  border-top-left-radius: calc(var(--radius) - 4px);
}

.border{
  border-width: 1px;
}

.border-0{
  border-width: 0px;
}

.border-2{
  border-width: 2px;
}

.border-\[1\.5px\]{
  border-width: 1.5px;
}

.border-y{
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-b-2{
  border-bottom-width: 2px;
}

.border-l{
  border-left-width: 1px;
}

.border-l-2{
  border-left-width: 2px;
}

.border-l-4{
  border-left-width: 4px;
}

.border-l-\[5px\]{
  border-left-width: 5px;
}

.border-r{
  border-right-width: 1px;
}

.border-r-\[5px\]{
  border-right-width: 5px;
}

.border-t{
  border-top-width: 1px;
}

.border-t-2{
  border-top-width: 2px;
}

.border-t-\[7px\]{
  border-top-width: 7px;
}

.border-dashed{
  border-style: dashed;
}

.border-none{
  border-style: none;
}

.border-\[\#00000022\]{
  border-color: #00000022;
}

.border-\[\#00A3FF\]{
  --tw-border-opacity: 1;
  border-color: rgb(0 163 255 / var(--tw-border-opacity));
}

.border-\[\#00ff00\]{
  --tw-border-opacity: 1;
  border-color: rgb(0 255 0 / var(--tw-border-opacity));
}

.border-\[\#00ff00\]\/20{
  border-color: rgb(0 255 0 / 0.2);
}

.border-\[\#00ff00\]\/30{
  border-color: rgb(0 255 0 / 0.3);
}

.border-\[\#00ff00\]\/40{
  border-color: rgb(0 255 0 / 0.4);
}

.border-\[\#00ff00\]\/50{
  border-color: rgb(0 255 0 / 0.5);
}

.border-\[\#07101f\]{
  --tw-border-opacity: 1;
  border-color: rgb(7 16 31 / var(--tw-border-opacity));
}

.border-\[\#111\]{
  --tw-border-opacity: 1;
  border-color: rgb(17 17 17 / var(--tw-border-opacity));
}

.border-\[\#143d74\]{
  --tw-border-opacity: 1;
  border-color: rgb(20 61 116 / var(--tw-border-opacity));
}

.border-\[\#152838\]{
  --tw-border-opacity: 1;
  border-color: rgb(21 40 56 / var(--tw-border-opacity));
}

.border-\[\#166534\]{
  --tw-border-opacity: 1;
  border-color: rgb(22 101 52 / var(--tw-border-opacity));
}

.border-\[\#17191f\]{
  --tw-border-opacity: 1;
  border-color: rgb(23 25 31 / var(--tw-border-opacity));
}

.border-\[\#181309\]{
  --tw-border-opacity: 1;
  border-color: rgb(24 19 9 / var(--tw-border-opacity));
}

.border-\[\#18d29f\]\/50{
  border-color: rgb(24 210 159 / 0.5);
}

.border-\[\#1C212B\]{
  --tw-border-opacity: 1;
  border-color: rgb(28 33 43 / var(--tw-border-opacity));
}

.border-\[\#1a150e\]{
  --tw-border-opacity: 1;
  border-color: rgb(26 21 14 / var(--tw-border-opacity));
}

.border-\[\#1e2027\]{
  --tw-border-opacity: 1;
  border-color: rgb(30 32 39 / var(--tw-border-opacity));
}

.border-\[\#1f1f1f\]{
  --tw-border-opacity: 1;
  border-color: rgb(31 31 31 / var(--tw-border-opacity));
}

.border-\[\#1f5f3d\]{
  --tw-border-opacity: 1;
  border-color: rgb(31 95 61 / var(--tw-border-opacity));
}

.border-\[\#22242b\]{
  --tw-border-opacity: 1;
  border-color: rgb(34 36 43 / var(--tw-border-opacity));
}

.border-\[\#222\]{
  --tw-border-opacity: 1;
  border-color: rgb(34 34 34 / var(--tw-border-opacity));
}

.border-\[\#22384a\]{
  --tw-border-opacity: 1;
  border-color: rgb(34 56 74 / var(--tw-border-opacity));
}

.border-\[\#22c55e\]{
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity));
}

.border-\[\#23232a\]{
  --tw-border-opacity: 1;
  border-color: rgb(35 35 42 / var(--tw-border-opacity));
}

.border-\[\#23262d\]{
  --tw-border-opacity: 1;
  border-color: rgb(35 38 45 / var(--tw-border-opacity));
}

.border-\[\#232833\]{
  --tw-border-opacity: 1;
  border-color: rgb(35 40 51 / var(--tw-border-opacity));
}

.border-\[\#241d14\]{
  --tw-border-opacity: 1;
  border-color: rgb(36 29 20 / var(--tw-border-opacity));
}

.border-\[\#241d29\]{
  --tw-border-opacity: 1;
  border-color: rgb(36 29 41 / var(--tw-border-opacity));
}

.border-\[\#242426\]{
  --tw-border-opacity: 1;
  border-color: rgb(36 36 38 / var(--tw-border-opacity));
}

.border-\[\#24262c\]{
  --tw-border-opacity: 1;
  border-color: rgb(36 38 44 / var(--tw-border-opacity));
}

.border-\[\#243246\]{
  --tw-border-opacity: 1;
  border-color: rgb(36 50 70 / var(--tw-border-opacity));
}

.border-\[\#25406b\]{
  --tw-border-opacity: 1;
  border-color: rgb(37 64 107 / var(--tw-border-opacity));
}

.border-\[\#2563eb\]{
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.border-\[\#262626\]{
  --tw-border-opacity: 1;
  border-color: rgb(38 38 38 / var(--tw-border-opacity));
}

.border-\[\#28422d\]{
  --tw-border-opacity: 1;
  border-color: rgb(40 66 45 / var(--tw-border-opacity));
}

.border-\[\#2E3542\]{
  --tw-border-opacity: 1;
  border-color: rgb(46 53 66 / var(--tw-border-opacity));
}

.border-\[\#2FD4C4\]{
  --tw-border-opacity: 1;
  border-color: rgb(47 212 196 / var(--tw-border-opacity));
}

.border-\[\#2a1414\]{
  --tw-border-opacity: 1;
  border-color: rgb(42 20 20 / var(--tw-border-opacity));
}

.border-\[\#2a2118\]{
  --tw-border-opacity: 1;
  border-color: rgb(42 33 24 / var(--tw-border-opacity));
}

.border-\[\#2a2a2a\]{
  --tw-border-opacity: 1;
  border-color: rgb(42 42 42 / var(--tw-border-opacity));
}

.border-\[\#2a2c33\]{
  --tw-border-opacity: 1;
  border-color: rgb(42 44 51 / var(--tw-border-opacity));
}

.border-\[\#2a5a3a\]{
  --tw-border-opacity: 1;
  border-color: rgb(42 90 58 / var(--tw-border-opacity));
}

.border-\[\#2b2f38\]{
  --tw-border-opacity: 1;
  border-color: rgb(43 47 56 / var(--tw-border-opacity));
}

.border-\[\#2b3b55\]{
  --tw-border-opacity: 1;
  border-color: rgb(43 59 85 / var(--tw-border-opacity));
}

.border-\[\#2b4c76\]{
  --tw-border-opacity: 1;
  border-color: rgb(43 76 118 / var(--tw-border-opacity));
}

.border-\[\#2c3d55\]{
  --tw-border-opacity: 1;
  border-color: rgb(44 61 85 / var(--tw-border-opacity));
}

.border-\[\#2c4a66\]{
  --tw-border-opacity: 1;
  border-color: rgb(44 74 102 / var(--tw-border-opacity));
}

.border-\[\#2f333c\]{
  --tw-border-opacity: 1;
  border-color: rgb(47 51 60 / var(--tw-border-opacity));
}

.border-\[\#2f3f59\]{
  --tw-border-opacity: 1;
  border-color: rgb(47 63 89 / var(--tw-border-opacity));
}

.border-\[\#2f6b3c\]{
  --tw-border-opacity: 1;
  border-color: rgb(47 107 60 / var(--tw-border-opacity));
}

.border-\[\#31445f\]{
  --tw-border-opacity: 1;
  border-color: rgb(49 68 95 / var(--tw-border-opacity));
}

.border-\[\#333333\]{
  --tw-border-opacity: 1;
  border-color: rgb(51 51 51 / var(--tw-border-opacity));
}

.border-\[\#333\]{
  --tw-border-opacity: 1;
  border-color: rgb(51 51 51 / var(--tw-border-opacity));
}

.border-\[\#3a2a4a\]{
  --tw-border-opacity: 1;
  border-color: rgb(58 42 74 / var(--tw-border-opacity));
}

.border-\[\#3a2c46\]{
  --tw-border-opacity: 1;
  border-color: rgb(58 44 70 / var(--tw-border-opacity));
}

.border-\[\#3a3325\]{
  --tw-border-opacity: 1;
  border-color: rgb(58 51 37 / var(--tw-border-opacity));
}

.border-\[\#3a362e\]{
  --tw-border-opacity: 1;
  border-color: rgb(58 54 46 / var(--tw-border-opacity));
}

.border-\[\#3a3a3a\]{
  --tw-border-opacity: 1;
  border-color: rgb(58 58 58 / var(--tw-border-opacity));
}

.border-\[\#3a3d45\]{
  --tw-border-opacity: 1;
  border-color: rgb(58 61 69 / var(--tw-border-opacity));
}

.border-\[\#3a3f49\]{
  --tw-border-opacity: 1;
  border-color: rgb(58 63 73 / var(--tw-border-opacity));
}

.border-\[\#3a5a6a\]{
  --tw-border-opacity: 1;
  border-color: rgb(58 90 106 / var(--tw-border-opacity));
}

.border-\[\#3a6a4a\]{
  --tw-border-opacity: 1;
  border-color: rgb(58 106 74 / var(--tw-border-opacity));
}

.border-\[\#3b2f13\]{
  --tw-border-opacity: 1;
  border-color: rgb(59 47 19 / var(--tw-border-opacity));
}

.border-\[\#3b6aa6\]{
  --tw-border-opacity: 1;
  border-color: rgb(59 106 166 / var(--tw-border-opacity));
}

.border-\[\#3b82f6\]{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.border-\[\#3e3e42\]{
  --tw-border-opacity: 1;
  border-color: rgb(62 62 66 / var(--tw-border-opacity));
}

.border-\[\#3f7ad0\]{
  --tw-border-opacity: 1;
  border-color: rgb(63 122 208 / var(--tw-border-opacity));
}

.border-\[\#444444\]{
  --tw-border-opacity: 1;
  border-color: rgb(68 68 68 / var(--tw-border-opacity));
}

.border-\[\#44566a\]{
  --tw-border-opacity: 1;
  border-color: rgb(68 86 106 / var(--tw-border-opacity));
}

.border-\[\#4C5464\]{
  --tw-border-opacity: 1;
  border-color: rgb(76 84 100 / var(--tw-border-opacity));
}

.border-\[\#4a3768\]{
  --tw-border-opacity: 1;
  border-color: rgb(74 55 104 / var(--tw-border-opacity));
}

.border-\[\#4a4a4a\]{
  --tw-border-opacity: 1;
  border-color: rgb(74 74 74 / var(--tw-border-opacity));
}

.border-\[\#4a5060\]{
  --tw-border-opacity: 1;
  border-color: rgb(74 80 96 / var(--tw-border-opacity));
}

.border-\[\#4a5568\]{
  --tw-border-opacity: 1;
  border-color: rgb(74 85 104 / var(--tw-border-opacity));
}

.border-\[\#4ade80\]{
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity));
}

.border-\[\#4d4d4d\]{
  --tw-border-opacity: 1;
  border-color: rgb(77 77 77 / var(--tw-border-opacity));
}

.border-\[\#555555\]{
  --tw-border-opacity: 1;
  border-color: rgb(85 85 85 / var(--tw-border-opacity));
}

.border-\[\#555\]{
  --tw-border-opacity: 1;
  border-color: rgb(85 85 85 / var(--tw-border-opacity));
}

.border-\[\#57d6f0\]{
  --tw-border-opacity: 1;
  border-color: rgb(87 214 240 / var(--tw-border-opacity));
}

.border-\[\#5a2a2a\]{
  --tw-border-opacity: 1;
  border-color: rgb(90 42 42 / var(--tw-border-opacity));
}

.border-\[\#5a3a6a\]{
  --tw-border-opacity: 1;
  border-color: rgb(90 58 106 / var(--tw-border-opacity));
}

.border-\[\#5a5f6a\]{
  --tw-border-opacity: 1;
  border-color: rgb(90 95 106 / var(--tw-border-opacity));
}

.border-\[\#5b86be\]{
  --tw-border-opacity: 1;
  border-color: rgb(91 134 190 / var(--tw-border-opacity));
}

.border-\[\#5d5d5d\]{
  --tw-border-opacity: 1;
  border-color: rgb(93 93 93 / var(--tw-border-opacity));
}

.border-\[\#5d89c1\]{
  --tw-border-opacity: 1;
  border-color: rgb(93 137 193 / var(--tw-border-opacity));
}

.border-\[\#5ec8d8\]\/50{
  border-color: rgb(94 200 216 / 0.5);
}

.border-\[\#5fe3a1\]{
  --tw-border-opacity: 1;
  border-color: rgb(95 227 161 / var(--tw-border-opacity));
}

.border-\[\#60a5fa\]{
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
}

.border-\[\#65dcff\]{
  --tw-border-opacity: 1;
  border-color: rgb(101 220 255 / var(--tw-border-opacity));
}

.border-\[\#66d9b8\]{
  --tw-border-opacity: 1;
  border-color: rgb(102 217 184 / var(--tw-border-opacity));
}

.border-\[\#6a5432\]{
  --tw-border-opacity: 1;
  border-color: rgb(106 84 50 / var(--tw-border-opacity));
}

.border-\[\#6a6a6a\]{
  --tw-border-opacity: 1;
  border-color: rgb(106 106 106 / var(--tw-border-opacity));
}

.border-\[\#6d9fd0\]{
  --tw-border-opacity: 1;
  border-color: rgb(109 159 208 / var(--tw-border-opacity));
}

.border-\[\#6f9fd5\]{
  --tw-border-opacity: 1;
  border-color: rgb(111 159 213 / var(--tw-border-opacity));
}

.border-\[\#6fc7c0\]{
  --tw-border-opacity: 1;
  border-color: rgb(111 199 192 / var(--tw-border-opacity));
}

.border-\[\#73ff86\]{
  --tw-border-opacity: 1;
  border-color: rgb(115 255 134 / var(--tw-border-opacity));
}

.border-\[\#7a1c17\]{
  --tw-border-opacity: 1;
  border-color: rgb(122 28 23 / var(--tw-border-opacity));
}

.border-\[\#7ba7e0\]{
  --tw-border-opacity: 1;
  border-color: rgb(123 167 224 / var(--tw-border-opacity));
}

.border-\[\#7cb8ff\]{
  --tw-border-opacity: 1;
  border-color: rgb(124 184 255 / var(--tw-border-opacity));
}

.border-\[\#7ea8da\]{
  --tw-border-opacity: 1;
  border-color: rgb(126 168 218 / var(--tw-border-opacity));
}

.border-\[\#8a3a3a\]{
  --tw-border-opacity: 1;
  border-color: rgb(138 58 58 / var(--tw-border-opacity));
}

.border-\[\#8a5cff\]{
  --tw-border-opacity: 1;
  border-color: rgb(138 92 255 / var(--tw-border-opacity));
}

.border-\[\#8a6a3a\]{
  --tw-border-opacity: 1;
  border-color: rgb(138 106 58 / var(--tw-border-opacity));
}

.border-\[\#8ae0d0\]{
  --tw-border-opacity: 1;
  border-color: rgb(138 224 208 / var(--tw-border-opacity));
}

.border-\[\#8dffa1\]{
  --tw-border-opacity: 1;
  border-color: rgb(141 255 161 / var(--tw-border-opacity));
}

.border-\[\#8fd9a8\]{
  --tw-border-opacity: 1;
  border-color: rgb(143 217 168 / var(--tw-border-opacity));
}

.border-\[\#8fdcac\]{
  --tw-border-opacity: 1;
  border-color: rgb(143 220 172 / var(--tw-border-opacity));
}

.border-\[\#9aa8c4\]{
  --tw-border-opacity: 1;
  border-color: rgb(154 168 196 / var(--tw-border-opacity));
}

.border-\[\#C9F24D\]{
  --tw-border-opacity: 1;
  border-color: rgb(201 242 77 / var(--tw-border-opacity));
}

.border-\[\#E8B54A\]{
  --tw-border-opacity: 1;
  border-color: rgb(232 181 74 / var(--tw-border-opacity));
}

.border-\[\#E8B54A\]\/60{
  border-color: rgb(232 181 74 / 0.6);
}

.border-\[\#FF4D6D\]{
  --tw-border-opacity: 1;
  border-color: rgb(255 77 109 / var(--tw-border-opacity));
}

.border-\[\#a8b4c8\]{
  --tw-border-opacity: 1;
  border-color: rgb(168 180 200 / var(--tw-border-opacity));
}

.border-\[\#a9b8e0\]{
  --tw-border-opacity: 1;
  border-color: rgb(169 184 224 / var(--tw-border-opacity));
}

.border-\[\#b48cff\]{
  --tw-border-opacity: 1;
  border-color: rgb(180 140 255 / var(--tw-border-opacity));
}

.border-\[\#b78ae0\]{
  --tw-border-opacity: 1;
  border-color: rgb(183 138 224 / var(--tw-border-opacity));
}

.border-\[\#c8b48a\]{
  --tw-border-opacity: 1;
  border-color: rgb(200 180 138 / var(--tw-border-opacity));
}

.border-\[\#c9f24d44\]{
  border-color: #c9f24d44;
}

.border-\[\#c9f24d\]{
  --tw-border-opacity: 1;
  border-color: rgb(201 242 77 / var(--tw-border-opacity));
}

.border-\[\#d4b483\]{
  --tw-border-opacity: 1;
  border-color: rgb(212 180 131 / var(--tw-border-opacity));
}

.border-\[\#d8a06a\]{
  --tw-border-opacity: 1;
  border-color: rgb(216 160 106 / var(--tw-border-opacity));
}

.border-\[\#d9a441\]{
  --tw-border-opacity: 1;
  border-color: rgb(217 164 65 / var(--tw-border-opacity));
}

.border-\[\#dcefff\]{
  --tw-border-opacity: 1;
  border-color: rgb(220 239 255 / var(--tw-border-opacity));
}

.border-\[\#e05a5a\]{
  --tw-border-opacity: 1;
  border-color: rgb(224 90 90 / var(--tw-border-opacity));
}

.border-\[\#e06a8a\]{
  --tw-border-opacity: 1;
  border-color: rgb(224 106 138 / var(--tw-border-opacity));
}

.border-\[\#e08a4a\]{
  --tw-border-opacity: 1;
  border-color: rgb(224 138 74 / var(--tw-border-opacity));
}

.border-\[\#e0956a\]{
  --tw-border-opacity: 1;
  border-color: rgb(224 149 106 / var(--tw-border-opacity));
}

.border-\[\#e0c86a\]{
  --tw-border-opacity: 1;
  border-color: rgb(224 200 106 / var(--tw-border-opacity));
}

.border-\[\#e79ec4\]{
  --tw-border-opacity: 1;
  border-color: rgb(231 158 196 / var(--tw-border-opacity));
}

.border-\[\#e8c48a\]{
  --tw-border-opacity: 1;
  border-color: rgb(232 196 138 / var(--tw-border-opacity));
}

.border-\[\#f5fbff\]{
  --tw-border-opacity: 1;
  border-color: rgb(245 251 255 / var(--tw-border-opacity));
}

.border-\[\#ff5f6d\]{
  --tw-border-opacity: 1;
  border-color: rgb(255 95 109 / var(--tw-border-opacity));
}

.border-\[\#ff5f6d\]\/60{
  border-color: rgb(255 95 109 / 0.6);
}

.border-\[\#ff6b5f\]{
  --tw-border-opacity: 1;
  border-color: rgb(255 107 95 / var(--tw-border-opacity));
}

.border-\[\#ff7a5c\]{
  --tw-border-opacity: 1;
  border-color: rgb(255 122 92 / var(--tw-border-opacity));
}

.border-\[\#ff7a7a\]{
  --tw-border-opacity: 1;
  border-color: rgb(255 122 122 / var(--tw-border-opacity));
}

.border-\[\#ff8a8a\]{
  --tw-border-opacity: 1;
  border-color: rgb(255 138 138 / var(--tw-border-opacity));
}

.border-\[\#ff8fb1\]{
  --tw-border-opacity: 1;
  border-color: rgb(255 143 177 / var(--tw-border-opacity));
}

.border-\[\#ffb454\]{
  --tw-border-opacity: 1;
  border-color: rgb(255 180 84 / var(--tw-border-opacity));
}

.border-\[\#ffcf4a\]{
  --tw-border-opacity: 1;
  border-color: rgb(255 207 74 / var(--tw-border-opacity));
}

.border-\[\#ffd16688\]{
  border-color: #ffd16688;
}

.border-\[\#ffd479\]{
  --tw-border-opacity: 1;
  border-color: rgb(255 212 121 / var(--tw-border-opacity));
}

.border-\[\#ffffff88\]{
  border-color: #ffffff88;
}

.border-\[--color-border\]{
  border-color: var(--color-border);
}

.border-\[color\:var\(--fx-accent\)\]{
  border-color: var(--fx-accent);
}

.border-\[color\:var\(--fx-field-edge\)\]{
  border-color: var(--fx-field-edge);
}

.border-\[color\:var\(--fx-quiet-edge\)\]{
  border-color: var(--fx-quiet-edge);
}

.border-\[color\:var\(--fx-strip-edge\)\]{
  border-color: var(--fx-strip-edge);
}

.border-amber-200\/25{
  border-color: rgb(253 230 138 / 0.25);
}

.border-amber-400\/20{
  border-color: rgb(251 191 36 / 0.2);
}

.border-amber-400\/25{
  border-color: rgb(251 191 36 / 0.25);
}

.border-amber-500\/30{
  border-color: rgb(245 158 11 / 0.3);
}

.border-black{
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

.border-black\/50{
  border-color: rgb(0 0 0 / 0.5);
}

.border-blue-200{
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity));
}

.border-blue-300{
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity));
}

.border-blue-400{
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
}

.border-blue-500{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.border-blue-500\/20{
  border-color: rgb(59 130 246 / 0.2);
}

.border-blue-600{
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.border-blue-900{
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity));
}

.border-border\/50{
  border-color: hsl(var(--border) / 0.5);
}

.border-current{
  border-color: currentColor;
}

.border-cyan-400{
  --tw-border-opacity: 1;
  border-color: rgb(34 211 238 / var(--tw-border-opacity));
}

.border-cyan-400\/20{
  border-color: rgb(34 211 238 / 0.2);
}

.border-destructive{
  border-color: hsl(var(--destructive));
}

.border-destructive\/50{
  border-color: hsl(var(--destructive) / 0.5);
}

.border-emerald-400{
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity));
}

.border-emerald-400\/30{
  border-color: rgb(52 211 153 / 0.3);
}

.border-emerald-400\/35{
  border-color: rgb(52 211 153 / 0.35);
}

.border-emerald-400\/40{
  border-color: rgb(52 211 153 / 0.4);
}

.border-emerald-500{
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / var(--tw-border-opacity));
}

.border-emerald-500\/20{
  border-color: rgb(16 185 129 / 0.2);
}

.border-emerald-500\/40{
  border-color: rgb(16 185 129 / 0.4);
}

.border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity));
}

.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}

.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.border-gray-50{
  --tw-border-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-border-opacity));
}

.border-gray-500{
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity));
}

.border-gray-600{
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity));
}

.border-gray-700{
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
}

.border-gray-700\/50{
  border-color: rgb(55 65 81 / 0.5);
}

.border-gray-800{
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity));
}

.border-gray-900{
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity));
}

.border-green-100{
  --tw-border-opacity: 1;
  border-color: rgb(220 252 231 / var(--tw-border-opacity));
}

.border-green-200{
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity));
}

.border-green-300{
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity));
}

.border-green-400{
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity));
}

.border-green-500{
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity));
}

.border-green-500\/50{
  border-color: rgb(34 197 94 / 0.5);
}

.border-green-600{
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / var(--tw-border-opacity));
}

.border-green-700{
  --tw-border-opacity: 1;
  border-color: rgb(21 128 61 / var(--tw-border-opacity));
}

.border-input{
  border-color: hsl(var(--input));
}

.border-neutral-600{
  --tw-border-opacity: 1;
  border-color: rgb(82 82 82 / var(--tw-border-opacity));
}

.border-neutral-700{
  --tw-border-opacity: 1;
  border-color: rgb(64 64 64 / var(--tw-border-opacity));
}

.border-neutral-800{
  --tw-border-opacity: 1;
  border-color: rgb(38 38 38 / var(--tw-border-opacity));
}

.border-primary{
  border-color: hsl(var(--primary));
}

.border-purple-200{
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity));
}

.border-purple-300{
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / var(--tw-border-opacity));
}

.border-purple-500{
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity));
}

.border-purple-500\/20{
  border-color: rgb(168 85 247 / 0.2);
}

.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity));
}

.border-red-400\/30{
  border-color: rgb(248 113 113 / 0.3);
}

.border-red-400\/35{
  border-color: rgb(248 113 113 / 0.35);
}

.border-red-500{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
}

.border-red-500\/20{
  border-color: rgb(239 68 68 / 0.2);
}

.border-red-500\/30{
  border-color: rgb(239 68 68 / 0.3);
}

.border-red-500\/40{
  border-color: rgb(239 68 68 / 0.4);
}

.border-red-500\/50{
  border-color: rgb(239 68 68 / 0.5);
}

.border-red-600{
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

.border-red-700{
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity));
}

.border-red-800{
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity));
}

.border-rose-400\/20{
  border-color: rgb(251 113 133 / 0.2);
}

.border-sidebar-border{
  border-color: hsl(var(--sidebar-border));
}

.border-teal-500\/20{
  border-color: rgb(20 184 166 / 0.2);
}

.border-transparent{
  border-color: transparent;
}

.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.border-white\/10{
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/15{
  border-color: rgb(255 255 255 / 0.15);
}

.border-white\/20{
  border-color: rgb(255 255 255 / 0.2);
}

.border-white\/45{
  border-color: rgb(255 255 255 / 0.45);
}

.border-white\/5{
  border-color: rgb(255 255 255 / 0.05);
}

.border-white\/80{
  border-color: rgb(255 255 255 / 0.8);
}

.border-white\/\[0\.06\]{
  border-color: rgb(255 255 255 / 0.06);
}

.border-yellow-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity));
}

.border-yellow-500{
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / var(--tw-border-opacity));
}

.border-yellow-500\/20{
  border-color: rgb(234 179 8 / 0.2);
}

.border-yellow-500\/30{
  border-color: rgb(234 179 8 / 0.3);
}

.border-yellow-600{
  --tw-border-opacity: 1;
  border-color: rgb(202 138 4 / var(--tw-border-opacity));
}

.border-zinc-700{
  --tw-border-opacity: 1;
  border-color: rgb(63 63 70 / var(--tw-border-opacity));
}

.border-l-\[color\:var\(--fx-accent\)\]{
  border-left-color: var(--fx-accent);
}

.border-l-gray-400{
  --tw-border-opacity: 1;
  border-left-color: rgb(156 163 175 / var(--tw-border-opacity));
}

.border-l-transparent{
  border-left-color: transparent;
}

.border-r-transparent{
  border-right-color: transparent;
}

.border-t-amber-300{
  --tw-border-opacity: 1;
  border-top-color: rgb(252 211 77 / var(--tw-border-opacity));
}

.border-t-blue-600{
  --tw-border-opacity: 1;
  border-top-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.border-t-transparent{
  border-top-color: transparent;
}

.border-t-white{
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.bg{
  background-color: hsl(var(--background));
}

.bg-\[\#00000099\]{
  background-color: #00000099;
}

.bg-\[\#000000cc\]{
  background-color: #000000cc;
}

.bg-\[\#0066CC\]{
  --tw-bg-opacity: 1;
  background-color: rgb(0 102 204 / var(--tw-bg-opacity));
}

.bg-\[\#0077DD\]{
  --tw-bg-opacity: 1;
  background-color: rgb(0 119 221 / var(--tw-bg-opacity));
}

.bg-\[\#00AA00\]{
  --tw-bg-opacity: 1;
  background-color: rgb(0 170 0 / var(--tw-bg-opacity));
}

.bg-\[\#00FF00\]{
  --tw-bg-opacity: 1;
  background-color: rgb(0 255 0 / var(--tw-bg-opacity));
}

.bg-\[\#00ff00\]{
  --tw-bg-opacity: 1;
  background-color: rgb(0 255 0 / var(--tw-bg-opacity));
}

.bg-\[\#08090b\]{
  --tw-bg-opacity: 1;
  background-color: rgb(8 9 11 / var(--tw-bg-opacity));
}

.bg-\[\#08090c\]{
  --tw-bg-opacity: 1;
  background-color: rgb(8 9 12 / var(--tw-bg-opacity));
}

.bg-\[\#081420\]{
  --tw-bg-opacity: 1;
  background-color: rgb(8 20 32 / var(--tw-bg-opacity));
}

.bg-\[\#09090b\]{
  --tw-bg-opacity: 1;
  background-color: rgb(9 9 11 / var(--tw-bg-opacity));
}

.bg-\[\#0B0C10\]{
  --tw-bg-opacity: 1;
  background-color: rgb(11 12 16 / var(--tw-bg-opacity));
}

.bg-\[\#0F2320\]{
  --tw-bg-opacity: 1;
  background-color: rgb(15 35 32 / var(--tw-bg-opacity));
}

.bg-\[\#0a0806\]{
  --tw-bg-opacity: 1;
  background-color: rgb(10 8 6 / var(--tw-bg-opacity));
}

.bg-\[\#0a0810\]{
  --tw-bg-opacity: 1;
  background-color: rgb(10 8 16 / var(--tw-bg-opacity));
}

.bg-\[\#0a0a0a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / var(--tw-bg-opacity));
}

.bg-\[\#0a0a0c\]{
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 12 / var(--tw-bg-opacity));
}

.bg-\[\#0a0b0e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(10 11 14 / var(--tw-bg-opacity));
}

.bg-\[\#0a1410\]{
  --tw-bg-opacity: 1;
  background-color: rgb(10 20 16 / var(--tw-bg-opacity));
}

.bg-\[\#0a1a2a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(10 26 42 / var(--tw-bg-opacity));
}

.bg-\[\#0b0b0b\]{
  --tw-bg-opacity: 1;
  background-color: rgb(11 11 11 / var(--tw-bg-opacity));
}

.bg-\[\#0b0b0b\]\/95{
  background-color: rgb(11 11 11 / 0.95);
}

.bg-\[\#0b0b0f\]{
  --tw-bg-opacity: 1;
  background-color: rgb(11 11 15 / var(--tw-bg-opacity));
}

.bg-\[\#0b0c0f\]{
  --tw-bg-opacity: 1;
  background-color: rgb(11 12 15 / var(--tw-bg-opacity));
}

.bg-\[\#0b0c10\]{
  --tw-bg-opacity: 1;
  background-color: rgb(11 12 16 / var(--tw-bg-opacity));
}

.bg-\[\#0b0d10\]{
  --tw-bg-opacity: 1;
  background-color: rgb(11 13 16 / var(--tw-bg-opacity));
}

.bg-\[\#0b1a33\]{
  --tw-bg-opacity: 1;
  background-color: rgb(11 26 51 / var(--tw-bg-opacity));
}

.bg-\[\#0b1b3a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 58 / var(--tw-bg-opacity));
}

.bg-\[\#0b2c17\]{
  --tw-bg-opacity: 1;
  background-color: rgb(11 44 23 / var(--tw-bg-opacity));
}

.bg-\[\#0b2c39\]{
  --tw-bg-opacity: 1;
  background-color: rgb(11 44 57 / var(--tw-bg-opacity));
}

.bg-\[\#0d0d0d\]{
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 13 / var(--tw-bg-opacity));
}

.bg-\[\#0d0d10\]{
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 16 / var(--tw-bg-opacity));
}

.bg-\[\#0d0e11\]{
  --tw-bg-opacity: 1;
  background-color: rgb(13 14 17 / var(--tw-bg-opacity));
}

.bg-\[\#0d0e12\]{
  --tw-bg-opacity: 1;
  background-color: rgb(13 14 18 / var(--tw-bg-opacity));
}

.bg-\[\#0d1a13\]{
  --tw-bg-opacity: 1;
  background-color: rgb(13 26 19 / var(--tw-bg-opacity));
}

.bg-\[\#0d2236\]{
  --tw-bg-opacity: 1;
  background-color: rgb(13 34 54 / var(--tw-bg-opacity));
}

.bg-\[\#0d2444\]{
  --tw-bg-opacity: 1;
  background-color: rgb(13 36 68 / var(--tw-bg-opacity));
}

.bg-\[\#0d2a1e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(13 42 30 / var(--tw-bg-opacity));
}

.bg-\[\#0e0d0b\]{
  --tw-bg-opacity: 1;
  background-color: rgb(14 13 11 / var(--tw-bg-opacity));
}

.bg-\[\#0e2418\]{
  --tw-bg-opacity: 1;
  background-color: rgb(14 36 24 / var(--tw-bg-opacity));
}

.bg-\[\#0f0f0f\]{
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 15 / var(--tw-bg-opacity));
}

.bg-\[\#0f0f11\]{
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 17 / var(--tw-bg-opacity));
}

.bg-\[\#0f0f14\]{
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 20 / var(--tw-bg-opacity));
}

.bg-\[\#0f1013\]{
  --tw-bg-opacity: 1;
  background-color: rgb(15 16 19 / var(--tw-bg-opacity));
}

.bg-\[\#0f1014\]{
  --tw-bg-opacity: 1;
  background-color: rgb(15 16 20 / var(--tw-bg-opacity));
}

.bg-\[\#0f264a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(15 38 74 / var(--tw-bg-opacity));
}

.bg-\[\#0f2c2a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(15 44 42 / var(--tw-bg-opacity));
}

.bg-\[\#100c07\]{
  --tw-bg-opacity: 1;
  background-color: rgb(16 12 7 / var(--tw-bg-opacity));
}

.bg-\[\#101010\]{
  --tw-bg-opacity: 1;
  background-color: rgb(16 16 16 / var(--tw-bg-opacity));
}

.bg-\[\#101016\]{
  --tw-bg-opacity: 1;
  background-color: rgb(16 16 22 / var(--tw-bg-opacity));
}

.bg-\[\#101114\]{
  --tw-bg-opacity: 1;
  background-color: rgb(16 17 20 / var(--tw-bg-opacity));
}

.bg-\[\#101114\]\/90{
  background-color: rgb(16 17 20 / 0.9);
}

.bg-\[\#101216\]{
  --tw-bg-opacity: 1;
  background-color: rgb(16 18 22 / var(--tw-bg-opacity));
}

.bg-\[\#101218\]{
  --tw-bg-opacity: 1;
  background-color: rgb(16 18 24 / var(--tw-bg-opacity));
}

.bg-\[\#101418\]{
  --tw-bg-opacity: 1;
  background-color: rgb(16 20 24 / var(--tw-bg-opacity));
}

.bg-\[\#10151d\]{
  --tw-bg-opacity: 1;
  background-color: rgb(16 21 29 / var(--tw-bg-opacity));
}

.bg-\[\#101c28\]{
  --tw-bg-opacity: 1;
  background-color: rgb(16 28 40 / var(--tw-bg-opacity));
}

.bg-\[\#11100d\]{
  --tw-bg-opacity: 1;
  background-color: rgb(17 16 13 / var(--tw-bg-opacity));
}

.bg-\[\#111111\]{
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 17 / var(--tw-bg-opacity));
}

.bg-\[\#111113\]{
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 19 / var(--tw-bg-opacity));
}

.bg-\[\#111114\]{
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 20 / var(--tw-bg-opacity));
}

.bg-\[\#111116\]{
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 22 / var(--tw-bg-opacity));
}

.bg-\[\#111318\]{
  --tw-bg-opacity: 1;
  background-color: rgb(17 19 24 / var(--tw-bg-opacity));
}

.bg-\[\#11302b\]{
  --tw-bg-opacity: 1;
  background-color: rgb(17 48 43 / var(--tw-bg-opacity));
}

.bg-\[\#120d08\]{
  --tw-bg-opacity: 1;
  background-color: rgb(18 13 8 / var(--tw-bg-opacity));
}

.bg-\[\#121212\]{
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 18 / var(--tw-bg-opacity));
}

.bg-\[\#122636\]{
  --tw-bg-opacity: 1;
  background-color: rgb(18 38 54 / var(--tw-bg-opacity));
}

.bg-\[\#122a24\]{
  --tw-bg-opacity: 1;
  background-color: rgb(18 42 36 / var(--tw-bg-opacity));
}

.bg-\[\#12452e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(18 69 46 / var(--tw-bg-opacity));
}

.bg-\[\#140e1c\]{
  --tw-bg-opacity: 1;
  background-color: rgb(20 14 28 / var(--tw-bg-opacity));
}

.bg-\[\#141210\]{
  --tw-bg-opacity: 1;
  background-color: rgb(20 18 16 / var(--tw-bg-opacity));
}

.bg-\[\#141414\]{
  --tw-bg-opacity: 1;
  background-color: rgb(20 20 20 / var(--tw-bg-opacity));
}

.bg-\[\#14161a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(20 22 26 / var(--tw-bg-opacity));
}

.bg-\[\#141620\]{
  --tw-bg-opacity: 1;
  background-color: rgb(20 22 32 / var(--tw-bg-opacity));
}

.bg-\[\#14171F\]{
  --tw-bg-opacity: 1;
  background-color: rgb(20 23 31 / var(--tw-bg-opacity));
}

.bg-\[\#14171F\]\/95{
  background-color: rgb(20 23 31 / 0.95);
}

.bg-\[\#14212a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(20 33 42 / var(--tw-bg-opacity));
}

.bg-\[\#14261a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(20 38 26 / var(--tw-bg-opacity));
}

.bg-\[\#14532d\]{
  --tw-bg-opacity: 1;
  background-color: rgb(20 83 45 / var(--tw-bg-opacity));
}

.bg-\[\#151515\]{
  --tw-bg-opacity: 1;
  background-color: rgb(21 21 21 / var(--tw-bg-opacity));
}

.bg-\[\#151517\]{
  --tw-bg-opacity: 1;
  background-color: rgb(21 21 23 / var(--tw-bg-opacity));
}

.bg-\[\#15151b\]{
  --tw-bg-opacity: 1;
  background-color: rgb(21 21 27 / var(--tw-bg-opacity));
}

.bg-\[\#15171d\]{
  --tw-bg-opacity: 1;
  background-color: rgb(21 23 29 / var(--tw-bg-opacity));
}

.bg-\[\#15376b\]{
  --tw-bg-opacity: 1;
  background-color: rgb(21 55 107 / var(--tw-bg-opacity));
}

.bg-\[\#1550a7\]{
  --tw-bg-opacity: 1;
  background-color: rgb(21 80 167 / var(--tw-bg-opacity));
}

.bg-\[\#161616\]{
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 22 / var(--tw-bg-opacity));
}

.bg-\[\#161A22\]{
  --tw-bg-opacity: 1;
  background-color: rgb(22 26 34 / var(--tw-bg-opacity));
}

.bg-\[\#161d28\]{
  --tw-bg-opacity: 1;
  background-color: rgb(22 29 40 / var(--tw-bg-opacity));
}

.bg-\[\#16202e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(22 32 46 / var(--tw-bg-opacity));
}

.bg-\[\#16212D\]{
  --tw-bg-opacity: 1;
  background-color: rgb(22 33 45 / var(--tw-bg-opacity));
}

.bg-\[\#1674eb\]{
  --tw-bg-opacity: 1;
  background-color: rgb(22 116 235 / var(--tw-bg-opacity));
}

.bg-\[\#17130a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(23 19 10 / var(--tw-bg-opacity));
}

.bg-\[\#171717\]{
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
}

.bg-\[\#172019\]{
  --tw-bg-opacity: 1;
  background-color: rgb(23 32 25 / var(--tw-bg-opacity));
}

.bg-\[\#17202c\]{
  --tw-bg-opacity: 1;
  background-color: rgb(23 32 44 / var(--tw-bg-opacity));
}

.bg-\[\#173a24\]{
  --tw-bg-opacity: 1;
  background-color: rgb(23 58 36 / var(--tw-bg-opacity));
}

.bg-\[\#181818\]{
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 24 / var(--tw-bg-opacity));
}

.bg-\[\#1871e4\]{
  --tw-bg-opacity: 1;
  background-color: rgb(24 113 228 / var(--tw-bg-opacity));
}

.bg-\[\#18d29f\]{
  --tw-bg-opacity: 1;
  background-color: rgb(24 210 159 / var(--tw-bg-opacity));
}

.bg-\[\#18d29f\]\/15{
  background-color: rgb(24 210 159 / 0.15);
}

.bg-\[\#18d29f\]\/\[0\.05\]{
  background-color: rgb(24 210 159 / 0.05);
}

.bg-\[\#18d29f\]\/\[0\.09\]{
  background-color: rgb(24 210 159 / 0.09);
}

.bg-\[\#1A1A1A\]{
  --tw-bg-opacity: 1;
  background-color: rgb(26 26 26 / var(--tw-bg-opacity));
}

.bg-\[\#1A1E28\]{
  --tw-bg-opacity: 1;
  background-color: rgb(26 30 40 / var(--tw-bg-opacity));
}

.bg-\[\#1B2110\]{
  --tw-bg-opacity: 1;
  background-color: rgb(27 33 16 / var(--tw-bg-opacity));
}

.bg-\[\#1F2530\]{
  --tw-bg-opacity: 1;
  background-color: rgb(31 37 48 / var(--tw-bg-opacity));
}

.bg-\[\#1a1625\]{
  --tw-bg-opacity: 1;
  background-color: rgb(26 22 37 / var(--tw-bg-opacity));
}

.bg-\[\#1a1a1a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(26 26 26 / var(--tw-bg-opacity));
}

.bg-\[\#1a1c22\]{
  --tw-bg-opacity: 1;
  background-color: rgb(26 28 34 / var(--tw-bg-opacity));
}

.bg-\[\#1a1f2e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(26 31 46 / var(--tw-bg-opacity));
}

.bg-\[\#1a2030\]{
  --tw-bg-opacity: 1;
  background-color: rgb(26 32 48 / var(--tw-bg-opacity));
}

.bg-\[\#1a2f4a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(26 47 74 / var(--tw-bg-opacity));
}

.bg-\[\#1a3a2a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(26 58 42 / var(--tw-bg-opacity));
}

.bg-\[\#1b2230\]{
  --tw-bg-opacity: 1;
  background-color: rgb(27 34 48 / var(--tw-bg-opacity));
}

.bg-\[\#1b2636\]{
  --tw-bg-opacity: 1;
  background-color: rgb(27 38 54 / var(--tw-bg-opacity));
}

.bg-\[\#1c0e0e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(28 14 14 / var(--tw-bg-opacity));
}

.bg-\[\#1c1408\]{
  --tw-bg-opacity: 1;
  background-color: rgb(28 20 8 / var(--tw-bg-opacity));
}

.bg-\[\#1c1428\]{
  --tw-bg-opacity: 1;
  background-color: rgb(28 20 40 / var(--tw-bg-opacity));
}

.bg-\[\#1c1c1c\]{
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 28 / var(--tw-bg-opacity));
}

.bg-\[\#1c1e24\]{
  --tw-bg-opacity: 1;
  background-color: rgb(28 30 36 / var(--tw-bg-opacity));
}

.bg-\[\#1d1b17\]{
  --tw-bg-opacity: 1;
  background-color: rgb(29 27 23 / var(--tw-bg-opacity));
}

.bg-\[\#1e1428\]{
  --tw-bg-opacity: 1;
  background-color: rgb(30 20 40 / var(--tw-bg-opacity));
}

.bg-\[\#1e1e1e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(30 30 30 / var(--tw-bg-opacity));
}

.bg-\[\#1e1e22\]{
  --tw-bg-opacity: 1;
  background-color: rgb(30 30 34 / var(--tw-bg-opacity));
}

.bg-\[\#1f2a1f\]{
  --tw-bg-opacity: 1;
  background-color: rgb(31 42 31 / var(--tw-bg-opacity));
}

.bg-\[\#20262F\]{
  --tw-bg-opacity: 1;
  background-color: rgb(32 38 47 / var(--tw-bg-opacity));
}

.bg-\[\#213a57\]{
  --tw-bg-opacity: 1;
  background-color: rgb(33 58 87 / var(--tw-bg-opacity));
}

.bg-\[\#221244\]{
  --tw-bg-opacity: 1;
  background-color: rgb(34 18 68 / var(--tw-bg-opacity));
}

.bg-\[\#222222\]{
  --tw-bg-opacity: 1;
  background-color: rgb(34 34 34 / var(--tw-bg-opacity));
}

.bg-\[\#22242b\]{
  --tw-bg-opacity: 1;
  background-color: rgb(34 36 43 / var(--tw-bg-opacity));
}

.bg-\[\#222\]{
  --tw-bg-opacity: 1;
  background-color: rgb(34 34 34 / var(--tw-bg-opacity));
}

.bg-\[\#22331f\]{
  --tw-bg-opacity: 1;
  background-color: rgb(34 51 31 / var(--tw-bg-opacity));
}

.bg-\[\#22c55e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}

.bg-\[\#232326\]{
  --tw-bg-opacity: 1;
  background-color: rgb(35 35 38 / var(--tw-bg-opacity));
}

.bg-\[\#240e0e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(36 14 14 / var(--tw-bg-opacity));
}

.bg-\[\#241a0e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(36 26 14 / var(--tw-bg-opacity));
}

.bg-\[\#241a30\]{
  --tw-bg-opacity: 1;
  background-color: rgb(36 26 48 / var(--tw-bg-opacity));
}

.bg-\[\#243A2D\]{
  --tw-bg-opacity: 1;
  background-color: rgb(36 58 45 / var(--tw-bg-opacity));
}

.bg-\[\#262626\]{
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}

.bg-\[\#283447\]{
  --tw-bg-opacity: 1;
  background-color: rgb(40 52 71 / var(--tw-bg-opacity));
}

.bg-\[\#2A2A2A\]{
  --tw-bg-opacity: 1;
  background-color: rgb(42 42 42 / var(--tw-bg-opacity));
}

.bg-\[\#2BE07A\]{
  --tw-bg-opacity: 1;
  background-color: rgb(43 224 122 / var(--tw-bg-opacity));
}

.bg-\[\#2D2D2D\]{
  --tw-bg-opacity: 1;
  background-color: rgb(45 45 45 / var(--tw-bg-opacity));
}

.bg-\[\#2a0f0d\]{
  --tw-bg-opacity: 1;
  background-color: rgb(42 15 13 / var(--tw-bg-opacity));
}

.bg-\[\#2a1214\]{
  --tw-bg-opacity: 1;
  background-color: rgb(42 18 20 / var(--tw-bg-opacity));
}

.bg-\[\#2a1218\]{
  --tw-bg-opacity: 1;
  background-color: rgb(42 18 24 / var(--tw-bg-opacity));
}

.bg-\[\#2a1219\]{
  --tw-bg-opacity: 1;
  background-color: rgb(42 18 25 / var(--tw-bg-opacity));
}

.bg-\[\#2a1a0e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(42 26 14 / var(--tw-bg-opacity));
}

.bg-\[\#2a1d0c\]{
  --tw-bg-opacity: 1;
  background-color: rgb(42 29 12 / var(--tw-bg-opacity));
}

.bg-\[\#2a230f\]{
  --tw-bg-opacity: 1;
  background-color: rgb(42 35 15 / var(--tw-bg-opacity));
}

.bg-\[\#2a2a2a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(42 42 42 / var(--tw-bg-opacity));
}

.bg-\[\#2b3a12\]{
  --tw-bg-opacity: 1;
  background-color: rgb(43 58 18 / var(--tw-bg-opacity));
}

.bg-\[\#2b3b55\]\/70{
  background-color: rgb(43 59 85 / 0.7);
}

.bg-\[\#2c1414\]{
  --tw-bg-opacity: 1;
  background-color: rgb(44 20 20 / var(--tw-bg-opacity));
}

.bg-\[\#2c151d\]{
  --tw-bg-opacity: 1;
  background-color: rgb(44 21 29 / var(--tw-bg-opacity));
}

.bg-\[\#2c1626\]{
  --tw-bg-opacity: 1;
  background-color: rgb(44 22 38 / var(--tw-bg-opacity));
}

.bg-\[\#2c2417\]{
  --tw-bg-opacity: 1;
  background-color: rgb(44 36 23 / var(--tw-bg-opacity));
}

.bg-\[\#2c2714\]{
  --tw-bg-opacity: 1;
  background-color: rgb(44 39 20 / var(--tw-bg-opacity));
}

.bg-\[\#2c2c2c\]{
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 44 / var(--tw-bg-opacity));
}

.bg-\[\#2d2d2d\]{
  --tw-bg-opacity: 1;
  background-color: rgb(45 45 45 / var(--tw-bg-opacity));
}

.bg-\[\#2e2a1d\]{
  --tw-bg-opacity: 1;
  background-color: rgb(46 42 29 / var(--tw-bg-opacity));
}

.bg-\[\#2f8a42\]{
  --tw-bg-opacity: 1;
  background-color: rgb(47 138 66 / var(--tw-bg-opacity));
}

.bg-\[\#33150f\]{
  --tw-bg-opacity: 1;
  background-color: rgb(51 21 15 / var(--tw-bg-opacity));
}

.bg-\[\#33260f\]{
  --tw-bg-opacity: 1;
  background-color: rgb(51 38 15 / var(--tw-bg-opacity));
}

.bg-\[\#333333\]{
  --tw-bg-opacity: 1;
  background-color: rgb(51 51 51 / var(--tw-bg-opacity));
}

.bg-\[\#333A33\]{
  --tw-bg-opacity: 1;
  background-color: rgb(51 58 51 / var(--tw-bg-opacity));
}

.bg-\[\#333\]{
  --tw-bg-opacity: 1;
  background-color: rgb(51 51 51 / var(--tw-bg-opacity));
}

.bg-\[\#334155\]{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
}

.bg-\[\#3A3333\]{
  --tw-bg-opacity: 1;
  background-color: rgb(58 51 51 / var(--tw-bg-opacity));
}

.bg-\[\#3D3D3D\]{
  --tw-bg-opacity: 1;
  background-color: rgb(61 61 61 / var(--tw-bg-opacity));
}

.bg-\[\#3a1420\]{
  --tw-bg-opacity: 1;
  background-color: rgb(58 20 32 / var(--tw-bg-opacity));
}

.bg-\[\#3a2020\]{
  --tw-bg-opacity: 1;
  background-color: rgb(58 32 32 / var(--tw-bg-opacity));
}

.bg-\[\#3a2f1c\]{
  --tw-bg-opacity: 1;
  background-color: rgb(58 47 28 / var(--tw-bg-opacity));
}

.bg-\[\#3a3126\]{
  --tw-bg-opacity: 1;
  background-color: rgb(58 49 38 / var(--tw-bg-opacity));
}

.bg-\[\#3a3a3a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(58 58 58 / var(--tw-bg-opacity));
}

.bg-\[\#3a3d45\]{
  --tw-bg-opacity: 1;
  background-color: rgb(58 61 69 / var(--tw-bg-opacity));
}

.bg-\[\#3b82f6\]{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.bg-\[\#3c5f3c\]{
  --tw-bg-opacity: 1;
  background-color: rgb(60 95 60 / var(--tw-bg-opacity));
}

.bg-\[\#3d4045\]{
  --tw-bg-opacity: 1;
  background-color: rgb(61 64 69 / var(--tw-bg-opacity));
}

.bg-\[\#43227a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(67 34 122 / var(--tw-bg-opacity));
}

.bg-\[\#444444\]{
  --tw-bg-opacity: 1;
  background-color: rgb(68 68 68 / var(--tw-bg-opacity));
}

.bg-\[\#49e06a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(73 224 106 / var(--tw-bg-opacity));
}

.bg-\[\#4A4A4A\]{
  --tw-bg-opacity: 1;
  background-color: rgb(74 74 74 / var(--tw-bg-opacity));
}

.bg-\[\#4CAF50\]{
  --tw-bg-opacity: 1;
  background-color: rgb(76 175 80 / var(--tw-bg-opacity));
}

.bg-\[\#4a1230\]{
  --tw-bg-opacity: 1;
  background-color: rgb(74 18 48 / var(--tw-bg-opacity));
}

.bg-\[\#4a1d63\]{
  --tw-bg-opacity: 1;
  background-color: rgb(74 29 99 / var(--tw-bg-opacity));
}

.bg-\[\#4a3a12\]{
  --tw-bg-opacity: 1;
  background-color: rgb(74 58 18 / var(--tw-bg-opacity));
}

.bg-\[\#4a4740\]{
  --tw-bg-opacity: 1;
  background-color: rgb(74 71 64 / var(--tw-bg-opacity));
}

.bg-\[\#4b435f\]{
  --tw-bg-opacity: 1;
  background-color: rgb(75 67 95 / var(--tw-bg-opacity));
}

.bg-\[\#547ca8\]{
  --tw-bg-opacity: 1;
  background-color: rgb(84 124 168 / var(--tw-bg-opacity));
}

.bg-\[\#555555\]{
  --tw-bg-opacity: 1;
  background-color: rgb(85 85 85 / var(--tw-bg-opacity));
}

.bg-\[\#5a6070\]{
  --tw-bg-opacity: 1;
  background-color: rgb(90 96 112 / var(--tw-bg-opacity));
}

.bg-\[\#60a5fa\]{
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}

.bg-\[\#65dc9a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(101 220 154 / var(--tw-bg-opacity));
}

.bg-\[\#663399\]{
  --tw-bg-opacity: 1;
  background-color: rgb(102 51 153 / var(--tw-bg-opacity));
}

.bg-\[\#666666\]{
  --tw-bg-opacity: 1;
  background-color: rgb(102 102 102 / var(--tw-bg-opacity));
}

.bg-\[\#67c3f0\]{
  --tw-bg-opacity: 1;
  background-color: rgb(103 195 240 / var(--tw-bg-opacity));
}

.bg-\[\#6b21a8\]{
  --tw-bg-opacity: 1;
  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
}

.bg-\[\#73ff86\]{
  --tw-bg-opacity: 1;
  background-color: rgb(115 255 134 / var(--tw-bg-opacity));
}

.bg-\[\#79b1ff\]{
  --tw-bg-opacity: 1;
  background-color: rgb(121 177 255 / var(--tw-bg-opacity));
}

.bg-\[\#7a2453\]{
  --tw-bg-opacity: 1;
  background-color: rgb(122 36 83 / var(--tw-bg-opacity));
}

.bg-\[\#7a2a2a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(122 42 42 / var(--tw-bg-opacity));
}

.bg-\[\#7a2b2b\]{
  --tw-bg-opacity: 1;
  background-color: rgb(122 43 43 / var(--tw-bg-opacity));
}

.bg-\[\#7db9ee\]{
  --tw-bg-opacity: 1;
  background-color: rgb(125 185 238 / var(--tw-bg-opacity));
}

.bg-\[\#8A2BE2\]{
  --tw-bg-opacity: 1;
  background-color: rgb(138 43 226 / var(--tw-bg-opacity));
}

.bg-\[\#8cc1f4\]{
  --tw-bg-opacity: 1;
  background-color: rgb(140 193 244 / var(--tw-bg-opacity));
}

.bg-\[\#9333ea\]{
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
}

.bg-\[\#9bd0ff\]{
  --tw-bg-opacity: 1;
  background-color: rgb(155 208 255 / var(--tw-bg-opacity));
}

.bg-\[\#9df0a4\]{
  --tw-bg-opacity: 1;
  background-color: rgb(157 240 164 / var(--tw-bg-opacity));
}

.bg-\[\#CC0066\]{
  --tw-bg-opacity: 1;
  background-color: rgb(204 0 102 / var(--tw-bg-opacity));
}

.bg-\[\#DD0077\]{
  --tw-bg-opacity: 1;
  background-color: rgb(221 0 119 / var(--tw-bg-opacity));
}

.bg-\[\#EDEFF5\]{
  --tw-bg-opacity: 1;
  background-color: rgb(237 239 245 / var(--tw-bg-opacity));
}

.bg-\[\#FF4D6D\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 77 109 / var(--tw-bg-opacity));
}

.bg-\[\#FF5500\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 85 0 / var(--tw-bg-opacity));
}

.bg-\[\#FF6611\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 102 17 / var(--tw-bg-opacity));
}

.bg-\[\#FF6B35\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 107 53 / var(--tw-bg-opacity));
}

.bg-\[\#FF6B6B\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 107 107 / var(--tw-bg-opacity));
}

.bg-\[\#FF9800\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 152 0 / var(--tw-bg-opacity));
}

.bg-\[\#FFA726\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 167 38 / var(--tw-bg-opacity));
}

.bg-\[\#a855f7\]{
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
}

.bg-\[\#a8cbff\]{
  --tw-bg-opacity: 1;
  background-color: rgb(168 203 255 / var(--tw-bg-opacity));
}

.bg-\[\#b8d7ff\]{
  --tw-bg-opacity: 1;
  background-color: rgb(184 215 255 / var(--tw-bg-opacity));
}

.bg-\[\#b9d3f7\]{
  --tw-bg-opacity: 1;
  background-color: rgb(185 211 247 / var(--tw-bg-opacity));
}

.bg-\[\#b9d8f6\]{
  --tw-bg-opacity: 1;
  background-color: rgb(185 216 246 / var(--tw-bg-opacity));
}

.bg-\[\#b9dcff\]{
  --tw-bg-opacity: 1;
  background-color: rgb(185 220 255 / var(--tw-bg-opacity));
}

.bg-\[\#bfd0ea\]{
  --tw-bg-opacity: 1;
  background-color: rgb(191 208 234 / var(--tw-bg-opacity));
}

.bg-\[\#c7e4ff\]{
  --tw-bg-opacity: 1;
  background-color: rgb(199 228 255 / var(--tw-bg-opacity));
}

.bg-\[\#c9f24d0f\]{
  background-color: #c9f24d0f;
}

.bg-\[\#cae5fb\]{
  --tw-bg-opacity: 1;
  background-color: rgb(202 229 251 / var(--tw-bg-opacity));
}

.bg-\[\#cfe7ff\]{
  --tw-bg-opacity: 1;
  background-color: rgb(207 231 255 / var(--tw-bg-opacity));
}

.bg-\[\#d1d5db\]{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}

.bg-\[\#d5e9fb\]{
  --tw-bg-opacity: 1;
  background-color: rgb(213 233 251 / var(--tw-bg-opacity));
}

.bg-\[\#d8ecff\]{
  --tw-bg-opacity: 1;
  background-color: rgb(216 236 255 / var(--tw-bg-opacity));
}

.bg-\[\#dcecff\]{
  --tw-bg-opacity: 1;
  background-color: rgb(220 236 255 / var(--tw-bg-opacity));
}

.bg-\[\#e6f0ff\]{
  --tw-bg-opacity: 1;
  background-color: rgb(230 240 255 / var(--tw-bg-opacity));
}

.bg-\[\#e8c48a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(232 196 138 / var(--tw-bg-opacity));
}

.bg-\[\#e8dcc0\]{
  --tw-bg-opacity: 1;
  background-color: rgb(232 220 192 / var(--tw-bg-opacity));
}

.bg-\[\#eeeeee\]{
  --tw-bg-opacity: 1;
  background-color: rgb(238 238 238 / var(--tw-bg-opacity));
}

.bg-\[\#ef4444\]{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

.bg-\[\#f3e8ff\]{
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
}

.bg-\[\#f5d76e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(245 215 110 / var(--tw-bg-opacity));
}

.bg-\[\#f5d76e\]\/\[0\.05\]{
  background-color: rgb(245 215 110 / 0.05);
}

.bg-\[\#f5d76e\]\/\[0\.06\]{
  background-color: rgb(245 215 110 / 0.06);
}

.bg-\[\#fef3c7\]{
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}

.bg-\[\#ff3b3b\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 59 59 / var(--tw-bg-opacity));
}

.bg-\[\#ff4da6\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 77 166 / var(--tw-bg-opacity));
}

.bg-\[\#ff5db1\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 93 177 / var(--tw-bg-opacity));
}

.bg-\[\#ff6b5f11\]{
  background-color: #ff6b5f11;
}

.bg-\[\#ffd166\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 209 102 / var(--tw-bg-opacity));
}

.bg-\[\#ffffff12\]{
  background-color: #ffffff12;
}

.bg-\[\#ffffff1a\]{
  background-color: #ffffff1a;
}

.bg-\[\#ffffff1c\]{
  background-color: #ffffff1c;
}

.bg-\[\#ffffff1f\]{
  background-color: #ffffff1f;
}

.bg-\[\#ffffff44\]{
  background-color: #ffffff44;
}

.bg-\[--color-bg\]{
  background-color: var(--color-bg);
}

.bg-\[color\:var\(--fx-field\)\]{
  background-color: var(--fx-field);
}

.bg-\[color\:var\(--fx-strip\)\]{
  background-color: var(--fx-strip);
}

.bg-accent{
  background-color: hsl(var(--accent));
}

.bg-amber-200{
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
}

.bg-amber-200\/70{
  background-color: rgb(253 230 138 / 0.7);
}

.bg-amber-400{
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity));
}

.bg-amber-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
}

.bg-amber-500\/10{
  background-color: rgb(245 158 11 / 0.1);
}

.bg-amber-500\/20{
  background-color: rgb(245 158 11 / 0.2);
}

.bg-amber-600{
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity));
}

.bg-background{
  background-color: hsl(var(--background));
}

.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-black\/20{
  background-color: rgb(0 0 0 / 0.2);
}

.bg-black\/25{
  background-color: rgb(0 0 0 / 0.25);
}

.bg-black\/30{
  background-color: rgb(0 0 0 / 0.3);
}

.bg-black\/40{
  background-color: rgb(0 0 0 / 0.4);
}

.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/55{
  background-color: rgb(0 0 0 / 0.55);
}

.bg-black\/60{
  background-color: rgb(0 0 0 / 0.6);
}

.bg-black\/65{
  background-color: rgb(0 0 0 / 0.65);
}

.bg-black\/70{
  background-color: rgb(0 0 0 / 0.7);
}

.bg-black\/75{
  background-color: rgb(0 0 0 / 0.75);
}

.bg-black\/80{
  background-color: rgb(0 0 0 / 0.8);
}

.bg-black\/85{
  background-color: rgb(0 0 0 / 0.85);
}

.bg-black\/90{
  background-color: rgb(0 0 0 / 0.9);
}

.bg-black\/95{
  background-color: rgb(0 0 0 / 0.95);
}

.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}

.bg-blue-400{
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}

.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}

.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.bg-blue-500\/20{
  background-color: rgb(59 130 246 / 0.2);
}

.bg-blue-500\/5{
  background-color: rgb(59 130 246 / 0.05);
}

.bg-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.bg-blue-600\/80{
  background-color: rgb(37 99 235 / 0.8);
}

.bg-blue-700{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

.bg-blue-900{
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
}

.bg-blue-900\/30{
  background-color: rgb(30 58 138 / 0.3);
}

.bg-border{
  background-color: hsl(var(--border));
}

.bg-card{
  background-color: hsl(var(--card));
}

.bg-cyan-400{
  --tw-bg-opacity: 1;
  background-color: rgb(34 211 238 / var(--tw-bg-opacity));
}

.bg-cyan-500{
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / var(--tw-bg-opacity));
}

.bg-cyan-500\/10{
  background-color: rgb(6 182 212 / 0.1);
}

.bg-destructive{
  background-color: hsl(var(--destructive));
}

.bg-emerald-400{
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity));
}

.bg-emerald-400\/15{
  background-color: rgb(52 211 153 / 0.15);
}

.bg-emerald-500{
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
}

.bg-emerald-500\/10{
  background-color: rgb(16 185 129 / 0.1);
}

.bg-emerald-500\/15{
  background-color: rgb(16 185 129 / 0.15);
}

.bg-emerald-600{
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
}

.bg-emerald-600\/40{
  background-color: rgb(5 150 105 / 0.4);
}

.bg-foreground{
  background-color: hsl(var(--foreground));
}

.bg-fuchsia-500{
  --tw-bg-opacity: 1;
  background-color: rgb(217 70 239 / var(--tw-bg-opacity));
}

.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.bg-gray-300{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}

.bg-gray-400{
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
}

.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.bg-gray-500{
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}

.bg-gray-600{
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}

.bg-gray-700{
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}

.bg-gray-700\/50{
  background-color: rgb(55 65 81 / 0.5);
}

.bg-gray-800{
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.bg-gray-800\/40{
  background-color: rgb(31 41 55 / 0.4);
}

.bg-gray-800\/50{
  background-color: rgb(31 41 55 / 0.5);
}

.bg-gray-800\/80{
  background-color: rgb(31 41 55 / 0.8);
}

.bg-gray-800\/90{
  background-color: rgb(31 41 55 / 0.9);
}

.bg-gray-900{
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

.bg-gray-900\/50{
  background-color: rgb(17 24 39 / 0.5);
}

.bg-gray-900\/60{
  background-color: rgb(17 24 39 / 0.6);
}

.bg-gray-900\/70{
  background-color: rgb(17 24 39 / 0.7);
}

.bg-gray-900\/80{
  background-color: rgb(17 24 39 / 0.8);
}

.bg-gray-900\/90{
  background-color: rgb(17 24 39 / 0.9);
}

.bg-gray-950{
  --tw-bg-opacity: 1;
  background-color: rgb(3 7 18 / var(--tw-bg-opacity));
}

.bg-gray-950\/40{
  background-color: rgb(3 7 18 / 0.4);
}

.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}

.bg-green-400{
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}

.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}

.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}

.bg-green-500\/10{
  background-color: rgb(34 197 94 / 0.1);
}

.bg-green-500\/20{
  background-color: rgb(34 197 94 / 0.2);
}

.bg-green-600{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}

.bg-green-700{
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}

.bg-green-800{
  --tw-bg-opacity: 1;
  background-color: rgb(22 101 52 / var(--tw-bg-opacity));
}

.bg-indigo-50{
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
}

.bg-indigo-500{
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
}

.bg-indigo-600{
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
}

.bg-indigo-700{
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
}

.bg-muted{
  background-color: hsl(var(--muted));
}

.bg-muted\/50{
  background-color: hsl(var(--muted) / 0.5);
}

.bg-neutral-500{
  --tw-bg-opacity: 1;
  background-color: rgb(115 115 115 / var(--tw-bg-opacity));
}

.bg-neutral-700{
  --tw-bg-opacity: 1;
  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
}

.bg-neutral-800{
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}

.bg-neutral-900{
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
}

.bg-neutral-950{
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / var(--tw-bg-opacity));
}

.bg-neutral-950\/80{
  background-color: rgb(10 10 10 / 0.8);
}

.bg-orange-500{
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
}

.bg-pink-400{
  --tw-bg-opacity: 1;
  background-color: rgb(244 114 182 / var(--tw-bg-opacity));
}

.bg-pink-500{
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity));
}

.bg-popover{
  background-color: hsl(var(--popover));
}

.bg-primary{
  background-color: hsl(var(--primary));
}

.bg-purple-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
}

.bg-purple-400{
  --tw-bg-opacity: 1;
  background-color: rgb(192 132 252 / var(--tw-bg-opacity));
}

.bg-purple-50{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity));
}

.bg-purple-500{
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
}

.bg-purple-500\/20{
  background-color: rgb(168 85 247 / 0.2);
}

.bg-purple-600{
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
}

.bg-purple-700{
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
}

.bg-purple-800{
  --tw-bg-opacity: 1;
  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
}

.bg-purple-900{
  --tw-bg-opacity: 1;
  background-color: rgb(88 28 135 / var(--tw-bg-opacity));
}

.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

.bg-red-400\/45{
  background-color: rgb(248 113 113 / 0.45);
}

.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}

.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

.bg-red-500\/10{
  background-color: rgb(239 68 68 / 0.1);
}

.bg-red-500\/20{
  background-color: rgb(239 68 68 / 0.2);
}

.bg-red-500\/\[0\.08\]{
  background-color: rgb(239 68 68 / 0.08);
}

.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}

.bg-red-600\/80{
  background-color: rgb(220 38 38 / 0.8);
}

.bg-red-600\/90{
  background-color: rgb(220 38 38 / 0.9);
}

.bg-red-700{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}

.bg-red-800{
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
}

.bg-red-900\/50{
  background-color: rgb(127 29 29 / 0.5);
}

.bg-red-950\/40{
  background-color: rgb(69 10 10 / 0.4);
}

.bg-red-950\/60{
  background-color: rgb(69 10 10 / 0.6);
}

.bg-rose-500\/10{
  background-color: rgb(244 63 94 / 0.1);
}

.bg-secondary{
  background-color: hsl(var(--secondary));
}

.bg-sidebar{
  background-color: hsl(var(--sidebar-background));
}

.bg-sidebar-border{
  background-color: hsl(var(--sidebar-border));
}

.bg-sky-500{
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / var(--tw-bg-opacity));
}

.bg-sky-600{
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity));
}

.bg-slate-950{
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / var(--tw-bg-opacity));
}

.bg-slate-950\/60{
  background-color: rgb(2 6 23 / 0.6);
}

.bg-slate-950\/95{
  background-color: rgb(2 6 23 / 0.95);
}

.bg-teal-500{
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
}

.bg-teal-700{
  --tw-bg-opacity: 1;
  background-color: rgb(15 118 110 / var(--tw-bg-opacity));
}

.bg-transparent{
  background-color: transparent;
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-white\/10{
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/15{
  background-color: rgb(255 255 255 / 0.15);
}

.bg-white\/20{
  background-color: rgb(255 255 255 / 0.2);
}

.bg-white\/25{
  background-color: rgb(255 255 255 / 0.25);
}

.bg-white\/5{
  background-color: rgb(255 255 255 / 0.05);
}

.bg-white\/85{
  background-color: rgb(255 255 255 / 0.85);
}

.bg-white\/90{
  background-color: rgb(255 255 255 / 0.9);
}

.bg-white\/\[\.07\]{
  background-color: rgb(255 255 255 / .07);
}

.bg-white\/\[0\.02\]{
  background-color: rgb(255 255 255 / 0.02);
}

.bg-white\/\[0\.03\]{
  background-color: rgb(255 255 255 / 0.03);
}

.bg-white\/\[0\.04\]{
  background-color: rgb(255 255 255 / 0.04);
}

.bg-white\/\[0\.05\]{
  background-color: rgb(255 255 255 / 0.05);
}

.bg-yellow-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
}

.bg-yellow-300\/30{
  background-color: rgb(253 224 71 / 0.3);
}

.bg-yellow-400{
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
}

.bg-yellow-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}

.bg-yellow-500{
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
}

.bg-yellow-500\/10{
  background-color: rgb(234 179 8 / 0.1);
}

.bg-yellow-500\/15{
  background-color: rgb(234 179 8 / 0.15);
}

.bg-yellow-500\/20{
  background-color: rgb(234 179 8 / 0.2);
}

.bg-yellow-600{
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
}

.bg-yellow-700{
  --tw-bg-opacity: 1;
  background-color: rgb(161 98 7 / var(--tw-bg-opacity));
}

.bg-yellow-950\/20{
  background-color: rgb(66 32 6 / 0.2);
}

.bg-zinc-900{
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / var(--tw-bg-opacity));
}

.bg-opacity-50{
  --tw-bg-opacity: 0.5;
}

.bg-opacity-75{
  --tw-bg-opacity: 0.75;
}

.bg-opacity-90{
  --tw-bg-opacity: 0.9;
}

.bg-\[linear-gradient\(135deg\2c \#202026\2c \#0b0b0f\)\]{
  background-image: linear-gradient(135deg,#202026,#0b0b0f);
}

.bg-\[linear-gradient\(180deg\2c \#09090b_0\%\2c \#0f1013_100\%\)\]{
  background-image: linear-gradient(180deg,#09090b 0%,#0f1013 100%);
}

.bg-\[linear-gradient\(180deg\2c \#9dc8f8_0\%\2c \#dceeff_50\%\2c \#8fbbea_100\%\)\]{
  background-image: linear-gradient(180deg,#9dc8f8 0%,#dceeff 50%,#8fbbea 100%);
}

.bg-\[linear-gradient\(180deg\2c rgba\(12\2c 12\2c 14\2c 0\.4\)\2c rgba\(9\2c 9\2c 11\2c 0\.92\)\)\2c radial-gradient\(circle_at_top_left\2c rgba\(255\2c 255\2c 255\2c 0\.08\)\2c transparent_26\%\)\]{
  background-image: linear-gradient(180deg,rgba(12,12,14,0.4),rgba(9,9,11,0.92)),radial-gradient(circle at top left,rgba(255,255,255,0.08),transparent 26%);
}

.bg-\[radial-gradient\(circle\2c \#f4c26e_0\%\2c \#f4c26e_9\%\2c \#15110b_10\%\2c \#15110b_42\%\2c \#302816_43\%\2c \#302816_56\%\2c \#090806_57\%\)\]{
  background-image: radial-gradient(circle,#f4c26e 0%,#f4c26e 9%,#15110b 10%,#15110b 42%,#302816 43%,#302816 56%,#090806 57%);
}

.bg-\[radial-gradient\(circle_at_50\%_35\%\2c rgba\(245\2c 186\2c 91\2c 0\.18\)\2c rgba\(0\2c 0\2c 0\2c 0\.96\)_64\%\)\]{
  background-image: radial-gradient(circle at 50% 35%,rgba(245,186,91,0.18),rgba(0,0,0,0.96) 64%);
}

.bg-\[radial-gradient\(circle_at_top\2c rgba\(99\2c 102\2c 241\2c 0\.28\)\2c transparent_32\%\)\2c radial-gradient\(circle_at_bottom_right\2c rgba\(236\2c 72\2c 153\2c 0\.18\)\2c transparent_28\%\)\]{
  background-image: radial-gradient(circle at top,rgba(99,102,241,0.28),transparent 32%),radial-gradient(circle at bottom right,rgba(236,72,153,0.18),transparent 28%);
}

.bg-gradient-to-b{
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t{
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.bg-gradient-to-tr{
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}

.from-\[\#101016\]{
  --tw-gradient-from: #101016 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 16 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#2a4a6a\]{
  --tw-gradient-from: #2a4a6a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(42 74 106 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#3b82f6\]{
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#4ade80\]{
  --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-500\/30{
  --tw-gradient-from: rgb(245 158 11 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-700{
  --tw-gradient-from: #b45309 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(180 83 9 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black\/0{
  --tw-gradient-from: rgb(0 0 0 / 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-300{
  --tw-gradient-from: #93c5fd var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 197 253 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-400{
  --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500{
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500\/20{
  --tw-gradient-from: rgb(59 130 246 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500\/30{
  --tw-gradient-from: rgb(59 130 246 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-600{
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-900{
  --tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-900\/10{
  --tw-gradient-from: rgb(30 58 138 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-cyan-400{
  --tw-gradient-from: #22d3ee var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-400\/5{
  --tw-gradient-from: rgb(52 211 153 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-500{
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-500\/10{
  --tw-gradient-from: rgb(16 185 129 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-500\/20{
  --tw-gradient-from: rgb(16 185 129 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-500\/30{
  --tw-gradient-from: rgb(16 185 129 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-fuchsia-500\/10{
  --tw-gradient-from: rgb(217 70 239 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-300{
  --tw-gradient-from: #d1d5db var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(209 213 219 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-700{
  --tw-gradient-from: #374151 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-800{
  --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-900{
  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-400{
  --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-500{
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-500\/20{
  --tw-gradient-from: rgb(34 197 94 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-500\/30{
  --tw-gradient-from: rgb(34 197 94 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-600{
  --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-700{
  --tw-gradient-from: #15803d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(21 128 61 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-500\/40{
  --tw-gradient-from: rgb(99 102 241 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-400{
  --tw-gradient-from: #f472b6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-500\/20{
  --tw-gradient-from: rgb(236 72 153 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-500\/30{
  --tw-gradient-from: rgb(236 72 153 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-300{
  --tw-gradient-from: #d8b4fe var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(216 180 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-500{
  --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-600{
  --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-400{
  --tw-gradient-from: #f87171 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-500\/20{
  --tw-gradient-from: rgb(239 68 68 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-600{
  --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-700{
  --tw-gradient-from: #b91c1c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(185 28 28 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-900{
  --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white\/15{
  --tw-gradient-from: rgb(255 255 255 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white\/\[0\.03\]{
  --tw-gradient-from: rgb(255 255 255 / 0.03) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-yellow-400{
  --tw-gradient-from: #facc15 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-yellow-500{
  --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-yellow-500\/20{
  --tw-gradient-from: rgb(234 179 8 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-yellow-500\/30{
  --tw-gradient-from: rgb(234 179 8 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-\[\#ffd479\]{
  --tw-gradient-to: rgb(255 212 121 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ffd479 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-black\/40{
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-blue-500{
  --tw-gradient-to: rgb(59 130 246 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #3b82f6 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-emerald-900\/20{
  --tw-gradient-to: rgb(6 78 59 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(6 78 59 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-gray-800{
  --tw-gradient-to: rgb(31 41 55 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-purple-900{
  --tw-gradient-to: rgb(88 28 135 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #581c87 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-transparent{
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white\/\[0\.015\]{
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.015) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-\[\#60a5fa\]{
  --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
}

.to-\[\#7cc5ff\]{
  --tw-gradient-to: #7cc5ff var(--tw-gradient-to-position);
}

.to-\[\#ff7a7a\]{
  --tw-gradient-to: #ff7a7a var(--tw-gradient-to-position);
}

.to-amber-400\/5{
  --tw-gradient-to: rgb(251 191 36 / 0.05) var(--tw-gradient-to-position);
}

.to-amber-950{
  --tw-gradient-to: #451a03 var(--tw-gradient-to-position);
}

.to-black{
  --tw-gradient-to: #000 var(--tw-gradient-to-position);
}

.to-black\/90{
  --tw-gradient-to: rgb(0 0 0 / 0.9) var(--tw-gradient-to-position);
}

.to-blue-500{
  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}

.to-blue-600{
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.to-blue-600\/5{
  --tw-gradient-to: rgb(37 99 235 / 0.05) var(--tw-gradient-to-position);
}

.to-blue-800{
  --tw-gradient-to: #1e40af var(--tw-gradient-to-position);
}

.to-blue-900\/5{
  --tw-gradient-to: rgb(30 58 138 / 0.05) var(--tw-gradient-to-position);
}

.to-cyan-500\/10{
  --tw-gradient-to: rgb(6 182 212 / 0.1) var(--tw-gradient-to-position);
}

.to-emerald-400{
  --tw-gradient-to: #34d399 var(--tw-gradient-to-position);
}

.to-emerald-600{
  --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}

.to-emerald-600\/10{
  --tw-gradient-to: rgb(5 150 105 / 0.1) var(--tw-gradient-to-position);
}

.to-fuchsia-500{
  --tw-gradient-to: #d946ef var(--tw-gradient-to-position);
}

.to-fuchsia-500\/20{
  --tw-gradient-to: rgb(217 70 239 / 0.2) var(--tw-gradient-to-position);
}

.to-gray-400{
  --tw-gradient-to: #9ca3af var(--tw-gradient-to-position);
}

.to-gray-800{
  --tw-gradient-to: #1f2937 var(--tw-gradient-to-position);
}

.to-gray-900{
  --tw-gradient-to: #111827 var(--tw-gradient-to-position);
}

.to-green-600\/5{
  --tw-gradient-to: rgb(22 163 74 / 0.05) var(--tw-gradient-to-position);
}

.to-green-700{
  --tw-gradient-to: #15803d var(--tw-gradient-to-position);
}

.to-green-800{
  --tw-gradient-to: #166534 var(--tw-gradient-to-position);
}

.to-green-900{
  --tw-gradient-to: #14532d var(--tw-gradient-to-position);
}

.to-indigo-900{
  --tw-gradient-to: #312e81 var(--tw-gradient-to-position);
}

.to-orange-600{
  --tw-gradient-to: #ea580c var(--tw-gradient-to-position);
}

.to-pink-500{
  --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
}

.to-pink-600\/5{
  --tw-gradient-to: rgb(219 39 119 / 0.05) var(--tw-gradient-to-position);
}

.to-purple-500{
  --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
}

.to-purple-500\/10{
  --tw-gradient-to: rgb(168 85 247 / 0.1) var(--tw-gradient-to-position);
}

.to-purple-600{
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.to-purple-700{
  --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
}

.to-purple-800{
  --tw-gradient-to: #6b21a8 var(--tw-gradient-to-position);
}

.to-red-600{
  --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
}

.to-red-600\/5{
  --tw-gradient-to: rgb(220 38 38 / 0.05) var(--tw-gradient-to-position);
}

.to-red-700{
  --tw-gradient-to: #b91c1c var(--tw-gradient-to-position);
}

.to-red-800{
  --tw-gradient-to: #991b1b var(--tw-gradient-to-position);
}

.to-red-900{
  --tw-gradient-to: #7f1d1d var(--tw-gradient-to-position);
}

.to-rose-500\/10{
  --tw-gradient-to: rgb(244 63 94 / 0.1) var(--tw-gradient-to-position);
}

.to-sky-500\/10{
  --tw-gradient-to: rgb(14 165 233 / 0.1) var(--tw-gradient-to-position);
}

.to-slate-900{
  --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
}

.to-stone-500\/10{
  --tw-gradient-to: rgb(120 113 108 / 0.1) var(--tw-gradient-to-position);
}

.to-teal-500\/10{
  --tw-gradient-to: rgb(20 184 166 / 0.1) var(--tw-gradient-to-position);
}

.to-transparent{
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.to-white\/\[0\.035\]{
  --tw-gradient-to: rgb(255 255 255 / 0.035) var(--tw-gradient-to-position);
}

.to-yellow-600{
  --tw-gradient-to: #ca8a04 var(--tw-gradient-to-position);
}

.to-yellow-600\/5{
  --tw-gradient-to: rgb(202 138 4 / 0.05) var(--tw-gradient-to-position);
}

.bg-cover{
  background-size: cover;
}

.bg-clip-text{
  -webkit-background-clip: text;
          background-clip: text;
}

.bg-center{
  background-position: center;
}

.fill-current{
  fill: currentColor;
}

.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.object-\[50\%_68\%\]{
  -o-object-position: 50% 68%;
     object-position: 50% 68%;
}

.p-0{
  padding: 0px;
}

.p-0\.5{
  padding: 0.125rem;
}

.p-1{
  padding: 0.25rem;
}

.p-1\.5{
  padding: 0.375rem;
}

.p-10{
  padding: 2.5rem;
}

.p-2{
  padding: 0.5rem;
}

.p-2\.5{
  padding: 0.625rem;
}

.p-3{
  padding: 0.75rem;
}

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-6{
  padding: 1.5rem;
}

.p-8{
  padding: 2rem;
}

.p-\[1\.5px\]{
  padding: 1.5px;
}

.p-\[1px\]{
  padding: 1px;
}

.p-\[2px\]{
  padding: 2px;
}

.p-\[3px\]{
  padding: 3px;
}

.p-\[4px\]{
  padding: 4px;
}

.p-\[5px\]{
  padding: 5px;
}

.px-0{
  padding-left: 0px;
  padding-right: 0px;
}

.px-0\.5{
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-12{
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-16{
  padding-left: 4rem;
  padding-right: 4rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-9{
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}

.px-\[10px\]{
  padding-left: 10px;
  padding-right: 10px;
}

.px-\[11px\]{
  padding-left: 11px;
  padding-right: 11px;
}

.px-\[12px\]{
  padding-left: 12px;
  padding-right: 12px;
}

.px-\[13px\]{
  padding-left: 13px;
  padding-right: 13px;
}

.px-\[14px\]{
  padding-left: 14px;
  padding-right: 14px;
}

.px-\[16px\]{
  padding-left: 16px;
  padding-right: 16px;
}

.px-\[1px\]{
  padding-left: 1px;
  padding-right: 1px;
}

.px-\[20px\]{
  padding-left: 20px;
  padding-right: 20px;
}

.px-\[26px\]{
  padding-left: 26px;
  padding-right: 26px;
}

.px-\[27px\]{
  padding-left: 27px;
  padding-right: 27px;
}

.px-\[2px\]{
  padding-left: 2px;
  padding-right: 2px;
}

.px-\[3px\]{
  padding-left: 3px;
  padding-right: 3px;
}

.px-\[42px\]{
  padding-left: 42px;
  padding-right: 42px;
}

.px-\[4px\]{
  padding-left: 4px;
  padding-right: 4px;
}

.px-\[5px\]{
  padding-left: 5px;
  padding-right: 5px;
}

.px-\[6px\]{
  padding-left: 6px;
  padding-right: 6px;
}

.px-\[7px\]{
  padding-left: 7px;
  padding-right: 7px;
}

.px-\[8px\]{
  padding-left: 8px;
  padding-right: 8px;
}

.px-\[9px\]{
  padding-left: 9px;
  padding-right: 9px;
}

.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-14{
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[10px\]{
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-\[1px\]{
  padding-top: 1px;
  padding-bottom: 1px;
}

.py-\[2px\]{
  padding-top: 2px;
  padding-bottom: 2px;
}

.py-\[3px\]{
  padding-top: 3px;
  padding-bottom: 3px;
}

.py-\[4px\]{
  padding-top: 4px;
  padding-bottom: 4px;
}

.py-\[5px\]{
  padding-top: 5px;
  padding-bottom: 5px;
}

.py-\[6px\]{
  padding-top: 6px;
  padding-bottom: 6px;
}

.py-\[7px\]{
  padding-top: 7px;
  padding-bottom: 7px;
}

.py-\[8px\]{
  padding-top: 8px;
  padding-bottom: 8px;
}

.py-\[9px\]{
  padding-top: 9px;
  padding-bottom: 9px;
}

.py-px{
  padding-top: 1px;
  padding-bottom: 1px;
}

.pb-0{
  padding-bottom: 0px;
}

.pb-0\.5{
  padding-bottom: 0.125rem;
}

.pb-1{
  padding-bottom: 0.25rem;
}

.pb-1\.5{
  padding-bottom: 0.375rem;
}

.pb-10{
  padding-bottom: 2.5rem;
}

.pb-16{
  padding-bottom: 4rem;
}

.pb-2{
  padding-bottom: 0.5rem;
}

.pb-20{
  padding-bottom: 5rem;
}

.pb-24{
  padding-bottom: 6rem;
}

.pb-28{
  padding-bottom: 7rem;
}

.pb-3{
  padding-bottom: 0.75rem;
}

.pb-32{
  padding-bottom: 8rem;
}

.pb-4{
  padding-bottom: 1rem;
}

.pb-6{
  padding-bottom: 1.5rem;
}

.pb-\[10px\]{
  padding-bottom: 10px;
}

.pb-\[13px\]{
  padding-bottom: 13px;
}

.pb-\[16px\]{
  padding-bottom: 16px;
}

.pb-\[24px\]{
  padding-bottom: 24px;
}

.pb-\[2px\]{
  padding-bottom: 2px;
}

.pb-\[3px\]{
  padding-bottom: 3px;
}

.pb-\[4px\]{
  padding-bottom: 4px;
}

.pb-\[5px\]{
  padding-bottom: 5px;
}

.pb-\[6px\]{
  padding-bottom: 6px;
}

.pb-\[7px\]{
  padding-bottom: 7px;
}

.pb-\[9px\]{
  padding-bottom: 9px;
}

.pl-1{
  padding-left: 0.25rem;
}

.pl-10{
  padding-left: 2.5rem;
}

.pl-11{
  padding-left: 2.75rem;
}

.pl-2{
  padding-left: 0.5rem;
}

.pl-2\.5{
  padding-left: 0.625rem;
}

.pl-3{
  padding-left: 0.75rem;
}

.pl-4{
  padding-left: 1rem;
}

.pl-7{
  padding-left: 1.75rem;
}

.pl-8{
  padding-left: 2rem;
}

.pl-9{
  padding-left: 2.25rem;
}

.pl-\[10px\]{
  padding-left: 10px;
}

.pl-\[16px\]{
  padding-left: 16px;
}

.pl-\[22px\]{
  padding-left: 22px;
}

.pl-\[2px\]{
  padding-left: 2px;
}

.pl-\[32\%\]{
  padding-left: 32%;
}

.pl-\[3px\]{
  padding-left: 3px;
}

.pl-\[41px\]{
  padding-left: 41px;
}

.pl-\[4px\]{
  padding-left: 4px;
}

.pl-\[6px\]{
  padding-left: 6px;
}

.pl-\[8px\]{
  padding-left: 8px;
}

.pl-\[9px\]{
  padding-left: 9px;
}

.pr-0{
  padding-right: 0px;
}

.pr-0\.5{
  padding-right: 0.125rem;
}

.pr-1{
  padding-right: 0.25rem;
}

.pr-1\.5{
  padding-right: 0.375rem;
}

.pr-10{
  padding-right: 2.5rem;
}

.pr-2{
  padding-right: 0.5rem;
}

.pr-2\.5{
  padding-right: 0.625rem;
}

.pr-24{
  padding-right: 6rem;
}

.pr-3{
  padding-right: 0.75rem;
}

.pr-4{
  padding-right: 1rem;
}

.pr-5{
  padding-right: 1.25rem;
}

.pr-8{
  padding-right: 2rem;
}

.pr-\[10px\]{
  padding-right: 10px;
}

.pr-\[16px\]{
  padding-right: 16px;
}

.pr-\[1px\]{
  padding-right: 1px;
}

.pr-\[22px\]{
  padding-right: 22px;
}

.pr-\[24px\]{
  padding-right: 24px;
}

.pr-\[2px\]{
  padding-right: 2px;
}

.pr-\[4px\]{
  padding-right: 4px;
}

.pr-\[58px\]{
  padding-right: 58px;
}

.pr-\[5px\]{
  padding-right: 5px;
}

.pr-\[8px\]{
  padding-right: 8px;
}

.pr-\[9px\]{
  padding-right: 9px;
}

.pt-0{
  padding-top: 0px;
}

.pt-0\.5{
  padding-top: 0.125rem;
}

.pt-1{
  padding-top: 0.25rem;
}

.pt-1\.5{
  padding-top: 0.375rem;
}

.pt-2{
  padding-top: 0.5rem;
}

.pt-3{
  padding-top: 0.75rem;
}

.pt-36{
  padding-top: 9rem;
}

.pt-4{
  padding-top: 1rem;
}

.pt-6{
  padding-top: 1.5rem;
}

.pt-7{
  padding-top: 1.75rem;
}

.pt-8{
  padding-top: 2rem;
}

.pt-\[10px\]{
  padding-top: 10px;
}

.pt-\[14px\]{
  padding-top: 14px;
}

.pt-\[16px\]{
  padding-top: 16px;
}

.pt-\[18px\]{
  padding-top: 18px;
}

.pt-\[1px\]{
  padding-top: 1px;
}

.pt-\[24px\]{
  padding-top: 24px;
}

.pt-\[2px\]{
  padding-top: 2px;
}

.pt-\[3px\]{
  padding-top: 3px;
}

.pt-\[4px\]{
  padding-top: 4px;
}

.pt-\[5px\]{
  padding-top: 5px;
}

.pt-\[6px\]{
  padding-top: 6px;
}

.pt-\[7px\]{
  padding-top: 7px;
}

.pt-\[8px\]{
  padding-top: 8px;
}

.pt-\[9px\]{
  padding-top: 9px;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.text-right{
  text-align: right;
}

.align-middle{
  vertical-align: middle;
}

.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans{
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-serif{
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl{
  font-size: 3rem;
  line-height: 1;
}

.text-8xl{
  font-size: 6rem;
  line-height: 1;
}

.text-\[0\.8rem\]{
  font-size: 0.8rem;
}

.text-\[0\.95rem\]{
  font-size: 0.95rem;
}

.text-\[1\.95rem\]{
  font-size: 1.95rem;
}

.text-\[10\.5px\]{
  font-size: 10.5px;
}

.text-\[10px\]{
  font-size: 10px;
}

.text-\[11\.5px\]{
  font-size: 11.5px;
}

.text-\[11px\]{
  font-size: 11px;
}

.text-\[12\.5px\]{
  font-size: 12.5px;
}

.text-\[12px\]{
  font-size: 12px;
}

.text-\[13px\]{
  font-size: 13px;
}

.text-\[14px\]{
  font-size: 14px;
}

.text-\[15px\]{
  font-size: 15px;
}

.text-\[16px\]{
  font-size: 16px;
}

.text-\[17px\]{
  font-size: 17px;
}

.text-\[18px\]{
  font-size: 18px;
}

.text-\[19px\]{
  font-size: 19px;
}

.text-\[20px\]{
  font-size: 20px;
}

.text-\[21px\]{
  font-size: 21px;
}

.text-\[22px\]{
  font-size: 22px;
}

.text-\[27px\]{
  font-size: 27px;
}

.text-\[5\.5px\]{
  font-size: 5.5px;
}

.text-\[52px\]{
  font-size: 52px;
}

.text-\[6\.5px\]{
  font-size: 6.5px;
}

.text-\[6px\]{
  font-size: 6px;
}

.text-\[7px\]{
  font-size: 7px;
}

.text-\[8\.5px\]{
  font-size: 8.5px;
}

.text-\[8px\]{
  font-size: 8px;
}

.text-\[9\.5px\]{
  font-size: 9.5px;
}

.text-\[9px\]{
  font-size: 9px;
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-black{
  font-weight: 900;
}

.font-bold{
  font-weight: 700;
}

.font-extrabold{
  font-weight: 800;
}

.font-light{
  font-weight: 300;
}

.font-medium{
  font-weight: 500;
}

.font-normal{
  font-weight: 400;
}

.font-semibold{
  font-weight: 600;
}

.uppercase{
  text-transform: uppercase;
}

.lowercase{
  text-transform: lowercase;
}

.capitalize{
  text-transform: capitalize;
}

.normal-case{
  text-transform: none;
}

.italic{
  font-style: italic;
}

.not-italic{
  font-style: normal;
}

.ordinal{
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.slashed-zero{
  --tw-slashed-zero: slashed-zero;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-5{
  line-height: 1.25rem;
}

.leading-6{
  line-height: 1.5rem;
}

.leading-7{
  line-height: 1.75rem;
}

.leading-\[0\.95\]{
  line-height: 0.95;
}

.leading-\[1\.02\]{
  line-height: 1.02;
}

.leading-\[1\.15\]{
  line-height: 1.15;
}

.leading-\[1\.25\]{
  line-height: 1.25;
}

.leading-\[1\.2\]{
  line-height: 1.2;
}

.leading-\[1\.35\]{
  line-height: 1.35;
}

.leading-\[1\.45\]{
  line-height: 1.45;
}

.leading-\[1\.4\]{
  line-height: 1.4;
}

.leading-\[1\.5\]{
  line-height: 1.5;
}

.leading-\[11px\]{
  line-height: 11px;
}

.leading-\[12px\]{
  line-height: 12px;
}

.leading-\[13px\]{
  line-height: 13px;
}

.leading-\[14px\]{
  line-height: 14px;
}

.leading-\[15px\]{
  line-height: 15px;
}

.leading-\[16px\]{
  line-height: 16px;
}

.leading-\[17px\]{
  line-height: 17px;
}

.leading-\[20px\]{
  line-height: 20px;
}

.leading-\[21px\]{
  line-height: 21px;
}

.leading-\[23px\]{
  line-height: 23px;
}

.leading-\[24px\]{
  line-height: 24px;
}

.leading-\[26px\]{
  line-height: 26px;
}

.leading-\[27px\]{
  line-height: 27px;
}

.leading-\[7px\]{
  line-height: 7px;
}

.leading-\[8px\]{
  line-height: 8px;
}

.leading-\[9px\]{
  line-height: 9px;
}

.leading-none{
  line-height: 1;
}

.leading-relaxed{
  line-height: 1.625;
}

.leading-snug{
  line-height: 1.375;
}

.leading-tight{
  line-height: 1.25;
}

.tracking-\[-0\.01em\]{
  letter-spacing: -0.01em;
}

.tracking-\[-0\.02em\]{
  letter-spacing: -0.02em;
}

.tracking-\[-0\.045em\]{
  letter-spacing: -0.045em;
}

.tracking-\[-0\.04em\]{
  letter-spacing: -0.04em;
}

.tracking-\[-0\.05em\]{
  letter-spacing: -0.05em;
}

.tracking-\[\.18em\]{
  letter-spacing: .18em;
}

.tracking-\[\.22em\]{
  letter-spacing: .22em;
}

.tracking-\[\.2em\]{
  letter-spacing: .2em;
}

.tracking-\[0\.01em\]{
  letter-spacing: 0.01em;
}

.tracking-\[0\.02em\]{
  letter-spacing: 0.02em;
}

.tracking-\[0\.03em\]{
  letter-spacing: 0.03em;
}

.tracking-\[0\.04em\]{
  letter-spacing: 0.04em;
}

.tracking-\[0\.05em\]{
  letter-spacing: 0.05em;
}

.tracking-\[0\.06em\]{
  letter-spacing: 0.06em;
}

.tracking-\[0\.07em\]{
  letter-spacing: 0.07em;
}

.tracking-\[0\.08em\]{
  letter-spacing: 0.08em;
}

.tracking-\[0\.09em\]{
  letter-spacing: 0.09em;
}

.tracking-\[0\.10em\]{
  letter-spacing: 0.10em;
}

.tracking-\[0\.12em\]{
  letter-spacing: 0.12em;
}

.tracking-\[0\.13em\]{
  letter-spacing: 0.13em;
}

.tracking-\[0\.14em\]{
  letter-spacing: 0.14em;
}

.tracking-\[0\.16em\]{
  letter-spacing: 0.16em;
}

.tracking-\[0\.18em\]{
  letter-spacing: 0.18em;
}

.tracking-\[0\.1em\]{
  letter-spacing: 0.1em;
}

.tracking-\[0\.20em\]{
  letter-spacing: 0.20em;
}

.tracking-\[0\.22em\]{
  letter-spacing: 0.22em;
}

.tracking-\[0\.24em\]{
  letter-spacing: 0.24em;
}

.tracking-\[0\.25em\]{
  letter-spacing: 0.25em;
}

.tracking-\[0\.26em\]{
  letter-spacing: 0.26em;
}

.tracking-\[0\.28em\]{
  letter-spacing: 0.28em;
}

.tracking-\[0\.2em\]{
  letter-spacing: 0.2em;
}

.tracking-\[0\.32em\]{
  letter-spacing: 0.32em;
}

.tracking-\[0\.34em\]{
  letter-spacing: 0.34em;
}

.tracking-\[0\.35em\]{
  letter-spacing: 0.35em;
}

.tracking-\[0\.3em\]{
  letter-spacing: 0.3em;
}

.tracking-\[0\.42em\]{
  letter-spacing: 0.42em;
}

.tracking-\[0\.4em\]{
  letter-spacing: 0.4em;
}

.tracking-\[0\]{
  letter-spacing: 0;
}

.tracking-normal{
  letter-spacing: 0em;
}

.tracking-tight{
  letter-spacing: -0.025em;
}

.tracking-tighter{
  letter-spacing: -0.05em;
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.tracking-wider{
  letter-spacing: 0.05em;
}

.tracking-widest{
  letter-spacing: 0.1em;
}

.text-\[\#00A3FF\]{
  --tw-text-opacity: 1;
  color: rgb(0 163 255 / var(--tw-text-opacity));
}

.text-\[\#00FF00\]{
  --tw-text-opacity: 1;
  color: rgb(0 255 0 / var(--tw-text-opacity));
}

.text-\[\#00FF99\]{
  --tw-text-opacity: 1;
  color: rgb(0 255 153 / var(--tw-text-opacity));
}

.text-\[\#00ff00\]{
  --tw-text-opacity: 1;
  color: rgb(0 255 0 / var(--tw-text-opacity));
}

.text-\[\#00ff99\]{
  --tw-text-opacity: 1;
  color: rgb(0 255 153 / var(--tw-text-opacity));
}

.text-\[\#04140B\]{
  --tw-text-opacity: 1;
  color: rgb(4 20 11 / var(--tw-text-opacity));
}

.text-\[\#06101f\]{
  --tw-text-opacity: 1;
  color: rgb(6 16 31 / var(--tw-text-opacity));
}

.text-\[\#062352\]{
  --tw-text-opacity: 1;
  color: rgb(6 35 82 / var(--tw-text-opacity));
}

.text-\[\#07101f\]{
  --tw-text-opacity: 1;
  color: rgb(7 16 31 / var(--tw-text-opacity));
}

.text-\[\#0B0C10\]{
  --tw-text-opacity: 1;
  color: rgb(11 12 16 / var(--tw-text-opacity));
}

.text-\[\#0b2746\]{
  --tw-text-opacity: 1;
  color: rgb(11 39 70 / var(--tw-text-opacity));
}

.text-\[\#0b3161\]{
  --tw-text-opacity: 1;
  color: rgb(11 49 97 / var(--tw-text-opacity));
}

.text-\[\#0c0d10\]{
  --tw-text-opacity: 1;
  color: rgb(12 13 16 / var(--tw-text-opacity));
}

.text-\[\#0d1117\]{
  --tw-text-opacity: 1;
  color: rgb(13 17 23 / var(--tw-text-opacity));
}

.text-\[\#0f0\]{
  --tw-text-opacity: 1;
  color: rgb(0 255 0 / var(--tw-text-opacity));
}

.text-\[\#0f2c4e\]{
  --tw-text-opacity: 1;
  color: rgb(15 44 78 / var(--tw-text-opacity));
}

.text-\[\#111114\]{
  --tw-text-opacity: 1;
  color: rgb(17 17 20 / var(--tw-text-opacity));
}

.text-\[\#18d29f\]{
  --tw-text-opacity: 1;
  color: rgb(24 210 159 / var(--tw-text-opacity));
}

.text-\[\#22c55e\]{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

.text-\[\#2BE07A\]{
  --tw-text-opacity: 1;
  color: rgb(43 224 122 / var(--tw-text-opacity));
}

.text-\[\#2FD4C4\]{
  --tw-text-opacity: 1;
  color: rgb(47 212 196 / var(--tw-text-opacity));
}

.text-\[\#2c2a27\]{
  --tw-text-opacity: 1;
  color: rgb(44 42 39 / var(--tw-text-opacity));
}

.text-\[\#333\]{
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity));
}

.text-\[\#334455\]{
  --tw-text-opacity: 1;
  color: rgb(51 68 85 / var(--tw-text-opacity));
}

.text-\[\#336600\]{
  --tw-text-opacity: 1;
  color: rgb(51 102 0 / var(--tw-text-opacity));
}

.text-\[\#3A414F\]{
  --tw-text-opacity: 1;
  color: rgb(58 65 79 / var(--tw-text-opacity));
}

.text-\[\#3a2408\]{
  --tw-text-opacity: 1;
  color: rgb(58 36 8 / var(--tw-text-opacity));
}

.text-\[\#3b82f6\]{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

.text-\[\#3d434e\]{
  --tw-text-opacity: 1;
  color: rgb(61 67 78 / var(--tw-text-opacity));
}

.text-\[\#3f444f\]{
  --tw-text-opacity: 1;
  color: rgb(63 68 79 / var(--tw-text-opacity));
}

.text-\[\#3f5a70\]{
  --tw-text-opacity: 1;
  color: rgb(63 90 112 / var(--tw-text-opacity));
}

.text-\[\#403e3a\]{
  --tw-text-opacity: 1;
  color: rgb(64 62 58 / var(--tw-text-opacity));
}

.text-\[\#44607a\]{
  --tw-text-opacity: 1;
  color: rgb(68 96 122 / var(--tw-text-opacity));
}

.text-\[\#4C5464\]{
  --tw-text-opacity: 1;
  color: rgb(76 84 100 / var(--tw-text-opacity));
}

.text-\[\#4a3f30\]{
  --tw-text-opacity: 1;
  color: rgb(74 63 48 / var(--tw-text-opacity));
}

.text-\[\#4a505c\]{
  --tw-text-opacity: 1;
  color: rgb(74 80 92 / var(--tw-text-opacity));
}

.text-\[\#4a7a9a\]{
  --tw-text-opacity: 1;
  color: rgb(74 122 154 / var(--tw-text-opacity));
}

.text-\[\#4a8a5a\]{
  --tw-text-opacity: 1;
  color: rgb(74 138 90 / var(--tw-text-opacity));
}

.text-\[\#4aa3ff\]{
  --tw-text-opacity: 1;
  color: rgb(74 163 255 / var(--tw-text-opacity));
}

.text-\[\#4ade80\]{
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity));
}

.text-\[\#4b5468\]{
  --tw-text-opacity: 1;
  color: rgb(75 84 104 / var(--tw-text-opacity));
}

.text-\[\#4d566c\]{
  --tw-text-opacity: 1;
  color: rgb(77 86 108 / var(--tw-text-opacity));
}

.text-\[\#553322\]{
  --tw-text-opacity: 1;
  color: rgb(85 51 34 / var(--tw-text-opacity));
}

.text-\[\#553344\]{
  --tw-text-opacity: 1;
  color: rgb(85 51 68 / var(--tw-text-opacity));
}

.text-\[\#5a4a6a\]{
  --tw-text-opacity: 1;
  color: rgb(90 74 106 / var(--tw-text-opacity));
}

.text-\[\#5a4d3a\]{
  --tw-text-opacity: 1;
  color: rgb(90 77 58 / var(--tw-text-opacity));
}

.text-\[\#5a6070\]{
  --tw-text-opacity: 1;
  color: rgb(90 96 112 / var(--tw-text-opacity));
}

.text-\[\#5a6779\]{
  --tw-text-opacity: 1;
  color: rgb(90 103 121 / var(--tw-text-opacity));
}

.text-\[\#5a6a80\]{
  --tw-text-opacity: 1;
  color: rgb(90 106 128 / var(--tw-text-opacity));
}

.text-\[\#5a7a8a\]{
  --tw-text-opacity: 1;
  color: rgb(90 122 138 / var(--tw-text-opacity));
}

.text-\[\#5a7a95\]{
  --tw-text-opacity: 1;
  color: rgb(90 122 149 / var(--tw-text-opacity));
}

.text-\[\#5a86a5\]{
  --tw-text-opacity: 1;
  color: rgb(90 134 165 / var(--tw-text-opacity));
}

.text-\[\#5d636e\]{
  --tw-text-opacity: 1;
  color: rgb(93 99 110 / var(--tw-text-opacity));
}

.text-\[\#5d6874\]{
  --tw-text-opacity: 1;
  color: rgb(93 104 116 / var(--tw-text-opacity));
}

.text-\[\#5f6672\]{
  --tw-text-opacity: 1;
  color: rgb(95 102 114 / var(--tw-text-opacity));
}

.text-\[\#5f6a84\]{
  --tw-text-opacity: 1;
  color: rgb(95 106 132 / var(--tw-text-opacity));
}

.text-\[\#5f6f85\]{
  --tw-text-opacity: 1;
  color: rgb(95 111 133 / var(--tw-text-opacity));
}

.text-\[\#60a5fa\]{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.text-\[\#65738a\]{
  --tw-text-opacity: 1;
  color: rgb(101 115 138 / var(--tw-text-opacity));
}

.text-\[\#65dc9a\]{
  --tw-text-opacity: 1;
  color: rgb(101 220 154 / var(--tw-text-opacity));
}

.text-\[\#65dcff\]{
  --tw-text-opacity: 1;
  color: rgb(101 220 255 / var(--tw-text-opacity));
}

.text-\[\#663C00\]{
  --tw-text-opacity: 1;
  color: rgb(102 60 0 / var(--tw-text-opacity));
}

.text-\[\#666666\]{
  --tw-text-opacity: 1;
  color: rgb(102 102 102 / var(--tw-text-opacity));
}

.text-\[\#66727f\]{
  --tw-text-opacity: 1;
  color: rgb(102 114 127 / var(--tw-text-opacity));
}

.text-\[\#66728a\]{
  --tw-text-opacity: 1;
  color: rgb(102 114 138 / var(--tw-text-opacity));
}

.text-\[\#66d9b8\]{
  --tw-text-opacity: 1;
  color: rgb(102 217 184 / var(--tw-text-opacity));
}

.text-\[\#67758a\]{
  --tw-text-opacity: 1;
  color: rgb(103 117 138 / var(--tw-text-opacity));
}

.text-\[\#69707d\]{
  --tw-text-opacity: 1;
  color: rgb(105 112 125 / var(--tw-text-opacity));
}

.text-\[\#6a5a44\]{
  --tw-text-opacity: 1;
  color: rgb(106 90 68 / var(--tw-text-opacity));
}

.text-\[\#6a5a7a\]{
  --tw-text-opacity: 1;
  color: rgb(106 90 122 / var(--tw-text-opacity));
}

.text-\[\#6a7f96\]{
  --tw-text-opacity: 1;
  color: rgb(106 127 150 / var(--tw-text-opacity));
}

.text-\[\#6b7280\]{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.text-\[\#6b7488\]{
  --tw-text-opacity: 1;
  color: rgb(107 116 136 / var(--tw-text-opacity));
}

.text-\[\#6b7c93\]{
  --tw-text-opacity: 1;
  color: rgb(107 124 147 / var(--tw-text-opacity));
}

.text-\[\#6b7d94\]{
  --tw-text-opacity: 1;
  color: rgb(107 125 148 / var(--tw-text-opacity));
}

.text-\[\#6d727a\]{
  --tw-text-opacity: 1;
  color: rgb(109 114 122 / var(--tw-text-opacity));
}

.text-\[\#6d7887\]{
  --tw-text-opacity: 1;
  color: rgb(109 120 135 / var(--tw-text-opacity));
}

.text-\[\#6db8d6\]{
  --tw-text-opacity: 1;
  color: rgb(109 184 214 / var(--tw-text-opacity));
}

.text-\[\#6e7480\]{
  --tw-text-opacity: 1;
  color: rgb(110 116 128 / var(--tw-text-opacity));
}

.text-\[\#6ee7b7\]{
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity));
}

.text-\[\#6f7280\]{
  --tw-text-opacity: 1;
  color: rgb(111 114 128 / var(--tw-text-opacity));
}

.text-\[\#6f7b8a\]{
  --tw-text-opacity: 1;
  color: rgb(111 123 138 / var(--tw-text-opacity));
}

.text-\[\#6f8fb8\]{
  --tw-text-opacity: 1;
  color: rgb(111 143 184 / var(--tw-text-opacity));
}

.text-\[\#6fc7c0\]{
  --tw-text-opacity: 1;
  color: rgb(111 199 192 / var(--tw-text-opacity));
}

.text-\[\#737373\]{
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity));
}

.text-\[\#78849a\]{
  --tw-text-opacity: 1;
  color: rgb(120 132 154 / var(--tw-text-opacity));
}

.text-\[\#79818f\]{
  --tw-text-opacity: 1;
  color: rgb(121 129 143 / var(--tw-text-opacity));
}

.text-\[\#7A8296\]{
  --tw-text-opacity: 1;
  color: rgb(122 130 150 / var(--tw-text-opacity));
}

.text-\[\#7a6a8a\]{
  --tw-text-opacity: 1;
  color: rgb(122 106 138 / var(--tw-text-opacity));
}

.text-\[\#7a8698\]{
  --tw-text-opacity: 1;
  color: rgb(122 134 152 / var(--tw-text-opacity));
}

.text-\[\#7a90a5\]{
  --tw-text-opacity: 1;
  color: rgb(122 144 165 / var(--tw-text-opacity));
}

.text-\[\#7b7f82\]{
  --tw-text-opacity: 1;
  color: rgb(123 127 130 / var(--tw-text-opacity));
}

.text-\[\#7b8695\]{
  --tw-text-opacity: 1;
  color: rgb(123 134 149 / var(--tw-text-opacity));
}

.text-\[\#7ba7e0\]{
  --tw-text-opacity: 1;
  color: rgb(123 167 224 / var(--tw-text-opacity));
}

.text-\[\#7c3aed\]{
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity));
}

.text-\[\#7c828a\]{
  --tw-text-opacity: 1;
  color: rgb(124 130 138 / var(--tw-text-opacity));
}

.text-\[\#7d838e\]{
  --tw-text-opacity: 1;
  color: rgb(125 131 142 / var(--tw-text-opacity));
}

.text-\[\#7d8896\]{
  --tw-text-opacity: 1;
  color: rgb(125 136 150 / var(--tw-text-opacity));
}

.text-\[\#7d8899\]{
  --tw-text-opacity: 1;
  color: rgb(125 136 153 / var(--tw-text-opacity));
}

.text-\[\#7d8998\]{
  --tw-text-opacity: 1;
  color: rgb(125 137 152 / var(--tw-text-opacity));
}

.text-\[\#7dffb0\]{
  --tw-text-opacity: 1;
  color: rgb(125 255 176 / var(--tw-text-opacity));
}

.text-\[\#7f8b9e\]{
  --tw-text-opacity: 1;
  color: rgb(127 139 158 / var(--tw-text-opacity));
}

.text-\[\#7f8d83\]{
  --tw-text-opacity: 1;
  color: rgb(127 141 131 / var(--tw-text-opacity));
}

.text-\[\#7fb069\]{
  --tw-text-opacity: 1;
  color: rgb(127 176 105 / var(--tw-text-opacity));
}

.text-\[\#7fb8cf\]{
  --tw-text-opacity: 1;
  color: rgb(127 184 207 / var(--tw-text-opacity));
}

.text-\[\#8397ad\]{
  --tw-text-opacity: 1;
  color: rgb(131 151 173 / var(--tw-text-opacity));
}

.text-\[\#8590a4\]{
  --tw-text-opacity: 1;
  color: rgb(133 144 164 / var(--tw-text-opacity));
}

.text-\[\#86efac\]{
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity));
}

.text-\[\#88739c\]{
  --tw-text-opacity: 1;
  color: rgb(136 115 156 / var(--tw-text-opacity));
}

.text-\[\#888888\]{
  --tw-text-opacity: 1;
  color: rgb(136 136 136 / var(--tw-text-opacity));
}

.text-\[\#888\]{
  --tw-text-opacity: 1;
  color: rgb(136 136 136 / var(--tw-text-opacity));
}

.text-\[\#8892aa\]{
  --tw-text-opacity: 1;
  color: rgb(136 146 170 / var(--tw-text-opacity));
}

.text-\[\#8894aa\]{
  --tw-text-opacity: 1;
  color: rgb(136 148 170 / var(--tw-text-opacity));
}

.text-\[\#8994a4\]{
  --tw-text-opacity: 1;
  color: rgb(137 148 164 / var(--tw-text-opacity));
}

.text-\[\#8BC34A\]{
  --tw-text-opacity: 1;
  color: rgb(139 195 74 / var(--tw-text-opacity));
}

.text-\[\#8a7658\]{
  --tw-text-opacity: 1;
  color: rgb(138 118 88 / var(--tw-text-opacity));
}

.text-\[\#8a7a9a\]{
  --tw-text-opacity: 1;
  color: rgb(138 122 154 / var(--tw-text-opacity));
}

.text-\[\#8a8a8a\]{
  --tw-text-opacity: 1;
  color: rgb(138 138 138 / var(--tw-text-opacity));
}

.text-\[\#8a9096\]{
  --tw-text-opacity: 1;
  color: rgb(138 144 150 / var(--tw-text-opacity));
}

.text-\[\#8a919e\]{
  --tw-text-opacity: 1;
  color: rgb(138 145 158 / var(--tw-text-opacity));
}

.text-\[\#8ae0d0\]{
  --tw-text-opacity: 1;
  color: rgb(138 224 208 / var(--tw-text-opacity));
}

.text-\[\#8aefc7\]{
  --tw-text-opacity: 1;
  color: rgb(138 239 199 / var(--tw-text-opacity));
}

.text-\[\#8b9096\]{
  --tw-text-opacity: 1;
  color: rgb(139 144 150 / var(--tw-text-opacity));
}

.text-\[\#8b90a0\]{
  --tw-text-opacity: 1;
  color: rgb(139 144 160 / var(--tw-text-opacity));
}

.text-\[\#8b919c\]{
  --tw-text-opacity: 1;
  color: rgb(139 145 156 / var(--tw-text-opacity));
}

.text-\[\#8b93a1\]{
  --tw-text-opacity: 1;
  color: rgb(139 147 161 / var(--tw-text-opacity));
}

.text-\[\#8b97a6\]{
  --tw-text-opacity: 1;
  color: rgb(139 151 166 / var(--tw-text-opacity));
}

.text-\[\#8b98ac\]{
  --tw-text-opacity: 1;
  color: rgb(139 152 172 / var(--tw-text-opacity));
}

.text-\[\#8d99ad\]{
  --tw-text-opacity: 1;
  color: rgb(141 153 173 / var(--tw-text-opacity));
}

.text-\[\#8d9aab\]{
  --tw-text-opacity: 1;
  color: rgb(141 154 171 / var(--tw-text-opacity));
}

.text-\[\#8ef0b0\]{
  --tw-text-opacity: 1;
  color: rgb(142 240 176 / var(--tw-text-opacity));
}

.text-\[\#8f7aa4\]{
  --tw-text-opacity: 1;
  color: rgb(143 122 164 / var(--tw-text-opacity));
}

.text-\[\#8f9298\]{
  --tw-text-opacity: 1;
  color: rgb(143 146 152 / var(--tw-text-opacity));
}

.text-\[\#8fa0b8\]{
  --tw-text-opacity: 1;
  color: rgb(143 160 184 / var(--tw-text-opacity));
}

.text-\[\#8fa3b8\]{
  --tw-text-opacity: 1;
  color: rgb(143 163 184 / var(--tw-text-opacity));
}

.text-\[\#8fb8e0\]{
  --tw-text-opacity: 1;
  color: rgb(143 184 224 / var(--tw-text-opacity));
}

.text-\[\#8fc1e4\]{
  --tw-text-opacity: 1;
  color: rgb(143 193 228 / var(--tw-text-opacity));
}

.text-\[\#8fc4f0\]{
  --tw-text-opacity: 1;
  color: rgb(143 196 240 / var(--tw-text-opacity));
}

.text-\[\#8fd6ff\]{
  --tw-text-opacity: 1;
  color: rgb(143 214 255 / var(--tw-text-opacity));
}

.text-\[\#8fd9a8\]{
  --tw-text-opacity: 1;
  color: rgb(143 217 168 / var(--tw-text-opacity));
}

.text-\[\#8fdcac\]{
  --tw-text-opacity: 1;
  color: rgb(143 220 172 / var(--tw-text-opacity));
}

.text-\[\#92400e\]{
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity));
}

.text-\[\#93a1b8\]{
  --tw-text-opacity: 1;
  color: rgb(147 161 184 / var(--tw-text-opacity));
}

.text-\[\#93a6cc\]{
  --tw-text-opacity: 1;
  color: rgb(147 166 204 / var(--tw-text-opacity));
}

.text-\[\#93e7ff\]{
  --tw-text-opacity: 1;
  color: rgb(147 231 255 / var(--tw-text-opacity));
}

.text-\[\#999999\]{
  --tw-text-opacity: 1;
  color: rgb(153 153 153 / var(--tw-text-opacity));
}

.text-\[\#9a9a9a\]{
  --tw-text-opacity: 1;
  color: rgb(154 154 154 / var(--tw-text-opacity));
}

.text-\[\#9aa0a5\]{
  --tw-text-opacity: 1;
  color: rgb(154 160 165 / var(--tw-text-opacity));
}

.text-\[\#9aa0aa\]{
  --tw-text-opacity: 1;
  color: rgb(154 160 170 / var(--tw-text-opacity));
}

.text-\[\#9aa3b1\]{
  --tw-text-opacity: 1;
  color: rgb(154 163 177 / var(--tw-text-opacity));
}

.text-\[\#9aa4bb\]{
  --tw-text-opacity: 1;
  color: rgb(154 164 187 / var(--tw-text-opacity));
}

.text-\[\#9aa7b8\]{
  --tw-text-opacity: 1;
  color: rgb(154 167 184 / var(--tw-text-opacity));
}

.text-\[\#9aa8c4\]{
  --tw-text-opacity: 1;
  color: rgb(154 168 196 / var(--tw-text-opacity));
}

.text-\[\#9df0a4\]{
  --tw-text-opacity: 1;
  color: rgb(157 240 164 / var(--tw-text-opacity));
}

.text-\[\#9fb4ff\]{
  --tw-text-opacity: 1;
  color: rgb(159 180 255 / var(--tw-text-opacity));
}

.text-\[\#9fe6f2\]{
  --tw-text-opacity: 1;
  color: rgb(159 230 242 / var(--tw-text-opacity));
}

.text-\[\#9fe8f7\]{
  --tw-text-opacity: 1;
  color: rgb(159 232 247 / var(--tw-text-opacity));
}

.text-\[\#A972FF\]{
  --tw-text-opacity: 1;
  color: rgb(169 114 255 / var(--tw-text-opacity));
}

.text-\[\#AA00FF\]{
  --tw-text-opacity: 1;
  color: rgb(170 0 255 / var(--tw-text-opacity));
}

.text-\[\#AAAAAA\]{
  --tw-text-opacity: 1;
  color: rgb(170 170 170 / var(--tw-text-opacity));
}

.text-\[\#C7CEDA\]{
  --tw-text-opacity: 1;
  color: rgb(199 206 218 / var(--tw-text-opacity));
}

.text-\[\#C9F24D\]{
  --tw-text-opacity: 1;
  color: rgb(201 242 77 / var(--tw-text-opacity));
}

.text-\[\#CCCCCC\]{
  --tw-text-opacity: 1;
  color: rgb(204 204 204 / var(--tw-text-opacity));
}

.text-\[\#E8B54A\]{
  --tw-text-opacity: 1;
  color: rgb(232 181 74 / var(--tw-text-opacity));
}

.text-\[\#EDEFF5\]{
  --tw-text-opacity: 1;
  color: rgb(237 239 245 / var(--tw-text-opacity));
}

.text-\[\#FF0000\]{
  --tw-text-opacity: 1;
  color: rgb(255 0 0 / var(--tw-text-opacity));
}

.text-\[\#FF4D6D\]{
  --tw-text-opacity: 1;
  color: rgb(255 77 109 / var(--tw-text-opacity));
}

.text-\[\#FF5500\]{
  --tw-text-opacity: 1;
  color: rgb(255 85 0 / var(--tw-text-opacity));
}

.text-\[\#FF8FA3\]{
  --tw-text-opacity: 1;
  color: rgb(255 143 163 / var(--tw-text-opacity));
}

.text-\[\#FF9800\]{
  --tw-text-opacity: 1;
  color: rgb(255 152 0 / var(--tw-text-opacity));
}

.text-\[\#a2a7ad\]{
  --tw-text-opacity: 1;
  color: rgb(162 167 173 / var(--tw-text-opacity));
}

.text-\[\#a3a3a3\]{
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));
}

.text-\[\#a3b0c1\]{
  --tw-text-opacity: 1;
  color: rgb(163 176 193 / var(--tw-text-opacity));
}

.text-\[\#a7adb5\]{
  --tw-text-opacity: 1;
  color: rgb(167 173 181 / var(--tw-text-opacity));
}

.text-\[\#a89f8a\]{
  --tw-text-opacity: 1;
  color: rgb(168 159 138 / var(--tw-text-opacity));
}

.text-\[\#a8b4c8\]{
  --tw-text-opacity: 1;
  color: rgb(168 180 200 / var(--tw-text-opacity));
}

.text-\[\#a8f5cf\]{
  --tw-text-opacity: 1;
  color: rgb(168 245 207 / var(--tw-text-opacity));
}

.text-\[\#a9aeb6\]{
  --tw-text-opacity: 1;
  color: rgb(169 174 182 / var(--tw-text-opacity));
}

.text-\[\#a9b0bb\]{
  --tw-text-opacity: 1;
  color: rgb(169 176 187 / var(--tw-text-opacity));
}

.text-\[\#aab6c6\]{
  --tw-text-opacity: 1;
  color: rgb(170 182 198 / var(--tw-text-opacity));
}

.text-\[\#aeb3b9\]{
  --tw-text-opacity: 1;
  color: rgb(174 179 185 / var(--tw-text-opacity));
}

.text-\[\#aeb4c2\]{
  --tw-text-opacity: 1;
  color: rgb(174 180 194 / var(--tw-text-opacity));
}

.text-\[\#aeb6c4\]{
  --tw-text-opacity: 1;
  color: rgb(174 182 196 / var(--tw-text-opacity));
}

.text-\[\#b3bec9\]{
  --tw-text-opacity: 1;
  color: rgb(179 190 201 / var(--tw-text-opacity));
}

.text-\[\#b6a4c6\]{
  --tw-text-opacity: 1;
  color: rgb(182 164 198 / var(--tw-text-opacity));
}

.text-\[\#b6a892\]{
  --tw-text-opacity: 1;
  color: rgb(182 168 146 / var(--tw-text-opacity));
}

.text-\[\#b6bac1\]{
  --tw-text-opacity: 1;
  color: rgb(182 186 193 / var(--tw-text-opacity));
}

.text-\[\#b892cf\]{
  --tw-text-opacity: 1;
  color: rgb(184 146 207 / var(--tw-text-opacity));
}

.text-\[\#b8f0ea\]{
  --tw-text-opacity: 1;
  color: rgb(184 240 234 / var(--tw-text-opacity));
}

.text-\[\#b8f5cc\]{
  --tw-text-opacity: 1;
  color: rgb(184 245 204 / var(--tw-text-opacity));
}

.text-\[\#c0c6d4\]{
  --tw-text-opacity: 1;
  color: rgb(192 198 212 / var(--tw-text-opacity));
}

.text-\[\#c2c4ca\]{
  --tw-text-opacity: 1;
  color: rgb(194 196 202 / var(--tw-text-opacity));
}

.text-\[\#c2c7ce\]{
  --tw-text-opacity: 1;
  color: rgb(194 199 206 / var(--tw-text-opacity));
}

.text-\[\#c2cddf\]{
  --tw-text-opacity: 1;
  color: rgb(194 205 223 / var(--tw-text-opacity));
}

.text-\[\#c2f0e3\]{
  --tw-text-opacity: 1;
  color: rgb(194 240 227 / var(--tw-text-opacity));
}

.text-\[\#c3b3d0\]{
  --tw-text-opacity: 1;
  color: rgb(195 179 208 / var(--tw-text-opacity));
}

.text-\[\#c3cdd8\]{
  --tw-text-opacity: 1;
  color: rgb(195 205 216 / var(--tw-text-opacity));
}

.text-\[\#c3ced9\]{
  --tw-text-opacity: 1;
  color: rgb(195 206 217 / var(--tw-text-opacity));
}

.text-\[\#c4a48a\]{
  --tw-text-opacity: 1;
  color: rgb(196 164 138 / var(--tw-text-opacity));
}

.text-\[\#c6adda\]{
  --tw-text-opacity: 1;
  color: rgb(198 173 218 / var(--tw-text-opacity));
}

.text-\[\#c8b48a\]{
  --tw-text-opacity: 1;
  color: rgb(200 180 138 / var(--tw-text-opacity));
}

.text-\[\#c8c8c8\]{
  --tw-text-opacity: 1;
  color: rgb(200 200 200 / var(--tw-text-opacity));
}

.text-\[\#c8ccd4\]{
  --tw-text-opacity: 1;
  color: rgb(200 204 212 / var(--tw-text-opacity));
}

.text-\[\#c8d6e4\]{
  --tw-text-opacity: 1;
  color: rgb(200 214 228 / var(--tw-text-opacity));
}

.text-\[\#c8f5ea\]{
  --tw-text-opacity: 1;
  color: rgb(200 245 234 / var(--tw-text-opacity));
}

.text-\[\#c9a8ff\]{
  --tw-text-opacity: 1;
  color: rgb(201 168 255 / var(--tw-text-opacity));
}

.text-\[\#c9ccd4\]{
  --tw-text-opacity: 1;
  color: rgb(201 204 212 / var(--tw-text-opacity));
}

.text-\[\#c9ced4\]{
  --tw-text-opacity: 1;
  color: rgb(201 206 212 / var(--tw-text-opacity));
}

.text-\[\#c9cfd9\]{
  --tw-text-opacity: 1;
  color: rgb(201 207 217 / var(--tw-text-opacity));
}

.text-\[\#c9ecff\]{
  --tw-text-opacity: 1;
  color: rgb(201 236 255 / var(--tw-text-opacity));
}

.text-\[\#c9f24d\]{
  --tw-text-opacity: 1;
  color: rgb(201 242 77 / var(--tw-text-opacity));
}

.text-\[\#cfc4a8\]{
  --tw-text-opacity: 1;
  color: rgb(207 196 168 / var(--tw-text-opacity));
}

.text-\[\#cfcfcf\]{
  --tw-text-opacity: 1;
  color: rgb(207 207 207 / var(--tw-text-opacity));
}

.text-\[\#cfe2f8\]{
  --tw-text-opacity: 1;
  color: rgb(207 226 248 / var(--tw-text-opacity));
}

.text-\[\#d3b8ff\]{
  --tw-text-opacity: 1;
  color: rgb(211 184 255 / var(--tw-text-opacity));
}

.text-\[\#d4b483\]{
  --tw-text-opacity: 1;
  color: rgb(212 180 131 / var(--tw-text-opacity));
}

.text-\[\#d5d5d5\]{
  --tw-text-opacity: 1;
  color: rgb(213 213 213 / var(--tw-text-opacity));
}

.text-\[\#d6e0ee\]{
  --tw-text-opacity: 1;
  color: rgb(214 224 238 / var(--tw-text-opacity));
}

.text-\[\#d6e0f0\]{
  --tw-text-opacity: 1;
  color: rgb(214 224 240 / var(--tw-text-opacity));
}

.text-\[\#d6e6ff\]{
  --tw-text-opacity: 1;
  color: rgb(214 230 255 / var(--tw-text-opacity));
}

.text-\[\#d8c199\]{
  --tw-text-opacity: 1;
  color: rgb(216 193 153 / var(--tw-text-opacity));
}

.text-\[\#d9ecff\]{
  --tw-text-opacity: 1;
  color: rgb(217 236 255 / var(--tw-text-opacity));
}

.text-\[\#dbe7f4\]{
  --tw-text-opacity: 1;
  color: rgb(219 231 244 / var(--tw-text-opacity));
}

.text-\[\#dde3ec\]{
  --tw-text-opacity: 1;
  color: rgb(221 227 236 / var(--tw-text-opacity));
}

.text-\[\#dfe3ea\]{
  --tw-text-opacity: 1;
  color: rgb(223 227 234 / var(--tw-text-opacity));
}

.text-\[\#dfe4ec\]{
  --tw-text-opacity: 1;
  color: rgb(223 228 236 / var(--tw-text-opacity));
}

.text-\[\#dfe7f8\]{
  --tw-text-opacity: 1;
  color: rgb(223 231 248 / var(--tw-text-opacity));
}

.text-\[\#e08a4a\]{
  --tw-text-opacity: 1;
  color: rgb(224 138 74 / var(--tw-text-opacity));
}

.text-\[\#e0b06a\]{
  --tw-text-opacity: 1;
  color: rgb(224 176 106 / var(--tw-text-opacity));
}

.text-\[\#e0c33c\]{
  --tw-text-opacity: 1;
  color: rgb(224 195 60 / var(--tw-text-opacity));
}

.text-\[\#e2d8c6\]{
  --tw-text-opacity: 1;
  color: rgb(226 216 198 / var(--tw-text-opacity));
}

.text-\[\#e2edf7\]{
  --tw-text-opacity: 1;
  color: rgb(226 237 247 / var(--tw-text-opacity));
}

.text-\[\#e6c07a\]{
  --tw-text-opacity: 1;
  color: rgb(230 192 122 / var(--tw-text-opacity));
}

.text-\[\#e6d3f5\]{
  --tw-text-opacity: 1;
  color: rgb(230 211 245 / var(--tw-text-opacity));
}

.text-\[\#e6dcee\]{
  --tw-text-opacity: 1;
  color: rgb(230 220 238 / var(--tw-text-opacity));
}

.text-\[\#e6ebf2\]{
  --tw-text-opacity: 1;
  color: rgb(230 235 242 / var(--tw-text-opacity));
}

.text-\[\#e79ec4\]{
  --tw-text-opacity: 1;
  color: rgb(231 158 196 / var(--tw-text-opacity));
}

.text-\[\#e7f0ff\]{
  --tw-text-opacity: 1;
  color: rgb(231 240 255 / var(--tw-text-opacity));
}

.text-\[\#e8c07a\]{
  --tw-text-opacity: 1;
  color: rgb(232 192 122 / var(--tw-text-opacity));
}

.text-\[\#e8c48a\]{
  --tw-text-opacity: 1;
  color: rgb(232 196 138 / var(--tw-text-opacity));
}

.text-\[\#e8dcc0\]{
  --tw-text-opacity: 1;
  color: rgb(232 220 192 / var(--tw-text-opacity));
}

.text-\[\#e8ddc8\]{
  --tw-text-opacity: 1;
  color: rgb(232 221 200 / var(--tw-text-opacity));
}

.text-\[\#e8ecf2\]{
  --tw-text-opacity: 1;
  color: rgb(232 236 242 / var(--tw-text-opacity));
}

.text-\[\#e8f4f8\]{
  --tw-text-opacity: 1;
  color: rgb(232 244 248 / var(--tw-text-opacity));
}

.text-\[\#e9ccff\]{
  --tw-text-opacity: 1;
  color: rgb(233 204 255 / var(--tw-text-opacity));
}

.text-\[\#eef3fc\]{
  --tw-text-opacity: 1;
  color: rgb(238 243 252 / var(--tw-text-opacity));
}

.text-\[\#eef4f9\]{
  --tw-text-opacity: 1;
  color: rgb(238 244 249 / var(--tw-text-opacity));
}

.text-\[\#eef7ff\]{
  --tw-text-opacity: 1;
  color: rgb(238 247 255 / var(--tw-text-opacity));
}

.text-\[\#ef4444\]{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.text-\[\#eff3f9\]{
  --tw-text-opacity: 1;
  color: rgb(239 243 249 / var(--tw-text-opacity));
}

.text-\[\#f0d5a2\]{
  --tw-text-opacity: 1;
  color: rgb(240 213 162 / var(--tw-text-opacity));
}

.text-\[\#f0e0c0\]{
  --tw-text-opacity: 1;
  color: rgb(240 224 192 / var(--tw-text-opacity));
}

.text-\[\#f0e2cc\]{
  --tw-text-opacity: 1;
  color: rgb(240 226 204 / var(--tw-text-opacity));
}

.text-\[\#f0e4c8\]{
  --tw-text-opacity: 1;
  color: rgb(240 228 200 / var(--tw-text-opacity));
}

.text-\[\#f1f3f5\]{
  --tw-text-opacity: 1;
  color: rgb(241 243 245 / var(--tw-text-opacity));
}

.text-\[\#f4fbff\]{
  --tw-text-opacity: 1;
  color: rgb(244 251 255 / var(--tw-text-opacity));
}

.text-\[\#f5d76e\]{
  --tw-text-opacity: 1;
  color: rgb(245 215 110 / var(--tw-text-opacity));
}

.text-\[\#f6cdd8\]{
  --tw-text-opacity: 1;
  color: rgb(246 205 216 / var(--tw-text-opacity));
}

.text-\[\#f6ecc0\]{
  --tw-text-opacity: 1;
  color: rgb(246 236 192 / var(--tw-text-opacity));
}

.text-\[\#facc15\]{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity));
}

.text-\[\#ff4aa3\]{
  --tw-text-opacity: 1;
  color: rgb(255 74 163 / var(--tw-text-opacity));
}

.text-\[\#ff5f6d\]{
  --tw-text-opacity: 1;
  color: rgb(255 95 109 / var(--tw-text-opacity));
}

.text-\[\#ff6a60\]{
  --tw-text-opacity: 1;
  color: rgb(255 106 96 / var(--tw-text-opacity));
}

.text-\[\#ff7a7a\]{
  --tw-text-opacity: 1;
  color: rgb(255 122 122 / var(--tw-text-opacity));
}

.text-\[\#ff8f8f\]{
  --tw-text-opacity: 1;
  color: rgb(255 143 143 / var(--tw-text-opacity));
}

.text-\[\#ff9a9a\]{
  --tw-text-opacity: 1;
  color: rgb(255 154 154 / var(--tw-text-opacity));
}

.text-\[\#ff9b9b\]{
  --tw-text-opacity: 1;
  color: rgb(255 155 155 / var(--tw-text-opacity));
}

.text-\[\#ff9c8f\]{
  --tw-text-opacity: 1;
  color: rgb(255 156 143 / var(--tw-text-opacity));
}

.text-\[\#ffb0aa\]{
  --tw-text-opacity: 1;
  color: rgb(255 176 170 / var(--tw-text-opacity));
}

.text-\[\#ffb59f\]{
  --tw-text-opacity: 1;
  color: rgb(255 181 159 / var(--tw-text-opacity));
}

.text-\[\#ffb9b9\]{
  --tw-text-opacity: 1;
  color: rgb(255 185 185 / var(--tw-text-opacity));
}

.text-\[\#ffb9cb\]{
  --tw-text-opacity: 1;
  color: rgb(255 185 203 / var(--tw-text-opacity));
}

.text-\[\#ffc4de\]{
  --tw-text-opacity: 1;
  color: rgb(255 196 222 / var(--tw-text-opacity));
}

.text-\[\#ffc9c9\]{
  --tw-text-opacity: 1;
  color: rgb(255 201 201 / var(--tw-text-opacity));
}

.text-\[\#ffcccc\]{
  --tw-text-opacity: 1;
  color: rgb(255 204 204 / var(--tw-text-opacity));
}

.text-\[\#ffcf4a\]{
  --tw-text-opacity: 1;
  color: rgb(255 207 74 / var(--tw-text-opacity));
}

.text-\[\#ffcf9a\]{
  --tw-text-opacity: 1;
  color: rgb(255 207 154 / var(--tw-text-opacity));
}

.text-\[\#ffd479\]{
  --tw-text-opacity: 1;
  color: rgb(255 212 121 / var(--tw-text-opacity));
}

.text-\[\#ffd79a\]{
  --tw-text-opacity: 1;
  color: rgb(255 215 154 / var(--tw-text-opacity));
}

.text-\[\#ffd7a8\]{
  --tw-text-opacity: 1;
  color: rgb(255 215 168 / var(--tw-text-opacity));
}

.text-\[\#ffd98c\]{
  --tw-text-opacity: 1;
  color: rgb(255 217 140 / var(--tw-text-opacity));
}

.text-\[\#ffd9a0\]{
  --tw-text-opacity: 1;
  color: rgb(255 217 160 / var(--tw-text-opacity));
}

.text-\[\#ffe3b0\]{
  --tw-text-opacity: 1;
  color: rgb(255 227 176 / var(--tw-text-opacity));
}

.text-\[\#ffe8f4\]{
  --tw-text-opacity: 1;
  color: rgb(255 232 244 / var(--tw-text-opacity));
}

.text-\[\#ffe9a8\]{
  --tw-text-opacity: 1;
  color: rgb(255 233 168 / var(--tw-text-opacity));
}

.text-\[color\:var\(--fx-accent-lit\)\]{
  color: var(--fx-accent-lit);
}

.text-\[color\:var\(--fx-quiet-ink\)\]{
  color: var(--fx-quiet-ink);
}

.text-\[color\:var\(--fx-tail-ink\)\]{
  color: var(--fx-tail-ink);
}

.text-accent-foreground{
  color: hsl(var(--accent-foreground));
}

.text-amber-100{
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity));
}

.text-amber-100\/80{
  color: rgb(254 243 199 / 0.8);
}

.text-amber-100\/90{
  color: rgb(254 243 199 / 0.9);
}

.text-amber-200{
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity));
}

.text-amber-200\/80{
  color: rgb(253 230 138 / 0.8);
}

.text-amber-300{
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity));
}

.text-amber-400{
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

.text-amber-600{
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

.text-amber-700{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity));
}

.text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-blue-200{
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity));
}

.text-blue-300{
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity));
}

.text-blue-400{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

.text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.text-blue-700{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}

.text-blue-800{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}

.text-card-foreground{
  color: hsl(var(--card-foreground));
}

.text-current{
  color: currentColor;
}

.text-cyan-100\/80{
  color: rgb(207 250 254 / 0.8);
}

.text-cyan-300{
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity));
}

.text-cyan-300\/80{
  color: rgb(103 232 249 / 0.8);
}

.text-cyan-400{
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity));
}

.text-cyan-50{
  --tw-text-opacity: 1;
  color: rgb(236 254 255 / var(--tw-text-opacity));
}

.text-cyan-600{
  --tw-text-opacity: 1;
  color: rgb(8 145 178 / var(--tw-text-opacity));
}

.text-destructive{
  color: hsl(var(--destructive));
}

.text-destructive-foreground{
  color: hsl(var(--destructive-foreground));
}

.text-emerald-100{
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity));
}

.text-emerald-300{
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity));
}

.text-emerald-400{
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity));
}

.text-emerald-400\/70{
  color: rgb(52 211 153 / 0.7);
}

.text-emerald-50{
  --tw-text-opacity: 1;
  color: rgb(236 253 245 / var(--tw-text-opacity));
}

.text-foreground{
  color: hsl(var(--foreground));
}

.text-foreground\/50{
  color: hsl(var(--foreground) / 0.5);
}

.text-fuchsia-300\/70{
  color: rgb(240 171 252 / 0.7);
}

.text-gray-100{
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity));
}

.text-gray-200{
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity));
}

.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));
}

.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
}

.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

.text-green-200{
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity));
}

.text-green-300{
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity));
}

.text-green-400{
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity));
}

.text-green-500{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

.text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity));
}

.text-green-700{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity));
}

.text-green-800{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity));
}

.text-indigo-700{
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity));
}

.text-muted-foreground{
  color: hsl(var(--muted-foreground));
}

.text-neutral-100{
  --tw-text-opacity: 1;
  color: rgb(245 245 245 / var(--tw-text-opacity));
}

.text-neutral-200{
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity));
}

.text-neutral-300{
  --tw-text-opacity: 1;
  color: rgb(212 212 212 / var(--tw-text-opacity));
}

.text-neutral-400{
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));
}

.text-neutral-500{
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity));
}

.text-neutral-600{
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity));
}

.text-pink-300{
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / var(--tw-text-opacity));
}

.text-pink-400{
  --tw-text-opacity: 1;
  color: rgb(244 114 182 / var(--tw-text-opacity));
}

.text-popover-foreground{
  color: hsl(var(--popover-foreground));
}

.text-primary{
  color: hsl(var(--primary));
}

.text-primary-foreground{
  color: hsl(var(--primary-foreground));
}

.text-purple-300{
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity));
}

.text-purple-400{
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity));
}

.text-purple-500{
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity));
}

.text-purple-600{
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity));
}

.text-purple-700{
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity));
}

.text-red-100{
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity));
}

.text-red-200{
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity));
}

.text-red-300{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}

.text-red-400{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
}

.text-red-800{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

.text-rose-100{
  --tw-text-opacity: 1;
  color: rgb(255 228 230 / var(--tw-text-opacity));
}

.text-secondary-foreground{
  color: hsl(var(--secondary-foreground));
}

.text-sidebar-foreground{
  color: hsl(var(--sidebar-foreground));
}

.text-sidebar-foreground\/70{
  color: hsl(var(--sidebar-foreground) / 0.7);
}

.text-slate-900{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
}

.text-slate-950{
  --tw-text-opacity: 1;
  color: rgb(2 6 23 / var(--tw-text-opacity));
}

.text-transparent{
  color: transparent;
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-white\/20{
  color: rgb(255 255 255 / 0.2);
}

.text-white\/30{
  color: rgb(255 255 255 / 0.3);
}

.text-white\/35{
  color: rgb(255 255 255 / 0.35);
}

.text-white\/40{
  color: rgb(255 255 255 / 0.4);
}

.text-white\/45{
  color: rgb(255 255 255 / 0.45);
}

.text-white\/50{
  color: rgb(255 255 255 / 0.5);
}

.text-white\/55{
  color: rgb(255 255 255 / 0.55);
}

.text-white\/60{
  color: rgb(255 255 255 / 0.6);
}

.text-white\/65{
  color: rgb(255 255 255 / 0.65);
}

.text-white\/70{
  color: rgb(255 255 255 / 0.7);
}

.text-white\/75{
  color: rgb(255 255 255 / 0.75);
}

.text-white\/80{
  color: rgb(255 255 255 / 0.8);
}

.text-white\/85{
  color: rgb(255 255 255 / 0.85);
}

.text-white\/90{
  color: rgb(255 255 255 / 0.9);
}

.text-yellow-100{
  --tw-text-opacity: 1;
  color: rgb(254 249 195 / var(--tw-text-opacity));
}

.text-yellow-100\/70{
  color: rgb(254 249 195 / 0.7);
}

.text-yellow-200\/90{
  color: rgb(254 240 138 / 0.9);
}

.text-yellow-300{
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity));
}

.text-yellow-300\/90{
  color: rgb(253 224 71 / 0.9);
}

.text-yellow-400{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity));
}

.text-yellow-500{
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity));
}

.text-yellow-700{
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity));
}

.text-yellow-800{
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity));
}

.text-yellow-900{
  --tw-text-opacity: 1;
  color: rgb(113 63 18 / var(--tw-text-opacity));
}

.text-zinc-100{
  --tw-text-opacity: 1;
  color: rgb(244 244 245 / var(--tw-text-opacity));
}

.text-zinc-400{
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity));
}

.text-zinc-500{
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity));
}

.text-zinc-600{
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity));
}

.text-zinc-700{
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity));
}

.underline{
  text-decoration-line: underline;
}

.line-through{
  text-decoration-line: line-through;
}

.underline-offset-2{
  text-underline-offset: 2px;
}

.underline-offset-4{
  text-underline-offset: 4px;
}

.antialiased{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-\[\#3f5a70\]::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(63 90 112 / var(--tw-placeholder-opacity));
}

.placeholder-\[\#3f5a70\]::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(63 90 112 / var(--tw-placeholder-opacity));
}

.placeholder-\[\#737373\]::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(115 115 115 / var(--tw-placeholder-opacity));
}

.placeholder-\[\#737373\]::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(115 115 115 / var(--tw-placeholder-opacity));
}

.placeholder-gray-400::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}

.placeholder-gray-400::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}

.placeholder-gray-500::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity));
}

.placeholder-gray-500::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity));
}

.caret-blue-400{
  caret-color: #60a5fa;
}

.accent-\[\#00FF00\]{
  accent-color: #00FF00;
}

.accent-\[\#57d6f0\]{
  accent-color: #57d6f0;
}

.accent-\[\#5fe3a1\]{
  accent-color: #5fe3a1;
}

.accent-\[\#65dc9a\]{
  accent-color: #65dc9a;
}

.accent-\[\#65dcff\]{
  accent-color: #65dcff;
}

.accent-\[\#68d8d6\]{
  accent-color: #68d8d6;
}

.accent-\[\#7cc5ff\]{
  accent-color: #7cc5ff;
}

.accent-\[\#8fd9a8\]{
  accent-color: #8fd9a8;
}

.accent-\[\#9df0a4\]{
  accent-color: #9df0a4;
}

.accent-\[\#c07cff\]{
  accent-color: #c07cff;
}

.accent-\[\#c9a8ff\]{
  accent-color: #c9a8ff;
}

.accent-\[\#c9f24d\]{
  accent-color: #c9f24d;
}

.accent-\[\#d8a06a\]{
  accent-color: #d8a06a;
}

.accent-\[\#d9a441\]{
  accent-color: #d9a441;
}

.accent-\[\#e8c48a\]{
  accent-color: #e8c48a;
}

.accent-\[\#ff5f6d\]{
  accent-color: #ff5f6d;
}

.accent-\[\#ff7a5c\]{
  accent-color: #ff7a5c;
}

.accent-\[\#ff8fb1\]{
  accent-color: #ff8fb1;
}

.accent-\[\#ffb454\]{
  accent-color: #ffb454;
}

.accent-\[\#ffb54a\]{
  accent-color: #ffb54a;
}

.accent-\[\#ffd166\]{
  accent-color: #ffd166;
}

.accent-emerald-500{
  accent-color: #10b981;
}

.accent-sky-400{
  accent-color: #38bdf8;
}

.opacity-0{
  opacity: 0;
}

.opacity-100{
  opacity: 1;
}

.opacity-20{
  opacity: 0.2;
}

.opacity-25{
  opacity: 0.25;
}

.opacity-30{
  opacity: 0.3;
}

.opacity-35{
  opacity: 0.35;
}

.opacity-40{
  opacity: 0.4;
}

.opacity-45{
  opacity: 0.45;
}

.opacity-50{
  opacity: 0.5;
}

.opacity-55{
  opacity: 0.55;
}

.opacity-60{
  opacity: 0.6;
}

.opacity-70{
  opacity: 0.7;
}

.opacity-75{
  opacity: 0.75;
}

.opacity-80{
  opacity: 0.8;
}

.opacity-85{
  opacity: 0.85;
}

.opacity-90{
  opacity: 0.9;
}

.opacity-95{
  opacity: 0.95;
}

.opacity-\[0\.03\]{
  opacity: 0.03;
}

.opacity-\[0\.05\]{
  opacity: 0.05;
}

.opacity-\[0\.14\]{
  opacity: 0.14;
}

.opacity-\[0\.18\]{
  opacity: 0.18;
}

.opacity-\[0\.20\]{
  opacity: 0.20;
}

.opacity-\[0\.22\]{
  opacity: 0.22;
}

.opacity-\[0\.24\]{
  opacity: 0.24;
}

.opacity-\[0\.28\]{
  opacity: 0.28;
}

.opacity-\[0\.35\]{
  opacity: 0.35;
}

.opacity-\[0\.5\]{
  opacity: 0.5;
}

.mix-blend-overlay{
  mix-blend-mode: overlay;
}

.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\]{
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.15\)\]{
  --tw-shadow: 0 0 0 1px rgba(255,255,255,0.15);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.18\)\]{
  --tw-shadow: 0 0 0 1px rgba(255,255,255,0.18);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.35\)\]{
  --tw-shadow: 0 0 0 1px rgba(255,255,255,0.35);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_1px_rgba\(34\2c 197\2c 94\2c 0\.35\)\]{
  --tw-shadow: 0 0 0 1px rgba(34,197,94,0.35);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_2px_rgba\(96\2c 165\2c 250\2c 0\.28\)\]{
  --tw-shadow: 0 0 0 2px rgba(96,165,250,0.28);
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_3px_rgba\(239\2c 68\2c 68\2c 0\.06\)\]{
  --tw-shadow: 0 0 0 3px rgba(239,68,68,0.06);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_3px_rgba\(24\2c 210\2c 159\2c 0\.08\)\]{
  --tw-shadow: 0 0 0 3px rgba(24,210,159,0.08);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_10px_rgba\(232\2c 181\2c 74\2c \.3\)\]{
  --tw-shadow: 0 0 10px rgba(232,181,74,.3);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_10px_rgba\(255\2c 77\2c 166\2c 0\.95\)\]{
  --tw-shadow: 0 0 10px rgba(255,77,166,0.95);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_10px_rgba\(255\2c 93\2c 177\2c 0\.95\)\]{
  --tw-shadow: 0 0 10px rgba(255,93,177,0.95);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_12px_rgba\(43\2c 224\2c 122\2c 0\.45\)\]{
  --tw-shadow: 0 0 12px rgba(43,224,122,0.45);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_14px_rgba\(251\2c 191\2c 36\2c 0\.55\)\]{
  --tw-shadow: 0 0 14px rgba(251,191,36,0.55);
  --tw-shadow-colored: 0 0 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_52px_rgba\(245\2c 158\2c 11\2c 0\.26\)\]{
  --tw-shadow: 0 0 52px rgba(245,158,11,0.26);
  --tw-shadow-colored: 0 0 52px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_5px_rgba\(255\2c 255\2c 255\2c 0\.75\)\]{
  --tw-shadow: 0 0 5px rgba(255,255,255,0.75);
  --tw-shadow-colored: 0 0 5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_6px_rgba\(143\2c 217\2c 168\2c \.4\)\]{
  --tw-shadow: 0 0 6px rgba(143,217,168,.4);
  --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_8px_rgba\(180\2c 140\2c 255\2c \.35\)\]{
  --tw-shadow: 0 0 8px rgba(180,140,255,.35);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_8px_rgba\(255\2c 122\2c 92\2c \.25\)\]{
  --tw-shadow: 0 0 8px rgba(255,122,92,.25);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_8px_rgba\(255\2c 180\2c 84\2c \.25\)\]{
  --tw-shadow: 0 0 8px rgba(255,180,84,.25);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_8px_rgba\(255\2c 207\2c 74\2c \.35\)\]{
  --tw-shadow: 0 0 8px rgba(255,207,74,.35);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_8px_rgba\(255\2c 95\2c 109\2c \.35\)\]{
  --tw-shadow: 0 0 8px rgba(255,95,109,.35);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_8px_rgba\(95\2c 227\2c 161\2c \.25\)\]{
  --tw-shadow: 0 0 8px rgba(95,227,161,.25);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_10px_30px_rgba\(0\2c 0\2c 0\2c 0\.55\)\]{
  --tw-shadow: 0 10px 30px rgba(0,0,0,0.55);
  --tw-shadow-colored: 0 10px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_10px_36px_rgba\(0\2c 0\2c 0\2c \.7\)\]{
  --tw-shadow: 0 10px 36px rgba(0,0,0,.7);
  --tw-shadow-colored: 0 10px 36px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_10px_36px_rgba\(0\2c 0\2c 0\2c \.8\)\]{
  --tw-shadow: 0 10px 36px rgba(0,0,0,.8);
  --tw-shadow-colored: 0 10px 36px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_10px_40px_rgba\(0\2c 0\2c 0\2c \.8\)\]{
  --tw-shadow: 0 10px 40px rgba(0,0,0,.8);
  --tw-shadow-colored: 0 10px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_12px_30px_rgba\(0\2c 0\2c 0\2c 0\.22\)\]{
  --tw-shadow: 0 12px 30px rgba(0,0,0,0.22);
  --tw-shadow-colored: 0 12px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_12px_40px_rgba\(0\2c 0\2c 0\2c 0\.6\)\]{
  --tw-shadow: 0 12px 40px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 12px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_18px_45px_rgba\(0\2c 0\2c 0\2c 0\.45\)\]{
  --tw-shadow: 0 18px 45px rgba(0,0,0,0.45);
  --tw-shadow-colored: 0 18px 45px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_18px_48px_rgba\(0\2c 0\2c 0\2c 0\.22\)\]{
  --tw-shadow: 0 18px 48px rgba(0,0,0,0.22);
  --tw-shadow-colored: 0 18px 48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_18px_50px_rgba\(59\2c 130\2c 246\2c 0\.35\)\]{
  --tw-shadow: 0 18px 50px rgba(59,130,246,0.35);
  --tw-shadow-colored: 0 18px 50px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_18px_60px_rgba\(0\2c 0\2c 0\2c 0\.45\)\]{
  --tw-shadow: 0 18px 60px rgba(0,0,0,0.45);
  --tw-shadow-colored: 0 18px 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_18px_60px_rgba\(0\2c 0\2c 0\2c 0\.55\)\]{
  --tw-shadow: 0 18px 60px rgba(0,0,0,0.55);
  --tw-shadow-colored: 0 18px 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_20px_60px_rgba\(16\2c 185\2c 129\2c 0\.15\)\]{
  --tw-shadow: 0 20px 60px rgba(16,185,129,0.15);
  --tw-shadow-colored: 0 20px 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_22px_60px_rgba\(0\2c 0\2c 0\2c 0\.34\)\]{
  --tw-shadow: 0 22px 60px rgba(0,0,0,0.34);
  --tw-shadow-colored: 0 22px 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_24px_80px_rgba\(0\2c 0\2c 0\2c 0\.45\)\]{
  --tw-shadow: 0 24px 80px rgba(0,0,0,0.45);
  --tw-shadow-colored: 0 24px 80px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_24px_80px_rgba\(0\2c 0\2c 0\2c 0\.6\)\]{
  --tw-shadow: 0 24px 80px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 24px 80px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_30px_120px_rgba\(0\2c 0\2c 0\2c 0\.6\)\]{
  --tw-shadow: 0 30px 120px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 30px 120px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_16px_rgba\(0\2c 0\2c 0\2c \.6\)\]{
  --tw-shadow: 0 4px 16px rgba(0,0,0,.6);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_24px_rgba\(0\2c 0\2c 0\2c \.6\)\]{
  --tw-shadow: 0 6px 24px rgba(0,0,0,.6);
  --tw-shadow-colored: 0 6px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_8px_30px_rgba\(0\2c 0\2c 0\2c 0\.35\)\]{
  --tw-shadow: 0 8px 30px rgba(0,0,0,0.35);
  --tw-shadow-colored: 0 8px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.42\)\]{
  --tw-shadow: inset 0 0 0 1px rgba(255,255,255,0.42);
  --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.48\)\2c 0_18px_40px_rgba\(0\2c 0\2c 0\2c 0\.45\)\]{
  --tw-shadow: inset 0 0 0 1px rgba(255,255,255,0.48),0 18px 40px rgba(0,0,0,0.45);
  --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color), 0 18px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.55\)\2c 0_18px_40px_rgba\(0\2c 0\2c 0\2c 0\.55\)\]{
  --tw-shadow: inset 0 0 0 1px rgba(255,255,255,0.55),0 18px 40px rgba(0,0,0,0.55);
  --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color), 0 18px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.25\)\]{
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.35\)\]{
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_1px_2px_rgba\(255\2c 255\2c 255\2c \.12\)\]{
  --tw-shadow: inset 0 1px 2px rgba(255,255,255,.12);
  --tw-shadow-colored: inset 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_2px_6px_rgba\(0\2c 0\2c 0\2c \.25\)\]{
  --tw-shadow: inset 0 2px 6px rgba(0,0,0,.25);
  --tw-shadow-colored: inset 0 2px 6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-inner{
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline{
  outline-style: solid;
}

.\!ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-0{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-inset{
  --tw-ring-inset: inset;
}

.ring-\[\#22c55e\]{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
}

.ring-\[\#2BE07A\]\/40{
  --tw-ring-color: rgb(43 224 122 / 0.4);
}

.ring-\[\#3F4756\]{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(63 71 86 / var(--tw-ring-opacity));
}

.ring-\[\#73ff86\]\/50{
  --tw-ring-color: rgb(115 255 134 / 0.5);
}

.ring-\[\#ffb454\]{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 180 84 / var(--tw-ring-opacity));
}

.ring-\[color\:var\(--fx-accent\)\]{
  --tw-ring-color: var(--fx-accent);
}

.ring-blue-500{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}

.ring-ring{
  --tw-ring-color: hsl(var(--ring));
}

.ring-sidebar-ring{
  --tw-ring-color: hsl(var(--sidebar-ring));
}

.ring-white{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
}

.ring-white\/10{
  --tw-ring-color: rgb(255 255 255 / 0.1);
}

.ring-offset-background{
  --tw-ring-offset-color: hsl(var(--background));
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-\[120px\]{
  --tw-blur: blur(120px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-\[125px\]{
  --tw-blur: blur(125px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-\[130px\]{
  --tw-blur: blur(130px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-\[135px\]{
  --tw-blur: blur(135px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.brightness-110{
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.contrast-125{
  --tw-contrast: contrast(1.25);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_0_10px_rgba\(165\2c 180\2c 252\2c 0\.35\)\]{
  --tw-drop-shadow: drop-shadow(0 0 10px rgba(165,180,252,0.35));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_0_14px_rgba\(165\2c 180\2c 252\2c 0\.6\)\]{
  --tw-drop-shadow: drop-shadow(0 0 14px rgba(165,180,252,0.6));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale{
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert{
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.saturate-150{
  --tw-saturate: saturate(1.5);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.sepia{
  --tw-sepia: sepia(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.\!filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur{
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-2xl{
  --tw-backdrop-blur: blur(40px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-lg{
  --tw-backdrop-blur: blur(16px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md{
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm{
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-xl{
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter{
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[flex-basis\2c width\]{
  transition-property: flex-basis,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[height\]{
  transition-property: height;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[left\2c right\2c width\]{
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[left\]{
  transition-property: left;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[margin\2c opacity\]{
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\2c height\2c padding\]{
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\]{
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-100{
  transition-duration: 100ms;
}

.duration-1000{
  transition-duration: 1000ms;
}

.duration-150{
  transition-duration: 150ms;
}

.duration-200{
  transition-duration: 200ms;
}

.duration-300{
  transition-duration: 300ms;
}

.duration-500{
  transition-duration: 500ms;
}

.duration-75{
  transition-duration: 75ms;
}

.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear{
  transition-timing-function: linear;
}

.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.will-change-\[height\]{
  will-change: height;
}

@keyframes enter{

  from{
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes exit{

  to{
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}

.animate-in{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.fade-in{
  --tw-enter-opacity: 0;
}

.fade-in-0{
  --tw-enter-opacity: 0;
}

.fade-in-80{
  --tw-enter-opacity: 0.8;
}

.fade-out{
  --tw-exit-opacity: 0;
}

.zoom-in{
  --tw-enter-scale: 0;
}

.zoom-in-95{
  --tw-enter-scale: .95;
}

.zoom-out{
  --tw-exit-scale: 0;
}

.duration-100{
  animation-duration: 100ms;
}

.duration-1000{
  animation-duration: 1000ms;
}

.duration-150{
  animation-duration: 150ms;
}

.duration-200{
  animation-duration: 200ms;
}

.duration-300{
  animation-duration: 300ms;
}

.duration-500{
  animation-duration: 500ms;
}

.duration-75{
  animation-duration: 75ms;
}

.ease-in-out{
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear{
  animation-timing-function: linear;
}

.ease-out{
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\!running{
  animation-play-state: running !important;
}

.running{
  animation-play-state: running;
}

.\!paused{
  animation-play-state: paused !important;
}

.paused{
  animation-play-state: paused;
}

.\[-webkit-overflow-scrolling\:touch\]{
  -webkit-overflow-scrolling: touch;
}

.\[scrollbar-gutter\:stable\]{
  scrollbar-gutter: stable;
}

.\[vite\:load-fallback\]{
  vite: load-fallback;
}

/* ── The panel band ─────────────────────────────────────────────────────────
   The strip of desk under the mixer that every docked menu fills: the five
   samplers, FX, the FX playground, Recipes and the artist menu. They are all
   position:fixed off these five numbers, so this is the one place the geometry
   is written down.

   These are FALLBACKS. SoundcraftTheme measures the live desk and overwrites
   them on <html> (see its publishDeskBand effect) — that measurement is what
   makes every menu's top edge actually meet the bottom of the mixer at any
   window size, and what keeps them inside the console once it is capped and
   centred on a wide display. The values below are what the band came to on a
   1600x860 window, kept so a deck rendered OUTSIDE the console (Studio3D, the
   design labs) still lands somewhere sane. */

:root {
  --spotify-menu-top: 480px;   /* top edge of the band = bottom of the mixer */
  --spotify-menu-left: 10px;   /* left wall = right edge of the button rail */
  --soundcraft-width: 85px;    /* width of the SoundcraftTheme buttons column */
  --spotify-menu-right: 0px;   /* inset from the viewport to the desk's right */
  --spotify-menu-bottom: 0px;  /* inset from the viewport to the desk's bottom */
  --sdh-chrome: 22px;          /* the sampler tab strip that rides the band top */
}

/* Import Desyrel font from cassette component */

@font-face {
  font-family: "Desyrel";
  src:
    url(https://manzdev.github.io/twitch-cassette/assets/desyrel.woff) format("woff"),
    url(https://manzdev.github.io/twitch-cassette/assets/desyrel.woff2) format("woff2");
}

/* Custom animations */

/* Button press animation */

.btn-pressed {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Text shadow for cassette-style text */

.text-shadow {
  text-shadow: 0 0 1px #444;
}

/* 3D button style for transport */

.btn-3d {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 
              inset 0 1px 0 rgba(255, 255, 255, 0.2),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.1s ease;
  position: relative;
  top: 0;
}

.btn-3d:active, .btn-3d.active {
  top: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 
              inset 0 1px 0 rgba(255, 255, 255, 0.2),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Pulse animation for nspire button */

@keyframes pulse-effect {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(255, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

.pulse-animation {
  animation: pulse-effect 1.5s ease-out;
}

/* nSpire wild animation */

.nspire-wild {
  animation: wild-glow 3s ease-in-out;
  position: relative;
  z-index: 10;
}

@keyframes wild-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    transform: scale(1);
  }
  
  20% {
    box-shadow: 0 0 30px 10px rgba(255, 50, 50, 0.8);
    transform: scale(1.1);
  }
  
  80% {
    box-shadow: 0 0 15px 5px rgba(255, 150, 0, 0.6);
    transform: scale(1.05);
  }
  
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    transform: scale(1);
  }
}

/* Screen flash overlay for nspire */

.screen-flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(255,50,50,0.3) 0%, rgba(255,150,0,0.2) 70%, rgba(0,0,0,0) 100%);
  animation: screen-flash-anim 3s ease-out forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes screen-flash-anim {
  0% {
    opacity: 0;
  }
  
  15% {
    opacity: 0.8;
  }
  
  85% {
    opacity: 0.8;
  }
  
  100% {
    opacity: 0;
  }
}

/* Sample change text animation */

.sample-change-text {
  animation: sample-text-anim 3s ease-in-out forwards;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.75rem;
  color: white;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  z-index: 10;
  pointer-events: none;
  background-color: #2563eb;
}

@keyframes sample-text-anim {
  0% {
    opacity: 0;
  }
  
  10% {
    opacity: 1;
  }
  
  90% {
    opacity: 1;
  }
  
  100% {
    opacity: 0;
  }
}

/* Dynamic viewport height for all browsers */

:root {
  --vh: 1vh;
}

/* App container styles */

.app-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}

/* Reset height to ensure proper rendering */

#root {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* THE WHITE FLASH BEHIND THE CONSOLE.
 *
 * The page body resolves to --background, which is 0 0% 100% — pure white —
 * because the dark value only applies under a .dark root the studio never
 * sets. Every panel paints its own dark surface on top, so you never see the
 * white while things are still.
 *
 * You see it the instant the layout has a gap. Switching menus (sampler back
 * to genres) swaps one panel for another, and for the frame or two before the
 * incoming panel has laid out, there is nothing painted over that strip and
 * the white body shows straight through. It reads exactly as reported: a white
 * sheet appearing above the TV and settling as the new panel arrives.
 *
 * The console is a dark instrument. Its backdrop should be dark at every
 * moment, including the moments between two panels.
 */

html, body {
  background-color: #0b0c10;
}

/* Ensure body fills viewport on all browsers */

html, body {
  width: 100%;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}

/* Force viewport meta tag behavior */

@supports (-webkit-touch-callout: none) {
  /* iOS specific */
  html, body {
    height: -webkit-fill-available;
  }
}

:root {
      --background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 25 5.3% 44.7%;
--popover: 0 0% 100%;
--popover-foreground: 20 14.3% 4.1%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
--border: 20 5.9% 90%;
--input: 20 5.9% 90%;
--primary: 207 90% 54%;
--primary-foreground: 211 100% 99%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
--accent: 60 4.8% 95.9%;
--accent-foreground: 24 9.8% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--ring: 20 14.3% 4.1%;
--radius: 0.5rem;
  }

.dark {
      --background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--primary: 207 90% 54%;
--primary-foreground: 211 100% 99%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--ring: 240 4.9% 83.9%;
--radius: 0.5rem;
  }

/* Hold a mixer mute for half a second to solo that strip: it pulses blue while
   every other strip dims back, so the soloed track reads at a glance. */

@keyframes solo-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.85), 0 4px 6px rgba(0, 0, 0, 0.3); }
  50%      { box-shadow: 0 0 14px 4px rgba(56, 189, 248, 0.95), 0 4px 6px rgba(0, 0, 0, 0.3); }
}

.solo-blink { animation: solo-blink 0.9s ease-in-out infinite; }

.solo-dimmed { opacity: 0.35; filter: saturate(0.5); transition: opacity 0.2s ease, filter 0.2s ease; }

/* The Automation lamp. Blinks only when a strip has been overruled by hand —
   the automation is still running, but what you hear no longer matches it. */

@keyframes nsp-auto-blink { 0%, 45% { opacity: 1 } 55%, 100% { opacity: .22 } }

.nsp-auto-led--blink { animation: nsp-auto-blink .8s steps(1, end) infinite; }

@media (prefers-reduced-motion: reduce) { .nsp-auto-led--blink { animation: none } }

/* Strip tape-labels: richer ink than the flat Tailwind 500s, same state
   machinery — green is live, red is muted, blue solo (untouched sky-500),
   and sampler/melody/808 keep their identities. Scoped to the label button's
   exact class combo so nothing else in the app shifts hue. */

button.btn-3d.h-10.pointer-events-none.bg-green-500 {
  background: linear-gradient(180deg, #43d67c 0%, #2eab5e 62%, #279755 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -7px 10px rgba(0, 56, 24, 0.32);
}

button.btn-3d.h-10.pointer-events-none.bg-blue-500 {
  background: linear-gradient(180deg, #4d9fe0 0%, #3379bb 62%, #2c68a4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -7px 10px rgba(6, 34, 64, 0.32);
}

button.btn-3d.h-10.pointer-events-none.bg-purple-500 {
  background: linear-gradient(180deg, #ab6fe3 0%, #8b4fc6 62%, #7a43b0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -7px 10px rgba(38, 10, 66, 0.32);
}

button.btn-3d.h-10.pointer-events-none.bg-red-500 {
  background: linear-gradient(180deg, #e05c56 0%, #bf3d38 62%, #a83430 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -7px 10px rgba(70, 8, 8, 0.32);
}

/* NEW DRUMS is the primary action of the whole app — "hit new drums" IS the
   loop — but it shipped in the same flat #444 as FILLS and SONG MODE beside
   it, so the one key you press most looked like the two you rarely touch. It
   is the machined key on that chain now: bone face, dark ink, the same card
   stock as the designation strips below it. Hover hangs off the wrapper
   because the button is pointer-events-none (an overlay div takes the click),
   so its own hover: variant never fired. */

button.btn-3d.newdrums-key {
  background: linear-gradient(178deg, #f2ece0 0%, #ddd5c5 52%, #c7bda9 100%);
  border: 1px solid #16171a;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 -3px 6px rgba(120, 104, 74, 0.30) inset,
    0 3px 6px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.7);
  transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
}

button.btn-3d.newdrums-key span {
  color: #1b2436;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.group:hover > button.btn-3d.newdrums-key {
  background: linear-gradient(178deg, #fdf8ee 0%, #eae2d2 52%, #d4cab6 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -3px 6px rgba(120, 104, 74, 0.24) inset,
    0 4px 8px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.7);
}

.group:active > button.btn-3d.newdrums-key,
button.btn-3d.newdrums-key.button-pressed {
  background: linear-gradient(178deg, #d5cdbc 0%, #c5bca8 52%, #b8ae9a 100%);
  transform: translateY(1px);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.5) inset,
    0 1px 1px rgba(0, 0, 0, 0.4);
}

/* The per-strip NEW keys (and KNOCK) all share .new-button with NEW DRUMS.
   They briefly picked up the bone face by accident when NEW DRUMS was styled
   through that shared class; scoping it fixed the collision but dropped these
   back to a flat #333 slab. They are proper keys now — a lighter machined
   face with a lit top edge, so they read as pressable and rhyme with the bone
   NEW DRUMS above without competing with it for primary. Colour-carrying
   siblings (KNOCK's red, the STOPs) keep their own face. */

button.btn-3d.new-button:not(.newdrums-key).bg-\[\#444444\] {
  background: linear-gradient(178deg, #6c6e75 0%, #4b4d53 52%, #3c3e43 100%);
  border: 1px solid #17181b;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 -2px 5px rgba(0, 0, 0, 0.4) inset,
    0 2px 4px rgba(0, 0, 0, 0.5);
  transition: background 0.13s ease, box-shadow 0.13s ease;
}

button.btn-3d.new-button:not(.newdrums-key).bg-\[\#444444\], button.btn-3d.new-button:not(.newdrums-key).bg-\[\#444444\] span {
  color: #eceef2;
  letter-spacing: 0.07em;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

/* ---- FX chips on the melody strip (GROSS / TONEFLX) -----------------------
   These were the last two controls still wearing their function as a body
   colour — a purple slab and an amber slab — plus an emoji glyph and a
   zero-offset colour halo behind the label. The board already settled on one
   chip body with a small lamp for identity (see the top rail); these join it.
   The emoji went with them: a system glyph on a machined key never matches the
   key it sits on, and at 8px it was unreadable anyway. */

button.btn-3d.nsp-fxchip {
  background: linear-gradient(178deg, #5c5e66 0%, #43454b 52%, #35373c 100%);
  border: 1px solid #17181b;
  color: #e6e8ee;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 -2px 5px rgba(0, 0, 0, 0.4) inset,
    0 2px 4px rgba(0, 0, 0, 0.5);
  transition: background 0.13s ease, box-shadow 0.13s ease; min-width: 0; overflow: hidden;
}

/* The label must be allowed to give. Without min-width:0 the text is treated
   as an unshrinkable floor and the chip grows past its track column instead —
   which is exactly how TONEFLX ended up sitting over VOCALS. */

button.btn-3d.nsp-fxchip span:not(.nsp-fxled) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* No extra tracking here — at 8px in a 42px half-column every 0.05em is a
     character's worth of room, and the labels were ellipsising to "GR…". */
  letter-spacing: 0;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

.group:hover > button.btn-3d.nsp-fxchip,
div.cursor-pointer:hover > button.btn-3d.nsp-fxchip {
  background: linear-gradient(178deg, #6b6d76 0%, #4e5057 52%, #3f4147 100%);
}

.nsp-fxled {
  display: inline-block;
  width: 4px;
  height: 4px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6), 0 0 4px currentColor;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

/* A lamp that is always lit tells you nothing. Dark when the processor is
   bypassed; lit and blinking while it is actually doing something. */

.nsp-fxled[data-lit='0'] {
  filter: brightness(0.28) saturate(0.5);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
}

.nsp-fxled[data-lit='1'] {
  filter: brightness(1.15);
  animation: fxGlobalBlink 0.85s steps(2, end) infinite;
}

/* ---- Drum pattern digits --------------------------------------------------
   They read as Tailwind swatches: text-green-500 lit, text-gray-500 dark. But
   a dark LED is nearly black, not mid-grey — the off digits were bright enough
   to look active, so the row never showed at a glance which patterns were
   armed. Proper lamp states now: unlit segments, and a real glow when on. */

.nsp-pat-digit {
  color: #34383f;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

.nsp-pat-digit--on {
  color: #5cf08a;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.55), 0 0 15px rgba(74, 222, 128, 0.2);
}

/* ---- Transport chain (FILLS / SONG MODE / TEXTURE) ------------------------
   NEW DRUMS became the one bone key on this row, so its neighbours had to stop
   competing as flat mid-grey slabs. Same machined face as the strip NEW keys,
   which makes the row read as one chain with a single primary. TEXTURE keeps
   its purple legend and its own status lamp; only the slab colour goes. */

button.btn-3d.h-8.bg-\[\#555555\],
button.btn-3d.h-8.bg-\[\#4b435f\] {
  background: linear-gradient(178deg, #6c6e75 0%, #4b4d53 52%, #3c3e43 100%);
  border: 1px solid #17181b;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 -2px 5px rgba(0, 0, 0, 0.4) inset,
    0 2px 4px rgba(0, 0, 0, 0.5);
  transition: background 0.13s ease, box-shadow 0.13s ease;
}

button.btn-3d.h-8.bg-\[\#555555\] span { color: #eceef2; letter-spacing: 0.06em; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6); }

/* ---- STOP keys ------------------------------------------------------------
   Stopping a lane is the one destructive-feeling action on a strip, so the red
   stays — it was the flat slab that had to go, now that every key around it is
   machined. Same face as the chain, tinted rather than painted. */

button.btn-3d.stop-button {
  background: linear-gradient(178deg, #6d3230 0%, #4a2222 52%, #3c1c1c 100%);
  border: 1px solid #1b1010;
  color: #ffb3a6;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 -2px 5px rgba(0, 0, 0, 0.45) inset,
    0 2px 4px rgba(0, 0, 0, 0.5);
  transition: background 0.13s ease;
}

button.btn-3d.stop-button:hover {
  background: linear-gradient(178deg, #843b39 0%, #5c2a29 52%, #4a2322 100%);
}

/* ---- 808 source tag -------------------------------------------------------
   A state readout, not a button you hunt for: it says whether the 808 is
   following the kick or its own MIDI line. It carried a glow halo in BOTH
   states, so the lit state never actually read as lit. Amber lamp glow now
   belongs to the KICK state alone. */

button.btn-3d.new-button[title*="808 follows"] span {
  letter-spacing: 0.07em;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

/* ---- Muted channel --------------------------------------------------------
   Mute has to be legible across twelve strips without staring. A blunt opacity
   is the wrong tool on its own: too low and the fader looks broken, too high
   and the state vanishes. Dim AND desaturate instead — the muted strip goes
   grey and recedes, but the cap stays visible and grabbable, which is the
   behaviour a real desk has when a channel is off. */

.nsp-fader {
  opacity: 1;
  transition: opacity 0.16s ease, filter 0.16s ease;
}

.nsp-fader--muted {
  opacity: 0.42;
  filter: saturate(0.2) brightness(0.82);
}

/* ---- Master column --------------------------------------------------------
   The last cluster still speaking in defaults: a bold grey "MASTER", a plain
   "Tempo", two flat #333 steppers and a flat black number box. Brought into
   the board's own language — engraved legends, machined keys, and a readout
   that sits down IN the panel rather than on top of it. */

.nsp-panel-legend {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a0a4ad;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.8);
}

/* Same machined face as the strip NEW keys and the transport chain, so the
   steppers read as part of one desk instead of two flat slabs. */

button.btn-3d.nsp-step-key {
  background: linear-gradient(178deg, #6c6e75 0%, #4b4d53 52%, #3c3e43 100%);
  border: 1px solid #17181b;
  color: #eceef2;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 -2px 5px rgba(0, 0, 0, 0.4) inset,
    0 2px 4px rgba(0, 0, 0, 0.5);
  transition: background 0.13s ease, box-shadow 0.13s ease, transform 0.1s ease;
}

button.btn-3d.nsp-step-key:hover {
  background: linear-gradient(178deg, #7b7d85 0%, #565860 52%, #46484e 100%);
}

button.btn-3d.nsp-step-key:active {
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) inset;
}

/* A machined window cut into the panel. The numerals stay the board's own
   off-white — this is a milled readout, not a lit display; the tube is the
   only thing on this surface that glows. */

.nsp-tempo-readout {
  background: linear-gradient(180deg, #0a0b0d 0%, #121316 60%, #0d0e11 100%);
  border: 1px solid #050506;
  color: #e7e9ee;
  letter-spacing: 0.04em;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.07);
}

/* ---- Transport row --------------------------------------------------------
   Six identical flat #333 slabs: chat, rewind, play, stop, forward, record.
   Machined now, like every other key on the desk. Scoped by `md:p-4`, which
   only this row carries — `bg-[#333333]` alone appears 62 times in the theme,
   on everything from 6px strip toggles to dividers. */

button.bg-\[\#333333\].p-2.md\:p-4.rounded-md {
  background: linear-gradient(178deg, #64666d 0%, #45474d 52%, #37393e 100%);
  border: 1px solid #17181b;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 -2px 6px rgba(0, 0, 0, 0.42) inset,
    0 2px 5px rgba(0, 0, 0, 0.5);
  transition: background 0.13s ease, box-shadow 0.13s ease, transform 0.1s ease;
}

button.bg-\[\#333333\].p-2.md\:p-4.rounded-md:hover {
  background: linear-gradient(178deg, #74767e 0%, #4f515a 52%, #404248 100%);
}

button.bg-\[\#333333\].p-2.md\:p-4.rounded-md:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) inset;
}

/* RECORD is the one transport key with consequences, so it keeps its red — but
   as a lamp in a machined key, not a red glyph on a grey slab. The others are
   transport; this one commits. */

button.bg-\[\#333333\].p-2.md\:p-4.rounded-md.text-\[\#FF0000\] {
  background: linear-gradient(178deg, #6d3230 0%, #4a2222 52%, #3c1c1c 100%);
  border-color: #1b1010;
}

button.bg-\[\#333333\].p-2.md\:p-4.rounded-md.text-\[\#FF0000\]:hover {
  background: linear-gradient(178deg, #843b39 0%, #5c2a29 52%, #4a2322 100%);
}

/* ---- Control row ---------------------------------------------------------
   NOT FIXED — recorded so the next attempt does not start from scratch.

   The tool rail is an absolute overlay pinned right on the same row the NEW
   DRUMS chain occupies. Below ~1250px there is not room for both: measured at
   1024, nine overlapping pairs — PITCH·LOCK on NEW DRUMS, Auto across TEXTURE
   and FILLS, Wave over SONG MODE, STX over RESET.

   Stacking the rail onto its own line does NOT solve it, which is what I tried
   here and reverted: the chain lives inside a sibling that is itself
   `absolute left-0 right-[60%] top-1/2` with zero height, so it contributes
   nothing to a column layout and keeps overlaying wherever it is pinned. Any
   real fix has to take that wrapper out of absolute positioning too, and it
   carries measured channel-aligned children (the drum digits and their
   connecting lines), so that is a deliberate piece of work rather than a
   media query. The `.nsp-control-row` hook is left in place for it. */

/* ============================================================================
   VOCAL GENRE PICKER — a track sheet, not a stack of sections.
   ----------------------------------------------------------------------------
   First rebuild made this six bordered groups, each with its own stacked
   legend: 268 x 520px of panel for eleven options, with three of the six rows
   holding a single item and "Rap" orphaned onto a line of its own. All that
   structure was spent describing groups instead of showing choices.

   The data is ragged — four decades carrying one to four styles each, plus two
   sources that are not decades — so it is laid out the way a tape box is
   labelled: the decade in a narrow gutter you can read straight down, its
   styles running off to the right on one line, hairline rules between. Same
   eleven options in roughly a third of the height.
   ============================================================================ */

.nsp-vox-menu {
  position: fixed;
  z-index: 9999;
  width: 336px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  border-radius: 7px;
  padding-bottom: 2px;
  background: linear-gradient(178deg, #35373d 0%, #26272c 45%, #1e1f23 100%);
  border: 1px solid #131417;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 18px 40px rgba(0, 0, 0, 0.75);
}

.nsp-vox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nsp-vox-title {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5cf08a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 -1px 1px rgba(0, 0, 0, 0.8);
}

.nsp-vox-close {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b9bcc4;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid #17181b;
  background: linear-gradient(178deg, #56585f 0%, #3f4147 60%, #34363b 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.13) inset;
}

.nsp-vox-close:hover { color: #eceef2; }

/* Decade gutter + its styles. One line per decade. */

.nsp-vox-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
}

.nsp-vox-row + .nsp-vox-row { border-top: 1px solid rgba(0, 0, 0, 0.45); }

/* Stamped on the box, not a heading — right-aligned so the numerals line up
   down the column the way a written label sheet does. */

.nsp-vox-decade {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: right;
  color: #7e828b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 -1px 1px rgba(0, 0, 0, 0.8);
  font-variant-numeric: tabular-nums;
}

.nsp-vox-keys { display: flex; flex-wrap: wrap; gap: 5px; }

.nsp-vox-key {
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #17181b;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #dfe1e6;
  cursor: pointer;
  background: linear-gradient(178deg, #6c6e75 0%, #4b4d53 52%, #3c3e43 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 -2px 5px rgba(0, 0, 0, 0.4) inset,
    0 2px 4px rgba(0, 0, 0, 0.5);
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease;
}

.nsp-vox-key:hover { background: linear-gradient(178deg, #7b7d85 0%, #565860 52%, #46484e 100%); }

.nsp-vox-key:active { transform: translateY(1px); }

.nsp-vox-key:focus-visible,
.nsp-vox-close:focus-visible { outline: 2px solid #5cf08a; outline-offset: 2px; }

/* The chosen key lights. No lamp glyph needed when the key itself can be lit —
   that was one accessory too many on a control this small. */

.nsp-vox-key.is-on {
  color: #eafff2;
  border-color: #17402a;
  background: linear-gradient(178deg, #3c8659 0%, #2a6340 52%, #204d32 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -2px 5px rgba(0, 0, 0, 0.35) inset,
    0 0 8px rgba(74, 222, 128, 0.3);
}

.nsp-vox-key.is-preview {
  border-color: #2a5e40;
  background: linear-gradient(178deg, #5f6d64 0%, #454f49 52%, #384039 100%);
}

/* ============================================================================
   TYPE ROLES — four voices, one job each.
   ----------------------------------------------------------------------------
   Desyrel  — the hand. Tape labels and designation cards, nothing else.
   Barlow Condensed — the panel. Engraved legends and every key cap.
   VT323 — the tube. The CRT's own on-screen display, and only inside it.
   --nsp-data-font — the numerals. Anything the desk MEASURES: tempo, pattern
   digits, counts.

   That last role had no font. Digits were set in bare `monospace`, which
   resolves to a different face on every OS, and several readouts asked for
   "Chicago, Monaco" — two Mac-only faces that on this Windows machine matched
   nothing and silently fell through to that same generic monospace. Numerals
   also need to be TABULAR or they jitter as they count: a proportional 1 is
   narrower than a 0, so a tempo ticking 119 -> 120 shifts under the eye.
   ============================================================================ */

:root {
  --nsp-data-font: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

.nsp-pat-digit,
.nsp-tempo-readout,
.nsp-vox-decade {
  font-family: var(--nsp-data-font);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "kern" 1, "tnum" 1;
}

/* The decade gutter is a label, not a measurement — it keeps the panel voice
   and borrows only the tabular figures so the numerals line up down the column. */

.nsp-vox-decade { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; }

/* The tape and the ink. The box is the writable area — the full channel width;
   the ink is the writing, sized by TapeLabel to fill it on one line. */

.nsp-tape-fit {
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.nsp-tape-ink {
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  /* Set by TapeLabel; this is only the pre-measurement value so nothing flashes
     at the wrong size on the first paint. */
  font-size: 13px;
}

/* Reaching a control from across the room.
   Some faceplate controls are drawn small on purpose — a 7px pattern step, a
   13px LED, a nudge caret the size of its glyph. Growing them would break the
   panel they are modelled on, so instead each one carries an invisible pad that
   catches the pointer before it misses. The pad is painted by a pseudo-element,
   so it costs no layout and changes nothing on screen.

   Pick the size by how close the neighbours are: -8px for a control standing on
   its own, -4px for one in a run of siblings, where a bigger pad would start
   swallowing the click meant for the control next door. */

.nsp-hit { position: relative; }

.nsp-hit::after {
  content: '';
  position: absolute;
  inset: -8px;
}

.nsp-hit-sm::after { inset: -4px; }

/* Vertical-only, for controls in a horizontal row: widening these would cross
   into the neighbour, but there is always slack above and below. */

.nsp-hit-y::after { inset: -8px 0; }

/* Horizontal-only, for controls stacked vertically (up/down carets). */

.nsp-hit-x::after { inset: 0 -8px; }

/* A shallower vertical pad, for rows that stack close enough that the full
   8px would reach into the row above. */

.nsp-hit-y-sm::after { inset: -4px 0; }

/* Rows close together, nothing either side: take the width and only half the
   height. */

.nsp-hit-row::after { inset: -4px -8px; }

.file\:border-0::file-selector-button{
  border-width: 0px;
}

.file\:bg-transparent::file-selector-button{
  background-color: transparent;
}

.file\:text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button{
  font-weight: 500;
}

.file\:text-foreground::file-selector-button{
  color: hsl(var(--foreground));
}

.placeholder\:text-\[\#4C5464\]::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(76 84 100 / var(--tw-text-opacity));
}

.placeholder\:text-\[\#4C5464\]::placeholder{
  --tw-text-opacity: 1;
  color: rgb(76 84 100 / var(--tw-text-opacity));
}

.placeholder\:text-muted-foreground::-moz-placeholder{
  color: hsl(var(--muted-foreground));
}

.placeholder\:text-muted-foreground::placeholder{
  color: hsl(var(--muted-foreground));
}

.placeholder\:text-white\/30::-moz-placeholder{
  color: rgb(255 255 255 / 0.3);
}

.placeholder\:text-white\/30::placeholder{
  color: rgb(255 255 255 / 0.3);
}

.placeholder\:text-white\/35::-moz-placeholder{
  color: rgb(255 255 255 / 0.35);
}

.placeholder\:text-white\/35::placeholder{
  color: rgb(255 255 255 / 0.35);
}

.placeholder\:text-zinc-700::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity));
}

.placeholder\:text-zinc-700::placeholder{
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity));
}

.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}

.after\:-inset-2::after{
  content: var(--tw-content);
  inset: -0.5rem;
}

.after\:inset-y-0::after{
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:left-1\/2::after{
  content: var(--tw-content);
  left: 50%;
}

.after\:w-1::after{
  content: var(--tw-content);
  width: 0.25rem;
}

.after\:w-\[2px\]::after{
  content: var(--tw-content);
  width: 2px;
}

.after\:-translate-x-1\/2::after{
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.first\:rounded-l-md:first-child{
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.first\:border-l:first-child{
  border-left-width: 1px;
}

.last\:rounded-r-md:last-child{
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.last\:border-0:last-child{
  border-width: 0px;
}

.focus-within\:relative:focus-within{
  position: relative;
}

.focus-within\:z-20:focus-within{
  z-index: 20;
}

.hover\:-translate-y-0:hover{
  --tw-translate-y: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:-translate-y-1:hover{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-110:hover{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.01\]:hover{
  --tw-scale-x: 1.01;
  --tw-scale-y: 1.01;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.02\]:hover{
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-\[\#00A3FF\]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(0 163 255 / var(--tw-border-opacity));
}

.hover\:border-\[\#00ff00\]\/50:hover{
  border-color: rgb(0 255 0 / 0.5);
}

.hover\:border-\[\#222\]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(34 34 34 / var(--tw-border-opacity));
}

.hover\:border-\[\#241d14\]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(36 29 20 / var(--tw-border-opacity));
}

.hover\:border-\[\#2f6b3c\]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(47 107 60 / var(--tw-border-opacity));
}

.hover\:border-\[\#3a3a3e\]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(58 58 62 / var(--tw-border-opacity));
}

.hover\:border-\[\#4C5464\]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(76 84 100 / var(--tw-border-opacity));
}

.hover\:border-\[\#55555b\]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(85 85 91 / var(--tw-border-opacity));
}

.hover\:border-\[\#65dcff\]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(101 220 255 / var(--tw-border-opacity));
}

.hover\:border-\[\#667eea\]\/40:hover{
  border-color: rgb(102 126 234 / 0.4);
}

.hover\:border-\[\#6a6a6a\]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(106 106 106 / var(--tw-border-opacity));
}

.hover\:border-\[\#E8B54A\]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(232 181 74 / var(--tw-border-opacity));
}

.hover\:border-\[\#a8b4c8\]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(168 180 200 / var(--tw-border-opacity));
}

.hover\:border-\[color\:var\(--fx-accent\)\]:hover{
  border-color: var(--fx-accent);
}

.hover\:border-blue-400\/50:hover{
  border-color: rgb(96 165 250 / 0.5);
}

.hover\:border-gray-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.hover\:border-gray-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity));
}

.hover\:border-gray-600:hover{
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity));
}

.hover\:border-neutral-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(163 163 163 / var(--tw-border-opacity));
}

.hover\:border-neutral-700:hover{
  --tw-border-opacity: 1;
  border-color: rgb(64 64 64 / var(--tw-border-opacity));
}

.hover\:border-purple-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(192 132 252 / var(--tw-border-opacity));
}

.hover\:border-purple-500\/50:hover{
  border-color: rgb(168 85 247 / 0.5);
}

.hover\:border-white\/15:hover{
  border-color: rgb(255 255 255 / 0.15);
}

.hover\:border-white\/20:hover{
  border-color: rgb(255 255 255 / 0.2);
}

.hover\:border-white\/25:hover{
  border-color: rgb(255 255 255 / 0.25);
}

.hover\:border-white\/40:hover{
  border-color: rgb(255 255 255 / 0.4);
}

.hover\:bg-\[\#001a00\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(0 26 0 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#00DD00\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(0 221 0 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#0e2a31\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(14 42 49 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#0f3a4d\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(15 58 77 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#111\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 17 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#123049\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(18 48 73 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#123822\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(18 56 34 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#14141b\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(20 20 27 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#14305c\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(20 48 92 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#143421\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(20 52 33 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#161920\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(22 25 32 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#166534\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(22 101 52 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#171717\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#171a21\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(23 26 33 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#172019\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(23 32 25 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#18311f\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(24 49 31 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#1A1E28\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(26 30 40 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#1a1a1a\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(26 26 26 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#1a60c8\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(26 96 200 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#1b1e26\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(27 30 38 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#1b478a\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(27 71 138 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#1c1408\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(28 20 8 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#1c1e24\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(28 30 36 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#1d1d20\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 29 32 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#1d2938\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 41 56 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#1e1e1e\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(30 30 30 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#203423\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(32 52 35 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#222222\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(34 34 34 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#223149\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(34 49 73 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#242220\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(36 34 32 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#251a35\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(37 26 53 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#2563eb\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#26183a\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(38 24 58 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#262626\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#282520\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(40 37 32 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#2D4738\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(45 71 56 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#2a1414\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(42 20 20 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#2a1f0e\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(42 31 14 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#2a2f3e\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(42 47 62 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#2c1858\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(44 24 88 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#33270f\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(51 39 15 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#333333\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(51 51 51 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#333\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(51 51 51 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#341414\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(52 20 20 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#3a1420\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(58 20 32 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#3a1512\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(58 21 18 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#3a3015\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(58 48 21 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#3a3a3a\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(58 58 58 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#3d1f35\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(61 31 53 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#444444\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(68 68 68 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#45A049\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(69 160 73 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#4CEB93\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(76 235 147 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#4a4a4a\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(74 74 74 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#4b744b\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(75 116 75 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#555555\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(85 85 85 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#5A5A5A\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(90 90 90 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#5a2a2a\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(90 42 42 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#5e173d\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(94 23 61 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#5e5575\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(94 85 117 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#666666\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(102 102 102 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#667eea\]\/10:hover{
  background-color: rgb(102 126 234 / 0.1);
}

.hover\:bg-\[\#8A2BE2\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(138 43 226 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#8a3333\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(138 51 51 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#9370DB\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(147 112 219 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#E55A2B\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(229 90 43 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#FF5252\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 82 82 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#FF6B85\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 107 133 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#a43737\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(164 55 55 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#b6d6ff\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(182 214 255 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#c6ddff\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(198 221 255 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#c9d8f0\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(201 216 240 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#c9f24d22\]:hover{
  background-color: #c9f24d22;
}

.hover\:bg-\[\#d6ebff\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(214 235 255 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#dc2626\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#ddedff\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(221 237 255 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#e0f0fd\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(224 240 253 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#ebf5ff\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(235 245 255 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#f7df83\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(247 223 131 / var(--tw-bg-opacity));
}

.hover\:bg-\[color\:var\(--fx-accent-wash\)\]:hover{
  background-color: var(--fx-accent-wash);
}

.hover\:bg-\[color\:var\(--fx-quiet-wash\)\]:hover{
  background-color: var(--fx-quiet-wash);
}

.hover\:bg-accent:hover{
  background-color: hsl(var(--accent));
}

.hover\:bg-amber-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity));
}

.hover\:bg-black:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.hover\:bg-black\/35:hover{
  background-color: rgb(0 0 0 / 0.35);
}

.hover\:bg-black\/70:hover{
  background-color: rgb(0 0 0 / 0.7);
}

.hover\:bg-black\/90:hover{
  background-color: rgb(0 0 0 / 0.9);
}

.hover\:bg-blue-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}

.hover\:bg-blue-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
}

.hover\:bg-blue-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.hover\:bg-blue-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.hover\:bg-blue-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

.hover\:bg-blue-800\/50:hover{
  background-color: rgb(30 64 175 / 0.5);
}

.hover\:bg-cyan-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(34 211 238 / var(--tw-bg-opacity));
}

.hover\:bg-destructive\/80:hover{
  background-color: hsl(var(--destructive) / 0.8);
}

.hover\:bg-destructive\/90:hover{
  background-color: hsl(var(--destructive) / 0.9);
}

.hover\:bg-emerald-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity));
}

.hover\:bg-emerald-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
}

.hover\:bg-emerald-500\/20:hover{
  background-color: rgb(16 185 129 / 0.2);
}

.hover\:bg-fuchsia-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(232 121 249 / var(--tw-bg-opacity));
}

.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.hover\:bg-gray-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.hover\:bg-gray-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}

.hover\:bg-gray-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
}

.hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.hover\:bg-gray-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}

.hover\:bg-gray-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}

.hover\:bg-gray-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}

.hover\:bg-gray-800:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.hover\:bg-gray-800\/30:hover{
  background-color: rgb(31 41 55 / 0.3);
}

.hover\:bg-gray-900:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

.hover\:bg-green-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}

.hover\:bg-green-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
}

.hover\:bg-green-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}

.hover\:bg-green-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}

.hover\:bg-green-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}

.hover\:bg-green-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}

.hover\:bg-indigo-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
}

.hover\:bg-muted:hover{
  background-color: hsl(var(--muted));
}

.hover\:bg-muted\/50:hover{
  background-color: hsl(var(--muted) / 0.5);
}

.hover\:bg-neutral-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 82 / var(--tw-bg-opacity));
}

.hover\:bg-neutral-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
}

.hover\:bg-neutral-800:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}

.hover\:bg-primary:hover{
  background-color: hsl(var(--primary));
}

.hover\:bg-primary\/80:hover{
  background-color: hsl(var(--primary) / 0.8);
}

.hover\:bg-primary\/90:hover{
  background-color: hsl(var(--primary) / 0.9);
}

.hover\:bg-purple-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
}

.hover\:bg-purple-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(233 213 255 / var(--tw-bg-opacity));
}

.hover\:bg-purple-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
}

.hover\:bg-purple-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
}

.hover\:bg-red-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

.hover\:bg-red-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}

.hover\:bg-red-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}

.hover\:bg-red-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

.hover\:bg-red-500\/20:hover{
  background-color: rgb(239 68 68 / 0.2);
}

.hover\:bg-red-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}

.hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}

.hover\:bg-red-900\/30:hover{
  background-color: rgb(127 29 29 / 0.3);
}

.hover\:bg-secondary:hover{
  background-color: hsl(var(--secondary));
}

.hover\:bg-secondary\/80:hover{
  background-color: hsl(var(--secondary) / 0.8);
}

.hover\:bg-sidebar-accent:hover{
  background-color: hsl(var(--sidebar-accent));
}

.hover\:bg-sky-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(3 105 161 / var(--tw-bg-opacity));
}

.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.hover\:bg-white\/10:hover{
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/15:hover{
  background-color: rgb(255 255 255 / 0.15);
}

.hover\:bg-white\/20:hover{
  background-color: rgb(255 255 255 / 0.2);
}

.hover\:bg-white\/\[0\.02\]:hover{
  background-color: rgb(255 255 255 / 0.02);
}

.hover\:bg-white\/\[0\.04\]:hover{
  background-color: rgb(255 255 255 / 0.04);
}

.hover\:bg-white\/\[0\.06\]:hover{
  background-color: rgb(255 255 255 / 0.06);
}

.hover\:bg-yellow-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
}

.hover\:bg-yellow-500\/25:hover{
  background-color: rgb(234 179 8 / 0.25);
}

.hover\:bg-yellow-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
}

.hover\:bg-yellow-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(161 98 7 / var(--tw-bg-opacity));
}

.hover\:bg-opacity-90:hover{
  --tw-bg-opacity: 0.9;
}

.hover\:from-cyan-300:hover{
  --tw-gradient-from: #67e8f9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(103 232 249 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-purple-600:hover{
  --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-purple-700:hover{
  --tw-gradient-from: #7e22ce var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(126 34 206 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-red-700:hover{
  --tw-gradient-from: #b91c1c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(185 28 28 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:via-blue-400:hover{
  --tw-gradient-to: rgb(96 165 250 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #60a5fa var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.hover\:to-blue-700:hover{
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}

.hover\:to-fuchsia-400:hover{
  --tw-gradient-to: #e879f9 var(--tw-gradient-to-position);
}

.hover\:to-orange-700:hover{
  --tw-gradient-to: #c2410c var(--tw-gradient-to-position);
}

.hover\:text-\[\#00ff00\]:hover{
  --tw-text-opacity: 1;
  color: rgb(0 255 0 / var(--tw-text-opacity));
}

.hover\:text-\[\#18d29f\]:hover{
  --tw-text-opacity: 1;
  color: rgb(24 210 159 / var(--tw-text-opacity));
}

.hover\:text-\[\#93e7ff\]:hover{
  --tw-text-opacity: 1;
  color: rgb(147 231 255 / var(--tw-text-opacity));
}

.hover\:text-\[\#E8B54A\]:hover{
  --tw-text-opacity: 1;
  color: rgb(232 181 74 / var(--tw-text-opacity));
}

.hover\:text-\[\#EDEFF5\]:hover{
  --tw-text-opacity: 1;
  color: rgb(237 239 245 / var(--tw-text-opacity));
}

.hover\:text-\[\#FF4D6D\]:hover{
  --tw-text-opacity: 1;
  color: rgb(255 77 109 / var(--tw-text-opacity));
}

.hover\:text-\[\#c8ccd4\]:hover{
  --tw-text-opacity: 1;
  color: rgb(200 204 212 / var(--tw-text-opacity));
}

.hover\:text-\[\#d8c199\]:hover{
  --tw-text-opacity: 1;
  color: rgb(216 193 153 / var(--tw-text-opacity));
}

.hover\:text-\[\#dde3ec\]:hover{
  --tw-text-opacity: 1;
  color: rgb(221 227 236 / var(--tw-text-opacity));
}

.hover\:text-\[\#ef4444\]:hover{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.hover\:text-\[\#f0b46a\]:hover{
  --tw-text-opacity: 1;
  color: rgb(240 180 106 / var(--tw-text-opacity));
}

.hover\:text-\[\#f7df83\]:hover{
  --tw-text-opacity: 1;
  color: rgb(247 223 131 / var(--tw-text-opacity));
}

.hover\:text-\[\#ff9a9a\]:hover{
  --tw-text-opacity: 1;
  color: rgb(255 154 154 / var(--tw-text-opacity));
}

.hover\:text-\[\#ffd27a\]:hover{
  --tw-text-opacity: 1;
  color: rgb(255 210 122 / var(--tw-text-opacity));
}

.hover\:text-\[color\:var\(--fx-accent-lit\)\]:hover{
  color: var(--fx-accent-lit);
}

.hover\:text-accent-foreground:hover{
  color: hsl(var(--accent-foreground));
}

.hover\:text-blue-200:hover{
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity));
}

.hover\:text-blue-300:hover{
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity));
}

.hover\:text-blue-400:hover{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.hover\:text-blue-500:hover{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

.hover\:text-blue-700:hover{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}

.hover\:text-cyan-200:hover{
  --tw-text-opacity: 1;
  color: rgb(165 243 252 / var(--tw-text-opacity));
}

.hover\:text-foreground:hover{
  color: hsl(var(--foreground));
}

.hover\:text-gray-200:hover{
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity));
}

.hover\:text-gray-300:hover{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));
}

.hover\:text-gray-600:hover{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.hover\:text-gray-700:hover{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.hover\:text-gray-900:hover{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

.hover\:text-green-500:hover{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

.hover\:text-muted-foreground:hover{
  color: hsl(var(--muted-foreground));
}

.hover\:text-pink-200:hover{
  --tw-text-opacity: 1;
  color: rgb(251 207 232 / var(--tw-text-opacity));
}

.hover\:text-primary-foreground:hover{
  color: hsl(var(--primary-foreground));
}

.hover\:text-purple-300:hover{
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity));
}

.hover\:text-red-300:hover{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}

.hover\:text-red-500:hover{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.hover\:text-red-600:hover{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.hover\:text-red-700:hover{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
}

.hover\:text-sidebar-accent-foreground:hover{
  color: hsl(var(--sidebar-accent-foreground));
}

.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.hover\:text-white\/70:hover{
  color: rgb(255 255 255 / 0.7);
}

.hover\:text-white\/80:hover{
  color: rgb(255 255 255 / 0.8);
}

.hover\:text-white\/90:hover{
  color: rgb(255 255 255 / 0.9);
}

.hover\:text-zinc-200:hover{
  --tw-text-opacity: 1;
  color: rgb(228 228 231 / var(--tw-text-opacity));
}

.hover\:text-zinc-300:hover{
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / var(--tw-text-opacity));
}

.hover\:text-zinc-400:hover{
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity));
}

.hover\:underline:hover{
  text-decoration-line: underline;
}

.hover\:opacity-100:hover{
  opacity: 1;
}

.hover\:opacity-60:hover{
  opacity: 0.6;
}

.hover\:opacity-80:hover{
  opacity: 0.8;
}

.hover\:opacity-90:hover{
  opacity: 0.9;
}

.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover{
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_20px_65px_rgba\(96\2c 165\2c 250\2c 0\.45\)\]:hover{
  --tw-shadow: 0 20px 65px rgba(96,165,250,0.45);
  --tw-shadow-colored: 0 20px 65px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_8px_24px_rgba\(102\2c 126\2c 234\2c 0\.2\)\]:hover{
  --tw-shadow: 0 8px 24px rgba(102,126,234,0.2);
  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-emerald-500\/50:hover{
  --tw-shadow-color: rgb(16 185 129 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:after\:bg-sidebar-border:hover::after{
  content: var(--tw-content);
  background-color: hsl(var(--sidebar-border));
}

.focus\:border-\[\#3b82f6\]:focus{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.focus\:border-\[\#4C5464\]:focus{
  --tw-border-opacity: 1;
  border-color: rgb(76 84 100 / var(--tw-border-opacity));
}

.focus\:border-\[\#65dcff\]:focus{
  --tw-border-opacity: 1;
  border-color: rgb(101 220 255 / var(--tw-border-opacity));
}

.focus\:border-\[\#6a5432\]:focus{
  --tw-border-opacity: 1;
  border-color: rgb(106 84 50 / var(--tw-border-opacity));
}

.focus\:border-\[\#8a6a3a\]:focus{
  --tw-border-opacity: 1;
  border-color: rgb(138 106 58 / var(--tw-border-opacity));
}

.focus\:border-\[color\:var\(--fx-accent\)\]:focus{
  border-color: var(--fx-accent);
}

.focus\:border-blue-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.focus\:border-transparent:focus{
  border-color: transparent;
}

.focus\:bg-accent:focus{
  background-color: hsl(var(--accent));
}

.focus\:bg-gray-800:focus{
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.focus\:bg-primary:focus{
  background-color: hsl(var(--primary));
}

.focus\:bg-red-900\/30:focus{
  background-color: rgb(127 29 29 / 0.3);
}

.focus\:text-accent-foreground:focus{
  color: hsl(var(--accent-foreground));
}

.focus\:text-blue-300:focus{
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity));
}

.focus\:text-primary-foreground:focus{
  color: hsl(var(--primary-foreground));
}

.focus\:text-red-300:focus{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}

.focus\:opacity-100:focus{
  opacity: 1;
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-1:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-\[\#18d29f\]\/20:focus{
  --tw-ring-color: rgb(24 210 159 / 0.2);
}

.focus\:ring-\[\#73ff86\]\/40:focus{
  --tw-ring-color: rgb(115 255 134 / 0.4);
}

.focus\:ring-blue-400\/60:focus{
  --tw-ring-color: rgb(96 165 250 / 0.6);
}

.focus\:ring-blue-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}

.focus\:ring-cyan-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity));
}

.focus\:ring-green-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity));
}

.focus\:ring-neutral-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(115 115 115 / var(--tw-ring-opacity));
}

.focus\:ring-red-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
}

.focus\:ring-ring:focus{
  --tw-ring-color: hsl(var(--ring));
}

.focus\:ring-sky-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(56 189 248 / var(--tw-ring-opacity));
}

.focus\:ring-sky-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity));
}

.focus\:ring-opacity-75:focus{
  --tw-ring-opacity: 0.75;
}

.focus\:ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
}

.focus-visible\:outline-none:focus-visible{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-1:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-ring:focus-visible{
  --tw-ring-color: hsl(var(--ring));
}

.focus-visible\:ring-sidebar-ring:focus-visible{
  --tw-ring-color: hsl(var(--sidebar-ring));
}

.focus-visible\:ring-offset-1:focus-visible{
  --tw-ring-offset-width: 1px;
}

.focus-visible\:ring-offset-2:focus-visible{
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-background:focus-visible{
  --tw-ring-offset-color: hsl(var(--background));
}

.active\:translate-y-0:active{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:translate-y-0\.5:active{
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-95:active{
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.98\]:active{
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.99\]:active{
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:cursor-grabbing:active{
  cursor: grabbing;
}

.active\:bg-gray-700:active{
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}

.active\:bg-green-700:active{
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}

.active\:bg-sidebar-accent:active{
  background-color: hsl(var(--sidebar-accent));
}

.active\:text-sidebar-accent-foreground:active{
  color: hsl(var(--sidebar-accent-foreground));
}

.active\:shadow-inner:active{
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.enabled\:hover\:scale-\[1\.015\]:hover:enabled{
  --tw-scale-x: 1.015;
  --tw-scale-y: 1.015;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.disabled\:pointer-events-none:disabled{
  pointer-events: none;
}

.disabled\:transform-none:disabled{
  transform: none;
}

.disabled\:cursor-default:disabled{
  cursor: default;
}

.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}

.disabled\:cursor-wait:disabled{
  cursor: wait;
}

.disabled\:bg-gray-400:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
}

.disabled\:opacity-25:disabled{
  opacity: 0.25;
}

.disabled\:opacity-30:disabled{
  opacity: 0.3;
}

.disabled\:opacity-35:disabled{
  opacity: 0.35;
}

.disabled\:opacity-40:disabled{
  opacity: 0.4;
}

.disabled\:opacity-50:disabled{
  opacity: 0.5;
}

.disabled\:opacity-60:disabled{
  opacity: 0.6;
}

.disabled\:opacity-70:disabled{
  opacity: 0.7;
}

.disabled\:hover\:scale-100:hover:disabled{
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.disabled\:hover\:bg-\[\#333333\]:hover:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(51 51 51 / var(--tw-bg-opacity));
}

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100{
  opacity: 1;
}

.group:hover .group-hover\:translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-x-0\.5{
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-\[1\.015\]{
  --tw-scale-x: 1.015;
  --tw-scale-y: 1.015;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group\/part:hover .group-hover\/part\:text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.group:hover .group-hover\:text-blue-400{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.group:hover .group-hover\:text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.group\/menu-item:hover .group-hover\/menu-item\:opacity-100{
  opacity: 1;
}

.group\/part:hover .group-hover\/part\:opacity-60{
  opacity: 0.6;
}

.group:hover .group-hover\:opacity-100{
  opacity: 1;
}

.group.destructive .group-\[\.destructive\]\:border-muted\/40{
  border-color: hsl(var(--muted) / 0.4);
}

.group.destructive .group-\[\.destructive\]\:text-red-300{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}

.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover{
  border-color: hsl(var(--destructive) / 0.3);
}

.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover{
  background-color: hsl(var(--destructive));
}

.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover{
  color: hsl(var(--destructive-foreground));
}

.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover{
  --tw-text-opacity: 1;
  color: rgb(254 242 242 / var(--tw-text-opacity));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus{
  --tw-ring-color: hsl(var(--destructive));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus{
  --tw-ring-offset-color: #dc2626;
}

.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground{
  color: hsl(var(--sidebar-accent-foreground));
}

.peer:disabled ~ .peer-disabled\:cursor-not-allowed{
  cursor: not-allowed;
}

.peer:disabled ~ .peer-disabled\:opacity-70{
  opacity: 0.7;
}

.has-\[\[data-variant\=inset\]\]\:bg-sidebar:has([data-variant=inset]){
  background-color: hsl(var(--sidebar-background));
}

.has-\[\:disabled\]\:opacity-50:has(:disabled){
  opacity: 0.5;
}

.aria-disabled\:pointer-events-none[aria-disabled="true"]{
  pointer-events: none;
}

.aria-disabled\:opacity-50[aria-disabled="true"]{
  opacity: 0.5;
}

.aria-selected\:bg-accent[aria-selected="true"]{
  background-color: hsl(var(--accent));
}

.aria-selected\:bg-accent\/50[aria-selected="true"]{
  background-color: hsl(var(--accent) / 0.5);
}

.aria-selected\:text-accent-foreground[aria-selected="true"]{
  color: hsl(var(--accent-foreground));
}

.aria-selected\:text-muted-foreground[aria-selected="true"]{
  color: hsl(var(--muted-foreground));
}

.aria-selected\:opacity-100[aria-selected="true"]{
  opacity: 1;
}

.data-\[disabled\=true\]\:pointer-events-none[data-disabled=true]{
  pointer-events: none;
}

.data-\[disabled\]\:pointer-events-none[data-disabled]{
  pointer-events: none;
}

.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction=vertical]{
  height: 1px;
}

.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction=vertical]{
  width: 100%;
}

.data-\[side\=bottom\]\:translate-y-1[data-side=bottom]{
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=left\]\:-translate-x-1[data-side=left]{
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=right\]\:translate-x-1[data-side=right]{
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=top\]\:-translate-y-1[data-side=top]{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=checked\]\:translate-x-5[data-state=checked]{
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked]{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel]{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe=end]{
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe=move]{
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes accordion-up{

  from{
    height: var(--radix-accordion-content-height);
  }

  to{
    height: 0;
  }
}

.data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{
  animation: accordion-up 0.2s ease-out;
}

@keyframes accordion-down{

  from{
    height: 0;
  }

  to{
    height: var(--radix-accordion-content-height);
  }
}

.data-\[state\=open\]\:animate-accordion-down[data-state=open]{
  animation: accordion-down 0.2s ease-out;
}

.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction=vertical]{
  flex-direction: column;
}

.data-\[active\=true\]\:bg-sidebar-accent[data-active=true]{
  background-color: hsl(var(--sidebar-accent));
}

.data-\[selected\=\'true\'\]\:bg-accent[data-selected='true']{
  background-color: hsl(var(--accent));
}

.data-\[state\=active\]\:bg-background[data-state=active]{
  background-color: hsl(var(--background));
}

.data-\[state\=checked\]\:bg-primary[data-state=checked]{
  background-color: hsl(var(--primary));
}

.data-\[state\=on\]\:bg-accent[data-state=on]{
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:bg-accent[data-state=open]{
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:bg-accent\/50[data-state=open]{
  background-color: hsl(var(--accent) / 0.5);
}

.data-\[state\=open\]\:bg-secondary[data-state=open]{
  background-color: hsl(var(--secondary));
}

.data-\[state\=selected\]\:bg-muted[data-state=selected]{
  background-color: hsl(var(--muted));
}

.data-\[state\=unchecked\]\:bg-input[data-state=unchecked]{
  background-color: hsl(var(--input));
}

.data-\[active\=true\]\:font-medium[data-active=true]{
  font-weight: 500;
}

.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active=true]{
  color: hsl(var(--sidebar-accent-foreground));
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder]{
  color: hsl(var(--muted-foreground));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected=true]{
  color: hsl(var(--accent-foreground));
}

.data-\[state\=active\]\:text-foreground[data-state=active]{
  color: hsl(var(--foreground));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state=checked]{
  color: hsl(var(--primary-foreground));
}

.data-\[state\=on\]\:text-accent-foreground[data-state=on]{
  color: hsl(var(--accent-foreground));
}

.data-\[state\=open\]\:text-accent-foreground[data-state=open]{
  color: hsl(var(--accent-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state=open]{
  color: hsl(var(--muted-foreground));
}

.data-\[disabled\=true\]\:opacity-50[data-disabled=true]{
  opacity: 0.5;
}

.data-\[disabled\]\:opacity-50[data-disabled]{
  opacity: 0.5;
}

.data-\[state\=open\]\:opacity-100[data-state=open]{
  opacity: 1;
}

.data-\[state\=active\]\:shadow-sm[data-state=active]{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[swipe\=move\]\:transition-none[data-swipe=move]{
  transition-property: none;
}

.data-\[state\=closed\]\:duration-300[data-state=closed]{
  transition-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state=open]{
  transition-duration: 500ms;
}

.data-\[motion\^\=from-\]\:animate-in[data-motion^=from-]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:animate-in[data-state=open]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=visible\]\:animate-in[data-state=visible]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^=to-]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state=closed]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state=hidden]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[swipe\=end\]\:animate-out[data-swipe=end]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[motion\^\=from-\]\:fade-in[data-motion^=from-]{
  --tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^=to-]{
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-0[data-state=closed]{
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-80[data-state=closed]{
  --tw-exit-opacity: 0.8;
}

.data-\[state\=hidden\]\:fade-out[data-state=hidden]{
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state=open]{
  --tw-enter-opacity: 0;
}

.data-\[state\=visible\]\:fade-in[data-state=visible]{
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state=closed]{
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-90[data-state=open]{
  --tw-enter-scale: .9;
}

.data-\[state\=open\]\:zoom-in-95[data-state=open]{
  --tw-enter-scale: .95;
}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion=from-end]{
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion=from-start]{
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion=to-end]{
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion=to-start]{
  --tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{
  --tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed]{
  --tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state=closed]{
  --tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed]{
  --tw-exit-translate-x: -50%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state=closed]{
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-right-full[data-state=closed]{
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state=closed]{
  --tw-exit-translate-y: -100%;
}

.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed]{
  --tw-exit-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state=open]{
  --tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state=open]{
  --tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open]{
  --tw-enter-translate-x: -50%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state=open]{
  --tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state=open]{
  --tw-enter-translate-y: -100%;
}

.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open]{
  --tw-enter-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-top-full[data-state=open]{
  --tw-enter-translate-y: -100%;
}

.data-\[state\=closed\]\:duration-300[data-state=closed]{
  animation-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state=open]{
  animation-duration: 500ms;
}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction=vertical]::after{
  content: var(--tw-content);
  left: 0px;
}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction=vertical]::after{
  content: var(--tw-content);
  height: 0.25rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction=vertical]::after{
  content: var(--tw-content);
  width: 100%;
}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction=vertical]::after{
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction=vertical]::after{
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state=open]{
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state=open]{
  background-color: hsl(var(--sidebar-accent));
}

.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state=open]{
  color: hsl(var(--sidebar-accent-foreground));
}

.data-\[state\=open\]\:focus\:bg-accent:focus[data-state=open]{
  background-color: hsl(var(--accent));
}

.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]{
  left: calc(var(--sidebar-width) * -1);
}

.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]{
  right: calc(var(--sidebar-width) * -1);
}

.group[data-side=left] .group-data-\[side\=left\]\:-right-4{
  right: -1rem;
}

.group[data-side=right] .group-data-\[side\=right\]\:left-0{
  left: 0px;
}

.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:-mt-8{
  margin-top: -2rem;
}

.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:hidden{
  display: none;
}

.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:\!size-8{
  width: 2rem !important;
  height: 2rem !important;
}

.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\]{
  width: var(--sidebar-width-icon);
}

.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]{
  width: calc(var(--sidebar-width-icon) + 1rem);
}

.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]{
  width: calc(var(--sidebar-width-icon) + 1rem + 2px);
}

.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:w-0{
  width: 0px;
}

.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-side=right] .group-data-\[side\=right\]\:rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-state=open] .group-data-\[state\=open\]\:rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:overflow-hidden{
  overflow: hidden;
}

.group[data-variant=floating] .group-data-\[variant\=floating\]\:rounded-lg{
  border-radius: var(--radius);
}

.group[data-variant=floating] .group-data-\[variant\=floating\]\:border{
  border-width: 1px;
}

.group[data-side=left] .group-data-\[side\=left\]\:border-r{
  border-right-width: 1px;
}

.group[data-side=right] .group-data-\[side\=right\]\:border-l{
  border-left-width: 1px;
}

.group[data-variant=floating] .group-data-\[variant\=floating\]\:border-sidebar-border{
  border-color: hsl(var(--sidebar-border));
}

.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:\!p-0{
  padding: 0px !important;
}

.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:\!p-2{
  padding: 0.5rem !important;
}

.group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:opacity-0{
  opacity: 0;
}

.group[data-variant=floating] .group-data-\[variant\=floating\]\:shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after{
  content: var(--tw-content);
  left: 100%;
}

.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:hover{
  background-color: hsl(var(--sidebar-background));
}

.peer\/menu-button[data-size=default] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5{
  top: 0.375rem;
}

.peer\/menu-button[data-size=lg] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5{
  top: 0.625rem;
}

.peer\/menu-button[data-size=sm] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1{
  top: 0.25rem;
}

.peer\/menu-button[data-active=true] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground{
  color: hsl(var(--sidebar-accent-foreground));
}

:is(.dark .dark\:border-destructive){
  border-color: hsl(var(--destructive));
}

@media (min-width: 640px){

  .sm\:-inset-\[18\%\]{
    inset: -18%;
  }

  .sm\:bottom-0{
    bottom: 0px;
  }

  .sm\:left-\[14\%\]{
    left: 14%;
  }

  .sm\:right-0{
    right: 0px;
  }

  .sm\:top-\[16\%\]{
    top: 16%;
  }

  .sm\:top-auto{
    top: auto;
  }

  .sm\:-mx-6{
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .sm\:mx-0{
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:mb-2{
    margin-bottom: 0.5rem;
  }

  .sm\:mb-4{
    margin-bottom: 1rem;
  }

  .sm\:ml-2{
    margin-left: 0.5rem;
  }

  .sm\:mt-0{
    margin-top: 0px;
  }

  .sm\:mt-2{
    margin-top: 0.5rem;
  }

  .sm\:mt-4{
    margin-top: 1rem;
  }

  .sm\:block{
    display: block;
  }

  .sm\:inline{
    display: inline;
  }

  .sm\:flex{
    display: flex;
  }

  .sm\:table-cell{
    display: table-cell;
  }

  .sm\:size-14{
    width: 3.5rem;
    height: 3.5rem;
  }

  .sm\:h-32{
    height: 8rem;
  }

  .sm\:h-8{
    height: 2rem;
  }

  .sm\:h-\[64\%\]{
    height: 64%;
  }

  .sm\:min-h-\[40px\]{
    min-height: 40px;
  }

  .sm\:w-24{
    width: 6rem;
  }

  .sm\:w-8{
    width: 2rem;
  }

  .sm\:w-\[58\%\]{
    width: 58%;
  }

  .sm\:w-auto{
    width: auto;
  }

  .sm\:min-w-\[40px\]{
    min-width: 40px;
  }

  .sm\:max-w-\[425px\]{
    max-width: 425px;
  }

  .sm\:max-w-sm{
    max-width: 24rem;
  }

  .sm\:scale-\[1\.28\]{
    --tw-scale-x: 1.28;
    --tw-scale-y: 1.28;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:flex-col{
    flex-direction: column;
  }

  .sm\:items-start{
    align-items: flex-start;
  }

  .sm\:items-end{
    align-items: flex-end;
  }

  .sm\:items-center{
    align-items: center;
  }

  .sm\:justify-end{
    justify-content: flex-end;
  }

  .sm\:justify-between{
    justify-content: space-between;
  }

  .sm\:gap-2{
    gap: 0.5rem;
  }

  .sm\:gap-2\.5{
    gap: 0.625rem;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .sm\:rounded-lg{
    border-radius: var(--radius);
  }

  .sm\:p-1{
    padding: 0.25rem;
  }

  .sm\:p-2{
    padding: 0.5rem;
  }

  .sm\:p-2\.5{
    padding: 0.625rem;
  }

  .sm\:p-3{
    padding: 0.75rem;
  }

  .sm\:p-6{
    padding: 1.5rem;
  }

  .sm\:p-8{
    padding: 2rem;
  }

  .sm\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sm\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm\:py-2\.5{
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .sm\:pr-5{
    padding-right: 1.25rem;
  }

  .sm\:text-left{
    text-align: left;
  }

  .sm\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-6xl{
    font-size: 3.75rem;
    line-height: 1;
  }

  .sm\:text-\[2\.3rem\]{
    font-size: 2.3rem;
  }

  .sm\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-xs{
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open]{
    --tw-enter-translate-y: 100%;
  }
}

@media (min-width: 768px){

  .md\:absolute{
    position: absolute;
  }

  .md\:mb-2{
    margin-bottom: 0.5rem;
  }

  .md\:mt-0{
    margin-top: 0px;
  }

  .md\:block{
    display: block;
  }

  .md\:inline-block{
    display: inline-block;
  }

  .md\:inline{
    display: inline;
  }

  .md\:flex{
    display: flex;
  }

  .md\:table-cell{
    display: table-cell;
  }

  .md\:hidden{
    display: none;
  }

  .md\:h-16{
    height: 4rem;
  }

  .md\:h-4{
    height: 1rem;
  }

  .md\:h-48{
    height: 12rem;
  }

  .md\:h-6{
    height: 1.5rem;
  }

  .md\:h-\[64px\]{
    height: 64px;
  }

  .md\:h-auto{
    height: auto;
  }

  .md\:w-20{
    width: 5rem;
  }

  .md\:w-4{
    width: 1rem;
  }

  .md\:w-48{
    width: 12rem;
  }

  .md\:w-6{
    width: 1.5rem;
  }

  .md\:w-80{
    width: 20rem;
  }

  .md\:w-\[340px\]{
    width: 340px;
  }

  .md\:w-\[64px\]{
    width: 64px;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\]{
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto{
    width: auto;
  }

  .md\:min-w-\[400px\]{
    min-width: 400px;
  }

  .md\:min-w-\[92px\]{
    min-width: 92px;
  }

  .md\:max-w-\[420px\]{
    max-width: 420px;
  }

  .md\:max-w-lg{
    max-width: 32rem;
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:flex-col{
    flex-direction: column;
  }

  .md\:items-start{
    align-items: flex-start;
  }

  .md\:items-center{
    align-items: center;
  }

  .md\:gap-2{
    gap: 0.5rem;
  }

  .md\:gap-3{
    gap: 0.75rem;
  }

  .md\:space-x-4 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .md\:self-auto{
    align-self: auto;
  }

  .md\:self-start{
    align-self: flex-start;
  }

  .md\:rounded-2xl{
    border-radius: 1rem;
  }

  .md\:p-12{
    padding: 3rem;
  }

  .md\:p-2{
    padding: 0.5rem;
  }

  .md\:p-3{
    padding: 0.75rem;
  }

  .md\:p-4{
    padding: 1rem;
  }

  .md\:p-5{
    padding: 1.25rem;
  }

  .md\:p-6{
    padding: 1.5rem;
  }

  .md\:p-8{
    padding: 2rem;
  }

  .md\:px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .md\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .md\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .md\:py-1{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .md\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .md\:py-2\.5{
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .md\:pb-4{
    padding-bottom: 1rem;
  }

  .md\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:text-xs{
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .md\:opacity-0{
    opacity: 0;
  }

  .after\:md\:hidden::after{
    content: var(--tw-content);
    display: none;
  }

  .peer[data-variant=inset] ~ .md\:peer-data-\[variant\=inset\]\:m-2{
    margin: 0.5rem;
  }

  .peer[data-state=collapsed][data-variant=inset] ~ .md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2{
    margin-left: 0.5rem;
  }

  .peer[data-variant=inset] ~ .md\:peer-data-\[variant\=inset\]\:ml-0{
    margin-left: 0px;
  }

  .peer[data-variant=inset] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl{
    border-radius: 0.75rem;
  }

  .peer[data-variant=inset] ~ .md\:peer-data-\[variant\=inset\]\:shadow{
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (min-width: 1024px){

  .lg\:relative{
    position: relative;
  }

  .lg\:inset-auto{
    inset: auto;
  }

  .lg\:flex{
    display: flex;
  }

  .lg\:table-cell{
    display: table-cell;
  }

  .lg\:grid{
    display: grid;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:h-\[100dvh\]{
    height: 100dvh;
  }

  .lg\:h-full{
    height: 100%;
  }

  .lg\:min-h-0{
    min-height: 0px;
  }

  .lg\:min-h-\[100dvh\]{
    min-height: 100dvh;
  }

  .lg\:min-h-\[100svh\]{
    min-height: 100svh;
  }

  .lg\:w-\[58\%\]{
    width: 58%;
  }

  .lg\:max-w-\[500px\]{
    max-width: 500px;
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.06fr_0\.94fr\]{
    grid-template-columns: 1.06fr 0.94fr;
  }

  .lg\:grid-cols-\[320px_1fr_300px\]{
    grid-template-columns: 320px 1fr 300px;
  }

  .lg\:flex-row{
    flex-direction: row;
  }

  .lg\:items-center{
    align-items: center;
  }

  .lg\:overflow-hidden{
    overflow: hidden;
  }

  .lg\:overflow-visible{
    overflow: visible;
  }

  .lg\:overflow-y-scroll{
    overflow-y: scroll;
  }

  .lg\:overscroll-contain{
    overscroll-behavior: contain;
  }

  .lg\:p-5{
    padding: 1.25rem;
  }

  .lg\:p-6{
    padding: 1.5rem;
  }

  .lg\:px-16{
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1280px){

  .xl\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[1\.15fr_0\.85fr\]{
    grid-template-columns: 1.15fr 0.85fr;
  }

  .xl\:px-16{
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .xl\:px-20{
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .xl\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .xl\:text-\[5\.4rem\]{
    font-size: 5.4rem;
  }
}

.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]){
  background-color: hsl(var(--accent));
}

.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child{
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child{
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside){
  background-color: hsl(var(--accent) / 0.5);
}

.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end){
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){
  padding-right: 0px;
}

.\[\&\>button\]\:hidden>button{
  display: none;
}

.\[\&\>button\]\:w-full>button{
  width: 100%;
}

.\[\&\>button\]\:justify-start>button{
  justify-content: flex-start;
}

.\[\&\>div\>button\]\:w-full>div>button{
  width: 100%;
}

.\[\&\>div\>button\]\:justify-start>div>button{
  justify-content: flex-start;
}

.\[\&\>div\>span\]\:hidden>div>span{
  display: none;
}

.\[\&\>span\:last-child\]\:truncate>span:last-child{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.\[\&\>span\]\:line-clamp-1>span{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\]\:absolute>svg{
  position: absolute;
}

.\[\&\>svg\]\:left-4>svg{
  left: 1rem;
}

.\[\&\>svg\]\:top-4>svg{
  top: 1rem;
}

.\[\&\>svg\]\:size-4>svg{
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:h-2\.5>svg{
  height: 0.625rem;
}

.\[\&\>svg\]\:h-3>svg{
  height: 0.75rem;
}

.\[\&\>svg\]\:h-3\.5>svg{
  height: 0.875rem;
}

.\[\&\>svg\]\:w-2\.5>svg{
  width: 0.625rem;
}

.\[\&\>svg\]\:w-3>svg{
  width: 0.75rem;
}

.\[\&\>svg\]\:w-3\.5>svg{
  width: 0.875rem;
}

.\[\&\>svg\]\:shrink-0>svg{
  flex-shrink: 0;
}

.\[\&\>svg\]\:text-destructive>svg{
  color: hsl(var(--destructive));
}

.\[\&\>svg\]\:text-foreground>svg{
  color: hsl(var(--foreground));
}

.\[\&\>svg\]\:text-muted-foreground>svg{
  color: hsl(var(--muted-foreground));
}

.\[\&\>svg\]\:text-sidebar-accent-foreground>svg{
  color: hsl(var(--sidebar-accent-foreground));
}

.\[\&\>svg\~\*\]\:pl-7>svg~*{
  padding-left: 1.75rem;
}

.\[\&\>tr\]\:last\:border-b-0:last-child>tr{
  border-bottom-width: 0px;
}

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text{
  fill: hsl(var(--muted-foreground));
}

.\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke='#ccc']{
  stroke: hsl(var(--border) / 0.5);
}

.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor{
  stroke: hsl(var(--border));
}

.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff']{
  stroke: transparent;
}

.\[\&_\.recharts-layer\]\:outline-none .recharts-layer{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc']{
  stroke: hsl(var(--border));
}

.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector{
  fill: hsl(var(--muted));
}

.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor{
  fill: hsl(var(--muted));
}

.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc']{
  stroke: hsl(var(--border));
}

.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff']{
  stroke: transparent;
}

.\[\&_\.recharts-sector\]\:outline-none .recharts-sector{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.\[\&_\.recharts-surface\]\:outline-none .recharts-surface{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading]{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading]{
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading]{
  font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading]{
  color: hsl(var(--muted-foreground));
}

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group]{
  padding-top: 0px;
}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg{
  height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg{
  width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input]{
  height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item]{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg{
  height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg{
  width: 1.25rem;
}

.\[\&_a\]\:text-blue-300 a{
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity));
}

.\[\&_a\]\:underline a{
  text-decoration-line: underline;
}

.\[\&_iframe\]\:absolute iframe{
  position: absolute;
}

.\[\&_iframe\]\:left-1\/2 iframe{
  left: 50%;
}

.\[\&_iframe\]\:top-1\/2 iframe{
  top: 50%;
}

.\[\&_iframe\]\:h-full iframe{
  height: 100%;
}

.\[\&_iframe\]\:min-h-\[155\%\] iframe{
  min-height: 155%;
}

.\[\&_iframe\]\:w-full iframe{
  width: 100%;
}

.\[\&_iframe\]\:min-w-\[155\%\] iframe{
  min-width: 155%;
}

.\[\&_iframe\]\:origin-center iframe{
  transform-origin: center;
}

.\[\&_iframe\]\:-translate-x-1\/2 iframe{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_iframe\]\:-translate-y-1\/2 iframe{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_iframe\]\:scale-\[1\.55\] iframe{
  --tw-scale-x: 1.55;
  --tw-scale-y: 1.55;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_iframe\]\:border-0 iframe{
  border-width: 0px;
}

.\[\&_img\]\:max-w-full img{
  max-width: 100%;
}

.\[\&_p\]\:leading-relaxed p{
  line-height: 1.625;
}

.\[\&_svg\]\:pointer-events-none svg{
  pointer-events: none;
}

.\[\&_svg\]\:size-4 svg{
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\]\:shrink-0 svg{
  flex-shrink: 0;
}

.\[\&_table\]\:w-full table{
  width: 100%;
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child{
  border-width: 0px;
}

.\[\&_tr\]\:border-b tr{
  border-bottom-width: 1px;
}

[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2{
  right: -0.5rem;
}

[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize{
  cursor: e-resize;
}

[data-side=left] .\[\[data-side\=left\]_\&\]\:cursor-w-resize{
  cursor: w-resize;
}

[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2{
  left: -0.5rem;
}

[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize{
  cursor: w-resize;
}

[data-side=right] .\[\[data-side\=right\]_\&\]\:cursor-e-resize{
  cursor: e-resize;
}
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Theme-specific styling */

/* Custom vertical slider styles for mixer theme */

input[type=range][class*='vertical-range'] {
  /* Replacing deprecated slider-vertical with modern alternative */
  writing-mode: vertical-lr;
  direction: rtl;
  /* Firefox legacy support */
  writing-mode: bt-lr;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.-bottom-12 {
  bottom: -3rem;
}

.-left-12 {
  left: -3rem;
}

.-right-12 {
  right: -3rem;
}

.-top-12 {
  top: -3rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-1 {
  bottom: 0.25rem;
}

.bottom-1\/4 {
  bottom: 25%;
}

.bottom-2 {
  bottom: 0.5rem;
}

.bottom-24 {
  bottom: 6rem;
}

.bottom-4 {
  bottom: 1rem;
}

.left-0 {
  left: 0px;
}

.left-0\.5 {
  left: 0.125rem;
}

.left-1 {
  left: 0.25rem;
}

.left-1\.5 {
  left: 0.375rem;
}

.left-1\/2 {
  left: 50%;
}

.left-2 {
  left: 0.5rem;
}

.left-4 {
  left: 1rem;
}

.left-5 {
  left: 1.25rem;
}

.left-\[14\%\] {
  left: 14%;
}

.left-\[2\%\] {
  left: 2%;
}

.left-\[27\%\] {
  left: 27%;
}

.left-\[50\%\] {
  left: 50%;
}

.left-full {
  left: 100%;
}

.right-0 {
  right: 0px;
}

.right-0\.5 {
  right: 0.125rem;
}

.right-1 {
  right: 0.25rem;
}

.right-2 {
  right: 0.5rem;
}

.right-3 {
  right: 0.75rem;
}

.right-32 {
  right: 8rem;
}

.right-4 {
  right: 1rem;
}

.right-5 {
  right: 1.25rem;
}

.right-7 {
  right: 1.75rem;
}

.right-\[0px\] {
  right: 0px;
}

.right-\[30px\] {
  right: 30px;
}

.right-\[60\%\] {
  right: 60%;
}

.right-auto {
  right: auto;
}

.top-0 {
  top: 0px;
}

.top-1 {
  top: 0.25rem;
}

.top-1\.5 {
  top: 0.375rem;
}

.top-1\/2 {
  top: 50%;
}

.top-1\/4 {
  top: 25%;
}

.top-2 {
  top: 0.5rem;
}

.top-20 {
  top: 5rem;
}

.top-3\.5 {
  top: 0.875rem;
}

.top-4 {
  top: 1rem;
}

.top-60 {
  top: 15rem;
}

.top-\[110px\] {
  top: 110px;
}

.top-\[14px\] {
  top: 14px;
}

.top-\[1px\] {
  top: 1px;
}

.top-\[50\%\] {
  top: 50%;
}

.top-\[60\%\] {
  top: 60%;
}

.top-full {
  top: 100%;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[1000\] {
  z-index: 1000;
}

.z-\[1001\] {
  z-index: 1001;
}

.z-\[1002\] {
  z-index: 1002;
}

.z-\[100\] {
  z-index: 100;
}

.z-\[1\] {
  z-index: 1;
}

.z-\[2000\] {
  z-index: 2000;
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-5 {
  grid-column: span 5 / span 5;
}

.col-span-6 {
  grid-column: span 6 / span 6;
}

.col-span-8 {
  grid-column: span 8 / span 8;
}

.col-span-9 {
  grid-column: span 9 / span 9;
}

.m-0 {
  margin: 0px;
}

.m-px {
  margin: 1px;
}

.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.-ml-3 {
  margin-left: -0.75rem;
}

.-ml-4 {
  margin-left: -1rem;
}

.-mt-4 {
  margin-top: -1rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mr-auto {
  margin-right: auto;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-24 {
  margin-top: 6rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-auto {
  margin-top: auto;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.size-4 {
  width: 1rem;
  height: 1rem;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-3\/4 {
  height: 75%;
}

.h-32 {
  height: 8rem;
}

.h-36 {
  height: 9rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-48 {
  height: 12rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-80 {
  height: 20rem;
}

.h-9 {
  height: 2.25rem;
}

.h-96 {
  height: 24rem;
}

.h-\[10\%\] {
  height: 10%;
}

.h-\[1px\] {
  height: 1px;
}

.h-\[2px\] {
  height: 2px;
}

.h-\[5\%\] {
  height: 5%;
}

.h-\[600px\] {
  height: 600px;
}

.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}

.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.h-screen {
  height: 100vh;
}

.h-svh {
  height: 100svh;
}

.max-h-24 {
  max-height: 6rem;
}

.max-h-\[--radix-context-menu-content-available-height\] {
  max-height: var(--radix-context-menu-content-available-height);
}

.max-h-\[--radix-select-content-available-height\] {
  max-height: var(--radix-select-content-available-height);
}

.max-h-\[120px\] {
  max-height: 120px;
}

.max-h-\[300px\] {
  max-height: 300px;
}

.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
  max-height: var(--radix-dropdown-menu-content-available-height);
}

.max-h-screen {
  max-height: 100vh;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-\[200px\] {
  min-height: 200px;
}

.min-h-\[80px\] {
  min-height: 80px;
}

.min-h-screen {
  min-height: 100vh;
}

.min-h-svh {
  min-height: 100svh;
}

.w-0 {
  width: 0px;
}

.w-0\.5 {
  width: 0.125rem;
}

.w-1 {
  width: 0.25rem;
}

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-3\/4 {
  width: 75%;
}

.w-4 {
  width: 1rem;
}

.w-40 {
  width: 10rem;
}

.w-44 {
  width: 11rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-52 {
  width: 13rem;
}

.w-6 {
  width: 1.5rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

.w-9 {
  width: 2.25rem;
}

.w-96 {
  width: 24rem;
}

.w-\[--sidebar-width\] {
  width: var(--sidebar-width);
}

.w-\[100px\] {
  width: 100px;
}

.w-\[15\%\] {
  width: 15%;
}

.w-\[1px\] {
  width: 1px;
}

.w-\[28px\] {
  width: 28px;
}

.w-\[85\%\] {
  width: 85%;
}

.w-\[calc\(100\%-30px\)\] {
  width: calc(100% - 30px);
}

.w-\[calc\(100\%-50px\)\] {
  width: calc(100% - 50px);
}

.w-\[calc\(100\%-55px\)\] {
  width: calc(100% - 55px);
}

.w-\[calc\(100\%-65px\)\] {
  width: calc(100% - 65px);
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.w-px {
  width: 1px;
}

.w-screen {
  width: 100vw;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-10 {
  min-width: 2.5rem;
}

.min-w-11 {
  min-width: 2.75rem;
}

.min-w-5 {
  min-width: 1.25rem;
}

.min-w-9 {
  min-width: 2.25rem;
}

.min-w-\[12rem\] {
  min-width: 12rem;
}

.min-w-\[30px\] {
  min-width: 30px;
}

.min-w-\[8rem\] {
  min-width: 8rem;
}

.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}

.min-w-full {
  min-width: 100%;
}

.max-w-48 {
  max-width: 12rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-\[--skeleton-width\] {
  max-width: var(--skeleton-width);
}

.max-w-\[400px\] {
  max-width: 400px;
}

.max-w-\[50px\] {
  max-width: 50px;
}

.max-w-full {
  max-width: 100%;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-sm {
  max-width: 24rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.flex-grow-\[1\.25\] {
  flex-grow: 1.25;
}

.flex-grow-\[1\.5\] {
  flex-grow: 1.5;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.basis-full {
  flex-basis: 100%;
}

.caption-bottom {
  caption-side: bottom;
}

.border-collapse {
  border-collapse: collapse;
}

.origin-\[--radix-context-menu-content-transform-origin\] {
  transform-origin: var(--radix-context-menu-content-transform-origin);
}

.origin-\[--radix-dropdown-menu-content-transform-origin\] {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}

.origin-\[--radix-hover-card-content-transform-origin\] {
  transform-origin: var(--radix-hover-card-content-transform-origin);
}

.origin-\[--radix-menubar-content-transform-origin\] {
  transform-origin: var(--radix-menubar-content-transform-origin);
}

.origin-\[--radix-popover-content-transform-origin\] {
  transform-origin: var(--radix-popover-content-transform-origin);
}

.origin-\[--radix-select-content-transform-origin\] {
  transform-origin: var(--radix-select-content-transform-origin);
}

.origin-\[--radix-tooltip-content-transform-origin\] {
  transform-origin: var(--radix-tooltip-content-transform-origin);
}

.origin-left {
  transform-origin: left;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-px {
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-4 {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-6 {
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-px {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-default {
  cursor: default;
}

.cursor-grab {
  cursor: grab;
}

.cursor-grabbing {
  cursor: grabbing;
}

.cursor-pointer {
  cursor: pointer;
}

.touch-none {
  touch-action: none;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize {
  resize: both;
}

.list-none {
  list-style-type: none;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-0 {
  gap: 0px;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-px > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1px * var(--tw-space-x-reverse));
  margin-left: calc(1px * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.space-y-px > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1px * var(--tw-space-y-reverse));
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-\[2px\] {
  border-radius: 2px;
}

.rounded-\[inherit\] {
  border-radius: inherit;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: var(--radius);
}

.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}

.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-b-lg {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.rounded-b-md {
  border-bottom-right-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.rounded-l {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.rounded-r {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.rounded-t-\[10px\] {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.rounded-t-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
}

.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-\[1\.5px\] {
  border-width: 1.5px;
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-l {
  border-left-width: 1px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-dashed {
  border-style: dashed;
}

.border-\[\#333333\] {
  --tw-border-opacity: 1;
  border-color: rgb(51 51 51 / var(--tw-border-opacity, 1));
}

.border-\[\#444444\] {
  --tw-border-opacity: 1;
  border-color: rgb(68 68 68 / var(--tw-border-opacity, 1));
}

.border-\[\#444\] {
  --tw-border-opacity: 1;
  border-color: rgb(68 68 68 / var(--tw-border-opacity, 1));
}

.border-\[--color-border\] {
  border-color: var(--color-border);
}

.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.border-blue-500\/20 {
  border-color: rgb(59 130 246 / 0.2);
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.border-blue-900 {
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
}

.border-border\/50 {
  border-color: hsl(var(--border) / 0.5);
}

.border-destructive {
  border-color: hsl(var(--destructive));
}

.border-destructive\/50 {
  border-color: hsl(var(--destructive) / 0.5);
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}

.border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-green-600 {
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}

.border-input {
  border-color: hsl(var(--input));
}

.border-primary {
  border-color: hsl(var(--primary));
}

.border-purple-500 {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}

.border-purple-500\/20 {
  border-color: rgb(168 85 247 / 0.2);
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}

.border-red-700 {
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}

.border-teal-500\/20 {
  border-color: rgb(20 184 166 / 0.2);
}

.border-transparent {
  border-color: transparent;
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-l-transparent {
  border-left-color: transparent;
}

.border-t-transparent {
  border-top-color: transparent;
}

.bg-\[\#0066CC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 102 204 / var(--tw-bg-opacity, 1));
}

.bg-\[\#0077DD\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 119 221 / var(--tw-bg-opacity, 1));
}

.bg-\[\#111111\] {
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1A1A1A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1E88E5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(30 136 229 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1a1a1a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1));
}

.bg-\[\#222222\] {
  --tw-bg-opacity: 1;
  background-color: rgb(34 34 34 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2D2D2D\] {
  --tw-bg-opacity: 1;
  background-color: rgb(45 45 45 / var(--tw-bg-opacity, 1));
}

.bg-\[\#333333\] {
  --tw-bg-opacity: 1;
  background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));
}

.bg-\[\#333A33\] {
  --tw-bg-opacity: 1;
  background-color: rgb(51 58 51 / var(--tw-bg-opacity, 1));
}

.bg-\[\#3A3333\] {
  --tw-bg-opacity: 1;
  background-color: rgb(58 51 51 / var(--tw-bg-opacity, 1));
}

.bg-\[\#3D3D3D\] {
  --tw-bg-opacity: 1;
  background-color: rgb(61 61 61 / var(--tw-bg-opacity, 1));
}

.bg-\[\#444444\] {
  --tw-bg-opacity: 1;
  background-color: rgb(68 68 68 / var(--tw-bg-opacity, 1));
}

.bg-\[\#4A4A4A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(74 74 74 / var(--tw-bg-opacity, 1));
}

.bg-\[\#555555\] {
  --tw-bg-opacity: 1;
  background-color: rgb(85 85 85 / var(--tw-bg-opacity, 1));
}

.bg-\[\#663399\] {
  --tw-bg-opacity: 1;
  background-color: rgb(102 51 153 / var(--tw-bg-opacity, 1));
}

.bg-\[\#8A2BE2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(138 43 226 / var(--tw-bg-opacity, 1));
}

.bg-\[\#CC0066\] {
  --tw-bg-opacity: 1;
  background-color: rgb(204 0 102 / var(--tw-bg-opacity, 1));
}

.bg-\[\#DD0077\] {
  --tw-bg-opacity: 1;
  background-color: rgb(221 0 119 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FF5500\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 85 0 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FF6611\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 102 17 / var(--tw-bg-opacity, 1));
}

.bg-\[--color-bg\] {
  background-color: var(--color-bg);
}

.bg-accent {
  background-color: hsl(var(--accent));
}

.bg-background {
  background-color: hsl(var(--background));
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}

.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}

.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-500\/20 {
  background-color: rgb(59 130 246 / 0.2);
}

.bg-blue-500\/5 {
  background-color: rgb(59 130 246 / 0.05);
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-blue-600\/10 {
  background-color: rgb(37 99 235 / 0.1);
}

.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.bg-blue-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}

.bg-blue-900\/30 {
  background-color: rgb(30 58 138 / 0.3);
}

.bg-border {
  background-color: hsl(var(--border));
}

.bg-card {
  background-color: hsl(var(--card));
}

.bg-destructive {
  background-color: hsl(var(--destructive));
}

.bg-foreground {
  background-color: hsl(var(--foreground));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.bg-gray-800\/80 {
  background-color: rgb(31 41 55 / 0.8);
}

.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.bg-gray-900\/70 {
  background-color: rgb(17 24 39 / 0.7);
}

.bg-gray-900\/80 {
  background-color: rgb(17 24 39 / 0.8);
}

.bg-gray-900\/90 {
  background-color: rgb(17 24 39 / 0.9);
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-green-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.bg-green-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1));
}

.bg-indigo-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}

.bg-indigo-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}

.bg-muted {
  background-color: hsl(var(--muted));
}

.bg-muted\/50 {
  background-color: hsl(var(--muted) / 0.5);
}

.bg-neutral-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(115 115 115 / var(--tw-bg-opacity, 1));
}

.bg-neutral-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
}

.bg-neutral-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}

.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}

.bg-pink-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}

.bg-popover {
  background-color: hsl(var(--popover));
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.bg-purple-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(192 132 252 / var(--tw-bg-opacity, 1));
}

.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}

.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.bg-purple-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}

.bg-purple-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 33 168 / var(--tw-bg-opacity, 1));
}

.bg-purple-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(88 28 135 / var(--tw-bg-opacity, 1));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-red-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.bg-red-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}

.bg-secondary {
  background-color: hsl(var(--secondary));
}

.bg-teal-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(45 212 191 / var(--tw-bg-opacity, 1));
}

.bg-teal-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
}

.bg-teal-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: transparent;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}

.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.bg-yellow-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}

.bg-yellow-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(161 98 7 / var(--tw-bg-opacity, 1));
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-amber-700 {
  --tw-gradient-from: #b45309 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(180 83 9 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-300 {
  --tw-gradient-from: #93c5fd var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 197 253 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-400 {
  --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-600 {
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-900 {
  --tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-900\/10 {
  --tw-gradient-from: rgb(30 58 138 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-300 {
  --tw-gradient-from: #d1d5db var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(209 213 219 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-700 {
  --tw-gradient-from: #374151 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-800 {
  --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-900 {
  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-500 {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-600 {
  --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-700 {
  --tw-gradient-from: #15803d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(21 128 61 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-400 {
  --tw-gradient-from: #f472b6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-300 {
  --tw-gradient-from: #d8b4fe var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(216 180 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-400 {
  --tw-gradient-from: #f87171 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-600 {
  --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-700 {
  --tw-gradient-from: #b91c1c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(185 28 28 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-900 {
  --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-yellow-500 {
  --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-purple-900 {
  --tw-gradient-to: rgb(88 28 135 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #581c87 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-amber-950 {
  --tw-gradient-to: #451a03 var(--tw-gradient-to-position);
}

.to-black {
  --tw-gradient-to: #000 var(--tw-gradient-to-position);
}

.to-blue-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.to-blue-800 {
  --tw-gradient-to: #1e40af var(--tw-gradient-to-position);
}

.to-blue-900\/5 {
  --tw-gradient-to: rgb(30 58 138 / 0.05) var(--tw-gradient-to-position);
}

.to-emerald-600 {
  --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}

.to-gray-400 {
  --tw-gradient-to: #9ca3af var(--tw-gradient-to-position);
}

.to-gray-800 {
  --tw-gradient-to: #1f2937 var(--tw-gradient-to-position);
}

.to-gray-900 {
  --tw-gradient-to: #111827 var(--tw-gradient-to-position);
}

.to-green-800 {
  --tw-gradient-to: #166534 var(--tw-gradient-to-position);
}

.to-green-900 {
  --tw-gradient-to: #14532d var(--tw-gradient-to-position);
}

.to-indigo-900 {
  --tw-gradient-to: #312e81 var(--tw-gradient-to-position);
}

.to-purple-500 {
  --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
}

.to-purple-600 {
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.to-purple-700 {
  --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
}

.to-purple-800 {
  --tw-gradient-to: #6b21a8 var(--tw-gradient-to-position);
}

.to-red-600 {
  --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
}

.to-red-800 {
  --tw-gradient-to: #991b1b var(--tw-gradient-to-position);
}

.to-red-900 {
  --tw-gradient-to: #7f1d1d var(--tw-gradient-to-position);
}

.to-slate-900 {
  --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
}

.to-yellow-600 {
  --tw-gradient-to: #ca8a04 var(--tw-gradient-to-position);
}

.fill-current {
  fill: currentColor;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0 {
  padding: 0px;
}

.p-0\.5 {
  padding: 0.125rem;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.p-\[1px\] {
  padding: 1px;
}

.p-px {
  padding: 1px;
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-16 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-32 {
  padding-bottom: 8rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pl-2\.5 {
  padding-left: 0.625rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-2\.5 {
  padding-right: 0.625rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pt-0 {
  padding-top: 0px;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-middle {
  vertical-align: middle;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-8xl {
  font-size: 6rem;
  line-height: 1;
}

.text-\[0\.8rem\] {
  font-size: 0.8rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[8px\] {
  font-size: 8px;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.italic {
  font-style: italic;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-\[\#00FF00\] {
  --tw-text-opacity: 1;
  color: rgb(0 255 0 / var(--tw-text-opacity, 1));
}

.text-\[\#334455\] {
  --tw-text-opacity: 1;
  color: rgb(51 68 85 / var(--tw-text-opacity, 1));
}

.text-\[\#553322\] {
  --tw-text-opacity: 1;
  color: rgb(85 51 34 / var(--tw-text-opacity, 1));
}

.text-\[\#553344\] {
  --tw-text-opacity: 1;
  color: rgb(85 51 68 / var(--tw-text-opacity, 1));
}

.text-\[\#8BC34A\] {
  --tw-text-opacity: 1;
  color: rgb(139 195 74 / var(--tw-text-opacity, 1));
}

.text-\[\#AA00FF\] {
  --tw-text-opacity: 1;
  color: rgb(170 0 255 / var(--tw-text-opacity, 1));
}

.text-\[\#AAAAAA\] {
  --tw-text-opacity: 1;
  color: rgb(170 170 170 / var(--tw-text-opacity, 1));
}

.text-\[\#FF0000\] {
  --tw-text-opacity: 1;
  color: rgb(255 0 0 / var(--tw-text-opacity, 1));
}

.text-accent-foreground {
  color: hsl(var(--accent-foreground));
}

.text-amber-100 {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-card-foreground {
  color: hsl(var(--card-foreground));
}

.text-current {
  color: currentColor;
}

.text-destructive {
  color: hsl(var(--destructive));
}

.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}

.text-foreground {
  color: hsl(var(--foreground));
}

.text-foreground\/50 {
  color: hsl(var(--foreground) / 0.5);
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.text-pink-400 {
  --tw-text-opacity: 1;
  color: rgb(244 114 182 / var(--tw-text-opacity, 1));
}

.text-popover-foreground {
  color: hsl(var(--popover-foreground));
}

.text-primary {
  color: hsl(var(--primary));
}

.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}

.text-purple-300 {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}

.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}

.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.caret-blue-400 {
  caret-color: #60a5fa;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-ring {
  --tw-ring-color: hsl(var(--ring));
}

.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.sepia {
  --tw-sepia: sepia(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-lg {
  --tw-backdrop-blur: blur(16px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[left\2c right\2c width\] {
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[margin\2c opacity\] {
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\2c height\2c padding\] {
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear {
  transition-timing-function: linear;
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}

.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.fade-in {
  --tw-enter-opacity: 0;
}

.fade-in-0 {
  --tw-enter-opacity: 0;
}

.fade-in-80 {
  --tw-enter-opacity: 0.8;
}

.zoom-in-95 {
  --tw-enter-scale: .95;
}

.duration-100 {
  animation-duration: 100ms;
}

.duration-1000 {
  animation-duration: 1000ms;
}

.duration-150 {
  animation-duration: 150ms;
}

.duration-200 {
  animation-duration: 200ms;
}

.duration-300 {
  animation-duration: 300ms;
}

.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear {
  animation-timing-function: linear;
}

/* Import Desyrel font from cassette component */

@font-face {
  font-family: "Desyrel";

  src:
    url(https://manzdev.github.io/twitch-cassette/assets/desyrel.woff) format("woff"),
    url(https://manzdev.github.io/twitch-cassette/assets/desyrel.woff2) format("woff2");
}

/* Custom animations */

/* Button press animation */

.btn-pressed {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Text shadow for cassette-style text */

.text-shadow {
  text-shadow: 0 0 1px #444;
}

/* 3D button style for transport */

.btn-3d {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 
              inset 0 1px 0 rgba(255, 255, 255, 0.2),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.1s ease;
  position: relative;
  top: 0;
}

.btn-3d:active, .btn-3d.active {
  top: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 
              inset 0 1px 0 rgba(255, 255, 255, 0.2),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Pulse animation for nspire button */

@keyframes pulse-effect {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(255, 0, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

.pulse-animation {
  animation: pulse-effect 1.5s ease-out;
}

/* nSpire wild animation */

.nspire-wild {
  animation: wild-glow 3s ease-in-out;
  position: relative;
  z-index: 10;
}

@keyframes wild-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    transform: scale(1);
  }

  20% {
    box-shadow: 0 0 30px 10px rgba(255, 50, 50, 0.8);
    transform: scale(1.1);
  }

  80% {
    box-shadow: 0 0 15px 5px rgba(255, 150, 0, 0.6);
    transform: scale(1.05);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    transform: scale(1);
  }
}

/* Screen flash overlay for nspire */

.screen-flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(255,50,50,0.3) 0%, rgba(255,150,0,0.2) 70%, rgba(0,0,0,0) 100%);
  animation: screen-flash-anim 3s ease-out forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes screen-flash-anim {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 0.8;
  }

  85% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}

/* Sample change text animation */

.sample-change-text {
  animation: sample-text-anim 3s ease-in-out forwards;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.75rem;
  color: white;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  z-index: 10;
  pointer-events: none;
  background-color: #2563eb;
}

@keyframes sample-text-anim {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* App container styles */

.app-container {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

/* Reset height to ensure proper rendering */

#root {
  min-height: 100vh;
  height: auto;
  display: flex;
  flex-direction: column;
}

:root {
  --background: 0 0% 100%;
  --foreground: 20 14.3% 4.1%;
  --muted: 60 4.8% 95.9%;
  --muted-foreground: 25 5.3% 44.7%;
  --popover: 0 0% 100%;
  --popover-foreground: 20 14.3% 4.1%;
  --card: 0 0% 100%;
  --card-foreground: 20 14.3% 4.1%;
  --border: 20 5.9% 90%;
  --input: 20 5.9% 90%;
  --primary: 207 90% 54%;
  --primary-foreground: 211 100% 99%;
  --secondary: 60 4.8% 95.9%;
  --secondary-foreground: 24 9.8% 10%;
  --accent: 60 4.8% 95.9%;
  --accent-foreground: 24 9.8% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 60 9.1% 97.8%;
  --ring: 20 14.3% 4.1%;
  --radius: 0.5rem;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --primary: 207 90% 54%;
  --primary-foreground: 211 100% 99%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --ring: 240 4.9% 83.9%;
  --radius: 0.5rem;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.file\:text-foreground::file-selector-button {
  color: hsl(var(--foreground));
}

.placeholder\:text-muted-foreground::-moz-placeholder {
  color: hsl(var(--muted-foreground));
}

.placeholder\:text-muted-foreground::placeholder {
  color: hsl(var(--muted-foreground));
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:-inset-2::after {
  content: var(--tw-content);
  inset: -0.5rem;
}

.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}

.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}

.after\:w-\[2px\]::after {
  content: var(--tw-content);
  width: 2px;
}

.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.first\:border-l:first-child {
  border-left-width: 1px;
}

.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.focus-within\:relative:focus-within {
  position: relative;
}

.focus-within\:z-20:focus-within {
  z-index: 20;
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:bg-\[\#444444\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(68 68 68 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#444\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(68 68 68 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#555555\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(85 85 85 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#5A5A5A\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(90 90 90 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#666666\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(102 102 102 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#9370DB\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(147 112 219 / var(--tw-bg-opacity, 1));
}

.hover\:bg-accent:hover {
  background-color: hsl(var(--accent));
}

.hover\:bg-black\/70:hover {
  background-color: rgb(0 0 0 / 0.7);
}

.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-800\/50:hover {
  background-color: rgb(30 64 175 / 0.5);
}

.hover\:bg-destructive\/80:hover {
  background-color: hsl(var(--destructive) / 0.8);
}

.hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}

.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.hover\:bg-muted:hover {
  background-color: hsl(var(--muted));
}

.hover\:bg-muted\/50:hover {
  background-color: hsl(var(--muted) / 0.5);
}

.hover\:bg-primary:hover {
  background-color: hsl(var(--primary));
}

.hover\:bg-primary\/80:hover {
  background-color: hsl(var(--primary) / 0.8);
}

.hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.hover\:bg-purple-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-900\/30:hover {
  background-color: rgb(127 29 29 / 0.3);
}

.hover\:bg-secondary:hover {
  background-color: hsl(var(--secondary));
}

.hover\:bg-secondary\/80:hover {
  background-color: hsl(var(--secondary) / 0.8);
}

.hover\:bg-yellow-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.hover\:bg-yellow-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.hover\:bg-opacity-90:hover {
  --tw-bg-opacity: 0.9;
}

.hover\:from-purple-600:hover {
  --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-blue-700:hover {
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}

.hover\:text-accent-foreground:hover {
  color: hsl(var(--accent-foreground));
}

.hover\:text-foreground:hover {
  color: hsl(var(--foreground));
}

.hover\:text-muted-foreground:hover {
  color: hsl(var(--muted-foreground));
}

.hover\:text-primary-foreground:hover {
  color: hsl(var(--primary-foreground));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-emerald-500\/50:hover {
  --tw-shadow-color: rgb(16 185 129 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:bg-accent:focus {
  background-color: hsl(var(--accent));
}

.focus\:bg-gray-800:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.focus\:bg-primary:focus {
  background-color: hsl(var(--primary));
}

.focus\:bg-red-900\/30:focus {
  background-color: rgb(127 29 29 / 0.3);
}

.focus\:text-accent-foreground:focus {
  color: hsl(var(--accent-foreground));
}

.focus\:text-primary-foreground:focus {
  color: hsl(var(--primary-foreground));
}

.focus\:text-red-300:focus {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.focus\:opacity-100:focus {
  opacity: 1;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-green-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity, 1));
}

.focus\:ring-red-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}

.focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}

.focus\:ring-sky-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity, 1));
}

.focus\:ring-opacity-75:focus {
  --tw-ring-opacity: 0.75;
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus\:ring-offset-gray-800:focus {
  --tw-ring-offset-color: #1f2937;
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}

.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background));
}

.active\:translate-y-0\.5:active {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:bg-gray-700:active {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.active\:bg-green-700:active {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.active\:shadow-inner:active {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}

.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group.destructive .group-\[\.destructive\]\:border-muted\/40 {
  border-color: hsl(var(--muted) / 0.4);
}

.group.destructive .group-\[\.destructive\]\:text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
  border-color: hsl(var(--destructive) / 0.3);
}

.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
  background-color: hsl(var(--destructive));
}

.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
  color: hsl(var(--destructive-foreground));
}

.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
  --tw-text-opacity: 1;
  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
  --tw-ring-color: hsl(var(--destructive));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
  --tw-ring-offset-color: #dc2626;
}

.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}

.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: 0.7;
}

.has-\[\:disabled\]\:opacity-50:has(:disabled) {
  opacity: 0.5;
}

.group\/menu-item:has([data-sidebar=menu-action]) .group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8 {
  padding-right: 2rem;
}

.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}

.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
}

.aria-selected\:bg-accent[aria-selected="true"] {
  background-color: hsl(var(--accent));
}

.aria-selected\:bg-accent\/50[aria-selected="true"] {
  background-color: hsl(var(--accent) / 0.5);
}

.aria-selected\:text-accent-foreground[aria-selected="true"] {
  color: hsl(var(--accent-foreground));
}

.aria-selected\:text-muted-foreground[aria-selected="true"] {
  color: hsl(var(--muted-foreground));
}

.aria-selected\:opacity-100[aria-selected="true"] {
  opacity: 1;
}

.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}

.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}

.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}

.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}

.data-\[selected\=\'true\'\]\:bg-accent[data-selected='true'] {
  background-color: hsl(var(--accent));
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: hsl(var(--background));
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: hsl(var(--primary));
}

.data-\[state\=on\]\:bg-accent[data-state="on"] {
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: hsl(var(--accent) / 0.5);
}

.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  background-color: hsl(var(--secondary));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  background-color: hsl(var(--muted));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: hsl(var(--input));
}

.data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  color: hsl(var(--muted-foreground));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: hsl(var(--accent-foreground));
}

.data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: hsl(var(--foreground));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: hsl(var(--primary-foreground));
}

.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: hsl(var(--accent-foreground));
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: hsl(var(--accent-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  color: hsl(var(--muted-foreground));
}

.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}

.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}

.data-\[state\=open\]\:opacity-100[data-state="open"] {
  opacity: 1;
}

.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
  transition-property: none;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}

.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
  --tw-exit-opacity: 0.8;
}

.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}

.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  background-color: hsl(var(--accent));
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  left: calc(var(--sidebar-width) * -1);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  right: calc(var(--sidebar-width) * -1);
}

.group[data-side="left"] .group-data-\[side\=left\]\:-right-4 {
  right: -1rem;
}

.group[data-side="right"] .group-data-\[side\=right\]\:left-0 {
  left: 0px;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
  margin-top: -2rem;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
  display: none;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!size-8 {
  width: 2rem !important;
  height: 2rem !important;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
  width: var(--sidebar-width-icon);
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
  width: calc(var(--sidebar-width-icon) + 1rem);
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
  width: calc(var(--sidebar-width-icon) + 1rem + 2px);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
  width: 0px;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-side="right"] .group-data-\[side\=right\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
  overflow: hidden;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg {
  border-radius: var(--radius);
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
  border-width: 1px;
}

.group[data-side="left"] .group-data-\[side\=left\]\:border-r {
  border-right-width: 1px;
}

.group[data-side="right"] .group-data-\[side\=right\]\:border-l {
  border-left-width: 1px;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!p-0 {
  padding: 0px !important;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!p-2 {
  padding: 0.5rem !important;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
  opacity: 0;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
  content: var(--tw-content);
  left: 100%;
}

.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
  top: 0.375rem;
}

.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
  top: 0.625rem;
}

.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
  top: 0.25rem;
}

.dark\:border-destructive:is(.dark *) {
  border-color: hsl(var(--destructive));
}

@media (min-width: 640px) {
  .sm\:bottom-0 {
    bottom: 0px;
  }

  .sm\:right-0 {
    right: 0px;
  }

  .sm\:top-auto {
    top: auto;
  }

  .sm\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .sm\:mb-4 {
    margin-bottom: 1rem;
  }

  .sm\:ml-2 {
    margin-left: 0.5rem;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:mt-2 {
    margin-top: 0.5rem;
  }

  .sm\:mt-4 {
    margin-top: 1rem;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:h-32 {
    height: 8rem;
  }

  .sm\:max-w-\[425px\] {
    max-width: 425px;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .sm\:rounded-lg {
    border-radius: var(--radius);
  }

  .sm\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }
}

@media (min-width: 768px) {
  .md\:absolute {
    position: absolute;
  }

  .md\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .md\:mr-2 {
    margin-right: 0.5rem;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:h-16 {
    height: 4rem;
  }

  .md\:h-auto {
    height: auto;
  }

  .md\:w-20 {
    width: 5rem;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:max-w-\[420px\] {
    max-width: 420px;
  }

  .md\:max-w-lg {
    max-width: 32rem;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:gap-2 {
    gap: 0.5rem;
  }

  .md\:gap-3 {
    gap: 0.75rem;
  }

  .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .md\:p-2 {
    padding: 0.5rem;
  }

  .md\:p-3 {
    padding: 0.75rem;
  }

  .md\:p-4 {
    padding: 1rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .md\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .md\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .md\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .md\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .md\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:opacity-0 {
    opacity: 0;
  }

  .after\:md\:hidden::after {
    content: var(--tw-content);
    display: none;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2 {
    margin: 0.5rem;
  }

  .peer[data-state="collapsed"][data-variant="inset"] ~ .md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2 {
    margin-left: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0 {
    margin-left: 0px;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl {
    border-radius: 0.75rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {
  background-color: hsl(var(--accent));
}

.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside) {
  background-color: hsl(var(--accent) / 0.5);
}

.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}

.\[\&\>button\]\:hidden>button {
  display: none;
}

.\[\&\>span\:last-child\]\:truncate>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.\[\&\>span\]\:line-clamp-1>span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\]\:absolute>svg {
  position: absolute;
}

.\[\&\>svg\]\:left-4>svg {
  left: 1rem;
}

.\[\&\>svg\]\:top-4>svg {
  top: 1rem;
}

.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:h-2\.5>svg {
  height: 0.625rem;
}

.\[\&\>svg\]\:h-3>svg {
  height: 0.75rem;
}

.\[\&\>svg\]\:h-3\.5>svg {
  height: 0.875rem;
}

.\[\&\>svg\]\:w-2\.5>svg {
  width: 0.625rem;
}

.\[\&\>svg\]\:w-3>svg {
  width: 0.75rem;
}

.\[\&\>svg\]\:w-3\.5>svg {
  width: 0.875rem;
}

.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}

.\[\&\>svg\]\:text-destructive>svg {
  color: hsl(var(--destructive));
}

.\[\&\>svg\]\:text-foreground>svg {
  color: hsl(var(--foreground));
}

.\[\&\>svg\]\:text-muted-foreground>svg {
  color: hsl(var(--muted-foreground));
}

.\[\&\>svg\~\*\]\:pl-7>svg~* {
  padding-left: 1.75rem;
}

.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
  fill: hsl(var(--muted-foreground));
}

.\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke='#ccc'] {
  stroke: hsl(var(--border) / 0.5);
}

.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
  stroke: hsl(var(--border));
}

.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
  stroke: transparent;
}

.\[\&_\.recharts-layer\]\:outline-none .recharts-layer {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
  stroke: hsl(var(--border));
}

.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: hsl(var(--muted));
}

.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: hsl(var(--muted));
}

.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
  stroke: hsl(var(--border));
}

.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
  stroke: transparent;
}

.\[\&_\.recharts-sector\]\:outline-none .recharts-sector {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.\[\&_\.recharts-surface\]\:outline-none .recharts-surface {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  color: hsl(var(--muted-foreground));
}

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}

.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}

.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}

.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}

.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}

[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
  right: -0.5rem;
}

[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}

[data-side=left] .\[\[data-side\=left\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}

[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
  left: -0.5rem;
}

[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}

[data-side=right] .\[\[data-side\=right\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}
.library-item-wrap{
  display:flex;
  flex-direction:column;
  transform:translate(var(--tape-stack-x,0px),var(--tape-stack-y,0px));
  transition:transform .2s ease;
}

.library-item{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 10px;
  border-radius:10px;
  background:rgba(250,250,250,0.06);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 10px 20px rgba(0,0,0,0.35);
  overflow:hidden;
}

.library-item.is-current{
  transform:translateX(-6px) scale(0.995) translateZ(0);
  box-shadow:0 14px 26px rgba(0,0,0,0.55);
}

.library-item.playing{
  border-color:rgba(116,201,134,0.35);
}

.ios-safe .library-item-wrap{
  transform:none;
  transition:none;
}

.ios-safe .library-item{
  box-shadow:none;
}

.ios-safe .library-item.is-current{
  transform:none;
  box-shadow:none;
}

.library-item::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(255,255,255,0.10) 0%,rgba(255,255,255,0.03) 40%,rgba(255,255,255,0) 55%,rgba(0,0,0,0.16) 100%);
  pointer-events:none;
}

.item-icon{
  width:42px;
  height:42px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,0.10);
}

.spine-mark{
  font-weight:800;
  letter-spacing:1px;
  font-size:12px;
  color:rgba(240,240,245,0.92);
}

.item-info{flex:1 1 auto;min-width:0;}

.spine-paper{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.15);
  background:#efe2d0;
  gap:14px;
  overflow:hidden;
}

.item-title{
  color:rgba(245,246,250,0.96);
  font-size:16px;
  font-weight:800;
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1;
}

.library-item .item-info{
  flex:1 1 auto;
  min-width:0;
}

.library-item .item-actions{
  flex:0 0 auto;
}

.spine-checkbox{
  width:18px;
  height:18px;
  border-radius:2px;
  border:2px solid rgba(0,0,0,0.55);
  flex:0 0 auto;
  opacity:0.75;
}

.spine-checkbox.is-fav{
  background:rgba(116,201,134,0.35);
  border-color:rgba(20,83,45,0.75);
  opacity:1;
}

.item-actions{flex:0 0 auto;display:flex;align-items:center;gap:10px;}

.action-btn{
  background:transparent;
  border:none;
  color:rgba(220,220,225,0.92);
  padding:6px;
  border-radius:6px;
}

.action-btn:active{transform:translateY(1px);opacity:0.9;}

.mini-equalizer{display:flex;align-items:flex-end;gap:2px;height:14px;}
.mini-equalizer .bar{width:3px;background:#74c986;animation:eq-bounce .6s infinite ease-in-out;}
.mini-equalizer .bar:nth-child(2){animation-delay:.1s;height:60%;}
.mini-equalizer .bar:nth-child(3){animation-delay:.2s;height:30%;}

.ios-safe .mini-equalizer .bar{animation:none;}

@keyframes eq-bounce{0%,100%{height:20%;}50%{height:100%;}}

.library-section-sticky{
  position:sticky;
  top:0;
  z-index:12;
  background:rgba(18,18,18,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:10px 0;
  margin-bottom:8px;
}

.idea-row{
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(250,250,250,0.06);
  overflow:hidden;
}

.idea-row.is-playing{
  border-color:rgba(116,201,134,0.35);
}

.idea-row-inner{
  display:flex;
  align-items:stretch;
  gap:10px;
  padding:10px 10px;
}

.idea-strip{
  width:72px;
  flex:0 0 auto;
  border-radius:10px;
  padding:8px 8px;
  background:linear-gradient(180deg, rgba(124,58,237,0.35) 0%, rgba(59,130,246,0.25) 100%);
  border:1px solid rgba(255,255,255,0.10);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.idea-strip.v1{
  background:linear-gradient(180deg, rgba(124,58,237,0.35) 0%, rgba(59,130,246,0.25) 100%);
}

.idea-strip.v2{
  background:linear-gradient(180deg, rgba(236,72,153,0.30) 0%, rgba(99,102,241,0.22) 100%);
}

.idea-strip.v3{
  background:linear-gradient(180deg, rgba(34,197,94,0.24) 0%, rgba(16,185,129,0.18) 100%);
}

.idea-strip.v4{
  background:linear-gradient(180deg, rgba(245,158,11,0.26) 0%, rgba(234,88,12,0.18) 100%);
}

.idea-strip.v5{
  background:linear-gradient(180deg, rgba(14,165,233,0.24) 0%, rgba(59,130,246,0.18) 100%);
}

.idea-strip.v6{
  background:linear-gradient(180deg, rgba(168,85,247,0.26) 0%, rgba(236,72,153,0.16) 100%);
}

.idea-marker{
  font-weight:900;
  letter-spacing:0.8px;
  font-size:12px;
  color:rgba(245,246,250,0.96);
}

.idea-date{
  font-size:10px;
  color:rgba(220,220,225,0.75);
  line-height:1.1;
}

.idea-main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}

.idea-title{
  font-size:15px;
  font-weight:800;
  color:rgba(245,246,250,0.96);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.idea-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.idea-tag{
  font-size:10px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(220,220,225,0.90);
}

.idea-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:4px;
}

.idea-fav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.28);
  color:rgba(255,255,255,0.82);
  opacity:1;
}

.idea-fav.is-fav{
  background:rgba(239,68,68,0.18);
  border-color:rgba(239,68,68,0.35);
  color:rgba(248,113,113,0.95);
}

.ios-safe .library-section-sticky{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* =============================================================================
   LISTENER PAGE — the whole screen is the song.

   Mobile-first and one-handed: art and play up top, the changes sit in the
   bottom half where the thumb lives. Four looks, set by the pass.
   ========================================================================== */
.lsn-shell {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
  transition: background 0.3s, color 0.3s;
}
/* ---- the door ---------------------------------------------------------- */
.lsn-gate { flex: 1; display: grid; place-items: center; padding: 24px; }
.lsn-gate-card { max-width: 460px; text-align: center; }
.lsn-eyebrow {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.65;
}
.lsn-gate-card h1 {
  font-size: clamp(28px, 7vw, 46px);
  line-height: 1.05;
  margin: 12px 0 14px;
  text-wrap: balance;
  letter-spacing: -0.02em;
}
.lsn-welcome { font-style: italic; font-size: 15px; opacity: 0.8; margin: 0 0 26px; text-wrap: balance; }
.lsn-cta {
  display: inline-block;
  border: 0;
  cursor: pointer;
  padding: 15px 34px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
}
.lsn-cta[disabled] { opacity: 0.6; cursor: default; }
.lsn-dim { font-size: 12.5px; opacity: 0.55; margin-top: 14px; }
/* ---- the stage --------------------------------------------------------- */
.lsn-stage {
  flex: 1;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 18px 16px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.lsn-head { display: flex; align-items: center; gap: 12px; }
.lsn-artist { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lsn-av { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.lsn-artist b { display: block; font-size: 15.5px; line-height: 1.2; }
.lsn-artist small { font-size: 11.5px; opacity: 0.62; }
.lsn-head .shp-counter { margin-left: auto; flex: 0 0 auto; }
.lsn-note { font-style: italic; font-size: 13.5px; opacity: 0.75; margin: -4px 0 0; text-wrap: balance; }
.lsn-artbox {
  position: relative;
  border-radius: 18px;
  aspect-ratio: 1 / 0.62;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.lsn-play {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s;
  font-family: inherit;
}
.lsn-play:active { transform: scale(0.95); }
.lsn-play svg { width: 28px; height: 28px; }
.lsn-nowver {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  text-align: center;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.lsn-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lsn-chg { min-height: 62px; }
.lsn-chg[disabled] { cursor: wait; }
.lsn-chg.working { opacity: 0.75; }
.lsn-foot { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.lsn-vers { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.lsn-vers .shp-ver { flex: 0 0 auto; }
.lsn-star { margin-left: 4px; }
.lsn-save { display: flex; gap: 8px; }
.lsn-save input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13.5px;
  font-family: inherit;
}
.lsn-save button {
  border: 0;
  cursor: pointer;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
}
.lsn-reacts { display: flex; gap: 8px; }
.lsn-reacts button {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  font-size: 19px;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  transition: transform 0.12s;
}
.lsn-reacts button:active { transform: scale(1.15); }
/* THE TRANSPORT IS FIXED AT THE FOOT OF THE PAGE, so a toast at bottom:20 with
   z-index:6 was rendering behind it — every "changing track…" message came out
   half-eaten. It clears the transport's height now, and sits above it in the
   stack rather than under. */
.lsn-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  max-width: min(420px, calc(100vw - 32px));
  text-align: center;
  /* A STATUS MESSAGE MUST NEVER SWALLOW A PRESS. Lifting this above the
     transport so it stopped being clipped also put it in front of the download
     menu, which shares that band — and the take's own pulldown stopped
     responding. Nothing in here is interactive; it should not behave as if it
     were. */
  pointer-events: none;
}
/* The tempo slider and the small nspire mark ride in every look; each look
   only has to say what colour they are. */
.lsn-tempo-wrap .tp-tempo { display: flex; align-items: center; gap: 12px; }
.lsn-tempo-wrap label { font-size: 10px; letter-spacing: 0.17em; text-transform: uppercase; opacity: 0.6; }
.lsn-tempo-wrap b { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; }
.lsn-shell .tp-slider::-webkit-slider-runnable-track { background: currentColor; opacity: 0.28; }
.lsn-shell .tp-slider::-moz-range-track { background: currentColor; opacity: 0.28; }
.lsn-shell .tp-slider::-webkit-slider-thumb { background: currentColor; }
.lsn-shell .tp-slider::-moz-range-thumb { background: currentColor; }
/* THE KEY LINE — twelve tonics as type, not a form control.

   The looks disagree about almost everything except that they are quiet, so
   this is drawn entirely in `currentColor` at three weights: the chosen key in
   full ink, the naturals readable, the accidentals recessive. Nothing here has
   a border or a fill, which is what lets it sit under a hand-drawn waveform
   without announcing itself as UI.

   Accidentals are deliberately lighter than naturals. Twelve items of equal
   weight is a wall of letters you have to read; this way the eye lands on the
   seven it already knows and the sharps are found by looking between them —
   the same shape as a keyboard, without drawing one. */
.lsn-keyline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px;
  margin-top: 18px;
  width: 100%;
}
.lsn-keyk {
  flex: 1 1 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  /* A 34px tap target on a 26px letter: the row stays visually thin while
     staying honestly thumb-sized. */
  min-height: 34px;
  padding: 0;
  cursor: pointer;
  opacity: 0.42;
  transition: opacity 0.14s;
}
/* The five accidentals sit back so the seven naturals carry the line. */
.lsn-keyk:nth-child(2),
.lsn-keyk:nth-child(4),
.lsn-keyk:nth-child(7),
.lsn-keyk:nth-child(9),
.lsn-keyk:nth-child(11) { opacity: 0.26; font-size: 11.5px; }
.lsn-keyk:hover:not(:disabled) { opacity: 0.8; }
/* The chosen key is the only thing on the line at full strength. */
.lsn-keyk.on,
.lsn-keyk.on:nth-child(2n) {
  opacity: 1;
  font-weight: 700;
  font-size: 15px;
}
.lsn-keyk:disabled { cursor: default; }
/* Mid-flight: the pressed key blinks at full ink until the retune actually
   sounds. The press must answer instantly even when the audio can't — a
   couple of silent seconds with no acknowledgement reads as broken, and the
   next thing a listener does is press it again. */
.lsn-keyk.pending { animation: lsn-keyblink 0.7s ease-in-out infinite; }
@keyframes lsn-keyblink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
/* ---- the balloon tempo slider ------------------------------------------
   All currentColor, so it wears each look's ink like the rest of the chrome.
   The inflate/deflate is CSS transitions on r/cy (SVG2 presentation
   properties) driven by one class on the root group. */
.lsn-balloon { width: 100%; height: 44px; display: block; touch-action: none;
  cursor: pointer; outline-offset: 4px; overflow: visible; }
.lsn-balloon-bar { stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: 0.28; }
.lsn-balloon-handle { fill: currentColor;
  transition: r 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
.lsn-balloon-blob { fill: currentColor;
  transition: r 0.45s cubic-bezier(0.2, 1.4, 0.4, 1), cy 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
/* Up: the blob inflates out of the handle and rises; the handle thins to a
   bead under the finger. Numbers only exist while the balloon does — at rest
   the row's own readout carries the value. */
.lsn-balloon-root .lsn-balloon-num { opacity: 0; }
.lsn-balloon-root.is-up .lsn-balloon-blob { r: 16px; cy: 22px; }
.lsn-balloon-root.is-up .lsn-balloon-handle { r: 4px; }
.lsn-balloon-root.is-up .lsn-balloon-num { opacity: 1; transition: opacity 0.2s 0.1s; }
.lsn-balloon-num {
  text-anchor: middle;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  fill: currentColor;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* The number sits INSIDE the balloon, which is drawn in ink — so it takes
   the look's paper colour. Dark looks use dark paper, light looks light. */
.lsn-shell .lsn-balloon-num { fill: #121210; }
.lsn-shell[data-look="wave"] .lsn-balloon-num,
.lsn-shell[data-look="b-light"] .lsn-balloon-num,
.lsn-shell[data-look="c-light"] .lsn-balloon-num { fill: #F7F6F3; }
.lsn-brandmark {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.4;
  padding-top: 4px;
}
.lsn-brandmark b { letter-spacing: 0.26em; }
.lsn-act {
  border: 0; cursor: pointer; background: none;
  border-radius: 999px; padding: 9px 14px; font-size: 12px;
  font-family: inherit; color: inherit;
  box-shadow: inset 0 0 0 1px currentColor;
  opacity: 0.85;
}
.lsn-act:hover { opacity: 1; }
.lsn-act.primary { box-shadow: none; font-weight: 700; }
.lsn-shell .tp-save { display: flex; gap: 8px; }
.lsn-shell .tp-save input {
  flex: 1; min-width: 0; border: 0; border-radius: 10px;
  padding: 10px 13px; font-size: 13px; font-family: inherit;
}
.lsn-shell .tp-commentbox { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.lsn-shell .tp-commentbox textarea {
  border: 0; border-radius: 10px; padding: 10px 12px;
  font-size: 13px; font-family: inherit; resize: vertical;
}
.lsn-shell .tp-acts { display: flex; flex-wrap: wrap; gap: 7px; }
.lsn-shell .shp-sheet { position: fixed; }
.lsn-shell button:focus-visible,
.lsn-shell input:focus-visible,
.lsn-shell a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* ===================== LOOK: b-dark — Blacklight ========================= */
.lsn-shell[data-look='b-dark'] { background: #0a0a0d; color: #f4f4f6; }
[data-look='b-dark'] .lsn-av { background: conic-gradient(from 200deg, #8f7bff, #3ec6c0, #8f7bff); }
[data-look='b-dark'] .lsn-artbox { background: radial-gradient(85% 120% at 50% 25%, #241f3d 0%, #0a0a0d 72%); }
[data-look='b-dark'] .lsn-play { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); color: #fff; }
[data-look='b-dark'] .lsn-cta { background: #8f7bff; color: #0a0a0d; }
[data-look='b-dark'] .lsn-save input { background: rgba(255, 255, 255, 0.08); color: #fff; }
[data-look='b-dark'] .lsn-save button { background: #8f7bff; color: #0a0a0d; }
[data-look='b-dark'] .lsn-reacts button { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: #fff; }
[data-look='b-dark'] .shp-chg { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); border-radius: 16px; color: #f4f4f6; }
[data-look='b-dark'] .shp-ver { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); border-radius: 999px; color: #f4f4f6; }
[data-look='b-dark'] .shp-ver.on { box-shadow: inset 0 0 0 1.5px #8f7bff; }
[data-look='b-dark'] .shp-ver .dot { background: #8f7bff; }
[data-look='b-dark'] .shp-counter { color: #b9b3d9; background: rgba(143, 123, 255, 0.1); }
[data-look='b-dark'] .shp-counter i { background: #8f7bff; box-shadow: 0 0 8px #8f7bff; }
[data-look='b-dark'] .shp-toast { background: #8f7bff; color: #0a0a0d; }
[data-look='b-dark'] .shp-sheetcard { background: #141318; color: #f4f4f6; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 80px rgba(0, 0, 0, 0.7); }
[data-look='b-dark'] .shp-sheetbtns .b1 { background: #8f7bff; color: #0a0a0d; }
[data-look='b-dark'] .shp-sheetbtns .b2 { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: #f4f4f6; }
/* ===================== LOOK: b-light — Gallery =========================== */
.lsn-shell[data-look='b-light'] { background: #f5f5f7; color: #141419; }
[data-look='b-light'] .lsn-av { background: conic-gradient(from 200deg, #6a55e8, #2ba7a1, #6a55e8); }
[data-look='b-light'] .lsn-artbox { background: radial-gradient(85% 120% at 50% 25%, #e7e4f8 0%, #f5f5f7 72%); }
[data-look='b-light'] .lsn-play { background: #141419; color: #fff; box-shadow: 0 10px 28px rgba(20, 20, 25, 0.28); }
[data-look='b-light'] .lsn-cta { background: #141419; color: #fff; }
[data-look='b-light'] .lsn-save input { background: #fff; color: #141419; box-shadow: inset 0 0 0 1px rgba(20, 20, 25, 0.14); }
[data-look='b-light'] .lsn-save button { background: #6a55e8; color: #fff; }
[data-look='b-light'] .lsn-reacts button { background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 20, 25, 0.12); }
[data-look='b-light'] .shp-chg { background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 20, 25, 0.12); border-radius: 16px; color: #141419; }
[data-look='b-light'] .shp-ver { background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 20, 25, 0.14); border-radius: 999px; color: #141419; }
[data-look='b-light'] .shp-ver.on { box-shadow: inset 0 0 0 1.5px #6a55e8; }
[data-look='b-light'] .shp-ver .dot { background: #6a55e8; }
[data-look='b-light'] .shp-counter { color: #4c3fb0; background: rgba(106, 85, 232, 0.1); }
[data-look='b-light'] .shp-counter i { background: #6a55e8; }
[data-look='b-light'] .shp-toast { background: #141419; color: #fff; }
[data-look='b-light'] .shp-sheet { background: rgba(245, 245, 247, 0.66); }
[data-look='b-light'] .shp-sheetcard { background: #fff; color: #141419; box-shadow: 0 0 0 1px rgba(20, 20, 25, 0.08), 0 30px 80px rgba(20, 20, 25, 0.22); }
[data-look='b-light'] .shp-sheetbtns .b1 { background: #6a55e8; color: #fff; }
[data-look='b-light'] .shp-sheetbtns .b2 { box-shadow: inset 0 0 0 1px rgba(20, 20, 25, 0.16); color: #141419; }
/* ===================== LOOK: c-light — Deckside putty ==================== */
.lsn-shell[data-look='c-light'] { background: linear-gradient(180deg, #ddd7cb, #cdc7ba); color: #26282c; font-family: 'SF Mono', Consolas, monospace; }
[data-look='c-light'] .lsn-av { background: radial-gradient(circle at 35% 30%, #4a4e55, #23252a); }
[data-look='c-light'] .lsn-artbox { background: #b7c9a0; box-shadow: inset 0 2px 12px rgba(30, 40, 24, 0.35), inset 0 0 0 3px #23252a; border-radius: 10px; }
[data-look='c-light'] .lsn-play { background: linear-gradient(180deg, #f2ede3, #cfc9bc); box-shadow: 0 4px 0 #9d968a, 0 8px 16px rgba(0, 0, 0, 0.25); color: #26282c; border-radius: 18px; }
[data-look='c-light'] .lsn-play:active { transform: translateY(3px); box-shadow: 0 1px 0 #9d968a; }
[data-look='c-light'] .lsn-cta { background: #e0562e; color: #fff; box-shadow: 0 4px 0 #93361b; border-radius: 12px; }
[data-look='c-light'] .lsn-save input { background: #b7c9a0; color: #2c3a26; box-shadow: inset 0 0 0 2px #23252a; font-family: inherit; }
[data-look='c-light'] .lsn-save button { background: linear-gradient(180deg, #f2ede3, #d8d2c6); box-shadow: 0 3px 0 #a49d90; color: #26282c; }
[data-look='c-light'] .lsn-reacts button { background: linear-gradient(180deg, #f2ede3, #d8d2c6); box-shadow: 0 3px 0 #a49d90; }
[data-look='c-light'] .shp-chg { background: linear-gradient(180deg, #f2ede3, #d8d2c6); box-shadow: 0 3px 0 #a49d90, 0 6px 12px rgba(0, 0, 0, 0.16); border-radius: 10px; color: #26282c; text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.05em; }
[data-look='c-light'] .shp-chg small { text-transform: none; letter-spacing: 0; }
[data-look='c-light'] .shp-chg:active { transform: translateY(2px); box-shadow: 0 1px 0 #a49d90; }
[data-look='c-light'] .shp-ver { background: #b7c9a0; box-shadow: inset 0 0 0 2px #23252a; border-radius: 6px; color: #2c3a26; }
[data-look='c-light'] .shp-ver.on { background: #c6d8ab; }
[data-look='c-light'] .shp-ver .dot { background: #2c3a26; }
[data-look='c-light'] .shp-counter { background: #b7c9a0; color: #2c3a26; box-shadow: inset 0 0 0 2px #23252a; border-radius: 6px; text-transform: uppercase; }
[data-look='c-light'] .shp-counter i { background: #e0562e; }
[data-look='c-light'] .lsn-nowver { color: #2c3a26; }
[data-look='c-light'] .shp-toast { background: #23252a; color: #b7c9a0; }
[data-look='c-light'] .shp-sheet { background: rgba(221, 215, 203, 0.66); }
[data-look='c-light'] .shp-sheetcard { background: #ddd7cb; color: #26282c; box-shadow: 0 0 0 3px #23252a, 0 30px 80px rgba(0, 0, 0, 0.45); }
[data-look='c-light'] .shp-sheetbtns .b1 { background: #e0562e; color: #fff; box-shadow: 0 3px 0 #93361b; }
[data-look='c-light'] .shp-sheetbtns .b2 { box-shadow: inset 0 0 0 2px #23252a; color: #26282c; }
/* ===================== LOOK: c-dark — Deckside Night ===================== */
.lsn-shell[data-look='c-dark'] { background: linear-gradient(180deg, #33363d, #212429); color: #e8e4da; font-family: 'SF Mono', Consolas, monospace; }
[data-look='c-dark'] .lsn-av { background: radial-gradient(circle at 35% 30%, #6a6f78, #33363c); }
[data-look='c-dark'] .lsn-artbox { background: #9db386; box-shadow: inset 0 2px 12px rgba(15, 22, 10, 0.5), inset 0 0 0 3px #14151a, 0 0 26px rgba(150, 190, 120, 0.18); border-radius: 10px; }
[data-look='c-dark'] .lsn-play { background: linear-gradient(180deg, #4a4e57, #33363c); box-shadow: 0 4px 0 #17181c, 0 8px 16px rgba(0, 0, 0, 0.5); color: #e8e4da; border-radius: 18px; }
[data-look='c-dark'] .lsn-play:active { transform: translateY(3px); box-shadow: 0 1px 0 #17181c; }
[data-look='c-dark'] .lsn-cta { background: #e0562e; color: #fff; box-shadow: 0 4px 0 #93361b; border-radius: 12px; }
[data-look='c-dark'] .lsn-save input { background: #1d2516; color: #b7c9a0; box-shadow: inset 0 0 0 2px #0f120b; font-family: inherit; }
[data-look='c-dark'] .lsn-save button { background: linear-gradient(180deg, #4a4e57, #383b42); box-shadow: 0 3px 0 #17181c; color: #e8e4da; }
[data-look='c-dark'] .lsn-reacts button { background: linear-gradient(180deg, #4a4e57, #383b42); box-shadow: 0 3px 0 #17181c; }
[data-look='c-dark'] .shp-chg { background: linear-gradient(180deg, #4a4e57, #383b42); box-shadow: 0 3px 0 #17181c, 0 6px 12px rgba(0, 0, 0, 0.35); border-radius: 10px; color: #e8e4da; text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.05em; }
[data-look='c-dark'] .shp-chg small { text-transform: none; letter-spacing: 0; }
[data-look='c-dark'] .shp-chg:active { transform: translateY(2px); box-shadow: 0 1px 0 #17181c; }
[data-look='c-dark'] .shp-ver { background: #1d2516; box-shadow: inset 0 0 0 2px #0f120b; border-radius: 6px; color: #b7c9a0; }
[data-look='c-dark'] .shp-ver.on { background: #2c3a26; box-shadow: inset 0 0 0 2px #0f120b, 0 0 12px rgba(150, 190, 120, 0.25); }
[data-look='c-dark'] .shp-ver .dot { background: #b7c9a0; }
[data-look='c-dark'] .shp-counter { background: #1d2516; color: #b7c9a0; box-shadow: inset 0 0 0 2px #0f120b; border-radius: 6px; text-transform: uppercase; }
[data-look='c-dark'] .shp-counter i { background: #e0562e; box-shadow: 0 0 6px rgba(224, 86, 46, 0.7); }
[data-look='c-dark'] .lsn-nowver { color: #1d2516; }
[data-look='c-dark'] .shp-toast { background: #b7c9a0; color: #1d2516; }
[data-look='c-dark'] .shp-sheetcard { background: #2b2d33; color: #e8e4da; box-shadow: 0 0 0 3px #14151a, 0 30px 80px rgba(0, 0, 0, 0.65); }
[data-look='c-dark'] .shp-sheetbtns .b1 { background: #e0562e; color: #fff; box-shadow: 0 3px 0 #93361b; }
[data-look='c-dark'] .shp-sheetbtns .b2 { box-shadow: inset 0 0 0 2px #14151a; color: #e8e4da; }
/* Inputs need a ground per look — currentColor can't carry a field. */
[data-look='b-dark'] .tp-save input,
[data-look='b-dark'] .tp-commentbox textarea { background: rgba(255, 255, 255, 0.08); color: #f4f4f6; }
[data-look='b-dark'] .lsn-act.primary { background: #8f7bff; color: #0a0a0d; }
[data-look='b-light'] .tp-save input,
[data-look='b-light'] .tp-commentbox textarea { background: #fff; color: #141419; box-shadow: inset 0 0 0 1px rgba(20, 20, 25, 0.14); }
[data-look='b-light'] .lsn-act.primary { background: #6a55e8; color: #fff; }
[data-look='c-light'] .tp-save input,
[data-look='c-light'] .tp-commentbox textarea { background: #b7c9a0; color: #2c3a26; box-shadow: inset 0 0 0 2px #23252a; font-family: inherit; }
[data-look='c-light'] .lsn-act { border-radius: 8px; box-shadow: 0 2.5px 0 #a49d90; background: linear-gradient(180deg, #f2ede3, #d8d2c6); color: #26282c; }
[data-look='c-light'] .lsn-act.primary { background: #e0562e; color: #fff; box-shadow: 0 2.5px 0 #93361b; }
[data-look='c-dark'] .tp-save input,
[data-look='c-dark'] .tp-commentbox textarea { background: #1d2516; color: #b7c9a0; box-shadow: inset 0 0 0 2px #0f120b; font-family: inherit; }
[data-look='c-dark'] .lsn-act { border-radius: 8px; box-shadow: 0 2.5px 0 #17181c; background: linear-gradient(180deg, #4a4e57, #383b42); color: #e8e4da; }
[data-look='c-dark'] .lsn-act.primary { background: #e0562e; color: #fff; box-shadow: 0 2.5px 0 #93361b; }
/* Desktop gets a roomier stage, never a different product. */
@media (min-width: 780px) {
  .lsn-stage { max-width: 720px; padding-top: 34px; gap: 18px; }
  .lsn-artbox { aspect-ratio: 1 / 0.45; }
  .lsn-controls { grid-template-columns: repeat(3, 1fr); }
  .lsn-foot { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .lsn-vers { flex: 1 1 100%; }
  .lsn-save { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lsn-play, .shp-chg, .lsn-reacts button { transition-duration: 0.001s; }
}
/* ---- BEAT TAPE ---------------------------------------------------------
   A pass with more than one song shows its running order. A single-song
   share never renders this, so the original listener page is untouched. */
.lsn-tape{margin:14px 0 4px;padding:11px 13px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.lsn-tapename{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.55;margin-bottom:7px}
.lsn-tapelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
  max-height:210px;overflow-y:auto;overscroll-behavior:contain}
.lsn-tapetrack{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:7px 9px;border:0;border-radius:8px;background:none;color:inherit;cursor:pointer;
  font:inherit;font-size:13.5px;transition:background .14s,opacity .14s}
.lsn-tapetrack:hover:not(:disabled){background:rgba(255,255,255,.07)}
.lsn-tapetrack:disabled{opacity:.5;cursor:default}
.lsn-tapetrack.on{background:rgba(255,255,255,.11);font-weight:600}
.lsn-tapetrack i{font-style:normal;font-size:11px;opacity:.5;width:16px;flex:none;
  font-variant-numeric:tabular-nums}
.lsn-tapetrack span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsn-tapetrack em{font-style:normal;font-size:9px;letter-spacing:1px;opacity:.7;flex:none}
/* ---- TAPE TRANSPORT ----------------------------------------------------
   Five buttons in a deck's order. Inherits the look's own colours through
   currentColor, so it belongs to whatever theme the share is wearing. */
.lsn-transport{display:flex;align-items:center;justify-content:center;gap:6px;
  margin:14px auto 4px;padding:8px 12px;border-radius:999px;width:-moz-fit-content;width:fit-content;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.lsn-tb{width:38px;height:38px;border:0;border-radius:50%;background:none;color:inherit;
  display:grid;place-items:center;cursor:pointer;padding:0;flex:none;
  transition:background .14s,transform .1s,opacity .14s;-webkit-tap-highlight-color:transparent}
.lsn-tb svg{width:19px;height:19px;display:block}
.lsn-tb:hover:not(:disabled){background:rgba(255,255,255,.12)}
.lsn-tb:active:not(:disabled){transform:scale(.94)}
.lsn-tb:disabled{opacity:.28;cursor:default}
.lsn-tb--play{width:46px;height:46px;background:rgba(255,255,255,.14)}
.lsn-tb--play svg{width:22px;height:22px}
/* Held: the reels are turning. */
.lsn-tb.spooling{background:rgba(255,255,255,.22);animation:lsn-spool .32s linear infinite}
@keyframes lsn-spool{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lsn-tb.spooling{animation:none}}
.lsn-tpos{font-size:11px;opacity:.5;margin-left:4px;font-variant-numeric:tabular-nums;
  letter-spacing:.04em;flex:none}
/* A light look needs dark chrome, not white-on-white. */
.lsn-shell[data-look="wave"] .lsn-transport,
.lsn-shell[data-look="b-light"] .lsn-transport,
.lsn-shell[data-look="c-light"] .lsn-transport{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.12)}
.lsn-shell[data-look="wave"] .lsn-tb:hover:not(:disabled),
.lsn-shell[data-look="b-light"] .lsn-tb:hover:not(:disabled),
.lsn-shell[data-look="c-light"] .lsn-tb:hover:not(:disabled){background:rgba(0,0,0,.09)}
.lsn-shell[data-look="wave"] .lsn-tb--play,
.lsn-shell[data-look="b-light"] .lsn-tb--play,
.lsn-shell[data-look="c-light"] .lsn-tb--play{background:rgba(0,0,0,.1)}
.lsn-count{margin:-2px 0 0;font-size:13px;opacity:.6;letter-spacing:.01em}
/* ---- THE OPENING -------------------------------------------------------
   No card and no border. The name arrives a letter at a time in a serif,
   everything else waits behind it, and the page IS the title. */
.lsn-gate--plain{display:grid;place-items:center;min-height:100dvh;padding:32px 24px;
  background:none;border:0}
.lsn-open{max-width:44rem;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:0}
.lsn-openname{font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:700;font-size:clamp(2.4rem,7vw,5rem);line-height:1.04;letter-spacing:-.015em;
  margin:0;display:inline-flex;flex-wrap:wrap;justify-content:center}
.lsn-ltr{opacity:0;display:inline-block;white-space:pre;
  animation:lsn-ltr-in .5s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes lsn-ltr-in{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
/* Everything under the name fades in only once the name has finished. */
.lsn-opensub,.lsn-openwelcome,.lsn-openplay,.lsn-openfoot{opacity:0;
  animation:lsn-rise .7s ease forwards}
@keyframes lsn-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.lsn-opensub{margin:18px 0 0;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  opacity:.62;animation-delay:1.15s}
.lsn-openwelcome{margin:20px 0 0;font-size:1rem;line-height:1.6;max-width:34rem;
  opacity:.78;font-style:italic;animation-delay:1.3s}
.lsn-openplay{margin:36px 0 0;background:none;border:1px solid currentColor;color:inherit;
  border-radius:999px;padding:13px 44px;font:inherit;font-size:.76rem;letter-spacing:.28em;
  text-transform:uppercase;cursor:pointer;animation-delay:1.45s;
  transition:background .2s,color .2s,letter-spacing .2s}
.lsn-openplay:hover:not(:disabled){background:currentColor;letter-spacing:.34em}
.lsn-shell[data-look="wave"] .lsn-openplay:hover:not(:disabled),
.lsn-shell[data-look="b-light"] .lsn-openplay:hover:not(:disabled),
.lsn-shell[data-look="c-light"] .lsn-openplay:hover:not(:disabled){color:#fff}
.lsn-shell[data-look="b-dark"] .lsn-openplay:hover:not(:disabled),
.lsn-shell[data-look="c-dark"] .lsn-openplay:hover:not(:disabled),
.lsn-shell[data-look="tape"] .lsn-openplay:hover:not(:disabled){color:#0d0d0d}
.lsn-openplay:disabled{opacity:.5;cursor:default}
.lsn-openfoot{margin:22px 0 0;font-size:.72rem;opacity:.42;letter-spacing:.06em;
  animation-delay:1.6s}
@media (prefers-reduced-motion:reduce){
  .lsn-ltr,.lsn-opensub,.lsn-openwelcome,.lsn-openplay,.lsn-openfoot{
    animation:none;opacity:1;transform:none}
}
/* The transport belongs at the FOOT OF THE PAGE, on every look — a deck's
   is under your hand, not floating in the middle of the sleeve. Fixed to the
   viewport so it lands there whatever each look's own layout does. */
.lsn-transport{position:fixed;left:50%;transform:translateX(-50%);
  bottom:max(14px,env(safe-area-inset-bottom));margin:0;z-index:20;
  backdrop-filter:blur(10px)}
/* Give every look room so nothing hides behind it. */
.lsn-stage,.wv-stage,.tp-stage{padding-bottom:88px}
.wv-reacts--sheet{display:flex;gap:8px;justify-content:center;margin:2px 0 6px}
/* Powered-by: quiet, and the last thing read. */
/* Sits well below the invitation rather than tucked under it — this is the
   footer of the screen, and the space is what says the message has finished. */
/* What it is, then a clear beat, then who made it. They were 10px apart and
   read as one run-on line; the gap is what separates the description of the
   thing from the credit under it. */
.lsn-openkind{margin:44px 0 0;font-size:.72rem;letter-spacing:.14em;animation:lsn-rise .7s ease 1.6s forwards;opacity:0}
/* Lower-case, and the last thing on the screen now that the footer line is
   gone — so it carries the closing space itself. `nspire` is a lower-case
   wordmark; uppercasing it here was the stylesheet overruling the brand. */
.lsn-poweredby{margin:64px 0 0;font-size:.62rem;letter-spacing:.22em;animation:lsn-rise .7s ease 1.75s forwards;opacity:0}
.lsn-poweredby b{font-weight:600}
@media (prefers-reduced-motion:reduce){.lsn-poweredby{animation:none;opacity:.3}}
/* THE RUNNING ORDER, desktop only. The one playing is bigger, the way a
   sleeve shows you where you are. Phones have the transport's counter. */
.lsn-wall{position:fixed;right:clamp(18px,3vw,44px);top:50%;transform:translateY(-50%);
  list-style:none;margin:0;padding:0;z-index:4;max-width:20vw;
  display:flex;flex-direction:column;gap:5px;align-items:flex-end;text-align:right}
.lsn-wallitem{background:none;border:0;padding:2px 0;font:inherit;color:inherit;cursor:pointer;
  font-size:.78rem;opacity:.34;letter-spacing:.01em;line-height:1.3;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:opacity .2s,font-size .25s,letter-spacing .2s}
.lsn-wallitem:hover:not(:disabled){opacity:.7}
.lsn-wallitem.on{opacity:1;font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
@media (max-width:900px){.lsn-wall{display:none}}
/* The conversion sheet, over a moving picture. */
.lsn-cloud{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(closest-side at 50% 50%,rgba(255,255,255,.96),rgba(255,255,255,.82) 55%,rgba(255,255,255,0));
  backdrop-filter:blur(6px)}
.lsn-sheetcard{position:relative;z-index:1;color:#12120f;background:none;border:0;box-shadow:none}
.lsn-sheetcard h3{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(1.5rem,3.6vw,2.1rem);margin:0 0 10px;letter-spacing:-.01em}
.lsn-sheetcard p{font-size:.95rem;line-height:1.6;opacity:.72;margin:0 0 16px}
.lsn-sheetcard ul{margin:0 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.lsn-sheetcard li{font-size:.9rem;line-height:1.5;opacity:.82;padding-left:18px;position:relative}
.lsn-sheetcard li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:currentColor;opacity:.5}
.lsn-sheetbtns.lsn-sheetbtns{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.lsn-sheetcard .lsn-openplay{margin:0;animation:none;opacity:1;text-decoration:none;
  text-align:center;border-color:#12120f;color:#12120f}
.lsn-sheetcard .lsn-openplay:hover{background:#12120f;color:#fff}
.lsn-openplay--ghost{opacity:.72}
.lsn-sheetskip{background:none;border:0;font:inherit;font-size:.76rem;letter-spacing:.08em;
  opacity:.5;cursor:pointer;padding:6px;color:inherit}
.lsn-sheetskip:hover{opacity:.85}
/* ---- ROOM FOR THE TRANSPORT --------------------------------------------
   It is fixed to the bottom, so every look needs clearance under its own
   content or the last row sits behind it. 118px covers the pill plus the
   safe area on a phone. */
.lsn-stage,.wv-stage,.tp-stage{padding-bottom:118px}
@media (max-width:640px){.lsn-stage,.wv-stage,.tp-stage{padding-bottom:132px}}
/* The change buttons were the row landing under it. Give them their own
   breathing room and let them wrap rather than run off the edge. */
.wv-changes,.tp-changes,.lsn-cards{margin-bottom:18px;flex-wrap:wrap}
/* The transport sits on its own plate so text behind it never bleeds
   through — dark text on a light look was showing through the blur. */
.lsn-transport{background:rgba(250,250,249,.94);border-color:rgba(0,0,0,.1);
  box-shadow:0 6px 26px -10px rgba(0,0,0,.35)}
.lsn-shell[data-look="b-dark"] .lsn-transport,
.lsn-shell[data-look="c-dark"] .lsn-transport,
.lsn-shell[data-look="tape"] .lsn-transport{background:rgba(18,18,16,.94);
  border-color:rgba(255,255,255,.12);box-shadow:0 6px 26px -10px rgba(0,0,0,.7)}
/* THE TEMPO HANDLE. It was a thin ring on a thin track — invisible on a
   white look and unfindable on a phone. Give it a real body and a rim. */
.wv-slider::-webkit-slider-thumb,.tp-slider::-webkit-slider-thumb,
input[type="range"].wv-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:currentColor;border:3px solid rgba(255,255,255,.9);cursor:grab;
  box-shadow:0 1px 6px rgba(0,0,0,.35)}
.wv-slider::-moz-range-thumb,.tp-slider::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:currentColor;
  border:3px solid rgba(255,255,255,.9);cursor:grab;box-shadow:0 1px 6px rgba(0,0,0,.35)}
.wv-slider:active::-webkit-slider-thumb,.tp-slider:active::-webkit-slider-thumb{cursor:grabbing}
/* Whose tape, on the player. */
.wv-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.wv-who b{font-weight:650;letter-spacing:-.01em}
.wv-who span{opacity:.6;font-size:.9em}
/* ---- MOBILE ------------------------------------------------------------
   The transport is fixed to the bottom, so on a phone EVERYTHING has to end
   above it — the versions row was running underneath, and More was taking a
   whole line to itself for one word. */
@media (max-width:640px){
  .lsn-stage,.wv-stage,.tp-stage{padding-bottom:150px}
  /* Versions were overlapping the transport. Keep them in the flow, scroll
     them sideways rather than letting them stack into it. */
  .lsn-vers,.wv-vers,.tp-vers{display:flex;flex-wrap:nowrap;overflow-x:auto;
    gap:6px;padding-bottom:6px;margin-bottom:10px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .lsn-vers>*,.wv-vers>*,.tp-vers>*{flex:none}
  /* More is a word, not a row. Put it inline with the changes. */
  .wv-transport{display:inline-flex;margin:0 auto 10px;gap:8px}
  .wv-transport .wv-txt{padding:6px 14px;font-size:.78rem}
  /* Change buttons wrap in two tidy columns instead of running off. */
  .wv-changes,.tp-changes,.lsn-cards{display:flex;flex-wrap:wrap;justify-content:center;
    gap:8px;margin-bottom:14px}
  .wv-changes>*,.tp-changes>*,.lsn-cards>*{flex:0 1 auto}
  /* A phone is where the transport gets BIGGER, not tighter. The old rule
     shrank the buttons to 34px to make room — below the 44px touch floor, on
     the one device that is all thumbs. Five 44px targets plus the 52px play
     plus the counter is ~290px; a 375px phone holds it with room over. */
  .lsn-transport{gap:4px;padding:6px 10px}
  .lsn-tb{width:44px;height:44px}
  .lsn-tb svg{width:21px;height:21px}
  .lsn-tb--play{width:52px;height:52px}
  .lsn-tb--play svg{width:24px;height:24px}
  .lsn-tpos{font-size:10px;margin-left:2px}
}
/* Small talk where the controls will be. Reads as the room talking, not as a
   status line — no bar, no percentage, nothing about what is loading. */
.lsn-waiting {
  margin: 14px 0 6px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  opacity: 0.5;
  font-style: italic;
  animation: lsn-waitfade 3.4s ease-in-out infinite;
}
@keyframes lsn-waitfade {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) { .lsn-waiting { animation: none; opacity: 0.5; } }
/* Cold: present, clearly not yet yours. Dimmed and untouchable rather than
   hidden, so the shape of what is coming is already on the page. */
.tp-tempo.is-cold, .wv-tempo.is-cold, .lsn-keyline.is-cold {
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
/* THE SIGN-IN IN THE HEADER. Dead centre between the artist block and the
   change counter, so it reads as part of the bar rather than an ad stuck on
   it. Quiet by default — it is a door, not a demand. */
.lsn-head,.wv-top{position:relative}
.lsn-signin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:inherit;opacity:.55;padding:8px 12px;border-radius:999px;
  border:1px solid currentColor;line-height:1;white-space:nowrap;transition:opacity .2s}
.lsn-signin:hover{opacity:.9}
/* ── THE CONTROLS GO QUIET WHEN THE DEMO IS SPENT ─────────────────────────
   The sheet says the demo is over, and behind it sat a full rack of change
   buttons, the key row and the tempo — every one of them dead. Offering
   controls that cannot fire is worse than removing them: the reader tries
   one, nothing happens, and the message on top stops being believed.

   Hidden rather than dimmed. Disabled-looking controls still read as an
   invitation to try; absent ones do not. The transport stays — you can still
   LISTEN to what you made, which is the whole point of "Keep listening". */
.wv-stage.is-spent .wv-changes,
.wv-stage.is-spent .wv-tempo,
.wv-stage.is-spent .wv-extras,
.lsn-stage.is-spent .lsn-changes,
.lsn-stage.is-spent .lsn-tempo-wrap,
.lsn-stage.is-spent .lsn-acts { display: none; }
/* THE SHARED STUDIO — phone first, because that's how links get opened.
   World on top, panel underneath; on a wide screen the split becomes a
   side-by-side so the room gets the height it deserves. */

.ls3 {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: 58fr 42fr;
  background: #08070a;
  color: #e8e6e1;
  font-family: 'Segoe UI', system-ui, sans-serif;
  overscroll-behavior: none;
  touch-action: none;
}

.ls3-world {
  position: relative;
  overflow: hidden;
  touch-action: none;
}

.ls3-world canvas { display: block; width: 100%; height: 100%; }

/* Where you are, top-left, quiet. */
.ls3-where {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.ls3-welcome {
  position: absolute;
  top: 12px;
  right: 14px;
  max-width: 52%;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
  text-align: right;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.ls3-live {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ff4a3c;
  text-shadow: 0 0 12px rgba(255, 74, 60, 0.6);
  pointer-events: none;
}

/* The room talking back when you touch what isn't yours. Sits high and
   centre so it can't hide the gear you were reaching for. */
.ls3-denial {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 82%;
  padding: 9px 14px;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: center;
  color: #f6efe2;
  background: rgba(24, 18, 12, 0.86);
  border: 1px solid rgba(185, 122, 30, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  pointer-events: none;
  animation: ls3-denial-in 160ms ease-out;
}

@keyframes ls3-denial-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* The context-loss card. */
.ls3-lost {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: rgba(8, 7, 10, 0.93);
}
.ls3-lost b { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
.ls3-lost span { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); max-width: 34ch; }
.ls3-lost button {
  margin-top: 4px;
  padding: 10px 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #14110c;
  background: #b97a1e;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

/* The thumbstick. Bottom-left, thumb-sized, and it never steals the
   look-drag because it captures its own pointer. */
.ls3-stick {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  touch-action: none;
  display: grid;
  place-items: center;
}

.ls3-stick-knob {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: transform 60ms linear;
  pointer-events: none;
}

/* ---------------- the panel ---------------- */

.ls3-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #0e0d11;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.ls3-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 12px 0;
}

.ls3-tabs button {
  flex: 1;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.ls3-tabs button.on {
  color: #f2efe8;
  border-bottom-color: #b97a1e;
}

.ls3-now { padding: 16px 18px; overflow-y: auto; flex: 1; min-height: 0; }

/* Getting about. Rows in the panel, not chips over the room. */
.ls3-goes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }

.ls3-go {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #f2ede4;
  text-align: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  cursor: pointer;
}
.ls3-go:active { background: rgba(255, 255, 255, 0.13); }

/* THE PINNED TRANSPORT. Outside the scroll area on purpose — it is the
   one thing that must be reachable at every moment. */
.ls3-transport {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #131117;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ls3-tp-play {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  color: #0e0d11;
  background: #e8e6e1;
  border: 0;
  cursor: pointer;
}
.ls3-tp-play.on { background: #b97a1e; color: #14110c; }

.ls3-tp-tempo { flex: 1; min-width: 0; accent-color: #b97a1e; }

.ls3-tp-bpm {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.66);
}
.ls3-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.ls3-artist { margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.ls3-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
  max-width: 46ch;
}

.ls3-chat { padding: 18px; overflow-y: auto; flex: 1; min-height: 0; }
.ls3-chat-empty { font-size: 13px; color: rgba(255, 255, 255, 0.4); }

/* SIDEWAYS IS FULL 3D. Turning the phone is how you say "let me look at
   the room" — so the panel gets out of the way entirely and the world
   takes the whole screen. Its tabs collapse to a pill you can pull back
   up if you want the details. */
@media (orientation: landscape) and (max-width: 1024px) {
  .ls3 { grid-template-rows: 1fr; }
  .ls3-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 46vh;
    transform: translateY(calc(100% - 42px));
    transition: transform 220ms ease;
    background: rgba(14, 13, 17, 0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 5;
  }
  .ls3-panel:focus-within, .ls3-panel.open { transform: translateY(0); }
  .ls3-tabs { padding: 6px 12px 0; }
}

/* Desktop: side by side, world gets the room. */
@media (min-width: 1025px) {
  .ls3 {
    grid-template-rows: none;
    grid-template-columns: 1fr 340px;
  }
  .ls3-panel { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.09); }
}

/* The permitted controls a pass grants. */
.ls3-perms { display: grid; gap: 8px; margin-top: 14px; }
.ls3-perm {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 13px; text-align: left;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px; color: #e8e6e1; cursor: pointer;
}
.ls3-perm:active { background: rgba(255, 255, 255, 0.09); }
.ls3-perm .nm { font-size: 13px; font-weight: 600; }
.ls3-perm .ds { font-size: 11px; color: rgba(255, 255, 255, 0.45); }

/* A mouse doesn't need a thumbstick. */
@media (hover: hover) and (pointer: fine) {
  .ls3-stick { display: none; }
}
/* =============================================================================
   THE TAPE LOOK — minimal, professional, very clean.

   Warm paper ground, one cassette, hairline rules, small caps. No chrome, no
   gradients shouting for attention. The reels carry the progress so no
   progress bar is needed.
   ========================================================================== */
.lsn-shell[data-look='tape'] {
  --tp-paper: #f2efe9;
  --tp-ink: #1b1a18;
  --tp-dim: #8b877e;
  --tp-rule: #d9d4ca;
  --tp-shell: #2a2825;
  --tp-shellface: #35322e;
  --tp-label: #efe9dc;
  --tp-accent: #b4552c;
  background: var(--tp-paper);
  color: var(--tp-ink);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* impeccable-disable-line overused-font -- the neutral grotesk a tape insert is actually set in */
  -webkit-font-smoothing: antialiased;
}
[data-look='tape'] .lsn-stage { max-width: 560px; gap: 20px; padding: 26px 20px 34px; }

/* ---- masthead ---------------------------------------------------------- */
[data-look='tape'] .tp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
[data-look='tape'] .tp-from {
  font-size: 10.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--tp-dim);
}
[data-look='tape'] .tp-counter {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tp-dim);
  font-variant-numeric: tabular-nums;
}
[data-look='tape'] .lsn-note {
  font-family: 'Iowan Old Style', Palatino, Georgia, serif;
  font-style: italic;
  font-size: 14.5px;
  color: #4a4740;
  border-left: 2px solid var(--tp-accent);
  padding-left: 12px;
  margin: 0;
}

/* ---- the cassette ------------------------------------------------------ */
.tp-cassette { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.tp-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.63;
  border-radius: 7px;
  background:
    linear-gradient(180deg, var(--tp-shellface) 0%, var(--tp-shell) 58%, #211f1c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 18px 40px rgba(35, 30, 22, 0.28);
  padding: 5.5% 6% 0;
  display: flex;
  flex-direction: column;
}
.tp-screw {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b665e, #2a2724);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.tp-screw-tl { top: 7px; left: 7px; } .tp-screw-tr { top: 7px; right: 7px; }
.tp-screw-bl { bottom: 7px; left: 7px; } .tp-screw-br { bottom: 7px; right: 7px; }

/* paper label */
.tp-label {
  background: var(--tp-label);
  border-radius: 2px;
  padding: 9px 12px 8px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  color: var(--tp-ink);
}
.tp-label-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--tp-rule);
  padding-bottom: 5px;
}
.tp-side { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; }
.tp-type { font-size: 8.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tp-dim); }
.tp-title {
  margin-top: 7px;
  font-size: clamp(15px, 3.6vw, 19px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-artist { font-size: 11.5px; color: var(--tp-dim); margin-top: 1px; }
.tp-ruled { display: grid; gap: 4px; margin-top: 7px; }
.tp-ruled i { height: 1px; background: var(--tp-rule); }

/* reel window */
.tp-window {
  flex: 1;
  margin: 4.5% 8% 0;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(20, 18, 16, 0.9), rgba(12, 11, 10, 0.95));
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7%;
  position: relative;
  min-height: 0;
}
.tp-reel {
  position: relative;
  width: 30%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.tp-tape-wound {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, #3a2f26 0 2px, #2c231c 2px 4px);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
  transition: transform 0.4s linear;
}
.tp-hub {
  position: relative;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tp-label);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
}
.tp-hub i {
  position: absolute;
  width: 15%;
  height: 42%;
  background: #201e1b;
  border-radius: 1px;
  transform-origin: 50% 118%;
}
.tp-hub i:nth-child(1) { transform: rotate(0deg); }
.tp-hub i:nth-child(2) { transform: rotate(120deg); }
.tp-hub i:nth-child(3) { transform: rotate(240deg); }
.is-playing .tp-hub { animation: tp-spin 2.6s linear infinite; }
@keyframes tp-spin { to { transform: rotate(360deg); } }
.tp-tapepath {
  position: absolute;
  left: 12%; right: 12%;
  top: 50%;
  height: 2px;
  background: #241d17;
  transform: translateY(-1px);
}

.tp-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 3.5% 8% 4%;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a49d92;
}
.tp-nowver { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62%; }
.tp-bpm { font-variant-numeric: tabular-nums; }
.tp-holes { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 26px; }
.tp-holes i { width: 12px; height: 6px; border-radius: 2px; background: #171513; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }

/* transport keys — real travel, no gloss */
.tp-transport { display: flex; gap: 9px; }
.tp-key {
  width: 58px; height: 40px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #35322e;
  background: linear-gradient(180deg, #e9e4da, #d5cfc3);
  box-shadow: 0 2.5px 0 #b3ac9f, 0 5px 10px rgba(35, 30, 22, 0.16);
  transition: transform 0.1s, box-shadow 0.1s;
}
.tp-key svg { width: 17px; height: 17px; }
.tp-key:active { transform: translateY(2px); box-shadow: 0 0.5px 0 #b3ac9f; }
.tp-key[disabled] { opacity: 0.45; cursor: default; }
.tp-key-play { width: 74px; }
.tp-key-play.is-on { background: linear-gradient(180deg, #c2643b, #a94b26); color: #fff; box-shadow: 0 2.5px 0 #7d3517, 0 5px 12px rgba(169, 75, 38, 0.3); }

/* ---- tempo: free, always available ------------------------------------- */
[data-look='tape'] .tp-tempo { display: flex; align-items: center; gap: 12px; }
[data-look='tape'] .tp-tempo label { font-size: 9.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--tp-dim); }
.tp-slider {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  flex: 1;
  height: 22px;
  background: none;
  cursor: pointer;
}
.tp-slider::-webkit-slider-runnable-track { height: 2px; background: var(--tp-rule); }
.tp-slider::-moz-range-track { height: 2px; background: var(--tp-rule); }
.tp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; margin-top: -6px;
  border-radius: 50%;
  background: var(--tp-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.tp-slider::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--tp-ink); }
[data-look='tape'] .tp-tempo b { font-size: 11.5px; font-variant-numeric: tabular-nums; min-width: 58px; text-align: right; }

/* ---- changes: small caps, hairline, no boxes shouting ------------------ */
[data-look='tape'] .tp-changes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--tp-rule); border-block: 1px solid var(--tp-rule); }
[data-look='tape'] .tp-change {
  border: 0;
  cursor: pointer;
  background: var(--tp-paper);
  padding: 13px 14px;
  text-align: left;
  color: var(--tp-ink);
  font-family: inherit;
  transition: background 0.14s;
}
[data-look='tape'] .tp-change:hover { background: #eae6de; }
[data-look='tape'] .tp-change b { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; }
[data-look='tape'] .tp-change small { display: block; font-size: 10px; color: var(--tp-dim); margin-top: 2px; }
[data-look='tape'] .tp-change.working b::after { content: ' …'; color: var(--tp-accent); }
[data-look='tape'] .tp-change[disabled] { cursor: wait; }
[data-look='tape'] .tp-change.locked { opacity: 0.4; cursor: not-allowed; }

/* ---- versions + actions ----------------------------------------------- */
[data-look='tape'] .tp-vers { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
[data-look='tape'] .tp-ver {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  background: none;
  box-shadow: inset 0 0 0 1px var(--tp-rule);
  border-radius: 3px;
  padding: 7px 11px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #55524b;
  font-family: inherit;
}
[data-look='tape'] .tp-ver.on { box-shadow: inset 0 0 0 1.5px var(--tp-accent); color: var(--tp-ink); }
[data-look='tape'] .tp-acts { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
[data-look='tape'] .tp-act {
  border: 0; cursor: pointer; background: none;
  box-shadow: inset 0 0 0 1px var(--tp-rule);
  border-radius: 3px; padding: 8px 13px; font-size: 11px;
  letter-spacing: 0.09em; text-transform: uppercase; color: #55524b;
  font-family: inherit;
}
[data-look='tape'] .tp-act:hover { box-shadow: inset 0 0 0 1px var(--tp-dim); color: var(--tp-ink); }
[data-look='tape'] .tp-act.primary { background: var(--tp-ink); color: var(--tp-paper); box-shadow: none; }
[data-look='tape'] .tp-save { display: flex; gap: 7px; }
[data-look='tape'] .tp-save input {
  flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--tp-rule);
  background: none; padding: 8px 2px; font-size: 12.5px; font-family: inherit; color: var(--tp-ink);
}
[data-look='tape'] .tp-save input:focus { outline: none; border-bottom-color: var(--tp-accent); }
[data-look='tape'] .tp-commentbox { display: flex; flex-direction: column; gap: 7px; }
[data-look='tape'] .tp-commentbox textarea {
  border: 1px solid var(--tp-rule); border-radius: 3px; background: #fff;
  padding: 9px 10px; font-size: 12.5px; font-family: inherit; color: var(--tp-ink); resize: vertical;
}
[data-look='tape'] .tp-mark {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 6px; border-top: 1px solid var(--tp-rule);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #a8a39a;
}
[data-look='tape'] .tp-mark b { font-weight: 700; letter-spacing: 0.26em; color: #6f6b63; }

/* the door, in tape clothes */
[data-look='tape'] .lsn-gate-card h1 { font-weight: 600; }
[data-look='tape'] .lsn-cta { background: var(--tp-ink); color: var(--tp-paper); border-radius: 4px; letter-spacing: 0.1em; text-transform: uppercase; font-size: 13px; }
[data-look='tape'] .lsn-welcome { font-family: 'Iowan Old Style', Palatino, Georgia, serif; }
[data-look='tape'] .shp-toast { background: var(--tp-ink); color: var(--tp-paper); border-radius: 3px; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; }
[data-look='tape'] .shp-sheet { background: rgba(242, 239, 233, 0.72); }
[data-look='tape'] .shp-sheetcard { background: #fff; color: var(--tp-ink); border-radius: 4px; box-shadow: 0 0 0 1px var(--tp-rule), 0 26px 70px rgba(35, 30, 22, 0.22); }
[data-look='tape'] .shp-sheetbtns .b1 { background: var(--tp-ink); color: var(--tp-paper); border-radius: 4px; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
[data-look='tape'] .shp-sheetbtns .b2 { box-shadow: inset 0 0 0 1px var(--tp-rule); color: #55524b; border-radius: 4px; }

@media (min-width: 780px) {
  [data-look='tape'] .tp-changes { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .is-playing .tp-hub { animation: none; }
  .tp-tape-wound { transition: none; }
}

/* ===========================================================================
   RECORDING YOUR OWN TAKE.

   Real time, on the listener's machine, capturing every lane separately — so
   what they take away is what THEY did, not the producer's original parts.

   IT WEARS THE SHARE'S OWN CLOTHES. Every colour below resolves through
   --rec-* tokens that each look redefines, because a share is somebody's
   record sleeve: a red dot and a green arrow dropped onto a black-and-white
   layout read as another app's furniture landing in the middle of theirs.
   The default is the dark shell; tape and wave override underneath.
   =========================================================================== */

.lsn-shell {
  --rec-ink: #ececf2;
  --rec-dim: #b9b9c4;
  --rec-panel: #1d1d25;
  --rec-edge: #3a3a46;
  --rec-live: #ff3b3b;          /* only ever the armed state */
  --rec-veil: rgba(6, 6, 9, 0.34);
}

/* Warm paper: the armed colour is the sleeve's own accent, not a signal red. */
.lsn-shell[data-look='tape'] {
  --rec-ink: var(--tp-ink);
  --rec-dim: var(--tp-dim);
  --rec-panel: var(--tp-paper);
  --rec-edge: var(--tp-rule);
  --rec-live: var(--tp-accent);
  --rec-veil: rgba(27, 26, 24, 0.24);
}

/* Grey / black / white. Nothing coloured is introduced at all — the take is
   marked by weight and motion instead, which is how this look says everything
   else it says. */
.lsn-shell[data-look='wave'] {
  --rec-ink: var(--wv-ink);
  --rec-dim: var(--wv-muted);
  --rec-panel: var(--wv-paper);
  --rec-edge: var(--wv-hair);
  --rec-live: var(--wv-ink);
  --rec-veil: rgba(255, 255, 255, 0.42);
}

/* ---- transport: fewer buttons, bigger targets ---------------------------- */

/*
 * THE MENU HAS TO OUTRANK EVERYTHING, NOT JUST ITS NEIGHBOURS.
 *
 * `.lsn-transport` is positioned with a z-index, so it opens a stacking
 * context — the pulldown's own z-index is sealed inside it and cannot climb
 * over anything outside. The toast sits in the same band at a higher level,
 * so it landed on top of the menu and ate the press.
 *
 * Raising the WHOLE transport while its menu is open lifts the pulldown with
 * it, and only for as long as there is something to press.
 */
.lsn-transport.has-menu { z-index: 250; }

/* Rewind and fast-forward are gone. A tape of separate songs is navigated by
   track, not by scrubbing, and dropping them buys the remaining controls the
   44px a thumb actually needs. */
.lsn-transport .lsn-tb {
  min-width: 44px;
  min-height: 44px;
}

/*
 * ROOM AT THE ENDS.
 *
 * The pill is a 999px capsule, so its corners curve hard inward — a control
 * parked 3px from the edge (which is where SAVE sat) reads as falling out of
 * it. The end controls are also the TALLEST, being a button with a word under
 * it, so they need more clearance than a bare round button would.
 *
 * Padding is set in one place here rather than per-look so every face of the
 * share gets the same geometry.
 */
/* Two classes deep so it also beats the tight-screen rule in ListenerPage.css
   (`.lsn-transport{gap:4px;padding:6px 10px}`), which is inside a media query
   and was quietly winning on phones — exactly where the crowding showed. */
.lsn-shell .lsn-transport {
  padding: 8px 18px;
  gap: 8px;
}
.lsn-transport .lsn-tb svg { width: 22px; height: 22px; }
.lsn-transport .lsn-tb--play { min-width: 54px; min-height: 54px; }
.lsn-transport .lsn-tb--play svg { width: 26px; height: 26px; }

/* ---- record ------------------------------------------------------------- */

/* Its own cell so the label sits under the button without pushing the row
   taller than the play control beside it. */
/* Record and Save are LABELLED CONTROLS, not glyphs: a stacked button and
   word, sized so the pair sits on the transport's baseline without making the
   row taller than the play button. */
.lsn-reccell,
.lsn-dl {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Set off from the tape controls: these two act on the RECORDING, not on
     the tape, and the separation says so before any label is read. */
  margin-left: 10px;
  /* Reserves the label's line so adding one does not shove the row down. */
  min-width: 48px;
}

/* A hairline before the pair, so "move the tape" and "keep the take" read as
   two groups inside one housing rather than five buttons in a row. */
.lsn-reccell {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--rec-edge);
}

/* The record glyph is a filled disc in a ring — a bare dot next to a play
   triangle looked like a bullet point rather than a control. */
.lsn-transport .lsn-rec {
  border-radius: 50%;
  border: 2px solid currentColor;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lsn-transport .lsn-rec svg { width: 14px; height: 14px; }

/* Two classes deep, to beat `.lsn-transport .lsn-tb`'s own colour — without
   this the resting record button sits at full ink and reads as another play
   button rather than as something waiting to be armed. */
.lsn-transport .lsn-rec { color: var(--rec-dim); }
.lsn-transport .lsn-rec:hover:not(:disabled) { color: var(--rec-live); }
.lsn-transport .lsn-rec.is-rolling {
  color: var(--rec-live);
  animation: lsn-recpulse 1.4s ease-in-out infinite;
}

.lsn-reclabel {
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--rec-dim);
  line-height: 1;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.lsn-dllabel { color: var(--rec-ink); }
.lsn-rec.is-rolling + .lsn-reclabel { color: var(--rec-live); }

@keyframes lsn-recpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ---- the veil ----------------------------------------------------------- */

/*
 * A VEIL THAT ALSO HOLDS THE ROOM STILL.
 *
 * Light enough to see the visualisation straight through — that is the only
 * feedback telling them whether the take is any good, so covering it would be
 * self-defeating.
 *
 * But it DOES swallow clicks. Changing the drums halfway through prints a
 * seam into the middle of the take, and the person doing it has no way of
 * knowing until they listen back. The only live control is Stop, which sits
 * above the veil in its own bar.
 *
 * Anchored to the BOTTOM, just above the transport: the eye is already down
 * there on the play controls when they start a take, and a bar at the top of
 * a tall screen is a bar nobody looks at.
 */
.lsn-roll {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: var(--rec-veil);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Clears the transport, which is fixed to the foot of every look. */
  padding: 0 16px calc(96px + env(safe-area-inset-bottom, 0px));
  animation: lsn-dim-in 0.35s ease both;
}

@keyframes lsn-dim-in { from { opacity: 0; } to { opacity: 1; } }

.lsn-roll__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(560px, 100%);
  padding: 9px 10px 9px 15px;
  border-radius: 999px;
  background: var(--rec-panel);
  border: 1px solid var(--rec-edge);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  color: var(--rec-ink);
}

.lsn-roll__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rec-live);
  flex-shrink: 0;
  animation: lsn-recpulse 1.4s ease-in-out infinite;
}
.lsn-roll__dot.is-printing { animation: none; opacity: 0.5; }

.lsn-roll__line {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lsn-roll__clock {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  opacity: 0.55;
  flex-shrink: 0;
}

.lsn-roll__stop {
  flex-shrink: 0;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--rec-ink);
  cursor: pointer;
  background: var(--rec-ink);
  color: var(--rec-panel);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.lsn-roll__stop:hover { opacity: 0.85; }

/* ---- the download that appears ------------------------------------------ */

.lsn-dl { position: relative; }

/* It flashes three times on arrival and then stops. The take finished while
   they were listening to something else, so nothing else would tell them —
   but a control that never settles is a control nobody can ignore. */
.lsn-dlbtn { color: var(--rec-ink); animation: lsn-dl-land 1.5s ease 3; }

@keyframes lsn-dl-land {
  0%, 100% { transform: none; }
  22% { transform: translateY(-3px) scale(1.14); }
  44% { transform: none; }
}

.lsn-dlmenu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 241;
  min-width: 184px;
  padding: 5px;
  border-radius: 12px;
  background: var(--rec-panel);
  border: 1px solid var(--rec-edge);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lsn-dlmenu button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: var(--rec-ink);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
}
.lsn-dlmenu button:hover:not(:disabled) { background: color-mix(in srgb, var(--rec-ink) 10%, transparent); }
.lsn-dlmenu button:disabled { opacity: 0.35; cursor: default; }
/* What you get, beside what it is called — "Stems" alone does not say how
   many parts came out of the take. */
.lsn-dlmenu em {
  font-style: normal;
  font-size: 11px;
  color: var(--rec-dim);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .lsn-rec.is-rolling,
  .lsn-roll__dot,
  .lsn-dlbtn,
  .lsn-roll { animation: none; }
}

/* Typed out letter by letter, the same introduction the co-producer splash
   makes. A line that simply appears beside a red dot reads as a system
   message; typed, it reads as somebody talking to you. */
.lsn-ltr {
  opacity: 0;
  display: inline-block;
  white-space: pre;
  animation: lsn-ltr-in 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes lsn-ltr-in {
  from { opacity: 0; transform: translateX(5px); }
  to { opacity: 1; transform: none; }
}

/* Reduced motion still gets the words — instantly, and all at once. */
@media (prefers-reduced-motion: reduce) {
  .lsn-ltr { opacity: 1; animation: none; transform: none; }
}

/* ---------------------------------------------------------------------------
   THE LINE, ACROSS THE MIDDLE.

   Set like the intro's opening sentence rather than a status message: big,
   centred, one line of type with nothing competing. It is the only thing on
   screen while a take rolls, which is the point — the room is asking them to
   listen to what they made, so it should read like someone saying so, not
   like a progress indicator.

   Pointer-transparent, because the desk underneath is what they are recording.
   --------------------------------------------------------------------------- */

.lsn-roll__say {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 48px));
  margin: 0;
  padding: 0 4px;
  pointer-events: none;
  text-align: center;
  text-wrap: balance;
  color: var(--rec-ink);
  font-size: clamp(24px, 5.4vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 600;
  /* Enough lift to stay legible over a busy waveform without a panel behind
     it — a box here would turn a sentence into a dialog. */
  text-shadow: 0 2px 18px var(--rec-panel), 0 1px 3px var(--rec-panel);
}

/* The tape look is set in a grotesk and reads better a touch tighter. */
.lsn-shell[data-look='tape'] .lsn-roll__say { font-weight: 500; }

/* The wave look already owns a display face — borrow it so the sentence is
   unmistakably part of this share and not a system font dropped on top. */
.lsn-shell[data-look='wave'] .lsn-roll__say {
  font-family: var(--wv-display, inherit);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Now that the sentence carries the personality, the bar underneath is just a
   readout: the word, the time left, and the way out. */
.lsn-roll__line { font-weight: 600; letter-spacing: 0.01em; }

@media (max-width: 420px) {
  .lsn-roll__say { top: 38%; font-size: clamp(21px, 6.4vw, 30px); }
}

/* A word is one unwrappable box. The letters inside it are inline-blocks so
   they can animate, and an inline-block is a legal line-break point — which is
   why "thing" was breaking as "thin / g". Wrapping happens between these, at
   spaces, the way it does in any other sentence. */
.lsn-word { display: inline-block; white-space: nowrap; }
/**
 * THE WAVE — white paper, black ink.
 *
 * One rule decides everything here: the wave is the only thing on the page
 * allowed to move or to be dark. Every control is set as TEXT — no fills, no
 * accent colours, no icons standing in for words — lifted off the page by a
 * shadow instead of a border. That is the whole visual system, and it is why
 * it reads expensive at any size.
 */

.lsn-shell[data-look='wave'] {
  --wv-paper: #ffffff;
  --wv-ink: #0a0a0a;
  --wv-muted: #6f6f6f;
  --wv-hair: rgba(0, 0, 0, 0.08);
  --wv-lift: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 18px -10px rgba(0, 0, 0, 0.28);
  --wv-lift-hi: 0 1px 2px rgba(0, 0, 0, 0.06), 0 14px 26px -12px rgba(0, 0, 0, 0.34);

  /* THREE TYPE ROLES, and each one has a job.
   *
   * Display — Barlow Condensed, the same face the KIT MAKER J-card uses, and
   * for the same load-bearing reason: song titles are user-supplied, they run
   * long, and this one has to hold a single line in a fixed-height row. A
   * condensed face fits far more title before it truncates, and it is the
   * track-sheet voice this product already speaks. It costs nothing extra —
   * index.html already loads it on every page.
   *
   * Body — the system stack, stated honestly. (This previously named 'Inter',
   * which the app never loads, so it silently fell through to exactly this.)
   *
   * Data — system monospace, used ONLY for measurement: tempo, the change
   * allowance, version ids. Those are instrument readings, not prose, and
   * tabular figures stop the tempo number from twitching as you drag. */
  --wv-display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --wv-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --wv-data: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  background: var(--wv-paper);
  color: var(--wv-ink);
  font-family: var(--wv-body);
  -webkit-font-smoothing: antialiased;
  /* This look owns the viewport; the shell's own scrolling would defeat it. */
  overflow: hidden;
}

/* The gate wears the same paper, so the link never flashes a dark screen. */
.lsn-shell[data-look='wave'] .lsn-gate { background: var(--wv-paper); }

.lsn-shell[data-look='wave'] .lsn-gate-card {
  background: var(--wv-paper);
  border: 1px solid var(--wv-hair);
  box-shadow: var(--wv-lift);
  color: var(--wv-ink);
}

/* The gate wears the same display voice, so the title does not change shape
   between the door and the room. */
.lsn-shell[data-look='wave'] .lsn-gate-card h1 {
  font-family: var(--wv-display);
  font-size: clamp(38px, 8vw, 58px);
  letter-spacing: 0.005em;
  line-height: 0.98;
  font-weight: 600;
}

.lsn-shell[data-look='wave'] .lsn-gate-card .lsn-dim { color: var(--wv-muted); }

.lsn-shell[data-look='wave'] .lsn-cta {
  background: var(--wv-paper);
  color: var(--wv-ink);
  border: 1px solid var(--wv-hair);
  box-shadow: var(--wv-lift);
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.lsn-shell[data-look='wave'] .lsn-cta:hover:not(:disabled) {
  box-shadow: var(--wv-lift-hi);
  transform: translateY(-1px);
}

/* ==========================================================================
   THE SINGLE VIEWPORT

   One grid, exactly the height of the screen, and only ONE row may flex: the
   wave. Every control keeps its natural height at every screen size, so nothing
   reflows into a different order and nothing ever scrolls — a short phone simply
   gets a shorter wave. `minmax(0, 1fr)` is what makes that true; with a plain
   `1fr` the canvas refuses to shrink past its content and pushes the controls
   off the bottom.
   ========================================================================== */

.wv-stage {
  height: 100dvh;
  max-width: 720px;
  width: 100%;
  margin-inline: auto;
  /* The bottom value has to clear the FIXED transport pill (58px tall) —
     originally `max(16px, safe-area)`, which let the last button row run
     underneath it. But this stage is a FIXED-HEIGHT grid, not a scrolling
     page: padding here doesn't add scroll room, it SUBTRACTS from the 1fr
     waveform row. The page-level 118/132px clearance (sized for scrolling
     stages) squeezed the wave to 267px and left a dead band. So: exactly the
     pill plus a breath, and not a pixel more. */
  padding: max(14px, env(safe-area-inset-top)) 20px calc(76px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto auto;
  gap: 14px;
  position: relative;
}

/* ---- the fixed rows ------------------------------------------------------ */

/* The cue-sheet header — the ONE place tracked uppercase is allowed to live.
   It earns it by being a status line: who sent this, what you have left. */
.wv-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wv-muted);
  min-width: 0;
}

.wv-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The allowance is a count, so it is set as one. */
.wv-top span + span {
  flex: none;
  font-family: var(--wv-data);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.wv-head { text-align: center; min-width: 0; }

.wv-head h1 {
  margin: 0;
  font-family: var(--wv-display);
  /* Condensed carries more size at the same width, so the title can actually
     be a display moment instead of a large label. */
  font-size: clamp(30px, 7.4vw, 50px);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 0.98;
  /* One line, always. A long title must not steal height from the wave. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The now-playing line: a reading followed by a name. Two faces, one rule —
   mono for the number, prose for the words. */
.wv-head p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--wv-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wv-head p b {
  font-family: var(--wv-data);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--wv-ink);
}

.wv-head p span::before { content: '· '; opacity: 0.5; }

/* The one flexible row.
   It absorbs every spare pixel so the page never scrolls, but the WAVE itself
   is capped and centred inside that space. Left to stretch, a tall screen turns
   the radial shape into a small circle marooned in a large empty block; as a
   band with air above and below, the same slack reads as composure. */
.wv-canvas {
  position: relative;
  min-height: 0;
  /* `min-width: 0` IS THE FIX, and the bug it closes is a feedback loop.
     
     .wv-stage is a grid, so this is a grid item, and a grid item defaults to
     `min-width: auto` — it may not shrink below the min-content width of what
     is inside it. What is inside it is a <canvas>, and a canvas's min-content
     width is its `width` ATTRIBUTE, which the fit() effect sets from this
     box's own measured width (box.width × dpr).
     
     So: box width → canvas attribute → min-content → grid column → box width.
     Each ResizeObserver pass ratchets it up. Measured on a 390px phone it had
     settled at 550px, starting 20px in and running 180px off the right edge —
     and because the column carries every OTHER item too, the title, the key
     row, the change buttons and the transport all went off with it. It read
     as "the wave is the wrong resolution"; it was the grid being sized by the
     canvas that the grid was sizing.
     
     Letting the item shrink breaks the loop: the column is sized by the
     stage, the canvas follows the column, and fit() writes an attribute that
     no longer feeds back. */
  min-width: 0;
  align-self: center;
  width: 100%;
  height: 100%;
  max-height: clamp(170px, 40vh, 330px);
}

/* Belt and braces: the canvas can never be wider than the box that measures
   it, whatever its backing store says. */
.wv-canvas canvas {
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: block;
}

/* Every other item on the stage gets the same permission, so no single piece
   of content can size the column for all of them again. */
.wv-stage > * { min-width: 0; }

/* ---- tempo --------------------------------------------------------------- */

.wv-tempo { display: flex; align-items: center; gap: 14px; }

.wv-tempo label {
  font-family: var(--wv-data);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--wv-muted);
  flex: none;
}

/* The one number on the page that moves while you touch it. Tabular figures
   are not decoration here — without them the readout jitters horizontally
   through the whole drag, which is the difference between an instrument and
   a label. */
.wv-tempo b {
  font-family: var(--wv-data);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--wv-ink);
  flex: none;
  min-width: 34px;
  text-align: right;
}

.wv-slider {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  background: transparent;
  cursor: pointer;
}

.wv-slider::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: rgba(0, 0, 0, 0.14); }
.wv-slider::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(0, 0, 0, 0.14); }

.wv-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--wv-paper);
  border: 1px solid var(--wv-hair);
  box-shadow: var(--wv-lift);
  -webkit-transition: box-shadow 160ms ease;
  transition: box-shadow 160ms ease;
}

.wv-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wv-paper);
  border: 1px solid var(--wv-hair);
  box-shadow: var(--wv-lift);
}

.wv-slider:hover::-webkit-slider-thumb { box-shadow: var(--wv-lift-hi); }
.wv-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--wv-ink); outline-offset: 2px; }

/* ---- text buttons -------------------------------------------------------- */

.wv-txt {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--wv-paper);
  color: var(--wv-ink);
  border: 1px solid var(--wv-hair);
  border-radius: 9px;
  padding: 10px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--wv-lift);
  transition: box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.wv-txt:hover:not(:disabled) { box-shadow: var(--wv-lift-hi); transform: translateY(-1px); }
.wv-txt:active:not(:disabled) { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); transform: translateY(0); }
.wv-txt:focus-visible { outline: 2px solid var(--wv-ink); outline-offset: 2px; }
.wv-txt:disabled { opacity: 0.34; cursor: default; box-shadow: none; }

.wv-transport { display: flex; justify-content: center; gap: 10px; }
.wv-primary { padding-inline: 34px; font-weight: 600; }

/* ---- the changes ---------------------------------------------------------
   Labels only. The earlier two-line cards carried a description under every
   one, which read as six stacked paragraphs and cost more height than the wave
   itself. The description survives as the title attribute. */

.wv-changes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.wv-changes .wv-txt { padding: 9px 14px; font-size: 12.5px; }
.wv-change.working { opacity: 0.55; }
.wv-change.locked { opacity: 0.42; }

/* ---- versions ------------------------------------------------------------
   Quieter than the changes on purpose: going back is a smaller move than making
   something new, and it costs nothing. */

.wv-vers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

/* A take list: id in the data face so the column stays aligned, description
   in prose. */
.wv-ver {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 5px 9px;
  font-family: var(--wv-body);
  font-size: 11.5px;
  color: var(--wv-muted);
  cursor: pointer;
  white-space: nowrap;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 140ms ease, box-shadow 140ms ease;
}

.wv-ver b {
  font-family: var(--wv-data);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wv-ver b + span::before { content: ' '; }

.wv-ver:hover:not(:disabled) { color: var(--wv-ink); }
.wv-ver:focus-visible { outline: 2px solid var(--wv-ink); outline-offset: 2px; }
.wv-ver.on { color: var(--wv-ink); font-weight: 650; background: var(--wv-paper); box-shadow: var(--wv-lift); }
/* Kept in the list, honestly greyed: the name survived, the snapshot didn't. */
.wv-ver.gone { opacity: 0.4; text-decoration: line-through; }
.wv-ver:disabled { cursor: default; }

/* ---- reactions ----------------------------------------------------------- */

.wv-reacts { display: flex; justify-content: center; gap: 4px; }

.wv-react {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 17px;
  line-height: 1.2;
  cursor: pointer;
  opacity: 0.58;
  transition: opacity 140ms ease, transform 140ms ease;
}

.wv-react:hover { opacity: 1; transform: translateY(-2px) scale(1.08); }
.wv-react:focus-visible { outline: 2px solid var(--wv-ink); outline-offset: 2px; opacity: 1; }

/* ---- the drawer ----------------------------------------------------------
   Naming a version and writing a note both need a keyboard, which on a phone
   eats half the screen. Keeping them out here is what lets the main view stay
   one still page. */

.wv-sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  align-items: end;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wv-sheet.show { opacity: 1; pointer-events: auto; }
.wv-sheet[hidden] { display: none; }

.wv-sheet-card {
  background: var(--wv-paper);
  border-top: 1px solid var(--wv-hair);
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.04), 0 -24px 48px -24px rgba(0, 0, 0, 0.4);
  border-radius: 18px 18px 0 0;
  padding: 18px 20px max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  transform: translateY(14px);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wv-sheet.show .wv-sheet-card { transform: translateY(0); }

/* Sentence case, not another eyebrow: it names which version you are editing. */
.wv-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--wv-data);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--wv-muted);
}

.wv-field { display: flex; gap: 10px; align-items: flex-start; }
.wv-field-col { flex-direction: column; align-items: stretch; }
.wv-field-col .wv-txt { align-self: flex-end; }

.wv-field input,
.wv-field textarea {
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  background: var(--wv-paper);
  color: var(--wv-ink);
  border: 1px solid var(--wv-hair);
  border-radius: 9px;
  padding: 11px 14px;
  font: inherit;
  /* 16px exactly: iOS zooms the whole page when a focused field is smaller. */
  font-size: 16px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  resize: none;
}

/* Placeholders are read, so they clear 4.5:1 like body text. #8a8a8a was 3.5:1
   — the shade that looks right in a mockup and fails on a phone outdoors. */
.wv-field input::-moz-placeholder, .wv-field textarea::-moz-placeholder { color: var(--wv-muted); }
.wv-field input::placeholder,
.wv-field textarea::placeholder { color: var(--wv-muted); }
.wv-field input:focus,
.wv-field textarea:focus { outline: none; border-color: rgba(0, 0, 0, 0.3); }

.wv-sheet-acts { display: flex; gap: 8px; }

.wv-sheet-foot {
  margin: 0;
  font-family: var(--wv-data);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--wv-muted);
  font-variant-numeric: tabular-nums;
}

.wv-sheet-foot b {
  font-family: var(--wv-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--wv-ink);
}

/* ---- toast --------------------------------------------------------------- */

.lsn-shell[data-look='wave'] .lsn-toast {
  background: var(--wv-ink);
  color: var(--wv-paper);
  border: none;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

/* ---- tight screens -------------------------------------------------------
   Nothing is removed and nothing reflows — the fixed rows each give back a few
   pixels so the wave keeps a usable share of a short screen. */

/* Room to be a wave. On a laptop the capped band left the page reading empty
   rather than composed; the extra height goes to the one element that earns it. */
@media (min-width: 700px) and (min-height: 780px) {
  .wv-canvas { max-height: 400px; }
}

@media (max-height: 680px) {
  .wv-stage { gap: 10px; }
  .wv-head h1 { font-size: clamp(26px, 6vw, 36px); }
  .wv-head p { margin-top: 3px; font-size: 10.5px; }
  .wv-txt { padding: 8px 13px; }
  .wv-changes .wv-txt { padding: 7px 11px; font-size: 12px; }
  .wv-react { font-size: 15px; }
}

@media (max-width: 380px) {
  .wv-stage { padding-inline: 14px; gap: 10px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .wv-changes { gap: 6px; }
  .wv-changes .wv-txt { padding: 7px 10px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .wv-txt, .wv-react, .wv-ver, .wv-sheet, .wv-sheet-card { transition: none; }
  .wv-txt:hover:not(:disabled), .wv-react:hover { transform: none; }
}


.nspire-radio-page {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  isolation: isolate;
}

.nspire-radio-page button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.nspire-radio-video-wall,
.nspire-radio-video-wall > * {
  position: absolute;
  inset: 0;
}

.nspire-radio-video-wall {
  z-index: -5;
  background: #000;
  overflow: hidden;
}

.nspire-radio-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
}

.nspire-radio-video-tile {
  position: relative;
  overflow: hidden;
  background: #000;
}

.nspire-radio-video-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: saturate(0.5) contrast(1.1) brightness(0.72);
  transition: transform 60ms linear;
}

.nspire-radio-tile-hit {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(217, 70, 239, 0.6) 0%, transparent 72%);
  mix-blend-mode: screen;
}

.nspire-radio-artist-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.9);
  font: 800 8px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.2em;
  padding: 3px 6px;
}

.nspire-radio-duotone {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(217, 70, 239, 0.35) 60%, rgba(0, 0, 0, 0.55));
  mix-blend-mode: color;
}

.nspire-radio-mesh {
  filter: blur(70px) saturate(1.4);
  opacity: 0.65;
  mix-blend-mode: screen;
}

.nspire-radio-mesh span {
  position: absolute;
  border-radius: 50%;
}

.nspire-radio-mesh .mesh-a {
  width: 44vw;
  height: 44vw;
  left: 13%;
  top: 5%;
  background: #d946ef;
  opacity: 0.75;
  animation: nspireRadioDriftA 10s ease-in-out infinite alternate;
}

.nspire-radio-mesh .mesh-b {
  width: 50vw;
  height: 50vw;
  left: 55%;
  top: 15%;
  background: #22d3ee;
  opacity: 0.65;
  animation: nspireRadioDriftB 9s ease-in-out infinite alternate;
}

.nspire-radio-mesh .mesh-c {
  width: 36vw;
  height: 36vw;
  left: 27%;
  top: 54%;
  background: #f59e0b;
  opacity: 0.55;
  animation: nspireRadioDriftC 12s ease-in-out infinite alternate;
}

.nspire-radio-mesh .mesh-d {
  width: 35vw;
  height: 35vw;
  left: 70%;
  top: 56%;
  background: #6366f1;
  opacity: 0.7;
  animation: nspireRadioDriftD 11s ease-in-out infinite alternate;
}

.nspire-radio-dotgrid {
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.35;
}

.nspire-radio-scanlines {
  opacity: 0.28;
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0 2px, transparent 2px 4px);
}

.nspire-radio-vignette {
  background: radial-gradient(140% 90% at 50% 45%, transparent 0%, rgba(0, 0, 0, 0.88) 100%);
}

.nspire-radio-wave {
  position: absolute;
  left: 0;
  right: 0;
  top: 43%;
  z-index: 1;
  width: 100%;
  height: 120px;
  opacity: 0.55;
  pointer-events: none;
}

.nspire-radio-onair {
  position: absolute;
  left: 22px;
  top: 22px;
  z-index: 8;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.onair-pill,
.signal-pill,
.ticket-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  border-radius: 4px;
  padding: 10px 14px;
  box-sizing: border-box;
}

.onair-pill {
  background: linear-gradient(180deg, #ff3333, #b91c1c);
  box-shadow: 0 6px 24px rgba(255, 51, 51, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fff;
  font: 800 16px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.18em;
}

.onair-pill .blink {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.25;
  transition: opacity 200ms;
}

.onair-pill .blink.on {
  opacity: 1;
}

.signal-pill {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
}

.signal-pill span:first-child {
  color: rgba(255, 255, 255, 0.65);
  font: 500 10px/1 'Inter', sans-serif;
  letter-spacing: 0.24em;
}

.signal-pill b {
  color: #fff;
  font: 700 12px/1 'JetBrains Mono', monospace;
}

.signal-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.signal-bars i {
  display: block;
  width: 3px;
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.7);
}

.ticket-pill {
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: linear-gradient(180deg, #f59e0b, #d97706);
  color: #17120a;
  font: 800 14px/1 'Space Grotesk', sans-serif;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ticket-pill span {
  font-size: 11px;
  letter-spacing: 0.16em;
}

.nspire-radio-channel-bug {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 8;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.channel-logo {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  padding: 12px 18px;
  backdrop-filter: blur(12px);
}

.channel-number {
  display: flex;
  width: 70px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #fff;
  color: #000;
  box-shadow: 0 6px 24px rgba(255, 255, 255, 0.15);
}

.channel-number span {
  color: rgba(0, 0, 0, 0.6);
  font: 500 9px/1 'Inter', sans-serif;
  letter-spacing: 0.24em;
}

.channel-number b {
  color: #000;
  font: 900 32px/0.9 'Space Grotesk', sans-serif;
  letter-spacing: -0.04em;
}

.nspire-radio-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.nspire-radio-logo.is-compact {
  gap: 8px;
}

.nspire-radio-glyph {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  overflow: visible;
}

.nspire-radio-logo.is-compact .nspire-radio-glyph {
  width: 28px;
  height: 28px;
}

.nspire-radio-glyph path {
  fill: none;
  stroke: url(#nspire-radio-glyph-grad);
  stroke-linecap: round;
  stroke-width: 2.2;
  opacity: 0.45;
}

.nspire-radio-glyph path.strong {
  stroke-width: 2.6;
  opacity: 0.75;
}

.nspire-radio-glyph path.core {
  stroke-width: 3;
  opacity: 1;
}

.nspire-radio-glyph circle {
  fill: url(#nspire-radio-glyph-grad);
}

.nspire-radio-word {
  background: linear-gradient(90deg, #22d3ee 0%, #3b82f6 50%, #d946ef 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(165, 180, 252, 0.45));
  font: 800 28px/0.9 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
}

.nspire-radio-logo.is-compact .nspire-radio-word {
  font-size: 18px;
}

.nspire-radio-stamp {
  margin-top: 4px;
  color: #fff;
  font: 800 9px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.42em;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

.nspire-radio-logo.is-compact .nspire-radio-stamp {
  font-size: 7px;
}

.nspire-radio-user-menu {
  position: absolute;
  right: 22px;
  top: 92px;
  z-index: 50;
}

.user-trigger {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.user-trigger span {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #111827;
  font: 800 13px/1 'Inter', sans-serif;
}

.user-scrim {
  position: fixed;
  inset: 0;
  z-index: 48;
  border: 0;
  background: transparent;
}

.user-popover {
  position: absolute;
  right: 0;
  top: 52px;
  z-index: 52;
  width: 220px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.94);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
}

.user-popover header,
.user-popover button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  color: #fff;
}

.user-popover header {
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 14px;
  font: 700 13px/1 'Inter', sans-serif;
}

.user-popover header button {
  width: auto;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  padding: 2px;
}

.user-popover > button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: 600 13px/1 'Inter', sans-serif;
  justify-content: flex-start;
  padding: 11px 14px;
  text-align: left;
}

.user-popover > button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.user-popover > button.logout {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #f87171;
}

.nspire-radio-hub-launcher {
  position: absolute;
  left: 50%;
  top: 112px;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: min(920px, calc(100vw - 320px));
  min-width: 680px;
  gap: 14px;
  transform: translateX(-50%);
}

.nspire-radio-hub-launcher button {
  flex: 0 0 calc((100% - 42px) / 4);
  min-height: 178px;
}

.nspire-radio-hub-launcher button:disabled {
  cursor: not-allowed;
}

.nspire-radio-hub-launcher .text-xl {
  font-size: clamp(20px, 1.45vw, 25px);
  line-height: 1;
}

.nspire-radio-hub-launcher .text-xs {
  font-size: 11px;
  line-height: 1.25;
}

.nspire-radio-lower-third {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.genre-stripe {
  display: flex;
  align-items: center;
}

.genre-stripe span {
  background: linear-gradient(90deg, #d946ef, #ec4899);
  color: #fff;
  font: 900 11px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.24em;
  padding: 7px 18px;
}

.genre-stripe i {
  height: 2px;
  flex: 1;
  background: linear-gradient(90deg, #ec4899, transparent);
}

.title-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 70%, transparent 100%);
  padding: 16px 22px 18px;
}

.track-badge {
  display: flex;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: linear-gradient(135deg, #22d3ee, #d946ef);
  color: #000;
  font: 900 24px/1 'Space Grotesk', sans-serif;
}

.track-copy {
  min-width: 0;
  flex: 1;
}

.track-copy h1 {
  margin: 0;
  color: #fff;
  font: 900 clamp(30px, 4vw, 48px)/0.95 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.track-copy p {
  overflow: hidden;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font: 700 12px/1.2 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.track-progress {
  width: min(260px, 23vw);
  margin-right: 8px;
}

.track-progress > div {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
}

.track-progress > div span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22d3ee, #d946ef);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.track-progress p {
  display: flex;
  justify-content: space-between;
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.65);
  font: 700 10px/1 'JetBrains Mono', monospace;
}

.nspire-radio-marquee {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  height: 36px;
  align-items: center;
  overflow: hidden;
  border-top: 2px solid rgba(255, 255, 255, 0.18);
  background: #000;
}

.marquee-label {
  z-index: 2;
  display: flex;
  height: 100%;
  align-items: center;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  box-shadow: 4px 0 14px rgba(0, 0, 0, 0.4);
  color: #000;
  font: 900 12px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.22em;
  padding: 0 14px;
}

.marquee-window {
  position: relative;
  height: 100%;
  flex: 1;
  overflow: hidden;
}

.marquee-reel {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  height: 100%;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  animation: nspireRadioMarquee 60s linear infinite;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.marquee-item b {
  border-radius: 2px;
  color: #000;
  font: 900 9px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.16em;
  padding: 3px 6px;
}

.marquee-item strong {
  color: #fff;
  font: 700 12px/1 'Inter', sans-serif;
}

.marquee-item span {
  color: rgba(255, 255, 255, 0.75);
  font: 500 12px/1 'Inter', sans-serif;
}

.marquee-item i {
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.25);
}

@keyframes nspireRadioMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}

@keyframes nspireRadioDriftA {
  to { transform: translate(8vw, 10vh) scale(1.04); }
}

@keyframes nspireRadioDriftB {
  to { transform: translate(-7vw, 8vh) scale(0.96); }
}

@keyframes nspireRadioDriftC {
  to { transform: translate(6vw, -7vh) scale(1.08); }
}

@keyframes nspireRadioDriftD {
  to { transform: translate(-5vw, -8vh) scale(1.02); }
}

@media (max-width: 1180px) {
  .nspire-radio-hub-launcher {
    top: 102px;
    width: min(720px, calc(100vw - 64px));
    min-width: 0;
    gap: 10px;
  }

  .nspire-radio-hub-launcher button {
    flex-basis: calc((100% - 20px) / 3);
    min-height: 150px;
  }
}

@media (max-width: 820px) {
  .nspire-radio-page {
    min-height: 100dvh;
    overflow-y: auto;
    padding-bottom: 36px;
  }

  .nspire-radio-onair {
    right: 78px;
    left: 12px;
    top: 12px;
    flex-wrap: wrap;
    gap: 6px;
  }

  .onair-pill,
  .signal-pill,
  .ticket-pill {
    min-height: 34px;
    padding: 8px 10px;
  }

  .onair-pill {
    font-size: 13px;
  }

  .nspire-radio-channel-bug {
    top: 68px;
    right: 12px;
  }

  .channel-logo {
    display: none;
  }

  .channel-number {
    width: 54px;
    height: 54px;
  }

  .channel-number b {
    font-size: 26px;
  }

  .nspire-radio-user-menu {
    right: 12px;
    top: 12px;
  }

  .user-trigger {
    width: 42px;
    height: 42px;
  }

  .nspire-radio-hub-launcher,
  .nspire-radio-lower-third {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    top: auto;
    z-index: 2;
    width: auto;
    min-width: 0;
    margin-right: 12px;
    margin-left: 12px;
    transform: none;
  }

  .nspire-radio-hub-launcher {
    display: flex;
    margin-top: 118px;
    gap: 10px;
  }

  .nspire-radio-hub-launcher button {
    flex-basis: calc((100% - 10px) / 2);
    min-height: 120px;
    padding: 14px;
  }

  .nspire-radio-hub-launcher .text-xl {
    font-size: 18px;
  }

  .nspire-radio-hub-launcher .text-xs {
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .nspire-radio-lower-third {
    margin-top: 14px;
    pointer-events: auto;
  }

  .title-bar {
    align-items: flex-start;
    padding: 14px 12px;
  }

  .track-badge {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  .track-copy h1 {
    font-size: 32px;
  }

  .track-progress {
    display: none;
  }

  .genre-stripe span {
    overflow: hidden;
    padding: 7px 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nspire-radio-wave {
    top: 190px;
  }

  .marquee-label {
    letter-spacing: 0.14em;
    padding: 0 10px;
  }
}

@media (max-width: 430px) {
  .nspire-radio-hub-launcher button {
    min-height: 108px;
    padding: 12px;
  }

  .nspire-radio-hub-launcher .text-xl {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-reel,
  .nspire-radio-mesh span {
    animation: none;
  }

  .nspire-radio-video-tile img {
    transform: scale(1.05) !important;
  }
}

/* The shared-sessions rail sits in the page flow above the launcher tiles,
   inheriting the page's own gutters. It removes itself entirely when there
   is nothing shared, so it costs nothing on an empty account. */

.nspire-radio-shared {
  position: relative;
  z-index: 5;
  width: min(1180px, 92vw);
  margin: 0 auto;
}

/* ===========================================================================
   ACCOUNT UNDER REVIEW.

   Sits where the launcher would be, so the page has a subject either way and
   never reads as "something failed to load". Same width rail as the shared
   sessions below it, so the two stack as one column on every size.
   =========================================================================== */

.nspire-review {
  position: relative;
  z-index: 5;
  width: min(1180px, 92vw);
  margin: 0 auto;
  /* Never wider than the screen, whatever a child tries. */
  max-width: 100%;
  padding: 22px 22px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(24, 24, 32, 0.92) 0%, rgba(14, 14, 19, 0.92) 100%);
  backdrop-filter: blur(8px);
  box-sizing: border-box;
}

.nspire-review__mark { margin-bottom: 14px; }

.nspire-review__tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.08);
  color: #4ade80;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nspire-review__line {
  margin: 12px 0 0;
  /* Scales down on a phone without a breakpoint, and never overflows. */
  font-size: clamp(15px, 3.6vw, 18px);
  line-height: 1.55;
  color: #e6e6ef;
  max-width: 54ch;
}

.nspire-review__note {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #8f8f9c;
  max-width: 52ch;
}

@media (max-width: 640px) {
  .nspire-review {
    width: calc(100% - 24px);
    padding: 18px 16px 20px;
    border-radius: 14px;
  }
}
.beatclub-arcade {
  --ink: #f7fbff;
  --muted: rgba(247, 251, 255, 0.64);
  --soft: rgba(247, 251, 255, 0.1);
  --line: rgba(247, 251, 255, 0.16);
  --panel: rgba(10, 12, 18, 0.88);
  --panel-strong: rgba(8, 10, 14, 0.96);
  --mode-accent: #ff4f6a;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(96px, 128px) minmax(0, 1fr) minmax(300px, 380px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--mode-accent), transparent 72%), transparent 28%),
    linear-gradient(135deg, rgba(115, 239, 138, 0.09), transparent 30%),
    linear-gradient(180deg, #11151d 0%, #07090e 58%, #11100c 100%);
  color: var(--ink);
  font-family: Inter, Outfit, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.beatclub-arcade::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 44px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.beatclub-arcade button {
  font: inherit;
}

.arcade-topbar,
.play-shell,
.prompt-panel,
.tag-meter,
.control-notes,
.mode-button {
  position: relative;
  z-index: 1;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(24, 29, 38, 0.92), var(--panel));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

.arcade-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  padding: 12px 16px;
  border-radius: 10px;
}

.cabinet-lockup {
  display: flex;
  align-items: center;
  gap: 13px;
}

.cabinet-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid color-mix(in srgb, var(--mode-accent), white 18%);
  border-radius: 10px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--mode-accent), transparent 72%), rgba(247, 251, 255, 0.06)),
    #10151b;
  color: var(--mode-accent);
}

.cabinet-lockup span,
.topbar-stats span,
.hud-strip span,
.panel-head span,
.start-copy span,
.mode-button span,
.mini-heading span,
.provider-chip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cabinet-lockup h1,
.panel-head h2,
.start-copy h2 {
  margin: 1px 0 0;
  line-height: 0.98;
  letter-spacing: 0;
}

.cabinet-lockup h1 {
  font-size: 34px;
}

.topbar-stats {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(247, 251, 255, 0.12);
  border-radius: 999px;
  background: rgba(247, 251, 255, 0.06);
}

.mode-rail {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-auto-rows: minmax(112px, 1fr);
  gap: 10px;
  min-height: 0;
}

.mode-button {
  --accent: #ff4f6a;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: 10px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.mode-button svg {
  color: var(--accent);
}

.mode-button strong {
  font-size: 18px;
  line-height: 1.02;
}

.mode-button:hover,
.mode-button.is-active {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent), white 10%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent), transparent 82%), rgba(10, 12, 18, 0.92)),
    var(--panel);
}

.play-shell {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border-radius: 10px;
  overflow: hidden;
}

.hud-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(82px, 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.08);
}

.hud-strip div {
  min-width: 0;
  padding: 11px 12px 10px;
  background: rgba(8, 10, 14, 0.64);
}

.hud-strip strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  font-size: 20px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playfield-wrap {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--mode-accent), transparent 82%), transparent 36%),
    #080b10;
}

.cashout-button {
  position: absolute;
  z-index: 6;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--mode-accent), white 16%);
  border-radius: 8px;
  background: rgba(8, 10, 14, 0.78);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.cashout-button svg {
  color: var(--mode-accent);
}

.arcade-canvas {
  position: absolute;
  inset: 0;
}

.arcade-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.start-screen,
.run-ended {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
}

.start-copy {
  max-width: 620px;
}

.start-copy h2,
.run-ended h2 {
  margin: 8px auto 10px;
  max-width: 720px;
  font-size: clamp(32px, 6vw, 72px);
  line-height: 0.92;
}

.start-copy p {
  margin: 0 auto;
  max-width: 620px;
  color: rgba(247, 251, 255, 0.74);
  font-size: 18px;
  line-height: 1.5;
}

.source-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-top: 16px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--mode-accent), transparent 34%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mode-accent), transparent 88%);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.primary-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  margin-top: 22px;
  padding: 0 20px;
  border: 1px solid color-mix(in srgb, var(--mode-accent), white 14%);
  border-radius: 8px;
  background: var(--mode-accent);
  color: #071014;
  cursor: pointer;
  font-weight: 950;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--mode-accent), transparent 70%);
}

.primary-start.compact {
  min-height: 42px;
  margin-top: 8px;
  padding: 0 15px;
}

.run-ended {
  inset: auto 24px 24px auto;
  display: block;
  width: min(360px, calc(100% - 48px));
  border: 1px solid color-mix(in srgb, var(--mode-accent), white 12%);
  border-radius: 10px;
  background: rgba(8, 10, 14, 0.84);
  backdrop-filter: blur(12px);
  text-align: left;
}

.run-ended span {
  color: var(--mode-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.run-ended h2 {
  margin: 7px 0 12px;
  font-size: 28px;
}

.prompt-panel {
  grid-column: 3;
  grid-row: 2 / 4;
  display: grid;
  grid-template-rows: auto minmax(170px, 1fr) auto auto auto;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 14px;
  border-radius: 10px;
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-head h2 {
  font-size: 26px;
}

.icon-action {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(247, 251, 255, 0.07);
  color: var(--ink);
  cursor: pointer;
}

.icon-action:disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.prompt-output {
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(247, 251, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.prompt-output pre {
  margin: 0;
  padding: 14px;
  color: rgba(247, 251, 255, 0.88);
  font: 600 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

.empty-prompt {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  min-height: 100%;
  padding: 24px;
  color: rgba(247, 251, 255, 0.7);
  text-align: center;
}

.empty-prompt svg {
  color: var(--mode-accent);
}

.tag-stack {
  min-height: 0;
}

.mini-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.mini-heading svg {
  color: var(--mode-accent);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 128px;
  overflow: auto;
}

.loot-tag {
  --tag-color: #f7fbff;
  display: inline-flex;
  max-width: 100%;
  min-height: 27px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--tag-color), transparent 38%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tag-color), transparent 88%);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.quiet,
.copy-status {
  color: var(--muted);
  font-size: 12px;
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.provider-chip {
  --provider: #f7fbff;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--provider), transparent 42%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--provider), transparent 90%);
}

.provider-chip svg {
  flex: 0 0 auto;
  color: var(--provider);
}

.provider-chip strong,
.provider-chip span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-chip strong {
  font-size: 13px;
}

.provider-chip span {
  margin-top: 2px;
  font-size: 9px;
}

.repo-credit {
  display: block;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--mode-accent), transparent 46%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--mode-accent), transparent 92%);
  color: var(--ink);
  text-decoration: none;
}

.repo-credit strong,
.repo-credit span {
  display: block;
}

.repo-credit strong {
  font-size: 13px;
}

.repo-credit span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.copy-status {
  margin: 0;
}

.tag-meter {
  grid-column: 1 / 3;
  grid-row: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 10px;
}

.meter-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.meter-row {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(247, 251, 255, 0.1);
  border-radius: 8px;
  background: rgba(247, 251, 255, 0.045);
}

.meter-row span,
.meter-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meter-row span {
  font-size: 11px;
  font-weight: 900;
}

.meter-row strong {
  margin-top: 2px;
  font-size: 18px;
}

.control-notes {
  grid-column: 1 / 3;
  grid-row: 4;
  display: none;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
}

.control-notes div {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(247, 251, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.control-notes svg {
  color: var(--mode-accent);
}

@media (max-width: 1180px) {
  .beatclub-arcade {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) minmax(300px, 42dvh) auto;
  }

  .prompt-panel {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .panel-head,
  .prompt-output {
    grid-column: 1;
  }

  .tag-stack,
  .provider-grid,
  .copy-status {
    grid-column: 2;
  }

  .tag-meter {
    grid-row: 4;
  }
}

@media (max-width: 840px) {
  .beatclub-arcade {
    min-height: auto;
    overflow: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(560px, 68dvh) minmax(430px, auto) auto;
  }

  .arcade-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .mode-rail {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 112px;
  }

  .play-shell {
    grid-column: 1;
    grid-row: 3;
  }

  .hud-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .prompt-panel {
    grid-column: 1;
    grid-row: 4;
    display: flex;
    flex-direction: column;
  }

  .prompt-output {
    min-height: 220px;
  }

  .tag-meter {
    grid-column: 1;
    grid-row: 5;
    grid-template-columns: 1fr;
  }

  .meter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .beatclub-arcade {
    padding: 8px;
  }

  .cabinet-lockup h1 {
    font-size: 28px;
  }

  .mode-rail {
    grid-template-columns: 1fr;
  }

  .start-copy h2,
  .run-ended h2 {
    font-size: 34px;
  }

  .hud-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .provider-grid {
    grid-template-columns: 1fr;
  }
}


/* The landing's three faces, so /signup reads as the same product rather than
   a form bolted onto the back of it. Must be line 1. */
/* ===========================================================================
   REQUEST ACCESS — the continuation of /studio.
   Every colour, radius and face below is lifted from the landing so the button
   press feels like moving through one place, not arriving somewhere else.
   =========================================================================== */
/**
 * THREE BANDS: a header that never moves, a middle that scrolls, and a
 * Request access button parked on the bottom edge.
 *
 * The page itself does not scroll — only the middle does. That is what keeps
 * the wordmark and Sign in reachable at the top and the primary action
 * reachable at the bottom, instead of both disappearing the moment someone
 * reaches for the password field.
 */
.rq {
  height: 100dvh;              /* not 100vh — see the note in the landing */
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;            /* the page is a frame; the middle does the scrolling */
  overscroll-behavior: none;
  width: 100%;
  max-width: 100vw;
  background: #08090a;
  color: #edf0ed;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
body.rq-locked { overscroll-behavior-y: none; overflow-x: hidden; }
/* The landing's green bloom, same geometry. */
.rq__glow {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  width: 960px; height: 560px;
  max-width: 100%;
  background: radial-gradient(closest-side, rgba(62, 222, 85, .11), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.rq__nav {
  /* Fixed band. Never scrolls, never shrinks. */
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding:
    calc(env(safe-area-inset-top, 0px) + 18px)
    calc(env(safe-area-inset-right, 0px) + 22px)
    14px
    calc(env(safe-area-inset-left, 0px) + 22px);
  position: relative; z-index: 6;
  background: #08090a;
}
.rq__navwm {
  display: flex; align-items: baseline; gap: 6px;
  text-decoration: none; color: #edf0ed;
  font: 600 17px 'Space Grotesk';
  letter-spacing: -.02em;
}
.rq__navwm i {
  font: italic 400 19px 'Instrument Serif';
  text-transform: uppercase; letter-spacing: .02em; font-style: italic;
}
/* Was grey-on-black at 85% — findable if you knew it was there, invisible if
   you didn't. It is the only other way out of this screen, so it reads. */
.rq__si {
  flex: 0 0 auto;
  background: none; border: 0; cursor: pointer;
  font: 500 13px 'Space Grotesk';
  color: #cfe0d5;
  text-decoration: none;
  min-height: 44px; padding: 0 4px;
  white-space: nowrap;
}
.rq__si:hover { color: #fff; }
/* The only thing that scrolls. `contain` stops a flick at the end of the form
   from handing the scroll up to the page behind it. */
.rq__mid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; z-index: 4;
  padding:
    8px
    calc(env(safe-area-inset-right, 0px) + 22px)
    18px
    calc(env(safe-area-inset-left, 0px) + 22px);
}
.rq__inner { width: 100%; max-width: 400px; min-width: 0; }
/**
 * THE ACTION BAR. Request access sits on the bottom edge and stays there —
 * on a phone the button was landing below four fields and a legal line, so
 * the one thing the screen exists for was the one thing you had to hunt for.
 */
.rq__bar {
  flex: 0 0 auto;
  position: relative;
  z-index: 6;
  padding:
    12px
    calc(env(safe-area-inset-right, 0px) + 22px)
    calc(env(safe-area-inset-bottom, 0px) + 16px)
    calc(env(safe-area-inset-left, 0px) + 22px);
  background: #08090a;
  /* A soft lift-off so the form appears to pass underneath rather than stop. */
  box-shadow: 0 -18px 26px -18px rgba(0, 0, 0, .95);
}
.rq__bar-inner { width: 100%; max-width: 400px; margin: 0 auto; }
/* ---- the type ---- */
.rq__eye {
  font: 500 12px 'JetBrains Mono';
  letter-spacing: .28em; text-transform: uppercase;
  color: #3ede55;
  margin-bottom: 18px;
}
.rq__h {
  font: 400 clamp(40px, 11vw, 62px)/1.02 'Instrument Serif';
  margin: 0 0 14px;
  text-wrap: balance;
}
.rq__h em { font-style: italic; color: #3ede55; }
/* The landing's blinking cursor, reused verbatim so the two screens share a
   heartbeat. It stops once the word finishes typing. */
.rq__cur { color: #3ede55; font-weight: 400; margin-left: 2px; animation: rq-blink 1.05s steps(1) infinite; }
.rq__cur.done { opacity: 0; animation: none; }
@keyframes rq-blink { 50% { opacity: 0; } }
.rq__sub {
  font: 500 14px/1.6 'Space Grotesk';
  color: #9fb0a4;
  margin: 0 0 26px;
  max-width: 42ch;
}
/* ---- controls, in the landing's shapes ---- */
.rq__stack { display: flex; flex-direction: column; gap: 13px; }
/* GOOGLE FIRST. It is one tap and no typing, so it belongs above the form —
   burying the fast path under six fields is how you make people fill in six
   fields they never needed to. */
.rq__gbtn {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  background: #fbfbf9; color: #1a1a1a;
  border: none; border-radius: 12px;
  padding: 15px; min-height: 50px;
  font: 600 14px 'Space Grotesk';
  cursor: pointer;
  transition: background .15s ease;
}
.rq__gbtn:hover:not(:disabled) { background: #fff; }
.rq__gbtn:disabled { opacity: .55; cursor: default; }
.rq__divider {
  display: flex; align-items: center; gap: 14px;
  color: #5d6660; font: 500 12px 'Space Grotesk';
  margin: 3px 0;
}
.rq__divider::before, .rq__divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.09);
}
.rq__lbl {
  font: 500 11px 'JetBrains Mono';
  letter-spacing: .14em; text-transform: uppercase;
  color: #7f8f84;
  margin: 6px 0 -4px;
}
.rq__lbl span { text-transform: none; letter-spacing: .02em; opacity: .65; }
.rq__inp {
  width: 100%; min-width: 0;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 15px 22px;
  min-height: 50px;
  color: inherit;
  /* 16px exactly, or iOS zooms the page on focus. */
  font: 500 16px 'Space Grotesk';
  outline: none;
  transition: border-color .15s ease;
}
.rq__inp::-moz-placeholder { color: #6b746d; }
.rq__inp::placeholder { color: #6b746d; }
.rq__inp:focus { border-color: rgba(62,222,85,.55); }
.rq__inp.err { border-color: #e5675b; }
/* THE INSTAGRAM ROW, ONE LINE. The @ is fixed, the field takes the rest.
   min-width:0 is what stops the input claiming its intrinsic width and
   dragging the whole page sideways on a phone. */
.rq__wrap {
  display: flex; align-items: center;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding-left: 22px;
  min-height: 50px;
  overflow: hidden;
}
.rq__wrap:focus-within { border-color: rgba(62,222,85,.55); }
.rq__at { flex: 0 0 auto; font: 500 16px 'Space Grotesk'; color: #6b746d; }
.rq__wrap .rq__inp {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; padding-left: 4px; border-radius: 0;
}
.rq__reveal {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: #7f8f84; font: 500 12px 'JetBrains Mono';
  letter-spacing: .1em; text-transform: uppercase;
  min-height: 44px; padding: 0 18px 0 10px;
}
.rq__reveal:hover { color: #cfe0d5; }
.rq__pill {
  width: 100%;
  font: 600 15px 'Space Grotesk';
  color: #062810; background: #3ede55;
  border: none; border-radius: 999px;
  padding: 16px 26px; min-height: 52px;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.rq__pill:hover:not(:disabled) { background: #5cf172; }
.rq__pill:disabled { opacity: .5; cursor: default; }
.rq__hint { font: 500 11.5px/1.55 'Space Grotesk'; color: #6d7a71; margin: -2px 0 0; }
.rq__hint b { color: #3ede55; font-weight: 600; }
.rq__ferr { font: 500 12px 'Space Grotesk'; color: #e5675b; margin-top: 4px; }
.rq__note { font: 500 12px 'Space Grotesk'; margin-top: 22px; opacity: .5; text-align: center; }
.rq__note a, .rq__note button {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  background: none; border: 0; cursor: pointer; font: inherit; padding: 0;
}
.rq__note a:hover, .rq__note button:hover { color: #cfe0d5; }
.rq__legal { font: 500 11px/1.6 'Space Grotesk'; color: #4d574f; margin-top: 14px; text-align: center; }
.rq__legal a { color: #6d7a71; text-decoration: underline; text-underline-offset: 2px; }
:where(.rq) :focus-visible { outline: 2px solid #3ede55; outline-offset: 2px; }
/* ===========================================================================
   YOU'RE ON THE LIST — the landing's own confirmation card, not a new idea.
   =========================================================================== */
.rq__card {
  width: 100%; max-width: 452px;
  background: #0e120f;
  border: 1px solid rgba(62,222,85,.22);
  border-radius: 22px;
  padding: 34px 30px 28px;
  box-shadow: 0 40px 110px rgba(0,0,0,.6);
  animation: rq-pop .42s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rq-pop {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.rq__chk {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(62,222,85,.14); color: #3ede55;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.rq__mh { font: 400 clamp(28px, 8vw, 34px)/1.05 'Instrument Serif'; margin: 0 0 10px; }
.rq__mh em { font-style: italic; color: #3ede55; }
.rq__msub { font: 500 14px/1.55 'Space Grotesk'; color: #9fb0a4; margin: 0 0 14px; }
.rq__mmail {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px 'JetBrains Mono'; color: #3ede55;
  background: rgba(62,222,85,.08);
  border: 1px solid rgba(62,222,85,.22);
  border-radius: 9px; padding: 9px 13px;
  margin: 2px 0 22px;
  word-break: break-all; max-width: 100%;
}
/* The queue, as a numbered run rather than bullets — it IS a sequence, and
   seeing where you are in it is the whole reassurance this screen offers. */
.rq__steps { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rq__steps li {
  display: flex; gap: 13px; align-items: flex-start;
  font: 500 13.5px/1.55 'Space Grotesk'; color: #9fb0a4;
  /* Staggered by index via an inline delay so the list assembles itself. */
  animation: rq-step .5s cubic-bezier(.2,.7,.15,1) both;
}
.rq__steps b { color: #edf0ed; font-weight: 600; }
@keyframes rq-step {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.rq__num {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font: 500 10px 'JetBrains Mono';
  color: #3ede55;
  border: 1px solid rgba(62,222,85,.3);
  background: rgba(62,222,85,.06);
  margin-top: 1px;
}
.rq__mbtn {
  width: 100%;
  font: 600 15px 'Space Grotesk';
  color: #062810; background: #3ede55;
  border: none; border-radius: 12px;
  padding: 16px; min-height: 52px;
  cursor: pointer;
}
.rq__mbtn:hover { background: #5cf172; }
@media (max-width: 480px) {
  .rq__nav { padding: 18px 18px 0; }
  .rq__card { padding: 28px 22px 24px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .rq *, .rq__card, .rq__steps li { animation: none !important; transition: none !important; }
  .rq__cur { animation: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   THE CO-PRODUCER PHONE
   ---------------------------------------------------------------------------
   A phone is not a small desk. The desktop /cp is a scrolling column that
   happens to fit; measured at 390x844 it laid out 943px of content into 844px
   of viewport, which put the bottom 177px of the tape shelf underneath the
   nav bar and past the fold. A guest could see the tapes and could not reach
   them.

   So the phone gets FIXED BANDS instead. Nothing scrolls except the one thing
   that is supposed to — whatever panel is open. Top half is the mix, bottom
   half is the work, tabs are always under the thumb and never move:

     ┌──────────────────────────────┐  --cpm-ribbon    44px   door + save
     ├──────────────────────────────┤
     │   DRUMS   MELODY   VOCALS    │  --cpm-mixer    236px   3 faders,
     │                              │                        COLLAPSING → 88
     ├──────────────────────────────┤
     │                              │
     │        THE PANEL             │  ≈460px                tapes / fx /
     │      (the only scroller)     │  (≈608 collapsed)      sampler / remix
     │                              │
     ├──────────────────────────────┤  --cpm-transport 62px   REC ▶ ■
     ├──────────────────────────────┤  --cpm-tabs      56px  + safe area
     └──────────────────────────────┘

   WHAT CAME OUT, AND WHY (all founder calls):
     · The NEW DRUMS / TEXTURE / FILLS strip. NEW DRUMS duplicates the NEW
       button already sitting under the DRUMS fader, and texture/fills are
       desk garnish. 32px back.
     · The BPM stepper line. 32px back.
     · Rewind and fast-forward. The transport is REC · PLAY · STOP, the same
       three the minimal mobile theme carries.
   That is ~110px, and all of it goes to the tape shelf.

   ONE NOTE ON THE BOTTOM BAR, because it explains odd-looking rules below.
   The bar's DOM children are the six rail buttons AND a mobile transport row
   carrying a SECOND copy of rewind/play/stop/record plus the BPM stepper. So
   the phone shipped two transports, and the nav's four icon-only copies were
   the four unlabelled buttons in the bar. Both that duplicate row and the
   BPM stepper are now gone; the surviving transport is the 50px one, restyled
   and parked directly above the tabs.

   Everything below is scoped to body[data-cp-mobile="true"], which
   CoproducerPage sets only when it is BOTH a co-producer pass AND a phone.
   Nothing here can reach the host studio or the desktop guest.
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-cp-mobile='true'] {
  /* 52, up from 44: the chips in here (Sign in · Sign up · My takes · Save
     take) are real controls and were 30px tall — under the 44px floor. */
  --cpm-ribbon: 52px;
  --cpm-mixer: 236px;
  --cpm-transport: 62px;
  --cpm-tabs: 56px;
  --cpm-safe: env(safe-area-inset-bottom, 0px);
  /* THE NOTCH. The ribbon was pinned to top: 0 with no inset, so on any phone
     with a status bar overlay — every iPhone since the X — the door home, the
     timer and SAVE TAKE were sitting underneath the clock and the battery.
     It never showed up in a browser at 390x844 because a browser has no
     notch; it would only have appeared on a real handset. */
  --cpm-safe-top: env(safe-area-inset-top, 0px);
  /* Everything below measures the head as ONE number so the inset can never
     be applied in one place and forgotten in another. */
  --cpm-head: calc(var(--cpm-ribbon) + var(--cpm-safe-top));
  --cpm-bottom: calc(var(--cpm-transport) + var(--cpm-tabs) + var(--cpm-safe));

  /* THE COLLAPSE, 0 → 1. Driven from CoproducerPage as the open panel is
     scrolled. At 1 the mixer has slid up by exactly its fader height, so the
     faders are gone and the mute plate and NEW button are all that is left —
     anchored, still live, with the panel running on underneath them. */
  --cpm-collapse: 0;
  /* How far the mixer travels, MEASURED off the strip rather than chosen:
     the fader occupies 48..192 inside the band and the mute plate starts at
     196, so 148px is exactly the distance that puts the plate where the
     fader's top was. 134 left a 14px band of fader hanging below the plate —
     the sliver that was still showing. Everything below 196 (plate + NEW,
     78px of it) survives inside the 88px the band keeps. */
  --cpm-fader-h: 148px;
  --cpm-mixer-now: calc(var(--cpm-mixer) - var(--cpm-collapse) * var(--cpm-fader-h));

  /* Where the panel band begins, in viewport coordinates. The sampler decks
     are all position:fixed off --spotify-menu-top, so this one number is what
     drops every machine into the band (see THE DECKS, below). */
  --cpm-panel-top: calc(var(--cpm-head) + var(--cpm-mixer-now));
  --cpm-panel-h: calc(100dvh - var(--cpm-panel-top) - var(--cpm-bottom));

  /* The band at FULL collapse — the tallest it can ever be. Panels that want
     to grow into the collapse size their content off this, so they overflow
     the resting band by exactly the collapse distance and no more: push them
     up, the faders retract, and the content lands with nothing left over. */
  --cpm-panel-top-max: calc(var(--cpm-head) + var(--cpm-mixer) - var(--cpm-fader-h));
  --cpm-panel-h-max: calc(100dvh - var(--cpm-panel-top-max) - var(--cpm-bottom));
  /* How far a collapsing panel is pushed DOWN from its collapsed home. At
     collapse 0 that is the full fader height; at 1 it is nothing. */
  --cpm-slide: calc((1 - var(--cpm-collapse)) * var(--cpm-fader-h));

  /* The tape, and the gap left above and below it once it is centred. The
     tape shelf reads both (see section 7b). */
  /* The mixer's fourth column: everything that belongs to the whole mix
     rather than to one lane. Sits beside the strips and travels with them. */
  --cpm-tempo-w: 84px;
  --cpm-tempo-top: calc(var(--cpm-head) + 52px);

  --cpm-tape-h: min(var(--cpm-panel-h), 84vw);
  --cpm-tape-inset: calc((var(--cpm-panel-h) - var(--cpm-tape-h)) / 2);

  overflow: hidden;
  overscroll-behavior: none;
  /* No double-tap-to-zoom, so no 300ms wait before a pad, a key or a mute
     registers. On an instrument that delay is not a nicety — it is the
     difference between playing something and operating it. */
  touch-action: manipulation;
}

/* THE SAMPLER OPENS COLLAPSED.
   Every other panel earns the collapse by being scrolled. A sampler should
   not have to be: you opened it to hit pads, so the faders get out of the way
   on arrival and the machine is at full size the moment it appears. This also
   means no deck has to scroll — see SamplerMobile.css, where every machine is
   laid out to exactly the height this leaves. */
body[data-cp-mobile='true'][data-cp-tab='sampler'] { --cpm-collapse: 1; }

/* ── 1 · THE RIBBON ────────────────────────────────────────────────────────
   Was 99px of mostly air. Now a 44px bar: door on the left, save on the
   right, timer between them. The wordmark and "powered by" are already
   hidden at 640px; the rest gets its height back. */
body[data-cp-mobile='true'] .cp-ribbon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--cpm-head);
  padding: var(--cpm-safe-top) 10px 0;
  gap: 6px;
  align-items: center;
}
body[data-cp-mobile='true'] .cp-ribbon__powered { display: none; }
body[data-cp-mobile='true'] .cp-ribbon__save {
  min-height: 44px;
  padding: 0 14px;
  font-size: 12px;
  white-space: nowrap;
}
/* Sign in / Sign up / My takes are three ghost chips competing with the one
   button that matters. They stay quiet — but quiet is a matter of colour and
   weight, not of size: at 30px tall they were under the 44px touch floor,
   which is not restraint, it is a control you miss. Type stays small, the
   target does not. */
body[data-cp-mobile='true'] .cp-ribbon .cp-sheet__ghost {
  min-height: 44px !important;
  padding: 0 10px !important;
  font-size: 11px;
  white-space: nowrap;
}
/* The logo and the house are 22px and 30px glyphs. They keep their drawn
   size — blowing them up to 44 would make the door shout louder than SAVE
   TAKE — and gain the hit area around them instead. */
body[data-cp-mobile='true'] .cp-ribbon__home,
body[data-cp-mobile='true'] .cp-ribbon__homeicon {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body[data-cp-mobile='true'] .cp-ribbon__timer { font-size: 10px; }

/* ── 2 · THE STUDIO SHELL ──────────────────────────────────────────────────
   One fixed box under the ribbon. `margin-top` was how the desktop pushed the
   studio clear of the ribbon; on a phone that would just make it taller than
   the screen again. */
body[data-cp-mobile='true'] .cp-studio-shift {
  position: fixed;
  top: var(--cpm-head);
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0 !important;
  overflow: hidden;
}
body[data-cp-mobile='true'] .cp-studio-shift .mobile-layout {
  height: 100% !important;
  min-height: 0 !important;
  padding-bottom: 0 !important; /* was pb-20 for the old overlapping nav */
  display: flex;
  flex-direction: column;
}

/* The scrolling "Artificial Inspiration By nspire" marquee is a nameplate for
   a desk. On a phone it costs 37px and says nothing a guest needs — the room
   already introduced itself on the way in, and the branding is signed on the
   desk below the faders. */
body[data-cp-mobile='true'] .cp-studio-shift .mobile-layout > header { display: none !important; }

/* The 8px grab handle under it resizes the mixer by dragging. There is no
   pointer to hover it with and no room to spend on the gesture; the mixer's
   height on the phone is a decision, not a preference. */
body[data-cp-mobile='true'] .cp-studio-shift .mobile-layout .w-full.h-2 { display: none !important; }

/* ── 3 · THE GLOBAL STRIP — REMOVED ───────────────────────────────────────
   NEW DRUMS / TEXTURE / FILLS / SONG MODE / RESET. It measured 493px wide in
   a 390px window and needed its own scroller to be usable at all; the founder
   call is that it should not be here. NEW DRUMS is the same action as the NEW
   button already under the DRUMS fader, and texture/fills are desk garnish
   next to three faders and a tape shelf. The row goes, and its 32px goes to
   the tapes. */
body[data-cp-mobile='true'] .nsp-control-row { display: none !important; }

/* ── 4 · THE MIXER — three faders ──────────────────────────────────────────
   DRUMS (every drum lane summed into one), MELODY, VOCALS. Equal thirds, no
   horizontal scroll: a guest should never have to swipe to find the fader
   they were just told about. The channel set itself is chosen in
   SoundcraftTheme (cpMobileTracks) — this only sizes it. */
/* ── HOW THE COLLAPSE MOVES, AND WHY IT IS BUILT THIS WAY ──────────────────
   Two earlier attempts were both wrong, in opposite directions.

   The first tracked the scroll continuously and drove the mixer's HEIGHT and
   the panel's TOP and HEIGHT from it. Those are layout properties: every
   frame relaid out the panel's entire subtree — eighteen FX modules — on the
   device running the audio graph. It juddered.

   The second gave up continuity to fix that: two states and a 240ms tween.
   Smooth, but it SNAPPED. The mixer stopped answering to the scroll and
   started reacting to it, which is worse than judder — the panel no longer
   feels attached to your finger.

   This one keeps both. Nothing resizes. The mixer band stays 236px tall for
   its whole life and its strips are TRANSLATED up; the panel is pinned at
   the collapsed geometry and TRANSLATED down to cover the faders when the
   mixer is open. Two transforms, no layout, so it can be driven from every
   scroll frame and stay on the compositor. The panel is opaque and paints
   over the mixer, which is what hides the fader half rather than any element
   changing size. */
body[data-cp-mobile='true'] .mixer-mobile {
  flex: 0 0 var(--cpm-mixer);
  height: var(--cpm-mixer) !important;
  overflow: hidden !important;
}
/* THE COLLAPSE. The band shrinks (above) and the strips slide up inside it by
   the same amount, so the faders travel out through the top while the mute
   plate and NEW button land against the ribbon and stay there. Nothing is
   hidden and nothing unmounts — a half-collapsed mixer is still a live mixer,
   and letting the panel scroll back down brings the faders straight back. */
body[data-cp-mobile='true'] .mixer-channels-mobile {
  transform: translateY(calc(var(--cpm-collapse) * -1 * var(--cpm-fader-h)));
  will-change: transform;
}
/* ── 4b · THE RIGHT-HAND COLUMN ────────────────────────────────────────────
   Three strips across 390px made each one 115px — far wider than anything in
   it. A channel strip is only ever as wide as its widest control, and here
   that is the mute plate and the NEW button; the fader is a 30px track. The
   surplus was empty panel down both sides of every fader.

   Taking 92px back gives the strips ~92px each — still comfortably wider than
   their controls — and buys a fourth column for the things that belong to the
   whole mix rather than to one lane. TEMPO goes there first. */
body[data-cp-mobile='true'] .mixer-channels-mobile {
  width: 100% !important;
  gap: 6px;
  padding: 0 calc(var(--cpm-tempo-w) + 14px) 0 8px;
  overflow: visible !important;
}
body[data-cp-mobile='true'] .mixer-channels-mobile > div {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--cpm-mixer) !important;
}
/* Touch targets. 44px is the floor, and a fader you have to pinch is a fader
   you do not use. */
body[data-cp-mobile='true'] .mixer-channels-mobile button { min-height: 34px; }
/* The name plate IS the mute — the most-pressed control on the strip — and it
   was 40px. Four pixels short of the floor is still short of the floor. */
body[data-cp-mobile='true'] .mixer-channels-mobile [data-mute-overlay],
body[data-cp-mobile='true'] .mixer-channels-mobile [data-mute-overlay] + button {
  min-height: 44px !important;
}

/* ── 5 · TRANSPORT — THE BOOMBOX ──────────────────────────────────────────
   This is the transport from the minimal mobile theme, not a lookalike: the
   same moulded black frame, the same plastic keys with the word silkscreened
   under a clip-path glyph, the same press that sinks the key into the case.
   The recipe is restated here rather than imported because
   MinimalMobileTheme.css is 2,000 lines of a different theme's LAYOUT — its
   own fixed bars, its own library overlay — and pulling all of that onto /cp
   to borrow four gradients would drag furniture we spent this whole file
   removing. What is copied is the MATERIAL; the geometry is ours.

   Three keys: REC · PLAY · STOP. Rewind and fast-forward stand down, and
   there is no home key — the minimal theme's fourth button is chat/home, and
   a key that leaves the session sitting next to PLAY is a mis-tap that ends
   someone's take. The way out is the door in the ribbon.

   Keyed off `data-t` rather than position: the row's contents are
   conditional (the record key only exists when the pass allows recording), so
   nth-child would silently re-label every key the day that changes. */
body[data-cp-mobile='true'] .transport-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--cpm-tabs) + var(--cpm-safe));
  z-index: 10039;
  height: var(--cpm-transport);
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  /* The case: a black moulding with the light catching its top lip. */
  background: linear-gradient(#000 0 0) 50% 50% / 97.5% 97.5% no-repeat !important;
  box-shadow:
    inset 0 -0.1em 0.1em -0.05em #fff2,
    inset 0 0.125em 0.25em #0003,
    inset 0 0.25em 0.25em #0001,
    inset -0.05em -0.1em 0.15em #0003,
    inset 0 -0.05em 0.1em #0002,
    inset 0 0 0 0.4em #2b2b2f;
  font-size: clamp(0.85rem, 3.2vmin, 1.4rem);
  justify-content: center;
}
body[data-cp-mobile='true'] .transport-buttons-mobile {
  display: flex;
  gap: 0.5em;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0.5em 0.7em;
  align-items: stretch;
}

/* The key. */
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t] {
  flex: 1 1 0;
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  position: relative;
  padding: 0 !important;
  border: 0.02em solid #0000;
  border-radius: 0.15em !important;
  background:
    radial-gradient(at 20% 20%, #0000, #0003) 0 40% / 110% 120% padding-box,
    linear-gradient(#44444a, #28282f) 0 40% / 110% 120% padding-box,
    linear-gradient(#5b5b61, #28282f 50%, #202028) 0 40% / 110% 120% border-box !important;
  color: #fff5;
  transform: perspective(30em) translateZ(3em);
  box-shadow:
    inset 0 0 0.4em #0002,
    0 0 0.15em #0005,
    0.25em 0.15em 0.4em #000c,
    0.2em 0.25em 0.35em #0009;
  transition: all 0.1s;
  -webkit-tap-highlight-color: transparent;
}
/* Pressed: the key sinks flush into the case. */
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t]:active {
  transform: perspective(30em) translateZ(0em);
  box-shadow: inset 0 0 1em #0004, 0.125em 0.125em 1em #0005;
}
/* The studio's own SVG icons step aside for the moulded glyph. */
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t] svg { display: none; }

/* Silkscreened word, under the glyph. */
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t]::before {
  content: attr(data-t);
  position: absolute;
  left: 50%;
  top: 66%;
  transform: translate(-50%, -50%);
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* The glyph itself — one box, cut to shape, exactly as the boombox does it. */
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t]::after {
  content: '';
  position: absolute;
  top: 34%;
  left: 50%;
  width: 0.98em;
  height: 0.78em;
  background: currentcolor;
  transform: translate(-50%, -50%);
}
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t='rec'] { color: #b44a; }
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t='rec']::after {
  width: 0.78em;
  border-radius: 50%;
}
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t='play']::after {
  width: 0.86em;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t='stop']::after { width: 0.78em; }
/* Recording: the key lights and stays lit. */
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t='rec'].recording-active { color: #ff4d4d; }

/* Rewind stands down; fast-forward earns its place (founder's call — you skip
   forward far more than you go back in a loop-based session). */
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t='rew'] { display: none !important; }
/* REC · PLAY · STOP · FFWD — the boombox order, transport reading left to
   right after the record key. */
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t='rec'] { order: 1; }
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t='play'] { order: 2; }
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t='stop'] { order: 3; }
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t='ffwd'] { order: 4; }
/* The boombox's own double-triangle cut. */
body[data-cp-mobile='true'] .transport-buttons-mobile > button[data-t='ffwd']::after {
  clip-path: polygon(100% 50%, 50% 0, 50% 45%, 0 0, 0 100%, 50% 55%, 50% 100%);
}

/* ── 6 · THE PANEL BAND ────────────────────────────────────────────────────
   The bottom portion, and the only thing on the page allowed to scroll. */
body[data-cp-mobile='true'] .cp-studio-shift .mobile-layout > div:last-of-type {
  flex: 1 1 auto;
  min-height: 0;
}
/* PINNED, not flowed. Letting the band find its own place left it 9px low
   (stray padding somewhere up the chain) and so 9px of the tape shelf sat
   under the tab bar — the exact class of bug this whole file exists to end.
   Pinning it to the same --cpm-panel-top the sampler decks use means the
   panel and the machines that fill it are placed by ONE number, and a future
   padding change upstream cannot separate them again. */
body[data-cp-mobile='true'] .cp-studio-shift .mobile-layout > div:last-of-type > .flex-1 {
  position: fixed;
  top: var(--cpm-panel-top);
  left: 0;
  right: 0;
  height: var(--cpm-panel-h);
  min-height: 0;
  /* The one scroller on the page. Tapes scroll sideways inside their own rail
     and so keep `hidden`; FX and the sampler are taller than the band and
     scroll vertically here, which is also what drives --cpm-collapse. */
  overflow: hidden;
  overscroll-behavior: contain;
}
body[data-cp-mobile='true'][data-cp-panel='scroll'] .cp-studio-shift .mobile-layout > div:last-of-type > .flex-1 {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body[data-cp-mobile='true'] .cp-studio-shift .mobile-layout > div:last-of-type > .flex-1::-webkit-scrollbar { display: none; }
body[data-cp-mobile='true'] .cp-studio-shift .mobile-layout > div:last-of-type > .flex-1 > .w-full {
  height: 100%;
  margin-bottom: 0 !important;
}

/* The tape wall and the remix deck share one height so switching tabs never
   makes the page jump. On the phone that height is simply the band. */
body[data-cp-mobile='true'] [data-cp-theme] { --cp-shelf-h: var(--cpm-panel-h); }
body[data-cp-mobile='true'] .cp-shelf-height { height: var(--cpm-panel-h) !important; }

/* The quiet studio tile is a 520px fixed-height placeholder. On the phone it
   fills the band instead of inventing 520px the layout does not have. */
body[data-cp-mobile='true'] .cp-studio-shift .flex-1 img[src*='studio-tile'] {
  height: 100% !important;
}

/* ── 7 · THE TABS ──────────────────────────────────────────────────────────
   Four equal tabs, always visible, never scrolling. The old rail was the
   desktop's vertical toolbar turned sideways: unequal purple slabs that
   scrolled, with the BPM stepper and four label-less buttons wedged in beside
   them. BPM belongs to transport; it has moved there. What is left is the
   only question this bar should answer — which room am I in. */
body[data-cp-mobile='true'] .mobile-bottom-nav {
  height: calc(var(--cpm-tabs) + var(--cpm-safe));
  padding: 0 0 var(--cpm-safe) 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0 !important;
  overflow: hidden;
  background: #17181c !important;
  border-top: 1px solid #2a2c31 !important;
  z-index: 10040; /* over the decks, under the ribbon's 10050 */
}
/* The bar's last child is the duplicate transport + the BPM stepper. The
   transport is out — it is a second copy of the one now sitting above this
   bar. The TEMPO is not out: it moves up into the mixer's right-hand column
   (see § 4b), where it has room to be a real control instead of a 32px line
   stealing height from the tape shelf. */
body[data-cp-mobile='true'] .mobile-bottom-nav > div:last-child {
  position: fixed;
  top: var(--cpm-tempo-top);
  right: 8px;
  width: var(--cpm-tempo-w);
  height: auto;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  z-index: 3;
  /* Rides with the strips: the tempo belongs to the mixer, so it leaves with
     the faders rather than hovering over the panel that replaces them. */
  transform: translateY(calc(var(--cpm-collapse) * -1 * var(--cpm-fader-h)));
  will-change: transform;
}
/* The duplicate transport cluster inside it still goes. */
body[data-cp-mobile='true'] .mobile-bottom-nav > div:last-child > div:first-child { display: none !important; }
/* Tabs are not buttons-on-a-slab any more. Flat, full-height, and the active
   one is stated by an ink bar and colour rather than a filled purple block —
   at four-across the blocks read as one solid purple bar with hairlines. */
body[data-cp-mobile='true'] .mobile-bottom-nav > button {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  height: var(--cpm-tabs) !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8b8f97 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 !important;
  position: relative;
  transition: color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
body[data-cp-mobile='true'] .mobile-bottom-nav > button svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}
/* THE SELECTED TAB IS NEAR-WHITE, AND THE ACCENT IS THE BAR ABOVE IT.
   The label used to take the theme's accent colour. That is fine on the two
   or three presets that happen to be bright, and unreadable on the rest — a
   white-label pass ships eight themes and a host can set a custom hex, so the
   accent is a colour NOBODY has checked against this bar's #17181c. The one
   state that must always be legible was the one gambling on an unknown value.

   So the ink is fixed at #f2f4f7 (about 14:1 here, and the same on any theme)
   and the accent moves to the 2px bar, where it identifies the room without
   having to carry any text. Selected also gains weight, so the state survives
   even if a theme somehow flattens the colours. */
body[data-cp-mobile='true'] .mobile-bottom-nav > button[data-on='true'] {
  color: #f2f4f7 !important;
  font-weight: 800;
}
body[data-cp-mobile='true'] .mobile-bottom-nav > button[data-on='true']::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--cp-accent, #b388ff);
}
body[data-cp-mobile='true'] .mobile-bottom-nav > button:active { transform: none !important; }
/* The FX button carries a live-activity lamp pinned to its top-right corner.
   On the rail that corner is the button's corner; in a flat full-height tab
   it floated in the gap above the glyph looking like a rendering fault. It
   becomes a dot on the glyph's shoulder instead — same signal, on the thing
   it is a signal about. */
body[data-cp-mobile='true'] .mobile-bottom-nav > button > span:not(:last-child) {
  top: 8px !important;
  right: auto !important;
  left: calc(50% + 9px);
  height: 6px !important;
  width: 6px !important;
}

/* ── 7b · THE TAPE SHELF ───────────────────────────────────────────────────
   The tapes ARE the panel. A tape is square and sized off the band's height,
   which on the desk gives a wall of them; capping it at 200px to fit two
   across made the shelf read as a row of thumbnails with the title stranded
   in a band of empty rack above it. The founder's call is the opposite: big
   tapes filling the whole bottom half, with PULL A TAPE lying over the
   artwork the way a sticker lies on a cassette.

   `min(100%, 84vw)` is what makes both true at once. The band is now ~460px
   and the screen is 390px, so height would win and the tape would be wider
   than the phone; 84vw caps it at 328px and leaves a slice of the next tape
   showing at the edge — which is the whole reason to have a shelf rather than
   a slideshow. On a taller phone the band grows and the tape grows with it,
   up to the same 84vw ceiling. */
body[data-cp-mobile='true'] .tg-rail {
  align-items: center;
  gap: 14px;
  /* `pan-y` on the desk lets the page scroll under a shelf drag. On the phone
     the panel does not scroll on this tab at all, so pan-y bought nothing —
     and it cost the gesture: it gives the browser permission to claim any
     swipe with a vertical component as a page pan, at which point it fires
     pointercancel and the shelf stops. That is the other half of the
     inconsistency. Nothing here scrolls, so nothing may be claimed. */
  touch-action: none;
}
body[data-cp-mobile='true'] .tg-item {
  height: var(--cpm-tape-h);
  align-self: center;
}
/* Hover lift is a mouse idea; on glass it only sticks after a tap, leaving
   one tape mysteriously raised. */
body[data-cp-mobile='true'] .tg-item:hover { transform: none; }

/* The head and foot already float over the shelf with their own scrim — that
   is how they are built. With the tapes small they were floating over empty
   rack instead; now they land on the artwork, which is where they were always
   meant to be. They only need to stop taking a bite out of the band. */
body[data-cp-mobile='true'] .tg-title { font-size: 19px; }
/* Pulled IN to the tape's own edges so the type lies on the artwork rather
   than in the rack above it. The tape is centred in the band, so the inset on
   each side is exactly half the leftover height — computed, not guessed, so a
   taller phone keeps the type on the cassette instead of drifting off it. */
body[data-cp-mobile='true'] .tg-head {
  top: var(--cpm-tape-inset);
  padding: 12px 16px 30px;
}
body[data-cp-mobile='true'] .tg-foot {
  bottom: var(--cpm-tape-inset);
  padding: 30px 16px 12px;
}
/* One line, not two — "Every one is a different combination the host
   approved" is the desk's explanation and it wraps to three lines here. */
body[data-cp-mobile='true'] .tg-sub { display: none; }

/* ── 8 · THE DECKS ─────────────────────────────────────────────────────────
   Every sampler (NPC 2000, STUDIO, SMPLR RACK, NP 1200, NSR-10) and the FX
   menu is position:fixed off these three variables. Retargeting them here
   lands all five machines inside the panel band with no per-deck geometry —
   the per-machine mobile skins then only have to solve their own faces. */
body[data-cp-mobile='true'] {
  --spotify-menu-top: var(--cpm-panel-top);
  --spotify-menu-left: 0px;
  --soundcraft-width: 0px;
  /* The phone has no gutters to inset from, and it re-parks .sdh-switch /
     .sdh-kitbar itself (just below) — so the deck must NOT leave a chrome
     strip for them at the top of the band. */
  --spotify-menu-right: 0px;
  --spotify-menu-bottom: 0px;
  --sdh-chrome: 0px;
}
/* The device switcher and GENERATE SAMPLE PACK ride 22px above the deck's top
   edge — which on the phone is on top of the transport line. They move to the
   deck's own first row instead. */
body[data-cp-mobile='true'] .sdh-switch {
  top: auto;
  bottom: var(--cpm-bottom);
  left: 0;
  right: 0;
  height: var(--smpm-devices, 30px);
  padding: 0 6px;
  gap: 3px;
  background: #101114;
  align-items: center;
  justify-content: space-between;
  z-index: 10041;
}
body[data-cp-mobile='true'] .sdh-tab {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 6px 2px;
  border-radius: 5px;
  font-size: 8px;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* GENERATE SAMPLE PACK is a minute-long background job, not a per-take
   control. It keeps its place but stops eating a whole line of a phone. */
body[data-cp-mobile='true'] .sdh-kitbar {
  /* Its own line at the TOP of the band. On the desk it rides 22px above a
     deck that starts at 53vh; here the deck starts directly under the play
     button, so the same rule parked it on top of the transport. */
  top: var(--cpm-panel-top);
  left: 0;
  right: 0;
  height: var(--smpm-kitbar, 20px);
  align-items: center;
}
body[data-cp-mobile='true'] .sdh-kitbar .sdh-kit {
  /* Height, not padding. The strip is 20px but the button sized itself off
     its own padding to ~36px and — the strip being bottom-aligned — grew
     UPWARDS, straight over the play button. */
  height: var(--smpm-kitbar, 20px);
  /* Beats the `min-height: 44px !important` in mobile-responsive.css:100,
     which was making this a 44px slab on a 20px bottom-aligned strip — so it
     grew upwards and landed on the play button. See the long note at the top
     of SamplerPads/SamplerMobile.css. */
  min-height: 0 !important;
  min-width: 0;
  padding: 0 14px;
  border-radius: 0 0 7px 7px;
  font-size: 9px;
  line-height: var(--smpm-kitbar, 20px);
  letter-spacing: 0.02em;
}
/* A crashed deck fills the band, not the whole page. */
body[data-cp-mobile='true'] .sdh-crash {
  top: var(--cpm-panel-top);
  bottom: calc(var(--cpm-bottom) + 30px);
  left: 8px;
  right: 8px;
}

/* ── 9 · THINGS A GUEST ON A PHONE NEVER NEEDS ─────────────────────────────
   Each of these is desk furniture that survives on the phone only as
   clipped chrome. Removing them is the reduction pass, not a feature cut —
   none is reachable at this width today. */
body[data-cp-mobile='true'] .lcd-display,
body[data-cp-mobile='true'] .desktop-only { display: none !important; }


/* ── 10 · THE FX RACK ──────────────────────────────────────────────────────
   The rack is a ROW of effect modules — KAOSS, MORPH, WARP, the pad banks —
   inside `.fxk-rack { display: flex; overflow-x: auto }`. On a desk you push
   it sideways past your console. On a phone you got one and a half modules in
   a 390px window, a sideways scroll nobody looks for, and no reason to
   believe there were another six.

   It turns ninety degrees. Modules stack full-width and run DOWN the screen,
   and that vertical scroll is the same gesture that drives --cpm-collapse:
   pull the rack up, the faders overhead retract, and by the second module you
   have the mute plates and NEW buttons pinned above and the full 594px
   underneath. That is the whole reason the collapse exists — it buys the FX
   the room this redesign needs.

   Sideways is closed off (`overflow-x: hidden`) so a mis-angled swipe can
   never strand you between two modules, and the drag-to-reorder axis follows
   the rack (FxPlayground.tsx reads the same body flag). */
body[data-cp-mobile='true'] .fxp-container {
  /* Pinned at the COLLAPSED geometry and slid down to meet the open mixer.
     Its box never changes, so the eighteen modules inside it are laid out
     once and then only composited. */
  top: var(--cpm-panel-top-max);
  height: var(--cpm-panel-h-max);
  bottom: auto;
  left: 0;
  right: 0;
  transform: translateY(var(--cpm-slide));
  will-change: transform; /* above the mixer it covers, below transport and tabs */
  border-radius: 0;
  z-index: 1500; /* under the transport and tabs, which never go away */
}
body[data-cp-mobile='true'] .fxk-shell { margin: 4px 6px 6px; padding: 6px 7px; }

body[data-cp-mobile='true'] .fxk-rack {
  flex-direction: column;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  gap: 10px;
  scrollbar-width: none;
}
body[data-cp-mobile='true'] .fxk-rack::-webkit-scrollbar { display: none; }
/* Full width — and `min-width: 0` is what actually makes that true.

   A flex item will not shrink below the intrinsic width of its contents
   unless it is told it may. These modules were built as columns in a
   horizontal rack, so each carries a min-content width from whatever is
   inside it: measured on the phone they came out 214, 430, 138 and 150 wide
   in a 374px rack. Half of them left a stripe of dead panel down the right,
   and MORPH — at 430 — was wider than the phone and simply had its right
   side cut off. Releasing the floor here and on every child that holds a
   screen or a control row is what lets each module actually become the
   width it is given. */
body[data-cp-mobile='true'] .fxk-module {
  flex: 0 0 auto;
  /* `!important` is load-bearing here and is not laziness. The rack is a
     framer-motion Reorder.Group, and Reorder.Item measures each child and
     writes its size back as an INLINE style — `width: 214px; min-width:
     214px` — so the module can be reordered without the row reflowing. An
     inline style outranks any stylesheet rule, so a plain `width: 100%` was
     being applied and then ignored: the heights changed, the widths never
     did, and MORPH stayed 430px wide inside a 362px rack with its right side
     clipped off. This is the one place in the file where the cascade is not
     the final word. */
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  /* 210, not 240: three modules within reach beats two, and the XY pad and
     knob rows are still comfortably playable at this height. */
  min-height: 210px;
}
body[data-cp-mobile='true'] .fxk-module *,
body[data-cp-mobile='true'] .fxk-body,
body[data-cp-mobile='true'] .fxk-morph,
body[data-cp-mobile='true'] .fxk-warp,
body[data-cp-mobile='true'] .fxk-echodivs,
body[data-cp-mobile='true'] .fxk-reppads,
body[data-cp-mobile='true'] .fxk-shapers,
body[data-cp-mobile='true'] .fxk-drumfx { min-width: 0; }
/* The screens are the part that should take the width the module just
   gained — they are where the gesture happens. */
body[data-cp-mobile='true'] .fxk-screen {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
}
/* The knob columns keep their size and the screen beside them takes the
   rest, so a module reads as one wide instrument instead of a control
   hugging the left edge with a hole next to it. */
/* MORPH is knob · screen · throw across one line. At 362px that left the
   screen 90px wide and its legend broke into four words down a column. The
   throw wraps onto its own row instead, so the screen gets the whole line
   beside the knob and reads as a display again. */
body[data-cp-mobile='true'] .fxk-morph {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}
body[data-cp-mobile='true'] .fxk-morph-col { flex: 0 0 auto; }
body[data-cp-mobile='true'] .fxk-morph > .fxk-screen { flex: 1 1 0 !important; }
/* The throw and its legend live in a second, wider column — 176px of the 360
   — which left the screen between them 90px wide with its label broken into
   four stacked words. It wraps to its own full-width row so the screen gets
   the whole line beside the knob. */
body[data-cp-mobile='true'] .fxk-morph > .fxk-morph-col.wide { flex: 1 0 100%; }
body[data-cp-mobile='true'] .fxk-knobwrap { flex: 1 1 auto; }
/* The strip of module toggles above the rack scrolls sideways rather than
   wrapping into three rows and eating the rack it belongs to. */
body[data-cp-mobile='true'] .fxk-bar {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
body[data-cp-mobile='true'] .fxk-bar::-webkit-scrollbar { display: none; }
body[data-cp-mobile='true'] .fxk-bar > * { flex: 0 0 auto; }
/* One line of small caps at the bottom of a phone panel is 20px of the rack
   spent saying something the guest already agreed to on the way in. */
body[data-cp-mobile='true'] .fxk-foot { display: none; }


/* A collapse is a big piece of the screen moving. Honour the system setting:
   the state still changes, it just arrives instead of travelling. */
/* Nothing here tweens any more — the collapse is scroll-linked, so the only
   motion is the one the finger is making. Kept as a guard for anything a
   future pass adds a transition to. */
@media (prefers-reduced-motion: reduce) {
  body[data-cp-mobile='true'] .mixer-mobile,
  body[data-cp-mobile='true'] .mixer-channels-mobile,
  body[data-cp-mobile='true'] .fxp-container,
  body[data-cp-mobile='true'] .cp-studio-shift .mobile-layout > div:last-of-type > .flex-1 {
    transition: none !important;
  }
}


/* ── 11 · NO iOS LONG-PRESS FURNITURE ─────────────────────────────────────
   Holding a pad on iOS was raising the text-selection magnifier and the
   share/copy callout. That is Safari doing exactly what it should on a
   document — but this is an instrument, and HOLDING A PAD IS A GESTURE: it is
   how you sustain a note, arm a mode, or set the one. The callout hijacked it
   mid-hold and left a highlight behind.

   `-webkit-touch-callout` is the switch for the bubble specifically; the
   user-select pair stops the selection highlight and the magnifier that rides
   with it. Applied to the whole guest studio because there is nothing in it
   anyone needs to select — it is a machine, not a page. The one exception is
   the take-name field, which is real text entry. */
body[data-cp-mobile='true'] .cp-studio-shift,
body[data-cp-mobile='true'] .cp-studio-shift *,
body[data-cp-mobile='true'] .fxp-container,
body[data-cp-mobile='true'] .fxp-container *,
body[data-cp-mobile='true'] .mpc2k, body[data-cp-mobile='true'] .mpc2k *,
body[data-cp-mobile='true'] .srt-deck, body[data-cp-mobile='true'] .srt-deck *,
body[data-cp-mobile='true'] .smp-rack, body[data-cp-mobile='true'] .smp-rack *,
body[data-cp-mobile='true'] .sp12, body[data-cp-mobile='true'] .sp12 *,
body[data-cp-mobile='true'] .nsr10, body[data-cp-mobile='true'] .nsr10 * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
/* Typing a take name is the one thing here that IS text. */
body[data-cp-mobile='true'] input,
body[data-cp-mobile='true'] textarea,
body[data-cp-mobile='true'] [contenteditable='true'] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
}


/* ── 12 · TEMPO, IN THE MIXER ─────────────────────────────────────────────
   The stepper's own markup is [−] [85] [+] on one line, which at 84px wide
   would be three cramped 26px targets. Stacked, each one gets the full column
   width and clears the touch floor, and the number reads as the display it
   is rather than as the middle button of three. */
body[data-cp-mobile='true'] .mobile-bottom-nav > div:last-child > div {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  padding: 6px 5px !important;
  border-radius: 6px;
  background: #1b1d21 !important;
  box-shadow: inset 0 0 0 1px #2a2c31;
}
body[data-cp-mobile='true'] .mobile-bottom-nav > div:last-child > div::before {
  content: 'TEMPO';
  /* -2, below every key's order, so the legend stays at the top of the
     column whatever the buttons do. */
  order: -2;
  color: #6f747c;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: center;
}
body[data-cp-mobile='true'] .mobile-bottom-nav > div:last-child button {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 5px;
  font-size: 15px;
}
/* PLUS ON TOP, MINUS UNDERNEATH, the number between them — the way a value
   you push up and pull down should read. The markup order is [−] [n] [+], so
   the two keys are re-ordered around the readout rather than moved. */
body[data-cp-mobile='true'] .mobile-bottom-nav > div:last-child button:nth-child(3) { order: -1; } /* + */
body[data-cp-mobile='true'] .mobile-bottom-nav > div:last-child button:nth-child(1) { order: 1; }  /* − */
/* The readout is the one that is not a key — it is a number you read, and now
   also one you can drag (see the nsp-tempo-readout handlers). */
body[data-cp-mobile='true'] .mobile-bottom-nav > div:last-child button:nth-child(2) {
  order: 0;
  cursor: ns-resize;
  touch-action: none;
  height: 30px !important;
  min-height: 30px !important;
  background: #0f1013 !important;
  color: #eaf4ff !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}


/* Playfair for the opening sentence. The app itself only loads Barlow
   Condensed, so without this the serif silently falls through to Georgia —
   the same trap that made 'Inter' a lie everywhere else. @import must be
   the FIRST rule in the file or the browser drops it. */
/*
 * CO-PRODUCER WHITE-LABEL THEMING.
 *
 * The studio chrome is hardcoded hex inline (#663399 rail buttons, #222222
 * panels) — not CSS-variable driven — so per-pass recolor works as an
 * attribute-scoped OVERRIDE layer: `[data-cp-theme]` on the page root wins
 * over the inline styles/classes it names, and every NEW co-producer surface
 * (splash, sheets, shelf) reads the variables directly.
 *
 * The 8-pack. Every text/ground pair is contrast-checked ≥ 4.5:1.
 *   --cp-accent   the label's colour (buttons, focus rings, meters)
 *   --cp-accent-2 hover / active of the accent
 *   --cp-ground   the deep background
 *   --cp-panel    raised panel surface
 *   --cp-text     text on ground
 *   --cp-on-accent text on the accent itself
 */
[data-cp-theme] {
  --cp-accent: #8b7bf7;
  --cp-accent-2: #a99cff;
  --cp-ground: #0b0b10;
  --cp-panel: #16161d;
  --cp-text: #e8e8f0;
  --cp-on-accent: #0b0b10;
}
[data-cp-theme='pink-label'] {
  --cp-accent: #ff5fa2; --cp-accent-2: #ff85b8;
  --cp-ground: #120a0f; --cp-panel: #1d1218;
  --cp-text: #f7e9f0; --cp-on-accent: #1a0710;
}
[data-cp-theme='ledger'] {
  --cp-accent: #b3261e; --cp-accent-2: #d13a31;
  --cp-ground: #f2ede2; --cp-panel: #e9e2d2;
  --cp-text: #17140e; --cp-on-accent: #f6f1e6;
}
[data-cp-theme='blacklight'] {
  --cp-accent: #7b6cff; --cp-accent-2: #988cff;
  --cp-ground: #07070c; --cp-panel: #121220;
  --cp-text: #e6e4ff; --cp-on-accent: #0a0a14;
}
[data-cp-theme='gallery'] {
  --cp-accent: #17171a; --cp-accent-2: #33333a;
  --cp-ground: #fafafa; --cp-panel: #f0f0f2;
  --cp-text: #17171a; --cp-on-accent: #fafafa;
}
[data-cp-theme='gold-leaf'] {
  --cp-accent: #d9b25f; --cp-accent-2: #e8c778;
  --cp-ground: #17110b; --cp-panel: #221a11;
  --cp-text: #f3ead9; --cp-on-accent: #1c1408;
}
[data-cp-theme='seafoam'] {
  --cp-accent: #63e2c0; --cp-accent-2: #86ecd0;
  --cp-ground: #06201c; --cp-panel: #0c2f29;
  --cp-text: #e2f7f0; --cp-on-accent: #06201c;
}
[data-cp-theme='crimson'] {
  --cp-accent: #d93a3a; --cp-accent-2: #e85a5a;
  --cp-ground: #131013; --cp-panel: #1e181a;
  --cp-text: #f4e9e9; --cp-on-accent: #1c0808;
}
[data-cp-theme='tape'] {
  --cp-accent: #b97a1e; --cp-accent-2: #d89a3e;
  --cp-ground: #efe6d4; --cp-panel: #e5dac2;
  --cp-text: #241d10; --cp-on-accent: #f6efe0;
}
/* Custom colors from the wizard override the preset via inline style on the
   root: style="--cp-accent: ...", which wins by specificity order. */
/* ---- chrome recolor: the studio's known hardcoded classes ---------------- */
/* Left-rail buttons (Genres/FX/Sampler/Remix) are bg-[#663399]/[#8A2BE2]. */
[data-cp-theme] .bg-\[\#663399\],
[data-cp-theme] .bg-\[\#8A2BE2\] {
  background-color: var(--cp-accent) !important;
  color: var(--cp-on-accent) !important;
}
[data-cp-theme] .hover\:bg-\[\#9370DB\]:hover {
  background-color: var(--cp-accent-2) !important;
}
[data-cp-theme] .bg-\[\#222222\] {
  background-color: var(--cp-panel) !important;
}
/* Focus visibility carries the label's colour everywhere. */
[data-cp-theme] :focus-visible {
  outline: 2px solid var(--cp-accent) !important;
  outline-offset: 2px;
}
/* ---- co-producer surfaces ------------------------------------------------ */
.cp-splash {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center; padding: 24px;
  background: var(--cp-ground); color: var(--cp-text);
  transition: opacity 480ms ease;
}
.cp-splash[data-leaving='true'] { opacity: 0; pointer-events: none; }
.cp-splash__art {
  width: clamp(120px, 28vw, 220px); height: clamp(120px, 28vw, 220px);
  -o-object-fit: cover;
     object-fit: cover; border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}
.cp-splash__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: clamp(30px, 6vw, 54px);
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
}
.cp-splash__line { font-size: 16px; opacity: 0.82; }
.cp-splash__enter {
  margin-top: 8px; padding: 14px 34px; min-height: 44px;
  border: none; border-radius: 6px; cursor: pointer;
  background: var(--cp-accent); color: var(--cp-on-accent);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 19px; letter-spacing: 0.08em; text-transform: uppercase;
}
.cp-splash__enter:hover { background: var(--cp-accent-2); }
.cp-splash__meter {
  width: min(280px, 60vw); height: 6px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--cp-text) 14%, transparent);
}
.cp-splash__meter > span {
  display: block; height: 100%; width: 40%;
  background: var(--cp-accent);
  animation: cpMeter 1.1s ease-in-out infinite alternate;
}
@keyframes cpMeter { from { transform: translateX(-30%); } to { transform: translateX(220%); } }
.cp-splash__powered {
  position: absolute; bottom: 18px; left: 0; right: 0;
  font-family: ui-monospace, monospace; font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.5;
}
/* The header ribbon inside the studio: label + session + expiry countdown. */
.cp-ribbon {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 14px;
  background: var(--cp-panel); color: var(--cp-text);
  border-bottom: 2px solid var(--cp-accent);
  font-family: 'Barlow Condensed', sans-serif;
}
.cp-ribbon__art { width: 26px; height: 26px; border-radius: 4px; -o-object-fit: cover; object-fit: cover; }
.cp-ribbon__label { font-weight: 700; font-size: 17px; letter-spacing: 0.05em; text-transform: uppercase; }
.cp-ribbon__session { font-size: 14px; opacity: 0.75; }
.cp-ribbon__spacer { flex: 1; }
.cp-ribbon__timer { font-family: ui-monospace, monospace; font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.8; }
.cp-ribbon__save {
  min-height: 34px; padding: 5px 18px; border: none; border-radius: 5px; cursor: pointer;
  background: var(--cp-accent); color: var(--cp-on-accent);
  font-weight: 700; font-size: 15px; letter-spacing: 0.07em; text-transform: uppercase;
}
.cp-ribbon__save:hover { background: var(--cp-accent-2); }
.cp-ribbon__powered { font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.45; }
/* The ribbon outranks the studio's own header cluster (z 9999) — the guest's
   label, timer and Save must never be the thing that gets covered. */
.cp-ribbon { z-index: 10050; }
/* ---- THE OPENING --------------------------------------------------------
   The same gesture the Wave share opens with (see .lsn-open in
   ListenerPage.css): no card, no border, the sentence arriving a letter at a
   time in a serif, and everything else waiting behind it until it lands.
   Sized a step smaller here because this line is a whole sentence, not a
   title, and it has to hold together on one screen. */
.cp-open { justify-content: center; gap: 0; padding: 32px 24px; }
.cp-open__inner {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  /**
   * SIT THE INVITATION ABOVE CENTRE.
   *
   * Optically centred text placed at true centre reads as low, and the door
   * had a screenful of empty space under it besides. Lifting the block puts
   * the name where the eye lands first and gives everything below it room to
   * breathe instead of crowding the headline.
   */
  margin-top: -7vh;
}
.cp-openname {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  /* A COLUMN, not a wrapping row: the name owns one line and the sentence
     owns the next, instead of the two running together and breaking wherever
     the width happens to run out. */
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--cp-text);
}
/**
 * ONE SENTENCE, ONE SIZE — and it is the loudest thing on the page.
 *
 * The second line was set smaller so the name would read first. That was the
 * wrong call: "Brian wants to co-produce with you" IS the message, and
 * shrinking half of it turned the invitation into a caption under a name.
 * Both lines now run at the same size and weight; the line break is there to
 * keep the phrase whole, not to rank the two halves.
 */
.cp-openline { display: block; text-align: center; text-wrap: balance; }
.cp-openline--what { margin-top: 0.06em; }
/* One word = one unbreakable box. Without this the animated letters inside
   are each a legal break point and words split down the middle. */
.cp-word { display: inline-block; white-space: nowrap; }
.cp-ltr {
  opacity: 0;
  display: inline-block;
  white-space: pre;
  animation: cp-ltr-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes cp-ltr-in {
  from { opacity: 0; transform: translateX(6px); }
  to { opacity: 1; transform: none; }
}
/* Everything under the sentence waits for it to finish, then rises. */
.cp-opensub, .cp-openwelcome, .cp-openplay, .cp-openfoot, .cp-poweredby {
  opacity: 0;
  animation: cp-rise 0.7s ease forwards;
}
@keyframes cp-rise {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
/* The label, small and tracked — it is the mark on the door, not the sentence.
   Given real air above it so it reads as a separate mark rather than a third
   line of the headline. */
.cp-opensub {
  margin: 30px 0 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.86rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.62;
  animation-delay: 1.5s;
  color: var(--cp-accent);
}
.cp-openwelcome {
  margin: 20px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 34rem;
  opacity: 0.78;
  font-style: italic;
  animation-delay: 1.65s;
}
/**
 * THE LURE.
 *
 * Held still for six seconds — long enough to read the invitation and the
 * note under it — then a slow double-beat every few seconds. It is a pulse,
 * not a bounce: the button should feel like it is waiting for an answer, not
 * demanding one. Honoured `prefers-reduced-motion` below; anyone who has
 * asked for stillness gets a plain button.
 */
.cp-lure { animation: cp-rise 0.7s ease forwards, cp-pulse 3.4s ease-in-out 6s infinite; }
@keyframes cp-pulse {
  0%, 100% { transform: none; box-shadow: 0 0 0 0 transparent; }
  6% { transform: scale(1.045); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cp-accent) 16%, transparent); }
  12% { transform: none; box-shadow: 0 0 0 12px transparent; }
  18% { transform: scale(1.03); }
  24% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-lure { animation: cp-rise 0.7s ease forwards; }
}
.cp-openplay {
  margin: 44px 0 0;
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  border-radius: 999px;
  padding: 13px 44px;
  font: inherit;
  font-size: 0.76rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
  animation-delay: 1.8s;
  transition: background 0.2s, color 0.2s, letter-spacing 0.2s;
}
.cp-openplay:hover {
  background: var(--cp-accent);
  border-color: var(--cp-accent);
  color: var(--cp-on-accent);
  letter-spacing: 0.34em;
}
.cp-openfoot {
  margin: 22px 0 0;
  font-size: 0.72rem;
  opacity: 0.42;
  letter-spacing: 0.06em;
  animation-delay: 1.95s;
}
.cp-poweredby {
  /* Sits well below the opening line rather than tucked under it: this is the
     footer of the screen, not another line of the invitation, and the space
     is what tells you the message above it has finished. */
  margin: 58px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.36;
  animation-delay: 2.1s;
}
@media (prefers-reduced-motion: reduce) {
  .cp-ltr, .cp-opensub, .cp-openwelcome, .cp-openplay, .cp-openfoot, .cp-poweredby {
    animation: none; opacity: 1; transform: none;
  }
}
/* ---- THE CURTAIN: time's up ---------------------------------------------
   Deliberately still and quiet. The studio is unmounted behind this, so it
   is the whole page rather than a sheet over a desk. */
.cp-closed { gap: 14px; }
.cp-closed__art {
  width: clamp(96px, 20vw, 150px);
  height: clamp(96px, 20vw, 150px);
  /* Dimmed and desaturated: the label is still theirs, but the session it
     belonged to is over. */
  filter: grayscale(0.55) brightness(0.72);
}
.cp-closed__stamp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 55%, transparent);
  border-radius: 3px;
  color: var(--cp-accent);
  /* A rubber stamp on a finished tape box, off-square so it reads as struck
     rather than typeset. */
  transform: rotate(-1.6deg);
  opacity: 0.92;
}
.cp-closed__line {
  margin: 2px 0 0;
  font-size: 17px;
  max-width: 30ch;
  line-height: 1.45;
  opacity: 0.86;
}
.cp-closed__sub {
  margin: 0;
  font-size: 14px;
  max-width: 34ch;
  opacity: 0.55;
}
.cp-closed__acts {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.cp-closed__ghost {
  min-height: 44px;
  padding: 13px 24px;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: var(--cp-text);
  border: 1px solid color-mix(in srgb, var(--cp-text) 32%, transparent);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.cp-closed__ghost:hover {
  border-color: color-mix(in srgb, var(--cp-text) 60%, transparent);
}
/* …and the studio starts below it rather than under it. The studio scales
   its own chrome, so this margin buys roughly double its value in clearance —
   20px lands the header a comfortable step under the ribbon, measured. */
.cp-studio-shift { margin-top: 20px; }
/**
 * A DEMO NEEDS MORE, not less.
 *
 * With a ribbon above it, 20px was enough — the ribbon itself held the top
 * band open. A demo has no ribbon, and the studio's own chrome is absolutely
 * positioned at top:5 with its labels hanging ~60px below that, so the
 * SAVE / LOAD / LIBRARY captions landed on the control row beneath them.
 * This reserves the band that the ribbon used to occupy.
 */
/* Reverted to the plain shift: moving this container moves the header AND
   the row beneath it together, so it can never separate two elements that
   are already colliding INSIDE the studio's own chrome. See the note on
   .cp-studio-shift--demo's removal in the report. */
.cp-studio-shift--demo { margin-top: 20px; }
@media (max-width: 640px) { .cp-studio-shift { margin-top: 16px; } }
/* Sheets: branded name prompt / save / expiry — z 60, above the global 25. */
.cp-sheet-veil {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55); padding: 20px;
}
.cp-sheet {
  width: min(430px, 94vw); border-radius: 10px; padding: 26px;
  background: var(--cp-ground); color: var(--cp-text);
  border: 1px solid color-mix(in srgb, var(--cp-text) 16%, transparent);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.cp-sheet h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 26px; letter-spacing: 0.03em; text-transform: uppercase;
  margin: 0 0 8px;
}
.cp-sheet p { margin: 0 0 16px; font-size: 15px; opacity: 0.85; line-height: 1.45; }
.cp-sheet label { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; margin-bottom: 6px; }
.cp-sheet input[type='text'] {
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px;
  border-radius: 6px; font-size: 16px;
  background: var(--cp-panel); color: var(--cp-text);
  border: 1px solid color-mix(in srgb, var(--cp-text) 22%, transparent);
}
.cp-sheet__actions { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }
.cp-sheet__primary {
  min-height: 44px; padding: 10px 22px; border: none; border-radius: 6px; cursor: pointer;
  background: var(--cp-accent); color: var(--cp-on-accent);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.cp-sheet__primary:hover { background: var(--cp-accent-2); }
.cp-sheet__ghost {
  min-height: 44px; padding: 10px 16px; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--cp-text);
  border: 1px solid color-mix(in srgb, var(--cp-text) 30%, transparent);
  font-size: 14px;
}
/* Phone: the ribbon compresses; label stays, session name yields. */
@media (max-width: 640px) {
  .cp-ribbon__session { display: none; }
  .cp-ribbon { gap: 8px; padding: 6px 10px; }
}
/* ---- ribbon: the way home ------------------------------------------------
   The label moved to the desk (under the signature). What sits top-left now
   is the door out — logo and house, both going home. */
.cp-ribbon__home {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--cp-text); text-decoration: none; opacity: 0.9;
}
.cp-ribbon__home:hover { opacity: 1; }
.cp-ribbon__wordmark {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px; letter-spacing: 0.05em; text-transform: lowercase; font-weight: 500;
}
.cp-ribbon__wordmark b { font-weight: 700; margin-left: 3px; }
.cp-ribbon__homeicon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  color: var(--cp-text); opacity: 0.55; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--cp-text) 18%, transparent);
}
.cp-ribbon__homeicon:hover {
  opacity: 1; border-color: var(--cp-accent); color: var(--cp-accent);
}
@media (max-width: 640px) { .cp-ribbon__wordmark { display: none; } }
/* Panels that must match the tape wall's height. The remix deck sets its
   height inline from a measurement, so this needs !important to win — the
   point is that every panel in the co-producer board is the same window. */
.cp-shelf-height { height: var(--cp-shelf-h, 520px) !important; }
/* ---------------------------------------------------------------------------
   THE INVESTOR DEMO.

   The number is the reason someone bothers to make an account, so it is said
   on the door rather than discovered inside — and confirmed once when it
   lands, then it gets out of the way of the desk.
   --------------------------------------------------------------------------- */
.cp-demofoot {
  color: var(--cp-accent, #f0b46a);
  opacity: 0.95;
  font-weight: 600;
}
.cp-demochip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  line-height: 34px;
  font-size: 12.5px;
  color: #8fd9a8;
  background: #13210d;
  border: 1px solid #2e4a37;
  white-space: nowrap;
  animation: cp-demochip-in 0.4s ease both;
}
.cp-demochip b { font-size: 14px; font-weight: 700; }
@keyframes cp-demochip-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cp-demochip { animation: none; } }