@charset "UTF-8";
/* css/components/typography.css */
/* Sports Index web typography, adopted from the Home polish experiment.
   Load after page CSS. Typography only: no surfaces, colors, spacing or motion.
   Remove the single base.html include to revert this pass across the site.
   Native third-party embeds and article/post body text keep their own styles. */
:root {
  --si-type-display:800;
  --si-type-heading:750;
  --si-type-label:650;
  --si-type-control:600;
  --si-type-meta:550;
}
/* Display identity remains confident; supporting hierarchy is quieter. */
html body.si-themed :is(h1,.xf-bh-title,.nhb-hc-title,.upf-name,.team-community-intro h2,.home-plans-title) {
  font-weight:var(--si-type-display);
}
html body.si-themed :is(.team-masthead h2,.gp-section-head h2,.contact-page .si-shead-label,
  .team-column-head h3,.team-game-slide h2,.gp h3,.set-head h1,.content-job-title,
  .as-content h2,.team-community-quote blockquote,.nhb-more-title,.upf-rank-title) {
  font-weight:var(--si-type-heading);
}
/* Compact overlines retain their existing size and case on each surface. */
html body.si-themed :is(.si-shead-label,.xf-shead-label,.xf-tw-kicker,.sc-day-head b,
  .team-eyebrow,.gp-eyebrow,.pp-fact small,.shx-feat-kicker,.shx-chase-eyebrow,
  .nhb-hc-kicker,.nhb-tr-eyebrow,.nhb-card-team,.rkx-card-kicker,.upf-slot-label) {
  font-weight:var(--si-type-heading);
}
/* News, roster identities and ranking rows should not compete with the hero. */
html body.si-themed :is(.xf-trend-title,.xf-card-title,.xf-rk-team,.xf-sl-id b,
  .xf-tw-team b,.nhb-tr-body b,.nhb-card-title,.nhb-fs-title,.nhb-x-id b,
  .team-game-side,.team-standing-row b,.team-player-body b,.team-stat-scroll tbody th,
  .team-sample-video b,.team-perk h3,.pp-fact b,.pp-fact a,.pp-log-title,
  .sc-side b,.sc-poll-row b,.rkx-pollteam b,.rkx-mover-body b,.rkx-team b,
  .rkx-bcard-team,.rkx-ballot-id a,.shx-chase-name,.shx-side-row b,.shx-find-hit b,
  .shx-game b,.disc-author,.disc-composer-who,.upf-row-title,.upf-player-name,
  .upf-art-title,.upf-rank-name,.upf-fc-flagbody b,.set-row strong,
  .contact-info-label,.content-job-link .content-job-title) {
  font-weight:var(--si-type-label);
}
html body.si-themed .scf-feed :is(.scf-card-copy h3,.scf-author b) {
  font-weight:var(--si-type-label);
}
html body.si-themed :is(.xf-trend-title,.xf-card-title,.nhb-card-title) { line-height:1.45; }
/* Secondary facts: preserve tabular alignment and all stat-specific precision. */
html body.si-themed :is(.xf-shead-meta,.xf-tw-meta,.xf-rk-rec,.xf-tw-status i,
  .team-standing-row>span:nth-last-child(-n+2),.team-schedule-date,.shx-chase-school,
  .rkx-rec,.sc-grid-net,.upf-fc-season) { font-weight:var(--si-type-meta); }
