/* ================================================================
   HOMEPAGE TITLE — "Scroll Master" larger than the theme default
   (5rem desktop / 4rem ≤1130px / 3rem ≤500px in theme.scss +
   responsiveness.scss), same proportions scaled up.
   ================================================================ */

#site-head .blog-title,
#site-head.withCenteredImage .blog-title {
  font-size: 7.3rem;
}

@media only screen and (max-width: 1130px) {
  #site-head .blog-title,
  #site-head.withCenteredImage .blog-title {
    font-size: 5.8rem;
  }
}

@media only screen and (max-width: 500px) {
  #site-head .blog-title,
  #site-head.withCenteredImage .blog-title {
    font-size: 4.3rem;
  }
}

/* ================================================================
   "COMING SOON" BADGES — Chrome Extension + iOS App teasers, side by
   side at the end of the homepage's "Learning Tools" section. Link
   through to the dedicated /apps/ page (layouts/_default/apps.html)
   rather than a real store listing, which doesn't exist yet.
   ================================================================ */

.coming-soon-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.2rem;
}

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.1rem 0.6rem 0.6rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.09);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.coming-soon-badge:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.15);
}

.coming-soon-badge__icon {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  display: block;
}

.coming-soon-badge__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.coming-soon-badge__title {
  font-weight: 600;
  font-size: 1rem;
}

.coming-soon-badge__tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

/* ================================================================
   ZH-TW HOMEPAGE BUTTONS — Kaiti font, larger size
   ================================================================ */

:lang(zh-tw) #site-head .blog-description {
  font-size: 4rem !important;
  margin-top: 2rem !important;
  color: #ffffff !important;
}

:lang(zh-tw) #site-head a.btn.site-menu {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 2px;
}

/* ================================================================
   EN / ES HOMEPAGE BUTTONS — bigger size for the gothic font
   ================================================================ */

:lang(en) #site-head a.btn.site-menu,
:lang(es) #site-head a.btn.site-menu {
  font-size: 26px !important;
}

:lang(en) #site-head .blog-description,
:lang(es) #site-head .blog-description {
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 4rem;
  margin-top: 2rem;
  color: #ffffff;
}

/* Section titles (Welcome / What We Offer / Speed Reader / Contact) */
:lang(en) .post-title,
:lang(es) .post-title {
  font-family: 'UnifrakturMaguntia', cursive;
}

/* ================================================================
   JA HOMEPAGE TITLE — match size/margin/color of the other languages
   ================================================================ */

:lang(ja) #site-head .blog-description {
  font-size: 4rem !important;
  margin-top: 2rem !important;
  color: #ffffff !important;
}

/* ================================================================
   LANGUAGE MENU — idle/active/hover colors, matching the Speed
   Reader's stage swatches (9th: Yellow / Palatinate Blue for idle;
   8th: Electric Ultramarine / Electric Lime for active + hover).
   Overrides theme.scss's #site-head #site-languages .btn-lang rules,
   which default to --highlight (green) / --highlight-inverse (dark
   green). The Speed Reader page reapplies the same pairs itself,
   scoped in reader.css.
   ================================================================ */

#site-head #site-languages .btn-lang,
#site-head.withCenteredImage #site-languages .btn-lang {
  color: #3333FF;
  background-color: #FFFF33;
}

#site-head #site-languages .btn-lang.active,
#site-head #site-languages .btn-lang:hover,
#site-head.withCenteredImage #site-languages .btn-lang.active,
#site-head.withCenteredImage #site-languages .btn-lang:hover {
  color: #D4FF00;
  background-color: #2B00FF;
}

/* ── Collapsed dropdown trigger — same pattern as reader.css/vocab-page.css:
   inert above the MOBILE breakpoint below, where #lang-dropdown instead
   renders flat as the plain pill row (the original look). Below it, this
   becomes the only visible piece and #lang-dropdown becomes an
   absolutely-positioned panel toggled by it. Toggle wiring is a matching
   listener block in custom.js. ── */

#site-languages {
  position: relative;
}

#site-languages .btn-lang {
  line-height: 1;
}

#lang-trigger {
  display: none;
}

#lang-dropdown {
  display: contents;
}

@media only screen and (max-width: 640px) {
  #lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: #FFFF33;
    color: #3333FF;
    border: none;
    border-radius: 5px;
    box-sizing: content-box;
    height: 1em;
    line-height: 1;
    padding: 0.3rem 0.7rem;
    font-size: 70%;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    cursor: pointer;
  }

  #lang-trigger .lang-trigger-icon-svg {
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
  }

  #lang-trigger .lang-trigger-caret {
    font-size: 0.8em;
    transition: transform 0.2s ease;
  }

  #site-languages.open #lang-trigger {
    color: #D4FF00;
    background-color: #2B00FF;
  }

  #site-languages.open #lang-trigger .lang-trigger-caret {
    transform: rotate(180deg);
  }

  #lang-dropdown {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
    z-index: 1000;
  }

  #site-languages.open #lang-dropdown {
    display: flex;
  }

  #lang-dropdown .btn-lang {
    margin: 0;
  }
}

/* ================================================================
   FIXED SIDE NAV (Welcome / Our Services / Speed Reader / Contact /
   Return To Top) — the theme's stock sticky menu, re-themed to match
   the flashcard/reader swatch palette: idle = 3rd swatch (Medium Slate
   Blue / Unmellow Yellow), hover/active font color = Maya Blue (6th
   swatch's bg half). Overrides theme.scss's .fixed-nav / a.fn-item.
   ================================================================ */

.fixed-nav {
  background-color: #EB4F84;
  font-family: "Lexend", sans-serif;
  text-transform: capitalize;
}

a.fn-item {
  color: #FFFF66;
}

a.fn-item:hover,
a.fn-item.active {
  color: #4DE1FF;
}

/* ================================================================
   HERO HEADER — pull language row / title / nav buttons up from
   the vertical center towards the top of the cover image
   ================================================================ */

#site-head .vertical {
  vertical-align: top;
  padding-top: 1.5rem;
}

@media (max-width: 1130px) {
  /* Theme's own mobile rule sets #site-head { padding: 15% 0 }, which
     dominates over .vertical's own padding — override it directly here. */
  #site-head {
    padding-top: 9rem;
  }

  #site-head .vertical {
    padding-top: 0;
  }
}

/* ================================================================
   NAV BUTTONS (Services / Speed Reader / Contact) — iridescent pill
   Spec: export_button_specs.md
   ================================================================ */

#site-head a.btn.site-menu {
  position: relative;
  z-index: 0;
  padding: 1rem 3rem;
  border: 1px solid #799df1;
  border-radius: 9999px;
  font-family: 'UnifrakturMaguntia', cursive;
  text-transform: lowercase;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1d3557 !important;
  overflow: hidden;
  box-shadow: inset 0 0 1rem 0 #f7f7f6;
  transition: box-shadow 0.5s ease;
  background: linear-gradient(
    60deg,
    #799df1 5%, #60c1ec 15%, #7bd9de 25%, #cfb0d2 35%,
    #799df1 45%, #60c1ec 55%, #7bd9de 65%, #cfb0d2 75%,
    #799df1 85%, #60c1ec 95%, #7bd9de
  );
  background-size: 200% 200%;
  background-position: -100% -100%;
  animation: site-menu-shimmer 8s infinite;
}

#site-head a.btn.site-menu::after {
  content: "";
  width: 200%;
  height: 200%;
  position: absolute;
  top: -50%;
  left: -50%;
  background: linear-gradient(
    150deg,
    #f7f7f6, transparent 20%, transparent 60%, #f7f7f6 75%, #f7f7f6
  );
  z-index: -1;
}

#site-head a.btn.site-menu:hover {
  border-color: transparent;
  box-shadow: inset 0 0 1rem 0 #f7f7f6,
              0 0 80px rgba(121, 157, 241, 0.45),
              0 0 140px rgba(123, 217, 222, 0.25);
}

@media screen and (max-width: 450px) {
  #site-head a.btn.site-menu {
    font-size: 1rem;
  }
}

@keyframes site-menu-shimmer {
  20% { background-position: -130% -120%; }
  40% { background-position: -140% -100%; }
  70% { background-position: -110% -130%; }
}

/* ================================================================
   WELCOME / SPEED READER SECTION BACKGROUNDS — animated iridescent
   gradient (same palette as the nav buttons), applied to both the
   section itself and its .post-after triangle so they move in sync.
   Spec: export_background_mobile.md (§5.1 hero gradient)
   ================================================================ */

#opener-holder,
#about-me-holder {
  background: linear-gradient(
    60deg,
    #799df1 5%, #60c1ec 15%, #7bd9de 25%, #cfb0d2 35%,
    #799df1 45%, #60c1ec 55%, #7bd9de 65%, #cfb0d2 75%,
    #799df1 85%, #60c1ec 95%, #7bd9de
  );
  background-size: 200% 200%;
  animation: moving1 7s ease infinite;
}

/* The theme renders .post-after as a CSS-border triangle between
   sections; layouts/_default/index.html no longer renders it for any
   section — opener's and about-me's are swapped for a .parallax-stage
   (below) instead, and the rest just render nothing now. */

@keyframes moving1 {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ================================================================
   PARALLAX SCENE — fox + kokeshi doll, straddling the seam between
   "About Us" and "Learning Tools" rather than living in a boxed
   section of their own: .parallax-stage takes up zero height of its
   own (it sits exactly where the old .post-after divider did, right
   at that boundary) and its images are pulled up via negative top so
   they float — in front of, not inside — the tail end of one
   section's gradient and the start of the next's.

   Two-layer trick: .parallax-wrapper (outer) is what vocab.js's
   scroll handler writes a translate3d() to every frame; .float-anim
   (inner, on the <img> itself) runs its own CSS keyframe animation.
   Splitting them across two elements is required — a scroll handler
   and a CSS animation both driving `transform` on the SAME element
   would just stomp on each other every frame.
   ================================================================ */

.parallax-stage {
  position: relative;
  left: -260px;
  height: 0;
  max-width: 900px;
  margin: 0 auto;
  overflow: visible;
}

@media (max-width: 768px) {
  .parallax-stage { left: -90px; }
}

.parallax-wrapper {
  position: absolute;
  z-index: 5;
  will-change: transform;
}

.fox-wrapper {
  top: -189px;
  left: 8%;
  width: min(306px, 38%);
}

/* Positioned to sit roughly over the doll already drawn into the fox
   image, not off to the side — so separating it onto its own layer
   reads as "the same doll, now floating free of the scene behind it"
   rather than a second, unrelated doll appearing out of nowhere. */
.doll-wrapper {
  top: -117px;
  left: 34%;
  width: min(77px, 11%);
}

.parallax-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.18));
}

@keyframes zeroGFloat {
  0%   { transform: translateY(0px) translateX(0px) rotate(0deg); }
  50%  { transform: translateY(-16px) translateX(6px) rotate(2.5deg); }
  100% { transform: translateY(10px) translateX(-5px) rotate(-1.5deg); }
}

.float-anim {
  animation: zeroGFloat ease-in-out infinite alternate;
  will-change: transform;
}

/* Different durations (and a negative delay on the doll, so it
   starts mid-cycle) keep the two from ever drifting in sync. */
.fox-float { animation-duration: 7s; }
.doll-float { animation-duration: 4.5s; animation-delay: -1.8s; }
.chameleon-float { animation-duration: 6s; }

@media (max-width: 768px) {
  .fox-wrapper { top: -135px; left: 6%; width: min(216px, 52%); }
  .doll-wrapper { top: -86px; left: 32%; width: min(59px, 13%); }
}

/* ── Chameleon layer (Speed Reader → Contact) — a single image, so no
   left-offset/pairing math: the stage itself is a narrow, centered
   box and the wrapper just fills it. ─────────────────────────────── */
/* Left-aligned with a small fixed gap rather than centered-then-
   shifted — margin-left/margin-right:auto holds it near the actual
   edge of the viewport regardless of how wide the section is, instead
   of a negative `left` nudge off of a centered position (which only
   moves it a fraction of the way there on a wide screen). */
.parallax-stage--chameleon {
  left: 0;
  max-width: 300px;
  margin-left: 20px;
  margin-right: auto;
}

.chameleon-wrapper {
  top: -187px;
  left: 0;
  width: 100%;
}

@media (max-width: 768px) {
  .parallax-stage--chameleon { max-width: 220px; margin-left: 10px; }
  .chameleon-wrapper { top: -137px; }
}

@media (prefers-reduced-motion: reduce) {
  .float-anim { animation: none; }
}

/* ================================================================
   SERVICES / CONTACT SECTION BACKGROUNDS — same amber/gold gradient
   colors as .flashcard-arrow--next, but using the Welcome/Speed
   Reader section's moving1 animation engine instead of the arrow's
   own flashcard-arrow-drift — the arrow's wider, asymmetric keyframe
   swing (up to -140%/-100%) revealed a visible seam/repeat line when
   stretched across a full-width section instead of a small 38px
   button; moving1's simple 0%→100%→0% pan doesn't have that issue.
   ================================================================ */

#services-holder,
#contact-holder {
  background: linear-gradient(
    60deg,
    var(--vocab-yellow-1) 5%, var(--vocab-yellow-2) 15%, var(--vocab-yellow-3) 25%, var(--vocab-yellow-4) 35%,
    var(--vocab-yellow-1) 45%, var(--vocab-yellow-2) 55%, var(--vocab-yellow-3) 65%, var(--vocab-yellow-4) 75%,
    var(--vocab-yellow-1) 85%, var(--vocab-yellow-2) 95%, var(--vocab-yellow-3)
  );
  background-size: 200% 200%;
  animation: moving1 7s ease infinite;
}

/* ================================================================
   VOCABULARY NAV — Expanding vertical strips
   Chinese Learning Site
   ================================================================ */

:root {
  --vocab-blue:        #1A56A0;
  --vocab-red:         #C0392B;
  --vocab-yellow:      #D4A017;
  --vocab-yellow-dark: #2a2a2a;
  --tab-w: 48px;

  /* Yellow tone scale — one tone per subgroup within Adjectives (10 subgroups).
     Formulaic HSL sweep (hue 42°, sat 70%, lightness 40%→85% in 10 even steps)
     rather than hand-picked, so it stays legible with dark text throughout
     (darkest step still clears ~4:1 contrast). */
  --vocab-yellow-1:  #AD831F;
  --vocab-yellow-2:  #C39322;
  --vocab-yellow-3:  #D9A326;
  --vocab-yellow-4:  #DDAC3C;
  --vocab-yellow-5:  #E0B652;
  --vocab-yellow-6:  #E4BF67;
  --vocab-yellow-7:  #E8C87D;
  --vocab-yellow-8:  #ECD193;
  --vocab-yellow-9:  #F0DAA8;
  --vocab-yellow-10: #F4E3BE;

  /* Blue tone scale — one tone per subgroup within Nouns (28 subgroups).
     Same formulaic HSL-sweep method as Yellow, but calibrated for WHITE text
     (Nouns/Verbs strips use white text, not dark like Yellow): hue 213°,
     sat 72%, lightness 20%→52.7% in 28 even steps — the lightest step is
     capped at the lightness where contrast-vs-white still clears ~4.1:1,
     matching Yellow's own darkest-step contrast floor. */
  --vocab-blue-1:  #0E2F58;
  --vocab-blue-2:  #0F325D;
  --vocab-blue-3:  #103562;
  --vocab-blue-4:  #113868;
  --vocab-blue-5:  #123B6D;
  --vocab-blue-6:  #133E72;
  --vocab-blue-7:  #134078;
  --vocab-blue-8:  #14437D;
  --vocab-blue-9:  #154682;
  --vocab-blue-10: #164988;
  --vocab-blue-11: #174C8D;
  --vocab-blue-12: #184F92;
  --vocab-blue-13: #195298;
  --vocab-blue-14: #1A549D;
  --vocab-blue-15: #1A57A2;
  --vocab-blue-16: #1B5AA7;
  --vocab-blue-17: #1C5DAD;
  --vocab-blue-18: #1D60B2;
  --vocab-blue-19: #1E63B7;
  --vocab-blue-20: #1F66BD;
  --vocab-blue-21: #2068C2;
  --vocab-blue-22: #206BC7;
  --vocab-blue-23: #216ECD;
  --vocab-blue-24: #2271D2;
  --vocab-blue-25: #2374D7;
  --vocab-blue-26: #2577DC;
  --vocab-blue-27: #2A7ADC;
  --vocab-blue-28: #307DDD;

  /* Red tone scale — one tone per subgroup within Verbs (6 subgroups).
     Same method: hue 5.6°, sat 63.4%, lightness 20%→55.2% in 6 even steps,
     calibrated the same way as Blue for white text. */
  --vocab-red-1: #531913;
  --vocab-red-2: #712119;
  --vocab-red-3: #8E2A20;
  --vocab-red-4: #AB3326;
  --vocab-red-5: #C93C2D;
  --vocab-red-6: #D55244;

  /* Orange — Adverbs. No desktop strip (see the comment atop
     custom_body.html's $categories), so only the tone scale used by
     the overlay's category ribbon and group accordion is needed.
     Calibrated for DARK text like Yellow (not white like Blue/Red) —
     hue 30°, sat 75-78%, lightness 40%→80% across the 6 subgroups,
     floored where contrast-vs-black still clears ~4:1, matching
     Yellow's own darkest-step margin. */
  --vocab-orange:      #F27F0D;
  --vocab-orange-dark: #2a2a2a;
  --vocab-orange-1: #B66616;
  --vocab-orange-2: #DA7A1B;
  --vocab-orange-3: #E68F37;
  --vocab-orange-4: #EBA35C;
  --vocab-orange-5: #EFB880;
  --vocab-orange-6: #F4CCA4;

  /* Green tone scale — Objects (25 subgroups). No desktop strip, same as
     Orange. Same formulaic HSL-sweep method as Blue/Red, calibrated for
     WHITE text: hue 140°, sat 65%, lightness 20%→34% in 25 even steps —
     the lightest step is capped where contrast-vs-white still clears
     ~4.1:1, matching Blue/Red's own contrast floor. */
  --vocab-green:      #19B34D;
  --vocab-green-dark: #2a2a2a;
  --vocab-green-1:  #125428;
  --vocab-green-2:  #125729;
  --vocab-green-3:  #13592A;
  --vocab-green-4:  #135C2B;
  --vocab-green-5:  #145E2D;
  --vocab-green-6:  #14602E;
  --vocab-green-7:  #15632F;
  --vocab-green-8:  #156530;
  --vocab-green-9:  #166831;
  --vocab-green-10: #176A32;
  --vocab-green-11: #176D34;
  --vocab-green-12: #186F35;
  --vocab-green-13: #187236;
  --vocab-green-14: #197437;
  --vocab-green-15: #197738;
  --vocab-green-16: #1A7939;
  --vocab-green-17: #1A7B3B;
  --vocab-green-18: #1B7E3C;
  --vocab-green-19: #1B803D;
  --vocab-green-20: #1C833E;
  --vocab-green-21: #1C853F;
  --vocab-green-22: #1D8840;
  --vocab-green-23: #1D8A42;
  --vocab-green-24: #1E8D43;
  --vocab-green-25: #1E8F44;

  /* Cream tone scale — Measures (5 subgroups). No desktop strip, same as
     Orange/Green. Per user's explicit request: light yellow fading to
     white (not a contrast-driven sweep like the other scales), paired
     with BLACK text/pills throughout — hue 45°, sat 55%, lightness
     78%→97% in 5 even steps. Contrast-vs-black stays 9.9:1+ at every
     step since the whole scale is light, so no per-group exception is
     needed the way Adjectives/Adverbs eventually got one. */
  --vocab-cream:      #E6D6A8;
  --vocab-cream-dark: #2a2a2a;
  --vocab-cream-1: #E6D6A8;
  --vocab-cream-2: #EBDFBB;
  --vocab-cream-3: #F1E8CE;
  --vocab-cream-4: #F6F1E0;
  --vocab-cream-5: #FCF9F3;

  /* Aqua tone scale — Food (12 subgroups). No desktop strip, same as
     Orange/Green/Cream. Per user's request: light blue sweeping from
     celeste to aquamarine — hue 197°→160°, sat 60%, lightness held at
     68% throughout (a hue sweep, not a lightness sweep, unlike every
     other scale). Contrast-vs-white fails badly here (~1.6-2:1, far too
     light) so — like Cream — this pairs with BLACK text/pills
     throughout (contrast-vs-black ~7.3-9.1:1, computed and verified
     before building, same as the other scales' methodology). */
  --vocab-aqua:      #7CC3DE;
  --vocab-aqua-dark: #2a2a2a;
  --vocab-aqua-1:  #7CC3DE;
  --vocab-aqua-2:  #7CC8DE;
  --vocab-aqua-3:  #7CCEDE;
  --vocab-aqua-4:  #7CD3DE;
  --vocab-aqua-5:  #7CD9DE;
  --vocab-aqua-6:  #7CDEDE;
  --vocab-aqua-7:  #7CDED9;
  --vocab-aqua-8:  #7CDED4;
  --vocab-aqua-9:  #7CDECE;
  --vocab-aqua-10: #7CDEC9;
  --vocab-aqua-11: #7CDEC3;
  --vocab-aqua-12: #7CDEBE;

  /* Violet tone scale — Health (8 subgroups). No desktop strip, same as
     Orange/Green/Cream/Aqua. Picks up exactly where Nouns' own scale
     ends: hue 213° (Blue's hue, matching --vocab-blue-28 = #307DDD)
     sweeping to 275° (violet), sat/lightness held constant at Blue-28's
     own values (72%/52.7%) for continuity between the two categories.
     Contrast-vs-white stays 4.1-8.1:1 throughout (checked before
     building), so — like Blue/Red/Green — this pairs with WHITE text,
     not black like Cream/Aqua. */
  --vocab-violet:      #6230DD; /* matches --vocab-violet-6 (Instruments subgroup) — reserving a bluer purple for the next major category */
  --vocab-violet-1: #307EDD;
  --vocab-violet-2: #3064DD;
  --vocab-violet-3: #304ADD;
  --vocab-violet-4: #3031DD;
  --vocab-violet-5: #4830DD;
  --vocab-violet-6: #6230DD;
  --vocab-violet-7: #7B30DD;
  --vocab-violet-8: #9530DD;

  /* Magenta tone scale — Conjunctions (10 subgroups, grammatically
     classified: Addition, Also & Moreover, Contrast, Concession, Cause &
     Reason, Purpose, Condition, Time & Sequence, Comparison &
     Correlatives, Examples & Clarification). No desktop strip, same as
     Orange/Green/Cream/Aqua/Violet. Per user's request: darker purple
     closer to red than Health's violet — hue 320° (between Violet's
     275° and Red's 5.6°, closing the chromatic wheel), sat 65%,
     lightness 20%→54% in 10 even steps, capped where contrast-vs-white
     still clears ~4.1:1 (same methodology as Blue/Red/Green/Violet) —
     pairs with WHITE text. */
  --vocab-magenta:      #B62084;
  --vocab-magenta-1: #54123E;
  --vocab-magenta-2: #64154A;
  --vocab-magenta-3: #741955;
  --vocab-magenta-4: #841C61;
  --vocab-magenta-5: #941F6D;
  --vocab-magenta-6: #A42379;
  --vocab-magenta-7: #B42684;
  --vocab-magenta-8: #C32990;
  --vocab-magenta-9: #D32E9C;
  --vocab-magenta-10: #D63DA3;

  /* Pink tone scale — Prepositions (8 subgroups: Place & Position,
     Proximity & Relation, Direction & Movement, Time, Accordance &
     Cause, Purpose & Regarding, Manner & Means, Comparison & Inclusion).
     No desktop strip, same as Orange/Green/Cream/Aqua/Violet/Magenta.
     Per user's request: pink grading toward a light skin tone — hue
     345°→385° (wraps through red into the warm-nude range), sat
     55%→30%, lightness 76%→92% in 8 even steps. Contrast-vs-white fails
     badly (~1.2-2.1:1, light throughout) so — like Cream/Aqua — this
     pairs with BLACK text/pills. The category's own representative
     --vocab-pink is the MIDDLE of the range (step 4-5 midpoint), per
     user's explicit request, unlike every other category's base value
     (which is a separately-computed punchy color, not a scale step). */
  --vocab-pink:      #E8C8C5;
  --vocab-pink-dark: #2a2a2a;
  --vocab-pink-1: #E3A0B1;
  --vocab-pink-2: #E4ABB4;
  --vocab-pink-3: #E5B6B9;
  --vocab-pink-4: #E7C1C0;
  --vocab-pink-5: #E9CECA;
  --vocab-pink-6: #EBD8D3;
  --vocab-pink-7: #EEE2DC;
  --vocab-pink-8: #F1EAE4;

  /* Brown tone scale — Body (7 subgroups: Head & Face, Torso & Trunk,
     Arms & Hands, Legs & Feet, Senses & Perception, Internal Organs,
     Body Systems & Fluids — ordered surface-to-internal). No desktop
     strip. Per user's request: clear (light) to darker brown — hue 30°,
     sat 58%, lightness 72%→18% in 7 even steps. UNLIKE every other
     scale, this genuinely spans from light to dark, so no single text
     color stays legible end to end (checked before building: contrast-
     vs-black beats contrast-vs-white through step 3, then flips) —
     groups 0-2 (steps 1-3) get black text/pills, groups 3-6 (steps 4-7)
     get white, split at the natural crossover instead of forcing one
     color the way every prior scale did. --vocab-brown (the category's
     own ribbon color) is step 4 — the middle of the range, per user's
     request — which sits right at that crossover, so it's paired with
     white (marginal ~3.85:1, still clears the 3:1 floor for the
     ribbon's larger text size). */
  --vocab-brown:      #B57330;
  --vocab-brown-dark: #2a2a2a;
  --vocab-brown-1: #E1B88E;
  --vocab-brown-2: #D7A16A;
  --vocab-brown-3: #CE8A46;
  --vocab-brown-4: #B57330;
  --vocab-brown-5: #915C27;
  --vocab-brown-6: #6D451D;
  --vocab-brown-7: #492E13;

  /* Gray tone scale — Not (4 subgroups: Inability & Prohibition,
     Negation of State & Time, Comparison & Degree, Emphasis &
     Connectors). No desktop strip. Hue-neutral (sat 0%), lightness
     82%→18% in 4 even steps — same "clear to dark, no single text
     color works" situation as Brown: checked contrast before building,
     crossover falls between steps 2 and 3, so groups 0-1 get black
     text/pills and groups 2-3 get white. No separate "punchy" base
     value makes sense for a neutral scale, so --vocab-gray is simply
     the literal middle (L 50%), continuing the same "middle of the
     range" choice used for Pink/Brown. */
  --vocab-gray:      #808080;
  --vocab-gray-dark: #2a2a2a;
  --vocab-gray-1: #D1D1D1;
  --vocab-gray-2: #9B9B9B;
  --vocab-gray-3: #646464;
  --vocab-gray-4: #2E2E2E;

  /* Black tone scale — Demonstratives (3 subgroups: Proximal, Distal,
     General Reference). No desktop strip. Unlike Brown/Gray, this stays
     dark throughout (L 16%→4%) rather than spanning the full range, so
     — like Blue/Red/Green/Violet/Magenta — a single text color (white)
     works end to end with no per-group exception needed (contrast-vs-
     white 14.5-19.8:1 at every step). --vocab-black is the middle step,
     same convention as Pink/Brown/Gray. */
  --vocab-black:   #1A1A1A;
  --vocab-black-1: #292929;
  --vocab-black-2: #1A1A1A;
  --vocab-black-3: #0A0A0A;

  /* White tone scale — Pronouns (5 subgroups: Personal & Possessive,
     Reflexive, Universal & Negative, Indefinite, Relative &
     Interrogative). No desktop strip. Hue-neutral, lightness 96%→72%,
     kept a few points below true white (which would blend into the
     overlay's own #fff background and .vocab-mobile-groups' white
     .vocab-mobile-words ancestor) so each step still reads as a
     distinct band. Stays light throughout, so — like Cream/Aqua/Pink —
     this pairs with BLACK text/pills the whole way (contrast-vs-black
     7.2-13.2:1, no per-group exception needed). */
  --vocab-white:      #E6E6E6;
  --vocab-white-dark: #2a2a2a;
  --vocab-white-1: #F5F5F5;
  --vocab-white-2: #E6E6E6;
  --vocab-white-3: #D6D6D6;
  --vocab-white-4: #C7C7C7;
  --vocab-white-5: #B8B8B8;

  /* Burgundy tone scale — Time (6 subgroups: Time, Day, Events, Expressions,
     Months, Seasons — these are the original XLSX sheets, already
     multi-sheet, no re-categorization needed). No desktop strip. Recolored
     2026-08-12 at user's request (previously Gold — amber/honey, dark text
     throughout; see git history if that palette is ever needed again).
     Same formulaic HSL-sweep method as Red/Verbs (also 6 subgroups): hue
     345° (deep wine red, distinct from Red's 5.6° and Magenta's 320°),
     sat 63.4%, lightness 20%→55.2% in 6 even steps, calibrated for WHITE
     text like Red/Blue/Green/Violet/Magenta — except the lightest step
     (burgundy-6), which crosses the same white/black threshold Red's own
     lightest step (red-6) does at this exact lightness (contrast-vs-white
     4.32 vs vs-black 4.86 — black wins by a hair), so it gets the same
     group-5 black-text exception as Red (see the .vocab-group-5 rules
     below). --vocab-burgundy is the middle-ish step, same convention as
     Red. */
  --vocab-burgundy:   #C02B50;
  --vocab-burgundy-1: #531323;
  --vocab-burgundy-2: #71192F;
  --vocab-burgundy-3: #8E203B;
  --vocab-burgundy-4: #AB2648;
  --vocab-burgundy-5: #C92D54;
  --vocab-burgundy-6: #D54469;

  /* Silver tone scale — Questions (3 subgroups: How, What & Which,
     When/Where/Who/Why — the last category). No desktop strip. Hue
     210° (cool blue-gray), sat 12% (a metallic, near-neutral sheen,
     distinct from Gray's true-neutral scale), lightness 82%→60% in 3
     even steps — stays light enough that black text works throughout
     (contrast-vs-black 4.9-9.3:1), same pattern as Cream/Aqua/Pink/
     White. --vocab-silver is the middle step, same convention as
     Pink/Brown/Gray/White/Gold. A fitting bookend alongside Gold (Time)
     to close out the set. */
  --vocab-silver:      #ACB5BE;
  --vocab-silver-dark: #2a2a2a;
  --vocab-silver-1: #CCD1D7;
  --vocab-silver-2: #ACB5BE;
  --vocab-silver-3: #8D99A5;
}

