@font-face { font-family: "Doto"; src: url("fonts/doto-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ============ tokens ============ */

:root {
  --accent: #ff4f00;
  --accent-glow: rgba(255, 79, 0, .6);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --dot: "Doto", ui-monospace, monospace;
  --gap: clamp(8px, 1.3vh, 12px);
  --edge: clamp(12px, 4vw, 18px);

  --grain-dk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 -.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-lt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --brushed: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,.022) 1px 2px, transparent 2px 5px);
}

:root[data-theme="light"] {
  --body: #dedad3;
  --plate-top: #ebe8e3;
  --plate-bot: #e2ded8;
  --pocket: #d3cec6;
  --cap-top: #f3f1ed;
  --cap-bot: #ebe8e3;
  --skirt: #c2bbb1;
  --skirt-dk: #a9a297;
  --drop: rgba(70, 58, 40, .28);
  --edge-hi: rgba(255, 255, 255, .95);
  --groove-dk: rgba(60, 50, 35, .16);
  --groove-hi: rgba(255, 255, 255, .85);
  --ink: #1c1c1e;
  --mute: #8b857c;
  --faint: #cbc5bc;
  --knurl-a: #ddd8d1;
  --knurl-b: #f7f5f2;
  --screw-hi: #f4f2ee;
  --screw-lo: #a9a399;
  --hole: #8f887e;
  --glass-a: #6aaab4;
  --glass-b: #2a6772;
  --screen-ink: #e2f7f6;
  --screen-dim: rgba(226, 247, 246, .14);
  --alt-top: #d4cfc7;
  --alt-bot: #cac4bb;
  --bezel-a: #cfcac2;
  --bezel-b: #f3f1ed;
  --tint-a: #2f6bff;
  --tint-b: #13a067;
  --tint-c: #1c1c1e;
  --tint-d: var(--accent);
  --grain-op: .22;
  --grain: var(--grain-dk);
}

:root[data-theme="dark"] {
  --body: #0e0e0f;
  --plate-top: #1d1d1e;
  --plate-bot: #19191a;
  --pocket: #111112;
  --cap-top: #2a2a2b;
  --cap-bot: #232324;
  --alt-top: #3d3d3e;
  --alt-bot: #353536;
  --skirt: #0b0b0c;
  --skirt-dk: #050505;
  --drop: rgba(0, 0, 0, .65);
  --edge-hi: rgba(255, 255, 255, .075);
  --groove-dk: rgba(0, 0, 0, .7);
  --groove-hi: rgba(255, 255, 255, .045);
  --ink: #e4e4e2;
  --mute: #a3a3a1;
  --faint: #3a3a3b;
  --knurl-a: #19191a;
  --knurl-b: #333335;
  --screw-hi: #4a4a4c;
  --screw-lo: #101011;
  --hole: #070707;
  --glass-a: #5fa3ae;
  --glass-b: #1e5964;
  --screen-ink: #d8f4f3;
  --screen-dim: rgba(216, 244, 243, .12);
  --bezel-a: #070708;
  --bezel-b: #2a2a2b;
  --tint-a: #7aa2ff;
  --tint-b: #45d6a0;
  --tint-c: #e4e4e2;
  --tint-d: var(--accent);
  --grain-op: .16;
  --grain: var(--grain-lt);
  --brushed: linear-gradient(transparent, transparent);
}

/* ============ base ============ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  background: var(--body);
  color: var(--ink);
  font-family: var(--mono);
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}
body { position: fixed; inset: 0; overflow: hidden; }

button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: none; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* film grain over everything */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background-image: var(--grain);
  opacity: var(--grain-op);
}

/* debossed print */
.deboss, .knob label, .sub, .cap.btn, .key span {
  text-shadow: 0 1px 0 var(--edge-hi);
}

/* ============ chassis ============ */