html body.si-themed :is(.xf-trend-tag,.xf-tw-status b,.team-game-status,.team-rank,
  .team-standing-head,.team-stat-scroll thead th,.shx-thead,.rkx-sthead,.sc-standings-head) {
  font-weight:var(--si-type-label);
}
/* Shared navigation and action labels; selected state still comes from each owner. */
html body.si-themed :is(.site-rail-btn,.site-cbar a,.set-nav a) { font-weight:var(--si-type-meta); }
html body.si-themed .site-rail-btn.is-active { font-weight:700; }
html body.si-themed :is(.team-tabs button,.team-segments button,.team-select summary,
  .team-menu button,.team-standings-toggle,.team-primary,.gp-sidebar-tabs button,
  .sc-chip,.sc-vt,.sc-day-pill,.rkx-switch-btn,.shx-cats button,.shx-chips button,
  .nhb-filter-head,.upf-tab,.upf-btn,.set-button,.contact-submit-btn,.disc-post-btn) {
  font-weight:var(--si-type-control);
}
/* These legacy controls already declare font weights !important. */
html body.si-themed :is(.xf-conf,.xf-seg-btn,.xf-mini-btn) { font-weight:var(--si-type-control)!important; }
/* Home adopts the reviewed responsive headline, without the surface experiment. */
html body.si-themed.page-explore .xf-bh-title {
  display:block; -webkit-line-clamp:unset; overflow:visible; overflow-wrap:anywhere;
  font-size:clamp(28px,2.45vw,38px); letter-spacing:-1.15px; line-height:1.15; text-wrap:pretty;
}
html body.si-themed.page-explore .xf-trend-title { font-size:17px; letter-spacing:-.25px; -webkit-line-clamp:3; }
html body.si-themed.page-explore .xf-bh-dek { font-size:16px; line-height:1.65; }
html body.si-themed.page-explore :is(.xf-shead-label,.xf-tw-kicker) { font-size:11px; letter-spacing:1px; }
html body.si-themed.page-explore :is(.xf-shead-meta,.xf-tw-meta) { font-size:10px; letter-spacing:.5px; }
html body.si-themed.page-explore .xf-trend-tag { font-size:10px; letter-spacing:.65px; }
@media(max-width:900px) {
  html body.si-themed.page-explore .xf-bh-title { font-size:32px; }
}
@media(max-width:640px) {
  html body.si-themed.page-explore .xf-bh-title { font-size:28px; letter-spacing:-.7px; line-height:1.18; }
  html body.si-themed.page-explore .xf-trend-title { font-size:16px; }
}
/* Surfaces with ID-scoped legacy rules need matching ownership specificity. */
html body.si-themed #playHub :is(.si-shead-label,.ph-et-label,.ph-cardhead-kick) { font-weight:var(--si-type-heading); }
html body.si-themed #playHub :is(.ph-navtab,.ph-seg button,.fm-tab) { font-weight:var(--si-type-control)!important; }
html body.si-themed #playHub :is(.ph-cta,.ph-cta-sm,.ph-fr-wk b,.ph-poll-more) { font-weight:var(--si-type-label); }
html body.si-themed.admin-settings-mode #tab-content :is(h2,h3) { font-weight:var(--si-type-heading); }
html body.si-themed.admin-settings-mode #tab-content .content-job-title,
html body.si-themed .as-llm .llm-title { font-weight:var(--si-type-label); }
html body.si-themed .as-llm :is(.llm-meta dt,.llm-field label) { font-weight:var(--si-type-control); }
html body.si-themed .gp h2 { font-weight:var(--si-type-heading); }

/* css/tl/shell.css */
/* ==========================================================================
   Terminal Light — shell glue. Loaded LAST in base.html (after page CSS) so
   the new shell wins over the legacy sheets that still load during the
   migration (base.css fixed nav + body padding, theme-light.css canvas,
   site-rail/cbar/wire offsets). Delete the overrides here as each legacy
   sheet is removed (plan phase 6).
   ========================================================================== */

/* ---- Neutralise legacy shell offsets ---- */
html body { padding: 0 !important; margin: 0; background: var(--tl-page) !important; color: var(--tl-ink); overflow-x: clip; }
html body main.tl-main { max-width: none; width: auto; margin: 0; padding: 0; }
html body header.tl-topbar.top-nav-bar {
  position: sticky; top: 0; left: auto; right: auto; z-index: 40;
  padding: 0 20px; transition: none;
  background: var(--tl-header-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tl-line-07);
}

/* Pico transitions every link and button colour (0.2s). The design never
   animates link colour, and the stale value lingers across a theme flip.
   Class rules that want a transition (lift cards, segments) outrank this. */
html body a, html body button { transition-property: none; }