/* ── Push page content right of the closed strips ──────── */
@media (min-width: 769px) {
  body { margin-left: calc(var(--tab-w) * 3); }
}

/* ================================================================
   DESKTOP NAV
   ================================================================ */

.vocab-nav {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: row;     /* strips side by side */
  align-items: stretch;
  z-index: 9999;
  pointer-events: none;
}

/* ── Individual strip ───────────────────────────────────── */
.vocab-strip {
  height: 100%;
  width: var(--tab-w);              /* collapsed = narrow tab */
  display: flex;
  flex-direction: row;
  overflow: hidden;
  transition: width 0.52s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: all;
}

/*
  When a strip is active it expands to:
    100vw minus the other 2 tab strips (96px)
  Because the nav is anchored to left: 0 and the total
  active nav = (100vw - 96px) + 48px + 48px = 100vw,
  the right edge reaches the viewport's right edge.
*/
.vocab-strip.is-active {
  width: calc(100vw - 96px);   /* 96px = 2 × 48px inactive strips */
}

/* ── Narrow tab column (always visible on right side) ─── */
.vocab-strip-tab {
  order: 2;                    /* rendered on the RIGHT side of the strip */
  min-width: var(--tab-w);
  width: var(--tab-w);
  height: 100%;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  padding: 2rem 0;
  transition: filter 0.2s;
  flex-shrink: 0;
}

.vocab-strip-tab:hover           { filter: brightness(1.12); }
.vocab-strip.is-active .vocab-strip-tab { filter: brightness(0.82); }

.vocab-strip.vocab-blue   .vocab-strip-tab { background: var(--vocab-blue); }
.vocab-strip.vocab-red    .vocab-strip-tab { background: var(--vocab-red); }
.vocab-strip.vocab-yellow .vocab-strip-tab { background: var(--vocab-yellow); }

/* Chinese label — vertical, natural top-to-bottom */
.tab-zh {
  font-size: 1.65rem;
  font-weight: 600;
  font-family: serif;
  letter-spacing: 3px;
  color: #fff;
  writing-mode: vertical-lr;
  line-height: 1;
}

.vocab-strip.vocab-yellow .tab-zh { color: var(--vocab-yellow-dark); }

/* English label — vertical, rotated to read bottom-to-top */
.tab-en {
  font-size: 1.275rem;
  font-family: "Oswald", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  line-height: 1;
}

.vocab-strip.vocab-yellow .tab-en { color: rgba(0, 0, 0, 0.45); }

/* On /ja/, .tab-en actually holds the Japanese label (see custom_body.html's
   $stripLang swap) — kana/kanji already reads top-to-bottom in vertical-lr
   on its own, so the 180deg flip above (meant for English) turns it upside
   down instead of helping it. Cancel it just for this locale. */
:lang(ja) .tab-en {
  transform: none;
}

/* ── Content area (fills left portion when expanded) ────── */
.vocab-strip-content {
  order: 1;                    /* rendered on the LEFT side of the strip */
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  transition: opacity 0.22s ease 0.18s;   /* fade in after width opens */
}

.vocab-strip.is-active .vocab-strip-content {
  opacity: 1;
  pointer-events: all;
}

/* Background = same color as the strip tab */
.vocab-strip.vocab-blue   .vocab-strip-content { background: var(--vocab-blue); }
.vocab-strip.vocab-red    .vocab-strip-content { background: var(--vocab-red); }
.vocab-strip.vocab-yellow .vocab-strip-content { background: var(--vocab-yellow); }

/* ── Content: header with title + close ─────────────────── */
.strip-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2.8rem 3rem 1.2rem;
  flex-shrink: 0;
}

.strip-title {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.strip-zh {
  font-size: 3.8rem;
  font-weight: 700;
  font-family: serif;
  letter-spacing: 5px;
  color: #fff;
  line-height: 1;
}

.vocab-strip.vocab-yellow .strip-zh { color: var(--vocab-yellow-dark); }

.strip-langs {
  font-size: 1.05rem;
  font-family: "Oswald", sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.vocab-strip.vocab-yellow .strip-langs { color: rgba(0, 0, 0, 0.45); }

.strip-close-btn {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  line-height: 1;
  transition: color 0.2s;
  flex-shrink: 0;
  margin-top: 0.3rem;
}

.strip-close-btn:hover { color: #fff; }
.vocab-strip.vocab-yellow .strip-close-btn { color: rgba(0, 0, 0, 0.45); }
.vocab-strip.vocab-yellow .strip-close-btn:hover { color: var(--vocab-yellow-dark); }

/* ── Search box: shared shape + animation, themed via custom
   properties so each context (colored desktop strip, its yellow
   variant, white mobile panels) only has to set colors. ──────────

   The icon slides from a centered "idle" spot to flush-left the moment
   the box gains focus or already has a value; the "•" dot is baked
   into the idle placeholder string itself (toggled in JS between
   "• {{ label }}" and plain "{{ label }}") rather than laid out as a
   separate element, so it's guaranteed to stay glued to the label as
   one run of centered text instead of needing separate position math.
   A clear/reset button fades in on the right once there's a value. */
/* Defined on .vocab-search (the common ancestor of the filter pills
   and the box itself) rather than on .vocab-search-box directly, so
   the pill row — a sibling of the box, not a descendant — can use the
   same custom properties instead of duplicating every theme. */
.vocab-search {
  --vs-fg: #fff;
  --vs-fg-dim: rgba(255, 255, 255, 0.6);
  --vs-bg: rgba(255, 255, 255, 0.12);
  --vs-border: rgba(255, 255, 255, 0.35);
  --vs-bg-focus: rgba(255, 255, 255, 0.18);
  --vs-border-focus: #fff;
}

.vocab-search-box {
  position: relative;
  height: 44px;
  border-radius: 22px;
  background: var(--vs-bg);
  border: 2px solid var(--vs-border);
  transition: background 0.2s, border-color 0.2s;
}

.vocab-search-box:focus-within {
  background: var(--vs-bg-focus);
  border-color: var(--vs-border-focus);
}

.vocab-search-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--vs-fg-dim);
  stroke-width: 2;
  stroke-linecap: round;
  transform: translate(-44px, -50%);
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              stroke 0.2s;
  pointer-events: none;
}

.vocab-search-box.is-active .vocab-search-icon,
.vocab-search-box:focus-within .vocab-search-icon {
  left: 16px;
  transform: translate(0, -50%);
  stroke: var(--vs-fg);
}

.vocab-search-input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--vs-fg);
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  text-align: center;
  padding: 0 40px;
  appearance: none;
}

/* Chrome/Safari draw their own "×" clear button inside
   type="search" inputs — redundant now that .vocab-search-clear
   exists (and styled to not match it), so it's suppressed. */
.vocab-search-input::-webkit-search-cancel-button,
.vocab-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.vocab-search-box.is-active .vocab-search-input,
.vocab-search-box:focus-within .vocab-search-input {
  text-align: left;
  padding-left: 42px;
}

.vocab-search-box.has-value .vocab-search-input {
  padding-right: 74px;
}

.vocab-search-input::placeholder { color: var(--vs-fg-dim); transition: opacity 0.2s; }

/* Once focused (or already holding a value) the placeholder loses its
   idle "• Search" dot and shifts further into the background — subtly
   dimmed rather than a plain, equally-weighted label. */
.vocab-search-box.is-active .vocab-search-input::placeholder,
.vocab-search-box:focus-within .vocab-search-input::placeholder {
  opacity: 0.55;
}

/* Clear ("×") and submit ("→") buttons share one shape; clear sits
   just left of submit, which takes the outer edge (the same slot the
   browser's native cancel button used to occupy). Both only appear
   once there's something to act on. */
.vocab-search-clear,
.vocab-search-submit {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.vocab-search-clear { right: 41px; }
.vocab-search-submit { right: 9px; }

.vocab-search-box.has-value .vocab-search-clear,
.vocab-search-box.has-value .vocab-search-submit {
  opacity: 1;
  pointer-events: all;
}

.vocab-search-clear:hover,
.vocab-search-submit:hover {
  background: var(--vs-bg-focus);
}

.vocab-search-clear svg,
.vocab-search-submit svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--vs-fg-dim);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.vocab-search-clear:hover svg,
.vocab-search-submit:hover svg { stroke: var(--vs-fg); }

/* A small forward nudge on hover reinforces "submit," same idea as
   the clear icon's color change but without borrowing its spin. */
.vocab-search-submit:hover svg { transform: translateX(2px); }

/* ── Dictionary lookup popup ─────────────────────────────────────
   A small centered card — deliberately not full-screen like the
   mobile vocab overlay — showing category › group, translations,
   and example sentences for whatever the search matched. */
.vocab-dict-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.vocab-dict-overlay[hidden] { display: none; }

.vocab-dict-panel {
  position: relative;
  background: #fff;
  color: #222;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 16px;
  padding: 2.4rem 1.8rem 1.8rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.vocab-dict-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  padding: 0.5rem;
}

