:root {
  color-scheme:dark;
  --bg:#080b15;
  --panel:#111724;
  --ink:#eff6ff;
  --muted:#919db2;
  --cyan:#63f9db;
  --pink:#eb75d1;
  --border:#273143;
  --motion:220ms;
  --radius:14px;
  font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg)
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:radial-gradient(ellipse at 26% 38%,#16313b38,transparent 60%),radial-gradient(ellipse at 84% 30%,#58285c19,transparent 45%),var(--bg);
  min-height:100vh
}

button,input,select {
  font:inherit
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer;
  color:inherit
}

button:disabled {
  cursor:default;
  opacity:.38
}

a {
  color:inherit;
  text-decoration:none
}

a:hover {
  color:var(--cyan)
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid var(--cyan);
  outline-offset:4px
}

button {
  transition:background var(--motion),transform var(--motion),box-shadow var(--motion)
}

button:not(:disabled):active {
  transform:scale(.97)
}

[hidden] {
  display:none!important
}

.sr-only,.skip:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}

.skip:focus {
  position:fixed;
  z-index:10;
  padding:15px;
  background:var(--panel)
}

.site-header {
  height:84px;
  border-bottom:1px solid #ffffff0c;
  display:flex;
  align-items:center;
  gap:40px;
  padding:0 max(28px,calc((100vw - 1400px)/2));
  font-size:12px;
  letter-spacing:1px
}

.brand {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:850;
  white-space:nowrap
}

.brand-mark {
  color:var(--cyan);
  font-size:33px;
  margin-right:6px
}

.brand-light {
  font-weight:400;
  color:var(--muted)
}

nav {
  display:flex;
  gap:28px;
  margin-left:24px;
  color:#a8b5c8;
  letter-spacing:0
}

.alpha-label {
  margin-left:auto;
  color:var(--cyan);
  font-size:9px;
  border:1px solid #63f9db30;
  border-radius:4px;
  padding:7px 10px;
  white-space:nowrap
}

main {
  max-width:1400px;
  margin:auto;
  padding:40px 28px 32px
}

.heading-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:30px
}

.eyebrow {
  font-size:10px;
  letter-spacing:2.1px;
  font-weight:700;
  color:var(--cyan);
  margin:0 0 11px
}

h1 {
  font-size:clamp(28px,3vw,42px);
  letter-spacing:-1.8px;
  line-height:1.15;
  margin:0;
  font-weight:400
}

h1>span:first-child {
  font-weight:760
}

.title-dot {
  color:var(--cyan)
}

h2 {
  margin:0;
  font-size:23px;
  letter-spacing:-.6px;
  line-height:1.3
}

.settings {
  display:flex;
  gap:8px
}

.icon-button {
  min-height:38px;
  background:#ffffff03;
  border:1px solid var(--border);
  border-radius:7px;
  color:#aebacd;
  font-size:11px;
  padding:8px 12px
}

.icon-button:hover,.icon-button[aria-pressed=true] {
  background:#63f9db0b;
  color:var(--cyan);
  border-color:#63f9db55
}

.game-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:26px;
  align-items:start
}

.table-section {
  min-width:0
}

.player-strip {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  min-height:77px;
  background:linear-gradient(90deg,#131c2b,#111723);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:12px
}

.player-strip h2 {
  font-size:16px;
  letter-spacing:0
}

.player-label {
  font-size:8px;
  letter-spacing:1.5px;
  color:var(--muted);
  margin:0 0 5px
}

.avatar {
  width:39px;
  height:39px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:17px;
  border:1px solid currentColor
}

.cyan {
  color:var(--cyan);
  background:#63f9db10
}

.magenta {
  color:var(--pink);
  background:#eb75d110
}

.stat {
  display:flex;
  flex-direction:column;
  text-align:right;
  margin-left:20px;
  gap:4px
}

.stat:first-of-type {
  margin-left:auto
}

.player-strip>div:nth-child(3) {
  margin-left:auto
}

.stat span,.bear-off>span {
  font-size:8px;
  letter-spacing:1px;
  color:var(--muted)
}

.stat strong,.bear-off strong {
  font-size:22px;
  font-weight:500
}

.stat small,.bear-off small {
  font-size:12px;
  color:#7d899e
}

.seat-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  box-shadow:0 0 12px currentColor;
  background:currentColor;
  margin-left:10px
}

.bear-off {
  background:transparent;
  border:1px solid transparent;
  min-width:82px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  border-radius:7px;
  padding:6px 10px
}

