/* Shared workflow quicklooks player. Look skins use .ql--* modifiers. */
.ql { margin: 0; --ql-text: inherit; }
.ql [role="tab"]::after,
.ql [role="tab"][aria-selected="true"]::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}
.ql__inner { width: var(--wrap, min(72rem, calc(100% - 2.5rem))); margin-inline: auto; }
.ql__head { max-width: 42rem; margin-bottom: 1.6rem; }
.ql__kicker {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ql__title { margin: 0; text-wrap: balance; }
.ql__lede { margin: 0.7rem 0 0; max-width: 40rem; }
.ql__mods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}
.ql__mods button {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--ql-line, rgba(0,0,0,.14));
  background: var(--ql-chip, transparent);
  color: inherit;
  font: inherit;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  line-height: 1.2;
}
.ql__mods button.is-on,
.ql__mods button[aria-selected="true"] {
  background: var(--ql-accent, currentColor);
  color: var(--ql-accent-ink, #fff);
  border-color: var(--ql-accent, currentColor);
}
.ql__mods button:focus-visible,
.ql__chips button:focus-visible,
.ql__sound:focus-visible,
.ql__play:focus-visible {
  outline: 2px solid var(--ql-focus, var(--ql-accent, #0c497a));
  outline-offset: 3px;
}
.ql__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0 0 1rem;
}
@media (min-width: 720px) {
  .ql__chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ql__chips button,
.ql__chips button.is-on,
.ql__chips button[aria-selected="true"] {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--ql-line, rgba(0,0,0,.14));
  background: var(--ql-chip, #fff);
  color: var(--ql-text, inherit);
  font: inherit;
  padding: 0;
  border-radius: var(--ql-radius, 12px);
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-width: 0;
  white-space: normal;
  position: relative;
}
.ql__chips button img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: #111;
}
.ql__chip-l {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.45rem 0.55rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  color: inherit;
}
.ql__chip-t { min-width: 0; overflow-wrap: anywhere; }
.ql__time {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  opacity: 0.7;
  flex: none;
}
.ql__chips button.is-on,
.ql__chips button[aria-selected="true"] {
  border-color: var(--ql-accent, currentColor);
  box-shadow: 0 0 0 2px var(--ql-accent, currentColor);
}
.ql__stage {
  margin: 0;
  border: 1px solid var(--ql-line, rgba(0,0,0,.14));
  border-radius: var(--ql-radius, 16px);
  background: var(--ql-frame, #fff);
  box-shadow: var(--ql-shadow, none);
  overflow: hidden;
  min-width: 0;
}
.ql__chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: var(--ql-chrome, #111);
  color: var(--ql-chrome-ink, #fff);
  font-size: 0.78rem;
  font-weight: 600;
  min-width: 0;
}
.ql__dots { display: flex; gap: 0.28rem; flex: none; }
.ql__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ql-dot, #888);
  display: block;
}
.ql__dots i:nth-child(1) { background: var(--ql-dot-1, #e55f00); }
.ql__dots i:nth-child(2) { background: var(--ql-dot-2, #f5bb61); }
.ql__dots i:nth-child(3) { background: var(--ql-dot-3, #65bd7d); }
.ql__chrome-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ql__sound {
  appearance: none;
  cursor: pointer;
  flex: none;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  line-height: 1;
}
.ql__screen {
  position: relative;
  background: #0b0d10;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.ql__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #0b0d10;
  vertical-align: middle;
}
.ql__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8,10,14,.28);
  cursor: pointer;
  color: #fff;
}
.ql__play[hidden] { display: none !important; }
.ql__play span {
  width: 4.1rem;
  height: 4.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ql-accent, #0c497a);
  color: var(--ql-accent-ink, #fff);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.ql__play svg { width: 1.4rem; height: 1.4rem; margin-left: 3px; fill: currentColor; }
.ql__cap {
  padding: 0.95rem 1.05rem 1.1rem;
  display: grid;
  gap: 0.25rem;
}
.ql__mod {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ql-muted, inherit);
}
.ql__name { margin: 0; font-size: 1.2rem; line-height: 1.2; }
.ql__cap p { margin: 0; color: var(--ql-muted, inherit); }
.ql, .ql * { box-sizing: border-box; }
.ql { max-width: 100%; overflow-x: clip; }

/* NLE */
.ql--nle { --ql-text: var(--ink); --ql-accent: var(--navy); --ql-accent-ink: #fff; --ql-line: var(--edge); --ql-frame: #fff; --ql-chrome: var(--navy); --ql-chrome-ink: #fff; --ql-muted: var(--body); --ql-radius: 16px; --ql-shadow: 0 2px 16px rgba(12,73,122,.08); --ql-chip: #fff; --ql-focus: var(--link); padding: 4.5rem 0; }
.ql--nle .ql__title { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--navy); }
.ql--nle .ql__lede { color: var(--body); }
.ql--nle .ql__kicker { color: var(--primary); font-family: var(--ui); }
.ql--nle .ql__name { font-family: var(--display); font-weight: 700; color: var(--navy); }
html[data-theme="dark"] .ql--nle { --ql-text: #E8F3FA; --ql-frame: #15222c; --ql-chip: #15222c; --ql-line: rgba(232,243,250,.14); --ql-shadow: none; --ql-muted: #9aa8b2; }
html[data-theme="dark"] .ql--nle .ql__title,
html[data-theme="dark"] .ql--nle .ql__name { color: #E8F3FA; }
html[data-theme="dark"] .ql--nle .ql__mods button,
html[data-theme="dark"] .ql--nle .ql__chips button { color: #E8F3FA; }

/* Cyan Signal */
.ql--cyan { --ql-text: var(--ink); --ql-accent: var(--ink); --ql-accent-ink: var(--lemon); --ql-line: var(--ink); --ql-frame: var(--cloud); --ql-chrome: var(--ink); --ql-chrome-ink: #fff; --ql-muted: var(--slate); --ql-radius: 1.15rem; --ql-shadow: 5px 5px 0 var(--ink); --ql-chip: var(--cloud); --ql-focus: var(--ink); margin-top: 1.5rem; }
.ql--cyan .ql__mods button,
.ql--cyan .ql__chips button,
.ql--cyan .ql__sound { border-width: 3px; font-family: var(--font-body); }
.ql--cyan .ql__mods button { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.ql--cyan .ql__name { font-family: var(--font-display); text-transform: uppercase; }
.ql--cyan .ql__mod { font-family: var(--font-mono); }
.ql--cyan .ql__dots i { border: 2px solid var(--ink); }
html[data-theme="dark"] .ql--cyan { --ql-accent-ink: #FFE45C; }

/* Folio */
.ql--folio { --ql-text: var(--ink); --ql-accent: var(--ink); --ql-accent-ink: #fff; --ql-line: var(--edge); --ql-frame: #fff; --ql-chrome: var(--ink); --ql-chrome-ink: #fff; --ql-muted: var(--muted); --ql-radius: 12px; --ql-shadow: 0 16px 40px rgba(17,17,17,.08); --ql-chip: #fff; --ql-focus: var(--coral); padding: 4.75rem 0; background: var(--paper); color: var(--ink); }
.ql--folio .ql__title { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.15rem); letter-spacing: -0.04em; line-height: 1.08; }
.ql--folio .ql__title em { font-style: italic; }
.ql--folio .ql__lede { color: var(--muted); }
.ql--folio .ql__kicker { letter-spacing: 0.12em; color: var(--muted); }
.ql--folio .ql__name { font-family: var(--display); font-weight: 400; font-size: 1.45rem; letter-spacing: -0.03em; }
html[data-theme="dark"] .ql--folio { background: #161513; color: #F6F5F3; --ql-text: #F6F5F3; --ql-frame: #1e1c19; --ql-chip: #1e1c19; --ql-line: rgba(246,245,243,.14); --ql-muted: #c4bfb6; --ql-chrome: #0e0d0b; --ql-accent-ink: #111; --ql-accent: #F6F5F3; }
html[data-theme="dark"] .ql--folio .ql__title { color: #F6F5F3; }

/* Marquee */
.ql--marquee { --ql-text: var(--ink); --ql-accent: var(--ink); --ql-accent-ink: var(--yellow); --ql-line: rgba(20,20,20,.16); --ql-frame: #fff; --ql-chrome: var(--charcoal); --ql-chrome-ink: #fff; --ql-muted: var(--muted); --ql-radius: 20px; --ql-shadow: 0 18px 50px rgba(20,20,20,.1); --ql-chip: #fff; --ql-focus: var(--coral); padding: 4.5rem 0; background: var(--paper); color: var(--ink); }
.ql--marquee .ql__title { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.04em; line-height: 0.95; }
.ql--marquee .ql__stage { border: 3px solid var(--ink); }
.ql--marquee .ql__mods button { border-width: 2px; border-color: var(--ink); }
.ql--marquee .ql__mods button.is-on { background: var(--yellow); color: var(--ink); }
.ql--marquee .ql__chips button.is-on { box-shadow: 4px 4px 0 var(--ink); }
.ql--marquee .ql__name { font-family: var(--display); font-weight: 600; }
html[data-theme="dark"] .ql--marquee { background: #121212; color: #f3f0e8; --ql-text: #f3f0e8; --ql-frame: #1c1c1c; --ql-chip: #1c1c1c; --ql-line: rgba(243,240,232,.16); --ql-muted: #bdb8ae; --ql-accent-ink: #141414; }
html[data-theme="dark"] .ql--marquee .ql__mods button.is-on { color: #141414; }

/* Exchange Floor */
.ql--exchange { --ql-text: var(--ink); --ql-accent: var(--teal); --ql-accent-ink: #fff; --ql-line: rgba(20,29,35,.12); --ql-frame: #fff; --ql-chrome: var(--panel); --ql-chrome-ink: #fff; --ql-muted: var(--muted); --ql-radius: 1.5rem; --ql-shadow: 0 18px 40px rgba(20,29,35,.08); --ql-chip: #fff; --ql-focus: var(--teal); padding: var(--space) 0; background: var(--slate); color: var(--ink); }
.ql--exchange .ql__kicker { font-family: var(--font-mono); }
.ql--exchange .ql__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.5vw, 2.7rem); }
.ql--exchange .ql__name { font-family: var(--font-display); }
.ql--exchange .ql__mods button { font-family: var(--font-display); }
html[data-theme="dark"] .ql--exchange { background: #151c21; color: #FBF8F3; --ql-text: #FBF8F3; --ql-frame: #1E2A32; --ql-chip: #1E2A32; --ql-line: rgba(251,248,243,.12); --ql-muted: #c5d0d6; --ql-accent: var(--cyan); --ql-accent-ink: #141D23; }

/* Main Stage */
.ql--stage { --ql-text: inherit; --ql-accent: var(--gold); --ql-accent-ink: #1A1406; --ql-line: color-mix(in srgb, var(--gold) 45%, transparent); --ql-frame: var(--bg-2, #10131A); --ql-chrome: #07080C; --ql-chrome-ink: #fff; --ql-muted: color-mix(in srgb, var(--gold, #FFD24A) 15%, #c9c3b4); --ql-radius: 4px; --ql-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent), 0 0 28px color-mix(in srgb, var(--gold) 22%, transparent); --ql-chip: var(--bg-2, #10131A); --ql-focus: var(--gold); padding: 4.5rem 0; color: inherit; }
.ql--stage .ql__kicker { font-family: "Share Tech Mono", ui-monospace, monospace; color: var(--gold); }
.ql--stage .ql__title { font-family: Oswald, "Arial Narrow", sans-serif; font-weight: 600; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: 0.02em; }
.ql--stage .ql__name { font-family: Oswald, sans-serif; text-transform: uppercase; }
.ql--stage .ql__mods button { font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 2px; }
.ql--stage .ql__chips button { border-radius: 2px; }
[data-theme="light"] .ql--stage { --ql-muted: #5a5346; --ql-chrome: #2a2418; }
@media (prefers-reduced-motion: reduce) {
  .ql--stage .ql__stage { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
}

/* Arcade */
.ql--arcade { --ql-text: inherit; --ql-accent: var(--cyan-bright); --ql-accent-ink: #041318; --ql-line: var(--line, rgba(34,211,238,.25)); --ql-frame: var(--panel, #121820); --ql-chrome: #0b1116; --ql-chrome-ink: #e8f3fa; --ql-muted: #a9b6c0; --ql-radius: 1rem; --ql-shadow: var(--shadow, 0 12px 32px rgba(0,0,0,.28)); --ql-chip: var(--panel, #121820); --ql-focus: var(--gold-bright); padding: var(--space) 0; }
.ql--arcade .ql__kicker { font-family: var(--font-display); letter-spacing: 0.14em; color: var(--cyan-bright); }
.ql--arcade .ql__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.ql--arcade .ql__name { font-family: var(--font-display); }
.ql--arcade .ql__mods button { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
.ql--arcade .ql__time { font-family: var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
html[data-theme="light"] .ql--arcade { --ql-text: var(--ink, #141D23); --ql-muted: #3a4650; --ql-chrome: #17303a; --ql-accent-ink: #041318; }

@media (prefers-reduced-motion: reduce) {
  .ql__video { scroll-margin: 0; }
}