:root {
  color-scheme: light;
  font-family: 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  font-synthesis: none;
  --ink: #2f504d;
  --muted: #6b817c;
  --paper: #fffdf7;
  --line: #d7d6bd;
  --green: #5caf80;
  --green-dark: #34785d;
  --gold: #efb846;
  --coral: #ed7768;
  --shadow: 0 18px 44px rgba(66, 91, 81, .15);
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: #eef8ed;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 6% 8%, rgba(242, 189, 75, .19) 0 120px, transparent 122px),
    radial-gradient(circle at 94% 7%, rgba(101, 173, 216, .17) 0 155px, transparent 157px),
    linear-gradient(180deg, #eef9f0 0%, #fff9e9 100%);
}

button { font: inherit; }

button:focus-visible {
  outline: 5px solid rgba(241, 181, 65, .58);
  outline-offset: 4px;
}

.app {
  width: min(1120px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 22px 0 42px;
}

.loading-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(380px, calc(100% - 38px));
  padding: 35px;
  text-align: center;
  background: var(--paper);
  border: 3px solid var(--line);
  border-radius: 34px;
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%);
}

.loading-card span { display: block; font-size: 59px; }
.loading-card p { margin: 10px 0 0; font-weight: 900; }

.topbar {
  position: relative;
  z-index: 30;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 25px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 4px;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.brand-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  font-size: 31px;
  line-height: 1;
  background: #fff8dc;
  border: 3px solid #dfd2aa;
  border-radius: 19px;
  box-shadow: 0 8px 17px rgba(75, 98, 88, .12);
  transform: rotate(-4deg);
}

.brand strong,
.brand small { display: block; }
.brand strong { font-size: clamp(20px, 2.2vw, 28px); font-weight: 900; line-height: 1.04; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 800; }

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.sound-button,
.back-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  color: var(--ink);
  font-weight: 900;
  background: rgba(255,253,247,.9);
  border: 2px solid #d5d5bd;
  border-radius: 17px;
  box-shadow: 0 7px 17px rgba(66, 89, 80, .09);
  cursor: pointer;
}

.sound-button span:first-child { font-size: 20px; }
.back-button { width: 48px; padding: 0; font-size: 25px; }
.top-spark { color: #e4a633; font-size: 25px; animation: twinkle 2.2s ease-in-out infinite; }

.hero {
  position: relative;
  display: grid;
  min-height: 430px;
  align-items: center;
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr);
  gap: clamp(28px, 5vw, 78px);
  overflow: hidden;
  padding: clamp(36px, 5vw, 72px);
  background: linear-gradient(125deg, rgba(255,255,255,.97), rgba(255,247,219,.91));
  border: 3px solid #d9d2b3;
  border-radius: 48px;
  box-shadow: var(--shadow);
}

.hero::before,
.hero::after {
  position: absolute;
  content: '';
  border-radius: 50%;
  pointer-events: none;
}

.hero::before { top: -100px; right: -85px; width: 350px; height: 350px; background: rgba(91, 176, 128, .12); }
.hero::after { bottom: -140px; left: 34%; width: 300px; height: 300px; background: rgba(101, 173, 216, .1); }
.hero-copy,
.hero-board { position: relative; z-index: 2; }