.bear-off:disabled {
  opacity:1
}

.bear-off.legal {
  background:#63f9db17;
  border-color:var(--cyan);
  color:var(--cyan)
}

.your-strip {
  margin-top:12px;
  margin-bottom:0;
  border-color:#63f9db2d
}

.board-frame {
  border:1px solid #5d778b66;
  padding:9px 13px 7px;
  border-radius:12px;
  background:linear-gradient(140deg,#263242,#131c2b 35%,#2b243c);
  box-shadow:0 24px 70px #0005,inset 0 1px #a3cddd22
}

.board-topline,.board-bottomline {
  display:flex;
  justify-content:space-between;
  color:#90a4b9;
  font-size:7px;
  letter-spacing:2px;
  padding:3px 2px 10px
}

.board-bottomline {
  padding:10px 2px 1px;
  font-size:7px
}

.board-bottomline i {
  color:var(--cyan);
  font-style:normal;
  margin-left:16px
}

.board {
  position:relative;
  height:clamp(330px,37vw,480px);
  border:1px solid #090f1a;
  border-radius:5px;
  overflow:hidden;
  background:radial-gradient(ellipse at 25% 50%,#19423938,transparent 70%),radial-gradient(ellipse at 80% 50%,#401d4b30,transparent 60%),repeating-linear-gradient(0deg,#ffffff02 0px,#ffffff02 1px,transparent 1px,transparent 4px),#0c1420;
  box-shadow:inset 0 0 30px #000a
}

.points {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr)) .75fr repeat(6,minmax(0,1fr));
  grid-template-rows:1fr 1fr;
  position:absolute;
  inset:0 7px;
  column-gap:3px
}

.point {
  position:relative;
  background:none;
  border:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:21px 0 0;
  gap:0;
  isolation:isolate;
  min-width:0
}

.point.bottom {
  flex-direction:column-reverse;
  padding:0 0 21px
}

.point::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 0 21%;
  clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(180deg,#27746f88,#2c77772c);
  transition:filter var(--motion)
}

