/* =========================================================================
   Come lo dici — component styles.
   Ported from docs/plan/mockups/components.css (the approved visual contract)
   with the tutor, missing-voice note, offline banner and mock chrome removed
   (tutor deferred out of v1; no banner by owner decision). App-only additions
   (marker symbol classes, audio notes, report form, tab note) are in app.css.
   Phone-first; tablet >= 768px; desktop >= 1100px; reduced motion at the end.
   ========================================================================= */

/* ---- Reset / base -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-teal);
  /* Spec §12: teal #0A3A51 shading into #10556E. */
  background: linear-gradient(180deg, var(--teal-deep) 0%, var(--teal) 78%) fixed;
  background-color: var(--teal-deep);
  overflow-x: hidden;
  --focus: var(--focus-on-teal);
}
button,
input,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
img,
svg {
  display: block;
}
p {
  margin: 0;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: inherit;
}
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
}

/* Visible keyboard focus everywhere; colour swaps with the surface. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) {
  outline: none;
}
/* Programmatic focus targets (the verdict) are not controls: no ring. */
[tabindex='-1']:focus {
  outline: none;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon--sm {
  width: 18px;
  height: 18px;
}

/* ---- Page frame --------------------------------------------------------- */
.app {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: calc(var(--safe-top) + var(--s-4)) max(var(--gutter), var(--safe-right))
    calc(var(--safe-bottom) + var(--s-7)) max(var(--gutter), var(--safe-left));
}

/* ---- Decoration: glow + waves (never intercept taps) -------------------- */
.deco-glow {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  top: -38vmax;
  right: -34vmax;
  width: 86vmax;
  height: 86vmax;
  /* A low sun over the water: lemon fading through peach into nothing. */
  background: radial-gradient(
    circle at center,
    rgba(255, 226, 170, 0.16) 0%,
    rgba(240, 160, 90, 0.07) 30%,
    rgba(240, 160, 90, 0) 62%
  );
}
.deco-waves {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  overflow: hidden;
}
/* Each layer is one tile wider than the viewport and slides by exactly one
   tile with transform (compositor only, no repaint), so the loop is seamless. */
.wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% + var(--tile));
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: var(--tile) 100%;
  will-change: transform;
  animation: wave-x var(--dur) linear infinite;
}
.is-doc-hidden .wave {
  animation-play-state: paused;
} /* set by the app on visibilitychange */
@keyframes wave-x {
  to {
    transform: translateX(calc(-1 * var(--tile)));
  }
}
/* Three layers, each a different tone, height and drift speed = parallax. */
.wave--back {
  height: 88%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='120' viewBox='0 0 900 120' preserveAspectRatio='none'%3E%3Cpath d='M0 46 Q112 18 225 46 T450 46 T675 46 T900 46 V120 H0Z' fill='%23136079' fill-opacity='.55'/%3E%3C/svg%3E");
  --tile: 900px;
  --dur: 90s;
}
.wave--mid {
  height: 70%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='120' viewBox='0 0 640 120' preserveAspectRatio='none'%3E%3Cpath d='M0 52 Q80 28 160 52 T320 52 T480 52 T640 52 V120 H0Z' fill='%230A3A51' fill-opacity='.7'/%3E%3Cpath d='M0 52 Q80 28 160 52 T320 52 T480 52 T640 52' fill='none' stroke='%23F6EAD4' stroke-opacity='.14' stroke-width='1.5'/%3E%3C/svg%3E");
  --tile: 640px;
  --dur: 60s;
  animation-direction: reverse;
}
.wave--front {
  height: 46%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='120' viewBox='0 0 420 120' preserveAspectRatio='none'%3E%3Cpath d='M0 58 Q52 34 105 58 T210 58 T315 58 T420 58 V120 H0Z' fill='%23072C3E' fill-opacity='.85'/%3E%3C/svg%3E");
  --tile: 420px;
  --dur: 38s;
}

/* ---- Masthead ----------------------------------------------------------- */
.masthead {
  display: grid;
  gap: var(--s-2);
}
.wordmark {
  position: relative;
  justify-self: start;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2.125rem;
  line-height: 1;
  letter-spacing: -0.015em;
  font-variation-settings:
    'opsz' 144,
    'SOFT' 100;
  color: var(--paper);
  padding-bottom: 10px;
}
.wordmark a {
  text-decoration: none;
}
/* Hand-drawn underline: an inline SVG path, stroke in a category accent. */
.wordmark__underline {
  position: absolute;
  left: -2px;
  right: -6px;
  bottom: -2px;
  width: calc(100% + 8px);
  height: 14px;
  overflow: visible;
  color: var(--cat-everyday);
}
.subtitle {
  color: var(--on-teal-soft);
  font-size: 0.9375rem;
  line-height: 1.35;
}

