/* Tone — marketing site
   Tokens mirror the "Web Tokens" collection in Figma. */

:root {
  /* colour */
  --bg: #050403;
  --bg-raised: #101010;
  --surface: rgba(255, 255, 255, 0.08);
  --surface-strong: rgba(255, 255, 255, 0.20);
  --border: rgba(255, 255, 255, 0.12);
  /* opaque hairline for section bands */
  --stroke: #2d2d2d;
  --label: #ffffff;
  --label-secondary: rgba(255, 255, 255, 0.60);
  --label-tertiary: rgba(255, 255, 255, 0.35);
  /* Amber only ever means "on" — lit volume ticks, elapsed progress.
     Never use it decoratively. Display-P3 on capable screens, sRGB elsewhere. */
  --accent: #ffaf00;
  /* Used by the keycap's box-shadow only; the remote lights by colour alone. */
  --accent-glow: rgba(255, 175, 0, 0.29);

  /* geometry */
  --radius-card: 28px;
  --radius-key: 9px;
  /* Structural scale sits ~10% below the original draft — the page reads
     tighter, with more air around the content column. Hairlines, radii and
     small paddings are deliberately NOT scaled. */
  --gutter: 86px;
  --measure: 727px;
  --content: 1123px;

  /* type — real SF Pro on Apple hardware; Inter was only a Figma stand-in */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Wider-gamut amber where the display supports it. This block overrides ONLY
   the accent pair — every other token stays in :root above. */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --accent: color(display-p3 1 0.702 0.2471);
  }
}

/* --accent-glow stays sRGB. Across a soft 32px shadow the gamut difference is
   invisible, and it keeps the value safe in any property. */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* lets height/block-size animate to `auto` — used by the FAQ expander */
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- layout ---------- */

.wrap {
  max-width: var(--content);
  margin-inline: auto;
  /* --edge is the gutter, exposed so full-bleed children can cancel it */
  --edge: 24px;
  padding-inline: var(--edge);
}

.section {
  padding-block: 86px;
  text-align: center;
}

.section--tight { padding-block: 58px; }

/* border-block, not border: these bands run full-bleed, so left and right
   edges would render as vertical hairlines at the viewport edges. */
.section--raised {
  background: var(--bg-raised);
  border-block: 1px solid var(--stroke);
}

/* ---------- type ---------- */

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 5.8vw, 4.25rem); }

/* Wider layouts balance the headline themselves; the forced break is phone
   only, so it collapses to a normal space here. */
.phone-break { display: none; }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.25rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.3; }

.lede,
.sub {
  margin: 20px auto 0;
  max-width: var(--measure);
  color: var(--label-secondary);
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.sub { font-size: clamp(0.95rem, 1.65vw, 1.15rem); }

.note {
  margin: 0;
  color: var(--label-tertiary);
  font-size: 0.9375rem;
}

strong { font-weight: 600; color: var(--label); }

/* ---------- nav ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 36px;
}

.nav a { text-decoration: none; }

.brand {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  gap: 36px;
  color: var(--label-secondary);
}

.nav-links a:hover { color: var(--label); }

/* ---------- hero ---------- */

/* Top padding is keyed to viewport height so the product shot still clears the
   fold on a laptop — a fixed value pushed it off-screen entirely at ~800px.
   The bottom stays fixed: it's the gap between the card and the band below,
   which shouldn't collapse just because the window is short. */
.hero {
  /* Top padding is small because the knob above the headline supplies the
     space; without the knob this wants the old clamp(40px, 7vh, 104px). */
  padding-block: 10px 60px;
  text-align: center;
}

/* The artwork carries a #050403 background matching the page, so it blends
   without needing transparency. It rides up under the nav, and the top fades
   out so it reads as emerging from behind the bar rather than being cropped.
   The Figma does this with a gradient rectangle in the page colour; a mask is
   the same result without an extra element sitting over the artwork. */
.hero-knob {
  display: grid;
  place-items: center;
  margin: -50px 0 14px;
  /* Solid at the top, dissolving downward into the page so the dial melts into
     the headline rather than ending on a hard edge. */
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 42%, transparent 97%);
}

.hero-knob img {
  width: clamp(210px, 23vw, 332px);
  height: auto;
  max-width: 100%;
}