/* ---- Search: the gsx ambient search in the design's 300x34 box ---- */
.tl-search-wrap { position: relative; }
.tl-topbar .gsx-box.tl-search { height: 34px; padding: 0 8px 0 11px; border: 1px solid var(--tl-line-10); background: var(--tl-fill-03); box-shadow: none; }
.tl-topbar .gsx-box.tl-search.is-open { border-color: var(--tl-line-18); background: var(--tl-control); box-shadow: 0 0 0 3px var(--tl-fill-05); }
.tl-topbar .gsx-icon { margin-right: 0; color: var(--tl-ink-50); }
.tl-topbar .gsx-input { font-size: 13px !important; color: var(--tl-ink) !important; }
.tl-topbar .gsx-type { font-size: 13px; color: var(--tl-ink-50); }
.tl-topbar .gsx-caret { height: 14px; background: var(--tl-ink-50); }
.tl-topbar .gsx-ghost-rest { color: var(--tl-ink-35); }
.tl-topbar .gsx-key.tl-kbd { min-width: 0; height: 20px; margin-left: 0; padding: 0 6px; border-color: var(--tl-line-12); font: 400 10.5px var(--tl-mono); color: var(--tl-ink-50); }
.tl-topbar .gsx-panel { top: 42px; left: auto; right: 0; transform: none; width: min(520px, calc(100vw - 24px)); animation-name: tl-drop; }
.gsx-scrim { top: var(--tl-topbar-h); }
@keyframes tl-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Theme toggle icons: moon in light (switch to dark), sun in dark ---- */
#navThemeBtn .si-icon-sun { display: none; }
html:not(.si-light) #navThemeBtn .si-icon-moon { display: none; }
html:not(.si-light) #navThemeBtn .si-icon-sun { display: block; }

/* ---- Account menu ---- */
.tl-account { position: relative; }
.tl-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 244px; padding: 6px;
  display: none; flex-direction: column;
  border-radius: var(--tl-r-card); background: var(--tl-card);
  box-shadow: var(--tl-float-shadow);
}
.tl-menu.show { display: flex; animation: tl-drop 0.18s var(--tl-ease) both; }
.tl-menu-item {
  height: 32px; padding: 0 10px; display: flex; align-items: center;
  border-radius: var(--tl-r-seg-in); font-size: 13px; color: var(--tl-ink-70);
}
.tl-menu-item:hover { background: var(--tl-fill-04); color: var(--tl-ink); }
.tl-menu-rule { height: 1px; margin: 5px 4px; background: var(--tl-line-07); }
#navSignIn, #navSignUp { display: inline-flex; }
#navSignIn[style*="none"], #navSignUp[style*="none"] { display: none !important; }

/* ---- Sidebar details ---- */
.tl-side-link { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: var(--tl-font); }
.tl-side-confs .tl-side-link.is-on { background: var(--tl-fill-07); }
.tl-earn-wrap { position: relative; }
.tl-earn-wrap .tl-earn { width: 100%; border: 1px dashed var(--tl-line-14); background: transparent; color: var(--tl-ink); text-align: left; cursor: pointer; }
.tl-earn-wrap:not(.is-ghost) .tl-earn { border-style: solid; border-color: var(--tl-line-10); }
.tl-earn-wrap .sclvl-label { font-size: 12.5px; font-weight: 600; }
.tl-earn-wrap .sclvl-label.is-up { color: var(--tl-up); }
.tl-earn-wrap .sclvl-panel {
  position: absolute; left: calc(100% + 18px); bottom: 0; z-index: 50; width: 340px;
  border-radius: var(--tl-r-card); background: var(--tl-card); box-shadow: var(--tl-float-shadow);
}
@media (max-width: 1279px) { .tl-earn-wrap .sclvl-panel { left: 0; bottom: calc(100% + 8px); width: 100%; } }
.tl-promo { margin-bottom: 12px; }
.tl-side-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  padding: 0 6px; font-size: 11.5px; color: var(--tl-ink-45);
}
.tl-side-foot a:hover, .tl-side-foot button:hover { color: var(--tl-ink); }
.tl-side-foot button {
  margin: 0; padding: 0; border: 0; background: transparent; width: auto;
  font: inherit; color: inherit; cursor: pointer;
}