/* ---- Progress board: 15 awnings on poles over a strip of ground -------- */
.board {
  margin-top: var(--s-5);
}
.board__row {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  column-gap: 2px;
  align-items: end;
  height: 46px;
  padding: 0 2px;
}
.marker {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  /* Unvisited: barely there. */
  --awn-a: rgba(246, 234, 212, 0.9);
  --awn-b: rgba(246, 234, 212, 0.25);
  --pole: rgba(246, 234, 212, 0.8);
  opacity: 0.3;
}
.marker svg {
  width: 100%;
  max-width: 22px;
  height: 44px;
  transform-origin: 50% 100%;
}
.marker.is-yes {
  --awn-a: var(--plant-yes-a);
  --awn-b: var(--plant-yes-b);
  --pole: var(--paper);
  opacity: 1;
}
.marker.is-no {
  --awn-a: var(--plant-no-a);
  --awn-b: var(--plant-no-b);
  --pole: var(--paper);
  opacity: 1;
}
/* Current ("you are here"): paper stripes only, so it can never be mistaken
   for a right/wrong marker in any category. The category colour lives on the
   pole alone. Raised and glowing. */
.marker.is-current {
  opacity: 1;
  --awn-a: var(--paper);
  --awn-b: var(--paper-light);
  --pole: var(--cat);
  --lift: -6px;
}
/* Answered but still on screen: keeps its result stripes, the lift and the pole. */
.marker.is-current.is-yes {
  --awn-a: var(--plant-yes-a);
  --awn-b: var(--plant-yes-b);
}
.marker.is-current.is-no {
  --awn-a: var(--plant-no-a);
  --awn-b: var(--plant-no-b);
}
.marker.is-current svg {
  transform: translateY(var(--lift));
  filter: drop-shadow(0 0 5px rgba(246, 234, 212, 0.45));
}
/* The plant: drop in, overshoot, settle at the marker's lift. */
.marker.is-planting svg {
  animation: plant 760ms var(--ease-spring) both;
}
@keyframes plant {
  0% {
    transform: translateY(calc(var(--lift, 0px) - 18px)) scaleY(0.72);
    opacity: 0;
  }
  45% {
    transform: translateY(calc(var(--lift, 0px) + 2px)) scaleY(1.1);
    opacity: 1;
  }
  68% {
    transform: translateY(calc(var(--lift, 0px) - 3px)) scaleY(0.96);
  }
  84% {
    transform: translateY(calc(var(--lift, 0px) + 1px)) scaleY(1.02);
  }
  100% {
    transform: translateY(var(--lift, 0px));
  }
}
.board__ground {
  height: 9px;
  margin-top: -1px;
  border-radius: 2px;
  border-top: 1.5px solid rgba(246, 234, 212, 0.45);
  /* A pavement strip: faint setts in paper over the teal. */
  background:
    repeating-linear-gradient(90deg, rgba(6, 30, 42, 0.35) 0 1px, transparent 1px 13px),
    linear-gradient(rgba(246, 234, 212, 0.16), rgba(246, 234, 212, 0.06));
}

/* ---- Status line -------------------------------------------------------- */
.status {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  font-size: 0.9375rem;
}
.status__where {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.status__score {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--on-teal);
}
.status__score .icon {
  color: var(--cat-everyday);
  width: 18px;
  height: 18px;
}
.btn-round {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-round);
  border: 1.5px solid rgba(246, 234, 212, 0.6);
  background: transparent;
  color: var(--paper);
  text-decoration: none;
  transition:
    background var(--dur-fast),
    transform var(--dur-fast);
}
@media (hover: hover) {
  .btn-round:hover {
    background: rgba(246, 234, 212, 0.1);
  }
}
.btn-round:active {
  transform: scale(0.94);
}
.btn-round:disabled,
.btn-round[aria-disabled='true'] {
  opacity: 0.35;
  cursor: default;
  background: none;
  transform: none;
}

/* ---- Paper card --------------------------------------------------------- */
.card {
  --focus: #10556e;
  position: relative;
  isolation: isolate;
  margin-top: var(--s-5);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-sheet);
  box-shadow: var(--shadow-sheet);
  animation: rise var(--dur-rise) var(--ease-out) both;
}
/* Grain + a faint vignette at the edges, like uncoated stock. */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    var(--grain),
    radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(160, 120, 70, 0.1) 100%);
  opacity: 0.55;
  mix-blend-mode: multiply;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--paper-edge);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
/* A question restored by Back is shown as it was, not "again" (§9.2). */
.card.is-restored,
.is-restored .explain,
.is-restored .marker svg {
  animation: none;
}

