.basta-editorial-article:has([data-resource-tool="basta-timer"]) {
  padding-block-start: 2rem;
}
.basta-editorial-article:has([data-resource-tool="basta-timer"]) > header h1 {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 .65rem;
}
.basta-editorial-article:has([data-resource-tool="basta-timer"]) > header .intro {
  font-size: 1.0625rem;
  line-height: 1.55;
  margin: 0 0 .85rem;
}
[data-resource-tool="basta-timer"] {
  margin-block: 1rem 2rem;
  padding: clamp(.875rem, 2vw, 1.25rem);
  border: 2px solid #242d39;
  border-radius: 24px;
  /* Existing Basta landing palette: ink, yellow, pink and sky blue. */
  background: #121820;
  color: #fff;
  color-scheme: dark;
  box-shadow: 0 6px 0 #242d39;
  box-sizing: border-box;
}
[data-resource-tool="basta-timer"]::before {
  content: "";
  display: block;
  height: 6px;
  margin-block-end: 1rem;
  border-radius: 10px;
  background: linear-gradient(to right, #ffdf26 0 33.333%, #ff3385 33.333% 66.666%, #57b9ff 66.666% 100%);
}
[data-resource-tool="basta-timer"] *, [data-resource-tool="basta-timer"] *::before,
[data-resource-tool="basta-timer"] *::after { box-sizing: border-box; }
[data-resource-tool="basta-timer"] h2 { margin: 0 0 .85rem; font-size: 1.3rem; line-height: 1.3; color: #fff; }
[data-resource-tool="basta-timer"] [hidden] { display: none !important; }
.basta-timer-panel { max-width: 48rem; margin-inline: auto; text-align: center; }
.basta-timer-presets { display: flex; gap: .6rem; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.basta-timer-presets legend {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
[data-resource-tool="basta-timer"] button {
  min-block-size: 48px;
  padding: .7rem 1.15rem;
  border: 2px solid #57b9ff;
  border-radius: 14px;
  color: #57b9ff;
  background: #121820;
  font: inherit;
  font-weight: 650;
  line-height: 1.25;
  cursor: pointer;
  touch-action: manipulation;
  white-space: normal;
  overflow-wrap: anywhere;
}
.basta-timer-presets button { flex: 1 1 0; margin: .2rem 0; min-inline-size: 0; padding-inline: .4rem; font-size: 1rem; color: #121820; background: #ff3385; border-color: #ff3385; }
.basta-timer-presets button:nth-of-type(2) { background: #ffdf26; border-color: #ffdf26; }
.basta-timer-presets button:nth-of-type(3) { background: #57b9ff; border-color: #57b9ff; }
[data-resource-tool="basta-timer"] button[aria-pressed="true"] { outline: 3px solid #fff; outline-offset: 3px; border-color: #121820; font-weight: 850; }
[data-resource-tool="basta-timer"] button:disabled { cursor: default; }
.basta-timer-display {
  margin-block: .9rem .15rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(5rem, 25vw, 9rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.12;
  letter-spacing: -.045em;
  color: #fff;
  overflow-wrap: normal;
  white-space: nowrap;
}
.basta-timer-state { margin: .25rem 0 .8rem; min-block-size: 1.5em; font-weight: 700; font-size: 1.1rem; color: #fff; }
.basta-timer-panel[data-state="finished"] .basta-timer-state { color: #ffdf26; }
.basta-timer-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }
[data-resource-tool="basta-timer"] .basta-timer-actions > button { flex: 1 1 0; min-inline-size: 0; max-inline-size: 14rem; }
[data-resource-tool="basta-timer"] .basta-timer-primary { background: #ffdf26; border-color: #ffdf26; color: #121820; }
.basta-timer-sound { display: flex; justify-content: center; align-items: center; gap: .6rem; margin-block: .75rem .25rem; min-block-size: 44px; cursor: pointer; }
.basta-timer-sound input { inline-size: 1.4rem; block-size: 1.4rem; margin: 0; flex: 0 0 auto; accent-color: #ffdf26; }
.basta-timer-note { font-size: .875rem; line-height: 1.5; color: #cdd5e1; margin-block: .35rem; }
.basta-timer-note:empty { display: none; }
[data-resource-tool="basta-timer"] :focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (max-width: 380px) {
  [data-resource-tool="basta-timer"] { padding: .8rem; }
  .basta-timer-presets { gap: .5rem; }
  .basta-timer-presets button { padding-inline: .2rem; font-size: .9375rem; }
  .basta-timer-display { font-size: clamp(4rem, 25vw, 5.9375rem); }
}
@media (forced-colors: active) {
  [data-resource-tool="basta-timer"] button[aria-pressed="true"] { outline: 3px solid Highlight; }
}