/* =====================================================================
   ATELIER — a Video.js v10 skin by Dark Honey Studio
   The player as a couture tailor's workbench:
   measuring-tape timeline · pin playhead · chalk-line buffer ·
   spool-of-thread volume · sewn horn buttons · woven label.
   Public properties: --media-accent-color (thread/clay),
   --media-border-radius, --media-font-family.
   ===================================================================== */

.at-player { display: block; container: atelier / inline-size; }

.at {
  --at-ivory: #f4efe6;
  --at-tape: #ece2cc;
  --at-tape-ink: #2b2622;
  --at-charcoal: #2a2826;
  --at-ink: #141312;
  --at-sage: #76836a;
  --at-sage-deep: #5d6955;
  --at-clay: var(--media-accent-color, #b8775a);
  --at-clay-deep: #8e5338;
  --at-brass-1: #e8cf8f;
  --at-brass-2: #a8833f;
  --at-ui: var(--media-font-family, "Inter", ui-sans-serif, system-ui, sans-serif);
  --at-serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --at-radius: var(--media-border-radius, 18px);
  --at-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --at-btn: 44px;
  --at-tape-h: 24px;

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--at-ink);
  color: var(--at-ivory);
  font-family: var(--at-ui);
  border-radius: var(--at-radius);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.at:fullscreen { border-radius: 0; aspect-ratio: auto; }
.at mux-video, .at video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

.at-poster { position: absolute; inset: 0; z-index: 1; transition: opacity 500ms var(--at-ease); }
.at-poster img, .at-poster::part(image) { width: 100%; height: 100%; object-fit: cover; }
.at-poster:not([data-visible]) { opacity: 0; pointer-events: none; }

/* ---------- woven label (title) ---------------------------------------- */
.at-label {
  position: absolute;
  top: clamp(12px, 3cqi, 22px);
  left: clamp(12px, 3cqi, 22px);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 22px 8px;
  color: var(--at-ivory);
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.08) 0 1px, transparent 1px 2.5px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.10) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #7d8a71, var(--at-sage-deep));
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.15) inset, 0 -1px 0 rgb(0 0 0 / 0.25) inset, 0 6px 14px -4px rgb(0 0 0 / 0.55);
  rotate: -0.6deg;
  pointer-events: none;
  transition: opacity 400ms var(--at-ease), translate 400ms var(--at-ease);
}
/* folded, stitched ends */
.at-label::before, .at-label::after {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 0;
  border-left: 1.5px dashed rgb(244 239 230 / 0.7);
}
.at-label::before { left: 7px; }
.at-label::after { right: 7px; }
.at-label__brand { font: 700 9.5px/1 var(--at-ui); letter-spacing: 0.3em; text-transform: uppercase; }
.at-label__rule { width: 14px; height: 1px; background: rgb(244 239 230 / 0.6); }
.at-label__name { font: italic 600 19px/1 var(--at-serif); letter-spacing: 0.01em; }
.at:has(.at-bigbtn[data-started]):has(.at-chrome:not([data-visible])) .at-label { opacity: 0; translate: 0 -6px; }

/* ---------- big horn button -------------------------------------------- */
.at-bigbtn {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 14px;
  translate: -50% -50%;
  cursor: pointer;
  border-radius: 50%;
  transition: opacity 400ms var(--at-ease), scale 400ms var(--at-ease), visibility 0s;
}
.at-bigbtn__face {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(84px, 14cqi, 116px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 58%, rgb(0 0 0 / 0.10) 60%, transparent 63%),
    radial-gradient(circle at 34% 28%, #fffaf0 0, #efe4cd 30%, #d9c7a4 70%, #b9a27a 100%);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.7) inset,
    0 -3px 6px rgb(110 80 40 / 0.35) inset,
    0 14px 26px -8px rgb(0 0 0 / 0.65),
    0 2px 4px rgb(0 0 0 / 0.35);
  transition: scale 300ms var(--at-ease), box-shadow 300ms;
}
/* the sewn ring that appears on hover/focus */
.at-bigbtn__face::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px dashed var(--at-ivory);
  opacity: 0;
  transition: opacity 250ms;
}
.at-bigbtn:hover .at-bigbtn__face, .at-bigbtn:focus-visible .at-bigbtn__face { scale: 1.04; }
.at-bigbtn:hover .at-bigbtn__face::after, .at-bigbtn:focus-visible .at-bigbtn__face::after { opacity: 1; animation: at-sew 14s linear infinite; }
.at-bigbtn:focus-visible { outline: none; }
.at-bigbtn .at-hole { width: 7%; height: 7%; }
.at-bigbtn .at-hole:nth-child(1) { left: 22%; top: 22%; }
.at-bigbtn .at-hole:nth-child(2) { right: 22%; top: 22%; left: auto; }
.at-bigbtn .at-hole:nth-child(3) { left: 22%; bottom: 22%; top: auto; }
.at-bigbtn .at-hole:nth-child(4) { right: 22%; bottom: 22%; left: auto; top: auto; }
.at-bigbtn .at-stitch-ico { width: 50%; height: 50%; stroke: var(--at-clay-deep); stroke-width: 1.9; stroke-dasharray: 2.1 1.5; }
.at-bigbtn .at-ico-play { translate: 5% 0; }
.at-bigbtn .at-ico-replay { display: none; }
.at-bigbtn[data-ended] .at-ico-replay { display: block; }
.at-bigbtn[data-ended] .at-ico-play { display: none; }
.at-bigbtn__caption {
  padding: 6px 12px 5px;
  font: 600 10px/1 var(--at-ui);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--at-ivory);
  background: rgb(20 19 18 / 0.62);
  border-radius: 99px;
  box-shadow: 0 0 0 1px rgb(244 239 230 / 0.18) inset;
}
.at-bigbtn[data-ended] .at-bigbtn__caption { font-size: 0; }
.at-bigbtn[data-ended] .at-bigbtn__caption::before { content: "Fit again"; font-size: 10px; }
.at-bigbtn[data-started]:not([data-ended]) {
  opacity: 0; scale: 0.92; pointer-events: none; visibility: hidden;
  transition: opacity 400ms var(--at-ease), scale 400ms var(--at-ease), visibility 0s linear 400ms;
}
@keyframes at-sew { to { rotate: 360deg; } }