/* The striped awning band across the top of each card. */
.awning {
  position: relative;
  height: 38px;
  filter: drop-shadow(0 3px 1.5px rgba(14, 40, 54, 0.22));
}
.awning::before {
  /* the rod the cloth hangs from */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  z-index: 1;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: color-mix(in srgb, var(--cat) 55%, var(--ink));
}
.awning__cloth {
  height: 100%;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.06) 70%),
    repeating-linear-gradient(90deg, var(--cat) 0 22px, var(--paper-light) 22px 44px);
  /* Scalloped hem: one half-disc per stripe, so each scallop stays one colour. */
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat,
    radial-gradient(circle at 11px 0, #000 10.5px, transparent 11px) bottom left / 22px 11px
      repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat,
    radial-gradient(circle at 11px 0, #000 10.5px, transparent 11px) bottom left / 22px 11px
      repeat-x;
}
.awning--round {
  /* results: every category takes a stripe */
  --stripes: repeating-linear-gradient(
    90deg,
    var(--cat-smalltalk) 0 22px,
    var(--paper-light) 22px 44px,
    var(--cat-food) 44px 66px,
    var(--paper-light) 66px 88px,
    var(--cat-out) 88px 110px,
    var(--paper-light) 110px 132px,
    var(--cat-shopping) 132px 154px,
    var(--paper-light) 154px 176px,
    var(--cat-home) 176px 198px,
    var(--paper-light) 198px 220px,
    var(--cat-everyday) 220px 242px,
    var(--paper-light) 242px 264px
  );
}
.awning--round .awning__cloth {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.06) 70%), var(--stripes);
}
.awning--round::before {
  background: var(--ink);
}
.awning--muted {
  --cat: var(--paper-edge);
}
.awning--muted::before {
  background: #b9a585;
}

.card__body {
  padding: 16px 16px var(--s-5);
} /* phone: 16px inside, nothing wasted */

/* Answered card: one column on phones and tablets, two on desktop (see bottom).
   Three grid children in §9.4 order: stick (prompt, options, verdict) > lead (said, answer) > side (4-10). */
.card__grid {
  display: grid;
  row-gap: var(--s-6);
}
.card__stick,
.explain--lead,
.explain--side {
  min-width: 0;
}
.card__stick > .verdict {
  margin-top: var(--s-6);
  animation: rise var(--dur-rise) 80ms var(--ease-out) both;
}
.is-restored .card__stick > .verdict {
  animation: none;
}
/* The grid's row-gap is the only spacing between the three children: .explain's own margin-top (declared later
   in this file, same specificity) is for the single-column flow it also lives in and would double the gap here,
   so the child selector outranks it. */
.card__grid > .explain--lead,
.card__grid > .explain--side {
  margin-top: 0;
}

/* ---- Real content never widens its box ------------------------------------------------- */
/* Long words, phonetics, keys or pasted tokens break inside their own box instead of pushing
   a grid track, a flex row or the page wider (design review 2026-09-28). */
.prompt,
.option__text,
.verdict__line,
.said__it,
.said__means,
.answer-it,
.phon,
.literal,
.prose,
.ojo__title,
.words dd,
.alts__it,
.alts__note,
.review__it,
.review__es,
.status__where,
.subtitle {
  min-width: 0;
  overflow-wrap: anywhere;
}
.review__item > div {
  min-width: 0;
}
.cat-chip {
  max-width: 100%;
}
.status {
  flex-wrap: wrap;
}

/* ---- Question ----------------------------------------------------------- */
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 8px;
  border-radius: var(--r-tag);
  background: var(--cat-tint);
  border: 1px solid color-mix(in srgb, var(--cat) 75%, var(--ink));
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.cat-chip .icon {
  width: 19px;
  height: 19px;
}
.ask {
  margin-top: var(--s-4);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.prompt {
  margin: 2px 0 var(--s-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-prompt);
  line-height: var(--lh-tight);
  letter-spacing: -0.012em;
  font-variation-settings:
    'opsz' 96,
    'SOFT' 50;
  text-wrap: balance;
}

.options {
  display: grid;
  gap: 10px;
}
.option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 14px 16px;
  text-align: left;
  background: var(--paper-light);
  color: var(--ink);
  border: 1.5px solid var(--option-edge); /* 3.04:1 on paper-light: visible in sunlight */
  border-radius: var(--r-control);
  box-shadow: var(--shadow-raise);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast),
    background var(--dur-mid),
    border-color var(--dur-mid),
    opacity var(--dur-mid);
}
.option__body {
  display: flex;
  flex-wrap: wrap; /* the tag drops below a long option instead of pushing it out (le-mob-09) */
  align-items: baseline;
  gap: 4px 12px;
  flex: 1;
  min-width: 0;
}
.option__text {
  min-width: 0;
}
/* Lift only where hover exists, or it sticks after a tap on iOS. */
@media (hover: hover) {
  .option:hover {
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 var(--paper-edge),
      0 10px 18px -10px rgba(10, 58, 81, 0.55);
  }
}
.option:active {
  transform: translateY(0) scale(0.985);
  box-shadow: var(--shadow-press);
}
.option__badge {
  display: inline-grid;
  place-items: center;
  /* rem, not px: at 200 % text the letter grows and must stay inside its ring (le-mob-09). */
  width: 2.125rem;
  height: 2.125rem;
  flex: none;
  border-radius: var(--r-round);
  border: 1.5px solid var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
}
.option__badge .icon {
  /* rem, like the badge, so the mark grows with the text (FINDING-005) */
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2.4;
}
/* Locked after answering */
.options.is-locked .option {
  cursor: default;
  transform: none;
  box-shadow: none;
}
.option.is-correct {
  background: var(--ok-tint);
  border-color: var(--ok);
}
.option.is-correct .option__badge {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--paper);
}
.option.is-wrong {
  background: var(--no-tint);
  border-color: var(--no);
}
.option.is-wrong .option__badge {
  background: var(--no);
  border-color: var(--no);
  color: #fff;
}
.option.is-faded {
  opacity: 0.6;
} /* ≈4.07:1 for the faded label */
.option__tag {
  margin-left: auto;
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
}
/* Narrow phones: the tag drops under the option text instead of squeezing it. */
@media (max-width: 379px) {
  .option__body {
    flex-direction: column;
    align-items: flex-start;
  }
  .option__tag {
    margin-left: 0;
  }
}
.is-correct .option__tag {
  color: var(--ok-ink);
}
.is-wrong .option__tag {
  color: var(--no-ink);
}

