/*!
 * Vivitsu: Free Resources ("by design"), used by free_resources_by_design.php. Light (white) theme via .is-light.
 * Vivitsu: Free Resources ("by design" v2). Scoped to .vv-fr, every class prefixed vfr-,
 * so header_jp.php, footer_jp.php, fstyle.css and Bootstrap can't collide with it.
 * SKILL.md: materials & depth (§12), press feedback (§1), springs (§3–4), reduced motion (§14), type (§15).
 */
.vv-fr {
  --ink: #141B33; --ink-2: #3F4762; --mist: #5F6680; --line: rgba(20,27,51,.10);
  --paper: #F4F5F9; --coral: #F05969; --coral-2: #FF7A6B;
  --rtp: #F05969; --mtp: #3E63DD; --pp: #8B5CF6; --sm: #0E9F6E;
  --ok: #138A5A; --ok-tint: #E7F6EF;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --scene:
    radial-gradient(42% 55% at 88% 10%, rgba(240,89,105,.70), transparent 70%),
    radial-gradient(38% 50% at 60% 100%, rgba(255,140,110,.30), transparent 70%),
    radial-gradient(45% 60% at 4% 96%, rgba(76,110,245,.55), transparent 70%),
    radial-gradient(30% 40% at 30% 18%, rgba(120,90,220,.30), transparent 70%),
    linear-gradient(155deg, #10162C 0%, #1A2148 50%, #251B42 100%);
  font: 400 1rem/1.55 var(--font); color: var(--ink-2); -webkit-font-smoothing: antialiased;
  background: var(--paper); position: relative; isolation: isolate;
}
.vv-fr *, .vv-fr *::before, .vv-fr *::after { box-sizing: border-box; }
.vv-fr h1, .vv-fr h2, .vv-fr h3, .vv-fr h4, .vv-fr p, .vv-fr ul, .vv-fr ol { margin: 0; }
.vv-fr ul, .vv-fr ol { padding: 0; list-style: none; }
.vv-fr section { overflow: visible; }                       /* fstyle.css: section { overflow-x: hidden } */
.vv-fr details { border: 0; margin: 0; }                    /* fstyle.css borders every <details> */
.vv-fr details summary, .vv-fr details[open] summary { background: none; border: 0; padding-left: 0; padding-right: 0; margin: 0; font-weight: inherit; }
.vv-fr a { text-decoration: none; }
.vv-fr [hidden] { display: none !important; }
.vv-fr .vfr-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.vv-fr .vfr-scene { position: relative; overflow: hidden; color: #fff; background: var(--scene); }
.vv-fr .vfr-scene::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(255,255,255,.045) 39px 40px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 48%, transparent 78%); mask-image: linear-gradient(90deg, #000 0 48%, transparent 78%); }

/* ---------- buttons ---------- */
.vv-fr .vfr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 16px; border: 0;
  font: 650 1rem var(--font); letter-spacing: -0.01em; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease-out, filter .15s, background-color .2s, color .2s, border-color .2s; }
.vv-fr .vfr-btn-primary { color: #fff; background: linear-gradient(180deg, #FF6E7B, var(--coral) 60%, #E84C5D);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -6px rgba(240,89,105,.6); }
.vv-fr .vfr-btn-glass { color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.vv-fr .vfr-btn-light { color: var(--ink); background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20,27,51,.06); height: 46px; padding: 0 18px; border-radius: 14px; font-size: .9375rem; }
.vv-fr .vfr-pressed { transform: scale(.97); filter: brightness(.96); }

/* ================= HERO ================= */
.vv-fr .vfr-hero { padding: calc(var(--vv-header-offset, 0px) + 64px) 0 196px; }
.vv-fr .vfr-hero .vfr-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.vv-fr .vfr-crumbs { display: flex; gap: 8px; align-items: center; font-size: .875rem; color: rgba(255,255,255,.66); margin-bottom: 22px; }
.vv-fr .vfr-crumbs a { color: rgba(255,255,255,.88); font-weight: 550; }
.vv-fr .vfr-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: .8125rem; font-weight: 650; color: #fff;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); margin-bottom: 20px; }
.vv-fr .vfr-pill b { background: var(--coral); border-radius: 999px; padding: 2px 9px; font-size: .75rem; }
.vv-fr .vfr-hero h1 { font-size: clamp(2.6rem, 1.5rem + 3.15vw, 4.1rem); line-height: 1.03; letter-spacing: -0.048em; font-weight: 770; color: #fff; text-wrap: balance; }
.vv-fr .vfr-hero h1 em { font-style: normal; color: #FFC2BB; display: block; }
@media (min-width: 1081px) { .vv-fr .vfr-hero h1 em { white-space: nowrap; } }
.vv-fr .vfr-lead { margin-top: 22px; font-size: 1.1875rem; line-height: 1.5; color: rgba(255,255,255,.80); max-width: 44ch; letter-spacing: -0.01em; font-weight: 450; }
.vv-fr .vfr-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.vv-fr .vfr-trust { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 18px; font-size: .9375rem; color: rgba(255,255,255,.78); font-weight: 550; }
.vv-fr .vfr-trust span { display: inline-flex; gap: 8px; align-items: center; }
.vv-fr .vfr-trust svg { color: #FFB4A6; }

/* fanned stack of glass study sheets */
.vv-fr .vfr-fan { position: relative; height: 480px; perspective: 1400px; }
.vv-fr .vfr-sheetdoc { position: absolute; left: 50%; top: 50%; width: 270px; height: 350px; margin: -175px 0 0 -135px; border-radius: 22px; padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255,255,255,.16); border-top-color: rgba(255,255,255,.4); box-shadow: 0 30px 70px rgba(5,8,25,.45); color: #fff; }
.vv-fr .vfr-sheetdoc.is-back { transform: translate(-158px, 26px) rotate(-12deg) scale(.86); opacity: .78; filter: blur(.6px); z-index: 1; }
.vv-fr .vfr-sheetdoc.is-mid  { transform: translate(156px, 10px) rotate(10deg) scale(.9); opacity: .9; z-index: 2; }
.vv-fr .vfr-sheetdoc.is-front { transform: translate(0, -6px); z-index: 3; box-shadow: 0 40px 90px rgba(5,8,25,.6);
  /* dense tinted glass: still lit from the top, but nothing behind shows through (SKILL §12: no light glass on light glass) */
  background: linear-gradient(180deg, rgba(74,82,140,.96), rgba(40,46,92,.97)); border-color: rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.45); }
.vv-fr .vfr-type { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; font: 750 .75rem var(--font); letter-spacing: .04em; color: #fff; }
.vv-fr .vfr-type.t-rtp { background: var(--rtp); } .vv-fr .vfr-type.t-mtp { background: var(--mtp); }
.vv-fr .vfr-type.t-pp { background: var(--pp); } .vv-fr .vfr-type.t-sm { background: var(--sm); }
.vv-fr .vfr-sheetdoc .vfr-lvl { margin-top: 18px; font-size: .75rem; font-weight: 650; color: rgba(255,255,255,.72); }
.vv-fr .vfr-sheetdoc h4 { margin-top: 4px; font-size: 1.25rem; line-height: 1.22; font-weight: 720; letter-spacing: -0.02em; color: #fff; }
.vv-fr .vfr-lines { margin-top: 18px; display: grid; gap: 9px; }
.vv-fr .vfr-lines i { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.22); }
.vv-fr .vfr-lines i:nth-child(2) { width: 86%; } .vv-fr .vfr-lines i:nth-child(3) { width: 92%; } .vv-fr .vfr-lines i:nth-child(4) { width: 64%; }
.vv-fr .vfr-lines i.hl { background: linear-gradient(90deg, rgba(255,214,102,.75), rgba(255,214,102,.35)); width: 78%; }
.vv-fr .vfr-sheetdoc .vfr-dl { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; justify-content: space-between; align-items: center;
  padding: 10px 10px 10px 14px; border-radius: 14px; background: rgba(255,255,255,.14); font-size: .8125rem; font-weight: 600; color: rgba(255,255,255,.85); }
.vv-fr .vfr-sheetdoc .vfr-dl b { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: var(--ink); padding: 7px 12px; border-radius: 10px; font-weight: 700; }
.vv-fr .vfr-float { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; color: #fff; font-weight: 650; font-size: .875rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 16px 34px rgba(5,8,25,.35); }
.vv-fr .vfr-float i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
.vv-fr .vfr-float.f1 { left: 4%; bottom: 0; } .vv-fr .vfr-float.f1 i { background: rgba(110,231,183,.25); }
.vv-fr .vfr-float.f2 { right: 2%; top: 0; }    .vv-fr .vfr-float.f2 i { background: rgba(255,194,187,.25); }

/* ================= LIBRARY ================= */
.vv-fr .vfr-library { position: relative; z-index: 5; margin-top: -132px; }
.vv-fr .vfr-panel { background: #fff; border-radius: 34px; padding: 40px;
  box-shadow: 0 1px 2px rgba(20,27,51,.06), 0 18px 40px rgba(20,27,51,.10), 0 70px 130px -40px rgba(20,27,51,.30); }
.vv-fr .vfr-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.vv-fr h2 { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.375rem); line-height: 1.1; letter-spacing: -0.035em; font-weight: 750; color: var(--ink); text-wrap: balance; }
.vv-fr .vfr-sub { margin-top: 8px; color: var(--mist); font-size: 1rem; font-weight: 500; max-width: 58ch; }
.vv-fr .vfr-search { position: relative; width: min(340px, 100%); }
.vv-fr .vfr-search input { width: 100%; height: 50px; border-radius: 15px; border: 1px solid var(--line); background: var(--paper); padding: 0 16px 0 46px;
  font: 500 .9375rem var(--font); color: var(--ink); outline: 0; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.vv-fr .vfr-search input:focus { background: #fff; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(20,27,51,.08); }
.vv-fr .vfr-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--mist); }

/* level cards */
.vv-fr .vfr-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.vv-fr .vfr-level { position: relative; text-align: left; border: 1px solid var(--line); background: var(--paper); border-radius: 22px; padding: 18px 18px 18px 18px; cursor: pointer;
  display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; font-family: var(--font); overflow: hidden;
  transition: transform 100ms ease-out, background-color .25s, border-color .25s, box-shadow .25s; }
.vv-fr .vfr-level .vfr-glyph { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; font: 780 1.0625rem var(--font); letter-spacing: -0.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.vv-fr .vfr-level:nth-child(1) .vfr-glyph { background: linear-gradient(135deg, #FFA27A, #F05969); }
.vv-fr .vfr-level:nth-child(2) .vfr-glyph { background: linear-gradient(135deg, #7AA2FF, #3E63DD); }
.vv-fr .vfr-level:nth-child(3) .vfr-glyph { background: linear-gradient(135deg, #B794F6, #6D3FD6); }
.vv-fr .vfr-level b { display: block; font-size: 1.0625rem; font-weight: 720; color: var(--ink); letter-spacing: -0.015em; }
.vv-fr .vfr-level span { display: block; font-size: .8125rem; color: var(--mist); font-weight: 550; margin-top: 2px; }
.vv-fr .vfr-level[aria-selected="true"] { background: var(--ink); border-color: var(--ink); box-shadow: 0 18px 36px -14px rgba(20,27,51,.6); }
.vv-fr .vfr-level[aria-selected="true"] b { color: #fff; }
.vv-fr .vfr-level[aria-selected="true"] span { color: rgba(255,255,255,.7); }
.vv-fr .vfr-level[aria-selected="true"]::after { content: ""; position: absolute; right: -30px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,89,105,.55), transparent 70%); }
.vv-fr .vfr-level:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.vv-fr .vfr-filters { display: flex; flex-wrap: wrap; gap: 20px 28px; margin-top: 26px; align-items: flex-start; }
.vv-fr .vfr-fgroup { min-width: 0; }
.vv-fr .vfr-label { font-size: .8125rem; font-weight: 650; color: var(--mist); margin-bottom: 10px; letter-spacing: .01em; }
.vv-fr .vfr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vv-fr .vfr-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; height: 40px; padding: 0 15px; border-radius: 999px; cursor: pointer;
  font: 600 .9375rem var(--font); color: var(--ink-2); white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s, transform 100ms; }
.vv-fr .vfr-chip:hover { border-color: rgba(20,27,51,.24); }
.vv-fr .vfr-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.vv-fr .vfr-chip i { width: 8px; height: 8px; border-radius: 50%; }

.vv-fr .vfr-meta { display: flex; justify-content: space-between; align-items: center; margin: 28px 0 16px; font-size: .875rem; color: var(--mist); font-weight: 550; }
.vv-fr .vfr-meta b { color: var(--ink); font-weight: 720; }
.vv-fr .vfr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vv-fr .vfr-card { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px; border-radius: 22px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20,27,51,.05);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; }
.vv-fr .vfr-card:hover { transform: translateY(-2px); border-color: rgba(20,27,51,.16); box-shadow: 0 16px 34px -14px rgba(20,27,51,.25); }
.vv-fr .vfr-doc { position: relative; width: 54px; height: 66px; border-radius: 12px; background: linear-gradient(160deg, #fff, #EEF0F6); border: 1px solid var(--line);
  display: grid; place-items: end center; padding-bottom: 7px; }
.vv-fr .vfr-doc::before { content: ""; position: absolute; left: 10px; right: 12px; top: 12px; height: 20px; background: repeating-linear-gradient(to bottom, #D3D8E5 0 2px, transparent 2px 6px); }
.vv-fr .vfr-doc em { font: normal 800 .625rem var(--font); letter-spacing: .05em; color: #fff; padding: 2px 6px; border-radius: 5px; }
.vv-fr .vfr-card.c-rtp .vfr-doc em { background: var(--rtp); } .vv-fr .vfr-card.c-mtp .vfr-doc em { background: var(--mtp); }
.vv-fr .vfr-card.c-pp .vfr-doc em { background: var(--pp); }   .vv-fr .vfr-card.c-sm .vfr-doc em { background: var(--sm); }
.vv-fr .vfr-ch { font-size: .75rem; font-weight: 700; color: var(--mist); letter-spacing: .02em; }
.vv-fr .vfr-name { font-weight: 700; color: var(--ink); font-size: 1.0625rem; letter-spacing: -0.015em; line-height: 1.3; margin-top: 2px; }
.vv-fr .vfr-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.vv-fr .vfr-tag { display: inline-flex; gap: 6px; align-items: center; font-weight: 650; font-size: .8125rem; color: var(--mist); }
.vv-fr .vfr-tag.is-secure { color: var(--mtp); }
.vv-fr .vfr-tag a { color: var(--ink); border-bottom: 1.5px solid var(--coral); margin-left: 4px; }
.vv-fr .vfr-get { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--ink); color: #fff;
  font: 650 .875rem var(--font); white-space: nowrap; transition: transform 100ms, background-color .2s; box-shadow: 0 8px 18px -10px rgba(20,27,51,.7); }
.vv-fr .vfr-get:hover { background: #262F52; color: #fff; }

/* states */
.vv-fr .vfr-skel { display: grid; grid-template-columns: 54px 1fr; gap: 16px; padding: 18px; border-radius: 22px; border: 1px solid var(--line); }
.vv-fr .vfr-skel i { display: block; height: 14px; border-radius: 8px; background: linear-gradient(90deg, #EEF0F5 0%, #F8F9FB 40%, #EEF0F5 80%); background-size: 300% 100%; animation: vfrshim 1.4s linear infinite; }
.vv-fr .vfr-skel i.sq { width: 54px; height: 66px; border-radius: 12px; }
.vv-fr .vfr-skel .lines i + i { margin-top: 10px; width: 55%; } .vv-fr .vfr-skel .lines i:last-child { width: 30%; height: 34px; border-radius: 12px; margin-top: 16px; margin-left: auto; }
@keyframes vfrshim { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.vv-fr .vfr-state { text-align: center; padding: 48px 16px 40px; }
.vv-fr .vfr-state .vfr-ico { width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 22px; display: grid; place-items: center; background: var(--paper); }
.vv-fr .vfr-state h3 { font-size: 1.25rem; font-weight: 720; color: var(--ink); letter-spacing: -0.018em; }
.vv-fr .vfr-state p { margin-top: 6px; color: var(--mist); font-size: .9375rem; }
.vv-fr .vfr-state .vfr-btn-light { margin-top: 18px; }

/* ================= GUIDE: its own lit scene ================= */
.vv-fr .vfr-guide { margin-top: 96px; padding: 88px 0 96px; }
.vv-fr .vfr-guide h2 { color: #fff; }
.vv-fr .vfr-guide .vfr-sub { color: rgba(255,255,255,.76); }
.vv-fr .vfr-guide .vfr-sub b { color: #fff; }
.vv-fr .vfr-file { display: inline-flex; font: 600 .8125rem ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(20,27,51,.06); padding: 1px 7px; border-radius: 6px; color: var(--ink); }
.vv-fr .vfr-guide .vfr-sub .vfr-file { background: rgba(255,255,255,.14); color: #fff; }
.vv-fr .vfr-ghead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.vv-fr .vfr-auto { font-size: .8125rem; color: rgba(255,255,255,.66); margin-top: 12px; display: flex; gap: 6px; align-items: center; }
.vv-fr .vfr-devices { display: inline-grid; grid-auto-flow: column; gap: 6px; padding: 6px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.vv-fr .vfr-device { display: grid; justify-items: center; gap: 6px; width: 104px; padding: 12px 6px 10px; border-radius: 15px; border: 0; background: none; cursor: pointer; color: rgba(255,255,255,.72);
  font: 650 .8125rem var(--font); transition: background-color .2s, color .2s; }
.vv-fr .vfr-device[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }
.vv-fr .vfr-device:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.vv-fr .vfr-ggrid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; margin-top: 36px; align-items: start; }
.vv-fr .vfr-progress { position: sticky; top: calc(var(--vv-header-offset, 0px) + 24px); border-radius: 26px; padding: 24px; color: #fff;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-top-color: rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
.vv-fr .vfr-ring { display: flex; gap: 14px; align-items: center; }
.vv-fr .vfr-ring b { display: block; font-size: 1.375rem; letter-spacing: -0.02em; font-weight: 750; }
.vv-fr .vfr-ring span { font-size: .875rem; color: rgba(255,255,255,.7); }
.vv-fr .vfr-plist { margin-top: 20px; display: grid; gap: 4px; }
.vv-fr .vfr-plist a { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; color: rgba(255,255,255,.82); font-weight: 600; font-size: .9375rem; }
.vv-fr .vfr-plist a.is-now { background: rgba(255,255,255,.12); color: #fff; }
.vv-fr .vfr-dot { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 750 .8125rem var(--font); border: 1.5px solid rgba(255,255,255,.35); color: rgba(255,255,255,.8); }
.vv-fr .vfr-dot.is-done { background: #22C55E; border-color: #22C55E; color: #fff; box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
.vv-fr .vfr-dot.is-now { border-color: var(--coral-2); color: #fff; background: var(--coral); box-shadow: 0 0 0 5px rgba(240,89,105,.28); }
.vv-fr .vfr-need { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: .8125rem; color: rgba(255,255,255,.7); }
.vv-fr .vfr-need b { color: #fff; }

/* timeline of bright sheets */
.vv-fr .vfr-timeline { position: relative; display: grid; gap: 16px; padding-left: 52px; }
.vv-fr .vfr-timeline::before { content: ""; position: absolute; left: 17px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #22C55E 0 22%, var(--coral) 22% 60%, rgba(255,255,255,.18) 60%); }
.vv-fr .vfr-step { position: relative; border-radius: 26px; color: var(--ink-2);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88)); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6); box-shadow: inset 0 1px 0 #fff, 0 24px 50px -20px rgba(5,8,25,.55); }
.vv-fr .vfr-step > .vfr-node { position: absolute; left: -52px; top: 22px; }
.vv-fr .vfr-step.is-later { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); box-shadow: none; color: #fff; }
.vv-fr .vfr-shead { width: 100%; display: flex; gap: 16px; align-items: center; padding: 22px 24px; border: 0; background: none; text-align: left; cursor: pointer; font-family: var(--font); color: inherit; }
.vv-fr .vfr-shead .n { font-size: .75rem; font-weight: 750; color: var(--coral); letter-spacing: .03em; }
.vv-fr .vfr-shead h3 { font-size: 1.25rem; font-weight: 730; color: var(--ink); letter-spacing: -0.02em; }
.vv-fr .vfr-step.is-later .vfr-shead h3 { color: #fff; } .vv-fr .vfr-step.is-later .vfr-shead .n { color: #FFC2BB; }
.vv-fr .vfr-done-pill { margin-left: auto; font-size: .8125rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--ok-tint); color: var(--ok); display: inline-flex; gap: 6px; align-items: center; }
.vv-fr .vfr-chev { margin-left: auto; color: var(--mist); }
.vv-fr .vfr-step.is-later .vfr-chev { color: rgba(255,255,255,.7); }
.vv-fr .vfr-sbody { padding: 0 24px 24px; }
.vv-fr .vfr-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 26px; align-items: start; }
.vv-fr .vfr-howto { counter-reset: s; display: grid; gap: 12px; }
.vv-fr .vfr-howto li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: .9375rem; color: var(--ink-2); line-height: 1.5; }
.vv-fr .vfr-howto li::before { content: counter(s); width: 26px; height: 26px; border-radius: 9px; background: var(--paper); color: var(--ink); font: 750 .75rem/26px var(--font); text-align: center; }
.vv-fr .vfr-howto li.vfr-or { counter-increment: none; display: flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 750; color: var(--mist); letter-spacing: .05em; }
.vv-fr .vfr-howto li.vfr-or::before { content: none; }
.vv-fr .vfr-howto li.vfr-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.vv-fr .vfr-howto b { color: var(--ink); font-weight: 680; }
.vv-fr .vfr-video { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; cursor: pointer; border: 0; padding: 0; width: 100%; display: block; color: #fff; text-align: left; font-family: var(--font);
  background: radial-gradient(60% 80% at 80% 10%, rgba(240,89,105,.6), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgba(76,110,245,.55), transparent 70%), linear-gradient(155deg, #10162C, #251B42);
  box-shadow: 0 18px 36px -14px rgba(20,27,51,.55); }
.vv-fr .vfr-video .vfr-screen { position: absolute; left: 14%; right: 14%; top: 13%; bottom: 30%; border-radius: 10px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2); }
.vv-fr .vfr-video .vfr-screen::before { content: ""; position: absolute; left: 10%; top: 18%; width: 40%; height: 64%; border-radius: 6px; background: rgba(255,255,255,.18); }
.vv-fr .vfr-video .vfr-screen::after { content: ""; position: absolute; left: 56%; right: 10%; top: 22%; height: 46%; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.28) 0 4px, transparent 4px 11px); }
.vv-fr .vfr-video .vfr-play { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 26px rgba(0,0,0,.35); transition: transform .2s; }
.vv-fr .vfr-video:hover .vfr-play { transform: translate(-50%, -50%) scale(1.06); }
.vv-fr .vfr-video .vfr-cap { position: absolute; left: 16px; right: 16px; bottom: 14px; font-size: .9375rem; font-weight: 680; letter-spacing: -0.01em; }
.vv-fr .vfr-video .vfr-cap small { display: block; font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.7); }
.vv-fr .vfr-sactions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; align-items: center; }
.vv-fr .vfr-mark { display: inline-flex; gap: 8px; align-items: center; height: 46px; padding: 0 16px; border-radius: 14px; border: 1.5px dashed rgba(20,27,51,.24); background: none;
  font: 650 .9375rem var(--font); color: var(--ink); cursor: pointer; }
.vv-fr .vfr-shots { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.vv-fr .vfr-shots summary { list-style: none; cursor: pointer; font-weight: 650; color: var(--ink); font-size: .9375rem; display: flex; gap: 8px; align-items: center; }
.vv-fr .vfr-shots summary::-webkit-details-marker { display: none; }

.vv-fr .vfr-help { margin-top: 40px; border-radius: 28px; padding: 28px 32px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.vv-fr .vfr-help h3 { font-size: 1.375rem; font-weight: 740; letter-spacing: -0.022em; color: #fff; }
.vv-fr .vfr-help p { color: rgba(255,255,255,.76); margin-top: 4px; }
.vv-fr .vfr-help .vfr-actions { margin-top: 0; }

/* footer_jp.php's row is ~10px wider than small phones; clip it here instead of editing the footer */
.vv-footer-wrap { overflow-x: hidden; overflow-x: clip; }

/* ================= Responsive ================= */
@media (max-width: 1080px) {
  .vv-fr .vfr-hero .vfr-wrap { grid-template-columns: 1fr; }
  .vv-fr .vfr-fan { height: 360px; max-width: 560px; width: 100%; margin: 8px auto 0; }
  .vv-fr .vfr-ggrid { grid-template-columns: 1fr; }
  .vv-fr .vfr-progress { position: static; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
  .vv-fr .vfr-progress .vfr-plist { margin-top: 0; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .vv-fr .vfr-need { display: none; }
  .vv-fr .vfr-two { grid-template-columns: 1fr; }
  .vv-fr .vfr-two .vfr-video { max-width: 560px; }
}
@media (max-width: 760px) {
  .vv-fr .vfr-wrap { padding: 0 18px; }
  .vv-fr .vfr-hero { padding: calc(var(--vv-header-offset, 0px) + 32px) 0 150px; }
  .vv-fr .vfr-lead { font-size: 1.0625rem; }
  .vv-fr .vfr-actions { display: grid; grid-template-columns: 1fr; }
  .vv-fr .vfr-trust { gap: 10px 16px; font-size: .875rem; }
  .vv-fr .vfr-fan { height: 300px; }
  .vv-fr .vfr-sheetdoc { width: 200px; height: 260px; margin: -130px 0 0 -100px; padding: 16px; }
  .vv-fr .vfr-sheetdoc h4 { font-size: 1rem; }
  .vv-fr .vfr-sheetdoc.is-back { transform: translate(-58px, 14px) rotate(-9deg) scale(.84); }
  .vv-fr .vfr-sheetdoc.is-mid { transform: translate(58px, 6px) rotate(8deg) scale(.88); }
  .vv-fr .vfr-sheetdoc .vfr-dl { left: 16px; right: 16px; bottom: 16px; }
  .vv-fr .vfr-float { display: none; }
  .vv-fr .vfr-library { margin-top: -110px; }
  .vv-fr .vfr-panel { padding: 24px 18px; border-radius: 28px; }
  .vv-fr .vfr-search { width: 100%; }
  .vv-fr .vfr-levels { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .vv-fr .vfr-level { padding: 12px 10px; grid-template-columns: 1fr; gap: 8px; border-radius: 18px; }
  .vv-fr .vfr-level .vfr-glyph { width: 36px; height: 36px; border-radius: 11px; font-size: .875rem; }
  .vv-fr .vfr-level b { font-size: .875rem; line-height: 1.2; }
  .vv-fr .vfr-level span span { font-size: .75rem; }
  .vv-fr .vfr-filters { gap: 18px; }
  .vv-fr .vfr-fgroup { width: 100%; }
  .vv-fr .vfr-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 6px; scrollbar-width: none; }
  .vv-fr .vfr-chips::-webkit-scrollbar { display: none; }
  .vv-fr .vfr-grid { grid-template-columns: 1fr; gap: 10px; }
  .vv-fr .vfr-card { grid-template-columns: 46px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .vv-fr .vfr-doc { width: 46px; height: 58px; }
  .vv-fr .vfr-guide { margin-top: 64px; padding: 56px 0 64px; }
  .vv-fr .vfr-devices { width: 100%; grid-auto-columns: 1fr; }
  .vv-fr .vfr-device { width: auto; font-size: .75rem; }
  .vv-fr .vfr-progress { grid-template-columns: 1fr; }
  .vv-fr .vfr-progress .vfr-plist { grid-auto-flow: row; }
  .vv-fr .vfr-timeline { padding-left: 0; }
  .vv-fr .vfr-timeline::before, .vv-fr .vfr-step > .vfr-node { display: none; }
  .vv-fr .vfr-shead { padding: 18px; }
  .vv-fr .vfr-sbody { padding: 0 18px 20px; }
  .vv-fr .vfr-help { padding: 22px; }
  .vv-fr .vfr-help .vfr-actions { width: 100%; }
}
@media (max-width: 359px) { .vv-fr .vfr-fan { transform: scale(.88); transform-origin: center top; height: 270px; } }
@media (prefers-reduced-motion: reduce) {
  .vv-fr .vfr-skel i { animation: none; }
  .vv-fr .vfr-pressed, .vv-fr .vfr-card:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .vv-fr .vfr-sheetdoc, .vv-fr .vfr-btn-glass, .vv-fr .vfr-float, .vv-fr .vfr-progress, .vv-fr .vfr-devices, .vv-fr .vfr-step, .vv-fr .vfr-help, .vv-fr .vfr-pill { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .vv-fr .vfr-sheetdoc, .vv-fr .vfr-float, .vv-fr .vfr-progress, .vv-fr .vfr-help { background: #232B52; }
  .vv-fr .vfr-step { background: #fff; }
}

/* =====================================================================
   LIGHT THEME (white main section): add class "is-light" next to "vv-fr"
   Same layout and motion; glass becomes frosted white over soft glows.
   ===================================================================== */
.vv-fr.is-light { background: #fff; }
.vv-fr.is-light .vfr-scene { color: var(--ink);
  background:
    radial-gradient(38% 46% at 90% 6%, rgba(240,89,105,.16), transparent 70%),
    radial-gradient(34% 44% at 62% 70%, rgba(255,160,120,.10), transparent 70%),
    radial-gradient(40% 50% at 4% 96%, rgba(76,110,245,.12), transparent 70%),
    radial-gradient(28% 36% at 34% 14%, rgba(139,92,246,.07), transparent 70%),
    #fff; }
.vv-fr.is-light .vfr-scene::before { background: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(20,27,51,.045) 39px 40px); }

/* hero text */
.vv-fr.is-light .vfr-crumbs { color: var(--mist); }
.vv-fr.is-light .vfr-crumbs a { color: var(--ink); }
.vv-fr.is-light .vfr-pill { color: var(--ink); background: rgba(255,255,255,.75); border-color: var(--line); box-shadow: 0 4px 14px -6px rgba(20,27,51,.18); }
.vv-fr.is-light .vfr-hero h1 { color: var(--ink); }
.vv-fr.is-light .vfr-hero h1 em { color: var(--coral); }
.vv-fr.is-light .vfr-lead { color: var(--ink-2); }
.vv-fr.is-light .vfr-trust { color: var(--ink-2); }
.vv-fr.is-light .vfr-trust svg { color: var(--coral); }
.vv-fr.is-light .vfr-btn-glass { color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20,27,51,.06), 0 8px 20px -10px rgba(20,27,51,.25); }

/* fanned sheets: frosted white glass */
.vv-fr.is-light .vfr-sheetdoc { color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.6));
  border: 1px solid rgba(20,27,51,.08); border-top-color: #fff; box-shadow: 0 30px 60px -20px rgba(20,27,51,.28); }
.vv-fr.is-light .vfr-sheetdoc.is-front { background: linear-gradient(180deg, #fff, #FBFBFD); border-color: rgba(20,27,51,.08);
  box-shadow: 0 2px 6px rgba(20,27,51,.06), 0 40px 80px -24px rgba(20,27,51,.38); }
.vv-fr.is-light .vfr-sheetdoc .vfr-lvl { color: var(--mist); }
.vv-fr.is-light .vfr-sheetdoc h4 { color: var(--ink); }
.vv-fr.is-light .vfr-lines i { background: rgba(20,27,51,.10); }
.vv-fr.is-light .vfr-lines i.hl { background: linear-gradient(90deg, rgba(255,196,0,.55), rgba(255,196,0,.22)); }
.vv-fr.is-light .vfr-sheetdoc .vfr-dl { background: var(--paper); color: var(--mist); }
.vv-fr.is-light .vfr-sheetdoc .vfr-dl b { background: var(--ink); color: #fff; }
.vv-fr.is-light .vfr-float { color: var(--ink); background: rgba(255,255,255,.8); border-color: rgba(20,27,51,.08); box-shadow: 0 16px 34px -12px rgba(20,27,51,.3); }
.vv-fr.is-light .vfr-float.f1 i { background: var(--ok-tint); }
.vv-fr.is-light .vfr-float.f1 svg { stroke: var(--ok); }
.vv-fr.is-light .vfr-float.f2 i { background: #FFF0F2; }
.vv-fr.is-light .vfr-float.f2 svg { stroke: var(--coral); }

/* library: the panel needs its own edge on white */
.vv-fr.is-light .vfr-panel { border: 1px solid rgba(20,27,51,.07); }

/* guide: light scene */
.vv-fr.is-light .vfr-guide h2 { color: var(--ink); }
.vv-fr.is-light .vfr-guide .vfr-sub { color: var(--mist); }
.vv-fr.is-light .vfr-guide .vfr-sub b { color: var(--mtp); }
.vv-fr.is-light .vfr-guide .vfr-sub .vfr-file { background: var(--paper); color: var(--ink); }
.vv-fr.is-light .vfr-auto { color: var(--mist); }
.vv-fr.is-light .vfr-devices { background: var(--paper); border-color: var(--line); }
.vv-fr.is-light .vfr-device { color: var(--mist); }
.vv-fr.is-light .vfr-device[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(20,27,51,.08), 0 8px 18px -8px rgba(20,27,51,.28); }
.vv-fr.is-light .vfr-device:focus-visible { outline-color: var(--ink); }
.vv-fr.is-light .vfr-progress { color: var(--ink); background: rgba(255,255,255,.85); border: 1px solid rgba(20,27,51,.08); border-top-color: #fff;
  box-shadow: 0 1px 2px rgba(20,27,51,.06), 0 18px 40px -16px rgba(20,27,51,.25); }
.vv-fr.is-light .vfr-ring span { color: var(--mist); }
.vv-fr.is-light .vfr-ring circle:first-child { stroke: #EEF0F5; }
.vv-fr.is-light .vfr-plist a { color: var(--ink-2); }
.vv-fr.is-light .vfr-plist a.is-now { background: var(--paper); color: var(--ink); }
.vv-fr.is-light .vfr-dot { border-color: rgba(20,27,51,.2); color: var(--mist); }
.vv-fr.is-light .vfr-dot.is-now { color: #fff; }
.vv-fr.is-light .vfr-dot.is-done { color: #fff; }
.vv-fr.is-light .vfr-need { border-top-color: var(--line); color: var(--mist); }
.vv-fr.is-light .vfr-need b { color: var(--ink); }
.vv-fr.is-light .vfr-timeline::before { background: linear-gradient(180deg, #22C55E 0 22%, var(--coral) 22% 60%, rgba(20,27,51,.12) 60%); }
.vv-fr.is-light .vfr-step { background: #fff; border: 1px solid rgba(20,27,51,.08); box-shadow: 0 1px 2px rgba(20,27,51,.05), 0 20px 44px -22px rgba(20,27,51,.3); }
.vv-fr.is-light .vfr-step.is-later { background: var(--paper); border-color: rgba(20,27,51,.06); box-shadow: none; color: var(--ink-2); }
.vv-fr.is-light .vfr-step.is-later .vfr-shead h3 { color: var(--ink); }
.vv-fr.is-light .vfr-step.is-later .vfr-shead .n { color: var(--coral); }
.vv-fr.is-light .vfr-step.is-later .vfr-chev { color: var(--mist); }
.vv-fr.is-light .vfr-help { background: linear-gradient(120deg, #FFF1F3, #F1F3FF); border: 1px solid rgba(20,27,51,.06); }
.vv-fr.is-light .vfr-help h3 { color: var(--ink); }
.vv-fr.is-light .vfr-help p { color: var(--mist); }
@media (prefers-reduced-transparency: reduce) {
  .vv-fr.is-light .vfr-sheetdoc, .vv-fr.is-light .vfr-float, .vv-fr.is-light .vfr-progress { background: #fff; }
}
/* light theme: let each scene's glow fade into the white page instead of ending in an edge */
.vv-fr.is-light .vfr-scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); }
.vv-fr.is-light .vfr-scene > .vfr-wrap { position: relative; z-index: 1; }
.vv-fr.is-light .vfr-guide::after { top: 0; bottom: auto; height: 140px; background: linear-gradient(to top, rgba(255,255,255,0), #fff); }


/* =====================================================================
   Interactive parts (production)
   ===================================================================== */
.vv-fr .vfr-library, .vv-fr .vfr-guide { scroll-margin-top: calc(var(--vv-header-offset, 0px) + 16px); }
.vv-fr .vfr-level { -webkit-tap-highlight-color: transparent; }
.vv-fr .vfr-level.vfr-pressed, .vv-fr .vfr-chip.vfr-pressed, .vv-fr .vfr-get.vfr-pressed { transform: scale(.97); }
.vv-fr .vfr-chip:focus-visible, .vv-fr .vfr-get:focus-visible, .vv-fr .vfr-btn:focus-visible, .vv-fr .vfr-mark:focus-visible, .vv-fr .vfr-shead:focus-visible, .vv-fr .vfr-video:focus-visible {
  outline: 3px solid var(--coral); outline-offset: 3px; }
.vv-fr .vfr-grid > li { list-style: none; }
.vv-fr .vfr-result { min-height: 180px; }
.vv-fr .vfr-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* accordion: height animates via grid rows (no layout jump); chevron follows */
.vv-fr .vfr-swrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.2,.8,.2,1); }
.vv-fr .vfr-step.is-open > .vfr-swrap { grid-template-rows: 1fr; }
.vv-fr .vfr-swrap > .vfr-sclip { overflow: hidden; min-height: 0; }
.vv-fr .vfr-chev { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.vv-fr .vfr-step.is-open .vfr-chev { transform: rotate(180deg); }
.vv-fr .vfr-step.is-done:not(.is-open) .vfr-chev { display: none; }
.vv-fr .vfr-step:not(.is-done) .vfr-done-pill { display: none; }

/* step content */
.vv-fr .vfr-install { margin: 0 0 18px; }
.vv-fr .vfr-install .vfr-btn { height: 46px; padding: 0 18px; border-radius: 14px; font-size: .9375rem; }
.vv-fr .vfr-tip { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: #FFF8E8; border: 1px solid #F6E3B4; color: #6B4A00; font-size: .875rem; line-height: 1.5; }
.vv-fr .vfr-tip b { color: #4D3500; }
.vv-fr .vfr-mark[aria-pressed="true"] { border-style: solid; border-color: var(--ok); background: var(--ok-tint); color: var(--ok); }
.vv-fr .vfr-shotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.vv-fr .vfr-shotgrid figure { margin: 0; }
.vv-fr .vfr-shotgrid img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); }
.vv-fr .vfr-shotgrid figcaption { margin-top: 6px; font-size: .8125rem; color: var(--mist); }
.vv-fr .vfr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vv-fr .vfr-video.is-playing { cursor: default; }
.vv-fr .vfr-video .vfr-cap small b { color: #fff; }

/* the timeline line fills as steps are done (JS sets --vfr-done and --vfr-now in px) */
.vv-fr .vfr-timeline::before { background: linear-gradient(180deg, #22C55E 0 var(--vfr-done, 0px), var(--coral) var(--vfr-done, 0px) var(--vfr-now, 0px), rgba(255,255,255,.18) var(--vfr-now, 0px)); }
.vv-fr.is-light .vfr-timeline::before { background: linear-gradient(180deg, #22C55E 0 var(--vfr-done, 0px), var(--coral) var(--vfr-done, 0px) var(--vfr-now, 0px), rgba(20,27,51,.12) var(--vfr-now, 0px)); }
.vv-fr .vfr-ring .vfr-ringbar { transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }
.vv-fr .vfr-panel-guide[hidden] { display: none !important; }

/* list entrance (JS adds .is-in with a stagger); off for reduced motion */
.vv-fr .vfr-grid > .vfr-card { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; }
.vv-fr .vfr-grid > .vfr-card.is-in { opacity: 1; transform: none; }
.vv-fr .vfr-grid > .vfr-card.is-in:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .vv-fr .vfr-swrap, .vv-fr .vfr-chev, .vv-fr .vfr-ring .vfr-ringbar { transition: none; }
  .vv-fr .vfr-grid > .vfr-card { opacity: 1; transform: none; transition: none; }
}