.device {
  height: 100dvh; max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--gap);
  padding:
    calc(env(safe-area-inset-top) + 8px)
    calc(env(safe-area-inset-right) + 10px)
    calc(env(safe-area-inset-bottom) + 10px)
    calc(env(safe-area-inset-left) + 10px);
}

.plate {
  /* screws sit centred in the padding band; the corner is concentric with them */
  --ss: clamp(7px, calc(var(--edge) * .56), 9px);           /* screw diameter */
  --sc: calc(var(--edge) * .5 + 1px);                         /* screw centre from each edge */
  position: relative;
  border-radius: var(--sc);
  padding: var(--edge);
  background: var(--brushed), linear-gradient(180deg, var(--plate-top), var(--plate-bot));
  /* chamfered edge + seam to the body */
  box-shadow:
    inset 0 1px 0 var(--edge-hi),
    inset 0 -1px 0 var(--groove-dk),
    0 0 0 1px var(--groove-dk),
    0 1px 0 1px var(--groove-hi),
    0 10px 24px -14px var(--drop);
}
.plate-top { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.plate-ctl { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; padding-bottom: 14px; }
.plate-play { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; }

.screw {
  position: absolute; width: var(--ss); height: var(--ss); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--screw-hi), var(--screw-lo) 80%);
  box-shadow: 0 0 0 1px var(--groove-dk), 0 1px 0 1px var(--groove-hi);
}
.screw::after {
  content: ""; position: absolute; left: 18%; right: 18%; top: 50%;
  height: 1.4px; margin-top: -.7px; border-radius: 1px;
  background: rgba(0, 0, 0, .5);
  transform: rotate(var(--a, 30deg));
}
.screw { --o: calc(var(--sc) - var(--ss) / 2); }
.screw.tl { left: var(--o); top: var(--o); } .screw.tr { right: var(--o); top: var(--o); }
.screw.bl { left: var(--o); bottom: var(--o); } .screw.br { right: var(--o); bottom: var(--o); }

/* ============ header ============ */

.top { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px; }
.brand { display: flex; flex-direction: column; gap: 1px; flex: none; }
.logo { font-family: var(--serif); font-style: italic; font-size: 32px; line-height: 1; letter-spacing: -.01em; }
.sub { font-size: 7.5px; padding-left: 3px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }

.grille { flex: 1; display: grid; place-items: center; min-width: 40px; }
.grille i {
  display: block; width: min(100%, 120px); height: 34px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 50%, var(--hole) 0 2px, transparent 2.4px) 0 0 / 8px 10px,
    radial-gradient(circle at 50% 50%, var(--hole) 0 2px, transparent 2.4px) 4px 5px / 8px 10px;
  filter: drop-shadow(0 1px 0 var(--groove-hi));
  -webkit-mask: radial-gradient(closest-side, #000 82%, transparent 100%);
          mask: radial-gradient(closest-side, #000 82%, transparent 100%);
}

/* ============ keycaps (shared geometry) ============ */

.cap, .pad, .key {
  --lift: 4px;
  position: relative;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  box-shadow:
    inset 0 1px 0 var(--edge-hi),
    inset 0 -1px 1px rgba(0, 0, 0, .06),
    0 0 0 1px var(--skirt-dk),
    0 var(--lift) 0 var(--skirt),
    0 calc(var(--lift) + 1px) 0 var(--skirt-dk),
    0 calc(var(--lift) + 3px) 6px -1px var(--drop);
  transform: translateY(0);
  transition: transform .07s ease-out, box-shadow .07s ease-out, background .3s;
}
.cap.down, .pad.down, .key.down, .cap.latched {
  transform: translateY(calc(var(--lift) - 1px));
  box-shadow:
    inset 0 1px 0 var(--edge-hi),
    inset 0 -1px 1px rgba(0, 0, 0, .06),
    0 0 0 1px var(--skirt-dk),
    0 1px 0 var(--skirt),
    0 2px 0 var(--skirt-dk),
    0 3px 4px -1px var(--drop);
}
.cap.alt { background: linear-gradient(180deg, var(--alt-top), var(--alt-bot)); color: var(--ink); }

.cap.round {
  --lift: 3px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: var(--mute);
}
.cap.round svg { width: 17px; height: 17px; }

/* ============ power slide switch ============ */

.power { position: relative; display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.power .slot {
  position: relative; display: block;
  width: 62px; height: 32px; border-radius: 8px;
  background: var(--pocket);
  box-shadow: inset 0 2px 4px var(--drop), inset 0 -1px 0 var(--groove-hi), 0 1px 0 var(--groove-hi);
}
.power .thumb {
  position: absolute; top: 3px; left: 3px;
  width: 30px; height: 26px; border-radius: 5px;
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, var(--groove-dk) 4px 5px, var(--groove-hi) 5px 6px) 9px 6px / 13px 14px no-repeat,
    linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  box-shadow: inset 0 1px 0 var(--edge-hi), 0 2px 0 var(--skirt), 0 3px 5px var(--drop);
  transition: transform .26s cubic-bezier(.3, 1.35, .5, 1);
}
[data-power="on"] .power .thumb { transform: translateX(26px); }
.power .lamp {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 45%), #5a4a40;
  box-shadow: 0 0 0 2px var(--pocket), 0 0 0 3px var(--groove-dk), inset 0 -1px 2px rgba(0,0,0,.5);
  transition: background .2s, box-shadow .2s;
}
[data-power="on"] .power .lamp {
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.8), transparent 45%), var(--accent);
  box-shadow: 0 0 0 2px var(--pocket), 0 0 0 3px var(--groove-dk), 0 0 12px 2px var(--accent-glow);
}