/* ---- Explanation -------------------------------------------------------- */
.explain {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-6);
  animation: rise var(--dur-rise) 80ms var(--ease-out) both;
}
.explain > section {
  min-width: 0;
  /* Each part lays itself out by the width it actually gets (a phone, the tablet card, the
     narrower desktop right column, the editorial review page), never by the viewport. */
  container: part / inline-size;
}

/* Section labels (spec §12): small, uppercase, widely tracked, mono,
   with a hairline running to the right edge. */
.label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(14, 40, 54, 0.22);
}

.verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-control);
}
.verdict__badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-round);
}
.verdict__badge .icon {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}
.verdict__line {
  hyphens: auto; /* «hispano-hablante», not «hispanohabl|ante», at 200 % text (FINDING-004) */
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 500;
  font-variation-settings:
    'opsz' 24,
    'SOFT' 100;
}
/* Warm when right */
.verdict--yes {
  background: color-mix(in srgb, var(--cat-everyday) 38%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--cat-everyday) 70%, var(--paper-edge));
}
.verdict--yes .verdict__badge {
  background: var(--ok);
  color: var(--paper);
}
/* Light when wrong: no alarm colour on the panel, only on the small badge */
.verdict--no {
  background: var(--paper-light);
  border: 1px solid var(--paper-edge);
}
.verdict--no .verdict__badge {
  background: var(--paper);
  color: var(--no-ink);
  border: 1.5px solid var(--no);
}

/* Set apart by a hanging coral « rather than a coloured side bar. */
.said {
  position: relative;
  margin: 0;
  padding-left: 1.625rem; /* the «« gutter grows with the text (le-mob-09) */
}
.said__it::before {
  content: '«';
  position: absolute;
  left: 0;
  top: -0.1em;
  font-size: 2.25rem;
  line-height: 1;
  font-weight: 600;
  color: var(--no);
}
.said__it {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.2;
  font-variation-settings:
    'opsz' 36,
    'SOFT' 50;
  color: var(--ink);
}
.said__means {
  margin-top: 6px;
  color: var(--ink);
}

.answer-it {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-answer);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variation-settings:
    'opsz' 96,
    'SOFT' 50;
}
.phon {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.audio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s-4);
}
.btn-audio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border-radius: var(--r-round);
  border: 1.5px solid var(--ink);
  background: var(--paper-light);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  transition:
    opacity var(--dur-mid),
    transform var(--dur-fast);
}
@media (hover: hover) {
  .btn-audio:hover {
    background: #fff8ea;
  }
}
/* Offline and not cached: the control says so itself; nothing else on the page changes. */
.btn-audio.is-unavailable {
  border-style: dashed;
  border-color: var(--ink-soft);
  color: var(--ink);
  background: transparent;
  /* Still a button: a tap retries. */
  cursor: pointer;
}
.btn-audio.is-unavailable .icon {
  color: var(--ink-soft);
}
.btn-audio:active {
  transform: scale(0.97);
}
/* While speaking, the control that started it is visibly dimmed (spec §10). */
.btn-audio.is-playing,
.btn-say.is-playing {
  opacity: 0.42;
}
.is-playing .wave-a {
  animation: ping 900ms ease-in-out infinite;
}
.is-playing .wave-b {
  animation: ping 900ms 150ms ease-in-out infinite;
}
@keyframes ping {
  50% {
    opacity: 0.15;
  }
}

.literal {
  margin-top: var(--s-3);
  font-style: italic;
  color: var(--ink-soft);
}
.literal__k {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  margin-right: 2px; /* plus the space that follows it */
}