.vocab-dict-close:hover { color: #222; }

.vocab-dict-entry + .vocab-dict-entry {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.vocab-dict-category {
  font-family: "Oswald", sans-serif;
  letter-spacing: 1px;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 1.2rem;
}

.vocab-dict-heading {
  font-family: "Oswald", sans-serif;
  font-size: 1.15rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
  margin: 0 0 0.75rem;
}

/* ── Hero block: the word(s), large, with audio + phonetic + label.
   1 cell for a single language, a 2-column row for exactly 2, a 2×2
   grid for ALL (EN/中文 then ES/日本語). */
.vocab-dict-hero {
  display: grid;
  gap: 1.3rem 1rem;
  margin-bottom: 1.5rem;
}

.vocab-dict-hero--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 260px;
}

.vocab-dict-hero--pairs,
.vocab-dict-hero--grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.vocab-dict-hero-cell { min-width: 0; }

.vocab-dict-hero-word-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.vocab-dict-hero-word {
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1.15;
  color: #1a1a1a;
  word-break: break-word;
}

.vocab-dict-hero-word[lang="en"],
.vocab-dict-hero-word[lang="es"] {
  font-family: "Lexend", sans-serif;
}

.vocab-dict-hero-word[lang="zh"],
.vocab-dict-hero-word[lang="ja"] {
  font-family: serif;
}

/* Same tone→color mapping as the flashcards: gold=1st, red=2nd,
   purple=3rd, blue=4th, mid-dark gray=neutral (5th/tone sandhi — e.g. the
   子 in 鴨子). */
.vocab-dict-hero-word .tone-flash-1 { color: #C88A00; }
.vocab-dict-hero-word .tone-flash-2 { color: #FF0000; }
.vocab-dict-hero-word .tone-flash-3 { color: #A020F0; }
.vocab-dict-hero-word .tone-flash-4 { color: #1C41FF; }
.vocab-dict-hero-word .tone-flash-0 { color: #595959; }

.vocab-dict-hero-phonetic {
  font-family: "Open Sans", sans-serif;
  font-weight: 200;
  font-size: 1.2rem;
  color: #6B7280;
  margin-top: 0.3rem;
}

/* ── Compact speaker button — thin-stroke, matching the search icons
   rather than a generic 🔊 emoji. Used both in the hero block and per
   example sentence. */
.vocab-dict-speaker {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.vocab-dict-speaker:hover {
  background: rgba(0, 0, 0, 0.12);
  color: #000;
}

.vocab-dict-speaker svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Example sentences as cards, not label/value rows: speaker icon,
   the sentence itself, and — for Chinese — its pinyin underneath in
   muted (never italic — matches how pinyin reads everywhere else in
   the app) smaller text. align-items: center (not flex-start) so a
   single-line EN/ES sentence sits centered against its speaker icon
   instead of pinned to the top of the row, same as the 2-line ZH/JA
   rows read against theirs. */
.vocab-dict-sentence {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.vocab-dict-sentence:last-child { border-bottom: none; }

.vocab-dict-sentence-text { min-width: 0; }

.vocab-dict-sentence-main {
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;
  color: #222;
  line-height: 1.45;
}

/* English/Spanish example sentences read in Lexend, matching the
   hero word and the vocab tables elsewhere; Chinese/Japanese keep
   Open Sans/serif fallback since Lexend mis-renders pinyin macrons. */
.vocab-dict-sentence-main[lang="en"],
.vocab-dict-sentence-main[lang="es"] {
  font-family: "Lexend", sans-serif;
}

.vocab-dict-sentence-sub {
  font-family: "Open Sans", sans-serif;
  font-weight: 200;
  font-size: 1.25rem;
  color: #6B7280;
  margin-top: 0.2rem;
}

.vocab-dict-none {
  font-family: "Open Sans", sans-serif;
  font-size: 1.3rem;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 1rem 0;
}

/* ── Content: group search box, centered above the group list ──── */
.vocab-strip-content .vocab-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 3rem 1.4rem;
  flex-shrink: 0;
}

.vocab-strip-content .vocab-search-box { width: 100%; max-width: 420px; }

/* ── Filter pills: same look/feel as the word-table language toggle
   (.lang-btn), sitting above the search box rather than the word
   table, choosing which language a lookup searches/displays.
   margin-bottom (not the parent's flex gap) carries the spacing down
   to the search box below, so it's the same single mechanism whether
   the parent is a flex column (desktop) or plain block flow (mobile). */
.vocab-search-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 1.8rem;
}

.vocab-search-filter-btn {
  padding: 0.15rem 0.75rem;
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: "Oswald", sans-serif;
  letter-spacing: 1px;
  border: 2px solid var(--vs-border);
  color: var(--vs-fg-dim);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.vocab-search-filter-btn:hover {
  border-color: var(--vs-fg);
  color: var(--vs-fg);
}

.vocab-search-filter-btn.active {
  background: var(--vs-bg-focus);
  border-color: var(--vs-fg);
  color: var(--vs-fg);
}

/* ── Tier 1: inline results dropdown, shown while typing ─────────
   Deliberately lightweight compared to the Tier 2 dictionary popup —
   a handful of candidate words so the user can jump straight to the
   one they meant instead of always landing on a full detail card. */
.vocab-dict-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  overflow-y: auto;
  max-height: 320px;
}

.vocab-dict-dropdown[hidden] { display: none; }

.vocab-dict-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.9rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-align: left;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
}

.vocab-dict-option:last-child { border-bottom: none; }

.vocab-dict-option:hover,
.vocab-dict-option.is-highlighted { background: rgba(0, 0, 0, 0.05); }

.vocab-dict-option-word {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocab-dict-option-word mark {
  background: rgba(255, 205, 0, 0.55);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.vocab-dict-option-badge {
  flex: 0 0 auto;
  font-family: "Oswald", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
}

.vocab-dict-option-preview {
  flex: 0 0 auto;
  max-width: 38%;
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocab-dict-option-none {
  padding: 0.9rem;
  font-family: "Open Sans", sans-serif;
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.45);
  text-align: center;
}

.vocab-strip.vocab-yellow .vocab-search {
  --vs-fg: var(--vocab-yellow-dark);
  --vs-fg-dim: rgba(0, 0, 0, 0.45);
  --vs-bg: rgba(0, 0, 0, 0.06);
  --vs-border: rgba(0, 0, 0, 0.25);
  --vs-bg-focus: rgba(0, 0, 0, 0.1);
  --vs-border-focus: var(--vocab-yellow-dark);
}

/* ── Content: language toggle pills ─────────────────────── */
.vocab-strip-content .vocab-lang-toggle {
  display: flex;
  gap: 0.5rem;
  padding: 0 3rem 1.2rem;
  flex-shrink: 0;
}

.lang-btn {
  padding: 0.2rem 0.9rem;
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  font-size: 1.1rem;
  font-family: "Oswald", sans-serif;
  letter-spacing: 1px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.55);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.lang-btn:hover {
  border-color: rgba(255, 255, 255, 0.8);
  color: #fff;
}

.lang-btn.active {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  color: #fff;
}

/* Matches .prompt-btn's dark palette exactly (border/color/hover/active
   values) so the flashcard pills and the word-table pills look like one
   consistent style, not two slightly different darks — this was always
   mismatched but only became visible once groups 0-3 got an identical
   shared white override below, isolating the mismatch to groups 4-9. */
.vocab-strip.vocab-yellow .lang-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}

.vocab-strip.vocab-yellow .lang-btn:hover {
  border-color: rgba(0, 0, 0, 0.6);
  color: #000;
}

.vocab-strip.vocab-yellow .lang-btn.active {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.75);
  color: #000;
  font-weight: 600;
}

/* Groups 0-3 (yellow-1..4, the darkest four tints) read better with
   white text/pills than dark, per user's visual review — flips just
   these four subgroups back to the white-based defaults used
   everywhere else on the site, overriding the dark-on-light rules above. */
.vocab-strip.vocab-yellow .vocab-group-0 .lang-btn,
.vocab-strip.vocab-yellow .vocab-group-1 .lang-btn,
.vocab-strip.vocab-yellow .vocab-group-2 .lang-btn,
.vocab-strip.vocab-yellow .vocab-group-3 .lang-btn {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}
.vocab-strip.vocab-yellow .vocab-group-0 .lang-btn:hover,
.vocab-strip.vocab-yellow .vocab-group-1 .lang-btn:hover,
.vocab-strip.vocab-yellow .vocab-group-2 .lang-btn:hover,
.vocab-strip.vocab-yellow .vocab-group-3 .lang-btn:hover { border-color: #fff; color: #fff; }
.vocab-strip.vocab-yellow .vocab-group-0 .lang-btn.active,
.vocab-strip.vocab-yellow .vocab-group-1 .lang-btn.active,
.vocab-strip.vocab-yellow .vocab-group-2 .lang-btn.active,
.vocab-strip.vocab-yellow .vocab-group-3 .lang-btn.active {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  color: #fff;
}

/* ── Content: word table ─────────────────────────────────── */
.vocab-strip-content .vocab-table {
  padding: 0 3rem 2.5rem;
  font-family: "Open Sans", sans-serif;
  flex: 1;
}

.vocab-row {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vocab-row:last-child { border-bottom: none; }

.vocab-strip.vocab-yellow .vocab-row { border-bottom-color: rgba(0, 0, 0, 0.07); }

.vocab-header-row {
  font-family: "Oswald", sans-serif;
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 2px solid rgba(255, 255, 255, 0.18) !important;
}

.vocab-strip.vocab-yellow .vocab-header-row {
  color: rgba(0, 0, 0, 0.35);
  border-bottom-color: rgba(0, 0, 0, 0.12) !important;
}

.vocab-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.6rem 0.5rem;
  font-size: 1.35rem;
  color: rgba(255, 255, 255, 0.88);
}

.vocab-strip.vocab-yellow .vocab-cell { color: rgba(0, 0, 0, 0.82); }

.vocab-cell-zh,
.vocab-cell-zhs {
  font-size: 1.65rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: #fff;
}

.vocab-strip.vocab-yellow .vocab-cell-zh,
.vocab-strip.vocab-yellow .vocab-cell-zhs { color: var(--vocab-yellow-dark); }

/* Same groups 0-3 exception as the lang-btn pills above — word-table
   text also flips to white for these four darker tints. */
.vocab-strip.vocab-yellow .vocab-group-0 .vocab-cell,
.vocab-strip.vocab-yellow .vocab-group-1 .vocab-cell,
.vocab-strip.vocab-yellow .vocab-group-2 .vocab-cell,
.vocab-strip.vocab-yellow .vocab-group-3 .vocab-cell { color: rgba(255, 255, 255, 0.88); }
.vocab-strip.vocab-yellow .vocab-group-0 .vocab-cell-zh,
.vocab-strip.vocab-yellow .vocab-group-0 .vocab-cell-zhs,
.vocab-strip.vocab-yellow .vocab-group-1 .vocab-cell-zh,
.vocab-strip.vocab-yellow .vocab-group-1 .vocab-cell-zhs,
.vocab-strip.vocab-yellow .vocab-group-2 .vocab-cell-zh,
.vocab-strip.vocab-yellow .vocab-group-2 .vocab-cell-zhs,
.vocab-strip.vocab-yellow .vocab-group-3 .vocab-cell-zh,
.vocab-strip.vocab-yellow .vocab-group-3 .vocab-cell-zhs { color: #fff; }

.vocab-cell-en,
.vocab-cell-es {
  font-family: "Lexend", sans-serif;
}

/* Every language column is independently toggleable — hidden until its
   button is active, so any combination (e.g. EN + 繁 + PY) can show
   together. flex reflows automatically as columns are added/removed. */
.vocab-cell-en,
.vocab-cell-es,
.vocab-cell-zh,
.vocab-cell-zhs,
.vocab-cell-ja {
  display: none;
}

.vocab-table.show-en  .vocab-cell-en  { display: block; }
.vocab-table.show-es  .vocab-cell-es  { display: block; }
.vocab-table.show-zh  .vocab-cell-zh  { display: block; }
.vocab-table.show-zhs .vocab-cell-zhs { display: block; }
.vocab-table.show-ja  .vocab-cell-ja  { display: block; }

.vocab-row:nth-child(even):not(.vocab-header-row) {
  background: rgba(255, 255, 255, 0.05);
}

.vocab-strip.vocab-yellow .vocab-row:nth-child(even):not(.vocab-header-row) {
  background: rgba(0, 0, 0, 0.04);
}

/* ── Sub-groups: horizontal fold-outs within a category ─── */
/* One <details> per source sheet, e.g. the 3 Adjectives sheets */

.vocab-groups {
  padding: 0 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  overflow-y: auto;
}

.vocab-group {
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.vocab-group-summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.4rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-family: "Oswald", sans-serif;
  transition: filter 0.2s;
}

.vocab-group-summary:hover { filter: brightness(1.06); }
.vocab-group-summary::-webkit-details-marker { display: none; }

.vocab-group-zh {
  font-family: serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 2px;
}

.vocab-group-en {
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.7;
}

.vocab-group-count {
  margin-left: auto;
  font-size: 0.85rem;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.vocab-group-arrow {
  font-size: 1rem;
  opacity: 0.6;
  transition: transform 0.25s;
}

.vocab-group[open] .vocab-group-arrow { transform: rotate(90deg); }

.vocab-group-body {
  padding: 0.4rem 1.4rem 1.2rem;
}

.vocab-group-body .vocab-table { padding: 0; }
.vocab-group-body .vocab-lang-toggle { padding: 0 0 0.9rem; }

/* Compact variant for 繁 / 简 / PY — keeps the toggle row from feeling
   crowded now that there are 5 buttons; EN/ES stay full-size as the
   primary pair. */
.lang-btn-sm {
  padding: 0.15rem 0.7rem;
  font-size: 0.95rem;
}

/* PY (pinyin): independent show/hide toggle, off by default */
.lang-btn-py { border-style: dashed; }
.lang-btn-py.active { border-style: solid; }

.vocab-group-body .vocab-cell-py {
  display: none;
  opacity: 0.85;
}

.vocab-group-body .vocab-table.show-py .vocab-cell-py { display: block; }

/* かな (Japanese reading): independent show/hide toggle, off by default —
   same treatment as PY, reusing the .lang-btn-py dashed-border style. */
.vocab-group-body .vocab-cell-ja_kana {
  display: none;
  opacity: 0.85;
}

.vocab-group-body .vocab-table.show-ja_kana .vocab-cell-ja_kana { display: block; }

/* Yellow tone scale — Adjectives' 10 subgroups, dark->light */
.vocab-strip.vocab-yellow .vocab-group-0 .vocab-group-summary,
.vocab-strip.vocab-yellow .vocab-group-0 .vocab-group-body { background: var(--vocab-yellow-1); color: #fff; }
.vocab-strip.vocab-yellow .vocab-group-1 .vocab-group-summary,
.vocab-strip.vocab-yellow .vocab-group-1 .vocab-group-body { background: var(--vocab-yellow-2); color: #fff; }
.vocab-strip.vocab-yellow .vocab-group-2 .vocab-group-summary,
.vocab-strip.vocab-yellow .vocab-group-2 .vocab-group-body { background: var(--vocab-yellow-3); color: #fff; }
.vocab-strip.vocab-yellow .vocab-group-3 .vocab-group-summary,
.vocab-strip.vocab-yellow .vocab-group-3 .vocab-group-body { background: var(--vocab-yellow-4); color: #fff; }
.vocab-strip.vocab-yellow .vocab-group-4 .vocab-group-summary,
.vocab-strip.vocab-yellow .vocab-group-4 .vocab-group-body { background: var(--vocab-yellow-5); color: var(--vocab-yellow-dark); }
.vocab-strip.vocab-yellow .vocab-group-5 .vocab-group-summary,
.vocab-strip.vocab-yellow .vocab-group-5 .vocab-group-body { background: var(--vocab-yellow-6); color: var(--vocab-yellow-dark); }
.vocab-strip.vocab-yellow .vocab-group-6 .vocab-group-summary,
.vocab-strip.vocab-yellow .vocab-group-6 .vocab-group-body { background: var(--vocab-yellow-7); color: var(--vocab-yellow-dark); }
.vocab-strip.vocab-yellow .vocab-group-7 .vocab-group-summary,
.vocab-strip.vocab-yellow .vocab-group-7 .vocab-group-body { background: var(--vocab-yellow-8); color: var(--vocab-yellow-dark); }
.vocab-strip.vocab-yellow .vocab-group-8 .vocab-group-summary,
.vocab-strip.vocab-yellow .vocab-group-8 .vocab-group-body { background: var(--vocab-yellow-9); color: var(--vocab-yellow-dark); }
.vocab-strip.vocab-yellow .vocab-group-9 .vocab-group-summary,
.vocab-strip.vocab-yellow .vocab-group-9 .vocab-group-body { background: var(--vocab-yellow-10); color: var(--vocab-yellow-dark); }

.vocab-strip.vocab-blue .vocab-group-0 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-0 .vocab-group-body { background: var(--vocab-blue-1); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-1 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-1 .vocab-group-body { background: var(--vocab-blue-2); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-2 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-2 .vocab-group-body { background: var(--vocab-blue-3); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-3 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-3 .vocab-group-body { background: var(--vocab-blue-4); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-4 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-4 .vocab-group-body { background: var(--vocab-blue-5); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-5 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-5 .vocab-group-body { background: var(--vocab-blue-6); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-6 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-6 .vocab-group-body { background: var(--vocab-blue-7); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-7 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-7 .vocab-group-body { background: var(--vocab-blue-8); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-8 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-8 .vocab-group-body { background: var(--vocab-blue-9); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-9 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-9 .vocab-group-body { background: var(--vocab-blue-10); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-10 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-10 .vocab-group-body { background: var(--vocab-blue-11); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-11 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-11 .vocab-group-body { background: var(--vocab-blue-12); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-12 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-12 .vocab-group-body { background: var(--vocab-blue-13); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-13 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-13 .vocab-group-body { background: var(--vocab-blue-14); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-14 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-14 .vocab-group-body { background: var(--vocab-blue-15); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-15 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-15 .vocab-group-body { background: var(--vocab-blue-16); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-16 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-16 .vocab-group-body { background: var(--vocab-blue-17); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-17 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-17 .vocab-group-body { background: var(--vocab-blue-18); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-18 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-18 .vocab-group-body { background: var(--vocab-blue-19); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-19 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-19 .vocab-group-body { background: var(--vocab-blue-20); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-20 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-20 .vocab-group-body { background: var(--vocab-blue-21); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-21 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-21 .vocab-group-body { background: var(--vocab-blue-22); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-22 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-22 .vocab-group-body { background: var(--vocab-blue-23); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-23 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-23 .vocab-group-body { background: var(--vocab-blue-24); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-24 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-24 .vocab-group-body { background: var(--vocab-blue-25); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-25 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-25 .vocab-group-body { background: var(--vocab-blue-26); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-26 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-26 .vocab-group-body { background: var(--vocab-blue-27); color: #fff; }
.vocab-strip.vocab-blue .vocab-group-27 .vocab-group-summary,
.vocab-strip.vocab-blue .vocab-group-27 .vocab-group-body { background: var(--vocab-blue-28); color: #fff; }

.vocab-strip.vocab-red .vocab-group-0 .vocab-group-summary,
.vocab-strip.vocab-red .vocab-group-0 .vocab-group-body { background: var(--vocab-red-1); color: #fff; }
.vocab-strip.vocab-red .vocab-group-1 .vocab-group-summary,
.vocab-strip.vocab-red .vocab-group-1 .vocab-group-body { background: var(--vocab-red-2); color: #fff; }
.vocab-strip.vocab-red .vocab-group-2 .vocab-group-summary,
.vocab-strip.vocab-red .vocab-group-2 .vocab-group-body { background: var(--vocab-red-3); color: #fff; }
.vocab-strip.vocab-red .vocab-group-3 .vocab-group-summary,
.vocab-strip.vocab-red .vocab-group-3 .vocab-group-body { background: var(--vocab-red-4); color: #fff; }
.vocab-strip.vocab-red .vocab-group-4 .vocab-group-summary,
.vocab-strip.vocab-red .vocab-group-4 .vocab-group-body { background: var(--vocab-red-5); color: #fff; }
.vocab-strip.vocab-red .vocab-group-5 .vocab-group-summary,
.vocab-strip.vocab-red .vocab-group-5 .vocab-group-body { background: var(--vocab-red-6); color: #000; }

/* Verbs' last subgroup (red-6, the lightest tint) reads better with
   dark text/pills than white, per user's visual review — unlike the
   rest of Nouns/Verbs' scale. Desktop needs an explicit .vocab-cell
   override since that rule sets its own color rather than inheriting
   from .vocab-group-body; the mobile overlay's cells already use
   color:inherit so the group-body change above is enough there. */
.vocab-strip.vocab-red .vocab-group-5 .vocab-cell { color: rgba(0, 0, 0, 0.82); }
.vocab-strip.vocab-red .vocab-group-5 .vocab-cell-zh,
.vocab-strip.vocab-red .vocab-group-5 .vocab-cell-zhs { color: #000; }

.vocab-strip.vocab-red .vocab-group-5 .prompt-btn,
.vocab-mobile-section.vocab-red .vocab-group-5 .prompt-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}
.vocab-strip.vocab-red .vocab-group-5 .prompt-btn:hover,
.vocab-mobile-section.vocab-red .vocab-group-5 .prompt-btn:hover { border-color: rgba(0, 0, 0, 0.6); color: #000; }
.vocab-strip.vocab-red .vocab-group-5 .prompt-btn.active,
.vocab-mobile-section.vocab-red .vocab-group-5 .prompt-btn.active {
  background: rgba(0, 0, 0, 0.1);
  border-color: #000;
  color: #000;
}
.vocab-strip.vocab-red .vocab-group-5 .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-red .vocab-group-5 .prompt-btn:disabled:hover {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}

.vocab-strip.vocab-red .vocab-group-5 .lang-btn,
.vocab-mobile-section.vocab-red .vocab-group-5 .lang-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.45);
}
.vocab-strip.vocab-red .vocab-group-5 .lang-btn:hover,
.vocab-mobile-section.vocab-red .vocab-group-5 .lang-btn:hover {
  border-color: rgba(0, 0, 0, 0.7);
  color: #000;
}
.vocab-strip.vocab-red .vocab-group-5 .lang-btn.active,
.vocab-mobile-section.vocab-red .vocab-group-5 .lang-btn.active {
  background: rgba(0, 0, 0, 0.1);
  border-color: #000;
  color: #000;
}

.vocab-mobile-section.vocab-red .vocab-group-5 .vocab-group-body .vocab-header-row {
  color: rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.15) !important;
}

/* Time's last subgroup (burgundy-6, the lightest tint) crosses the same
   white/black contrast threshold Verbs' red-6 does at this lightness (see
   the --vocab-burgundy comment in :root) — same exception, same values.
   No .vocab-strip variant needed: Time has no desktop strip. */
.vocab-mobile-section.vocab-burgundy .vocab-group-5 .prompt-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}
.vocab-mobile-section.vocab-burgundy .vocab-group-5 .prompt-btn:hover { border-color: rgba(0, 0, 0, 0.6); color: #000; }
.vocab-mobile-section.vocab-burgundy .vocab-group-5 .prompt-btn.active {
  background: rgba(0, 0, 0, 0.1);
  border-color: #000;
  color: #000;
}
.vocab-mobile-section.vocab-burgundy .vocab-group-5 .prompt-btn:disabled:hover {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}

.vocab-mobile-section.vocab-burgundy .vocab-group-5 .lang-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.45);
}
.vocab-mobile-section.vocab-burgundy .vocab-group-5 .lang-btn:hover {
  border-color: rgba(0, 0, 0, 0.7);
  color: #000;
}
.vocab-mobile-section.vocab-burgundy .vocab-group-5 .lang-btn.active {
  background: rgba(0, 0, 0, 0.1);
  border-color: #000;
  color: #000;
}

.vocab-mobile-section.vocab-burgundy .vocab-group-5 .vocab-group-body .vocab-header-row {
  color: rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.15) !important;
}

/* ── Flashcard (per sub-group) ────────────────────────────
   Minimalist click-to-flip card, inspired by
   https://codepen.io/hex/pen/jzqKqr — ported/simplified, not copied. */

.vocab-flashcard-section {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

.vocab-flashcard-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}

/* The [hidden] attribute and .vocab-flashcard-controls{display:flex} have
   equal specificity, and our rule comes later in the cascade — without
   this, JS setting el.hidden=true has no visible effect. */
.vocab-flashcard-controls[hidden] { display: none; }

.vocab-flashcard-label {
  font-family: "Oswald", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.65;
}

.vocab-prompt-toggle { display: flex; gap: 0.4rem; }

.prompt-btn {
  padding: 0.15rem 0.75rem;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: "Oswald", sans-serif;
  letter-spacing: 1px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.prompt-btn:hover { border-color: rgba(0, 0, 0, 0.6); color: #000; }

.prompt-btn.active {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.75);
  color: #000;
  font-weight: 600;
}

.prompt-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-style: dotted;
}

.prompt-btn:disabled:hover { border-color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.55); }

/* Adverbs groups 0-2 (orange-1..3) are homogenized to white text/pills;
   groups 3-5 (orange-4..6) stay dark-on-light, per user's visual review —
   updated from the original group-0-only exception. */
.vocab-mobile-section.vocab-orange .vocab-group-0 .prompt-btn,
.vocab-mobile-section.vocab-orange .vocab-group-1 .prompt-btn,
.vocab-mobile-section.vocab-orange .vocab-group-2 .prompt-btn {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}
.vocab-mobile-section.vocab-orange .vocab-group-0 .prompt-btn:hover,
.vocab-mobile-section.vocab-orange .vocab-group-1 .prompt-btn:hover,
.vocab-mobile-section.vocab-orange .vocab-group-2 .prompt-btn:hover { border-color: #fff; color: #fff; }
.vocab-mobile-section.vocab-orange .vocab-group-0 .prompt-btn.active,
.vocab-mobile-section.vocab-orange .vocab-group-1 .prompt-btn.active,
.vocab-mobile-section.vocab-orange .vocab-group-2 .prompt-btn.active {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  color: #fff;
}
.vocab-mobile-section.vocab-orange .vocab-group-0 .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-orange .vocab-group-1 .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-orange .vocab-group-2 .prompt-btn:disabled:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}

/* Nouns/Verbs run white-on-dark for their ENTIRE scale (unlike Adverbs,
   which is dark-on-light except groups 0-2) — so unlike the orange
   exception above, this applies to every subgroup, not just group-0.
   Same white-based values, desktop strip + mobile overlay both. Objects
   (green) has no desktop strip (see $categories) so only the mobile
   selector is needed there, same white-on-dark pairing as Blue/Red. */
.vocab-strip.vocab-blue .prompt-btn,
.vocab-strip.vocab-red .prompt-btn,
.vocab-mobile-section.vocab-blue .prompt-btn,
.vocab-mobile-section.vocab-red .prompt-btn,
.vocab-mobile-section.vocab-green .prompt-btn,
.vocab-mobile-section.vocab-violet .prompt-btn,
.vocab-mobile-section.vocab-magenta .prompt-btn,
.vocab-mobile-section.vocab-brown .prompt-btn,
.vocab-mobile-section.vocab-gray .prompt-btn,
.vocab-mobile-section.vocab-black .prompt-btn,
.vocab-mobile-section.vocab-burgundy .prompt-btn {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}
.vocab-strip.vocab-blue .prompt-btn:hover,
.vocab-strip.vocab-red .prompt-btn:hover,
.vocab-mobile-section.vocab-blue .prompt-btn:hover,
.vocab-mobile-section.vocab-red .prompt-btn:hover,
.vocab-mobile-section.vocab-green .prompt-btn:hover,
.vocab-mobile-section.vocab-violet .prompt-btn:hover,
.vocab-mobile-section.vocab-magenta .prompt-btn:hover,
.vocab-mobile-section.vocab-brown .prompt-btn:hover,
.vocab-mobile-section.vocab-gray .prompt-btn:hover,
.vocab-mobile-section.vocab-black .prompt-btn:hover,
.vocab-mobile-section.vocab-burgundy .prompt-btn:hover { border-color: #fff; color: #fff; }
.vocab-strip.vocab-blue .prompt-btn.active,
.vocab-strip.vocab-red .prompt-btn.active,
.vocab-mobile-section.vocab-blue .prompt-btn.active,
.vocab-mobile-section.vocab-red .prompt-btn.active,
.vocab-mobile-section.vocab-green .prompt-btn.active,
.vocab-mobile-section.vocab-violet .prompt-btn.active,
.vocab-mobile-section.vocab-magenta .prompt-btn.active,
.vocab-mobile-section.vocab-brown .prompt-btn.active,
.vocab-mobile-section.vocab-gray .prompt-btn.active,
.vocab-mobile-section.vocab-black .prompt-btn.active,
.vocab-mobile-section.vocab-burgundy .prompt-btn.active {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  color: #fff;
}
.vocab-strip.vocab-blue .prompt-btn:disabled:hover,
.vocab-strip.vocab-red .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-blue .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-red .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-green .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-violet .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-magenta .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-brown .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-gray .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-black .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-burgundy .prompt-btn:disabled:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}

/* Body groups 0-2 (steps 1-3, the "clear"/lighter end of the brown
   scale) flip to black — the opposite exception direction from every
   other category (those flip light-tint groups from dark-default to
   white; here the whole category defaults white, and only the light
   end needs black), because this is the first scale wide enough that
   no single text color works end to end. See the --vocab-brown-*
   comment in :root for the contrast math. */
.vocab-mobile-section.vocab-brown .vocab-group-0 .prompt-btn,
.vocab-mobile-section.vocab-brown .vocab-group-1 .prompt-btn,
.vocab-mobile-section.vocab-brown .vocab-group-2 .prompt-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}
.vocab-mobile-section.vocab-brown .vocab-group-0 .prompt-btn:hover,
.vocab-mobile-section.vocab-brown .vocab-group-1 .prompt-btn:hover,
.vocab-mobile-section.vocab-brown .vocab-group-2 .prompt-btn:hover { border-color: rgba(0, 0, 0, 0.6); color: #000; }
.vocab-mobile-section.vocab-brown .vocab-group-0 .prompt-btn.active,
.vocab-mobile-section.vocab-brown .vocab-group-1 .prompt-btn.active,
.vocab-mobile-section.vocab-brown .vocab-group-2 .prompt-btn.active {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.75);
  color: #000;
  font-weight: 600;
}
.vocab-mobile-section.vocab-brown .vocab-group-0 .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-brown .vocab-group-1 .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-brown .vocab-group-2 .prompt-btn:disabled:hover {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}

.vocab-mobile-section.vocab-brown .vocab-group-0 .lang-btn,
.vocab-mobile-section.vocab-brown .vocab-group-1 .lang-btn,
.vocab-mobile-section.vocab-brown .vocab-group-2 .lang-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}
.vocab-mobile-section.vocab-brown .vocab-group-0 .lang-btn:hover,
.vocab-mobile-section.vocab-brown .vocab-group-1 .lang-btn:hover,
.vocab-mobile-section.vocab-brown .vocab-group-2 .lang-btn:hover { border-color: rgba(0, 0, 0, 0.6); color: #000; }
.vocab-mobile-section.vocab-brown .vocab-group-0 .lang-btn.active,
.vocab-mobile-section.vocab-brown .vocab-group-1 .lang-btn.active,
.vocab-mobile-section.vocab-brown .vocab-group-2 .lang-btn.active {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.75);
  color: #000;
  font-weight: 600;
}

/* Not (gray) groups 0-1 (steps 1-2, the light end): same black-flip
   exception as Brown above — the crossover here just falls one step
   earlier since Gray only has 4 subgroups instead of 7. */
.vocab-mobile-section.vocab-gray .vocab-group-0 .prompt-btn,
.vocab-mobile-section.vocab-gray .vocab-group-1 .prompt-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}
.vocab-mobile-section.vocab-gray .vocab-group-0 .prompt-btn:hover,
.vocab-mobile-section.vocab-gray .vocab-group-1 .prompt-btn:hover { border-color: rgba(0, 0, 0, 0.6); color: #000; }
.vocab-mobile-section.vocab-gray .vocab-group-0 .prompt-btn.active,
.vocab-mobile-section.vocab-gray .vocab-group-1 .prompt-btn.active {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.75);
  color: #000;
  font-weight: 600;
}
.vocab-mobile-section.vocab-gray .vocab-group-0 .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-gray .vocab-group-1 .prompt-btn:disabled:hover {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}

.vocab-mobile-section.vocab-gray .vocab-group-0 .lang-btn,
.vocab-mobile-section.vocab-gray .vocab-group-1 .lang-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}
.vocab-mobile-section.vocab-gray .vocab-group-0 .lang-btn:hover,
.vocab-mobile-section.vocab-gray .vocab-group-1 .lang-btn:hover { border-color: rgba(0, 0, 0, 0.6); color: #000; }
.vocab-mobile-section.vocab-gray .vocab-group-0 .lang-btn.active,
.vocab-mobile-section.vocab-gray .vocab-group-1 .lang-btn.active {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.75);
  color: #000;
  font-weight: 600;
}

/* Adjectives groups 0-3: same white-flip exception as .lang-btn/.vocab-
   cell above — .prompt-btn's plain default is already dark/black (tuned
   for Yellow), so these four subgroups need an explicit white override. */
.vocab-strip.vocab-yellow .vocab-group-0 .prompt-btn,
.vocab-strip.vocab-yellow .vocab-group-1 .prompt-btn,
.vocab-strip.vocab-yellow .vocab-group-2 .prompt-btn,
.vocab-strip.vocab-yellow .vocab-group-3 .prompt-btn,
.vocab-mobile-section.vocab-yellow .vocab-group-0 .prompt-btn,
.vocab-mobile-section.vocab-yellow .vocab-group-1 .prompt-btn,
.vocab-mobile-section.vocab-yellow .vocab-group-2 .prompt-btn,
.vocab-mobile-section.vocab-yellow .vocab-group-3 .prompt-btn {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}
.vocab-strip.vocab-yellow .vocab-group-0 .prompt-btn:hover,
.vocab-strip.vocab-yellow .vocab-group-1 .prompt-btn:hover,
.vocab-strip.vocab-yellow .vocab-group-2 .prompt-btn:hover,
.vocab-strip.vocab-yellow .vocab-group-3 .prompt-btn:hover,
.vocab-mobile-section.vocab-yellow .vocab-group-0 .prompt-btn:hover,
.vocab-mobile-section.vocab-yellow .vocab-group-1 .prompt-btn:hover,
.vocab-mobile-section.vocab-yellow .vocab-group-2 .prompt-btn:hover,
.vocab-mobile-section.vocab-yellow .vocab-group-3 .prompt-btn:hover { border-color: #fff; color: #fff; }
.vocab-strip.vocab-yellow .vocab-group-0 .prompt-btn.active,
.vocab-strip.vocab-yellow .vocab-group-1 .prompt-btn.active,
.vocab-strip.vocab-yellow .vocab-group-2 .prompt-btn.active,
.vocab-strip.vocab-yellow .vocab-group-3 .prompt-btn.active,
.vocab-mobile-section.vocab-yellow .vocab-group-0 .prompt-btn.active,
.vocab-mobile-section.vocab-yellow .vocab-group-1 .prompt-btn.active,
.vocab-mobile-section.vocab-yellow .vocab-group-2 .prompt-btn.active,
.vocab-mobile-section.vocab-yellow .vocab-group-3 .prompt-btn.active {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  color: #fff;
}
.vocab-strip.vocab-yellow .vocab-group-0 .prompt-btn:disabled:hover,
.vocab-strip.vocab-yellow .vocab-group-1 .prompt-btn:disabled:hover,
.vocab-strip.vocab-yellow .vocab-group-2 .prompt-btn:disabled:hover,
.vocab-strip.vocab-yellow .vocab-group-3 .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-yellow .vocab-group-0 .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-yellow .vocab-group-1 .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-yellow .vocab-group-2 .prompt-btn:disabled:hover,
.vocab-mobile-section.vocab-yellow .vocab-group-3 .prompt-btn:disabled:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}

/* ── Front-card effect toggles (Tone colors / Phonetic annotation) ───
   Same idea as the Speed Reader's toggle switches, restyled as a small
   pill switch so it reads against any of the three strip colors (unlike
   .prompt-btn's black-based palette, tuned mainly for the yellow strip,
   these use colors that stay visible on the dark blue/red group
   backgrounds too). Only affects the flashcard's FRONT face. */

.vocab-fx-controls { gap: 0.6rem; }

.vocab-fx-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.vocab-fx-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

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

.vocab-fx-toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(128, 128, 128, 0.45);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s;
}

.vocab-fx-toggle-slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.vocab-fx-toggle-switch input:checked + .vocab-fx-toggle-slider {
  background: #3ddc73;
}

.vocab-fx-toggle-switch input:checked + .vocab-fx-toggle-slider::before {
  transform: translateX(16px);
}

.vocab-fx-toggle-switch input:disabled + .vocab-fx-toggle-slider {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Two-per-row toggle grids: the four phonetic toggles (ZH I/II on the
   first row, JP I/II on the second) and Tone colors Default / Custom. Overrides .vocab-flashcard-controls'
   flex layout (same specificity, later in the cascade). */
.vocab-toggle-grid {
  display: grid;
  /* At most 2 per row; auto-fit drops to 1 per row (stacked) whenever the
     panel is too narrow for two ~13rem columns, regardless of viewport. */
  grid-template-columns: repeat(auto-fit, minmax(max(13rem, calc(50% - 0.6rem)), 1fr));
  gap: 0.75rem 1.2rem;
  align-items: start;
}

/* Mobile: always stacked, one toggle per row. */
@media (max-width: 768px) {
  .vocab-toggle-grid { grid-template-columns: 1fr; }
}

.vocab-toggle-item { gap: 0.55rem; align-items: flex-start; }
.vocab-toggle-item .vocab-fx-toggle-switch { margin-top: 1px; }

.vocab-toggle-item .vocab-flashcard-label {
  line-height: 1.25;
  cursor: pointer;
}

.vocab-toggle-item .vocab-flashcard-label small {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
}

.vocab-toggle-item.is-disabled .vocab-flashcard-label {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Tone colors — Custom: 5 pickers (tones 1-4 + neutral), hidden until the
   Custom toggle is on (vocab.js adds .is-visible). Spans the full grid
   width below the Default / Custom pair. Same look as /reader/'s
   .reader-tone-custom-colors. */
.vocab-tone-custom-colors {
  grid-column: 1 / -1;
  display: none;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.vocab-tone-custom-colors.is-visible { display: flex; }

.vocab-tone-custom-colors label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-family: "Oswald", sans-serif;
  font-size: 0.75rem;
  opacity: 0.75;
  cursor: pointer;
}

.vocab-tone-custom-colors input[type="color"] {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  cursor: pointer;
  background: none;
}

/* Bopomofo glyphs aren't in Open Sans — let the system CJK font render them. */
.flashcard-pinyin-rt.flashcard-bopomofo-rt {
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-weight: 400;
}

/* ── Front-card color swatches — same palette + bg/fg pairing as the
   Speed Reader's stage swatches (reader.css .reader-color-swatches /
   --rsvp-bg / --rsvp-fg), applied the same way: bg → the FRONT face's
   background (--fc-bg), fg → its text color (--fc-font-color), consumed
   by .flashcard-front/.flashcard-word/.flashcard-pinyin-rt below. Since
   2026-11-03 the vars live on the whole .vocab-flashcard (not just the
   front face), so the BACK face takes the same pair too: bg → its
   background, fg → every line of text (pronunciation, meaning, sentences,
   speaker icon). Tone-flash-N colors (Tone colors toggle) still win
   over --fc-font-color via selector specificity — same "toggle wins over
   theme" precedent as the Reader's own tone-color-vs-swatch handling. */

.vocab-flashcard-swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 480px;
  margin: 0 auto 1rem;
}

.vocab-flashcard-swatch {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  padding: 0;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.vocab-flashcard-swatch:hover {
  transform: scale(1.1);
}

.vocab-flashcard-swatch.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
}

/* Swaps the currently applied --fc-bg/--fc-font-color pair in place, same
   role as the Speed Reader's #reader-swatch-swap (reader.css) — one swap
   click covers both orientations of a pair instead of a second preset
   button per pair. See swapFlashcardSwatchColors() in vocab.js. */
.vocab-flashcard-swatch-swap {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: border-color 0.2s, transform 0.15s;
}

.vocab-flashcard-swatch-swap:hover {
  transform: scale(1.1);
}

.vocab-flashcard-swatch-swap img {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* Custom two-color picker — diagonally-split native color inputs + an
   explicit "is Custom active" checkbox, same as the Speed Reader's own
   #reader-swatch-custom-picker (reader.css), but keyed by class instead of
   id since this block repeats once per subgroup. */
.vocab-flashcard-swatch-custom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.3rem;
}

.vocab-flashcard-swatch-custom-picker {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.15s;
}

.vocab-flashcard-swatch-custom-picker:hover {
  transform: scale(1.1);
}

.vocab-flashcard-swatch-custom-picker.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
}

.vocab-flashcard-swatch-custom-picker input[type="color"] {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  cursor: pointer;
  background: none;
}

.vocab-flashcard-swatch-custom-picker input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.vocab-flashcard-swatch-custom-picker input[type="color"]::-webkit-color-swatch { border: none; }
.vocab-flashcard-swatch-custom-picker input[type="color"]::-moz-color-swatch { border: none; }

.vocab-flashcard-swatch-custom-bg { clip-path: polygon(0 0, 100% 0, 0 100%); }
.vocab-flashcard-swatch-custom-fg { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.vocab-flashcard-swatch-custom-checkbox {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: "Lexend", sans-serif;
  font-size: 0.8rem;
  color: #555;
  cursor: pointer;
  user-select: none;
}

.vocab-flashcard-swatch-custom-checkbox input {
  cursor: pointer;
}

/* ── Flip mechanics ───────────────────────────────────────
   Perspective lives on the OUTER element (.vocab-flashcard);
   the ROTATION lives on the inner wrapper — a 3D transform
   only reads as 3D if perspective is set on an ancestor, not
   on the element being rotated itself. */

.vocab-flashcard-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.vocab-flashcard {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 340px;
  perspective: 1200px;
  cursor: pointer;
  container-type: inline-size;
}

.vocab-flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.vocab-flashcard.flipped .vocab-flashcard-inner { transform: rotateY(180deg); }

.flashcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  /* No top accent bar (removed 2026-11-03) — the per-category
     border-top-color rules further down are now inert. */
  overflow-y: auto;
}

.flashcard-face.flashcard-front,
.flashcard-face.flashcard-back {
  background: var(--fc-bg, #fff);
}

.flashcard-back {
  transform: rotateY(180deg);
  border-top-color: var(--vocab-yellow-3);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.flashcard-word {
  font-family: serif;
  font-size: clamp(2.2rem, 22cqi, 7.6rem);
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--fc-font-color, #222);
  text-align: center;
  word-break: break-word;
}

/* EN / ES fronts: Lexend 400, matching the back face's meaning and the
   Speed Reader's default Font I (only Lexend 200/400 are loaded, see
   custom_head.html — 600 would be faux-bolded). CJK fronts keep serif. */
.flashcard-word.is-latin {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  letter-spacing: normal;
}

/* Tone coloring for Traditional/Simplified prompts — same mapping as the
   Speed Reader: gold=1st, red=2nd, purple=3rd, blue=4th, mid-dark gray=
   neutral (5th/tone sandhi — e.g. the 子 in 鴨子). */
.flashcard-word .tone-flash-1,
.flashcard-meaning .tone-flash-1 { color: var(--fc-tone-1, #C88A00); }
.flashcard-word .tone-flash-2,
.flashcard-meaning .tone-flash-2 { color: var(--fc-tone-2, #FF0000); }
.flashcard-word .tone-flash-3,
.flashcard-meaning .tone-flash-3 { color: var(--fc-tone-3, #A020F0); }
.flashcard-word .tone-flash-4,
.flashcard-meaning .tone-flash-4 { color: var(--fc-tone-4, #1C41FF); }
.flashcard-word .tone-flash-0,
.flashcard-meaning .tone-flash-0 { color: var(--fc-tone-0, #595959); }

/* Phonetic annotation (pinyin / furigana) on the FRONT card only — same
   reading-aid idea as the Speed Reader's rt.rsvp-pinyin (plain color,
   doesn't compete with the tone-flash-N hue underneath it), but built
   from absolutely-positioned spans instead of native <ruby>/<rt>: native
   ruby reserves flow height for the annotation row, which pushes the
   character itself down out of the card's vertical center. Positioning
   the reading out of flow keeps the character centered exactly as it is
   with the toggle off, with the reading floating above it instead. */
.flashcard-char-wrap {
  position: relative;
  display: inline-block;
}

.flashcard-pinyin-rt {
  position: absolute;
  bottom: 100%;
  left: 50%;
  /* CJK glyphs carry little built-in leading above their tallest stroke,
     so bottom:100% alone sits right at the stroke tip — this multiple
     scales with the reading's own font-size (itself a fraction of the
     card's word size), so the gap stays proportional at every card
     size instead of shrinking away on small words. */
  transform: translateX(-50%) translateY(-1.1em);
  white-space: nowrap;
  pointer-events: none;
  color: var(--fc-font-color, #888);
  /* NOT Lexend — it renders 1st-tone macron vowels (ā/ē/ī/ō/ū) as a
     detached bar next to a bare base letter instead of one combined
     glyph, reproducible across every weight. Same bug, same fix as the
     Speed Reader's rt.rsvp-pinyin. */
  font-family: "Open Sans", sans-serif;
  font-size: 0.38em;
  font-weight: 200;
  letter-spacing: normal;
}

.flashcard-answers {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* ── Back face — unlabeled, centered stack: pronunciation /
   meaning / sentence, mirroring
   https://codepen.io/hex/pen/jzqKqr's kana / meaning / sentence. */

.flashcard-back-pinyin {
  /* NOT Lexend — same 1st-tone macron-vowel glyph bug as
     .flashcard-pinyin-rt above. */
  font-family: "Open Sans", sans-serif;
  font-style: normal;
  font-weight: 200;
  font-size: 1.45rem;
  color: var(--fc-font-color, #888);
}


.flashcard-meaning {
  font-family: "Lexend", sans-serif;
  font-size: 2.75rem;
  font-weight: 400;
  color: var(--fc-font-color, #222);
  word-break: break-word;
}

.flashcard-meaning.is-zh,
.flashcard-meaning.is-ja {
  font-family: serif;
  font-size: 3.8rem;
  letter-spacing: 1px;
}

.flashcard-back-sentence {
  font-family: "Lexend", sans-serif;
  font-size: 1.45rem;
  line-height: 1.4;
  color: var(--fc-font-color, #888);
}

.flashcard-back-sentence.is-zh,
.flashcard-back-sentence.is-ja {
  font-family: serif;
  font-size: 1.75rem;
}

/* Click-to-hear per sentence — same speakerButton()/.vocab-dict-speaker
   icon the dictionary popup uses for its own example sentences, just
   sized down to sit comfortably next to this smaller sentence text.
   align-items: center (not flex-start) so a wrapped 2-line CJK sentence
   still centers against the icon, same reasoning as .vocab-dict-sentence. */
.flashcard-back-sentence-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.flashcard-back-sentence-row .vocab-dict-speaker {
  width: 26px;
  height: 26px;
  color: var(--fc-font-color, rgba(0, 0, 0, 0.55));
  background: color-mix(in srgb, var(--fc-font-color, #000) 10%, transparent);
}

.flashcard-back-sentence-row .vocab-dict-speaker:hover {
  color: var(--fc-font-color, #000);
  background: color-mix(in srgb, var(--fc-font-color, #000) 20%, transparent);
}

.flashcard-back-sentence-row .vocab-dict-speaker svg {
  width: 15px;
  height: 15px;
}

/* Extra block appended when TEST WITH is Traditional/Simplified: the
   original sentence's pinyin + the sentence itself, below the translation,
   set off with a thin divider so the two groups read as separate — the
   divider (middle dotted line) is the fixed reference point the rest of
   the back face's spacing/sizing was scaled around. */
.flashcard-back-extra {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px dashed color-mix(in srgb, var(--fc-font-color, #000) 25%, transparent);
  width: 80%;
}

.sentence-highlight {
  /* No distinguishing style — reads identically to the rest of the
     sentence, just marks the target word in the DOM. */
}

/* Match each sub-group's tone on its flashcard's accent bars.
   Scoped by strip/section color ancestor (desktop .vocab-strip.vocab-COLOR,
   mobile .vocab-mobile-section.vocab-COLOR) — the .vocab-group-N index class
   restarts at 0 for each category (Nouns, Verbs, Adjectives all have their
   own N=0 subgroup), so leaving these unscoped (or scoped only to desktop)
   would let e.g. Nouns' subgroup 0 inherit Adjectives' yellow-1 accent color
   instead of its own blue-1, or lose the color entirely on mobile. */
.vocab-strip.vocab-yellow .vocab-group-0 .flashcard-front,
.vocab-mobile-section.vocab-yellow .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-yellow-1); }
.vocab-strip.vocab-yellow .vocab-group-0 .flashcard-back,
.vocab-mobile-section.vocab-yellow .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-yellow-2); }
.vocab-strip.vocab-yellow .vocab-group-1 .flashcard-front,
.vocab-mobile-section.vocab-yellow .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-yellow-2); }
.vocab-strip.vocab-yellow .vocab-group-1 .flashcard-back,
.vocab-mobile-section.vocab-yellow .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-yellow-3); }
.vocab-strip.vocab-yellow .vocab-group-2 .flashcard-front,
.vocab-mobile-section.vocab-yellow .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-yellow-3); }
.vocab-strip.vocab-yellow .vocab-group-2 .flashcard-back,
.vocab-mobile-section.vocab-yellow .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-yellow-4); }
.vocab-strip.vocab-yellow .vocab-group-3 .flashcard-front,
.vocab-mobile-section.vocab-yellow .vocab-group-3 .flashcard-front { border-top-color: var(--vocab-yellow-4); }
.vocab-strip.vocab-yellow .vocab-group-3 .flashcard-back,
.vocab-mobile-section.vocab-yellow .vocab-group-3 .flashcard-back  { border-top-color: var(--vocab-yellow-5); }
.vocab-strip.vocab-yellow .vocab-group-4 .flashcard-front,
.vocab-mobile-section.vocab-yellow .vocab-group-4 .flashcard-front { border-top-color: var(--vocab-yellow-5); }
.vocab-strip.vocab-yellow .vocab-group-4 .flashcard-back,
.vocab-mobile-section.vocab-yellow .vocab-group-4 .flashcard-back  { border-top-color: var(--vocab-yellow-6); }
.vocab-strip.vocab-yellow .vocab-group-5 .flashcard-front,
.vocab-mobile-section.vocab-yellow .vocab-group-5 .flashcard-front { border-top-color: var(--vocab-yellow-6); }
.vocab-strip.vocab-yellow .vocab-group-5 .flashcard-back,
.vocab-mobile-section.vocab-yellow .vocab-group-5 .flashcard-back  { border-top-color: var(--vocab-yellow-7); }
.vocab-strip.vocab-yellow .vocab-group-6 .flashcard-front,
.vocab-mobile-section.vocab-yellow .vocab-group-6 .flashcard-front { border-top-color: var(--vocab-yellow-7); }
.vocab-strip.vocab-yellow .vocab-group-6 .flashcard-back,
.vocab-mobile-section.vocab-yellow .vocab-group-6 .flashcard-back  { border-top-color: var(--vocab-yellow-8); }
.vocab-strip.vocab-yellow .vocab-group-7 .flashcard-front,
.vocab-mobile-section.vocab-yellow .vocab-group-7 .flashcard-front { border-top-color: var(--vocab-yellow-8); }
.vocab-strip.vocab-yellow .vocab-group-7 .flashcard-back,
.vocab-mobile-section.vocab-yellow .vocab-group-7 .flashcard-back  { border-top-color: var(--vocab-yellow-9); }
.vocab-strip.vocab-yellow .vocab-group-8 .flashcard-front,
.vocab-mobile-section.vocab-yellow .vocab-group-8 .flashcard-front { border-top-color: var(--vocab-yellow-9); }
.vocab-strip.vocab-yellow .vocab-group-8 .flashcard-back,
.vocab-mobile-section.vocab-yellow .vocab-group-8 .flashcard-back  { border-top-color: var(--vocab-yellow-10); }
.vocab-strip.vocab-yellow .vocab-group-9 .flashcard-front,
.vocab-mobile-section.vocab-yellow .vocab-group-9 .flashcard-front { border-top-color: var(--vocab-yellow-10); }
.vocab-strip.vocab-yellow .vocab-group-9 .flashcard-back,
.vocab-mobile-section.vocab-yellow .vocab-group-9 .flashcard-back  { border-top-color: var(--vocab-yellow-10); }

/* Orange — Adverbs. Mobile-overlay only (no .vocab-strip.vocab-orange
   exists, see the $categories comment in custom_body.html). 6 subgroups,
   one tone per subgroup like the other colors, clamped at orange-6 same
   as e.g. Adjectives clamps at yellow-10. */
.vocab-mobile-section.vocab-orange .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-orange-1); }
.vocab-mobile-section.vocab-orange .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-orange-2); }
.vocab-mobile-section.vocab-orange .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-orange-2); }
.vocab-mobile-section.vocab-orange .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-orange-3); }
.vocab-mobile-section.vocab-orange .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-orange-3); }
.vocab-mobile-section.vocab-orange .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-orange-4); }
.vocab-mobile-section.vocab-orange .vocab-group-3 .flashcard-front { border-top-color: var(--vocab-orange-4); }
.vocab-mobile-section.vocab-orange .vocab-group-3 .flashcard-back  { border-top-color: var(--vocab-orange-5); }
.vocab-mobile-section.vocab-orange .vocab-group-4 .flashcard-front { border-top-color: var(--vocab-orange-5); }
.vocab-mobile-section.vocab-orange .vocab-group-4 .flashcard-back  { border-top-color: var(--vocab-orange-6); }
.vocab-mobile-section.vocab-orange .vocab-group-5 .flashcard-front { border-top-color: var(--vocab-orange-6); }
.vocab-mobile-section.vocab-orange .vocab-group-5 .flashcard-back  { border-top-color: var(--vocab-orange-6); }

.vocab-mobile-section.vocab-cream .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-cream-1); }
.vocab-mobile-section.vocab-cream .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-cream-2); }
.vocab-mobile-section.vocab-cream .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-cream-2); }
.vocab-mobile-section.vocab-cream .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-cream-3); }
.vocab-mobile-section.vocab-cream .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-cream-3); }
.vocab-mobile-section.vocab-cream .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-cream-4); }
.vocab-mobile-section.vocab-cream .vocab-group-3 .flashcard-front { border-top-color: var(--vocab-cream-4); }
.vocab-mobile-section.vocab-cream .vocab-group-3 .flashcard-back  { border-top-color: var(--vocab-cream-5); }
.vocab-mobile-section.vocab-cream .vocab-group-4 .flashcard-front { border-top-color: var(--vocab-cream-5); }
.vocab-mobile-section.vocab-cream .vocab-group-4 .flashcard-back  { border-top-color: var(--vocab-cream-5); }

.vocab-mobile-section.vocab-aqua .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-aqua-1); }
.vocab-mobile-section.vocab-aqua .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-aqua-2); }
.vocab-mobile-section.vocab-aqua .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-aqua-2); }
.vocab-mobile-section.vocab-aqua .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-aqua-3); }
.vocab-mobile-section.vocab-aqua .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-aqua-3); }
.vocab-mobile-section.vocab-aqua .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-aqua-4); }
.vocab-mobile-section.vocab-aqua .vocab-group-3 .flashcard-front { border-top-color: var(--vocab-aqua-4); }
.vocab-mobile-section.vocab-aqua .vocab-group-3 .flashcard-back  { border-top-color: var(--vocab-aqua-5); }
.vocab-mobile-section.vocab-aqua .vocab-group-4 .flashcard-front { border-top-color: var(--vocab-aqua-5); }
.vocab-mobile-section.vocab-aqua .vocab-group-4 .flashcard-back  { border-top-color: var(--vocab-aqua-6); }
.vocab-mobile-section.vocab-aqua .vocab-group-5 .flashcard-front { border-top-color: var(--vocab-aqua-6); }
.vocab-mobile-section.vocab-aqua .vocab-group-5 .flashcard-back  { border-top-color: var(--vocab-aqua-7); }
.vocab-mobile-section.vocab-aqua .vocab-group-6 .flashcard-front { border-top-color: var(--vocab-aqua-7); }
.vocab-mobile-section.vocab-aqua .vocab-group-6 .flashcard-back  { border-top-color: var(--vocab-aqua-8); }
.vocab-mobile-section.vocab-aqua .vocab-group-7 .flashcard-front { border-top-color: var(--vocab-aqua-8); }
.vocab-mobile-section.vocab-aqua .vocab-group-7 .flashcard-back  { border-top-color: var(--vocab-aqua-9); }
.vocab-mobile-section.vocab-aqua .vocab-group-8 .flashcard-front { border-top-color: var(--vocab-aqua-9); }
.vocab-mobile-section.vocab-aqua .vocab-group-8 .flashcard-back  { border-top-color: var(--vocab-aqua-10); }
.vocab-mobile-section.vocab-aqua .vocab-group-9 .flashcard-front { border-top-color: var(--vocab-aqua-10); }
.vocab-mobile-section.vocab-aqua .vocab-group-9 .flashcard-back  { border-top-color: var(--vocab-aqua-11); }
.vocab-mobile-section.vocab-aqua .vocab-group-10 .flashcard-front { border-top-color: var(--vocab-aqua-11); }
.vocab-mobile-section.vocab-aqua .vocab-group-10 .flashcard-back  { border-top-color: var(--vocab-aqua-12); }
.vocab-mobile-section.vocab-aqua .vocab-group-11 .flashcard-front { border-top-color: var(--vocab-aqua-12); }
.vocab-mobile-section.vocab-aqua .vocab-group-11 .flashcard-back  { border-top-color: var(--vocab-aqua-12); }

.vocab-mobile-section.vocab-violet .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-violet-1); }
.vocab-mobile-section.vocab-violet .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-violet-2); }
.vocab-mobile-section.vocab-violet .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-violet-2); }
.vocab-mobile-section.vocab-violet .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-violet-3); }
.vocab-mobile-section.vocab-violet .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-violet-3); }
.vocab-mobile-section.vocab-violet .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-violet-4); }
.vocab-mobile-section.vocab-violet .vocab-group-3 .flashcard-front { border-top-color: var(--vocab-violet-4); }
.vocab-mobile-section.vocab-violet .vocab-group-3 .flashcard-back  { border-top-color: var(--vocab-violet-5); }
.vocab-mobile-section.vocab-violet .vocab-group-4 .flashcard-front { border-top-color: var(--vocab-violet-5); }
.vocab-mobile-section.vocab-violet .vocab-group-4 .flashcard-back  { border-top-color: var(--vocab-violet-6); }
.vocab-mobile-section.vocab-violet .vocab-group-5 .flashcard-front { border-top-color: var(--vocab-violet-6); }
.vocab-mobile-section.vocab-violet .vocab-group-5 .flashcard-back  { border-top-color: var(--vocab-violet-7); }
.vocab-mobile-section.vocab-violet .vocab-group-6 .flashcard-front { border-top-color: var(--vocab-violet-7); }
.vocab-mobile-section.vocab-violet .vocab-group-6 .flashcard-back  { border-top-color: var(--vocab-violet-8); }
.vocab-mobile-section.vocab-violet .vocab-group-7 .flashcard-front { border-top-color: var(--vocab-violet-8); }
.vocab-mobile-section.vocab-violet .vocab-group-7 .flashcard-back  { border-top-color: var(--vocab-violet-8); }