.hero-copy { margin-inline: auto; }

.cta { margin-top: clamp(24px, 3vh, 40px); }

/* Apple's official badge. Do not rebuild, recolour or resize the artwork —
   swap the file, keep the required clear space. */
.badge {
  display: inline-block;
  line-height: 0;
  /* clear space: at least 10% of badge height on all sides */
  padding: 8px;
}

.badge img { height: 60px; width: auto; }

/* Full white and a step up from body size: the price is a selling point, not
   supporting detail, and it was reading as fine print at 60%. */
.price {
  margin: 24px 0 0;
  color: var(--label);
  font-size: 1.1875rem;
}

.listing { margin-top: 6px; }

.hero-shot { margin-top: clamp(32px, 5vh, 64px); }

/* Split hero strips are a phone-only treatment; see the 620px block. */
.hero-strip { display: none; }

/* ---------- favorites reveal ---------- */

/* The resting state is the finished composition, so with JS disabled the
   section is simply correct. The offset is only applied once JS marks the
   document, and removed again when the section scrolls into view. */
/* The spring overshoots past its resting point, so the image needs headroom
   above it or the container's top edge clips the card mid-flight. Overflow
   clips at the padding edge, so content is still painted inside this padding —
   the margin is reduced by the same amount to keep the spacing unchanged. */
.reveal-shot {
  overflow: hidden;
  padding-top: 32px;
  margin-top: 32px;
}

.js .reveal-inner {
  transform: translateY(60.3%);
  /* beat before it moves, then a slower spring that still overshoots slightly */
  transition: transform 1150ms cubic-bezier(0.22, 1.28, 0.36, 1) 220ms;
  will-change: transform;
}

.js .reveal-shot.is-visible .reveal-inner { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal-inner {
    transform: none;
    transition: none;
  }
}

/* ---------- feature pair ---------- */

.pair {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: 0 30px;
  align-items: start;
  padding-block: 88px;
}

.pair-rule { background: var(--stroke); align-self: stretch; }

.pair-item { text-align: center; padding-inline: 12px; }

.pair-art {
  display: grid;
  place-items: center;
  min-height: 148px;
  margin-bottom: 30px;
}

/* All three share one height, as in the Figma, so their baselines line up.
   Constraining by max-height alone let the wider transport crop hit the column
   width first and end up shorter than the knob beside it. */
.pair-art img {
  width: auto;
  max-width: 100%;
  height: clamp(112px, 10.7vw, 148px);
  object-fit: contain;
}

/* Slightly larger than the shared h3, since these two headings carry a whole
   section between them rather than labelling a sub-part of one. */
.pair-item h3 {
  margin-bottom: 14px;
  font-size: 1.45rem;
}

/* Sized so all three descriptions land on two lines. 20px is the largest that
   fits, but the longest one breaks to three at exactly that size, so this sits
   one step below to leave room for a copy edit. */
.pair-item p {
  margin: 0 auto;
  max-width: 26ch;
  color: var(--label-secondary);
  font-size: 1.1875rem;
  line-height: 1.5;
}

/* ---------- controls table ---------- */

/* Raised band, matching the two-up section. The remote runs past the bottom of
   the layout box and is clipped at the band's edge rather than floating over
   the section below. */
.controls-section {
  position: relative;
  overflow: hidden;
  background: var(--bg-raised);
  border-block: 1px solid var(--stroke);
  padding-bottom: 0;
}

/* The table is sized to its content and the pair is centred as a unit, rather
   than the table stretching to 1fr. Filling the column left each row with a
   long empty tail, and pushed the module off-centre from the heading above. */
.controls-layout {
  display: grid;
  grid-template-columns: 188px auto;
  gap: 64px;
  justify-content: center;
  align-items: start;
  margin-top: 42px;
}

.controls-column { width: min(100%, 552px); }

/* Runs past the section's bottom edge and is clipped there. The negative
   bottom margin keeps that overhang out of the layout height. */
.remote {
  position: relative;
  z-index: 1;
  margin-bottom: -225px;
  /* purely visual nudge — transform keeps it out of the layout */
  transform: translateY(-14px);
  pointer-events: none;
}

.remote-svg {
  width: 188px;
  max-width: 100%;
  height: auto;
  display: block;
  color: var(--label);
}