/* ============ display ============ */

.screen {
  position: relative;
  flex: 0 0 clamp(124px, 19vh, 178px);
  border-radius: 12px;
  /* machined bezel */
  background: linear-gradient(180deg, var(--bezel-a), var(--bezel-b));
  padding: 6px;
  box-shadow: 0 1px 0 var(--groove-hi), 0 -1px 0 var(--groove-dk);
}
.glass-bg, .screen canvas, .glare {
  position: absolute; inset: 6px; border-radius: 8px;
}
.glass-bg {
  background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 6px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.35);
}
.screen canvas { width: calc(100% - 12px); height: calc(100% - 12px); }
.glare {
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 34%, transparent 34.5%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}


.readout { position: absolute; left: 22px; top: 18px; right: 112px; color: var(--screen-ink); pointer-events: none; }
.readout .label { font-size: 10px; letter-spacing: .24em; opacity: .7; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.readout .value { font-family: var(--dot); font-weight: 800; font-size: clamp(34px, 6.2vh, 52px); line-height: 1.05; }
.readout small { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; margin-left: 6px; opacity: .6; }

.chips { position: absolute; right: 18px; top: 16px; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
.chip {
  font-size: 8.5px; letter-spacing: .14em;
  padding: 6px 9px; border-radius: 4px;
  color: var(--screen-ink);
  border: 1px solid color-mix(in srgb, var(--screen-ink) 35%, transparent);
  background: color-mix(in srgb, var(--screen-ink) 5%, transparent);
  transition: background .08s;
}
.chip.down { background: var(--screen-ink); color: var(--glass-b); }
.chip { text-shadow: none; }

.stepdots {
  position: absolute; left: 22px; right: 22px; bottom: 17px;
  display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; pointer-events: none;
}
.stepdots i { height: 4px; border-radius: 1px; background: var(--screen-dim); }
.stepdots i.beat { background: color-mix(in srgb, var(--screen-ink) 24%, transparent); }
.stepdots i.now { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }

/* ============ knobs ============ */

.knobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; justify-items: center; }
.knob { display: flex; flex-direction: column; align-items: center; gap: 6px; touch-action: none; }
.knob .well {
  --s: clamp(62px, 18vw, 82px);
  position: relative; width: var(--s); height: var(--s); border-radius: 50%;
}
.knob svg.scale { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.knob .ticks line { stroke: var(--mute); stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.knob .ticks line.major { stroke-width: 1.8; opacity: .85; }
.knob .arc-bg { fill: none; stroke: var(--pocket); stroke-width: 3; stroke-linecap: round; }
.knob .arc { fill: none; stroke: var(--tint); stroke-width: 3; stroke-linecap: round; }
/* collar pocket the knob sits in */
.knob .collar {
  position: absolute; inset: 15%; border-radius: 50%;
  background: var(--pocket);
  box-shadow: inset 0 2px 4px var(--drop), 0 1px 0 var(--groove-hi);
}
.knob .dial {
  position: absolute; inset: 18%; border-radius: 50%;
  will-change: transform;
  background: repeating-conic-gradient(var(--knurl-a) 0 4deg, var(--knurl-b) 4deg 8deg);
  box-shadow: 0 3px 0 var(--skirt), 0 6px 10px -2px var(--drop), inset 0 0 0 1px rgba(0,0,0,.12);
}
.knob .face {
  position: absolute; inset: 13%; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, var(--cap-top), var(--cap-bot) 75%);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.14), inset 0 -1px 0 var(--edge-hi), 0 0 0 1px var(--groove-dk);
}
.knob .ind {
  position: absolute; left: 50%; top: 8%;
  width: 3.5px; height: 30%; margin-left: -1.75px; border-radius: 2px;
  background: var(--tint);
  box-shadow: 0 1px 0 var(--edge-hi);
}
.knob label { font-size: 9.5px; letter-spacing: .16em; color: var(--mute); }
.knob.active label { color: var(--ink); }

/* ============ transport row ============ */

.row { display: flex; gap: 7px; align-items: center; padding-bottom: 4px; }
.row .sep { width: 1px; align-self: stretch; margin: 6px 2px; background: var(--groove-dk); box-shadow: 1px 0 0 var(--groove-hi); }
.cap.btn {
  --lift: 3px;
  flex: 1; height: clamp(36px, 5.2vh, 44px);
  border-radius: 8px;
  font-size: 10px; letter-spacing: .1em; color: var(--mute);
  display: grid; place-items: center;
}
.cap.btn.icon { flex: 0 0 clamp(38px, 11vw, 46px); }
.cap.btn svg { width: 17px; height: 17px; }
.cap.track.sel { color: var(--ink); }
.cap.track.sel::after {
  content: ""; position: absolute; bottom: 5px; left: 50%;
  width: 10px; height: 2px; margin-left: -5px; border-radius: 1px;
  background: var(--accent); box-shadow: 0 0 6px var(--accent-glow);
}
.cap.track.hit::before {
  content: ""; position: absolute; top: 5px; right: 6px;
  width: 3px; height: 3px; border-radius: 50%; background: var(--mute);
}
.recdot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--mute); transition: all .15s; }
#recBtn.on .recdot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); animation: blink 1s steps(2) infinite; }
#playBtn .i-stop { display: none; }
#playBtn.on { color: var(--accent); }
#playBtn.on .i-play { display: none; }
#playBtn.on .i-stop { display: block; }
@keyframes blink { 50% { opacity: .35; } }