/* Marker-pen highlight: slightly ragged ends, sits low on the x-height. */
.hl {
  padding: 0 0.26em;
  margin: 0 -0.06em;
  border-radius: 0.7em 0.25em 0.8em 0.3em;
  background-image: linear-gradient(
    100deg,
    color-mix(in srgb, var(--cat-hl) 30%, transparent) 0%,
    var(--cat-hl) 5%,
    color-mix(in srgb, var(--cat) 30%, var(--paper)) 92%,
    color-mix(in srgb, var(--cat-hl) 20%, transparent) 100%
  );
  background-size: 100% 76%;
  background-position: 0 72%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The word column sizes to the longest word (fit-content, capped at 40%) and
   stays aligned across rows through subgrid. Words over 8 letters stack. */
.words {
  margin: 0;
  display: grid;
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  column-gap: 14px;
}
.words__row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 2px;
  padding: 12px 0;
  border-top: 1px dashed rgba(14, 40, 54, 0.2);
}
.words dt {
  overflow-wrap: break-word;
  hyphens: auto;
} /* column = longest word, max 40%; a word too long for it hyphenates (lang="it"), never splits
     one letter off (le-mob-10) */
.words__row.is-long > * {
  grid-column: 1 / -1;
}
.words__row:first-child {
  border-top: 0;
  padding-top: 2px;
}
.words dt {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
  font-variation-settings:
    'opsz' 36,
    'SOFT' 50;
}
.words dd {
  margin: 0;
  line-height: 1.4;
}
.words__mean {
  font-weight: 600;
}
.words__gram {
  display: block;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* One measure for all running text. */
.prose,
.alts__note,
.said__means,
.band-copy,
.terminal p {
  max-width: 66ch;
}
.prose + .prose {
  margin-top: var(--s-3);
}
.prose i,
.prose em {
  font-style: italic;
}

.conj {
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-tag);
  background: var(--paper-light);
  /* The table lays itself out by its own width, not the viewport's: it sits in the learner's
     full-width card, in the narrower desktop columns and in the editorial review page. */
  container: conj / inline-size;
}
.conj__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--paper-edge);
}
.conj__verb {
  min-width: 0;
  overflow-wrap: anywhere; /* a long infinitive at 200 % text stays inside the table (r3-le-02) */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  font-variation-settings:
    'opsz' 48,
    'SOFT' 100;
}
.conj__tense {
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.conj__rows {
  display: grid;
}
.conj__row {
  /* Form first, translation right-aligned on the same line when both fit; otherwise the
     translation drops below as a whole line (never one word per line), still right-aligned. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
  min-width: 0;
  padding: 9px 14px;
  border-top: 1px solid color-mix(in srgb, var(--paper-edge) 70%, transparent);
}
.conj__row:first-child {
  border-top: 0;
}
.conj__form {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
}
.conj__pron {
  color: var(--ink-soft);
  font-weight: 400;
}
.conj__tr {
  flex: 1 0 9rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-align: right;
}
/* Each alternative form ("sono passato /", "sono passata") and the pronoun stay whole; a line
   breaks only between them. A single form longer than the column breaks as a last resort. The slash
   sits inside the form before it: next to an inline-block a no-break space no longer glues it. */
.conj__pron,
.conj__alt {
  /* Shrink-to-fit boxes: a whole form moves to the next line when it does not fit beside the previous one,
     and breaks inside only when it is longer than the line itself, at any table width (Codex). */
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* A narrow table (a 320 px phone, spec §9.4.6, or a narrow desktop column): form and
   translation stack, both left-aligned. */
@container conj (max-width: 18rem) {
  .conj__row {
    flex-direction: column;
    align-items: stretch;
  }
  .conj__tr {
    flex: none;
    text-align: left;
  }
}
.conj__row.is-used {
  box-shadow: inset 0 0 0 1.5px var(--ink);
  border-radius: 2px;
}
/* Neutral emphasis: ink outline + bold. Never the category tint (food coral = error colour). */
.conj__row.is-used .conj__form {
  font-weight: 600;
}
.conj__row.is-used .conj__pron,
.conj__row.is-used .conj__tr {
  color: var(--ink);
}
.conj__note {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--paper-edge);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
/* Conjugation 2 x 3 (singular | plural) once the table itself is wide enough for two
   columns of forms; below that, one column of six rows. */
@container conj (min-width: 37.5rem) {
  .conj__rows {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
  }
  .conj__row:nth-child(4) {
    border-top: 0;
  }
  .conj__row:nth-child(n + 4) {
    border-left: 1px solid var(--paper-edge);
  }
}
.alts {
  display: grid;
}
.alts__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  column-gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px dashed rgba(14, 40, 54, 0.2);
}
.alts__item:first-child {
  border-top: 0;
  padding-top: 2px;
}
.alts__it {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  font-variation-settings:
    'opsz' 36,
    'SOFT' 50;
}
.alts__note {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.4;
}
/* Phrase and speaker share the top row (speaker flush right); the note then
   takes the full width instead of leaving a 44px gutter under the speaker. */
.alts__item {
  grid-template-areas: 'it btn' 'note note';
  align-content: start;
}
.alts__item > div {
  display: contents;
}
.alts__it {
  grid-area: it;
  align-self: center;
}
.alts__note {
  grid-area: note;
  margin-top: 6px;
}
.alts__item > .btn-say {
  grid-area: btn;
}

/* Icon-only speaker: 44px target. */
.btn-say {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-round);
  border: 1.5px solid var(--ink);
  background: var(--paper-light);
  color: var(--ink);
  transition:
    opacity var(--dur-mid),
    transform var(--dur-fast);
}
.btn-say:active {
  transform: scale(0.94);
}
.btn-say .icon {
  width: 21px;
  height: 21px;
}

.ojo {
  padding: 14px 16px 16px;
  background: var(--ojo-tint);
  border: 1.5px solid var(--ojo-edge);
  border-radius: var(--r-tag);
}
.ojo .label {
  color: var(--ink);
}
.ojo .label .icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}
.ojo__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;
  line-height: 1.2;
  margin-bottom: 6px;
  font-variation-settings:
    'opsz' 36,
    'SOFT' 50;
}