.vocab-mobile-section.vocab-magenta .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-magenta-1); }
.vocab-mobile-section.vocab-magenta .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-magenta-2); }
.vocab-mobile-section.vocab-magenta .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-magenta-2); }
.vocab-mobile-section.vocab-magenta .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-magenta-3); }
.vocab-mobile-section.vocab-magenta .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-magenta-3); }
.vocab-mobile-section.vocab-magenta .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-magenta-4); }
.vocab-mobile-section.vocab-magenta .vocab-group-3 .flashcard-front { border-top-color: var(--vocab-magenta-4); }
.vocab-mobile-section.vocab-magenta .vocab-group-3 .flashcard-back  { border-top-color: var(--vocab-magenta-5); }
.vocab-mobile-section.vocab-magenta .vocab-group-4 .flashcard-front { border-top-color: var(--vocab-magenta-5); }
.vocab-mobile-section.vocab-magenta .vocab-group-4 .flashcard-back  { border-top-color: var(--vocab-magenta-6); }
.vocab-mobile-section.vocab-magenta .vocab-group-5 .flashcard-front { border-top-color: var(--vocab-magenta-6); }
.vocab-mobile-section.vocab-magenta .vocab-group-5 .flashcard-back  { border-top-color: var(--vocab-magenta-7); }
.vocab-mobile-section.vocab-magenta .vocab-group-6 .flashcard-front { border-top-color: var(--vocab-magenta-7); }
.vocab-mobile-section.vocab-magenta .vocab-group-6 .flashcard-back  { border-top-color: var(--vocab-magenta-8); }
.vocab-mobile-section.vocab-magenta .vocab-group-7 .flashcard-front { border-top-color: var(--vocab-magenta-8); }
.vocab-mobile-section.vocab-magenta .vocab-group-7 .flashcard-back  { border-top-color: var(--vocab-magenta-9); }
.vocab-mobile-section.vocab-magenta .vocab-group-8 .flashcard-front { border-top-color: var(--vocab-magenta-9); }
.vocab-mobile-section.vocab-magenta .vocab-group-8 .flashcard-back  { border-top-color: var(--vocab-magenta-10); }
.vocab-mobile-section.vocab-magenta .vocab-group-9 .flashcard-front { border-top-color: var(--vocab-magenta-10); }
.vocab-mobile-section.vocab-magenta .vocab-group-9 .flashcard-back  { border-top-color: var(--vocab-magenta-10); }

.vocab-mobile-section.vocab-pink .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-pink-1); }
.vocab-mobile-section.vocab-pink .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-pink-2); }
.vocab-mobile-section.vocab-pink .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-pink-2); }
.vocab-mobile-section.vocab-pink .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-pink-3); }
.vocab-mobile-section.vocab-pink .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-pink-3); }
.vocab-mobile-section.vocab-pink .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-pink-4); }
.vocab-mobile-section.vocab-pink .vocab-group-3 .flashcard-front { border-top-color: var(--vocab-pink-4); }
.vocab-mobile-section.vocab-pink .vocab-group-3 .flashcard-back  { border-top-color: var(--vocab-pink-5); }
.vocab-mobile-section.vocab-pink .vocab-group-4 .flashcard-front { border-top-color: var(--vocab-pink-5); }
.vocab-mobile-section.vocab-pink .vocab-group-4 .flashcard-back  { border-top-color: var(--vocab-pink-6); }
.vocab-mobile-section.vocab-pink .vocab-group-5 .flashcard-front { border-top-color: var(--vocab-pink-6); }
.vocab-mobile-section.vocab-pink .vocab-group-5 .flashcard-back  { border-top-color: var(--vocab-pink-7); }
.vocab-mobile-section.vocab-pink .vocab-group-6 .flashcard-front { border-top-color: var(--vocab-pink-7); }
.vocab-mobile-section.vocab-pink .vocab-group-6 .flashcard-back  { border-top-color: var(--vocab-pink-8); }
.vocab-mobile-section.vocab-pink .vocab-group-7 .flashcard-front { border-top-color: var(--vocab-pink-8); }
.vocab-mobile-section.vocab-pink .vocab-group-7 .flashcard-back  { border-top-color: var(--vocab-pink-8); }

.vocab-mobile-section.vocab-brown .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-brown-1); }
.vocab-mobile-section.vocab-brown .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-brown-2); }
.vocab-mobile-section.vocab-brown .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-brown-2); }
.vocab-mobile-section.vocab-brown .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-brown-3); }
.vocab-mobile-section.vocab-brown .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-brown-3); }
.vocab-mobile-section.vocab-brown .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-brown-4); }
.vocab-mobile-section.vocab-brown .vocab-group-3 .flashcard-front { border-top-color: var(--vocab-brown-4); }
.vocab-mobile-section.vocab-brown .vocab-group-3 .flashcard-back  { border-top-color: var(--vocab-brown-5); }
.vocab-mobile-section.vocab-brown .vocab-group-4 .flashcard-front { border-top-color: var(--vocab-brown-5); }
.vocab-mobile-section.vocab-brown .vocab-group-4 .flashcard-back  { border-top-color: var(--vocab-brown-6); }
.vocab-mobile-section.vocab-brown .vocab-group-5 .flashcard-front { border-top-color: var(--vocab-brown-6); }
.vocab-mobile-section.vocab-brown .vocab-group-5 .flashcard-back  { border-top-color: var(--vocab-brown-7); }
.vocab-mobile-section.vocab-brown .vocab-group-6 .flashcard-front { border-top-color: var(--vocab-brown-7); }
.vocab-mobile-section.vocab-brown .vocab-group-6 .flashcard-back  { border-top-color: var(--vocab-brown-7); }

.vocab-mobile-section.vocab-gray .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-gray-1); }
.vocab-mobile-section.vocab-gray .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-gray-2); }
.vocab-mobile-section.vocab-gray .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-gray-2); }
.vocab-mobile-section.vocab-gray .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-gray-3); }
.vocab-mobile-section.vocab-gray .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-gray-3); }
.vocab-mobile-section.vocab-gray .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-gray-4); }
.vocab-mobile-section.vocab-gray .vocab-group-3 .flashcard-front { border-top-color: var(--vocab-gray-4); }
.vocab-mobile-section.vocab-gray .vocab-group-3 .flashcard-back  { border-top-color: var(--vocab-gray-4); }

.vocab-mobile-section.vocab-black .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-black-1); }
.vocab-mobile-section.vocab-black .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-black-2); }
.vocab-mobile-section.vocab-black .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-black-2); }
.vocab-mobile-section.vocab-black .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-black-3); }
.vocab-mobile-section.vocab-black .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-black-3); }
.vocab-mobile-section.vocab-black .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-black-3); }

.vocab-mobile-section.vocab-white .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-white-1); }
.vocab-mobile-section.vocab-white .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-white-2); }
.vocab-mobile-section.vocab-white .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-white-2); }
.vocab-mobile-section.vocab-white .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-white-3); }
.vocab-mobile-section.vocab-white .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-white-3); }
.vocab-mobile-section.vocab-white .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-white-4); }
.vocab-mobile-section.vocab-white .vocab-group-3 .flashcard-front { border-top-color: var(--vocab-white-4); }
.vocab-mobile-section.vocab-white .vocab-group-3 .flashcard-back  { border-top-color: var(--vocab-white-5); }
.vocab-mobile-section.vocab-white .vocab-group-4 .flashcard-front { border-top-color: var(--vocab-white-5); }
.vocab-mobile-section.vocab-white .vocab-group-4 .flashcard-back  { border-top-color: var(--vocab-white-5); }