/* Tier 1 — buttons tvOS reserves for the system. Always dimmed, so the
   illustration never points at a control Tone can't receive. */
#home_button,
#mute_button,
#volume_button { color: var(--label-tertiary); }

/* Tier 2 — everything Tone does use inherits full white from .remote-svg. */

/* Tier 3 — the row under the pointer lights up. :has() keeps this in CSS with
   no listener; the highlight is transient, so amber still reads as "on". */
/* The remote lights by colour alone, with no glow. WebKit does not render a
   CSS filter on SVG child elements, so drop-shadow here appeared in Chromium
   and silently did nothing in Safari. An SVG-filter version worked in both but
   could only manage a soft halo, not the tight core drop-shadow gives — worse
   everywhere in exchange for consistency. Dropping the glow from the remote is
   consistent AND avoids the compromise. The keycaps keep theirs: they use
   box-shadow, which is on a reliable path in every engine.

   Asymmetric timings: this is the COOL-DOWN, slow so the colour lingers as the
   pointer leaves. The lit rule below overrides with a much faster attack. */
.remote-svg [id] {
  transition:
    color 320ms ease-out,
    opacity 320ms ease-out;
}

/* Two ways in: hover on a pointer, and [data-active] set by tapping a row.
   Same appearance either way, so a sticky emulated hover after a tap is
   harmless rather than something to guard against. */
.controls-layout:has([data-btn="updown"]:hover) :is(#up_dot, #down_dot),
.controls-layout:has([data-btn="leftright"]:hover) :is(#left_dot, #right_dot),
.controls-layout:has([data-btn="select"]:hover) #inner_ring,
.controls-layout:has([data-btn="playpause"]:hover) #play_pause_button,
.controls-layout:has([data-btn="hold"]:hover) #play_pause_button,
.controls-layout:has([data-btn="back"]:hover) #back_button,
.controls-layout[data-active="updown"] :is(#up_dot, #down_dot),
.controls-layout[data-active="leftright"] :is(#left_dot, #right_dot),
.controls-layout[data-active="select"] #inner_ring,
.controls-layout[data-active="playpause"] #play_pause_button,
.controls-layout[data-active="hold"] #play_pause_button,
.controls-layout[data-active="back"] #back_button {
  color: var(--accent);
  /* Fast attack: lit within ~110ms so pointing at a row feels answered. */
  transition: color 110ms ease-out;
}

/* Holding is a longer press, so the button pulses rather than simply lighting. */
.controls-layout:has([data-btn="hold"]:hover) #play_pause_button,
.controls-layout[data-active="hold"] #play_pause_button {
  animation: hold-pulse 1.1s ease-in-out infinite;
}

@keyframes hold-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* Raise the hovered row only — dimming the other five made the whole table
   flicker as the pointer crossed it. */
/* Rows only become interactive once the script upgrades them, so without JS
   they stay a plain description list rather than advertising a role they
   cannot fulfil. */
.js .control-row { cursor: pointer; -webkit-tap-highlight-color: transparent; }

.control-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  border-radius: 6px;
}

.control-row:hover .key,
.control-row.is-active .key {
  background: var(--accent);
  border-color: transparent;
  color: #1a1206;
  box-shadow: 0 4px 32.5px 14px var(--accent-glow);
  transition:
    background-color 110ms ease-out,
    border-color 110ms ease-out,
    color 110ms ease-out,
    box-shadow 170ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .remote-svg [id] { transition: none; }
  .key { transition: none; }
  .controls-layout:has([data-btn="hold"]:hover) #play_pause_button { animation: none; }
  .faq details::details-content { transition: none; }
}

.controls {
  margin: 24px 0 0;
  /* was a translucent black that only read against the wood */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-align: left;
}

/* centred under the card rather than aligned to its left edge */
.controls-note {
  margin: 18px auto 0;
  padding-inline: 4px;
  text-align: center;
  max-width: 62ch;
  line-height: 1.5;
}


.controls dl { margin: 0; }

.control-row {
  display: grid;
  grid-template-columns: 154px 1fr;
  gap: 20px;
  align-items: center;
  padding: 13px 24px;
}

/* inset hairline, aligned to the keycap — matches the Figma component */
.control-row + .control-row { position: relative; }

.control-row + .control-row::before {
  content: "";
  position: absolute;
  inset-inline: 24px 0;
  top: 0;
  height: 1px;
  background: var(--border);
}

.key {
  justify-self: start;
  margin: 0;
  padding: 6px 11px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-key);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  /* transparent at rest so the lit shadow has something to interpolate from */
  box-shadow: 0 4px 32.5px 14px transparent;
  /* cool-down timings; the lit rule below overrides with a faster attack */
  transition:
    background-color 320ms ease-out,
    border-color 320ms ease-out,
    color 280ms ease-out,
    box-shadow 420ms ease-out;
}