/* holes (shared) */
.at-hole {
  position: absolute;
  width: 3.4px;
  height: 3.4px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #0c0b0a 0 55%, rgb(0 0 0 / 0.4) 75%, transparent 80%);
  box-shadow: 0 0.6px 0 rgb(255 255 255 / 0.28);
}

/* ---------- buffering: a thread loop ----------------------------------- */
.at-buffering { position: absolute; top: 50%; left: 50%; z-index: 5; width: 52px; height: 52px; translate: -50% -50%; pointer-events: none; }
.at-buffering:not([data-visible]) { display: none; }
.at-buffering svg { width: 100%; height: 100%; fill: none; stroke: var(--at-ivory); stroke-width: 2; stroke-dasharray: 5 4; stroke-linecap: round; animation: at-sew 3s linear infinite; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.6)); }

/* ---------- controls visibility ---------------------------------------- */
.at-controls { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.at-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(20 19 18 / 0.55), transparent 38%), linear-gradient(to bottom, rgb(20 19 18 / 0.35), transparent 25%);
  transition: opacity 450ms var(--at-ease);
}
.at-chrome { position: absolute; inset: 0; pointer-events: none; transition: opacity 450ms var(--at-ease); }
.at-scrim:not([data-visible]),
.at-chrome:not([data-visible]):not(:has(:focus-visible)) { opacity: 0; }
.at-chrome:not([data-visible]):not(:has(:focus-visible)) .at-band { translate: 0 14px; }
.at-chrome:not([data-visible]):not(:has(:focus-visible)) * { pointer-events: none !important; }
.at:has(.at-bigbtn:not([data-started])) .at-band { opacity: 0; translate: 0 14px; pointer-events: none; }
.at:has(.at-bigbtn:not([data-started])) .at-band * { pointer-events: none; }

/* ---------- the band: a strip of charcoal wool, top-stitched ------------ */
.at-band {
  position: absolute;
  left: clamp(8px, 2.2cqi, 18px);
  right: clamp(8px, 2.2cqi, 18px);
  bottom: clamp(8px, 2.2cqi, 18px);
  display: grid;
  gap: 2px;
  padding: 12px 16px 6px;
  border-radius: 14px;
  pointer-events: auto;
  background-color: var(--at-charcoal);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgb(0 0 0 / 0.22) 0 1px, transparent 1px 3px);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.07) inset,
    0 -2px 0 rgb(0 0 0 / 0.3) inset,
    0 18px 34px -14px rgb(0 0 0 / 0.75),
    0 3px 8px rgb(0 0 0 / 0.35);
  transition: translate 450ms var(--at-ease), opacity 450ms var(--at-ease);
}
.at-band::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px dashed rgb(236 226 204 / 0.42);
  border-radius: 10px;
  pointer-events: none;
}