.vocab-mobile-section.vocab-burgundy .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-burgundy-1); }
.vocab-mobile-section.vocab-burgundy .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-burgundy-2); }
.vocab-mobile-section.vocab-burgundy .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-burgundy-2); }
.vocab-mobile-section.vocab-burgundy .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-burgundy-3); }
.vocab-mobile-section.vocab-burgundy .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-burgundy-3); }
.vocab-mobile-section.vocab-burgundy .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-burgundy-4); }
.vocab-mobile-section.vocab-burgundy .vocab-group-3 .flashcard-front { border-top-color: var(--vocab-burgundy-4); }
.vocab-mobile-section.vocab-burgundy .vocab-group-3 .flashcard-back  { border-top-color: var(--vocab-burgundy-5); }
.vocab-mobile-section.vocab-burgundy .vocab-group-4 .flashcard-front { border-top-color: var(--vocab-burgundy-5); }
.vocab-mobile-section.vocab-burgundy .vocab-group-4 .flashcard-back  { border-top-color: var(--vocab-burgundy-6); }
.vocab-mobile-section.vocab-burgundy .vocab-group-5 .flashcard-front { border-top-color: var(--vocab-burgundy-6); }
.vocab-mobile-section.vocab-burgundy .vocab-group-5 .flashcard-back  { border-top-color: var(--vocab-burgundy-6); }

.vocab-mobile-section.vocab-silver .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-silver-1); }
.vocab-mobile-section.vocab-silver .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-silver-2); }
.vocab-mobile-section.vocab-silver .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-silver-2); }
.vocab-mobile-section.vocab-silver .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-silver-3); }
.vocab-mobile-section.vocab-silver .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-silver-3); }
.vocab-mobile-section.vocab-silver .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-silver-3); }


.vocab-mobile-section.vocab-green .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-green-1); }
.vocab-mobile-section.vocab-green .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-green-2); }
.vocab-mobile-section.vocab-green .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-green-2); }
.vocab-mobile-section.vocab-green .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-green-3); }
.vocab-mobile-section.vocab-green .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-green-3); }
.vocab-mobile-section.vocab-green .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-green-4); }
.vocab-mobile-section.vocab-green .vocab-group-3 .flashcard-front { border-top-color: var(--vocab-green-4); }
.vocab-mobile-section.vocab-green .vocab-group-3 .flashcard-back  { border-top-color: var(--vocab-green-5); }
.vocab-mobile-section.vocab-green .vocab-group-4 .flashcard-front { border-top-color: var(--vocab-green-5); }
.vocab-mobile-section.vocab-green .vocab-group-4 .flashcard-back  { border-top-color: var(--vocab-green-6); }
.vocab-mobile-section.vocab-green .vocab-group-5 .flashcard-front { border-top-color: var(--vocab-green-6); }
.vocab-mobile-section.vocab-green .vocab-group-5 .flashcard-back  { border-top-color: var(--vocab-green-7); }
.vocab-mobile-section.vocab-green .vocab-group-6 .flashcard-front { border-top-color: var(--vocab-green-7); }
.vocab-mobile-section.vocab-green .vocab-group-6 .flashcard-back  { border-top-color: var(--vocab-green-8); }
.vocab-mobile-section.vocab-green .vocab-group-7 .flashcard-front { border-top-color: var(--vocab-green-8); }
.vocab-mobile-section.vocab-green .vocab-group-7 .flashcard-back  { border-top-color: var(--vocab-green-9); }
.vocab-mobile-section.vocab-green .vocab-group-8 .flashcard-front { border-top-color: var(--vocab-green-9); }
.vocab-mobile-section.vocab-green .vocab-group-8 .flashcard-back  { border-top-color: var(--vocab-green-10); }
.vocab-mobile-section.vocab-green .vocab-group-9 .flashcard-front { border-top-color: var(--vocab-green-10); }
.vocab-mobile-section.vocab-green .vocab-group-9 .flashcard-back  { border-top-color: var(--vocab-green-11); }
.vocab-mobile-section.vocab-green .vocab-group-10 .flashcard-front { border-top-color: var(--vocab-green-11); }
.vocab-mobile-section.vocab-green .vocab-group-10 .flashcard-back  { border-top-color: var(--vocab-green-12); }
.vocab-mobile-section.vocab-green .vocab-group-11 .flashcard-front { border-top-color: var(--vocab-green-12); }
.vocab-mobile-section.vocab-green .vocab-group-11 .flashcard-back  { border-top-color: var(--vocab-green-13); }
.vocab-mobile-section.vocab-green .vocab-group-12 .flashcard-front { border-top-color: var(--vocab-green-13); }
.vocab-mobile-section.vocab-green .vocab-group-12 .flashcard-back  { border-top-color: var(--vocab-green-14); }
.vocab-mobile-section.vocab-green .vocab-group-13 .flashcard-front { border-top-color: var(--vocab-green-14); }
.vocab-mobile-section.vocab-green .vocab-group-13 .flashcard-back  { border-top-color: var(--vocab-green-15); }
.vocab-mobile-section.vocab-green .vocab-group-14 .flashcard-front { border-top-color: var(--vocab-green-15); }
.vocab-mobile-section.vocab-green .vocab-group-14 .flashcard-back  { border-top-color: var(--vocab-green-16); }
.vocab-mobile-section.vocab-green .vocab-group-15 .flashcard-front { border-top-color: var(--vocab-green-16); }
.vocab-mobile-section.vocab-green .vocab-group-15 .flashcard-back  { border-top-color: var(--vocab-green-17); }
.vocab-mobile-section.vocab-green .vocab-group-16 .flashcard-front { border-top-color: var(--vocab-green-17); }
.vocab-mobile-section.vocab-green .vocab-group-16 .flashcard-back  { border-top-color: var(--vocab-green-18); }
.vocab-mobile-section.vocab-green .vocab-group-17 .flashcard-front { border-top-color: var(--vocab-green-18); }
.vocab-mobile-section.vocab-green .vocab-group-17 .flashcard-back  { border-top-color: var(--vocab-green-19); }
.vocab-mobile-section.vocab-green .vocab-group-18 .flashcard-front { border-top-color: var(--vocab-green-19); }
.vocab-mobile-section.vocab-green .vocab-group-18 .flashcard-back  { border-top-color: var(--vocab-green-20); }
.vocab-mobile-section.vocab-green .vocab-group-19 .flashcard-front { border-top-color: var(--vocab-green-20); }
.vocab-mobile-section.vocab-green .vocab-group-19 .flashcard-back  { border-top-color: var(--vocab-green-21); }
.vocab-mobile-section.vocab-green .vocab-group-20 .flashcard-front { border-top-color: var(--vocab-green-21); }
.vocab-mobile-section.vocab-green .vocab-group-20 .flashcard-back  { border-top-color: var(--vocab-green-22); }
.vocab-mobile-section.vocab-green .vocab-group-21 .flashcard-front { border-top-color: var(--vocab-green-22); }
.vocab-mobile-section.vocab-green .vocab-group-21 .flashcard-back  { border-top-color: var(--vocab-green-23); }
.vocab-mobile-section.vocab-green .vocab-group-22 .flashcard-front { border-top-color: var(--vocab-green-23); }
.vocab-mobile-section.vocab-green .vocab-group-22 .flashcard-back  { border-top-color: var(--vocab-green-24); }
.vocab-mobile-section.vocab-green .vocab-group-23 .flashcard-front { border-top-color: var(--vocab-green-24); }
.vocab-mobile-section.vocab-green .vocab-group-23 .flashcard-back  { border-top-color: var(--vocab-green-25); }
.vocab-mobile-section.vocab-green .vocab-group-24 .flashcard-front { border-top-color: var(--vocab-green-25); }
.vocab-mobile-section.vocab-green .vocab-group-24 .flashcard-back  { border-top-color: var(--vocab-green-25); }

.vocab-strip.vocab-blue .vocab-group-0 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-blue-1); }
.vocab-strip.vocab-blue .vocab-group-0 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-blue-2); }
.vocab-strip.vocab-blue .vocab-group-1 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-blue-2); }
.vocab-strip.vocab-blue .vocab-group-1 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-blue-3); }
.vocab-strip.vocab-blue .vocab-group-2 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-blue-3); }
.vocab-strip.vocab-blue .vocab-group-2 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-blue-4); }
.vocab-strip.vocab-blue .vocab-group-3 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-3 .flashcard-front { border-top-color: var(--vocab-blue-4); }
.vocab-strip.vocab-blue .vocab-group-3 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-3 .flashcard-back  { border-top-color: var(--vocab-blue-5); }
.vocab-strip.vocab-blue .vocab-group-4 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-4 .flashcard-front { border-top-color: var(--vocab-blue-5); }
.vocab-strip.vocab-blue .vocab-group-4 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-4 .flashcard-back  { border-top-color: var(--vocab-blue-6); }
.vocab-strip.vocab-blue .vocab-group-5 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-5 .flashcard-front { border-top-color: var(--vocab-blue-6); }
.vocab-strip.vocab-blue .vocab-group-5 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-5 .flashcard-back  { border-top-color: var(--vocab-blue-7); }
.vocab-strip.vocab-blue .vocab-group-6 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-6 .flashcard-front { border-top-color: var(--vocab-blue-7); }
.vocab-strip.vocab-blue .vocab-group-6 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-6 .flashcard-back  { border-top-color: var(--vocab-blue-8); }
.vocab-strip.vocab-blue .vocab-group-7 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-7 .flashcard-front { border-top-color: var(--vocab-blue-8); }
.vocab-strip.vocab-blue .vocab-group-7 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-7 .flashcard-back  { border-top-color: var(--vocab-blue-9); }
.vocab-strip.vocab-blue .vocab-group-8 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-8 .flashcard-front { border-top-color: var(--vocab-blue-9); }
.vocab-strip.vocab-blue .vocab-group-8 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-8 .flashcard-back  { border-top-color: var(--vocab-blue-10); }
.vocab-strip.vocab-blue .vocab-group-9 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-9 .flashcard-front { border-top-color: var(--vocab-blue-10); }
.vocab-strip.vocab-blue .vocab-group-9 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-9 .flashcard-back  { border-top-color: var(--vocab-blue-11); }
.vocab-strip.vocab-blue .vocab-group-10 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-10 .flashcard-front { border-top-color: var(--vocab-blue-11); }
.vocab-strip.vocab-blue .vocab-group-10 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-10 .flashcard-back  { border-top-color: var(--vocab-blue-12); }
.vocab-strip.vocab-blue .vocab-group-11 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-11 .flashcard-front { border-top-color: var(--vocab-blue-12); }
.vocab-strip.vocab-blue .vocab-group-11 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-11 .flashcard-back  { border-top-color: var(--vocab-blue-13); }
.vocab-strip.vocab-blue .vocab-group-12 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-12 .flashcard-front { border-top-color: var(--vocab-blue-13); }
.vocab-strip.vocab-blue .vocab-group-12 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-12 .flashcard-back  { border-top-color: var(--vocab-blue-14); }
.vocab-strip.vocab-blue .vocab-group-13 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-13 .flashcard-front { border-top-color: var(--vocab-blue-14); }
.vocab-strip.vocab-blue .vocab-group-13 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-13 .flashcard-back  { border-top-color: var(--vocab-blue-15); }
.vocab-strip.vocab-blue .vocab-group-14 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-14 .flashcard-front { border-top-color: var(--vocab-blue-15); }
.vocab-strip.vocab-blue .vocab-group-14 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-14 .flashcard-back  { border-top-color: var(--vocab-blue-16); }
.vocab-strip.vocab-blue .vocab-group-15 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-15 .flashcard-front { border-top-color: var(--vocab-blue-16); }
.vocab-strip.vocab-blue .vocab-group-15 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-15 .flashcard-back  { border-top-color: var(--vocab-blue-17); }
.vocab-strip.vocab-blue .vocab-group-16 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-16 .flashcard-front { border-top-color: var(--vocab-blue-17); }
.vocab-strip.vocab-blue .vocab-group-16 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-16 .flashcard-back  { border-top-color: var(--vocab-blue-18); }
.vocab-strip.vocab-blue .vocab-group-17 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-17 .flashcard-front { border-top-color: var(--vocab-blue-18); }
.vocab-strip.vocab-blue .vocab-group-17 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-17 .flashcard-back  { border-top-color: var(--vocab-blue-19); }
.vocab-strip.vocab-blue .vocab-group-18 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-18 .flashcard-front { border-top-color: var(--vocab-blue-19); }
.vocab-strip.vocab-blue .vocab-group-18 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-18 .flashcard-back  { border-top-color: var(--vocab-blue-20); }
.vocab-strip.vocab-blue .vocab-group-19 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-19 .flashcard-front { border-top-color: var(--vocab-blue-20); }
.vocab-strip.vocab-blue .vocab-group-19 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-19 .flashcard-back  { border-top-color: var(--vocab-blue-21); }
.vocab-strip.vocab-blue .vocab-group-20 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-20 .flashcard-front { border-top-color: var(--vocab-blue-21); }
.vocab-strip.vocab-blue .vocab-group-20 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-20 .flashcard-back  { border-top-color: var(--vocab-blue-22); }
.vocab-strip.vocab-blue .vocab-group-21 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-21 .flashcard-front { border-top-color: var(--vocab-blue-22); }
.vocab-strip.vocab-blue .vocab-group-21 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-21 .flashcard-back  { border-top-color: var(--vocab-blue-23); }
.vocab-strip.vocab-blue .vocab-group-22 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-22 .flashcard-front { border-top-color: var(--vocab-blue-23); }
.vocab-strip.vocab-blue .vocab-group-22 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-22 .flashcard-back  { border-top-color: var(--vocab-blue-24); }
.vocab-strip.vocab-blue .vocab-group-23 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-23 .flashcard-front { border-top-color: var(--vocab-blue-24); }
.vocab-strip.vocab-blue .vocab-group-23 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-23 .flashcard-back  { border-top-color: var(--vocab-blue-25); }
.vocab-strip.vocab-blue .vocab-group-24 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-24 .flashcard-front { border-top-color: var(--vocab-blue-25); }
.vocab-strip.vocab-blue .vocab-group-24 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-24 .flashcard-back  { border-top-color: var(--vocab-blue-26); }
.vocab-strip.vocab-blue .vocab-group-25 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-25 .flashcard-front { border-top-color: var(--vocab-blue-26); }
.vocab-strip.vocab-blue .vocab-group-25 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-25 .flashcard-back  { border-top-color: var(--vocab-blue-27); }
.vocab-strip.vocab-blue .vocab-group-26 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-26 .flashcard-front { border-top-color: var(--vocab-blue-27); }
.vocab-strip.vocab-blue .vocab-group-26 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-26 .flashcard-back  { border-top-color: var(--vocab-blue-28); }
.vocab-strip.vocab-blue .vocab-group-27 .flashcard-front,
.vocab-mobile-section.vocab-blue .vocab-group-27 .flashcard-front { border-top-color: var(--vocab-blue-28); }
.vocab-strip.vocab-blue .vocab-group-27 .flashcard-back,
.vocab-mobile-section.vocab-blue .vocab-group-27 .flashcard-back  { border-top-color: var(--vocab-blue-28); }

.vocab-strip.vocab-red .vocab-group-0 .flashcard-front,
.vocab-mobile-section.vocab-red .vocab-group-0 .flashcard-front { border-top-color: var(--vocab-red-1); }
.vocab-strip.vocab-red .vocab-group-0 .flashcard-back,
.vocab-mobile-section.vocab-red .vocab-group-0 .flashcard-back  { border-top-color: var(--vocab-red-2); }
.vocab-strip.vocab-red .vocab-group-1 .flashcard-front,
.vocab-mobile-section.vocab-red .vocab-group-1 .flashcard-front { border-top-color: var(--vocab-red-2); }
.vocab-strip.vocab-red .vocab-group-1 .flashcard-back,
.vocab-mobile-section.vocab-red .vocab-group-1 .flashcard-back  { border-top-color: var(--vocab-red-3); }
.vocab-strip.vocab-red .vocab-group-2 .flashcard-front,
.vocab-mobile-section.vocab-red .vocab-group-2 .flashcard-front { border-top-color: var(--vocab-red-3); }
.vocab-strip.vocab-red .vocab-group-2 .flashcard-back,
.vocab-mobile-section.vocab-red .vocab-group-2 .flashcard-back  { border-top-color: var(--vocab-red-4); }
.vocab-strip.vocab-red .vocab-group-3 .flashcard-front,
.vocab-mobile-section.vocab-red .vocab-group-3 .flashcard-front { border-top-color: var(--vocab-red-4); }
.vocab-strip.vocab-red .vocab-group-3 .flashcard-back,
.vocab-mobile-section.vocab-red .vocab-group-3 .flashcard-back  { border-top-color: var(--vocab-red-5); }
.vocab-strip.vocab-red .vocab-group-4 .flashcard-front,
.vocab-mobile-section.vocab-red .vocab-group-4 .flashcard-front { border-top-color: var(--vocab-red-5); }
.vocab-strip.vocab-red .vocab-group-4 .flashcard-back,
.vocab-mobile-section.vocab-red .vocab-group-4 .flashcard-back  { border-top-color: var(--vocab-red-6); }
.vocab-strip.vocab-red .vocab-group-5 .flashcard-front,
.vocab-mobile-section.vocab-red .vocab-group-5 .flashcard-front { border-top-color: var(--vocab-red-6); }
.vocab-strip.vocab-red .vocab-group-5 .flashcard-back,
.vocab-mobile-section.vocab-red .vocab-group-5 .flashcard-back  { border-top-color: var(--vocab-red-6); }

.flashcard-counter {
  text-align: center;
  margin-top: 0.7rem;
  font-family: "Oswald", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.5);
}

/* ── Prev/next arrows — iridescent variant, adapted from
   iridescent-arrow-controls.md (blue/cyan original restyled). Rule:
   the arrow gradient always uses a variation of THAT subgroup's own
   tone family (--arrow-tone-1..4, set per .vocab-group-N below), not
   a fixed color — so Nouns' arrows shift through blue, Verbs' through
   red, Adjectives' through yellow, matching each subgroup's own accent
   color rather than one hardcoded palette for every category. ── */

.flashcard-arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--arrow-tone-1, var(--vocab-yellow-1));
  background: linear-gradient(
    60deg,
    var(--arrow-tone-1, var(--vocab-yellow-1)) 5%, var(--arrow-tone-2, var(--vocab-yellow-2)) 15%, var(--arrow-tone-3, var(--vocab-yellow-3)) 25%, var(--arrow-tone-4, var(--vocab-yellow-4)) 35%,
    var(--arrow-tone-1, var(--vocab-yellow-1)) 45%, var(--arrow-tone-2, var(--vocab-yellow-2)) 55%, var(--arrow-tone-3, var(--vocab-yellow-3)) 65%, var(--arrow-tone-4, var(--vocab-yellow-4)) 75%,
    var(--arrow-tone-1, var(--vocab-yellow-1)) 85%, var(--arrow-tone-2, var(--vocab-yellow-2)) 95%, var(--arrow-tone-3, var(--vocab-yellow-3))
  );
  background-size: 200% 200%;
  background-position: -100% -100%;
  animation: flashcard-arrow-drift 8s infinite;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.3s ease, filter 0.5s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  outline: none;
}

.flashcard-arrow::after {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.flashcard-arrow--prev::after { content: "\2039"; }
.flashcard-arrow--next::after { content: "\203A"; }

.flashcard-arrow:active { transform: scale(0.85); }

.flashcard-arrow:hover,
.flashcard-arrow:focus-visible {
  filter: drop-shadow(0 0 0.5rem #fff8e6);
  box-shadow: inset 0 0 0.5rem rgba(255, 248, 230, 0.6);
}

@keyframes flashcard-arrow-drift {
  20% { background-position: -130% -120%; }
  40% { background-position: -140% -100%; }
  70% { background-position: -110% -130%; }
}

/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 768px) {
  body { margin-right: 0; }
  .vocab-nav { display: none; }
}

/* Pull the prev/next arrows in tight against the card so the card itself
   gets more of the narrow viewport's width — a few px of overlap is fine. */
@media (max-width: 768px) {
  .vocab-flashcard-stage { gap: 0; }
  .flashcard-arrow {
    position: relative;
    z-index: 2;
    margin: 0 -8px;
  }
}

/* Floating hamburger */
.vocab-mobile-btn {
  display: none;
  position: fixed;
  bottom: 1.8rem;
  right: 1.5rem;
  z-index: 9999;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #222;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition: background 0.2s;
}

.vocab-mobile-btn:hover { background: #000; }

.vocab-mobile-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .vocab-mobile-btn { display: flex; }
}

/* Full-screen overlay */
.vocab-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fff;
  overflow-y: auto;
  flex-direction: column;
  padding: 0.5rem 0 3rem;
}

.vocab-mobile-overlay:not([hidden]) { display: flex; }

.vocab-mobile-close {
  align-self: flex-end;
  margin: 0.6rem 1.2rem 0.4rem 0;
  background: transparent;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #666;
  line-height: 1;
  padding: 0.3rem 0.5rem;
}

/* Same blackletter treatment as the Speed Reader's "Speed Reader"
   title (.post-title in reader.css) — UnifrakturMaguntia + a soft
   halo — but black rather than that page's blue-tinted glow, since
   this overlay's white background is exactly the light-backdrop case
   reader.css's own comment calls out: a light halo has no contrast
   there, so a dark one is used instead. */
.vocab-mobile-title {
  text-align: center;
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 4rem;
  color: #3a4145;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.35);
  margin: 0 0 1rem;
}

/* Search box color theme — light background, dark text (mobile overlay
   and mobile group lists both sit on white). Desktop's colored-strip
   theme is set separately, above, next to .strip-close-btn; the shape
   and slide/fade animations live in the shared .vocab-search-box rules
   there too and apply here unchanged. */
.vocab-mobile-overlay .vocab-search,
.vocab-mobile-groups .vocab-search {
  --vs-fg: #222;
  --vs-fg-dim: rgba(0, 0, 0, 0.4);
  --vs-bg: rgba(0, 0, 0, 0.04);
  --vs-border: rgba(0, 0, 0, 0.12);
  --vs-bg-focus: rgba(0, 0, 0, 0.07);
  --vs-border-focus: rgba(0, 0, 0, 0.35);
}

.vocab-mobile-overlay .vocab-search-box,
.vocab-mobile-groups .vocab-search-box {
  height: 42px;
}

.vocab-mobile-overlay > .vocab-search--categories { padding: 0.4rem 1.5rem 1rem; }

.vocab-mobile-groups > .vocab-search--groups { padding: 0.9rem 1.5rem 0.7rem; }

/* Category section */
.vocab-mobile-section { border-bottom: 1px solid rgba(0, 0, 0, 0.07); }
.vocab-mobile-section:last-child { border-bottom: none; }

.vocab-mobile-summary {
  display: flex;
  align-items: center;
  padding: 1.2rem 1.5rem;
  cursor: pointer;
  font-family: "Oswald", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 1px;
  list-style: none;
  color: #fff;
  user-select: none;
}

.vocab-mobile-summary::-webkit-details-marker { display: none; }

.vocab-mobile-section.vocab-blue   .vocab-mobile-summary { background: var(--vocab-blue); }
.vocab-mobile-section.vocab-red    .vocab-mobile-summary { background: var(--vocab-red); }
.vocab-mobile-section.vocab-yellow .vocab-mobile-summary { background: var(--vocab-yellow); color: var(--vocab-yellow-dark); }
.vocab-mobile-section.vocab-orange .vocab-mobile-summary { background: var(--vocab-orange); color: var(--vocab-orange-dark); }
.vocab-mobile-section.vocab-green  .vocab-mobile-summary { background: var(--vocab-green); color: var(--vocab-green-dark); }
.vocab-mobile-section.vocab-cream  .vocab-mobile-summary { background: var(--vocab-cream); color: var(--vocab-cream-dark); }
.vocab-mobile-section.vocab-aqua   .vocab-mobile-summary { background: var(--vocab-aqua); color: var(--vocab-aqua-dark); }
.vocab-mobile-section.vocab-violet .vocab-mobile-summary { background: var(--vocab-violet); }
.vocab-mobile-section.vocab-magenta .vocab-mobile-summary { background: var(--vocab-magenta); }
.vocab-mobile-section.vocab-brown   .vocab-mobile-summary { background: var(--vocab-brown); }
.vocab-mobile-section.vocab-gray    .vocab-mobile-summary { background: var(--vocab-gray); }
.vocab-mobile-section.vocab-black   .vocab-mobile-summary { background: var(--vocab-black); }
.vocab-mobile-section.vocab-white   .vocab-mobile-summary { background: var(--vocab-white); color: var(--vocab-white-dark); }
.vocab-mobile-section.vocab-burgundy    .vocab-mobile-summary { background: var(--vocab-burgundy); }
.vocab-mobile-section.vocab-silver  .vocab-mobile-summary { background: var(--vocab-silver); color: var(--vocab-silver-dark); }
.vocab-mobile-section.vocab-pink    .vocab-mobile-summary { background: var(--vocab-pink); color: var(--vocab-pink-dark); }

.mob-zh {
  font-size: 1.7rem;
  font-family: serif;
  font-weight: 600;
  letter-spacing: 3px;
}

.mob-divider { opacity: 0.5; margin: 0 0.3rem; }

.mob-arrow {
  margin-left: auto;
  font-size: 1.1rem;
  opacity: 0.6;
  transition: transform 0.3s;
}

details[open] .mob-arrow { transform: rotate(90deg); }

/* Mobile word list */
.vocab-mobile-words { background: #fff; padding: 0 0 0.5rem; }

.vocab-mobile-words .vocab-lang-toggle {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.5rem 0.5rem;
}

.vocab-mobile-words .lang-btn {
  border: 2px solid #bbb;
  color: #666;
}

.vocab-mobile-words .lang-btn.active {
  background: #333;
  border-color: #333;
  color: #fff;
}

/* Adjectives groups 4-9: on the mobile overlay .lang-btn falls back to
   the gray-on-white default above (#bbb/#666, meant for the flat list's
   white background) while .prompt-btn falls back to its own plain black
   default — same style mismatch as the desktop fix above, matched here
   to .prompt-btn's exact dark values. */
.vocab-mobile-section.vocab-yellow .lang-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}
.vocab-mobile-section.vocab-yellow .lang-btn:hover {
  border-color: rgba(0, 0, 0, 0.6);
  color: #000;
}
.vocab-mobile-section.vocab-yellow .lang-btn.active {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.75);
  color: #000;
  font-weight: 600;
}

/* Same groups 0-2 white exception as .prompt-btn above, for the
   word-table's own EN/ES/繁/简/PY/日/かな toggle. */
.vocab-mobile-section.vocab-orange .vocab-group-0 .lang-btn,
.vocab-mobile-section.vocab-orange .vocab-group-1 .lang-btn,
.vocab-mobile-section.vocab-orange .vocab-group-2 .lang-btn {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}
.vocab-mobile-section.vocab-orange .vocab-group-0 .lang-btn.active,
.vocab-mobile-section.vocab-orange .vocab-group-1 .lang-btn.active,
.vocab-mobile-section.vocab-orange .vocab-group-2 .lang-btn.active {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  color: #fff;
}