/* ---- Buttons -------------------------------------------------------------- */
.btn-next,
.btn-primary,
.btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border-radius: var(--r-control);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform var(--dur-fast),
    background var(--dur-fast);
}
.btn-next,
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border: 0;
}
@media (hover: hover) {
  .btn-next:hover,
  .btn-primary:hover {
    background: #173d50;
  }
}
.btn-next:active,
.btn-primary:active,
.btn-secondary:active {
  transform: scale(0.985);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
@media (hover: hover) {
  .btn-secondary:hover {
    background: rgba(14, 40, 54, 0.05);
  }
}
.btn-next {
  margin-top: var(--s-2);
}
.btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-round);
  border: 1.5px solid var(--ink);
  background: transparent;
  font-weight: 600;
  font-size: 0.9375rem;
}
.actions {
  display: grid;
  gap: 10px;
  margin-top: var(--s-6);
}

/* ---- Results --------------------------------------------------------------- */
/* The one results heading: «9 de 15». Inline, so the space between the number and
   «de 15» is a real one for screen readers too. */
.score {
  font-size: 1rem;
  line-height: 0.85;
}
/* opsz 48, not 144: at display sizes Fraunces' 4 turns into a hairline flourish and
   stops reading as a numeral (QA 2026-09-27 #10). */
.score__n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-score);
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 48;
  font-variant-numeric: lining-nums tabular-nums;
}
.score__of {
  margin-left: 6px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--ink-soft);
  font-variation-settings: 'opsz' 48;
  font-variant-numeric: lining-nums tabular-nums;
}
.verdict-it {
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings:
    'opsz' 144,
    'SOFT' 100;
}
.verdict-es {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}
.band-copy {
  margin-top: var(--s-4);
  max-width: 60ch;
}
.review {
  display: grid;
  margin-top: var(--s-2);
}
.review-block {
  margin-top: var(--s-6);
}
.review__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 44px;
  column-gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px dashed rgba(14, 40, 54, 0.2);
}
.review__item:first-child {
  border-top: 0;
}
/* Category shown by its line icon on a tint of its colour, not a coloured bar. */
.review__cat {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-round);
  background: var(--cat-tint);
  color: var(--ink);
}
.review__cat .icon {
  width: 19px;
  height: 19px;
}
.review__it {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  font-variation-settings:
    'opsz' 36,
    'SOFT' 50;
}
.review__es {
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* ---- Loading / offline / terminal states ------------------------------------ */
.awning--loading .awning__cloth {
  background: repeating-linear-gradient(90deg, #e9d8ba 0 22px, var(--paper-light) 22px 44px);
  animation: slide 2.4s var(--loading-delay) linear infinite; /* same delay as the note */
}
@keyframes slide {
  to {
    background-position: 44px 0;
  }
}
.sk {
  display: block;
  border-radius: 4px;
  background: #eadbc1;
}
.sk--chip {
  width: 120px;
  height: 28px;
  border-radius: var(--r-tag);
}
.sk--line {
  height: 14px;
  margin-top: 18px;
  width: 52%;
}
.sk--prompt {
  height: 34px;
  margin-top: 10px;
  width: 78%;
}
.sk-options {
  margin-top: var(--s-5);
}
.sk--opt {
  height: 60px;
  border-radius: var(--r-control);
  background: #eedfc4;
  border: 1.5px solid var(--paper-edge);
}
.loading-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--s-4);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  /* Only appears if content is not ready after a short delay (spec §8). */
  opacity: 0;
  animation: appear 300ms var(--loading-delay) ease-out forwards;
}
@keyframes appear {
  to {
    opacity: 1;
  }
}