/* ---- Skip link ---- */
.tl-skip:focus { position: fixed !important; left: 12px; top: 10px; z-index: 100; width: auto; height: auto; padding: 8px 12px; margin: 0; clip: auto; border-radius: var(--tl-r-btn); background: var(--tl-ink); color: var(--tl-on-ink); }

/* ---- Bare shell (auth, onboarding): no sidebar ---- */
.tl-shell.is-bare .tl-sidebar, .tl-shell.is-bare .tl-scrim { display: none; }
body:has(.tl-shell.is-bare) .tl-menu-btn { display: none; }

/* ---- Phone top bar: search fills the space, Sign up stays, Log in moves
   into the drawer's account row via the Sign up page's own link. ---- */
@media (max-width: 720px) {
  .tl-topbar .tl-topbar-right { flex: 1; min-width: 0; }
  .tl-topbar .tl-search-wrap { flex: 1; min-width: 0; }
  .tl-topbar .gsx-box.tl-search { width: 100%; }
  .tl-topbar .tl-topbar-spacer { display: none; }
  .tl-topbar #navThemeBtn { display: none; }
  .tl-topbar #navSignIn, .tl-topbar #navSignUp { padding: 0 10px; font-size: 13px; }
  .tl-topbar .tl-topbar-actions .tl-btn-outline-lg:not([style*="none"]) { display: inline-flex; }
}

/* ---- Sidebar bottom spacing: the Earn card's own margin is zeroed by the
   shared button reset, so the gaps live on the wrapper and the foot. ---- */
.tl-sidebar .tl-earn-wrap { margin-bottom: 12px; }
.tl-sidebar .tl-earn-wrap .tl-earn { margin-bottom: 0; }
.tl-sidebar .tl-promo { margin-bottom: 14px; }
.tl-sidebar .tl-side-foot { padding-top: 2px; }

/* ---- Theme toggle: icon only, no outline box ---- */
.tl-topbar #navThemeBtn { border-color: transparent; }
.tl-topbar #navThemeBtn:hover { border-color: transparent; background: var(--tl-fill-05); }

/* ---- Top bar never overflows: the search shrinks first (300px max), and
   under 1240px the wordmark gives up its room (the logo stays). ---- */
.tl-topbar .tl-topbar-right { min-width: 0; flex: 0 1 auto; }
.tl-topbar .tl-search-wrap { flex: 0 1 300px; min-width: 120px; }
.tl-topbar .gsx-box.tl-search { width: 100%; }
.tl-topbar .tl-topbar-actions { flex: none; }
@media (max-width: 1240px) {
  .tl-topbar { gap: 16px; }
  .tl-topbar .tl-brand span { display: none; }
}
/* Nine nav items: tighten them before the nav moves into the drawer (<1024). */
@media (max-width: 1180px) {
  .tl-topbar { gap: 12px; }
  .tl-topbar .tl-nav a { padding: 0 8px; }
  .tl-topbar .tl-topbar-right { gap: 10px; }
  .tl-topbar .tl-topbar-actions { gap: 6px; }
}

/* ---- Signed-in account button: the ink "Sign up" treatment, icon only ---- */
.tl-topbar .tl-iconbtn.is-ink { border-color: var(--tl-ink); background: var(--tl-ink); color: var(--tl-on-ink); }
.tl-topbar .tl-iconbtn.is-ink:hover,
.tl-topbar .tl-iconbtn.is-ink[aria-expanded="true"] { border-color: var(--tl-ink-hover); background: var(--tl-ink-hover); color: var(--tl-on-ink); }

/* ---- Conference switch in flight (body.tl-scoping, set by shell.js): a thin
   indeterminate bar under the top bar, and the page dims until the next one
   paints. Pages with their own skeletons (Home) opt out of the dim. ---- */
@keyframes tl-progress { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
body.tl-scoping .tl-topbar::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 40%; height: 2px;
  background: var(--tl-ink); animation: tl-progress 1.1s var(--tl-ease) infinite;
}
body.tl-scoping:not(.page-explore) .tl-main { opacity: 0.55; transition: opacity 0.2s var(--tl-ease); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body.tl-scoping .tl-topbar::after { animation: none; width: 100%; opacity: 0.4; } }