/* Groups 3-5 stay dark, matched to .prompt-btn's exact dark palette (same
   consistency fix as Adjectives groups 4-9 above) — .lang-btn otherwise
   falls back to .vocab-mobile-words' gray-on-white default (#bbb/#666),
   which doesn't match .prompt-btn's black default. Category-wide here is
   fine since groups 0-2's white override above is more specific and wins. */
.vocab-mobile-section.vocab-orange .lang-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}
.vocab-mobile-section.vocab-orange .lang-btn:hover {
  border-color: rgba(0, 0, 0, 0.6);
  color: #000;
}
.vocab-mobile-section.vocab-orange .lang-btn.active {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.75);
  color: #000;
  font-weight: 600;
}

/* Measures (cream) runs black-on-light for its ENTIRE scale, per user's
   explicit request — same dark palette as Orange above, but category-
   wide with no white-flip groups (light yellow → white never needs a
   white-text exception). */
.vocab-mobile-section.vocab-cream .lang-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}
.vocab-mobile-section.vocab-cream .lang-btn:hover {
  border-color: rgba(0, 0, 0, 0.6);
  color: #000;
}
.vocab-mobile-section.vocab-cream .lang-btn.active {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.75);
  color: #000;
  font-weight: 600;
}

/* Food (aqua) also runs black-on-light for its entire scale — same
   pattern as Cream above, verified by contrast math before building
   (see the --vocab-aqua-* comment in :root). */
.vocab-mobile-section.vocab-aqua .lang-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}
.vocab-mobile-section.vocab-aqua .lang-btn:hover {
  border-color: rgba(0, 0, 0, 0.6);
  color: #000;
}
.vocab-mobile-section.vocab-aqua .lang-btn.active {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.75);
  color: #000;
  font-weight: 600;
}

/* Prepositions (pink) also runs black-on-light for its entire scale —
   same pattern as Cream/Aqua above. */
.vocab-mobile-section.vocab-pink .lang-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}
.vocab-mobile-section.vocab-pink .lang-btn:hover {
  border-color: rgba(0, 0, 0, 0.6);
  color: #000;
}
.vocab-mobile-section.vocab-pink .lang-btn.active {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.75);
  color: #000;
  font-weight: 600;
}

/* Pronouns (white) also runs black-on-light for its entire scale —
   same pattern as Cream/Aqua/Pink above. */
.vocab-mobile-section.vocab-white .lang-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}
.vocab-mobile-section.vocab-white .lang-btn:hover {
  border-color: rgba(0, 0, 0, 0.6);
  color: #000;
}
.vocab-mobile-section.vocab-white .lang-btn.active {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.75);
  color: #000;
  font-weight: 600;
}

/* Questions (silver) also runs black-on-light for its entire scale —
   same pattern as Cream/Aqua/Pink/White/Gold above. */
.vocab-mobile-section.vocab-silver .lang-btn {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.55);
}
.vocab-mobile-section.vocab-silver .lang-btn:hover {
  border-color: rgba(0, 0, 0, 0.6);
  color: #000;
}
.vocab-mobile-section.vocab-silver .lang-btn.active {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.75);
  color: #000;
  font-weight: 600;
}

/* Same leak as .vocab-mobile-groups .vocab-row/.vocab-header-row above:
   .vocab-mobile-words' gray-on-white lang-btn styling (#bbb/#666, tuned
   for the flat list's white background) applies to every grouped
   category's word-table toggle too. Nouns/Verbs run white-on-dark for
   their entire scale (unlike Adverbs' group-0-only exception above), so
   this covers every subgroup. */
.vocab-mobile-section.vocab-blue .lang-btn,
.vocab-mobile-section.vocab-red .lang-btn,
.vocab-mobile-section.vocab-green .lang-btn,
.vocab-mobile-section.vocab-violet .lang-btn,
.vocab-mobile-section.vocab-magenta .lang-btn,
.vocab-mobile-section.vocab-brown .lang-btn,
.vocab-mobile-section.vocab-gray .lang-btn,
.vocab-mobile-section.vocab-black .lang-btn,
.vocab-mobile-section.vocab-burgundy .lang-btn {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}
.vocab-mobile-section.vocab-blue .lang-btn.active,
.vocab-mobile-section.vocab-red .lang-btn.active,
.vocab-mobile-section.vocab-green .lang-btn.active,
.vocab-mobile-section.vocab-violet .lang-btn.active,
.vocab-mobile-section.vocab-magenta .lang-btn.active,
.vocab-mobile-section.vocab-brown .lang-btn.active,
.vocab-mobile-section.vocab-gray .lang-btn.active,
.vocab-mobile-section.vocab-black .lang-btn.active,
.vocab-mobile-section.vocab-burgundy .lang-btn.active {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  color: #fff;
}

/* Adjectives groups 0-3: same white-flip exception as elsewhere above —
   these four darker tints get white pills like Blue/Red, on top of the
   gray .vocab-mobile-words default. */
.vocab-mobile-section.vocab-yellow .vocab-group-0 .lang-btn,
.vocab-mobile-section.vocab-yellow .vocab-group-1 .lang-btn,
.vocab-mobile-section.vocab-yellow .vocab-group-2 .lang-btn,
.vocab-mobile-section.vocab-yellow .vocab-group-3 .lang-btn {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}
.vocab-mobile-section.vocab-yellow .vocab-group-0 .lang-btn.active,
.vocab-mobile-section.vocab-yellow .vocab-group-1 .lang-btn.active,
.vocab-mobile-section.vocab-yellow .vocab-group-2 .lang-btn.active,
.vocab-mobile-section.vocab-yellow .vocab-group-3 .lang-btn.active {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  color: #fff;
}

