/* cheese.video: the OneTwoCheese look in one family. Warm paper, Plus Jakarta Sans throughout (heavy and tight
   for titles, tabular for numbers), and cheese yellow for the one thing to do. Loaded from Google Fonts in pages.ts. */

:root {
  color-scheme: light;
  --paper: rgb(249, 249, 246);
  --card: #fff;
  --well: #f1f0ea;
  --ink: rgb(42, 42, 39);
  --ink-2: rgb(110, 108, 101);
  --ink-3: rgb(138, 136, 128);
  --line: rgba(42, 42, 39, 0.1);
  --amber: #e8a500;
  --cheese-ink: #2a2106;
  --danger: #c4554d;
  --hairline: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 10px -4px rgba(0, 0, 0, 0.06);
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; min-height: 100svh;
  background: var(--paper); color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cheese-ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: #ffe27a; color: var(--cheese-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Nav ---- */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 24px 32px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 28px; height: 28px; }
.wordmark { font: 700 21px/1 var(--sans); letter-spacing: -0.04em; }

/* ---- The cheese: the one glossy thing on a page ---- */
.cheese {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px 13px 20px; border: 0; border-radius: 10px;
  font: 500 17px/1.2 var(--sans); letter-spacing: -0.2px; color: var(--cheese-ink);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 75%),
    linear-gradient(180deg, #ffe27a 0%, #ffdb5c 14%, #ffd447 30%, #ffcd33 48%, #ffc726 66%, #ffc21a 84%, #f5b70c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(120, 80, 0, 0.18),
    0 0 0 1px rgba(170, 115, 0, 0.32),
    0 1px 3px rgba(170, 115, 0, 0.25),
    0 10px 26px -8px rgba(214, 150, 0, 0.6);
  cursor: pointer;
  transition: filter 150ms ease-out, transform 120ms ease-out;
}
.cheese svg { width: 19px; height: 19px; }
.cheese:active { transform: scale(0.97); }
@media (hover: hover) { .cheese:hover { filter: brightness(1.04) saturate(1.05); } }

/* ---- Chips: small white buttons on a hairline ---- */
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px;
  border: 0; border-radius: 8px; background: var(--card); box-shadow: var(--hairline);
  font: 500 14px/1 var(--sans); color: var(--ink); white-space: nowrap; cursor: pointer;
  transition: transform 120ms ease-out, background-color 150ms ease-out;
}
.chip svg { width: 16px; height: 16px; color: var(--ink-3); }
.chip:active { transform: scale(0.97); }
@media (hover: hover) { .chip:hover { background: #fdfdfb; } .chip:hover svg { color: var(--ink); } }
.chip.icon { width: 36px; padding: 0; justify-content: center; }
.chip.done svg { color: #2f8f4e; }

/* ---- The squiggle under a word, in amber ---- */
.squiggle { position: relative; display: inline-block; isolation: isolate; }
.squiggle svg { position: absolute; left: -3%; bottom: -4px; width: 106%; height: 16px; color: var(--amber); z-index: -1; overflow: visible; }

/* ---- Sign in ---- */
.login { display: grid; place-items: center; min-height: calc(100svh - 52px); padding: 24px 16px 80px; }
.login form { display: flex; flex-direction: column; align-items: center; gap: 20px; width: min(360px, 100%); }
.login h1 { margin: 0 0 8px; font: 800 44px/1.1 var(--sans); letter-spacing: -0.035em; text-align: center; }
.field {
  width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 10px;
  background: var(--card); box-shadow: var(--hairline);
  font: 400 16px/1 var(--sans); color: var(--ink);
}
.field:focus { outline: none; box-shadow: 0 0 0 1px rgba(170, 115, 0, 0.5), 0 0 0 4px rgba(255, 204, 51, 0.35); }
.login .error { margin: -6px 0 0; font: 400 14px/1.4 var(--sans); color: var(--danger); }
.login .cheese { width: 100%; }

/* ---- Library ---- */
.library { width: min(880px, 100%); margin: 0 auto; padding: 40px 32px 96px; }

.drop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 64px 24px 56px; border-radius: 12px;
  background: var(--well);
  box-shadow: inset 0 1px 2px rgba(42, 42, 39, 0.08), inset 0 0 0 1px rgba(42, 42, 39, 0.04);
  text-align: center;
  transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.drop::after {
  content: ""; position: absolute; inset: 6px; border-radius: 7px;
  border: 1.5px dashed rgba(42, 42, 39, 0.16); pointer-events: none;
  transition: border-color 200ms var(--ease);
}
.drop h1 { margin: 0; font: 800 56px/1.05 var(--sans); letter-spacing: -0.04em; text-wrap: balance; }
.drop .hint { margin: 0; font: 500 13px/1.3 var(--sans); color: var(--ink-3); }
body.dragging .drop { background: #fff6d6; box-shadow: inset 0 1px 2px rgba(170, 115, 0, 0.12), inset 0 0 0 1px rgba(170, 115, 0, 0.18); }
body.dragging .drop::after { border-color: var(--amber); }

.videos { margin: 40px 0 0; padding: 0; list-style: none; }
.videos-empty { margin: 32px 0 0; text-align: center; font: 400 14px/1.4 var(--sans); color: var(--ink-3); }
.video {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.video:first-child { border-top: 1px solid var(--line); }
.video.entering { animation: enter 320ms var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(-6px); } }

.thumb {
  position: relative; display: block; width: 128px; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 6px; background: var(--well);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.thumb .len {
  position: absolute; right: 5px; bottom: 5px; padding: 2px 5px; border-radius: 3px;
  background: rgba(20, 20, 18, 0.72); color: #fff; font: 400 11px/1.3 var(--sans); font-variant-numeric: tabular-nums;
}

.video-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.video-title { overflow: hidden; font: 500 17px/1.3 var(--sans); letter-spacing: -0.2px; white-space: nowrap; text-overflow: ellipsis; }
a.video-title:hover { text-decoration: underline; text-decoration-color: rgba(42, 42, 39, 0.3); text-underline-offset: 3px; }
.video-meta { font: 400 13px/1.3 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.video-meta .failed { color: var(--danger); }
.video-actions { display: flex; align-items: center; gap: 8px; }

/* Upload progress: a cheese-filled bar in a pressed track */
.progress { width: 180px; display: flex; align-items: center; gap: 10px; }
.progress-track { flex: 1; height: 6px; border-radius: 3px; background: var(--well); box-shadow: inset 0 1px 2px rgba(42, 42, 39, 0.12); overflow: hidden; }
.progress-fill {
  height: 100%; width: 100%; border-radius: inherit; transform-origin: left; transform: scaleX(var(--p, 0));
  background: linear-gradient(180deg, #ffe27a, #ffc21a); box-shadow: inset 0 -1px 0 rgba(120, 80, 0, 0.18);
  transition: transform 200ms linear;
}
.progress-n { width: 38px; text-align: right; font: 400 13px/1 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.busy { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--sans); color: var(--ink-2); }
.busy i { display: flex; gap: 4px; }
.busy i b { width: 5px; height: 5px; border-radius: 50%; background: #e8b020; animation: holes 1.2s ease-in-out infinite; }
.busy i b:nth-child(2) { animation-delay: 0.15s; }
.busy i b:nth-child(3) { animation-delay: 0.3s; }
@keyframes holes { 0%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

/* ---- Toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 10;
  display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 10px;
  background: var(--ink); color: #fff; font: 500 14px/1 var(--sans);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: transform 240ms var(--ease), opacity 240ms var(--ease);
}
.toast svg { width: 16px; height: 16px; color: #ffd447; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---- Watch ---- */
.watch { width: min(1280px, 100%); margin: 0 auto; padding: 28px 32px 72px; }
.stage {
  --ar: 16 / 10;
  position: relative; margin: 0 auto;
  width: min(100%, calc((100svh - 230px) * var(--ar)));
  min-width: min(100%, 320px);
  aspect-ratio: var(--ar);
  border-radius: 8px; overflow: hidden; background: #141412;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06), 0 24px 48px -20px rgba(42, 42, 39, 0.35);
}
.stage video { display: block; width: 100%; height: 100%; background: #141412; }
.stage .wait {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  color: rgba(255, 255, 255, 0.8); font: 400 14px/1.4 var(--sans); text-align: center; padding: 24px;
}
.stage .wait.failed { color: #ffb1aa; }
.about {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  width: min(100%, calc((100svh - 230px) * var(--ar))); min-width: min(100%, 320px);
  margin: 24px auto 0;
}
.about-text { min-width: 0; }
.title { margin: 0; font: 700 30px/1.2 var(--sans); letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: anywhere; }
/* Renaming happens in the title itself: no box, just an underline that says "editable" on hover
   and turns cheese yellow while you type. */
.title[contenteditable] {
  cursor: text; caret-color: var(--amber);
  text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; text-underline-offset: 7px;
  text-decoration-color: transparent;
  transition: text-decoration-color 150ms ease-out;
}
@media (hover: hover) { .title[contenteditable]:hover { text-decoration-color: rgba(42, 42, 39, 0.28); } }
.title[contenteditable]:focus { outline: none; text-decoration-style: solid; text-decoration-color: var(--amber); }
.meta { margin: 8px 0 0; font: 400 13px/1.4 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.meta span + span::before { content: "·"; margin: 0 8px; }
.about .actions { flex: none; display: flex; gap: 8px; padding-top: 4px; }

.missing { display: grid; place-items: center; gap: 12px; min-height: 60svh; text-align: center; padding: 24px; }
.missing h1 { margin: 0; font: 800 44px/1.1 var(--sans); letter-spacing: -0.035em; }
.missing p { margin: 0; color: var(--ink-2); }

/* ---- Player: our controls over the picture ----
   A dark scrim at the foot, white glyphs, and cheese yellow only where your place in the video is. */
.player { --ctl: rgba(255, 255, 255, 0.92); --ctl-dim: rgba(255, 255, 255, 0.62); -webkit-tap-highlight-color: transparent; }
.player video { cursor: pointer; }
.player.idle, .player.idle video { cursor: none; }

.big-play {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0;
  background: transparent; cursor: pointer;
  transition: opacity 200ms var(--ease);
}
.big-play-disc {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: var(--cheese-ink);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #ffe27a 0%, #ffd447 40%, #ffc21a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(120, 80, 0, 0.18),
    0 0 0 1px rgba(170, 115, 0, 0.35), 0 12px 32px -8px rgba(0, 0, 0, 0.45);
  transition: transform 160ms var(--ease), filter 150ms ease-out;
}
.big-play-disc svg { width: 30px; height: 30px; }
.big-play:active .big-play-disc { transform: scale(0.95); }
@media (hover: hover) { .big-play:hover .big-play-disc { transform: scale(1.04); filter: brightness(1.03); } }
.player.started .big-play, .player[data-state="playing"] .big-play { opacity: 0; pointer-events: none; }

.player-loading { position: absolute; left: 50%; top: 50%; display: flex; gap: 7px; transform: translate(-50%, -50%); opacity: 0; transition: opacity 200ms ease-out; pointer-events: none; }
.player-loading i { width: 9px; height: 9px; border-radius: 50%; background: #ffd447; animation: holes 1.1s ease-in-out infinite; }
.player-loading i:nth-child(2) { animation-delay: 0.14s; }
.player-loading i:nth-child(3) { animation-delay: 0.28s; }
.player.waiting .player-loading { opacity: 1; }

.controls {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 10px;
  background: linear-gradient(to top, rgba(12, 12, 10, 0.72) 0%, rgba(12, 12, 10, 0.38) 45%, rgba(12, 12, 10, 0) 100%);
  color: var(--ctl);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.player:not(.started) .controls { opacity: 0; pointer-events: none; }
.player.idle .controls { opacity: 0; transform: translateY(6px); pointer-events: none; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bar-side { display: flex; align-items: center; gap: 2px; min-width: 0; }

.ctl {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--ctl); cursor: pointer;
  transition: background-color 150ms ease-out, transform 120ms ease-out;
}
.ctl svg { width: 20px; height: 20px; }
.ctl:active { transform: scale(0.92); }
.ctl:focus-visible, .scrub:focus-visible, .big-play:focus-visible .big-play-disc { outline: 2px solid #ffd447; outline-offset: 2px; }
.big-play:focus-visible { outline: none; }
@media (hover: hover) { .ctl:hover { background: rgba(255, 255, 255, 0.12); } }
.ctl.pill { width: auto; min-width: 40px; height: 28px; padding: 0 9px; font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ctl.pill.on { background: rgba(255, 212, 71, 0.18); color: #ffd447; }
.ctl .w2 { transition: opacity 150ms ease-out; }
.ctl.quiet .w2 { opacity: 0; }

.time { margin-left: 6px; font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ctl); white-space: nowrap; }
.time .sep { margin: 0 5px; color: var(--ctl-dim); }
.time .dur { color: var(--ctl-dim); }

/* Volume: a slim slider that opens beside the speaker */
.vol-wrap { display: flex; align-items: center; }
.vol {
  --v: 1;
  width: 0; height: 36px; margin: 0; opacity: 0; appearance: none; background: transparent; cursor: pointer;
  transition: width 220ms var(--ease), opacity 180ms ease-out, margin 220ms var(--ease);
}
.vol-wrap:hover .vol, .vol-wrap:focus-within .vol { width: 72px; margin: 0 6px 0 2px; opacity: 1; }
.vol::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff calc(var(--v) * 100%), rgba(255, 255, 255, 0.28) 0); }
.vol::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff calc(var(--v) * 100%), rgba(255, 255, 255, 0.28) 0); }
.vol::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.vol::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.vol:focus-visible { outline: none; }
.vol:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #ffd447; }

/* Scrubber: a 4px line that thickens under the pointer; the played part is cheese */
.scrub { position: relative; height: 20px; margin: 0 4px 2px; cursor: pointer; touch-action: none; }
.scrub-track {
  position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, 0.24);
  transition: height 150ms var(--ease), margin 150ms var(--ease);
}
.scrub.hovering .scrub-track, .scrub:focus-visible .scrub-track { height: 6px; margin-top: -3px; }
.scrub-buffered, .scrub-hover, .scrub-played { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); }
.scrub-buffered { background: rgba(255, 255, 255, 0.28); }
.scrub-hover { background: rgba(255, 255, 255, 0.3); opacity: 0; transition: opacity 120ms ease-out; }
.scrub.hovering .scrub-hover { opacity: 1; }
.scrub-played { background: linear-gradient(180deg, #ffe27a, #ffc21a); }
.scrub-knob {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: linear-gradient(180deg, #ffe27a, #ffc21a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(170, 115, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.35);
  transform: scale(0); transition: transform 150ms var(--ease);
  pointer-events: none;
}
.scrub.hovering .scrub-knob, .scrub:focus-visible .scrub-knob { transform: scale(1); }
.scrub.dragging .scrub-knob { transform: scale(1.15); }

/* Hover preview: the frame at that moment, with its time beneath */
.scrub-preview {
  position: absolute; bottom: 22px; left: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  transform: translate(-50%, 4px); opacity: 0; pointer-events: none;
  transition: opacity 140ms ease-out, transform 140ms var(--ease);
}
.scrub.hovering .scrub-preview { opacity: 1; transform: translate(-50%, 0); }
.scrub-frame { display: none; width: 176px; border-radius: 6px; background: #141412 no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 8px 24px -6px rgba(0, 0, 0, 0.6); }
.has-thumbs .scrub-frame { display: block; }
.scrub-time {
  padding: 4px 7px; border-radius: 5px; background: rgba(12, 12, 10, 0.82); color: #fff;
  font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums;
}

/* Quality menu: a small dark sheet above its button */
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 2; min-width: 168px; padding: 5px;
  border-radius: 10px; background: rgba(28, 28, 26, 0.94); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 32px -8px rgba(0, 0, 0, 0.5);
  transform-origin: bottom right; animation: menu-in 160ms var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: scale(0.96) translateY(4px); } }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px 0 28px; border: 0; border-radius: 6px;
  position: relative; background: transparent; color: #fff; text-align: left; cursor: pointer;
  font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums;
}
.menu-item small { margin-left: auto; font: 500 12px/1 var(--sans); color: var(--ctl-dim); }
.menu-item[aria-checked="true"]::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #ffd447; }
.menu-item:hover, .menu-item:focus-visible { outline: none; background: rgba(255, 255, 255, 0.1); }
.player.menu-open .controls { opacity: 1; transform: none; pointer-events: auto; }

.player.fullscreen { width: 100%; height: 100%; border-radius: 0; background: #000; }
.player.fullscreen video { object-fit: contain; }
.player.fullscreen .controls { padding: 56px 24px 16px; }

@media (max-width: 640px) {
  .controls { padding: 24px 4px 2px; }
  .bar-side { gap: 0; }
  .time { margin-left: 2px; }
  .vol-wrap .vol { display: none; }
  .ctl.pip { display: none; }
  .scrub-frame { width: 128px; }
}

@media (max-width: 640px) {
  .nav { padding: 16px 16px 0; }
  .library { padding: 24px 16px 80px; }
  .drop { padding: 44px 16px 40px; }
  .drop h1 { font-size: 40px; }
  .video { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .thumb { width: 88px; }
  .video-actions { grid-column: 2; }
  .progress { width: 100%; }
  .watch { padding: 16px 16px 56px; }
  .stage, .about { width: 100%; }
  .about { flex-direction: column; gap: 16px; }
  .title { font-size: 26px; }
}

/* A phone on its side: the video gets the whole height, and the name and buttons wait below. */
@media (orientation: landscape) and (max-height: 520px) {
  body:has(.watch) .nav { display: none; }
  .watch { padding: 8px max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left)); }
  .stage, .about { width: min(100%, calc((100svh - 16px) * var(--ar))); min-width: 0; }
  .about { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}