/* ---- Sidebar sport picker (services/sports.py): live sports select, the
   rest wait with a SOON tag. ---- */
.tl-side-sports { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.tl-side-sports .tl-side-link.is-on { background: var(--tl-fill-07); color: var(--tl-ink); font-weight: 500; cursor: default; }
.tl-side-sports .tl-side-link.is-soon { color: var(--tl-ink-40); cursor: default; justify-content: space-between; }
.tl-side-sports .tl-side-link.is-soon:hover { background: transparent; color: var(--tl-ink-40); }

/* ---- Sidebar plan card (points-bar.js renders #tlPlan): the upgrade pitch
   for free accounts, plan + renewal + Manage for paid ones. The thin top
   highlight is the card's one accent. ---- */
.tl-plan {
  position: relative; display: flex; flex-direction: column;
  margin-bottom: 14px; padding: 14px;
  border-radius: var(--tl-r-card); border: 1px solid rgba(var(--tl-ink-rgb), 0.09);
  background: transparent;
}
html:not(.si-light) .tl-plan { border-color: rgba(var(--tl-ink-rgb), 0.1); }
.tl-plan::before {
  content: ""; position: absolute; top: -1px; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--tl-pro-line), transparent);
}
.tl-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }
.tl-plan-eyebrow {
  font-family: var(--tl-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tl-ink-50);
}
.tl-plan-tags { display: inline-flex; gap: 5px; }
.tl-plan-tags .tl-pro-tag, .tl-plan-tag {
  font-family: var(--tl-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em;
  line-height: 1; padding: 3px 5px; border-radius: var(--tl-r-tag);
}
.tl-plan-tags .tl-pro-tag { background: color-mix(in srgb, var(--tl-pro) 8%, transparent); }
.tl-plan-tag { border: 1px solid var(--tl-line-14); background: var(--tl-fill-04); color: var(--tl-ink-70); }
.tl-plan-title { margin: 10px 0 3px; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; color: var(--tl-ink); }
.tl-plan-body { font-size: 12.5px; line-height: 1.5; color: var(--tl-ink-60); }
.tl-plan-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; margin-top: 14px; border-radius: var(--tl-r-btn);
  background: var(--tl-ink); color: var(--tl-on-ink); font-size: 13px; font-weight: 600; text-decoration: none;
}
.tl-plan-cta:hover { opacity: 0.9; color: var(--tl-on-ink); }
.tl-plan-when {
  margin-top: 10px; font-family: var(--tl-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tl-ink-50);
}
/* Paid accounts: a quiet outline twin of the free card's ink CTA. */
.tl-plan-manage {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; margin-top: 12px; border-radius: var(--tl-r-btn);
  border: 1px solid var(--tl-line-14); background: transparent;
  font-size: 12.5px; font-weight: 500; color: var(--tl-ink-70); text-decoration: none;
  transition: background 0.15s var(--tl-ease), color 0.15s var(--tl-ease), border-color 0.15s var(--tl-ease);
}
.tl-plan-manage:hover { background: var(--tl-fill-04); border-color: var(--tl-line-20, var(--tl-line-14)); color: var(--tl-ink); }

/* ---- Account menu points row (points-bar.js [data-sclvl]) ---- */
.tl-menu-pts {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--tl-r-seg-in); color: var(--tl-ink); text-decoration: none;
}
.tl-menu-pts:hover { background: var(--tl-fill-04); }
.tl-menu-pts[hidden] { display: none; }
.tl-menu-pts .tl-earn-ring > i { color: var(--tl-ink); }
.tl-menu-pts-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tl-menu-pts .sclvl-label { font-size: 12px; font-weight: 600; white-space: nowrap; }
.tl-menu-pts .sclvl-label.is-up { color: var(--tl-up); }
.tl-menu-pts .sclvl-pts { font-family: var(--tl-mono); font-size: 11px; color: var(--tl-ink-50); }
.tl-menu-pts-go { font-size: 11px; color: var(--tl-ink-45); white-space: nowrap; }
.tl-menu-pts + .tl-menu-rule { margin-top: 4px; }