.terminal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.875rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-top: var(--s-2);
  font-variation-settings:
    'opsz' 72,
    'SOFT' 50;
}
.terminal p {
  margin-top: var(--s-3);
  max-width: 58ch;
}

.cat-chip--neutral {
  --cat: var(--paper-edge);
}

/* ---- Tablet and up (>= 768px): full width, internal two-column packing ------- */
@media (min-width: 768px) {
  .app {
    padding-left: max(24px, var(--safe-left));
    padding-right: max(24px, var(--safe-right));
    padding-top: calc(var(--safe-top) + var(--s-6));
    padding-bottom: 160px;
  }
  .masthead {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    column-gap: var(--s-5);
  }
  .wordmark {
    font-size: 2.75rem;
  }
  .subtitle {
    padding-bottom: 12px;
    justify-self: end;
    text-align: right;
  }
  .board {
    margin-top: var(--s-6);
  }
  .board__row {
    height: 56px;
    column-gap: 6px;
  }
  .marker svg {
    max-width: 32px;
    height: 52px;
  }
  .card {
    margin-top: var(--s-6);
  }
  .card__body {
    padding: var(--s-5) 28px var(--s-6);
  }
  /* Before answering (and single-column pages): nothing needs to sit beside the options, so
     the card keeps a reading width from tablet up, not only from 1100 px (le-desk-03). */
  .card--single,
  .card--results-solo {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  :root {
    --fs-prompt: 2.75rem;
    --fs-answer: 2.25rem;
  }

  .actions {
    grid-template-columns: 1fr 1fr;
  }

  .deco-waves {
    height: 150px;
  }
}

/* Tablet to small laptop (768-1099 px): every card, answered or not, keeps the same 720 px reading
   width, so the card does not jump wider when the question is answered (r2-le-03). */
@media (min-width: 768px) and (max-width: 1099px) {
  .card {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Results «Para repasar»: two items per row only when the list itself is wide enough (the desktop
   right column at 1100-1180 px gave each item ~245 px and the phrases wrapped to three lines: r3-le-01). */
.res-list {
  container: reslist / inline-size;
}
@container reslist (min-width: 40rem) {
  .review {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }
  .review__item:nth-child(2) {
    border-top: 0;
  }
}

/* ---- Explanation parts by their own width (container queries) ---------------------------------- */
/* Word by word: two rows side by side once there are 4+ words and the part is wide enough. */
@container part (min-width: 35rem) {
  .words--multi {
    grid-template-columns: fit-content(22%) minmax(0, 1fr) fit-content(22%) minmax(0, 1fr);
    column-gap: 14px;
  }
  .words--multi .words__row {
    grid-column: span 2;
  }
  .words--multi .words__row:nth-child(2) {
    border-top: 0;
    padding-top: 2px;
  }
  .words--multi .words__row:nth-child(even) {
    padding-left: 14px;
    border-left: 1px dashed rgba(14, 40, 54, 0.2);
  }
  /* One long word stacks its row; side by side, every row then stacks the same way so the
     paired cells, their dashed lines and the divider stay aligned (le-desk-05). */
  .words--multi:has(.is-long) {
    align-items: start; /* paired stacked cells start on one line (r2-parity-05, r2-le-01) */
  }
  .words--multi:has(.is-long) .words__row {
    align-content: start;
  }
  .words--multi:has(.is-long) .words__row > * {
    grid-column: 1 / -1;
  }
}
/* Alternatives: three small cards in a row, speaker top-right, only where each card gets
   about 250 px (a tablet at 768 px gave them 200 px and the phrases wrapped to 3-4 lines:
   r2-parity-03); in the desktop right column (514-596 px) they stay one per line. */
@container part (min-width: 48.75rem) {
  .alts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .alts__item,
  .alts__item:first-child {
    padding: 12px 12px 14px 14px;
    border: 1px solid var(--paper-edge);
    border-radius: var(--r-tag);
    background: var(--paper-light);
    column-gap: 8px;
  }
  .alts__it {
    font-size: 1.1875rem;
  }
}

/* ---- Desktop (>= 1100px): 1240px container, answered card in two columns ------- */
@media (min-width: 1100px) {
  .app {
    max-width: 1240px;
    padding-left: max(32px, var(--safe-left));
    padding-right: max(32px, var(--safe-right));
    padding-top: calc(var(--safe-top) + var(--s-6));
  }
  .marker svg {
    max-width: 40px;
  } /* canopies ~40px: shopfronts, not lamp posts */
  .card__body {
    padding: var(--s-5) 40px var(--s-7);
  }
  :root {
    --fs-prompt: 2.75rem;
    --fs-answer: 2.25rem;
  }

  /* Answered: LEFT ~42% (min 400px) | hairline | RIGHT ~58%. The awning band
     above spans both. The left column is the interaction only (chip, prompt,
     options, verdict) and sticks; everything learnt after answering (the
     answer, then the sections) is the right column. The stick's cell spans both
     right-column rows, so it travels the whole height and never covers content. */
  .card__grid {
    grid-template-columns: minmax(400px, 42fr) minmax(0, 58fr);
    grid-template-areas:
      'stick lead'
      'stick side';
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: 0;
    row-gap: 0;
  }
  .card__stick {
    grid-area: stick;
    align-self: start;
    padding-right: 40px;
    padding-top: 12px;
    margin-top: -12px;
  }
  /* The interaction column sticks only where it can fit whole: on a short viewport (a 1366×768 laptop with
     browser bars, a split window) a sticky column taller than the screen would hide the verdict until the
     grid ends, so there it scrolls with the page instead (design review D-004, owner decision 2026-09-28).
     In em, not px: with a larger browser text size the column grows, and the gate grows with it
     (760 px at the default 16 px; FINDING-002 of the 2026-09-28 learner review). */
  @media (min-height: 47.5em) {
    .card__stick {
      position: sticky;
      top: 0;
    }
  }
  .explain--lead {
    grid-area: lead;
    margin-top: 0;
    padding-left: 40px;
    padding-bottom: var(--s-6);
    border-left: 1px solid var(--paper-edge);
  }
  .explain--side {
    grid-area: side;
    gap: var(--s-6);
    padding-left: 40px;
    border-left: 1px solid var(--paper-edge);
  }

  /* Results: score + verdict + actions left (sticky), review list right. */
  .res-grid {
    display: grid;
    grid-template-columns: minmax(400px, 42fr) minmax(0, 58fr);
    grid-template-areas: 'main list' 'acts list';
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .res-main {
    grid-area: main;
    padding-right: 40px;
  }
  /* Nothing to review (15 of 15): one column, no empty right half (le-desk-07). */
  .card--results-solo .res-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'main' 'acts';
  }
  .card--results-solo .res-main,
  .card--results-solo .res-acts {
    padding-right: 0;
  }
  .card--results-solo .res-acts {
    grid-template-columns: 1fr 1fr; /* as at 1024: two buttons side by side, not 640 px bars (r2-le-05) */
  }
  .res-acts {
    grid-area: acts;
    padding-right: 40px;
    grid-template-columns: 1fr;
  }
  .res-list {
    grid-area: list;
    margin-top: 0;
    padding-left: 40px;
    border-left: 1px solid var(--paper-edge);
    align-self: stretch;
  }
  .deco-waves {
    height: 170px;
  }
}

/* ---- Short landscape screens (phones, 1280x600 / 1440x700 windows): the masthead and the 15-awning
   board took the whole first screen, so prompts and the results actions started below the fold
   (le-mob-04, le-desk-08). Compact chrome, same content. */
@media (orientation: landscape) and (max-height: 700px) {
  .app {
    padding-top: calc(var(--safe-top) + var(--s-3));
  }
  .masthead {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    column-gap: var(--s-4);
  }
  .wordmark {
    font-size: 1.625rem;
    padding-bottom: 6px;
  }
  .subtitle {
    padding-bottom: 6px;
    justify-self: end;
    text-align: right;
  }
  .board {
    margin-top: var(--s-2);
  }
  .board__row {
    height: 30px;
  }
  .marker svg {
    max-width: 22px;
    height: 28px;
  }
  .card {
    margin-top: var(--s-3);
  }
}
/* Landscape phones (<= 500 px tall): tighter still, so the prompt and the first option are on the
   first screen (three options and the prompt cannot all fit in 375-390 px). */
@media (orientation: landscape) and (max-height: 500px) {
  .status {
    margin-top: var(--s-1);
  }
  .card {
    margin-top: var(--s-2);
  }
  .awning {
    height: 20px;
  }
  .card__body {
    padding-top: var(--s-3);
  }
  .ask {
    margin-top: var(--s-2);
  }
  /* the results actions come into the first screen (r3-le-03). The numeral and «de 15» set their own
     sizes, so they are the ones to shrink (design review 2026-09-28, FINDING-001). */
  .score__n {
    font-size: 3.5rem;
  }
  .score__of {
    font-size: 1.25rem;
  }
  /* score beside its verdict: one band instead of two */
  .res-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s-6);
    align-items: end;
  }
  .score {
    grid-row: 1 / 3;
  }
  .verdict-it {
    margin-top: 0;
    font-size: 1.75rem;
  }
  .band-copy {
    grid-column: 1 / -1;
    max-width: none; /* the long 0-of-15 copy in three lines, not four */
    margin-top: var(--s-2);
  }
  .res-acts {
    margin-top: var(--s-4);
  }
}

/* ---- Reduced motion: no spring, no waves, no rise, no shimmer ----------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .deco-waves .wave {
    animation: none !important;
  }
  .loading-note {
    opacity: 1;
  }
}