.control-row dd { margin: 0; font-size: 1rem; }

/* ---------- faq ---------- */

.faq {
  max-width: 792px;
  margin: 48px auto 0;
  text-align: left;
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq details:last-child { border-bottom: 0; }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--label-tertiary);
  border-bottom: 2px solid var(--label-tertiary);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(225deg) translate(-3px, -3px);
}

.faq p {
  margin: 0 0 28px;
  max-width: 68ch;
  color: var(--label-secondary);
}

/* Expand/collapse. ::details-content is the only way to animate a <details>
   without JavaScript; interpolate-size lets height animate to `auto` rather
   than a guessed max-height. Browsers without support just open instantly. */
.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    block-size 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease,
    content-visibility 280ms allow-discrete;
}

.faq details[open]::details-content {
  block-size: auto;
  opacity: 1;
}

/* ---------- closing cta ---------- */

.closing {
  max-width: 792px;
  margin-inline: auto;
  padding: 88px 60px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.closing h2 { margin-bottom: 20px; }

/* ---------- prose (support / privacy) ---------- */

/* shares the prose measure so the heading aligns with the body copy */
.page-head {
  max-width: 720px;
  margin-inline: auto;
  padding-block: 72px 8px;
}

.page-head h1 { font-size: clamp(2.1rem, 5vw, 3.25rem); }

.page-head .lede {
  margin-inline: 0;
  max-width: 100%;
}

/* Support and Privacy are long-form reading, so they keep the larger body size
   and wider measure. "Tighter" is a marketing-page virtue and a
   documentation-page liability. */
.prose {
  max-width: 720px;
  margin-inline: auto;
  padding-block: 32px 96px;
  font-size: 19px;
}

.prose h2 {
  margin-top: 56px;
  margin-bottom: 14px;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.prose h2:first-of-type { margin-top: 24px; }

.prose p { margin: 0 0 20px; color: var(--label-secondary); }

.prose ul { margin: 0 0 20px; padding-left: 20px; color: var(--label-secondary); }

.prose li { margin-bottom: 10px; }

.prose a { color: var(--label); text-underline-offset: 3px; }

.prose .updated { color: var(--label-tertiary); font-size: 0.9375rem; }

.callout {
  margin: 0 0 28px;
  padding: 24px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.callout p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */

/* The footer itself is full width so its top rule spans the whole viewport,
   but the content inside stays on the same column as every other section. */
.footer {
  border-top: 1px solid var(--border);
  padding-block: 48px 72px;
}

/* Mirrors .wrap exactly — same max-width and same gutter — so the footer text
   lines up with the sections above rather than sitting 24px wider. */
.footer > * {
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--edge, 24px);
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

.footer-links {
  display: flex;
  gap: 36px;
  color: var(--label-secondary);
}

.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--label); }

/* Product requirement rather than a legal notice, so it sits a shade brighter
   than the trademark block beneath it. */
.footer .requires {
  margin: 0 auto 22px;
  color: var(--label-secondary);
  font-size: 0.9375rem;
}

.legal { color: var(--label-tertiary); font-size: 0.9375rem; line-height: 1.55; }
.legal p { margin: 0 0 10px; }
.legal p:last-child { margin-bottom: 0; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .section { padding-block: 72px; }

  .pair {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .pair-rule { display: none; }

  /* Stacked, each image should read as belonging to the heading beneath it.
     The 148px min-height centred the smaller art with slack above and below,
     which on top of the 30px margin left a gap wider than the one separating
     one feature from the next. */
  .pair-art {
    min-height: 0;
    margin-bottom: 12px;
  }

  /* Stacked, each image has the full column rather than a third of it. 160px
     keeps roughly the same art-to-column proportion the desktop layout has,
     where 148px art sits in a 317px column. */
  .pair-art img { height: 160px; }

  /* No room for the remote beside the table — stack it, shrink it, and drop
     the overhang, which only reads as intentional in the two-column layout. */
  /* No gap: the remote's faded lower edge should run straight into the table
     rather than floating above it with a visible break. */
  .controls-layout {
    grid-template-columns: 1fr;
    gap: 0;
    justify-items: center;
    padding-left: 0;
  }

  /* Every button sits in the top ~65% of the remote; the rest is blank
     aluminium. On a phone that empty third is ~150px of scrolling for no
     information, so crop it and fade the cut so it reads as intentional. */
  .remote {
    margin-bottom: 0;
    transform: none;
    height: 282px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 97%);
    mask-image: linear-gradient(to bottom, #000 66%, transparent 97%);
  }

  /* NB: targets .remote-svg, not .remote img. The remote became inline SVG, so
     an img selector silently matched nothing and it rendered at full size. */
  .remote-svg { width: 124px; }
  .controls-column { width: 100%; }
  .controls { margin-top: 0; width: 100%; }
  .controls-note { text-align: center; max-width: none; }
  .controls-section { padding-bottom: 72px; }

  /* Keycap and action stay on one line. Stacking them doubled the row height
     and pushed each action away from the key it belongs to. */
  .control-row {
    grid-template-columns: auto 1fr;
    gap: 14px;
    padding: 14px 20px;
  }

  .control-row + .control-row::before { inset-inline: 20px 0; }

  .faq summary { font-size: 1.1875rem; }

  .closing { padding: 64px 28px; }
}

/* Below this width the 1248px screenshots shrink until the UI inside them is
   illegible. Instead of scaling them down or making them scroll, they keep a
   readable size and run off the right gutter, the same treatment as the hero
   bar. Clipped by the container, so the page body never scrolls sideways. */
@media (max-width: 760px) {
  .hero-shot {
    overflow: hidden;
    margin-right: calc(var(--edge, 24px) * -1);
  }

  .hero-shot img {
    width: 760px;
    max-width: none;
    height: auto;
  }
}

@media (max-width: 620px) {
  .nav { padding-block: 20px; }
  .nav-links { gap: 24px; }

  /* Phone screens lose ~180px to browser chrome, so the hero is tightened
     until the Now Playing card clears the fold. A fixed 88px top here was
     overriding the viewport-aware clamp and leaving only a sliver visible. */
  .hero { padding-block: 10px 44px; }

  /* Above the dial only — the gap beneath it stays at the base 14px. No
     negative pull here: the nav links sit close to centre at this width, so
     riding up under the bar puts the dial's top ticks into "Support". */
  .hero-knob { margin-top: 6px; }

  /* Fits on one line at this width; 18px needs tighter tracking to make it. */
  .hero .price { font-size: 1.0625rem; }

  /* Two lines rather than three, breaking after "remote". 32px is the largest
     that lets the longer line fit; balance is off so the explicit break wins. */
  .hero h1 {
    font-size: 2rem;
    text-wrap: initial;
  }

  .hero h1 .phone-break { display: inline; }

  /* Kept tight so the strip clears the fold on a phone, where browser chrome
     takes ~180px of the viewport. */
  .hero .lede { margin-top: 14px; }
  .hero .cta { margin-top: 18px; }
  .hero .price { margin-top: 16px; }

  /* Only the hero's own shot is replaced by .hero-strip below. Scoped to .hero
     because .hero-shot is shared with the Favorites reveal and the speakers
     list, and an unscoped rule here hid all three. */
  .hero > .hero-shot { display: none; }

  /* The window is one card-height tall, so the image keeps its real proportions
     and simply runs off the right edge instead of being scaled down to fit. The
     card's own rounded corners come from the artwork, so no radius is needed. */
  .hero-strip {
    display: block;
    height: 132px;
    overflow: hidden;
    margin: 30px calc(var(--edge, 24px) * -1) 0 0;
  }

  .hero-strip img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
  }

  .footer-row { flex-direction: column; align-items: flex-start; gap: 20px; }
}

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