/* ---------- measuring tape = time slider -------------------------------- */
.at-tape {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  margin: -6px 2px 0 8px;
  cursor: pointer;
  touch-action: none;
  outline: none;
  --at-units: 36;
}
.at-tape__body {
  position: relative;
  display: block;
  width: 100%;
  height: var(--at-tape-h);
  border-radius: 1.5px;
  background-color: var(--at-tape);
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 0.55), transparent 30%, transparent 70%, rgb(80 60 30 / 0.12)),
    linear-gradient(90deg, rgb(43 38 34 / 0.85) 0 1px, transparent 1px),
    linear-gradient(90deg, rgb(43 38 34 / 0.6) 0 1px, transparent 1px),
    linear-gradient(90deg, rgb(43 38 34 / 0.45) 0 1px, transparent 1px);
  background-size:
    100% 100%,
    calc(100% / var(--at-units)) 9px,
    calc(100% / var(--at-units) / 2) 6px,
    calc(100% / var(--at-units) / 10) 3.5px;
  background-repeat: no-repeat, repeat-x, repeat-x, repeat-x;
  background-position: 0 0, 0 0, 0 0, 0 0;
  box-shadow:
    0 0 0 0.5px rgb(60 45 25 / 0.45),
    0 1px 0 rgb(255 255 255 / 0.4) inset,
    0 3px 5px -1px rgb(0 0 0 / 0.55);
  transition: height 220ms var(--at-ease);
}
.at-tape__weave {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, rgb(90 70 40 / 0.05) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(0deg, rgb(90 70 40 / 0.06) 0 1px, transparent 1px 2px);
  mix-blend-mode: multiply;
}
/* printed bottom edge ticks (mirror) */
.at-tape__ticks { display: none;
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, rgb(43 38 34 / 0.55) 0 1px, transparent 1px);
  background-size: calc(100% / var(--at-units) / 2) 100%;
}
.at-tape__nums { position: absolute; inset: 0; pointer-events: none; }
.at-tape__nums span {
  position: absolute;
  top: 9px;
  translate: -50% 0;
  font: 700 8.5px/1 var(--at-ui);
  letter-spacing: -0.01em;
  color: var(--at-tape-ink);
  font-variant-numeric: tabular-nums;
}
.at-tape__nums span.ten { color: #a3402a; }
.at-tape__tip {
  position: absolute;
  left: -9px;
  top: -1px;
  bottom: -1px;
  width: 11px;
  border-radius: 2px 1px 1px 2px;
  background: linear-gradient(180deg, var(--at-brass-1), #c9a65c 45%, var(--at-brass-2));
  box-shadow: 0 0 0 0.5px rgb(70 50 10 / 0.6), 1px 0 0 rgb(255 240 200 / 0.6) inset, 0 2px 3px rgb(0 0 0 / 0.4);
}
.at-tape__tip::after { content: ""; position: absolute; left: 3px; top: 50%; width: 3px; height: 3px; translate: 0 -50%; border-radius: 50%; background: #6b5221; }

/* watched = sewn: sage wash + clay running stitch */
.at-sewn {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--media-slider-fill);
  background: linear-gradient(180deg, rgb(118 131 106 / 0.30), rgb(118 131 106 / 0.40));
  mix-blend-mode: multiply;
  border-radius: inherit;
}
.at-sewn::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 0;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--at-clay) 0 7px, transparent 7px 11px);
  filter: drop-shadow(0 0.6px 0 rgb(0 0 0 / 0.35));
  mix-blend-mode: normal;
}
.at-tape[data-dragging] .at-sewn { width: var(--media-slider-pointer); }

/* buffered = chalk line drawn on the cloth just below the tape */
.at-chalk {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: var(--media-slider-buffer);
  height: 3px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.0) 0 3px, rgb(255 255 255 / 0.35) 3px 4px),
    linear-gradient(180deg, rgb(225 232 240 / 0.15), rgb(225 232 240 / 0.75) 50%, rgb(225 232 240 / 0.2));
  filter: url(#at-chalk) blur(0.3px);
  opacity: 0.8;
}

/* hover: the tape lifts a touch */
.at-tape[data-interactive] .at-tape__body { height: calc(var(--at-tape-h) + 2px); }

/* playhead = pin with a glass head */
.at-pin {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--media-slider-fill);
  width: 22px;
  translate: -50% 0;
  display: block;
  border-radius: 12px;
  filter: drop-shadow(2px 3px 1.5px rgb(0 0 0 / 0.38));
  transition: filter 200ms;
}
.at-tape[data-dragging] .at-pin { left: var(--media-slider-pointer); filter: drop-shadow(4px 7px 3px rgb(0 0 0 / 0.32)); }
.at-pin__needle {
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 2px;
  width: 1.8px;
  translate: -50% 0;
  border-radius: 0 0 1px 1px;
  background: linear-gradient(90deg, #8d9196, #f3f5f7 45%, #6f7378);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
}
.at-pin__head {
  position: absolute;
  left: 50%;
  top: -3px;
  width: 17px;
  height: 17px;
  translate: -50% 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.95) 0 9%, rgb(255 255 255 / 0) 22%),
    radial-gradient(circle at 62% 76%, rgb(255 210 190 / 0.45) 0 12%, transparent 30%),
    radial-gradient(circle at 45% 40%, #d89176 0, var(--at-clay) 38%, var(--at-clay-deep) 72%, #4f2717 100%);
  box-shadow: 0 0 0 0.5px rgb(60 25 10 / 0.5);
  transition: scale 220ms var(--at-ease), translate 220ms var(--at-ease);
}
.at-tape[data-interactive] .at-pin__head { scale: 1.12; }
.at-tape[data-dragging] .at-pin__head { translate: -50% -3px; scale: 1.18; }
.at-pin:focus-visible { outline: 2px dashed var(--at-ivory); outline-offset: 2px; }