/* Mobile: single column (stacked), toggle visibility */
.vocab-mobile-words .vocab-row { flex-direction: column; border-bottom-color: rgba(0,0,0,0.06); }
.vocab-mobile-words .vocab-cell { color: #3a4145; }
.vocab-mobile-words .vocab-cell-zh,
.vocab-mobile-words .vocab-cell-zhs { color: #222; }
.vocab-mobile-words .vocab-header-row { color: rgba(0,0,0,0.38); border-bottom-color: rgba(0,0,0,0.1) !important; }

.vocab-mobile-words .vocab-cell-en,
.vocab-mobile-words .vocab-cell-es,
.vocab-mobile-words .vocab-cell-zh,
.vocab-mobile-words .vocab-cell-zhs { display: none; }

.vocab-mobile-words .vocab-table.show-en .vocab-cell-en { display: block; }
.vocab-mobile-words .vocab-table.show-es .vocab-cell-es { display: block; }
.vocab-mobile-words .vocab-table.show-zh .vocab-cell-zh { display: block; }
.vocab-mobile-words .vocab-table.show-zhs .vocab-cell-zhs { display: block; }

.vocab-mobile-words .vocab-table { padding: 0 1.5rem 1rem; }

/* ── Sub-groups on mobile: nested <details> per source sheet ── */

.vocab-mobile-groups {
  padding: 0.8rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.vocab-mobile-groups .vocab-group { border-radius: 8px; overflow: hidden; }
.vocab-mobile-groups .vocab-group-body .vocab-lang-toggle { padding: 0 0 0.7rem; }
.vocab-mobile-groups .vocab-group-body .vocab-table { padding: 0; }
.vocab-mobile-groups .vocab-group-body .vocab-cell { color: inherit; }
.vocab-mobile-groups .vocab-group-body .vocab-cell-zh { color: inherit; }
.vocab-mobile-groups .vocab-group-body .vocab-cell-zhs { color: inherit; }
.vocab-mobile-groups .vocab-group-body .vocab-cell-py { color: inherit; }
.vocab-mobile-groups .vocab-group-body .vocab-cell-ja { color: inherit; }
.vocab-mobile-groups .vocab-group-body .vocab-cell-ja_kana { color: inherit; }
.vocab-mobile-groups .vocab-group-body .vocab-header-row { color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.15) !important; }

/* The overlay's grouped word-table container carries BOTH .vocab-mobile-
   words and .vocab-mobile-groups classes, so .vocab-mobile-words' flat/
   ungrouped-list styling (single-column stacked cells, meant for
   categories with no subgroups) was unintentionally leaking into every
   grouped category's word table too, since the two selectors tie on
   specificity. Reset back to a normal side-by-side row here — this
   selector is one class more specific so it always wins regardless of
   source order. */
.vocab-mobile-groups .vocab-group-body .vocab-row { flex-direction: row; }

/* Same leak as above but for header-row's color: rgba(0,0,0,0.4) sits
   fine on Yellow/Orange's light subgroup backgrounds (the only ones the
   rule above was ever tested against) but is unreadable on Blue/Red's
   dark backgrounds (always white text) and Orange's group-0 exception
   (see .prompt-btn above for the same exception). Must come after the
   base rule above to win the specificity tie. */
.vocab-mobile-section.vocab-blue .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-red .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-green .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-violet .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-magenta .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-black .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-orange .vocab-group-0 .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-orange .vocab-group-1 .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-orange .vocab-group-2 .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-brown .vocab-group-3 .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-brown .vocab-group-4 .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-brown .vocab-group-5 .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-brown .vocab-group-6 .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-gray .vocab-group-2 .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-gray .vocab-group-3 .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-burgundy .vocab-group-body .vocab-header-row {
  color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}

/* Adjectives groups 0-3: same white-flip exception, one level more
   specific (group index included) so it wins over the base dark rule. */
.vocab-mobile-section.vocab-yellow .vocab-group-0 .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-yellow .vocab-group-1 .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-yellow .vocab-group-2 .vocab-group-body .vocab-header-row,
.vocab-mobile-section.vocab-yellow .vocab-group-3 .vocab-group-body .vocab-header-row {
  color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}

/* PY off by default, shown independently of the EN/ES/ZH selection */
.vocab-mobile-groups .vocab-cell-py { display: none; opacity: 0.85; }
.vocab-mobile-groups .vocab-table.show-py .vocab-cell-py { display: block; }

/* かな off by default, same treatment as PY */
.vocab-mobile-groups .vocab-cell-ja_kana { display: none; opacity: 0.85; }
.vocab-mobile-groups .vocab-table.show-ja_kana .vocab-cell-ja_kana { display: block; }

.vocab-mobile-section.vocab-yellow .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-yellow .vocab-group-0 .vocab-group-body { background: var(--vocab-yellow-1); color: #fff; }
.vocab-mobile-section.vocab-yellow .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-yellow .vocab-group-1 .vocab-group-body { background: var(--vocab-yellow-2); color: #fff; }
.vocab-mobile-section.vocab-yellow .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-yellow .vocab-group-2 .vocab-group-body { background: var(--vocab-yellow-3); color: #fff; }
.vocab-mobile-section.vocab-yellow .vocab-group-3 .vocab-group-summary,
.vocab-mobile-section.vocab-yellow .vocab-group-3 .vocab-group-body { background: var(--vocab-yellow-4); color: #fff; }
.vocab-mobile-section.vocab-yellow .vocab-group-4 .vocab-group-summary,
.vocab-mobile-section.vocab-yellow .vocab-group-4 .vocab-group-body { background: var(--vocab-yellow-5); color: var(--vocab-yellow-dark); }
.vocab-mobile-section.vocab-yellow .vocab-group-5 .vocab-group-summary,
.vocab-mobile-section.vocab-yellow .vocab-group-5 .vocab-group-body { background: var(--vocab-yellow-6); color: var(--vocab-yellow-dark); }
.vocab-mobile-section.vocab-yellow .vocab-group-6 .vocab-group-summary,
.vocab-mobile-section.vocab-yellow .vocab-group-6 .vocab-group-body { background: var(--vocab-yellow-7); color: var(--vocab-yellow-dark); }
.vocab-mobile-section.vocab-yellow .vocab-group-7 .vocab-group-summary,
.vocab-mobile-section.vocab-yellow .vocab-group-7 .vocab-group-body { background: var(--vocab-yellow-8); color: var(--vocab-yellow-dark); }
.vocab-mobile-section.vocab-yellow .vocab-group-8 .vocab-group-summary,
.vocab-mobile-section.vocab-yellow .vocab-group-8 .vocab-group-body { background: var(--vocab-yellow-9); color: var(--vocab-yellow-dark); }
.vocab-mobile-section.vocab-yellow .vocab-group-9 .vocab-group-summary,
.vocab-mobile-section.vocab-yellow .vocab-group-9 .vocab-group-body { background: var(--vocab-yellow-10); color: var(--vocab-yellow-dark); }

.vocab-mobile-section.vocab-orange .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-orange .vocab-group-0 .vocab-group-body { background: var(--vocab-orange-1); color: #fff; }
.vocab-mobile-section.vocab-orange .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-orange .vocab-group-1 .vocab-group-body { background: var(--vocab-orange-2); color: #fff; }
.vocab-mobile-section.vocab-orange .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-orange .vocab-group-2 .vocab-group-body { background: var(--vocab-orange-3); color: #fff; }
.vocab-mobile-section.vocab-orange .vocab-group-3 .vocab-group-summary,
.vocab-mobile-section.vocab-orange .vocab-group-3 .vocab-group-body { background: var(--vocab-orange-4); color: var(--vocab-orange-dark); }
.vocab-mobile-section.vocab-orange .vocab-group-4 .vocab-group-summary,
.vocab-mobile-section.vocab-orange .vocab-group-4 .vocab-group-body { background: var(--vocab-orange-5); color: var(--vocab-orange-dark); }
.vocab-mobile-section.vocab-orange .vocab-group-5 .vocab-group-summary,
.vocab-mobile-section.vocab-orange .vocab-group-5 .vocab-group-body { background: var(--vocab-orange-6); color: var(--vocab-orange-dark); }

.vocab-mobile-section.vocab-cream .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-cream .vocab-group-0 .vocab-group-body { background: var(--vocab-cream-1); color: var(--vocab-cream-dark); }
.vocab-mobile-section.vocab-cream .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-cream .vocab-group-1 .vocab-group-body { background: var(--vocab-cream-2); color: var(--vocab-cream-dark); }
.vocab-mobile-section.vocab-cream .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-cream .vocab-group-2 .vocab-group-body { background: var(--vocab-cream-3); color: var(--vocab-cream-dark); }
.vocab-mobile-section.vocab-cream .vocab-group-3 .vocab-group-summary,
.vocab-mobile-section.vocab-cream .vocab-group-3 .vocab-group-body { background: var(--vocab-cream-4); color: var(--vocab-cream-dark); }
.vocab-mobile-section.vocab-cream .vocab-group-4 .vocab-group-summary,
.vocab-mobile-section.vocab-cream .vocab-group-4 .vocab-group-body { background: var(--vocab-cream-5); color: var(--vocab-cream-dark); }

.vocab-mobile-section.vocab-aqua .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-aqua .vocab-group-0 .vocab-group-body { background: var(--vocab-aqua-1); color: var(--vocab-aqua-dark); }
.vocab-mobile-section.vocab-aqua .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-aqua .vocab-group-1 .vocab-group-body { background: var(--vocab-aqua-2); color: var(--vocab-aqua-dark); }
.vocab-mobile-section.vocab-aqua .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-aqua .vocab-group-2 .vocab-group-body { background: var(--vocab-aqua-3); color: var(--vocab-aqua-dark); }
.vocab-mobile-section.vocab-aqua .vocab-group-3 .vocab-group-summary,
.vocab-mobile-section.vocab-aqua .vocab-group-3 .vocab-group-body { background: var(--vocab-aqua-4); color: var(--vocab-aqua-dark); }
.vocab-mobile-section.vocab-aqua .vocab-group-4 .vocab-group-summary,
.vocab-mobile-section.vocab-aqua .vocab-group-4 .vocab-group-body { background: var(--vocab-aqua-5); color: var(--vocab-aqua-dark); }
.vocab-mobile-section.vocab-aqua .vocab-group-5 .vocab-group-summary,
.vocab-mobile-section.vocab-aqua .vocab-group-5 .vocab-group-body { background: var(--vocab-aqua-6); color: var(--vocab-aqua-dark); }
.vocab-mobile-section.vocab-aqua .vocab-group-6 .vocab-group-summary,
.vocab-mobile-section.vocab-aqua .vocab-group-6 .vocab-group-body { background: var(--vocab-aqua-7); color: var(--vocab-aqua-dark); }
.vocab-mobile-section.vocab-aqua .vocab-group-7 .vocab-group-summary,
.vocab-mobile-section.vocab-aqua .vocab-group-7 .vocab-group-body { background: var(--vocab-aqua-8); color: var(--vocab-aqua-dark); }
.vocab-mobile-section.vocab-aqua .vocab-group-8 .vocab-group-summary,
.vocab-mobile-section.vocab-aqua .vocab-group-8 .vocab-group-body { background: var(--vocab-aqua-9); color: var(--vocab-aqua-dark); }
.vocab-mobile-section.vocab-aqua .vocab-group-9 .vocab-group-summary,
.vocab-mobile-section.vocab-aqua .vocab-group-9 .vocab-group-body { background: var(--vocab-aqua-10); color: var(--vocab-aqua-dark); }
.vocab-mobile-section.vocab-aqua .vocab-group-10 .vocab-group-summary,
.vocab-mobile-section.vocab-aqua .vocab-group-10 .vocab-group-body { background: var(--vocab-aqua-11); color: var(--vocab-aqua-dark); }
.vocab-mobile-section.vocab-aqua .vocab-group-11 .vocab-group-summary,
.vocab-mobile-section.vocab-aqua .vocab-group-11 .vocab-group-body { background: var(--vocab-aqua-12); color: var(--vocab-aqua-dark); }

.vocab-mobile-section.vocab-violet .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-violet .vocab-group-0 .vocab-group-body { background: var(--vocab-violet-1); color: #fff; }
.vocab-mobile-section.vocab-violet .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-violet .vocab-group-1 .vocab-group-body { background: var(--vocab-violet-2); color: #fff; }
.vocab-mobile-section.vocab-violet .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-violet .vocab-group-2 .vocab-group-body { background: var(--vocab-violet-3); color: #fff; }
.vocab-mobile-section.vocab-violet .vocab-group-3 .vocab-group-summary,
.vocab-mobile-section.vocab-violet .vocab-group-3 .vocab-group-body { background: var(--vocab-violet-4); color: #fff; }
.vocab-mobile-section.vocab-violet .vocab-group-4 .vocab-group-summary,
.vocab-mobile-section.vocab-violet .vocab-group-4 .vocab-group-body { background: var(--vocab-violet-5); color: #fff; }
.vocab-mobile-section.vocab-violet .vocab-group-5 .vocab-group-summary,
.vocab-mobile-section.vocab-violet .vocab-group-5 .vocab-group-body { background: var(--vocab-violet-6); color: #fff; }
.vocab-mobile-section.vocab-violet .vocab-group-6 .vocab-group-summary,
.vocab-mobile-section.vocab-violet .vocab-group-6 .vocab-group-body { background: var(--vocab-violet-7); color: #fff; }
.vocab-mobile-section.vocab-violet .vocab-group-7 .vocab-group-summary,
.vocab-mobile-section.vocab-violet .vocab-group-7 .vocab-group-body { background: var(--vocab-violet-8); color: #fff; }

.vocab-mobile-section.vocab-magenta .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-magenta .vocab-group-0 .vocab-group-body { background: var(--vocab-magenta-1); color: #fff; }
.vocab-mobile-section.vocab-magenta .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-magenta .vocab-group-1 .vocab-group-body { background: var(--vocab-magenta-2); color: #fff; }
.vocab-mobile-section.vocab-magenta .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-magenta .vocab-group-2 .vocab-group-body { background: var(--vocab-magenta-3); color: #fff; }
.vocab-mobile-section.vocab-magenta .vocab-group-3 .vocab-group-summary,
.vocab-mobile-section.vocab-magenta .vocab-group-3 .vocab-group-body { background: var(--vocab-magenta-4); color: #fff; }
.vocab-mobile-section.vocab-magenta .vocab-group-4 .vocab-group-summary,
.vocab-mobile-section.vocab-magenta .vocab-group-4 .vocab-group-body { background: var(--vocab-magenta-5); color: #fff; }
.vocab-mobile-section.vocab-magenta .vocab-group-5 .vocab-group-summary,
.vocab-mobile-section.vocab-magenta .vocab-group-5 .vocab-group-body { background: var(--vocab-magenta-6); color: #fff; }
.vocab-mobile-section.vocab-magenta .vocab-group-6 .vocab-group-summary,
.vocab-mobile-section.vocab-magenta .vocab-group-6 .vocab-group-body { background: var(--vocab-magenta-7); color: #fff; }
.vocab-mobile-section.vocab-magenta .vocab-group-7 .vocab-group-summary,
.vocab-mobile-section.vocab-magenta .vocab-group-7 .vocab-group-body { background: var(--vocab-magenta-8); color: #fff; }
.vocab-mobile-section.vocab-magenta .vocab-group-8 .vocab-group-summary,
.vocab-mobile-section.vocab-magenta .vocab-group-8 .vocab-group-body { background: var(--vocab-magenta-9); color: #fff; }
.vocab-mobile-section.vocab-magenta .vocab-group-9 .vocab-group-summary,
.vocab-mobile-section.vocab-magenta .vocab-group-9 .vocab-group-body { background: var(--vocab-magenta-10); color: #fff; }

.vocab-mobile-section.vocab-pink .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-pink .vocab-group-0 .vocab-group-body { background: var(--vocab-pink-1); color: var(--vocab-pink-dark); }
.vocab-mobile-section.vocab-pink .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-pink .vocab-group-1 .vocab-group-body { background: var(--vocab-pink-2); color: var(--vocab-pink-dark); }
.vocab-mobile-section.vocab-pink .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-pink .vocab-group-2 .vocab-group-body { background: var(--vocab-pink-3); color: var(--vocab-pink-dark); }
.vocab-mobile-section.vocab-pink .vocab-group-3 .vocab-group-summary,
.vocab-mobile-section.vocab-pink .vocab-group-3 .vocab-group-body { background: var(--vocab-pink-4); color: var(--vocab-pink-dark); }
.vocab-mobile-section.vocab-pink .vocab-group-4 .vocab-group-summary,
.vocab-mobile-section.vocab-pink .vocab-group-4 .vocab-group-body { background: var(--vocab-pink-5); color: var(--vocab-pink-dark); }
.vocab-mobile-section.vocab-pink .vocab-group-5 .vocab-group-summary,
.vocab-mobile-section.vocab-pink .vocab-group-5 .vocab-group-body { background: var(--vocab-pink-6); color: var(--vocab-pink-dark); }
.vocab-mobile-section.vocab-pink .vocab-group-6 .vocab-group-summary,
.vocab-mobile-section.vocab-pink .vocab-group-6 .vocab-group-body { background: var(--vocab-pink-7); color: var(--vocab-pink-dark); }
.vocab-mobile-section.vocab-pink .vocab-group-7 .vocab-group-summary,
.vocab-mobile-section.vocab-pink .vocab-group-7 .vocab-group-body { background: var(--vocab-pink-8); color: var(--vocab-pink-dark); }

.vocab-mobile-section.vocab-brown .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-brown .vocab-group-0 .vocab-group-body { background: var(--vocab-brown-1); color: var(--vocab-brown-dark); }
.vocab-mobile-section.vocab-brown .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-brown .vocab-group-1 .vocab-group-body { background: var(--vocab-brown-2); color: var(--vocab-brown-dark); }
.vocab-mobile-section.vocab-brown .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-brown .vocab-group-2 .vocab-group-body { background: var(--vocab-brown-3); color: var(--vocab-brown-dark); }
.vocab-mobile-section.vocab-brown .vocab-group-3 .vocab-group-summary,
.vocab-mobile-section.vocab-brown .vocab-group-3 .vocab-group-body { background: var(--vocab-brown-4); color: #fff; }
.vocab-mobile-section.vocab-brown .vocab-group-4 .vocab-group-summary,
.vocab-mobile-section.vocab-brown .vocab-group-4 .vocab-group-body { background: var(--vocab-brown-5); color: #fff; }
.vocab-mobile-section.vocab-brown .vocab-group-5 .vocab-group-summary,
.vocab-mobile-section.vocab-brown .vocab-group-5 .vocab-group-body { background: var(--vocab-brown-6); color: #fff; }
.vocab-mobile-section.vocab-brown .vocab-group-6 .vocab-group-summary,
.vocab-mobile-section.vocab-brown .vocab-group-6 .vocab-group-body { background: var(--vocab-brown-7); color: #fff; }

.vocab-mobile-section.vocab-gray .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-gray .vocab-group-0 .vocab-group-body { background: var(--vocab-gray-1); color: var(--vocab-gray-dark); }
.vocab-mobile-section.vocab-gray .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-gray .vocab-group-1 .vocab-group-body { background: var(--vocab-gray-2); color: var(--vocab-gray-dark); }
.vocab-mobile-section.vocab-gray .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-gray .vocab-group-2 .vocab-group-body { background: var(--vocab-gray-3); color: #fff; }
.vocab-mobile-section.vocab-gray .vocab-group-3 .vocab-group-summary,
.vocab-mobile-section.vocab-gray .vocab-group-3 .vocab-group-body { background: var(--vocab-gray-4); color: #fff; }

.vocab-mobile-section.vocab-black .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-black .vocab-group-0 .vocab-group-body { background: var(--vocab-black-1); color: #fff; }
.vocab-mobile-section.vocab-black .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-black .vocab-group-1 .vocab-group-body { background: var(--vocab-black-2); color: #fff; }
.vocab-mobile-section.vocab-black .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-black .vocab-group-2 .vocab-group-body { background: var(--vocab-black-3); color: #fff; }

.vocab-mobile-section.vocab-white .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-white .vocab-group-0 .vocab-group-body { background: var(--vocab-white-1); color: var(--vocab-white-dark); }
.vocab-mobile-section.vocab-white .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-white .vocab-group-1 .vocab-group-body { background: var(--vocab-white-2); color: var(--vocab-white-dark); }
.vocab-mobile-section.vocab-white .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-white .vocab-group-2 .vocab-group-body { background: var(--vocab-white-3); color: var(--vocab-white-dark); }
.vocab-mobile-section.vocab-white .vocab-group-3 .vocab-group-summary,
.vocab-mobile-section.vocab-white .vocab-group-3 .vocab-group-body { background: var(--vocab-white-4); color: var(--vocab-white-dark); }
.vocab-mobile-section.vocab-white .vocab-group-4 .vocab-group-summary,
.vocab-mobile-section.vocab-white .vocab-group-4 .vocab-group-body { background: var(--vocab-white-5); color: var(--vocab-white-dark); }

.vocab-mobile-section.vocab-burgundy .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-burgundy .vocab-group-0 .vocab-group-body { background: var(--vocab-burgundy-1); color: #fff; }
.vocab-mobile-section.vocab-burgundy .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-burgundy .vocab-group-1 .vocab-group-body { background: var(--vocab-burgundy-2); color: #fff; }
.vocab-mobile-section.vocab-burgundy .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-burgundy .vocab-group-2 .vocab-group-body { background: var(--vocab-burgundy-3); color: #fff; }
.vocab-mobile-section.vocab-burgundy .vocab-group-3 .vocab-group-summary,
.vocab-mobile-section.vocab-burgundy .vocab-group-3 .vocab-group-body { background: var(--vocab-burgundy-4); color: #fff; }
.vocab-mobile-section.vocab-burgundy .vocab-group-4 .vocab-group-summary,
.vocab-mobile-section.vocab-burgundy .vocab-group-4 .vocab-group-body { background: var(--vocab-burgundy-5); color: #fff; }
.vocab-mobile-section.vocab-burgundy .vocab-group-5 .vocab-group-summary,
.vocab-mobile-section.vocab-burgundy .vocab-group-5 .vocab-group-body { background: var(--vocab-burgundy-6); color: #000; }

.vocab-mobile-section.vocab-silver .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-silver .vocab-group-0 .vocab-group-body { background: var(--vocab-silver-1); color: var(--vocab-silver-dark); }
.vocab-mobile-section.vocab-silver .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-silver .vocab-group-1 .vocab-group-body { background: var(--vocab-silver-2); color: var(--vocab-silver-dark); }
.vocab-mobile-section.vocab-silver .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-silver .vocab-group-2 .vocab-group-body { background: var(--vocab-silver-3); color: var(--vocab-silver-dark); }


.vocab-mobile-section.vocab-green .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-0 .vocab-group-body { background: var(--vocab-green-1); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-1 .vocab-group-body { background: var(--vocab-green-2); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-2 .vocab-group-body { background: var(--vocab-green-3); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-3 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-3 .vocab-group-body { background: var(--vocab-green-4); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-4 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-4 .vocab-group-body { background: var(--vocab-green-5); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-5 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-5 .vocab-group-body { background: var(--vocab-green-6); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-6 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-6 .vocab-group-body { background: var(--vocab-green-7); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-7 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-7 .vocab-group-body { background: var(--vocab-green-8); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-8 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-8 .vocab-group-body { background: var(--vocab-green-9); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-9 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-9 .vocab-group-body { background: var(--vocab-green-10); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-10 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-10 .vocab-group-body { background: var(--vocab-green-11); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-11 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-11 .vocab-group-body { background: var(--vocab-green-12); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-12 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-12 .vocab-group-body { background: var(--vocab-green-13); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-13 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-13 .vocab-group-body { background: var(--vocab-green-14); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-14 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-14 .vocab-group-body { background: var(--vocab-green-15); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-15 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-15 .vocab-group-body { background: var(--vocab-green-16); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-16 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-16 .vocab-group-body { background: var(--vocab-green-17); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-17 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-17 .vocab-group-body { background: var(--vocab-green-18); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-18 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-18 .vocab-group-body { background: var(--vocab-green-19); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-19 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-19 .vocab-group-body { background: var(--vocab-green-20); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-20 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-20 .vocab-group-body { background: var(--vocab-green-21); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-21 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-21 .vocab-group-body { background: var(--vocab-green-22); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-22 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-22 .vocab-group-body { background: var(--vocab-green-23); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-23 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-23 .vocab-group-body { background: var(--vocab-green-24); color: #fff; }
.vocab-mobile-section.vocab-green .vocab-group-24 .vocab-group-summary,
.vocab-mobile-section.vocab-green .vocab-group-24 .vocab-group-body { background: var(--vocab-green-25); color: #fff; }


.vocab-mobile-section.vocab-blue .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-0 .vocab-group-body { background: var(--vocab-blue-1); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-1 .vocab-group-body { background: var(--vocab-blue-2); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-2 .vocab-group-body { background: var(--vocab-blue-3); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-3 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-3 .vocab-group-body { background: var(--vocab-blue-4); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-4 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-4 .vocab-group-body { background: var(--vocab-blue-5); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-5 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-5 .vocab-group-body { background: var(--vocab-blue-6); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-6 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-6 .vocab-group-body { background: var(--vocab-blue-7); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-7 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-7 .vocab-group-body { background: var(--vocab-blue-8); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-8 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-8 .vocab-group-body { background: var(--vocab-blue-9); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-9 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-9 .vocab-group-body { background: var(--vocab-blue-10); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-10 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-10 .vocab-group-body { background: var(--vocab-blue-11); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-11 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-11 .vocab-group-body { background: var(--vocab-blue-12); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-12 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-12 .vocab-group-body { background: var(--vocab-blue-13); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-13 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-13 .vocab-group-body { background: var(--vocab-blue-14); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-14 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-14 .vocab-group-body { background: var(--vocab-blue-15); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-15 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-15 .vocab-group-body { background: var(--vocab-blue-16); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-16 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-16 .vocab-group-body { background: var(--vocab-blue-17); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-17 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-17 .vocab-group-body { background: var(--vocab-blue-18); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-18 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-18 .vocab-group-body { background: var(--vocab-blue-19); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-19 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-19 .vocab-group-body { background: var(--vocab-blue-20); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-20 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-20 .vocab-group-body { background: var(--vocab-blue-21); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-21 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-21 .vocab-group-body { background: var(--vocab-blue-22); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-22 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-22 .vocab-group-body { background: var(--vocab-blue-23); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-23 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-23 .vocab-group-body { background: var(--vocab-blue-24); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-24 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-24 .vocab-group-body { background: var(--vocab-blue-25); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-25 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-25 .vocab-group-body { background: var(--vocab-blue-26); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-26 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-26 .vocab-group-body { background: var(--vocab-blue-27); color: #fff; }
.vocab-mobile-section.vocab-blue .vocab-group-27 .vocab-group-summary,
.vocab-mobile-section.vocab-blue .vocab-group-27 .vocab-group-body { background: var(--vocab-blue-28); color: #fff; }

.vocab-mobile-section.vocab-red .vocab-group-0 .vocab-group-summary,
.vocab-mobile-section.vocab-red .vocab-group-0 .vocab-group-body { background: var(--vocab-red-1); color: #fff; }
.vocab-mobile-section.vocab-red .vocab-group-1 .vocab-group-summary,
.vocab-mobile-section.vocab-red .vocab-group-1 .vocab-group-body { background: var(--vocab-red-2); color: #fff; }
.vocab-mobile-section.vocab-red .vocab-group-2 .vocab-group-summary,
.vocab-mobile-section.vocab-red .vocab-group-2 .vocab-group-body { background: var(--vocab-red-3); color: #fff; }
.vocab-mobile-section.vocab-red .vocab-group-3 .vocab-group-summary,
.vocab-mobile-section.vocab-red .vocab-group-3 .vocab-group-body { background: var(--vocab-red-4); color: #fff; }
.vocab-mobile-section.vocab-red .vocab-group-4 .vocab-group-summary,
.vocab-mobile-section.vocab-red .vocab-group-4 .vocab-group-body { background: var(--vocab-red-5); color: #fff; }
.vocab-mobile-section.vocab-red .vocab-group-5 .vocab-group-summary,
.vocab-mobile-section.vocab-red .vocab-group-5 .vocab-group-body { background: var(--vocab-red-6); color: #000; }

/* ================================================================
   FLASHCARD ARROW TONE VARIABLES — per subgroup, feeds --arrow-tone-1..4
   on .flashcard-arrow (see comment above that rule). Each subgroup gets
   4 nearby steps from its own category's tone scale (capped at the last
   step once N+k exceeds the scale length), same neighbor-shade approach
   as the front/back accent-bar rules above.
   ================================================================ */

.vocab-strip.vocab-yellow .vocab-group-0,
.vocab-mobile-section.vocab-yellow .vocab-group-0 {
  --arrow-tone-1: var(--vocab-yellow-1);
  --arrow-tone-2: var(--vocab-yellow-2);
  --arrow-tone-3: var(--vocab-yellow-3);
  --arrow-tone-4: var(--vocab-yellow-4);
}
.vocab-strip.vocab-yellow .vocab-group-1,
.vocab-mobile-section.vocab-yellow .vocab-group-1 {
  --arrow-tone-1: var(--vocab-yellow-2);
  --arrow-tone-2: var(--vocab-yellow-3);
  --arrow-tone-3: var(--vocab-yellow-4);
  --arrow-tone-4: var(--vocab-yellow-5);
}
.vocab-strip.vocab-yellow .vocab-group-2,
.vocab-mobile-section.vocab-yellow .vocab-group-2 {
  --arrow-tone-1: var(--vocab-yellow-3);
  --arrow-tone-2: var(--vocab-yellow-4);
  --arrow-tone-3: var(--vocab-yellow-5);
  --arrow-tone-4: var(--vocab-yellow-6);
}
.vocab-strip.vocab-yellow .vocab-group-3,
.vocab-mobile-section.vocab-yellow .vocab-group-3 {
  --arrow-tone-1: var(--vocab-yellow-4);
  --arrow-tone-2: var(--vocab-yellow-5);
  --arrow-tone-3: var(--vocab-yellow-6);
  --arrow-tone-4: var(--vocab-yellow-7);
}
.vocab-strip.vocab-yellow .vocab-group-4,
.vocab-mobile-section.vocab-yellow .vocab-group-4 {
  --arrow-tone-1: var(--vocab-yellow-5);
  --arrow-tone-2: var(--vocab-yellow-6);
  --arrow-tone-3: var(--vocab-yellow-7);
  --arrow-tone-4: var(--vocab-yellow-8);
}
.vocab-strip.vocab-yellow .vocab-group-5,
.vocab-mobile-section.vocab-yellow .vocab-group-5 {
  --arrow-tone-1: var(--vocab-yellow-6);
  --arrow-tone-2: var(--vocab-yellow-7);
  --arrow-tone-3: var(--vocab-yellow-8);
  --arrow-tone-4: var(--vocab-yellow-9);
}
.vocab-strip.vocab-yellow .vocab-group-6,
.vocab-mobile-section.vocab-yellow .vocab-group-6 {
  --arrow-tone-1: var(--vocab-yellow-7);
  --arrow-tone-2: var(--vocab-yellow-8);
  --arrow-tone-3: var(--vocab-yellow-9);
  --arrow-tone-4: var(--vocab-yellow-10);
}
.vocab-strip.vocab-yellow .vocab-group-7,
.vocab-mobile-section.vocab-yellow .vocab-group-7 {
  --arrow-tone-1: var(--vocab-yellow-8);
  --arrow-tone-2: var(--vocab-yellow-9);
  --arrow-tone-3: var(--vocab-yellow-10);
  --arrow-tone-4: var(--vocab-yellow-10);
}
.vocab-strip.vocab-yellow .vocab-group-8,
.vocab-mobile-section.vocab-yellow .vocab-group-8 {
  --arrow-tone-1: var(--vocab-yellow-9);
  --arrow-tone-2: var(--vocab-yellow-10);
  --arrow-tone-3: var(--vocab-yellow-10);
  --arrow-tone-4: var(--vocab-yellow-10);
}
.vocab-strip.vocab-yellow .vocab-group-9,
.vocab-mobile-section.vocab-yellow .vocab-group-9 {
  --arrow-tone-1: var(--vocab-yellow-10);
  --arrow-tone-2: var(--vocab-yellow-10);
  --arrow-tone-3: var(--vocab-yellow-10);
  --arrow-tone-4: var(--vocab-yellow-10);
}

.vocab-mobile-section.vocab-orange .vocab-group-0 {
  --arrow-tone-1: var(--vocab-orange-1);
  --arrow-tone-2: var(--vocab-orange-2);
  --arrow-tone-3: var(--vocab-orange-3);
  --arrow-tone-4: var(--vocab-orange-4);
}

.vocab-mobile-section.vocab-cream .vocab-group-0 {
  --arrow-tone-1: var(--vocab-cream-1);
  --arrow-tone-2: var(--vocab-cream-2);
  --arrow-tone-3: var(--vocab-cream-3);
  --arrow-tone-4: var(--vocab-cream-4);
}
.vocab-mobile-section.vocab-cream .vocab-group-1 {
  --arrow-tone-1: var(--vocab-cream-2);
  --arrow-tone-2: var(--vocab-cream-3);
  --arrow-tone-3: var(--vocab-cream-4);
  --arrow-tone-4: var(--vocab-cream-5);
}
.vocab-mobile-section.vocab-cream .vocab-group-2 {
  --arrow-tone-1: var(--vocab-cream-3);
  --arrow-tone-2: var(--vocab-cream-4);
  --arrow-tone-3: var(--vocab-cream-5);
  --arrow-tone-4: var(--vocab-cream-5);
}
.vocab-mobile-section.vocab-cream .vocab-group-3 {
  --arrow-tone-1: var(--vocab-cream-4);
  --arrow-tone-2: var(--vocab-cream-5);
  --arrow-tone-3: var(--vocab-cream-5);
  --arrow-tone-4: var(--vocab-cream-5);
}
.vocab-mobile-section.vocab-cream .vocab-group-4 {
  --arrow-tone-1: var(--vocab-cream-5);
  --arrow-tone-2: var(--vocab-cream-5);
  --arrow-tone-3: var(--vocab-cream-5);
  --arrow-tone-4: var(--vocab-cream-5);
}

.vocab-mobile-section.vocab-aqua .vocab-group-0 {
  --arrow-tone-1: var(--vocab-aqua-1);
  --arrow-tone-2: var(--vocab-aqua-2);
  --arrow-tone-3: var(--vocab-aqua-3);
  --arrow-tone-4: var(--vocab-aqua-4);
}
.vocab-mobile-section.vocab-aqua .vocab-group-1 {
  --arrow-tone-1: var(--vocab-aqua-2);
  --arrow-tone-2: var(--vocab-aqua-3);
  --arrow-tone-3: var(--vocab-aqua-4);
  --arrow-tone-4: var(--vocab-aqua-5);
}
.vocab-mobile-section.vocab-aqua .vocab-group-2 {
  --arrow-tone-1: var(--vocab-aqua-3);
  --arrow-tone-2: var(--vocab-aqua-4);
  --arrow-tone-3: var(--vocab-aqua-5);
  --arrow-tone-4: var(--vocab-aqua-6);
}
.vocab-mobile-section.vocab-aqua .vocab-group-3 {
  --arrow-tone-1: var(--vocab-aqua-4);
  --arrow-tone-2: var(--vocab-aqua-5);
  --arrow-tone-3: var(--vocab-aqua-6);
  --arrow-tone-4: var(--vocab-aqua-7);
}
.vocab-mobile-section.vocab-aqua .vocab-group-4 {
  --arrow-tone-1: var(--vocab-aqua-5);
  --arrow-tone-2: var(--vocab-aqua-6);
  --arrow-tone-3: var(--vocab-aqua-7);
  --arrow-tone-4: var(--vocab-aqua-8);
}
.vocab-mobile-section.vocab-aqua .vocab-group-5 {
  --arrow-tone-1: var(--vocab-aqua-6);
  --arrow-tone-2: var(--vocab-aqua-7);
  --arrow-tone-3: var(--vocab-aqua-8);
  --arrow-tone-4: var(--vocab-aqua-9);
}
.vocab-mobile-section.vocab-aqua .vocab-group-6 {
  --arrow-tone-1: var(--vocab-aqua-7);
  --arrow-tone-2: var(--vocab-aqua-8);
  --arrow-tone-3: var(--vocab-aqua-9);
  --arrow-tone-4: var(--vocab-aqua-10);
}
.vocab-mobile-section.vocab-aqua .vocab-group-7 {
  --arrow-tone-1: var(--vocab-aqua-8);
  --arrow-tone-2: var(--vocab-aqua-9);
  --arrow-tone-3: var(--vocab-aqua-10);
  --arrow-tone-4: var(--vocab-aqua-11);
}
.vocab-mobile-section.vocab-aqua .vocab-group-8 {
  --arrow-tone-1: var(--vocab-aqua-9);
  --arrow-tone-2: var(--vocab-aqua-10);
  --arrow-tone-3: var(--vocab-aqua-11);
  --arrow-tone-4: var(--vocab-aqua-12);
}
.vocab-mobile-section.vocab-aqua .vocab-group-9 {
  --arrow-tone-1: var(--vocab-aqua-10);
  --arrow-tone-2: var(--vocab-aqua-11);
  --arrow-tone-3: var(--vocab-aqua-12);
  --arrow-tone-4: var(--vocab-aqua-12);
}
.vocab-mobile-section.vocab-aqua .vocab-group-10 {
  --arrow-tone-1: var(--vocab-aqua-11);
  --arrow-tone-2: var(--vocab-aqua-12);
  --arrow-tone-3: var(--vocab-aqua-12);
  --arrow-tone-4: var(--vocab-aqua-12);
}
.vocab-mobile-section.vocab-aqua .vocab-group-11 {
  --arrow-tone-1: var(--vocab-aqua-12);
  --arrow-tone-2: var(--vocab-aqua-12);
  --arrow-tone-3: var(--vocab-aqua-12);
  --arrow-tone-4: var(--vocab-aqua-12);
}

.vocab-mobile-section.vocab-violet .vocab-group-0 {
  --arrow-tone-1: var(--vocab-violet-1);
  --arrow-tone-2: var(--vocab-violet-2);
  --arrow-tone-3: var(--vocab-violet-3);
  --arrow-tone-4: var(--vocab-violet-4);
}
.vocab-mobile-section.vocab-violet .vocab-group-1 {
  --arrow-tone-1: var(--vocab-violet-2);
  --arrow-tone-2: var(--vocab-violet-3);
  --arrow-tone-3: var(--vocab-violet-4);
  --arrow-tone-4: var(--vocab-violet-5);
}
.vocab-mobile-section.vocab-violet .vocab-group-2 {
  --arrow-tone-1: var(--vocab-violet-3);
  --arrow-tone-2: var(--vocab-violet-4);
  --arrow-tone-3: var(--vocab-violet-5);
  --arrow-tone-4: var(--vocab-violet-6);
}
.vocab-mobile-section.vocab-violet .vocab-group-3 {
  --arrow-tone-1: var(--vocab-violet-4);
  --arrow-tone-2: var(--vocab-violet-5);
  --arrow-tone-3: var(--vocab-violet-6);
  --arrow-tone-4: var(--vocab-violet-7);
}
.vocab-mobile-section.vocab-violet .vocab-group-4 {
  --arrow-tone-1: var(--vocab-violet-5);
  --arrow-tone-2: var(--vocab-violet-6);
  --arrow-tone-3: var(--vocab-violet-7);
  --arrow-tone-4: var(--vocab-violet-8);
}
.vocab-mobile-section.vocab-violet .vocab-group-5 {
  --arrow-tone-1: var(--vocab-violet-6);
  --arrow-tone-2: var(--vocab-violet-7);
  --arrow-tone-3: var(--vocab-violet-8);
  --arrow-tone-4: var(--vocab-violet-8);
}
.vocab-mobile-section.vocab-violet .vocab-group-6 {
  --arrow-tone-1: var(--vocab-violet-7);
  --arrow-tone-2: var(--vocab-violet-8);
  --arrow-tone-3: var(--vocab-violet-8);
  --arrow-tone-4: var(--vocab-violet-8);
}
.vocab-mobile-section.vocab-violet .vocab-group-7 {
  --arrow-tone-1: var(--vocab-violet-8);
  --arrow-tone-2: var(--vocab-violet-8);
  --arrow-tone-3: var(--vocab-violet-8);
  --arrow-tone-4: var(--vocab-violet-8);
}
.vocab-mobile-section.vocab-magenta .vocab-group-0 {
  --arrow-tone-1: var(--vocab-magenta-1);
  --arrow-tone-2: var(--vocab-magenta-2);
  --arrow-tone-3: var(--vocab-magenta-3);
  --arrow-tone-4: var(--vocab-magenta-4);
}
.vocab-mobile-section.vocab-magenta .vocab-group-1 {
  --arrow-tone-1: var(--vocab-magenta-2);
  --arrow-tone-2: var(--vocab-magenta-3);
  --arrow-tone-3: var(--vocab-magenta-4);
  --arrow-tone-4: var(--vocab-magenta-5);
}
.vocab-mobile-section.vocab-magenta .vocab-group-2 {
  --arrow-tone-1: var(--vocab-magenta-3);
  --arrow-tone-2: var(--vocab-magenta-4);
  --arrow-tone-3: var(--vocab-magenta-5);
  --arrow-tone-4: var(--vocab-magenta-6);
}
.vocab-mobile-section.vocab-magenta .vocab-group-3 {
  --arrow-tone-1: var(--vocab-magenta-4);
  --arrow-tone-2: var(--vocab-magenta-5);
  --arrow-tone-3: var(--vocab-magenta-6);
  --arrow-tone-4: var(--vocab-magenta-7);
}
.vocab-mobile-section.vocab-magenta .vocab-group-4 {
  --arrow-tone-1: var(--vocab-magenta-5);
  --arrow-tone-2: var(--vocab-magenta-6);
  --arrow-tone-3: var(--vocab-magenta-7);
  --arrow-tone-4: var(--vocab-magenta-8);
}
.vocab-mobile-section.vocab-magenta .vocab-group-5 {
  --arrow-tone-1: var(--vocab-magenta-6);
  --arrow-tone-2: var(--vocab-magenta-7);
  --arrow-tone-3: var(--vocab-magenta-8);
  --arrow-tone-4: var(--vocab-magenta-9);
}
.vocab-mobile-section.vocab-magenta .vocab-group-6 {
  --arrow-tone-1: var(--vocab-magenta-7);
  --arrow-tone-2: var(--vocab-magenta-8);
  --arrow-tone-3: var(--vocab-magenta-9);
  --arrow-tone-4: var(--vocab-magenta-10);
}
.vocab-mobile-section.vocab-magenta .vocab-group-7 {
  --arrow-tone-1: var(--vocab-magenta-8);
  --arrow-tone-2: var(--vocab-magenta-9);
  --arrow-tone-3: var(--vocab-magenta-10);
  --arrow-tone-4: var(--vocab-magenta-10);
}
.vocab-mobile-section.vocab-magenta .vocab-group-8 {
  --arrow-tone-1: var(--vocab-magenta-9);
  --arrow-tone-2: var(--vocab-magenta-10);
  --arrow-tone-3: var(--vocab-magenta-10);
  --arrow-tone-4: var(--vocab-magenta-10);
}
.vocab-mobile-section.vocab-magenta .vocab-group-9 {
  --arrow-tone-1: var(--vocab-magenta-10);
  --arrow-tone-2: var(--vocab-magenta-10);
  --arrow-tone-3: var(--vocab-magenta-10);
  --arrow-tone-4: var(--vocab-magenta-10);
}
.vocab-mobile-section.vocab-pink .vocab-group-0 {
  --arrow-tone-1: var(--vocab-pink-1);
  --arrow-tone-2: var(--vocab-pink-2);
  --arrow-tone-3: var(--vocab-pink-3);
  --arrow-tone-4: var(--vocab-pink-4);
}
.vocab-mobile-section.vocab-pink .vocab-group-1 {
  --arrow-tone-1: var(--vocab-pink-2);
  --arrow-tone-2: var(--vocab-pink-3);
  --arrow-tone-3: var(--vocab-pink-4);
  --arrow-tone-4: var(--vocab-pink-5);
}
.vocab-mobile-section.vocab-pink .vocab-group-2 {
  --arrow-tone-1: var(--vocab-pink-3);
  --arrow-tone-2: var(--vocab-pink-4);
  --arrow-tone-3: var(--vocab-pink-5);
  --arrow-tone-4: var(--vocab-pink-6);
}
.vocab-mobile-section.vocab-pink .vocab-group-3 {
  --arrow-tone-1: var(--vocab-pink-4);
  --arrow-tone-2: var(--vocab-pink-5);
  --arrow-tone-3: var(--vocab-pink-6);
  --arrow-tone-4: var(--vocab-pink-7);
}
.vocab-mobile-section.vocab-pink .vocab-group-4 {
  --arrow-tone-1: var(--vocab-pink-5);
  --arrow-tone-2: var(--vocab-pink-6);
  --arrow-tone-3: var(--vocab-pink-7);
  --arrow-tone-4: var(--vocab-pink-8);
}
.vocab-mobile-section.vocab-pink .vocab-group-5 {
  --arrow-tone-1: var(--vocab-pink-6);
  --arrow-tone-2: var(--vocab-pink-7);
  --arrow-tone-3: var(--vocab-pink-8);
  --arrow-tone-4: var(--vocab-pink-8);
}
.vocab-mobile-section.vocab-pink .vocab-group-6 {
  --arrow-tone-1: var(--vocab-pink-7);
  --arrow-tone-2: var(--vocab-pink-8);
  --arrow-tone-3: var(--vocab-pink-8);
  --arrow-tone-4: var(--vocab-pink-8);
}
.vocab-mobile-section.vocab-pink .vocab-group-7 {
  --arrow-tone-1: var(--vocab-pink-8);
  --arrow-tone-2: var(--vocab-pink-8);
  --arrow-tone-3: var(--vocab-pink-8);
  --arrow-tone-4: var(--vocab-pink-8);
}
.vocab-mobile-section.vocab-brown .vocab-group-0 {
  --arrow-tone-1: var(--vocab-brown-1);
  --arrow-tone-2: var(--vocab-brown-2);
  --arrow-tone-3: var(--vocab-brown-3);
  --arrow-tone-4: var(--vocab-brown-4);
}
.vocab-mobile-section.vocab-brown .vocab-group-1 {
  --arrow-tone-1: var(--vocab-brown-2);
  --arrow-tone-2: var(--vocab-brown-3);
  --arrow-tone-3: var(--vocab-brown-4);
  --arrow-tone-4: var(--vocab-brown-5);
}
.vocab-mobile-section.vocab-brown .vocab-group-2 {
  --arrow-tone-1: var(--vocab-brown-3);
  --arrow-tone-2: var(--vocab-brown-4);
  --arrow-tone-3: var(--vocab-brown-5);
  --arrow-tone-4: var(--vocab-brown-6);
}
.vocab-mobile-section.vocab-brown .vocab-group-3 {
  --arrow-tone-1: var(--vocab-brown-4);
  --arrow-tone-2: var(--vocab-brown-5);
  --arrow-tone-3: var(--vocab-brown-6);
  --arrow-tone-4: var(--vocab-brown-7);
}
.vocab-mobile-section.vocab-brown .vocab-group-4 {
  --arrow-tone-1: var(--vocab-brown-5);
  --arrow-tone-2: var(--vocab-brown-6);
  --arrow-tone-3: var(--vocab-brown-7);
  --arrow-tone-4: var(--vocab-brown-7);
}
.vocab-mobile-section.vocab-brown .vocab-group-5 {
  --arrow-tone-1: var(--vocab-brown-6);
  --arrow-tone-2: var(--vocab-brown-7);
  --arrow-tone-3: var(--vocab-brown-7);
  --arrow-tone-4: var(--vocab-brown-7);
}
.vocab-mobile-section.vocab-brown .vocab-group-6 {
  --arrow-tone-1: var(--vocab-brown-7);
  --arrow-tone-2: var(--vocab-brown-7);
  --arrow-tone-3: var(--vocab-brown-7);
  --arrow-tone-4: var(--vocab-brown-7);
}
.vocab-mobile-section.vocab-gray .vocab-group-0 {
  --arrow-tone-1: var(--vocab-gray-1);
  --arrow-tone-2: var(--vocab-gray-2);
  --arrow-tone-3: var(--vocab-gray-3);
  --arrow-tone-4: var(--vocab-gray-4);
}
.vocab-mobile-section.vocab-gray .vocab-group-1 {
  --arrow-tone-1: var(--vocab-gray-2);
  --arrow-tone-2: var(--vocab-gray-3);
  --arrow-tone-3: var(--vocab-gray-4);
  --arrow-tone-4: var(--vocab-gray-4);
}
.vocab-mobile-section.vocab-gray .vocab-group-2 {
  --arrow-tone-1: var(--vocab-gray-3);
  --arrow-tone-2: var(--vocab-gray-4);
  --arrow-tone-3: var(--vocab-gray-4);
  --arrow-tone-4: var(--vocab-gray-4);
}
.vocab-mobile-section.vocab-gray .vocab-group-3 {
  --arrow-tone-1: var(--vocab-gray-4);
  --arrow-tone-2: var(--vocab-gray-4);
  --arrow-tone-3: var(--vocab-gray-4);
  --arrow-tone-4: var(--vocab-gray-4);
}
.vocab-mobile-section.vocab-black .vocab-group-0 {
  --arrow-tone-1: var(--vocab-black-1);
  --arrow-tone-2: var(--vocab-black-2);
  --arrow-tone-3: var(--vocab-black-3);
  --arrow-tone-4: var(--vocab-black-3);
}
.vocab-mobile-section.vocab-black .vocab-group-1 {
  --arrow-tone-1: var(--vocab-black-2);
  --arrow-tone-2: var(--vocab-black-3);
  --arrow-tone-3: var(--vocab-black-3);
  --arrow-tone-4: var(--vocab-black-3);
}
.vocab-mobile-section.vocab-black .vocab-group-2 {
  --arrow-tone-1: var(--vocab-black-3);
  --arrow-tone-2: var(--vocab-black-3);
  --arrow-tone-3: var(--vocab-black-3);
  --arrow-tone-4: var(--vocab-black-3);
}
.vocab-mobile-section.vocab-white .vocab-group-0 {
  --arrow-tone-1: var(--vocab-white-1);
  --arrow-tone-2: var(--vocab-white-2);
  --arrow-tone-3: var(--vocab-white-3);
  --arrow-tone-4: var(--vocab-white-4);
}
.vocab-mobile-section.vocab-white .vocab-group-1 {
  --arrow-tone-1: var(--vocab-white-2);
  --arrow-tone-2: var(--vocab-white-3);
  --arrow-tone-3: var(--vocab-white-4);
  --arrow-tone-4: var(--vocab-white-5);
}
.vocab-mobile-section.vocab-white .vocab-group-2 {
  --arrow-tone-1: var(--vocab-white-3);
  --arrow-tone-2: var(--vocab-white-4);
  --arrow-tone-3: var(--vocab-white-5);
  --arrow-tone-4: var(--vocab-white-5);
}
.vocab-mobile-section.vocab-white .vocab-group-3 {
  --arrow-tone-1: var(--vocab-white-4);
  --arrow-tone-2: var(--vocab-white-5);
  --arrow-tone-3: var(--vocab-white-5);
  --arrow-tone-4: var(--vocab-white-5);
}
.vocab-mobile-section.vocab-white .vocab-group-4 {
  --arrow-tone-1: var(--vocab-white-5);
  --arrow-tone-2: var(--vocab-white-5);
  --arrow-tone-3: var(--vocab-white-5);
  --arrow-tone-4: var(--vocab-white-5);
}
.vocab-mobile-section.vocab-burgundy .vocab-group-0 {
  --arrow-tone-1: var(--vocab-burgundy-1);
  --arrow-tone-2: var(--vocab-burgundy-2);
  --arrow-tone-3: var(--vocab-burgundy-3);
  --arrow-tone-4: var(--vocab-burgundy-4);
}
.vocab-mobile-section.vocab-burgundy .vocab-group-1 {
  --arrow-tone-1: var(--vocab-burgundy-2);
  --arrow-tone-2: var(--vocab-burgundy-3);
  --arrow-tone-3: var(--vocab-burgundy-4);
  --arrow-tone-4: var(--vocab-burgundy-5);
}
.vocab-mobile-section.vocab-burgundy .vocab-group-2 {
  --arrow-tone-1: var(--vocab-burgundy-3);
  --arrow-tone-2: var(--vocab-burgundy-4);
  --arrow-tone-3: var(--vocab-burgundy-5);
  --arrow-tone-4: var(--vocab-burgundy-6);
}
.vocab-mobile-section.vocab-burgundy .vocab-group-3 {
  --arrow-tone-1: var(--vocab-burgundy-4);
  --arrow-tone-2: var(--vocab-burgundy-5);
  --arrow-tone-3: var(--vocab-burgundy-6);
  --arrow-tone-4: var(--vocab-burgundy-6);
}
.vocab-mobile-section.vocab-burgundy .vocab-group-4 {
  --arrow-tone-1: var(--vocab-burgundy-5);
  --arrow-tone-2: var(--vocab-burgundy-6);
  --arrow-tone-3: var(--vocab-burgundy-6);
  --arrow-tone-4: var(--vocab-burgundy-6);
}
.vocab-mobile-section.vocab-burgundy .vocab-group-5 {
  --arrow-tone-1: var(--vocab-burgundy-6);
  --arrow-tone-2: var(--vocab-burgundy-6);
  --arrow-tone-3: var(--vocab-burgundy-6);
  --arrow-tone-4: var(--vocab-burgundy-6);
}
.vocab-mobile-section.vocab-silver .vocab-group-0 {
  --arrow-tone-1: var(--vocab-silver-1);
  --arrow-tone-2: var(--vocab-silver-2);
  --arrow-tone-3: var(--vocab-silver-3);
  --arrow-tone-4: var(--vocab-silver-3);
}
.vocab-mobile-section.vocab-silver .vocab-group-1 {
  --arrow-tone-1: var(--vocab-silver-2);
  --arrow-tone-2: var(--vocab-silver-3);
  --arrow-tone-3: var(--vocab-silver-3);
  --arrow-tone-4: var(--vocab-silver-3);
}
.vocab-mobile-section.vocab-silver .vocab-group-2 {
  --arrow-tone-1: var(--vocab-silver-3);
  --arrow-tone-2: var(--vocab-silver-3);
  --arrow-tone-3: var(--vocab-silver-3);
  --arrow-tone-4: var(--vocab-silver-3);
}


.vocab-mobile-section.vocab-green .vocab-group-0 {
  --arrow-tone-1: var(--vocab-green-1);
  --arrow-tone-2: var(--vocab-green-2);
  --arrow-tone-3: var(--vocab-green-3);
  --arrow-tone-4: var(--vocab-green-4);
}
.vocab-mobile-section.vocab-green .vocab-group-1 {
  --arrow-tone-1: var(--vocab-green-2);
  --arrow-tone-2: var(--vocab-green-3);
  --arrow-tone-3: var(--vocab-green-4);
  --arrow-tone-4: var(--vocab-green-5);
}
.vocab-mobile-section.vocab-green .vocab-group-2 {
  --arrow-tone-1: var(--vocab-green-3);
  --arrow-tone-2: var(--vocab-green-4);
  --arrow-tone-3: var(--vocab-green-5);
  --arrow-tone-4: var(--vocab-green-6);
}
.vocab-mobile-section.vocab-green .vocab-group-3 {
  --arrow-tone-1: var(--vocab-green-4);
  --arrow-tone-2: var(--vocab-green-5);
  --arrow-tone-3: var(--vocab-green-6);
  --arrow-tone-4: var(--vocab-green-7);
}
.vocab-mobile-section.vocab-green .vocab-group-4 {
  --arrow-tone-1: var(--vocab-green-5);
  --arrow-tone-2: var(--vocab-green-6);
  --arrow-tone-3: var(--vocab-green-7);
  --arrow-tone-4: var(--vocab-green-8);
}
.vocab-mobile-section.vocab-green .vocab-group-5 {
  --arrow-tone-1: var(--vocab-green-6);
  --arrow-tone-2: var(--vocab-green-7);
  --arrow-tone-3: var(--vocab-green-8);
  --arrow-tone-4: var(--vocab-green-9);
}
.vocab-mobile-section.vocab-green .vocab-group-6 {
  --arrow-tone-1: var(--vocab-green-7);
  --arrow-tone-2: var(--vocab-green-8);
  --arrow-tone-3: var(--vocab-green-9);
  --arrow-tone-4: var(--vocab-green-10);
}
.vocab-mobile-section.vocab-green .vocab-group-7 {
  --arrow-tone-1: var(--vocab-green-8);
  --arrow-tone-2: var(--vocab-green-9);
  --arrow-tone-3: var(--vocab-green-10);
  --arrow-tone-4: var(--vocab-green-11);
}
.vocab-mobile-section.vocab-green .vocab-group-8 {
  --arrow-tone-1: var(--vocab-green-9);
  --arrow-tone-2: var(--vocab-green-10);
  --arrow-tone-3: var(--vocab-green-11);
  --arrow-tone-4: var(--vocab-green-12);
}
.vocab-mobile-section.vocab-green .vocab-group-9 {
  --arrow-tone-1: var(--vocab-green-10);
  --arrow-tone-2: var(--vocab-green-11);
  --arrow-tone-3: var(--vocab-green-12);
  --arrow-tone-4: var(--vocab-green-13);
}
.vocab-mobile-section.vocab-green .vocab-group-10 {
  --arrow-tone-1: var(--vocab-green-11);
  --arrow-tone-2: var(--vocab-green-12);
  --arrow-tone-3: var(--vocab-green-13);
  --arrow-tone-4: var(--vocab-green-14);
}
.vocab-mobile-section.vocab-green .vocab-group-11 {
  --arrow-tone-1: var(--vocab-green-12);
  --arrow-tone-2: var(--vocab-green-13);
  --arrow-tone-3: var(--vocab-green-14);
  --arrow-tone-4: var(--vocab-green-15);
}
.vocab-mobile-section.vocab-green .vocab-group-12 {
  --arrow-tone-1: var(--vocab-green-13);
  --arrow-tone-2: var(--vocab-green-14);
  --arrow-tone-3: var(--vocab-green-15);
  --arrow-tone-4: var(--vocab-green-16);
}
.vocab-mobile-section.vocab-green .vocab-group-13 {
  --arrow-tone-1: var(--vocab-green-14);
  --arrow-tone-2: var(--vocab-green-15);
  --arrow-tone-3: var(--vocab-green-16);
  --arrow-tone-4: var(--vocab-green-17);
}
.vocab-mobile-section.vocab-green .vocab-group-14 {
  --arrow-tone-1: var(--vocab-green-15);
  --arrow-tone-2: var(--vocab-green-16);
  --arrow-tone-3: var(--vocab-green-17);
  --arrow-tone-4: var(--vocab-green-18);
}
.vocab-mobile-section.vocab-green .vocab-group-15 {
  --arrow-tone-1: var(--vocab-green-16);
  --arrow-tone-2: var(--vocab-green-17);
  --arrow-tone-3: var(--vocab-green-18);
  --arrow-tone-4: var(--vocab-green-19);
}
.vocab-mobile-section.vocab-green .vocab-group-16 {
  --arrow-tone-1: var(--vocab-green-17);
  --arrow-tone-2: var(--vocab-green-18);
  --arrow-tone-3: var(--vocab-green-19);
  --arrow-tone-4: var(--vocab-green-20);
}
.vocab-mobile-section.vocab-green .vocab-group-17 {
  --arrow-tone-1: var(--vocab-green-18);
  --arrow-tone-2: var(--vocab-green-19);
  --arrow-tone-3: var(--vocab-green-20);
  --arrow-tone-4: var(--vocab-green-21);
}
.vocab-mobile-section.vocab-green .vocab-group-18 {
  --arrow-tone-1: var(--vocab-green-19);
  --arrow-tone-2: var(--vocab-green-20);
  --arrow-tone-3: var(--vocab-green-21);
  --arrow-tone-4: var(--vocab-green-22);
}
.vocab-mobile-section.vocab-green .vocab-group-19 {
  --arrow-tone-1: var(--vocab-green-20);
  --arrow-tone-2: var(--vocab-green-21);
  --arrow-tone-3: var(--vocab-green-22);
  --arrow-tone-4: var(--vocab-green-23);
}
.vocab-mobile-section.vocab-green .vocab-group-20 {
  --arrow-tone-1: var(--vocab-green-21);
  --arrow-tone-2: var(--vocab-green-22);
  --arrow-tone-3: var(--vocab-green-23);
  --arrow-tone-4: var(--vocab-green-24);
}
.vocab-mobile-section.vocab-green .vocab-group-21 {
  --arrow-tone-1: var(--vocab-green-22);
  --arrow-tone-2: var(--vocab-green-23);
  --arrow-tone-3: var(--vocab-green-24);
  --arrow-tone-4: var(--vocab-green-25);
}
.vocab-mobile-section.vocab-green .vocab-group-22 {
  --arrow-tone-1: var(--vocab-green-23);
  --arrow-tone-2: var(--vocab-green-24);
  --arrow-tone-3: var(--vocab-green-25);
  --arrow-tone-4: var(--vocab-green-25);
}
.vocab-mobile-section.vocab-green .vocab-group-23 {
  --arrow-tone-1: var(--vocab-green-24);
  --arrow-tone-2: var(--vocab-green-25);
  --arrow-tone-3: var(--vocab-green-25);
  --arrow-tone-4: var(--vocab-green-25);
}
.vocab-mobile-section.vocab-green .vocab-group-24 {
  --arrow-tone-1: var(--vocab-green-25);
  --arrow-tone-2: var(--vocab-green-25);
  --arrow-tone-3: var(--vocab-green-25);
  --arrow-tone-4: var(--vocab-green-25);
}


.vocab-strip.vocab-blue .vocab-group-0,
.vocab-mobile-section.vocab-blue .vocab-group-0 {
  --arrow-tone-1: var(--vocab-blue-1);
  --arrow-tone-2: var(--vocab-blue-2);
  --arrow-tone-3: var(--vocab-blue-3);
  --arrow-tone-4: var(--vocab-blue-4);
}
.vocab-strip.vocab-blue .vocab-group-1,
.vocab-mobile-section.vocab-blue .vocab-group-1 {
  --arrow-tone-1: var(--vocab-blue-2);
  --arrow-tone-2: var(--vocab-blue-3);
  --arrow-tone-3: var(--vocab-blue-4);
  --arrow-tone-4: var(--vocab-blue-5);
}
.vocab-strip.vocab-blue .vocab-group-2,
.vocab-mobile-section.vocab-blue .vocab-group-2 {
  --arrow-tone-1: var(--vocab-blue-3);
  --arrow-tone-2: var(--vocab-blue-4);
  --arrow-tone-3: var(--vocab-blue-5);
  --arrow-tone-4: var(--vocab-blue-6);
}
.vocab-strip.vocab-blue .vocab-group-3,
.vocab-mobile-section.vocab-blue .vocab-group-3 {
  --arrow-tone-1: var(--vocab-blue-4);
  --arrow-tone-2: var(--vocab-blue-5);
  --arrow-tone-3: var(--vocab-blue-6);
  --arrow-tone-4: var(--vocab-blue-7);
}
.vocab-strip.vocab-blue .vocab-group-4,
.vocab-mobile-section.vocab-blue .vocab-group-4 {
  --arrow-tone-1: var(--vocab-blue-5);
  --arrow-tone-2: var(--vocab-blue-6);
  --arrow-tone-3: var(--vocab-blue-7);
  --arrow-tone-4: var(--vocab-blue-8);
}
.vocab-strip.vocab-blue .vocab-group-5,
.vocab-mobile-section.vocab-blue .vocab-group-5 {
  --arrow-tone-1: var(--vocab-blue-6);
  --arrow-tone-2: var(--vocab-blue-7);
  --arrow-tone-3: var(--vocab-blue-8);
  --arrow-tone-4: var(--vocab-blue-9);
}
.vocab-strip.vocab-blue .vocab-group-6,
.vocab-mobile-section.vocab-blue .vocab-group-6 {
  --arrow-tone-1: var(--vocab-blue-7);
  --arrow-tone-2: var(--vocab-blue-8);
  --arrow-tone-3: var(--vocab-blue-9);
  --arrow-tone-4: var(--vocab-blue-10);
}
.vocab-strip.vocab-blue .vocab-group-7,
.vocab-mobile-section.vocab-blue .vocab-group-7 {
  --arrow-tone-1: var(--vocab-blue-8);
  --arrow-tone-2: var(--vocab-blue-9);
  --arrow-tone-3: var(--vocab-blue-10);
  --arrow-tone-4: var(--vocab-blue-11);
}
.vocab-strip.vocab-blue .vocab-group-8,
.vocab-mobile-section.vocab-blue .vocab-group-8 {
  --arrow-tone-1: var(--vocab-blue-9);
  --arrow-tone-2: var(--vocab-blue-10);
  --arrow-tone-3: var(--vocab-blue-11);
  --arrow-tone-4: var(--vocab-blue-12);
}
.vocab-strip.vocab-blue .vocab-group-9,
.vocab-mobile-section.vocab-blue .vocab-group-9 {
  --arrow-tone-1: var(--vocab-blue-10);
  --arrow-tone-2: var(--vocab-blue-11);
  --arrow-tone-3: var(--vocab-blue-12);
  --arrow-tone-4: var(--vocab-blue-13);
}
.vocab-strip.vocab-blue .vocab-group-10,
.vocab-mobile-section.vocab-blue .vocab-group-10 {
  --arrow-tone-1: var(--vocab-blue-11);
  --arrow-tone-2: var(--vocab-blue-12);
  --arrow-tone-3: var(--vocab-blue-13);
  --arrow-tone-4: var(--vocab-blue-14);
}
.vocab-strip.vocab-blue .vocab-group-11,
.vocab-mobile-section.vocab-blue .vocab-group-11 {
  --arrow-tone-1: var(--vocab-blue-12);
  --arrow-tone-2: var(--vocab-blue-13);
  --arrow-tone-3: var(--vocab-blue-14);
  --arrow-tone-4: var(--vocab-blue-15);
}
.vocab-strip.vocab-blue .vocab-group-12,
.vocab-mobile-section.vocab-blue .vocab-group-12 {
  --arrow-tone-1: var(--vocab-blue-13);
  --arrow-tone-2: var(--vocab-blue-14);
  --arrow-tone-3: var(--vocab-blue-15);
  --arrow-tone-4: var(--vocab-blue-16);
}
.vocab-strip.vocab-blue .vocab-group-13,
.vocab-mobile-section.vocab-blue .vocab-group-13 {
  --arrow-tone-1: var(--vocab-blue-14);
  --arrow-tone-2: var(--vocab-blue-15);
  --arrow-tone-3: var(--vocab-blue-16);
  --arrow-tone-4: var(--vocab-blue-17);
}
.vocab-strip.vocab-blue .vocab-group-14,
.vocab-mobile-section.vocab-blue .vocab-group-14 {
  --arrow-tone-1: var(--vocab-blue-15);
  --arrow-tone-2: var(--vocab-blue-16);
  --arrow-tone-3: var(--vocab-blue-17);
  --arrow-tone-4: var(--vocab-blue-18);
}
.vocab-strip.vocab-blue .vocab-group-15,
.vocab-mobile-section.vocab-blue .vocab-group-15 {
  --arrow-tone-1: var(--vocab-blue-16);
  --arrow-tone-2: var(--vocab-blue-17);
  --arrow-tone-3: var(--vocab-blue-18);
  --arrow-tone-4: var(--vocab-blue-19);
}
.vocab-strip.vocab-blue .vocab-group-16,
.vocab-mobile-section.vocab-blue .vocab-group-16 {
  --arrow-tone-1: var(--vocab-blue-17);
  --arrow-tone-2: var(--vocab-blue-18);
  --arrow-tone-3: var(--vocab-blue-19);
  --arrow-tone-4: var(--vocab-blue-20);
}
.vocab-strip.vocab-blue .vocab-group-17,
.vocab-mobile-section.vocab-blue .vocab-group-17 {
  --arrow-tone-1: var(--vocab-blue-18);
  --arrow-tone-2: var(--vocab-blue-19);
  --arrow-tone-3: var(--vocab-blue-20);
  --arrow-tone-4: var(--vocab-blue-21);
}
.vocab-strip.vocab-blue .vocab-group-18,
.vocab-mobile-section.vocab-blue .vocab-group-18 {
  --arrow-tone-1: var(--vocab-blue-19);
  --arrow-tone-2: var(--vocab-blue-20);
  --arrow-tone-3: var(--vocab-blue-21);
  --arrow-tone-4: var(--vocab-blue-22);
}
.vocab-strip.vocab-blue .vocab-group-19,
.vocab-mobile-section.vocab-blue .vocab-group-19 {
  --arrow-tone-1: var(--vocab-blue-20);
  --arrow-tone-2: var(--vocab-blue-21);
  --arrow-tone-3: var(--vocab-blue-22);
  --arrow-tone-4: var(--vocab-blue-23);
}
.vocab-strip.vocab-blue .vocab-group-20,
.vocab-mobile-section.vocab-blue .vocab-group-20 {
  --arrow-tone-1: var(--vocab-blue-21);
  --arrow-tone-2: var(--vocab-blue-22);
  --arrow-tone-3: var(--vocab-blue-23);
  --arrow-tone-4: var(--vocab-blue-24);
}
.vocab-strip.vocab-blue .vocab-group-21,
.vocab-mobile-section.vocab-blue .vocab-group-21 {
  --arrow-tone-1: var(--vocab-blue-22);
  --arrow-tone-2: var(--vocab-blue-23);
  --arrow-tone-3: var(--vocab-blue-24);
  --arrow-tone-4: var(--vocab-blue-25);
}
.vocab-strip.vocab-blue .vocab-group-22,
.vocab-mobile-section.vocab-blue .vocab-group-22 {
  --arrow-tone-1: var(--vocab-blue-23);
  --arrow-tone-2: var(--vocab-blue-24);
  --arrow-tone-3: var(--vocab-blue-25);
  --arrow-tone-4: var(--vocab-blue-26);
}
.vocab-strip.vocab-blue .vocab-group-23,
.vocab-mobile-section.vocab-blue .vocab-group-23 {
  --arrow-tone-1: var(--vocab-blue-24);
  --arrow-tone-2: var(--vocab-blue-25);
  --arrow-tone-3: var(--vocab-blue-26);
  --arrow-tone-4: var(--vocab-blue-27);
}
.vocab-strip.vocab-blue .vocab-group-24,
.vocab-mobile-section.vocab-blue .vocab-group-24 {
  --arrow-tone-1: var(--vocab-blue-25);
  --arrow-tone-2: var(--vocab-blue-26);
  --arrow-tone-3: var(--vocab-blue-27);
  --arrow-tone-4: var(--vocab-blue-28);
}
.vocab-strip.vocab-blue .vocab-group-25,
.vocab-mobile-section.vocab-blue .vocab-group-25 {
  --arrow-tone-1: var(--vocab-blue-26);
  --arrow-tone-2: var(--vocab-blue-27);
  --arrow-tone-3: var(--vocab-blue-28);
  --arrow-tone-4: var(--vocab-blue-28);
}
.vocab-strip.vocab-blue .vocab-group-26,
.vocab-mobile-section.vocab-blue .vocab-group-26 {
  --arrow-tone-1: var(--vocab-blue-27);
  --arrow-tone-2: var(--vocab-blue-28);
  --arrow-tone-3: var(--vocab-blue-28);
  --arrow-tone-4: var(--vocab-blue-28);
}
.vocab-strip.vocab-blue .vocab-group-27,
.vocab-mobile-section.vocab-blue .vocab-group-27 {
  --arrow-tone-1: var(--vocab-blue-28);
  --arrow-tone-2: var(--vocab-blue-28);
  --arrow-tone-3: var(--vocab-blue-28);
  --arrow-tone-4: var(--vocab-blue-28);
}

.vocab-strip.vocab-red .vocab-group-0,
.vocab-mobile-section.vocab-red .vocab-group-0 {
  --arrow-tone-1: var(--vocab-red-1);
  --arrow-tone-2: var(--vocab-red-2);
  --arrow-tone-3: var(--vocab-red-3);
  --arrow-tone-4: var(--vocab-red-4);
}
.vocab-strip.vocab-red .vocab-group-1,
.vocab-mobile-section.vocab-red .vocab-group-1 {
  --arrow-tone-1: var(--vocab-red-2);
  --arrow-tone-2: var(--vocab-red-3);
  --arrow-tone-3: var(--vocab-red-4);
  --arrow-tone-4: var(--vocab-red-5);
}
.vocab-strip.vocab-red .vocab-group-2,
.vocab-mobile-section.vocab-red .vocab-group-2 {
  --arrow-tone-1: var(--vocab-red-3);
  --arrow-tone-2: var(--vocab-red-4);
  --arrow-tone-3: var(--vocab-red-5);
  --arrow-tone-4: var(--vocab-red-6);
}
.vocab-strip.vocab-red .vocab-group-3,
.vocab-mobile-section.vocab-red .vocab-group-3 {
  --arrow-tone-1: var(--vocab-red-4);
  --arrow-tone-2: var(--vocab-red-5);
  --arrow-tone-3: var(--vocab-red-6);
  --arrow-tone-4: var(--vocab-red-6);
}
.vocab-strip.vocab-red .vocab-group-4,
.vocab-mobile-section.vocab-red .vocab-group-4 {
  --arrow-tone-1: var(--vocab-red-5);
  --arrow-tone-2: var(--vocab-red-6);
  --arrow-tone-3: var(--vocab-red-6);
  --arrow-tone-4: var(--vocab-red-6);
}
.vocab-strip.vocab-red .vocab-group-5,
.vocab-mobile-section.vocab-red .vocab-group-5 {
  --arrow-tone-1: var(--vocab-red-6);
  --arrow-tone-2: var(--vocab-red-6);
  --arrow-tone-3: var(--vocab-red-6);
  --arrow-tone-4: var(--vocab-red-6);
}