/* ============ step pads: rubber in a pocketed frame ============ */

.grid {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, minmax(38px, 1fr));
  gap: clamp(8px, 2.4vw, 11px);
  padding: clamp(8px, 2.4vw, 11px) clamp(8px, 2.4vw, 11px) calc(clamp(8px, 2.4vw, 11px) + 4px);
  border-radius: 12px;
  background: var(--pocket);
  box-shadow: inset 0 3px 6px var(--drop), inset 0 -1px 0 var(--groove-hi), 0 1px 0 var(--groove-hi);
}
.pad {
  --lift: 4px;
  min-height: 0; border-radius: 8px;
}
.pad::before { /* matte rubber */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: var(--grain); background-size: 120px;
  opacity: .35; pointer-events: none;
}
.pad .led {
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--faint);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.25), 0 1px 0 var(--edge-hi);
  transition: background .08s, box-shadow .08s, transform .08s;
}
.pad .n { position: absolute; left: 9px; top: 7px; font-size: 9px; letter-spacing: .06em; color: var(--mute); }
.pad .ix { position: absolute; right: 9px; bottom: 6px; font-size: 7.5px; letter-spacing: .08em; color: var(--mute); opacity: .55; }
.pad.on { transform: translateY(2px); box-shadow:
    inset 0 1px 0 var(--edge-hi), 0 2px 0 var(--skirt), 0 3px 0 var(--skirt-dk), 0 5px 7px -2px var(--drop); }