/* hover preview = pattern-paper swatch with pinked edge */
.at-swatch {
  position: absolute;
  bottom: calc(100% + 16px);
  left: clamp(86px, var(--media-slider-pointer), calc(100% - 86px)) !important;
  display: grid;
  width: 172px;
  padding: 8px 8px 14px;
  translate: -50% 8px;
  rotate: -1.2deg;
  color: var(--at-tape-ink);
  background-color: #f1ebdc;
  background-image:
    radial-gradient(circle, rgb(93 105 85 / 0.35) 0.7px, transparent 0.9px),
    linear-gradient(rgb(93 105 85 / 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgb(93 105 85 / 0.16) 1px, transparent 1px);
  background-size: 8px 8px, 24px 24px, 24px 24px;
  background-position: 4px 4px, 0 0, 0 0;
  --z: 5px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
  filter: drop-shadow(0 12px 14px rgb(0 0 0 / 0.45));
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms var(--at-ease), translate 200ms var(--at-ease);
}
.at-tape:is([data-pointing], [data-dragging]) .at-swatch { opacity: 1; translate: -50% 0; }
.at-swatch__pin {
  position: absolute; z-index: 2; top: 3px; left: 50%; width: 9px; height: 9px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0 10%, transparent 25%), radial-gradient(circle at 45% 40%, #9fae92, var(--at-sage) 45%, #3e4838);
  box-shadow: 1px 2px 2px rgb(0 0 0 / 0.35);
}
.at-swatch__frame { display: block; width: 156px; min-width: 156px; max-width: 156px; height: 88px; background: #2a2826; box-shadow: 0 0 0 1px rgb(43 38 34 / 0.35); }
.at-swatch__frame[data-hidden] { display: none; }
.at-swatch__row { display: flex; align-items: baseline; justify-content: space-between; padding: 7px 2px 0; border-top: 1.5px dashed rgb(93 105 85 / 0.55); margin-top: 7px; }
.at-swatch__mark { font: italic 600 15px/1 var(--at-serif); color: var(--at-sage-deep); }
.at-swatch__time { font: 700 12px/1 var(--at-ui); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--at-clay-deep); }

/* ---------- control row ----------------------------------------------- */
.at-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.at-cluster { display: flex; align-items: center; gap: 2px; min-width: 0; }
.at-cluster--end { justify-content: flex-end; }

/* sewn horn buttons */
.at-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--at-btn);
  height: var(--at-btn);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--at-ivory);
  cursor: pointer;
}
.at-btn[data-hidden] { display: none; }
.at-btn[data-disabled] { opacity: 0.45; cursor: default; }
.at-disc {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 62%, rgb(0 0 0 / 0.25) 64%, transparent 70%),
    radial-gradient(circle at 34% 28%, #57514b 0, #3a3531 45%, #26221f 100%);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.13) inset,
    0 -2px 3px rgb(0 0 0 / 0.5) inset,
    0 2px 3px rgb(0 0 0 / 0.5);
  transition: scale 180ms var(--at-ease), box-shadow 180ms;
}
.at-disc .at-hole:nth-child(1) { left: 17%; top: 17%; }
.at-disc .at-hole:nth-child(2) { right: 17%; top: 17%; }
.at-disc .at-hole:nth-child(3) { left: 17%; bottom: 17%; }
.at-disc .at-hole:nth-child(4) { right: 17%; bottom: 17%; }
/* stitched ring on hover */
.at-btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 1.5px dashed var(--at-clay);
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
}
.at-btn:hover::after { opacity: 1; animation: at-sew 10s linear infinite; }
.at-btn:active .at-disc { scale: 0.93; box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 2px 4px rgb(0 0 0 / 0.6) inset; }
.at-btn:focus-visible { outline: none; }
.at-btn:focus-visible::after { opacity: 1; inset: -1px; border: 2px dashed var(--at-ivory); }