/* css/tl/motion.css */
/* ==========================================================================
   Terminal Light — page-load choreography (every page, after shell.css).

   One sequence per page load, all on --tl-ease:
     0ms    top bar groups drop in (brand, nav, search + actions), 40ms apart
     60ms   sidebar blocks slide in from the left, 30ms apart
     120ms  main-column blocks fade up, 70ms apart for the ones already in
            view; anything below the fold fades up when it scrolls into view

   html.tl-motion is set before first paint by base.html's head script, only
   when IntersectionObserver exists and the visitor has not asked for reduced
   motion. The top bar and sidebar are pure CSS (keyframes with backwards
   fill, so nothing stays "animated" after the entrance). Main blocks are
   marked .tl-rv by the inline script after </main> (base.html), revealed
   with .is-in, and un-marked once the transition ends so their own hover
   transitions (.tl-card.is-lift and friends) are untouched afterwards.
   The /pricing page runs its own feature-card entrance (.pr-rv) and is
   skipped by the marker. Failsafes: if the script never sets
   html.tl-motion-ready, every .tl-rv shows after 2.5s; the script also
   sweeps anything still hidden after 6s.
   ========================================================================== */

@keyframes tl-rv-down { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: none; } }
@keyframes tl-rv-left { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: none; } }
@keyframes tl-rv-show { to { opacity: 1; translate: none; } }

/* ---- top bar: each direct child (menu button, brand, nav, right group) ---- */
html.tl-motion .tl-topbar > * { animation: tl-rv-down 0.45s var(--tl-ease) backwards; animation-delay: calc(var(--tl-rv-i, 0) * 40ms); }
html.tl-motion .tl-topbar > :nth-child(2) { --tl-rv-i: 1; }
html.tl-motion .tl-topbar > :nth-child(3) { --tl-rv-i: 2; }
html.tl-motion .tl-topbar > :nth-child(4) { --tl-rv-i: 3; }
html.tl-motion .tl-topbar > :nth-child(n+5) { --tl-rv-i: 4; }

/* ---- sidebar: each block (nav, labels, lists, plan card, footer) ---- */
html.tl-motion .tl-sidebar > * { animation: tl-rv-left 0.45s var(--tl-ease) backwards; animation-delay: calc(60ms + var(--tl-rv-i, 0) * 30ms); }
html.tl-motion .tl-sidebar > :nth-child(2) { --tl-rv-i: 1; }
html.tl-motion .tl-sidebar > :nth-child(3) { --tl-rv-i: 2; }
html.tl-motion .tl-sidebar > :nth-child(4) { --tl-rv-i: 3; }
html.tl-motion .tl-sidebar > :nth-child(5) { --tl-rv-i: 4; }
html.tl-motion .tl-sidebar > :nth-child(6) { --tl-rv-i: 5; }
html.tl-motion .tl-sidebar > :nth-child(7) { --tl-rv-i: 6; }
html.tl-motion .tl-sidebar > :nth-child(8) { --tl-rv-i: 7; }
html.tl-motion .tl-sidebar > :nth-child(9) { --tl-rv-i: 8; }
html.tl-motion .tl-sidebar > :nth-child(n+10) { --tl-rv-i: 9; }

/* ---- main column blocks (marked by the inline script) ---- */
html.tl-motion .tl-rv {
  opacity: 0; translate: 0 14px;
  transition: opacity 0.6s var(--tl-ease) var(--rv-d, 0ms), translate 0.6s var(--tl-ease) var(--rv-d, 0ms);
}
html.tl-motion .tl-rv.is-in { opacity: 1; translate: none; }
html.tl-motion:not(.tl-motion-ready) .tl-rv { animation: tl-rv-show 0s linear 2.5s forwards; }

@media (prefers-reduced-motion: reduce) {
  html.tl-motion .tl-topbar > *, html.tl-motion .tl-sidebar > * { animation: none; }
  html.tl-motion .tl-rv { opacity: 1; translate: none; transition: none; }
}