/* /intentions/cards/ - 25 Intention card layouts.

   THIS FILE DRESSES THE SITE'S REAL CARD, IT DOES NOT REPLACE IT. The markup is
   now the genuine .kc-flip > .kc-flip__inner > .kc-flip__face structure from
   cdo-watchtower.css, so the flip animation, the corner control placement, the
   crown circle and the 38px action buttons all come from the site. What is here
   is only what an Intention needs on top: a 9:16 frame instead of the poster's
   3:4, footage instead of a flat colour, and the caption system.

   WHAT MUST BE OVERRIDDEN, and why: .kc-flip is width:320px, aspect-ratio:3/4
   in cdo-watchtower.css:5827 because it was built for a poster. An Intention
   card is 9:16 and its width varies per variant, so both are re-set from --cw.

   HEIGHT RULE. Width comes from the variant; height is min(9:16, 60vh). A
   narrow card is a true phone shape and a wide card gets SHORTER rather than
   taller, so no carousel can push the page past a normal browser window.

   TEXT COLOUR IS LOCKED. These pages generate inside the Manifest shell, so
   <div class="kcm-app"> is an ancestor and kc-manifest-app.css:52 carries
   ".kcm-app :is(h1,h2,h3,h4) { color: var(--kcm-ink) }" at 0,1,1. That beat a
   bare .kcx-title at 0,1,0 and rendered every card title near-black on dark
   footage in light mode: the illegible copy reported twice. Every text rule
   below is at least 0,2,0 and must stay that way.

   TYPE FLOOR. 13px minimum, 14px for anything doing real work. The review found
   11px labels against a brief whose first line is "all text big enough to read". */

.kci-page.kcx-page { max-width: 1500px; padding: 32px 20px 96px; }
.kci-page.kcx-page .kci-intro { text-align: left; max-width: none; }
.kci-page.kcx-page .kci-h1 { text-align: left; }