.at-ico {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.at-ico text { stroke: none; fill: currentColor; font: 700 5.4px var(--at-ui); }
.at-stitch-ico { fill: none; stroke-dasharray: 2.3 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* primary: ivory horn with clay stitched icon */
.at-btn--play { margin-right: 4px; }
.at-btn--play .at-disc {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 62%, rgb(110 80 40 / 0.18) 64%, transparent 70%),
    radial-gradient(circle at 34% 28%, #fffaf0 0, #ece0c7 40%, #c8b38c 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.8) inset, 0 -2px 3px rgb(110 80 40 / 0.35) inset, 0 2px 4px rgb(0 0 0 / 0.55);
}
.at-btn--play .at-hole { background: radial-gradient(circle at 40% 35%, #5a4630 0 55%, transparent 80%); box-shadow: 0 0.6px 0 rgb(255 255 255 / 0.7); }
.at-btn--play .at-ico { stroke: var(--at-clay-deep); stroke-width: 2.1; }
.at-btn--play .at-ico-play { translate: 1px 0; }
.at-btn--play .at-ico-pause, .at-btn--play .at-ico-replay { display: none; }
.at-btn--play:not([data-paused]) .at-ico-play { display: none; }
.at-btn--play:not([data-paused]) .at-ico-pause { display: block; }
.at-btn--play[data-ended] .at-ico-play, .at-btn--play[data-ended] .at-ico-pause { display: none; }
.at-btn--play[data-ended] .at-ico-replay { display: block; }

.at-btn--mute .at-ico-muted { display: none; }
.at-btn--mute:is([data-muted], [data-volume-level="off"]) .at-ico-vol { display: none; }
.at-btn--mute:is([data-muted], [data-volume-level="off"]) .at-ico-muted { display: block; }
.at-btn--mute[data-volume-level="low"] .w3 { opacity: 0.25; }

.at-btn--fs .at-ico-exit { display: none; }
.at-btn--fs[data-fullscreen] .at-ico-exit { display: block; }
.at-btn--fs[data-fullscreen] .at-ico-enter { display: none; }

.at-btn--rate::before {
  content: attr(data-rate) "\00D7";
  position: relative;
  z-index: 1;
  font: 700 11.5px/1 var(--at-ui);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* time, embroidered in ivory */
.at-time {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: 10px;
  font: 600 13px/1 var(--at-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.at-time__sep { font: italic 600 16px/1 var(--at-serif); color: #cdbfa3; }
.at-time__total { color: rgb(244 239 230 / 0.72); }

/* ---------- spool of thread = volume ----------------------------------- */
.at-volume { display: flex; align-items: center; }
.at-spool {
  position: relative;
  display: flex;
  align-items: center;
  width: 78px;
  height: var(--at-btn);
  margin: 0 12px 0 34px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.at-spool[data-hidden] { display: none; }
.at-spool__reel {
  position: absolute;
  left: -30px;
  top: 50%;
  display: grid;
  grid-template-rows: 4px 22px 4px;
  justify-items: center;
  width: 24px;
  translate: 0 -50%;
  pointer-events: none;
  filter: drop-shadow(1px 2px 1.5px rgb(0 0 0 / 0.5));
}
.at-spool__flange {
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #d7b98a, #a77c4a 60%, #7a5530);
  box-shadow: 0 0.5px 0 rgb(255 240 210 / 0.6) inset;
}
.at-spool__core {
  position: relative;
  width: 24px;
  height: 22px;
  display: grid;
  place-items: center;
}
.at-spool__core::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 7px; translate: -50% 0; background: linear-gradient(90deg, #8a6238, #c99f6a 50%, #7a5530); }
.at-spool__thread {
  position: relative;
  height: 100%;
  width: clamp(7px, calc(var(--media-slider-fill, 70%) * 0.95), 22.5px);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.35), transparent 30%, rgb(255 255 255 / 0.18) 50%, transparent 70%, rgb(0 0 0 / 0.35)),
    repeating-linear-gradient(-8deg, var(--at-clay) 0 1.3px, var(--at-clay-deep) 1.3px 2.2px);
  transition: width 120ms linear;
}
.at-spool__track {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgb(236 226 204 / 0.5) 0 2px, transparent 2px 5px);
}
.at-spool__run {
  position: absolute;
  inset-block: -0.5px;
  left: -10px;
  width: calc(var(--media-slider-fill) + 10px);
  border-radius: 2px;
  background: repeating-linear-gradient(110deg, var(--at-clay) 0 2px, #d79a7e 2px 3px, var(--at-clay-deep) 3px 4.5px);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.4);
}
.at-spool__needle {
  position: absolute;
  top: 50%;
  left: var(--media-slider-fill);
  width: 20px;
  height: 5px;
  translate: -30% -50%;
  rotate: -18deg;
  border-radius: 3px 1px 1px 3px / 3px 50% 50% 3px;
  background:
    radial-gradient(ellipse 3px 1.2px at 5px 50%, #1d1c1b 0 90%, transparent 100%),
    linear-gradient(180deg, #f2f4f6, #9ba0a6 60%, #6d7177);
  clip-path: polygon(0 0, 78% 20%, 100% 50%, 78% 80%, 0 100%);
  filter: drop-shadow(1px 1.5px 1px rgb(0 0 0 / 0.5));
  transition: scale 180ms var(--at-ease);
}
.at-spool[data-interactive] .at-spool__needle { scale: 1.15; }
.at-spool:focus-within .at-spool__needle, .at-spool__needle:focus-visible { outline: 2px dashed var(--at-ivory); outline-offset: 5px; clip-path: none; }

/* ---------- action flash ---------------------------------------------- */
.at-flash {
  position: absolute; top: 50%; left: 50%; z-index: 8; translate: -50% -50%;
  display: grid; place-items: center;
  min-width: 76px; height: 76px; padding: 0 14px;
  border-radius: 50%;
  color: var(--at-clay-deep);
  font: 700 15px/1 var(--at-ui);
  font-variant-numeric: tabular-nums;
  background: radial-gradient(circle at 34% 28%, #fffaf0, #ece0c7 40%, #c8b38c);
  box-shadow: 0 0 0 4px rgb(20 19 18 / 0.25), 0 12px 24px -8px rgb(0 0 0 / 0.6);
  pointer-events: none; opacity: 0;
  transition: opacity 200ms var(--at-ease), scale 200ms var(--at-ease);
}
.at-flash::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed rgb(142 83 56 / 0.6); }
.at-flash[data-open] { opacity: 1; }
.at-flash[data-starting-style] { opacity: 0; scale: 0.9; }
.at-flash[data-direction="backward"] { left: 22%; }
.at-flash[data-direction="forward"] { left: 78%; }
.at-flash--status { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- error ------------------------------------------------------ */
.at-error { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: rgb(20 19 18 / 0.94); }
.at-error:not([data-open]) { display: none; }
.at-error__title { font: italic 600 28px/1.1 var(--at-serif); }
.at-error__desc { font-size: 13px; line-height: 1.5; max-width: 44ch; color: rgb(244 239 230 / 0.75); }
.at-error__close { min-height: 44px; padding: 0 22px; border: 1.5px dashed var(--at-ivory); border-radius: 99px; background: transparent; color: var(--at-ivory); font: 600 11px var(--at-ui); letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; }
.at-error__close:focus-visible { outline: 2px solid var(--at-ivory); outline-offset: 3px; }

/* generic visible focus fallback */
.at :focus-visible { outline-color: var(--at-ivory); }

/* ---------- responsive ------------------------------------------------- */


/* =====================================================================
   POLISH PASS v2 — the whole player is the workbench.
   The picture is a panel sewn into a length of charcoal wool; the tape,
   spool and buttons live on the cloth below it and are always visible.
   ===================================================================== */
.at {
  --at-bench: 150px;
  --at-inset: 14px;
  --at-tape-h: 34px;
  --at-btn: 48px;
  aspect-ratio: auto;
  padding: var(--at-inset) var(--at-inset) var(--at-bench);
  background-color: var(--at-charcoal);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgb(0 0 0 / 0.24) 0 1px, transparent 1px 3px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 -3px 0 rgb(0 0 0 / 0.35) inset;
}
.at mux-video, .at video {
  position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 6px; overflow: hidden; background: var(--at-ink);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6), 0 2px 10px rgb(0 0 0 / 0.5);
}
.at:fullscreen { padding-bottom: var(--at-bench); }
.at:fullscreen mux-video { aspect-ratio: auto; height: 100%; }
/* top-stitch around the picture panel */
.at::before {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  top: 6px; left: 6px; right: 6px; bottom: calc(var(--at-bench) - 8px);
  border: 1.5px dashed rgb(236 226 204 / 0.45); border-radius: 11px;
}
.at-poster { inset: var(--at-inset) var(--at-inset) var(--at-bench); border-radius: 6px; overflow: hidden; }
.at-bigbtn { top: calc(50% - (var(--at-bench) - var(--at-inset)) / 2); }
.at-buffering, .at-flash { top: calc(50% - (var(--at-bench) - var(--at-inset)) / 2); }
.at-scrim { display: none; }

/* controls always on the bench */
.at-chrome, .at-chrome:not([data-visible]):not(:has(:focus-visible)) { opacity: 1; }
.at-chrome:not([data-visible]):not(:has(:focus-visible)) .at-band { translate: none; }
.at-chrome:not([data-visible]):not(:has(:focus-visible)) * { pointer-events: auto !important; }
.at:has(.at-bigbtn:not([data-started])) .at-band { opacity: 1; translate: none; pointer-events: auto; }
.at:has(.at-bigbtn:not([data-started])) .at-band * { pointer-events: auto; }
.at-band {
  left: 0; right: 0; bottom: 0; height: var(--at-bench);
  align-content: center; gap: 6px;
  padding: 10px 22px 10px;
  border-radius: 0; background: none; box-shadow: none;
}
.at-band::before { display: none; }

/* the label is sewn onto the bench, between the tools */
.at-row .at-label {
  position: relative; top: auto; left: auto; flex: none; z-index: 0;
  opacity: 1 !important; translate: none !important; rotate: -1deg;
}
.at > .at-label { display: none; }

/* larger tape */
.at-tape { height: 54px; margin: 0 4px 0 12px; }
.at-tape__body {
  background-size: 100% 100%, calc(100% / var(--at-units)) 13px, calc(100% / var(--at-units) / 2) 8px, calc(100% / var(--at-units) / 10) 4.5px;
}
.at-tape__nums span { top: 14px; font-size: 11.5px; }
.at-tape__tip { left: -12px; width: 14px; }
.at-sewn::after { bottom: 5px; height: 2.5px; background: repeating-linear-gradient(90deg, var(--at-clay) 0 9px, transparent 9px 14px); }
.at-chalk { top: calc(100% + 6px); height: 3.5px; }
.at-pin { width: 28px; }
.at-pin__head { width: 22px; height: 22px; top: -5px; }
.at-pin__needle { width: 2px; top: 8px; bottom: 0; }
.at-swatch { width: 212px; left: clamp(106px, var(--media-slider-pointer), calc(100% - 106px)) !important; bottom: calc(100% + 26px); }
.at-swatch__frame { width: 196px; min-width: 196px; max-width: 196px; height: 110px; }

/* simpler buttons: one clean horn disc; holes only on the primary button */
.at-btn:not(.at-btn--play) .at-hole { display: none; }
.at-disc {
  inset: 3px;
  background: radial-gradient(circle at 35% 28%, #4c4641 0, #34302c 55%, #282521 100%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.45), 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 3px 5px -1px rgb(0 0 0 / 0.55);
}
.at-ico { width: 24px; height: 24px; stroke-width: 1.8; }
.at-btn--play { --at-btn: 56px; }
.at-btn--play .at-ico { width: 26px; height: 26px; }
.at-btn--play .at-disc .at-hole { width: 4px; height: 4px; }
.at-btn--play .at-disc .at-hole:nth-child(1) { left: 20%; top: 20%; }
.at-btn--play .at-disc .at-hole:nth-child(2) { right: 20%; top: 20%; }
.at-btn--play .at-disc .at-hole:nth-child(3) { left: 20%; bottom: 20%; }
.at-btn--play .at-disc .at-hole:nth-child(4) { right: 20%; bottom: 20%; }
.at-btn--rate::before { font-size: 13px; }
.at-time { font-size: 15px; margin-left: 12px; }
.at-time__sep { font-size: 18px; }

/* larger spool */
.at-spool { width: 116px; margin: 0 14px 0 46px; height: var(--at-btn); }
.at-spool__reel { left: -42px; width: 34px; grid-template-rows: 6px 32px 6px; }
.at-spool__flange { width: 34px; height: 6px; border-radius: 3px; }
.at-spool__core { width: 34px; height: 32px; }
.at-spool__core::before { width: 10px; }
.at-spool__thread { width: clamp(10px, calc(var(--media-slider-fill, 70%) * 1.0), 31px); }
.at-spool__track { height: 2.5px; }
.at-spool__needle { width: 26px; height: 6px; }

/* ---------- responsive (container queries) ----------------------------- */
@container atelier (max-width: 900px) {
  .at-row .at-label { display: none; }
}
@container atelier (max-width: 720px) {
  .at { --at-bench: 140px; --at-inset: 10px; }
  .at-btn--pip, .at-btn--seek { display: none; }
  .at-band { padding: 8px 14px; }
}
@container atelier (max-width: 560px) {
  .at { --at-bench: 128px; --at-inset: 8px; --at-tape-h: 28px; --at-btn: 44px; }
  .at::before { top: 4px; left: 4px; right: 4px; bottom: calc(var(--at-bench) - 6px); border-radius: 9px; }
  .at-band { padding: 6px 8px; gap: 4px; }
  .at-btn--rate { display: none; }
  .at-btn--play { --at-btn: 48px; margin-right: 2px; }
  .at-tape { height: 46px; margin: 0 2px 0 12px; }
  .at-tape__nums span { top: 11px; font-size: 9.5px; }
  .at-tape__body { background-size: 100% 100%, calc(100% / var(--at-units)) 10px, calc(100% / var(--at-units) / 2) 6px, calc(100% / var(--at-units) / 10) 3.5px; }
  .at-time { margin-left: 4px; font-size: 13px; gap: 4px; }
  .at-time__sep { font-size: 15px; }
  .at-spool { width: 56px; margin: 0 8px 0 34px; }
  .at-spool__reel { left: -32px; width: 26px; grid-template-rows: 5px 26px 5px; }
  .at-spool__flange, .at-spool__core { width: 26px; }
  .at-spool__core { height: 26px; }
  .at-spool__thread { width: clamp(8px, calc(var(--media-slider-fill, 70%) * 1.0), 24px); }
  .at-pin__head { width: 19px; height: 19px; }
  .at-swatch { width: 140px; left: clamp(70px, var(--media-slider-pointer), calc(100% - 70px)) !important; }
  .at-swatch__frame { width: 124px; min-width: 124px; max-width: 124px; height: 70px; }
  .at-bigbtn__caption { display: none; }
}
@container atelier (max-width: 380px) {
  .at-cluster { gap: 0; }
  .at-time { font-size: 12px; }
  .at-spool { width: 48px; margin-right: 4px; }
}
@container atelier (max-width: 300px) {
  .at-time__sep, .at-time__total { display: none; }
}


/* =====================================================================
   DESIGN PASS v3 — tailor's chalk, a pincushion, and a snip.
   ===================================================================== */
/* buffered = a real stroke of warm tailor's chalk on the wool, ending in the chalk wedge */
.at-chalk {
  top: calc(100% + 7px); height: 6px; border-radius: 3px 1px 1px 3px;
  opacity: 1; overflow: visible;
  background:
    linear-gradient(180deg, rgb(255 246 222 / 0) 0, rgb(255 246 222 / 0.55) 30%, rgb(255 246 222 / 0.15) 60%, rgb(255 246 222 / 0) 100%),
    linear-gradient(90deg, #e6c98f, #eed7a6 40%, #e3c287);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='6'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.6 0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.6 2.3'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>") repeat-x 0 0 / 90px 100%;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='6'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.6 0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.6 2.3'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>") repeat-x 0 0 / 90px 100%;
  filter: url(#at-chalk) drop-shadow(0 0 2px rgb(236 210 160 / 0.35));
}
/* the chalk wedge rides at the end of the buffered stroke */
.at-chalk-wedge {
  position: absolute; z-index: 1; pointer-events: none;
  top: calc(50% + 34px / 2 + 3px); left: var(--media-slider-buffer, 0%);
  width: 20px; height: 13px; translate: -55% 0; rotate: -14deg;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  border-radius: 2px;
  background: linear-gradient(160deg, #f6e6bf, #e3c58a 55%, #b8955d);
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.5));
  transition: left 300ms linear;
}

/* the pincushion: secondary view controls grouped on one felt pad */
.at-cushion {
  position: relative; display: flex; align-items: center; gap: 0;
  height: calc(var(--at-btn) + 6px); padding: 0 6px; margin-left: 8px;
  border-radius: 999px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(255 210 180 / 0.20), transparent 60%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0) 0 calc(var(--at-btn) - 1px), rgb(60 24 12 / 0.55) calc(var(--at-btn) - 1px) var(--at-btn)),
    linear-gradient(180deg, #a5634a, #7e4330 60%, #5e2f20);
  background-position: 0 0, 6px 0, 0 0;
  box-shadow: 0 1px 0 rgb(255 220 200 / 0.25) inset, 0 -3px 6px rgb(0 0 0 / 0.35) inset, 0 6px 10px -4px rgb(0 0 0 / 0.7);
}
.at-cushion::before {
  content: ""; position: absolute; inset: 4px; border-radius: inherit; pointer-events: none;
  border: 1.5px dashed rgb(246 233 210 / 0.55);
}
/* two dressmaker's pins stuck into the cushion */
.at-cushion__pins { position: absolute; inset: 0; pointer-events: none; }
.at-cushion__pins::before, .at-cushion__pins::after {
  content: ""; position: absolute; top: -11px; width: 2px; height: 16px; border-radius: 1px;
  background: linear-gradient(90deg, #8d9399, #f2f4f6, #8d9399);
}
.at-cushion__pins::before { left: 24%; rotate: -16deg; box-shadow: 0 -1px 0 0 transparent; }
.at-cushion__pins::after { display: none; }
.at-cushion::after {
  content: ""; position: absolute; top: -15px; left: calc(24% - 5px); width: 9px; height: 9px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, #6f8a6a 40%, #3e5639);
}
.at-cushion .at-btn { --at-btn: 44px; }
.at-cushion .at-btn .at-disc { display: none; }
.at-cushion .at-ico { stroke: var(--at-ivory); }
.at-cushion .at-btn::after { border-color: var(--at-ivory); inset: 3px; }
.at-cushion .at-btn:hover { background: rgb(255 240 225 / 0.08); }
.at-cushion .at-btn--rate::before { font-size: 13px; color: var(--at-ivory); }
.at-cluster--end { gap: 6px; }

/* signature micro-interaction: a pair of shears snips where you cut into the tape */
.at-snip {
  position: absolute; z-index: 6; top: -36px; left: var(--at-snip-x, 50%);
  width: 36px; height: 50px; translate: -50% 0; pointer-events: none;
  margin-top: 0;
  opacity: 0;
}
.at-snip svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.55)); }
.at-snip path { fill: #f1f3f5; stroke: #50545a; stroke-width: 0.8; }
.at-snip .ring { fill: rgb(0 0 0 / 0.001); stroke: #c2705a; stroke-width: 3.4; }
.at-snip .arm { fill: none; stroke: #c2705a; stroke-width: 3; stroke-linecap: round; }
.at-snip .pivot { fill: #c9a247; }
.at-snip__blade { transform-box: view-box; transform-origin: 16px 22px; }
.at-snip.is-on { animation: at-snip-show 620ms var(--at-ease) both; }
.at-snip.is-on .at-snip__blade--l { animation: at-snip-l 620ms var(--at-ease) both; }
.at-snip.is-on .at-snip__blade--r { animation: at-snip-r 620ms var(--at-ease) both; }
@keyframes at-snip-show { 0% { opacity: 0; translate: -50% -6px; } 18% { opacity: 1; translate: -50% 0; } 75% { opacity: 1; } 100% { opacity: 0; translate: -50% -3px; } }
@keyframes at-snip-l { 0%, 20% { rotate: 16deg; } 46% { rotate: 0deg; } 60% { rotate: 4deg; } 100% { rotate: 0deg; } }
@keyframes at-snip-r { 0%, 20% { rotate: -16deg; } 46% { rotate: 0deg; } 60% { rotate: -4deg; } 100% { rotate: 0deg; } }
/* a tiny nick is left in the tape edge at the cut */
.at-snip::after {
  content: ""; position: absolute; left: 50%; top: calc(100% - 2px); width: 6px; height: 4px; translate: -50% 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%); background: rgb(0 0 0 / 0.55);
}

/* thread tension: while you pull the needle the thread runs taut and the spool unwinds */
.at-spool[data-dragging] .at-spool__run { inset-block: -1px; box-shadow: 0 0 6px rgb(194 112 86 / 0.7), 0 1px 1px rgb(0 0 0 / 0.4); }
.at-spool[data-dragging] .at-spool__thread { animation: at-unwind 420ms linear infinite; }
@keyframes at-unwind { to { background-position: 0 0, 0 -9px; } }

@container atelier (max-width: 720px) {
  .at-cushion { margin-left: 2px; padding: 0 4px; }
}
@container atelier (max-width: 560px) {
  .at-chalk { top: calc(100% + 5px); height: 4.5px; }
  .at-chalk-wedge { top: calc(50% + 28px / 2 + 1px); width: 15px; height: 10px; }
  .at-cushion { height: 48px; padding: 0 2px; }
  .at-cushion__pins::after, .at-cushion::after { display: none; }
  .at-cushion__pins::before { left: 40%; }
  .at-snip { top: -27px; width: 28px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .at-snip { display: none !important; }
}

/* ---------- reduced motion + forced colours ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .at *, .at *::before, .at *::after { animation: none !important; transition-duration: 1ms !important; }
  .at-band, .at-label { translate: none !important; }
}
@media (forced-colors: active) {
  .at-tape__body, .at-swatch, .at-disc { forced-color-adjust: none; }
  .at-btn:focus-visible { outline: 2px solid Highlight; }
  .at-scrim { display: none; }
}

/* the live-region announcer stays for screen readers only */
media-status-announcer {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}