.pad.on.down { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--edge-hi), 0 1px 0 var(--skirt), 0 2px 3px var(--drop); }
.pad.on .led { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow), 0 0 2px var(--accent); }
.pad.now::after {
  content: ""; position: absolute; inset: 3px; border-radius: 6px;
  border: 1.5px solid var(--ink); opacity: .28; pointer-events: none;
}
.pad.now.on .led { transform: scale(1.4); }

/* ============ keys ============ */

.keys { flex: 0 0 clamp(70px, 10.5vh, 94px); display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding-bottom: 6px; }
.key {
  --lift: 6px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--cap-top) 0%, var(--cap-bot) 85%, var(--cap-top) 100%);
}

.key span { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 9.5px; letter-spacing: .04em; color: var(--mute); }
.key::before {
  content: ""; position: absolute; top: 10px; left: 50%;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--faint); box-shadow: inset 0 1px 1px rgba(0,0,0,.25);
}
.key.root::before { background: var(--mute); }
.key.down::before { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }

/* ============ off state ============ */

.plate-ctl > *, .plate-play > *, .chips { transition: opacity .4s ease, filter .4s ease; }
[data-power="off"] .plate-ctl > *,
[data-power="off"] .plate-play > *,
[data-power="off"] .chips { opacity: .5; filter: saturate(.15); }
[data-power="off"] .pad.on .led { background: var(--mute); box-shadow: none; }

.nudge { animation: nudge .45s ease; }
@keyframes nudge { 30% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }

/* ============ shorter phones ============ */

@media (max-height: 820px) {
  .device { gap: 8px; }
  .plate { --edge: 13px; }
  .plate-top { padding-top: 8px; gap: 8px; }
  .plate-ctl { padding-top: 10px; padding-bottom: 12px; gap: 12px; }
  .plate-play { gap: 12px; }
  .screen { flex-basis: 112px; }
  .knob .well { --s: clamp(54px, 15.5vw, 64px); }
  .keys { flex-basis: 64px; }
}
@media (max-height: 700px) {
  .device { gap: 6px; padding-top: calc(env(safe-area-inset-top) + 6px); padding-bottom: calc(env(safe-area-inset-bottom) + 6px); }
  .plate { --edge: 11px; }
  .plate-top { padding-top: 6px; gap: 6px; }
  .plate-ctl { padding-top: 8px; padding-bottom: 10px; gap: 9px; }
  .plate-play { gap: 10px; }
  .top { min-height: 36px; }
  .logo { font-size: 26px; }
  .sub { display: none; }
  .cap.round { width: 32px; height: 32px; }
  .power .slot { height: 28px; } .power .thumb { height: 22px; }
  .screen { flex-basis: 92px; }
  .readout { top: 13px; }
  .readout .value { font-size: 30px; }
  .chips { top: 11px; gap: 5px; } .chip { padding: 5px 8px; }
  .stepdots { bottom: 12px; }
  .knob { gap: 4px; }
  .knob .well { --s: 50px; }
  .cap.btn { height: 34px; }
  .keys { flex-basis: 54px; }
  .grid { gap: 7px; padding: 8px 8px 11px; }
}

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