.point:nth-child(even)::before {
  background:linear-gradient(180deg,#7f467c88,#704d8128)
}

.point.bottom::before {
  inset:21% 0 0;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  background:linear-gradient(0deg,#27746f88,#2c77772c)
}

.point.bottom:nth-child(even)::before {
  background:linear-gradient(0deg,#7f467c88,#704d8128)
}

.point:disabled {
  opacity:1
}

.point.legal::before {
  filter:brightness(1.65)
}

.point.legal .point-number {
  color:var(--cyan)
}

.point.selected::after,.point.destination::after {
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid var(--cyan);
  border-radius:4px;
  background:#63f9db0b;
  pointer-events:none
}

.point.destination::after {
  border-style:dashed
}

.point.destination .point-number {
  background:var(--cyan);
  color:#08171c;
  border-radius:3px;
  padding:1px 3px
}

.point:hover:not(:disabled)::before {
  filter:brightness(1.8)
}

.point-number {
  position:absolute;
  top:4px;
  font-size:9px;
  color:#a1acbc;
  font-weight:600
}

.bottom .point-number {
  top:auto;
  bottom:4px
}

.checker {
  display:block;
  flex:0 0 auto;
  width:85%;
  aspect-ratio:1;
  border-radius:50%;
  position:relative;
  border:1px solid #97ffedb0;
  background:radial-gradient(circle at 37% 25%,#b6ffeb,#5dcdb5 45%,#256f6c 79%);
  box-shadow:0 3px 0 #134e4f,0 5px 5px #0009,inset 0 0 0 3px #54c2b2,inset 0 0 0 4px #a5ffe577;
  margin-top:-1px
}

.checker::after {
  content:"";
  position:absolute;
  inset:22%;
  border:1px solid #133e4266;
  border-radius:50%;
  box-shadow:inset 0 1px 3px #0003
}

.checker.black {
  border-color:#ffc0ee9c;
  background:radial-gradient(circle at 37% 25%,#ffd4f0,#ce75b8 45%,#713e80 79%);
  box-shadow:0 3px 0 #502b5a,0 5px 5px #0009,inset 0 0 0 3px #b968a7,inset 0 0 0 4px #edabd777
}

.count-badge {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:900;
  color:#061318;
  z-index:1
}

.checker.black .count-badge {
  color:#301235
}

.bar-spine {
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:5.5%;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#111421,#263146,#111421);
  border-inline:1px solid #73808f24;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:16px 2px
}

.bar-slot {
  border:1px solid #ffffff14;
  border-radius:7px;
  background:#0a1121;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:8px 0;
  color:var(--muted);
  gap:5px
}

.bar-slot:disabled {
  opacity:1
}

.bar-slot span {
  font-size:6px;
  letter-spacing:1px
}

.bar-slot strong {
  font-size:14px
}

.bar-slot.legal {
  border-color:var(--cyan);
  color:var(--cyan);
  box-shadow:0 0 15px #63f9db25
}

.spine-mark {
  font-size:6px;
  letter-spacing:2px;
  writing-mode:vertical-lr;
  color:#8b9aaf
}

.dice-dock {
  position:absolute;
  left:25%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  pointer-events:none
}

.dice {
  display:flex;
  gap:7px
}

.die {
  height:38px;
  width:38px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  padding:8px;
  gap:2px;
  border-radius:7px;
  color:#05171a;
  background:linear-gradient(135deg,#e4fff7,#6cceba);
  box-shadow:0 3px 0 #286a64,0 8px 18px #0008;
  border:1px solid #cdffed
}

.die.used {
  opacity:.2
}

.pip {
  background:#173e3c;
  border-radius:50%;
  width:5px;
  height:5px;
  align-self:center;
  justify-self:center
}

.dice-dock>span {
  font-size:6px;
  letter-spacing:1.5px;
  color:#7c9aab;
  white-space:nowrap
}

.board-watermark {
  position:absolute;
  right:7%;
  top:50%;
  font-size:7px;
  letter-spacing:2px;
  color:#61738670;
  pointer-events:none
}

.table-foot {
  display:flex;
  justify-content:space-between;
  padding:15px 3px 0;
  color:#8291a4;
  font-size:9px;
  letter-spacing:.5px
}

.table-foot>span:first-child {
  display:flex;
  align-items:center;
  gap:7px
}

.live-dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--cyan);
  border-radius:50%
}

.panel {
  padding:25px 23px;
  background:linear-gradient(145deg,#172031,#111622);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 12px 35px #0002
}

.panel .muted {
  font-size:12px;
  line-height:1.7;
  margin:13px 0 22px
}

.muted {
  color:var(--muted)
}

label {
  display:block;
  font-size:8px;
  letter-spacing:1.3px;
  font-weight:700;
  color:#a5b2c4;
  margin:20px 0 8px
}

input,select {
  width:100%;
  min-height:43px;
  padding:10px 12px;
  border:1px solid #344055;
  border-radius:6px;
  background:#0c1220;
  color:#eff6ff;
  font-size:12px
}

input::placeholder {
  color:#778397;
  font-size:10px;
  letter-spacing:1px
}

.primary,.secondary {
  border-radius:7px;
  min-height:44px;
  padding:12px 16px;
  font-size:12px;
  font-weight:650
}

.primary {
  color:#0b2223;
  border:1px solid #94ffeb;
  background:linear-gradient(110deg,#8af5d9,#4cd3bc);
  box-shadow:0 3px 20px #63f9db10
}

.primary:hover {
  box-shadow:0 0 24px #63f9db36
}

.secondary {
  background:#ffffff03;
  border:1px solid #45506a;
  color:#d9e6f7
}

.secondary:hover {
  border-color:#8ba3c4;
  background:#ffffff07
}

.mode-button {
  width:100%;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding:14px
}

.mode-button strong {
  display:block;
  font-size:12px
}

.mode-button small {
  display:block;
  font-size:9px;
  font-weight:400;
  margin-top:6px;
  opacity:.75
}

.mode-button>span:last-child {
  font-size:22px
}

.or-divider {
  display:flex;
  align-items:center;
  gap:10px;
  margin:25px 0 13px;
  color:#98a4b9;
  font-size:7px;
  letter-spacing:1px;
  white-space:nowrap
}

.or-divider::before,.or-divider::after {
  content:"";
  height:1px;
  background:#ffffff12;
  flex:1
}

.join-form {
  display:flex;
  gap:8px
}

.join-form input {
  min-width:0;
  text-transform:uppercase
}

.join-form button {
  white-space:nowrap;
  padding-inline:12px
}

.text-button {
  border:0;
  background:none;
  padding:10px 0;
  color:#afbdd1;
  font-size:10px;
  min-height:38px
}

.text-button:hover {
  color:var(--cyan)
}

.lobby-note {
  font-size:9px;
  text-align:center;
  color:#8998af;
  margin:23px 0 0
}

.tip-card {
  display:flex;
  gap:12px;
  padding:22px 17px;
  border:1px solid #ffffff0e;
  border-radius:10px;
  margin-top:17px;
  background:#0e1420
}

.tip-symbol {
  color:var(--cyan);
  font-size:29px;
  line-height:1
}

.tip-card .eyebrow {
  font-size:8px;
  margin:0 0 9px;
  color:#b5c8d2
}

.tip-card p:last-child {
  margin:0;
  font-size:11px;
  line-height:1.7;
  color:#8596ae
}

.feature-notes {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:25px 18px;
  font-size:10px;
  color:#8497ac
}

.session-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px
}

.cube {
  border:1px solid #b692c760;
  border-radius:5px;
  min-width:35px;
  padding:8px 6px;
  text-align:center;
  font-size:12px;
  color:#eccaff;
  background:#b692c70a
}

.status {
  font-size:12px;
  line-height:1.7;
  color:#b9c9dc;
  min-height:45px
}

.invite {
  text-align:center;
  background:#63f9db08;
  border:1px dashed #63f9db50;
  border-radius:9px;
  padding:18px 8px;
  margin:20px 0
}

.invite>span {
  font-size:8px;
  letter-spacing:1px;
  color:var(--cyan)
}

.invite>strong {
  display:block;
  font-size:28px;
  letter-spacing:4px;
  margin:12px 0
}

.invite p {
  font-size:10px;
  line-height:1.7;
  color:var(--muted)
}

.destinations {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:12px 0
}

.destinations button {
  border:1px solid #63f9db50;
  background:#63f9db09;
  color:var(--cyan);
  font-size:11px;
  border-radius:6px;
  min-height:42px;
  padding:8px 12px
}

.action-buttons {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:15px
}

.match-score {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--border);
  margin-top:24px;
  padding-top:18px
}

.match-score>span {
  font-size:8px;
  letter-spacing:1px;
  color:var(--muted)
}

.match-score>strong {
  font-size:22px;
  letter-spacing:5px;
  font-weight:400
}

.session-links {
  display:flex;
  justify-content:space-between;
  margin-top:12px
}

.error {
  font-size:12px;
  line-height:1.6;
  border:1px solid #f68f9970;
  padding:14px;
  border-radius:8px;
  color:#ffc0c5;
  background:#471d2b
}

.busy .control-panel button:not(#leave) {
  pointer-events:none
}

.flight {
  position:fixed;
  z-index:20;
  pointer-events:none;
  aspect-ratio:1;
  margin:0
}

footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  max-width:1400px;
  margin:0 auto;
  padding:25px 28px;
  border-top:1px solid #ffffff0e;
  color:#8e9bb0;
  font-size:8px;
  letter-spacing:.7px
}

footer>div {
  display:flex;
  gap:18px
}

footer .build-info {
  font-size:7px;
  max-width:180px
}

dialog {
  color:var(--ink);
  background:linear-gradient(150deg,#18263a,#101623);
  border:1px solid #4d647b;
  border-radius:15px;
  padding:32px;
  max-width:620px;
  width:calc(100% - 32px);
  box-shadow:0 30px 120px #000b
}

dialog::backdrop {
  background:#030712c9;
  backdrop-filter:blur(8px)
}

dialog h2 {
  font-size:28px
}

dialog ol {
  padding-left:20px
}

dialog li {
  font-size:13px;
  color:#aebfd3;
  line-height:1.8;
  margin:15px 0
}

dialog strong {
  color:#e6f6ff
}

dialog .muted {
  font-size:11px;
  line-height:1.8
}

.close-dialog {
  float:right
}

.confirm-buttons {
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:25px
}

#confirm-copy {
  font-size:14px;
  line-height:1.6;
  color:#bac9d8
}

@media(min-width:1500px) {
  main {
    padding-top:48px
  }
  .heading-row {
    margin-bottom:38px
  }
  .game-layout {
    gap:34px;
    grid-template-columns:minmax(0,1fr) 330px
  }
  .panel {
    padding:28px
  }
}

@media(max-width:1050px) {
  .game-layout {
    grid-template-columns:minmax(0,1fr) 275px;
    gap:18px
  }
  .panel {
    padding:20px 17px
  }
  .settings {
    gap:5px
  }
  .icon-button {
    font-size:10px;
    padding:7px 9px
  }
  .board {
    height:350px
  }
  .checker {
    width:93%
  }
  .stat {
    margin-left:8px
  }
  .board-watermark {
    font-size:5px
  }
  .brand-light {
    display:none
  }
}

@media(max-width:800px) {
  .site-header {
    height:64px;
    padding:0 20px;
    gap:16px
  }
  nav {
    gap:16px;
    margin-left:auto
  }
  .alpha-label {
    display:none
  }
  main {
    padding:25px 18px
  }
  .heading-row {
    align-items:flex-start;
    flex-direction:column;
    margin-bottom:20px;
    gap:16px
  }
  .heading-row .eyebrow {
    font-size:8px
  }
  h1 {
    font-size:32px
  }
  .settings {
    width:100%
  }
  .settings button:last-child {
    margin-left:auto
  }
  .game-layout {
    grid-template-columns:1fr
  }
  .board {
    height:clamp(340px,58vw,440px)
  }
  .checker {
    width:min(88%,40px)
  }
  .control-panel {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    align-items:start
  }
  .panel {
    grid-row:span 3;
    padding:22px
  }
  .tip-card {
    margin-top:0
  }
  .feature-notes {
    margin:0 12px
  }
  .error {
    grid-column:1/-1
  }
  .control-panel:has(#session:not([hidden])) {
    display:block
  }
  .feature-notes {
    display:none
  }
  footer {
    padding:20px 18px;
    flex-direction:column
  }
  .stat {
    margin-left:20px
  }
}

@media(max-width:480px) {
  .brand {
    font-size:12px
  }
  .brand-mark {
    font-size:27px;
    margin-right:0
  }
  nav {
    font-size:10px;
    gap:13px
  }
  .control-panel {
    display:block
  }
  .tip-card {
    margin-top:16px
  }
  .player-strip {
    padding:10px;
    gap:8px;
    min-height:66px
  }
  .avatar {
    width:31px;
    height:31px;
    font-size:14px
  }
  .stat {
    margin-left:6px
  }
  .stat span,.bear-off>span {
    font-size:6px
  }
  .stat strong,.bear-off strong {
    font-size:18px
  }
  .player-strip h2 {
    font-size:13px
  }
  .player-label {
    font-size:6px;
    letter-spacing:1px
  }
  .seat-dot {
    display:none
  }
  .bear-off {
    min-width:62px;
    padding:4px 6px
  }
  .board-frame {
    padding:7px
  }
  .board {
    height:320px
  }
  .points {
    inset:0 3px;
    column-gap:2px
  }
  .checker {
    width:96%;
    margin-bottom:1px
  }
  .point {
    padding-top:20px
  }
  .point.bottom {
    padding-bottom:20px
  }
  .point-number {
    font-size:8px
  }
  .count-badge {
    font-size:9px
  }
  .bar-spine {
    width:5.2%;
    padding-inline:1px
  }
  .bar-slot {
    border:0
  }
  .bar-slot span {
    font-size:5px;
    letter-spacing:0
  }
  .bar-slot strong {
    font-size:11px
  }
  .board-topline,.board-bottomline {
    font-size:5px;
    letter-spacing:1px
  }
  .board-watermark {
    right:5%;
    font-size:4px;
    letter-spacing:1px
  }
  .die {
    width:29px;
    height:29px;
    padding:5px;
    gap:1px
  }
  .pip {
    width:4px;
    height:4px
  }
  .dice {
    gap:4px
  }
  .dice-dock>span {
    font-size:4px;
    letter-spacing:1px
  }
  .table-foot {
    font-size:7px;
    letter-spacing:0
  }
  .tip-card {
    padding:16px
  }
  .panel {
    padding:23px
  }
  .title-dot {
    display:none
  }
  dialog {
    padding:22px
  }
}

.invite.compact {
  padding:8px;
  margin:12px 0
}

.invite.compact>strong {
  font-size:17px;
  margin:5px 0;
  letter-spacing:2px
}

.invite.compact>p,.invite.compact>span {
  display:none
}

.invite.compact .text-button {
  min-height:28px;
  padding:4px
}

.board {
  --checker-size:clamp(26px,3vw,40px)
}

.points {
  grid-template-rows:repeat(2,minmax(0,1fr))
}

.point {
  min-height:0
}

.checker {
  width:min(85%,var(--checker-size,40px))
}

@media(max-width:1050px) {
  .board {
    --checker-size:30px
  }
}

@media(max-width:800px) {
  .board {
    --checker-size:clamp(24px,4vw,34px)
  }
}

@media(max-width:480px) {
  .checker {
    width:96%
  }
}

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

html.reduced-motion *,html.reduced-motion *::before,html.reduced-motion *::after {
  transition:none!important;
  animation:none!important
}