.kcx-lede { max-width: 68ch; margin: 0 0 10px; font-size: 1.02rem; line-height: 1.6; color: var(--wt-ink-soft, #475048); }
.kcx-lede strong { color: var(--wt-ink, #26302b); }

/* ---------- section ---------- */
.kcx-sec { padding: 36px 0 12px; border-top: 1px solid var(--wt-chip-border, #ddd4c2); }
.kcx-sec:first-of-type { border-top: 0; }
.kcx-sechead { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 0 20px; }
.kcx-num { font-family: 'Montserrat', system-ui, sans-serif; font-size: 15px; font-weight: 600; color: var(--wt-accent, #2c5f4e); margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.kcx-secname { font-size: 1.5rem; line-height: 1.15; font-weight: 700; margin: 0 0 6px; color: var(--wt-ink, #26302b); letter-spacing: -.01em; }
.kcx-secnote { font-size: 15px; line-height: 1.5; margin: 0 0 6px; color: var(--wt-ink-soft, #475048); max-width: 80ch; }
.kcx-secmeta { font-size: 13px; font-weight: 600; margin: 0; color: var(--wt-muted, #5d6b62); }

/* ---------- carousel ---------- */
.kcx-scroll { display: flex; gap: 22px; overflow-x: auto; overflow-y: visible; padding: 6px 2px 20px; scroll-snap-type: x mandatory; }
.kcx-scroll > * { scroll-snap-align: start; flex: 0 0 auto; }
.kcx-cnav { display: flex; gap: 8px; }
.kcx-cbtn {
  width: 42px; height: 42px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--wt-chip-border, #ddd4c2); background: var(--wt-surface, #fffdf9);
  color: var(--wt-ink, #26302b); font-size: 22px; line-height: 1; display: grid; place-items: center;
}
.kcx-cbtn:hover { border-color: var(--wt-accent, #2c5f4e); }
.kcx-cbtn:focus-visible { outline: 3px solid var(--wt-accent, #2c5f4e); outline-offset: 2px; }

/* ---------- the card ---------- */
.kcx-item { position: relative; width: var(--cw, 300px); }
.kcx-item.is-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; width: auto; }

.kcx-item .kc-flip.kcx-flip {
  width: var(--cw, 300px);
  max-width: none;
  height: min(calc(var(--cw, 300px) * 16 / 9), 60vh);
  aspect-ratio: auto;
  border-radius: 14px;
}
.kcx-item.is-tall .kc-flip.kcx-flip { height: min(calc(var(--cw, 300px) * 19 / 9), 66vh); }
.kcx-item.is-phone .kc-flip.kcx-flip {
  height: min(calc(var(--cw, 300px) * 19.5 / 9), 66vh);
  border-radius: 30px; border: 7px solid #0b0d0b;
  box-shadow: 0 0 0 2px #2a2f2b, 0 20px 44px -22px rgba(0, 0, 0, .6);
}
.kcx-item .kc-flip__face { border-radius: 14px; padding: 0; display: block; text-align: left; }
.kcx-item .kc-flip__front.kcx-face { background: #0e1210; color: #fffdf9; }

/* ---------- the picture ---------- */
.kcx-poster-img { position: absolute; inset: 0; background-size: cover; background-position: center bottom; }
.kcx-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0; transition: opacity .28s ease; }
.kcx-video.is-live { opacity: 1; }
/* CLOSER TO TIKTOK. This was a heavy blanket that buried the footage. TikTok
   uses a soft fade over roughly the bottom third and lets the type's own shadow
   do the rest. Kao: "Gradient is ridiculously high and dark and opaque, make it
   closer to TikTok. People can always use the eye icon to see everything
   clearly." So the card keeps a light top fade for the controls and a gentle
   bottom fade, and legibility is carried by text-shadow rather than by hiding
   the picture. */
.kcx-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(6, 10, 8, .34) 0%, rgba(6, 10, 8, 0) 22%),
    linear-gradient(to top, rgba(6, 10, 8, .55) 0%, rgba(6, 10, 8, .16) 24%, rgba(6, 10, 8, 0) 42%);
}

/* The top-left voice block is GONE. It repeated the profile that already sits
   at the top of the right stack, which Kao called out as duplicative. The
   avatar now leads the action row in every variant, so attribution survives on
   the below and side layouts too. */

/* ---------- caption ----------
   The backing is painted by the caption itself, sized to the caption, so
   contrast never depends on which frame of which clip happens to be showing.
   The gradient runs DOWNWARD from opaque, because the TITLE is the first child
   and needs the most protection. The first version ran it upward, which gave
   the strongest backing to the translation line and the weakest to the title. */
.kcx-cap { position: absolute; z-index: 4; left: 14px; right: 72px; bottom: 56px; }
.kcx-ctl-below .kcx-cap, .kcx-ctl-side .kcx-cap,
.kcx-ctl-bar .kcx-cap, .kcx-ctl-hoverbelow .kcx-cap { right: 14px; }
.kcx-cap::before {
  content: ""; position: absolute; z-index: -1;
  left: -14px; right: -72px; top: -14px; bottom: -62px;
  border-radius: 14px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6,10,8,0) 0%, rgba(6,10,8,.30) 34%, rgba(6,10,8,.46) 100%);
}
.kcx-ctl-below .kcx-cap::before, .kcx-ctl-side .kcx-cap::before,
.kcx-ctl-bar .kcx-cap::before, .kcx-ctl-hoverbelow .kcx-cap::before { right: -14px; }
.kcx-item.is-panel .kcx-cap { background: rgba(8, 12, 10, .66); backdrop-filter: blur(10px); border-radius: 12px; padding: 14px 15px; left: 11px; bottom: 52px; }
.kcx-item.is-panel .kcx-cap::before { display: none; }

.kcx-item .kcx-title {
  font-size: 21px; line-height: 1.24; font-weight: 700; margin: 0 0 7px;
  color: #fffdf9; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.75); text-wrap: balance;
}
.kcx-item.is-editorial .kcx-title { font-size: 29px; line-height: 1.16; }
.kcx-item.is-compact .kcx-title { font-size: 18px; }
.kcx-item .kcx-step {
  font-size: 16px; line-height: 1.5; font-weight: 500; margin: 0;
  color: rgba(255, 253, 249, .97); text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.7);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kcx-item.is-editorial .kcx-step { font-size: 18px; -webkit-line-clamp: 3; }
/* OPEN = the full height of the card, with the body scrolling inside it, which
   is what TikTok does and what "more" has to mean for a three minute piece.
   Closed, the caption sits at the bottom; open, it becomes the card. */
.kcx-capbody { min-height: 0; }
.kcx-full { display: none; }
.kcx-cap.is-open { top: 58px; bottom: 56px; display: flex; flex-direction: column; }
/* Open is the exception. Skimming a caption over footage is fine; READING a
   three minute transcript is not, so the open panel gets a proper ground. */
.kcx-cap.is-open::before {
  top: -16px; bottom: -62px;
  background: linear-gradient(to bottom, rgba(6,10,8,.86) 0%, rgba(6,10,8,.9) 100%);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.kcx-cap.is-open .kcx-capbody {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding-right: 6px; margin-top: 4px;
}
.kcx-cap.is-open .kcx-step { -webkit-line-clamp: unset; overflow: visible; font-weight: 700; margin-bottom: 14px; }
.kcx-cap.is-open .kcx-full { display: block; }
.kcx-item .kcx-full p { font-size: 15.5px; line-height: 1.62; font-weight: 400; color: rgba(255,253,249,.95); margin: 0 0 13px; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.kcx-cap.is-open .kcx-tags { flex: 0 0 auto; }
/* a visible scrollbar, because a scroll area with no affordance reads as cut off */
.kcx-cap.is-open .kcx-capbody::-webkit-scrollbar { width: 4px; }
.kcx-cap.is-open .kcx-capbody::-webkit-scrollbar-thumb { background: rgba(255,253,249,.4); border-radius: 999px; }
.kcx-item .kcx-more {
  -webkit-appearance: none; appearance: none; background: none; border: 0;
  padding: 4px 0 0; margin: 0; font-family: inherit;
  font-size: 14px; font-weight: 700; color: rgba(255, 253, 249, .88); cursor: pointer;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .8);
}
.kcx-item .kcx-more:hover { color: #fffdf9; }
.kcx-item .kcx-more:focus-visible { outline: 3px solid #fffdf9; outline-offset: 2px; border-radius: 4px; }
.kcx-item .kcx-tags { font-size: 14px; font-weight: 600; margin: 8px 0 0; color: rgba(255, 253, 249, .93); text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.7); }

.kcx-item .kcx-line {
  position: absolute; z-index: 4; left: 14px; right: 72px; bottom: 56px; margin: 0;
  font-size: 18px; line-height: 1.42; font-weight: 600; color: #fffdf9;
  text-shadow: 0 1px 3px rgba(0,0,0,.92), 0 2px 16px rgba(0,0,0,.8);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.kcx-item.is-playing .kcx-line { opacity: 1; }
.kcx-item.is-playing .kcx-cap { opacity: 0; pointer-events: none; }

/* ---------- transport ---------- */
.kcx-play {
  position: absolute; z-index: 6; left: 13px; bottom: 13px;
  width: 44px; height: 44px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: #fffdf9; color: #0e1210; display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45); transition: transform .15s ease;
}
.kcx-play svg { width: 22px; height: 22px; display: block; }
.kcx-play:hover { transform: scale(1.06); }
.kcx-play.is-off { opacity: .45; cursor: default; }
.kcx-play.is-big { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: 88px; height: 88px; }
.kcx-play.is-big svg { width: 40px; height: 40px; }
.kcx-play.is-big:hover { transform: translate(-50%, -50%) scale(1.05); }
.kcx-play:focus-visible { outline: 3px solid #fffdf9; outline-offset: 3px; }

.kcx-item .kcx-time {
  position: absolute; z-index: 6; left: 66px; bottom: 24px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px; font-variant-numeric: tabular-nums;
  color: rgba(255, 253, 249, .95); text-shadow: 0 1px 5px rgba(0, 0, 0, .85);
}
.kcx-play.is-big ~ .kcx-time { left: 14px; }

.kcx-prog { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 253, 249, .3); }
.kcx-prog.is-top { top: 0; bottom: auto; }
.kcx-prog-fill { display: block; height: 100%; width: 0; background: #fffdf9; }

/* ---------- actions ON the video ----------
   Every action is the site's .kc-pcard__icon circle, recoloured for footage.
   The circle is not decoration: a bare white glyph over uncontrolled stock
   video routinely falls under the 3:1 non-text contrast floor, and a drop
   shadow is not a guarantee. */
.kcx-rail { position: absolute; z-index: 5; right: 11px; bottom: 104px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.kcx-item.is-dense .kcx-rail { gap: 10px; }
.kcx-ctl-corner .kcx-rail { top: 62px; bottom: auto; }

.kcx-rail .kc-pcard__icon {
  border-color: rgba(255, 253, 249, .55);
  background: rgba(10, 14, 12, .46);
  color: #fffdf9;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.kcx-rail .kc-pcard__icon:hover { border-color: #fffdf9; color: #fffdf9; background: rgba(10, 14, 12, .62); }
.kcx-rail .kc-pcard__icon:focus-visible { outline: 3px solid #fffdf9; outline-offset: 3px; }
.kcx-rail .kc-heart.is-hearted { color: #ff6b8a; border-color: #ff6b8a; }
.kcx-rail .kc-heart.is-hearted .kc-heart__svg { fill: #ff6b8a; stroke: #ff6b8a; }
.kcx-rail .kc-pcard__icon.is-done { color: #8fd0b4; border-color: #8fd0b4; }
.kcx-prof { display: block; margin-bottom: 2px; text-decoration: none; }
/* The avatar is a member of the stack, not the headline of it: same 38px as
   .kc-pcard__icon so the rail reads as one row of equal controls. It was 44px
   and sat proud of everything below it. */
.kcx-rail .kcx-prof .kc-acircle { width: 38px; }
/* On the below and side rows the avatar carries the name beside it, because
   there is no rail to imply whose voice this is. */
.kcx-bar .kcx-prof { display: inline-flex; align-items: center; gap: 9px; margin: 0 6px 0 0; }
.kcx-bar .kcx-prof .kc-acircle { width: 34px; flex: none; }
.kcx-item .kcx-prof-name { font-size: 14px; font-weight: 700; color: var(--wt-ink, #26302b); white-space: nowrap; }
.kcx-item.is-side .kcx-bar .kcx-prof { margin: 0 0 4px; }

.kcx-item .kcx-act-l { display: block; font-size: 13px; font-weight: 600; margin-top: 3px; text-align: center; }
.kcx-rail .kcx-act-l { color: #fffdf9; text-shadow: 0 1px 5px rgba(0, 0, 0, .85); }
.kcx-rail .kc-pcard__icon:has(.kcx-act-l) { border-radius: 14px; height: auto; padding: 7px 6px 5px; width: 58px; flex-direction: column; }

/* HOVER VARIANTS. Gated on a real hover pointer. On touch there is no hover,
   so the controls are simply always visible rather than invisible and tappable. */
@media (hover: hover) and (pointer: fine) {
  .kcx-ctl-hover .kcx-rail { opacity: 0; transition: opacity .18s ease; }
  .kcx-ctl-hover:hover .kcx-rail,
  .kcx-ctl-hover:focus-within .kcx-rail { opacity: 1; }
}

/* ---------- actions BELOW or BESIDE the card ----------
   The real poster row. .kc-pcard__bar and .kc-pcard__icon come from
   cdo-watchtower.css, so these match the poster carousel exactly. */
.kcx-bar { margin-top: 12px; }
.kcx-item.is-side .kcx-bar { flex-direction: column; margin-top: 0; }
.kcx-ctl-bar .kcx-bar {
  justify-content: space-between;
  background: var(--wt-card-bg, #fffdf9);
  border: 1px solid var(--wt-chip-border, #ddd4c2);
  border-radius: 12px; padding: 9px 12px;
}
.kcx-bar .kcx-act-l { color: var(--wt-ink-soft, #475048); }
.kcx-bar .kc-pcard__icon:has(.kcx-act-l) { border-radius: 14px; height: auto; padding: 7px 6px 5px; width: 58px; flex-direction: column; }
.kcx-bar .kc-pcard__icon:focus-visible { outline: 3px solid var(--wt-accent, #2c5f4e); outline-offset: 2px; }

/* ---------- the back ---------- */
.kcx-back { display: grid; place-items: center; background: #14100f; color: #fffdf9; overflow: hidden; }
.kcx-back-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.kcx-back-scrim { position: absolute; inset: 0; }
.kcx-scrim--heavy { background: rgba(8, 10, 9, .8); }
.kcx-scrim--medium { background: rgba(8, 10, 9, .6); }
.kcx-scrim--light { background: rgba(8, 10, 9, .44); }
.kcx-scrim--grad { background: linear-gradient(160deg, rgba(8,10,9,.9) 0%, rgba(8,10,9,.5) 55%, rgba(8,10,9,.86) 100%); }

.kcx-bg-ink { background: #17181a; }
.kcx-bg-green { background: #24503f; }
.kcx-bg-clay { background: #9a4a24; }
.kcx-bg-navy { background: #1e3a5c; }
.kcx-bg-purple { background: #4a235f; }
.kcx-bg-red { background: #c0281f; }
.kcx-bg-paper { background: #f4f0e7; }
.kcx-item .kcx-bg-paper .kcx-poster { color: #17181a; }

.kcx-poster {
  position: relative; z-index: 2; container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center; padding: 26px 20px; width: 100%; height: 100%;
}
/* THE REAL CROWN: the same mask the artist circle uses, so there is exactly one
   crown on this site and this is not a second drawing of it. */
.kcx-crown {
  display: block; width: 64px; aspect-ratio: 1.246 / 1; margin: 0 auto 12px;
  background: currentColor;
  -webkit-mask: url("/assets/logos/keepcalm-crown-white.svg?v=20260720") no-repeat center / contain;
  mask: url("/assets/logos/keepcalm-crown-white.svg?v=20260720") no-repeat center / contain;
}
.kcx-poster--poster-crown .kcx-crown { width: 116px; margin-bottom: 18px; }
.kcx-poster--poster-big .kcx-crown { width: 80px; }
.kcx-poster--poster-sm .kcx-crown { width: 44px; }

.kcx-item .kcx-kc { font-size: clamp(30px, 13cqw, 54px); font-weight: 800; line-height: .96; }
.kcx-item .kcx-and { font-size: clamp(12px, 4.4cqw, 16px); font-weight: 700; letter-spacing: .3em; margin: 8px 0 7px; }
.kcx-item .kcx-phrase { font-size: clamp(22px, 9.5cqw, 42px); font-weight: 800; line-height: 1.04; text-wrap: balance; }
.kcx-poster--poster-big .kcx-phrase { font-size: clamp(26px, 11.5cqw, 52px); }
.kcx-poster--poster-sm .kcx-kc { font-size: clamp(20px, 8cqw, 34px); }
.kcx-poster--poster-sm .kcx-phrase { font-size: clamp(18px, 7cqw, 30px); }
.kcx-poster--poster-two .kcx-phrase { max-width: 7ch; }
.kcx-poster--poster-min .kcx-phrase { font-size: clamp(26px, 13cqw, 54px); }

.kcx-item .kcx-sub { font-size: 14px; font-weight: 600; line-height: 1.5; margin: 15px 0 0; opacity: .94; max-width: 26ch; }
.kcx-item .kcx-url { font-size: 14px; font-weight: 700; margin: auto 0 0; padding-top: 18px; opacity: .96; }

@media (prefers-reduced-motion: reduce) {
  .kcx-video, .kcx-play, .kcx-rail { transition: none; }
  .kcx-back-video { display: none; }
  .kcx-item .kc-flip__inner { transition: none; }
}

@media (max-width: 640px) {
  .kci-page.kcx-page { padding: 20px 12px 72px; }
  .kcx-sechead { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .kcx-secname { font-size: 1.25rem; }
  .kcx-item.is-side { display: block; }
  .kcx-item.is-side .kcx-bar { flex-direction: row; margin-top: 12px; }
}

/* ===================================================================
   THE RAIL'S LAST THREE CONTROLS
   Kaʻo fixed the rail order on 2026-08-20: profile, heart, share,
   languages, eye, flip, light/dark. Flip and light/dark used to be
   placed absolutely by KCCardSystem.decorate(), top-right and
   bottom-left, and bottom-left is where the play button sits, which is
   how the tone toggle ended up as a half-hidden disc behind play. They
   are ordinary rail items now, so nothing is positioned into anything
   else. The back face keeps its corner pair, since a turned card still
   needs a way back and the poster side has no rail.
   =================================================================== */

/* The real flip glyph is a mask on /assets/logos/turn-around.svg, the
   same asset the corner button uses. Reused, not redrawn. */
.kcx-rail .kc-cardflip__ic,
.kcx-bar .kc-cardflip__ic { width: 15px; height: 15px; display: block; flex: none; }

/* ---- the eye: show the footage on its own ------------------------
   Hides the words, keeps every control, so the same button turns it
   back and a keyboard user never loses their place. */
.kcx-item.is-bare .kcx-cap,
.kcx-item.is-bare .kcx-scrim,
.kcx-item.is-bare .kcx-line { opacity: 0; pointer-events: none; }
.kcx-item.is-bare .kcx-cap,
.kcx-item.is-bare .kcx-scrim { transition: opacity .22s ease; }
.kcx-item.is-bare .kcx-act[aria-pressed="true"] { color: #8fd0b4; border-color: #8fd0b4; }

/* ---- light/dark: kc-tone-dark is the card system's own class,
   meaning dark ink on a light card. Our cards carry .kcx- elements
   rather than .kc-fc-, so they need their own half of the treatment. */
.kc-flip.kc-tone-dark .kcx-scrim {
  background: linear-gradient(to top, rgba(255,255,255,.86) 0%, rgba(255,255,255,.52) 34%, rgba(255,255,255,.10) 62%, rgba(255,255,255,0) 100%);
}
.kc-flip.kc-tone-dark .kcx-title,
.kc-flip.kc-tone-dark .kcx-step,
.kc-flip.kc-tone-dark .kcx-tags,
.kc-flip.kc-tone-dark .kcx-more,
.kc-flip.kc-tone-dark .kcx-full p,
.kc-flip.kc-tone-dark .kcx-time { color: #14201b; text-shadow: none; }
.kc-flip.kc-tone-dark .kcx-capbody { color: #14201b; }
.kc-flip.kc-tone-dark .kcx-rail .kc-pcard__icon {
  color: #14201b; border-color: rgba(20, 32, 27, .5); background: rgba(255, 253, 249, .62);
}
.kc-flip.kc-tone-dark .kcx-rail .kc-pcard__icon:hover {
  color: #0c1512; border-color: #14201b; background: rgba(255, 253, 249, .86);
}
.kc-flip.kc-tone-dark .kcx-rail .kc-pcard__icon:focus-visible { outline-color: #14201b; }
.kc-flip.kc-tone-dark .kcx-play { background: #14201b; color: #fffdf9; }
.kc-flip.kc-tone-dark .kcx-prog { background: rgba(20, 32, 27, .22); }
.kc-flip.kc-tone-dark .kcx-prog-fill { background: #14201b; }