.eyebrow {
  margin: 0 0 9px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

.hero h1 {
  max-width: 720px;
  margin-bottom: 18px;
  font-size: clamp(43px, 5.9vw, 78px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .97;
}

.hero-copy > p:not(.eyebrow) {
  max-width: 660px;
  margin-bottom: 27px;
  color: #5b726d;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.52;
}

.primary-button,
.secondary-button,
.hint-button {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 24px;
  font-weight: 900;
  border-radius: 19px;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.primary-button {
  color: #fff;
  background: linear-gradient(135deg, #55aa7b, #34785d);
  border: 0;
  box-shadow: 0 12px 22px rgba(52, 120, 93, .25);
}

.secondary-button,
.hint-button {
  color: var(--ink);
  background: #fffdf7;
  border: 2px solid #d5d3bc;
  box-shadow: 0 8px 17px rgba(68, 91, 82, .09);
}

.hint-button { color: #7a642b; background: #fff4c7; border-color: #e0ca7c; }
.primary-button:hover,
.secondary-button:hover,
.hint-button:hover { transform: translateY(-2px); }

.hero-board {
  min-height: 330px;
  padding: 12px;
  background: #fff;
  border: 8px solid #fff;
  border-radius: 39px;
  box-shadow: 0 19px 33px rgba(65, 88, 78, .18);
  transform: rotate(1.4deg);
}

.hero-board .build-svg { width: 100%; height: 300px; }

.hero-piece {
  position: absolute;
  display: grid;
  width: 55px;
  height: 55px;
  place-items: center;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  background: var(--piece-bg);
  border: 4px solid #fff;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(57, 82, 72, .2);
  animation: piece-float 2s ease-in-out infinite alternate;
}

.hero-piece.one { --piece-bg:#ef7568; top:24px; left:-22px; }
.hero-piece.two { --piece-bg:#65add8; right:-20px; bottom:35px; animation-delay:-.7s; }
.hero-piece.three { --piece-bg:#f2bd4b; right:22px; top:-24px; animation-delay:-1.3s; }

.how-section,
.album-section { margin-top: clamp(43px, 6vw, 76px); }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
}

.section-heading h2 { margin-bottom: 0; font-size: clamp(31px, 3.8vw, 49px); font-weight: 900; letter-spacing: -.03em; }
.section-heading > p { max-width: 470px; margin-bottom: 4px; color: var(--muted); font-weight: 800; text-align: right; }

.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 23px;
  background: rgba(255,253,247,.83);
  border: 2px solid #d8d6bf;
  border-radius: 25px;
}

.step-number {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  color: #fff;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  background: var(--step, #61b085);
  border: 5px solid rgba(255,255,255,.75);
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--step, #61b085) 70%, #455e56);
}

.step-card:nth-child(2) { --step:#efb847; }
.step-card:nth-child(3) { --step:#ed7768; }
.step-card > span:last-child,
.step-card strong,
.step-card small { display: block; }
.step-card strong { margin-bottom: 3px; font-size: 19px; font-weight: 900; }
.step-card small { color: var(--muted); font-size: 14px; font-weight: 800; line-height: 1.4; }

.album-progress {
  min-width: 115px;
  padding: 11px 17px;
  text-align: center;
  background: rgba(255,255,255,.8);
  border: 2px solid #d5d3bb;
  border-radius: 20px;
}

.album-progress strong,
.album-progress span { display: block; }
.album-progress strong { font-size: 23px; font-weight: 900; }
.album-progress span { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }

.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.project-card {
  position: relative;
  display: grid;
  min-height: 330px;
  grid-template-rows: 205px auto;
  overflow: hidden;
  padding: 18px;
  color: var(--ink);
  text-align: left;
  background: rgba(255,253,247,.91);
  border: 3px solid #d9d3b9;
  border-radius: 30px;
  box-shadow: 0 11px 24px rgba(67, 89, 80, .09);
  cursor: pointer;
  transition: transform 170ms ease, box-shadow 170ms ease;
}

.project-card:hover { transform: translateY(-4px) rotate(-.2deg); box-shadow: 0 17px 30px rgba(67, 89, 80, .15); }
.project-card.completed { border-color: #a9d2b2; }
.project-number {
  position: absolute;
  z-index: 4;
  top: 16px;
  left: 16px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: #5fac82;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #3e7d61;
}

.project-preview { display: grid; min-height: 195px; place-items: center; overflow: hidden; }
.project-preview .build-svg { width: 100%; height: 205px; }
.project-copy { padding: 7px 5px 0; }
.project-copy strong,
.project-copy small { display: block; }
.project-copy strong { font-size: 24px; font-weight: 900; }
.project-copy small { margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 800; }
.project-stars {
  position: absolute;
  right: 20px;
  bottom: 22px;
  color: #d99f2c;
  font-size: 13px;
  font-weight: 900;
}

.parent-tip {
  display: flex;
  max-width: 930px;
  align-items: center;
  gap: 15px;
  margin: 36px auto 0;
  padding: 18px 22px;
  background: rgba(255,255,255,.72);
  border: 2px dashed #c9c9b0;
  border-radius: 22px;
}

.parent-tip > span { font-size: 29px; }
.parent-tip p { margin: 0; color: #627772; font-weight: 800; }
.parent-tip strong { color: var(--ink); }

/* SVG конструктора */
.build-svg { display: block; width: 100%; height: auto; overflow: visible; }
.board-ground { fill: none; stroke: #c9d9c4; stroke-width: 7; stroke-linecap: round; }
.placed-piece .piece-shape,
.mini-piece-svg .piece-shape {
  fill: var(--piece);
  stroke: var(--piece-dark);
  stroke-width: 8;
  stroke-linejoin: round;
}

.placed-piece .piece-shape { filter: drop-shadow(0 8px 7px rgba(54, 78, 69, .16)); animation: snap-in 340ms ease both; }
.piece-slot { cursor: pointer; }
.piece-slot .slot-shape {
  fill: rgba(255,255,255,.78);
  stroke: #879a93;
  stroke-width: 6;
  stroke-dasharray: 13 10;
  stroke-linejoin: round;
  transition: fill 160ms ease, stroke 160ms ease, filter 160ms ease;
}

.piece-slot .slot-dot { fill: #a4b3ac; stroke: #fff; stroke-width: 4; pointer-events: none; }
.piece-slot:hover .slot-shape { fill: rgba(238,247,233,.95); stroke: #5c8975; }
.piece-slot.selected-slot .slot-shape {
  fill: color-mix(in srgb, var(--piece) 19%, white);
  stroke: var(--piece-dark);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--piece) 70%, transparent));
  animation: slot-pulse 1.05s ease-in-out infinite;
}
.piece-slot.selected-slot .slot-dot { fill: var(--piece); }
.piece-slot.hinted .slot-shape { filter: drop-shadow(0 0 15px #efb33d); animation: slot-pulse .6s ease-in-out infinite; }
.piece-slot.wrong-slot { animation: wrong-shake 420ms ease; }
.project-decor { fill: none; stroke: #395651; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.project-decor circle { fill: #395651; stroke: none; }
.project-decor rect { fill: #dff2f5; stroke: #395651; }

/* Игровой экран */
.game-page { max-width: 1340px; margin: 0 auto; }
.game-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 17px;
}
.game-heading h1 { margin-bottom: 5px; font-size: clamp(31px, 4vw, 50px); font-weight: 900; letter-spacing: -.03em; }
.game-heading > div > p:last-child { margin-bottom: 0; color: var(--muted); font-weight: 800; }
.piece-counter {
  min-width: 150px;
  padding: 13px 19px;
  text-align: center;
  background: rgba(255,253,247,.92);
  border: 2px solid #d5d3bc;
  border-radius: 21px;
}
.piece-counter strong,
.piece-counter span { display: block; }
.piece-counter strong { font-size: 25px; font-weight: 900; }
.piece-counter span { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }

.build-layout { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(330px, .62fr); gap: 18px; align-items: stretch; }
.board-card,
.parts-card {
  position: relative;
  background: rgba(255,253,247,.94);
  border: 3px solid #d7d4bc;
  border-radius: 32px;
  box-shadow: 0 14px 30px rgba(64, 87, 78, .12);
}
.board-card { padding: 18px 20px 14px; overflow: hidden; }
.board-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 8px; padding: 0 4px; }
.board-title span { font-size: 18px; font-weight: 900; }
.board-title small { color: var(--muted); font-weight: 800; }
.board-wrap { position: relative; overflow: hidden; border: 3px solid #d6dfcf; border-radius: 25px; background: #fbfdf6; touch-action: none; }
.board-help { margin: 10px 0 0; color: var(--muted); font-size: 13px; font-weight: 900; text-align: center; }

.parts-card { display: flex; min-height: 610px; flex-direction: column; padding: 21px; }
.parts-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.parts-heading h2 { margin-bottom: 0; font-size: 27px; font-weight: 900; }
.parts-heading > span { font-size: 37px; }
.pieces-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.piece-button {
  position: relative;
  display: grid;
  min-height: 136px;
  grid-template-rows: 82px auto;
  align-items: center;
  padding: 7px 8px 10px;
  color: var(--ink);
  text-align: center;
  background: #fbfbf3;
  border: 2px solid #d8d7c4;
  border-radius: 20px;
  cursor: grab;
  touch-action: none;
  transition: transform 150ms ease, border 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.piece-button:hover { transform: translateY(-2px); border-color: #9cbda8; }
.piece-button.selected { background: #eaf7e8; border-color: #59a97a; box-shadow: 0 0 0 4px rgba(83, 170, 122, .18); }
.piece-button:active { cursor: grabbing; }
.mini-piece-svg { display: block; width: 100%; height: 82px; overflow: visible; filter: drop-shadow(0 7px 5px rgba(55, 80, 70, .15)); }
.piece-button span strong,
.piece-button span small { display: block; }
.piece-button span strong { font-size: 14px; font-weight: 900; }
.piece-button span small { overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.empty-box { grid-column: 1 / -1; display: grid; min-height: 180px; place-items: center; align-content: center; gap: 6px; color: var(--green-dark); text-align: center; }
.empty-box span { font-size: 45px; }
.parts-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: auto; padding-top: 18px; }
.parts-actions .secondary-button,
.parts-actions .hint-button { min-height: 49px; padding: 0 12px; font-size: 13px; }
.star-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 12px 14px; background: #f6f7ed; border: 2px solid #dddbc8; border-radius: 17px; }
.star-status strong,
.star-status small { display: block; }
.star-status strong { font-size: 15px; font-weight: 900; }
.star-status small { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.star-status > span:last-child { color: #e3a832; font-size: 21px; letter-spacing: 2px; }

.feedback-toast {
  position: absolute;
  z-index: 20;
  bottom: 52px;
  left: 50%;
  max-width: calc(100% - 35px);
  padding: 11px 19px;
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
  background: #3d8064;
  border: 3px solid rgba(255,255,255,.87);
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(47, 71, 63, .22);
  transform: translateX(-50%);
  animation: toast-pop 1.35s ease both;
  pointer-events: none;
}
.feedback-toast.try { background: #c66a59; }
.feedback-toast.neutral { background: #5c7f86; }
.drag-ghost {
  position: fixed;
  z-index: 1000;
  width: 105px;
  height: 85px;
  pointer-events: none;
  filter: drop-shadow(0 12px 8px rgba(45, 68, 60, .25));
  transform: translate(-50%, -50%) scale(1.08) rotate(3deg);
}
.drag-ghost .mini-piece-svg { width: 105px; height: 85px; }

/* Результат */
.result-card {
  position: relative;
  display: grid;
  min-height: 630px;
  align-items: center;
  grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
  gap: clamp(34px, 6vw, 90px);
  overflow: hidden;
  padding: clamp(38px, 6vw, 78px);
  background: rgba(255,253,247,.96);
  border: 4px solid #d9d2b2;
  border-radius: 48px;
  box-shadow: var(--shadow);
}
.result-card::after { position: absolute; right: -120px; bottom: -160px; width: 440px; height: 440px; content: ''; background: rgba(96, 180, 133, .11); border-radius: 50%; }
.result-copy,
.result-board { position: relative; z-index: 2; }
.result-copy h1 { margin-bottom: 15px; font-size: clamp(45px, 6vw, 77px); font-weight: 900; letter-spacing: -.045em; line-height: .96; }
.result-copy > p:not(.eyebrow) { max-width: 580px; margin-bottom: 20px; color: var(--muted); font-size: 18px; font-weight: 800; line-height: 1.5; }
.result-stars { margin-bottom: 20px; color: #efb43b; font-size: clamp(46px, 6vw, 68px); letter-spacing: 5px; line-height: 1; text-shadow: 0 3px 0 #c48824; }
.result-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
.result-stats > div { min-width: 130px; padding: 12px 15px; background: #eff8ed; border: 2px solid #cbdcc5; border-radius: 17px; }
.result-stats strong,
.result-stats span { display: block; }
.result-stats strong { font-size: 23px; font-weight: 900; }
.result-stats span { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.result-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.result-board { padding: 15px; background: #fff; border: 8px solid #fff; border-radius: 40px; box-shadow: 0 19px 34px rgba(62, 84, 75, .18); transform: rotate(1.25deg); }
.result-board .build-svg { width: 100%; }
.result-pin { position: absolute; z-index: 4; top: -12px; left: 50%; width: 24px; height: 24px; background: #ed7567; border: 5px solid #fff; border-radius: 50%; box-shadow: 0 4px 8px rgba(54, 75, 67, .2); transform: translateX(-50%); }

@keyframes twinkle { 50% { opacity:.45; transform:rotate(25deg) scale(.82); } }
@keyframes piece-float { from { transform:translateY(-5px) rotate(-5deg); } to { transform:translateY(10px) rotate(5deg); } }
@keyframes snap-in { from { opacity:0; transform:scale(.75); } 60% { transform:scale(1.08); } to { opacity:1; transform:scale(1); } }
@keyframes slot-pulse { 50% { opacity:.63; } }
@keyframes wrong-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-10px)} 55%{transform:translateX(9px)} 78%{transform:translateX(-4px)} }
@keyframes toast-pop { 0%{opacity:0;transform:translate(-50%,12px) scale(.88)} 16%,76%{opacity:1;transform:translate(-50%,0) scale(1)} 100%{opacity:0;transform:translate(-50%,-5px) scale(.94)} }

@media (max-width: 1060px) {
  .hero { grid-template-columns: 1fr; }
  .hero-board { min-height: 310px; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .build-layout { grid-template-columns: 1fr; }
  .parts-card { min-height: auto; }
  .pieces-grid { grid-template-columns: repeat(4, 1fr); }
  .parts-actions { margin-top: 10px; }
  .result-card { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .app { width: 100%; padding: 14px 12px 28px; }
  .topbar { min-height: 59px; margin-bottom: 15px; }
  .brand-mark { width: 49px; height: 49px; font-size: 26px; border-radius: 16px; }
  .brand small,
  .sound-button span:last-child { display: none; }
  .sound-button,
  .back-button { width: 46px; min-height: 46px; padding: 0; }
  .hero { min-height: auto; padding: 31px 23px; border-radius: 34px; }
  .hero h1 { font-size: clamp(43px, 14vw, 62px); }
  .hero-board { min-height: 245px; padding: 6px; border-width: 6px; border-radius: 30px; }
  .hero-board .build-svg { height: 230px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 8px; text-align: left; }
  .steps-grid,
  .project-grid { grid-template-columns: 1fr; }
  .step-card { padding: 18px; }
  .project-card { min-height: 315px; }
  .game-heading { align-items: center; }
  .game-heading > div > p:last-child { display: none; }
  .piece-counter { min-width: 105px; padding: 10px; }
  .piece-counter span { font-size: 9px; }
  .board-card { padding: 10px 10px 12px; border-radius: 26px; }
  .board-title small { display: none; }
  .board-wrap { border-radius: 20px; }
  .parts-card { padding: 17px; border-radius: 26px; }
  .pieces-grid { grid-template-columns: repeat(2, 1fr); }
  .piece-button { min-height: 127px; }
  .parts-actions { grid-template-columns: 1fr 1fr; }
  .feedback-toast { bottom: 45px; max-width: calc(100% - 24px); overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
  .result-card { min-height: auto; padding: 32px 22px; border-radius: 34px; }
  .result-board { border-width: 6px; border-radius: 30px; }
  .result-actions .primary-button,
  .result-actions .secondary-button { width: 100%; }
}

@media (max-width: 430px) {
  .brand strong { max-width: 155px; font-size: 17px; }
  .hero-board .build-svg { height: 205px; }
  .game-heading h1 { font-size: 27px; }
  .piece-counter strong { font-size: 20px; }
  .project-card { padding: 15px; }
  .piece-button { min-height: 121px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}