body:has(.online-timers) { background: #f6f3ed; color: #182a35; }
.page-online-timers.has-breadcrumb { --breadcrumb-width: 1120px; display: block; padding: 16px clamp(12px, 3vw, 28px) 74px; }
.online-timers { width: min(1120px, 100%); margin: 0 auto; font-family: Arial, sans-serif; }
.online-timers * { box-sizing: border-box; }
.online-timers button, .online-timers input { font: inherit; }
.online-timers button { cursor: pointer; }
.online-timers :is(button, input, a):focus-visible { outline: 3px solid #ff8d6a; outline-offset: 3px; }

.ot-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 265px; align-items: center; min-height: 300px; overflow: hidden; padding: clamp(26px, 4.8vw, 52px); border-radius: 26px; color: #fff8e9; background: radial-gradient(circle at 83% 20%, #e16f5f 0, #a64854 24%, transparent 45%), linear-gradient(125deg, #172638 5%, #21354d 65%, #374a66); box-shadow: 0 20px 42px #1e2c3c28; }
.ot-hero::before { position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(#ffffff 1px, transparent 1px), linear-gradient(90deg, #ffffff 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent 40%, #000); content: ''; pointer-events: none; }
.ot-hero::after { position: absolute; right: -95px; bottom: -155px; width: 350px; height: 350px; border: 1px solid #ffffff24; border-radius: 50%; box-shadow: 0 0 0 45px #ffffff08, 0 0 0 95px #ffffff05; content: ''; pointer-events: none; }
.ot-hero-copy { position: relative; z-index: 2; }
.ot-hero-label { display: inline-flex; align-items: center; gap: 9px; color: #ffd9aa; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.ot-hero-label i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #f9ad87; box-shadow: 0 0 0 5px #f9ad8729; }
.ot-hero h1 { max-width: 700px; margin: 19px 0 0; font: 700 clamp(37px, 5.4vw, 66px)/.96 Georgia, serif; letter-spacing: -.055em; }
.ot-hero-copy > p { max-width: 610px; margin: 17px 0 0; color: #e2e7ef; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.55; }
.ot-hero-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.ot-hero-points span { padding: 7px 10px; border: 1px solid #ffffff49; border-radius: 99px; color: #fff6e7; background: #ffffff12; font-size: 11px; font-weight: 700; }
.ot-hero-art { position: relative; z-index: 1; width: 245px; height: 245px; margin: auto; }
.ot-hero-dial { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid #ffe4c667; border-radius: 50%; background: conic-gradient(#ffddab 0 37%, #ffffff20 37% 100%); box-shadow: 0 0 0 18px #ffffff14, 0 0 0 52px #ffffff0a; }
.ot-hero-dial::before { position: absolute; inset: 16px; border-radius: 50%; background: #2d364a; content: ''; }
.ot-hero-dial > span { position: relative; display: flex; flex-direction: column; align-items: center; color: #fff8ea; font: 700 81px/.9 Georgia, serif; letter-spacing: -.08em; }
.ot-hero-dial small { margin-top: 10px; color: #ffdfb5; font: 800 11px/1 Arial, sans-serif; letter-spacing: .28em; }
.ot-hero-spark { position: absolute; color: #ffe0ae; }
.ot-spark-one { top: 1px; left: 11px; font-size: 28px; }
.ot-spark-two { right: -24px; bottom: 18px; font-size: 31px; }

.ot-setup { margin-top: 20px; padding: clamp(22px, 3vw, 32px); border: 1px solid #e5ded2; border-radius: 22px; background: #fffefa; box-shadow: 0 12px 28px #2f34271a; }
.ot-setup-intro > span, .ot-board-top > div > span, .ot-editorial-lead > span { color: #b85843; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.ot-setup-intro h2, .ot-board-top h2 { margin: 7px 0 7px; color: #182d3a; font: 700 clamp(26px, 3vw, 36px)/1.08 Georgia, serif; letter-spacing: -.04em; }
.ot-setup-intro p, .ot-board-top p { margin: 0; color: #64737c; font-size: 13px; line-height: 1.55; }
.ot-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-top: 23px; }
.ot-presets button { display: flex; min-height: 79px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; padding: 12px 14px; border: 1px solid #e3d8cb; border-radius: 13px; color: #17313d; background: #faf5ee; font-size: 18px; font-weight: 800; text-align: left; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.ot-presets button:hover { transform: translateY(-3px); border-color: #ef956f; background: #fff0e4; }
.ot-presets button span { color: #8a7770; font-size: 10px; font-weight: 700; }
.ot-form { display: grid; grid-template-columns: minmax(175px, 1.2fr) minmax(185px, 1.1fr) minmax(230px, 1.45fr) auto; align-items: end; gap: 12px; margin-top: 25px; padding-top: 21px; border-top: 1px solid #ebe5db; }
.ot-form-heading { align-self: center; }
.ot-form-heading > span { display: block; margin-bottom: 5px; color: #b85843; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.ot-form-heading strong { color: #203a45; font-size: 14px; }
.ot-field { display: grid; min-width: 0; gap: 6px; }
.ot-field > span { color: #3b5159; font-size: 11px; font-weight: 800; }
.ot-field small { color: #879297; font-weight: 500; }
.ot-field input { width: 100%; min-width: 0; height: 45px; padding: 0 11px; border: 1px solid #d7dbd9; border-radius: 10px; color: #203b44; background: #fff; font-size: 13px; }
.ot-field input::placeholder { color: #9ba5a8; }
.ot-duration-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ot-add { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 45px; padding: 0 15px; border: 0; border-radius: 10px; color: #fff; background: #da644e; font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 7px 17px #b556412b; }
.ot-add:hover { background: #be4f3b; }
.ot-add span { font-size: 17px; }
.ot-error { grid-column: 1 / -1; margin: 0; padding: 10px 13px; border: 1px solid #efb6a9; border-radius: 9px; color: #942f25; background: #fff0ec; font-size: 12px; }
.ot-error[hidden] { display: none; }

.ot-board { margin-top: 30px; }
.ot-board-top { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.ot-sound { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #bacaca; border-radius: 10px; color: #244651; background: #fff; font-size: 11px; font-weight: 800; }
.ot-sound[aria-pressed="false"] { color: #718086; background: #f1f3f2; }
.ot-sound svg { width: 17px; height: 17px; }
.ot-sound .ot-sound-off, .ot-sound[aria-pressed="false"] .ot-sound-on { display: none; }
.ot-sound[aria-pressed="false"] .ot-sound-off { display: block; }
.ot-board-status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.ot-board-status > span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid #d8e0df; border-radius: 99px; color: #546a70; background: #fff; font-size: 11px; }
.ot-board-status strong { color: #183c48; }
.ot-board-status i { width: 7px; height: 7px; margin-right: 3px; border-radius: 50%; background: #3fba91; }
.ot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 15px; }
.ot-loading { grid-column: 1 / -1; margin: 0; padding: 25px; border: 1px dashed #cbd7d5; border-radius: 16px; color: #667579; text-align: center; }
.ot-card { --ot-accent: #e76c50; position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; overflow: hidden; padding: 18px 20px 19px; border: 1px solid #d9dfdc; border-radius: 20px; background: #fff; box-shadow: 0 10px 27px #1c35401a; }
.ot-card:nth-child(2n) { --ot-accent: #3e8f9a; }
.ot-card:nth-child(3n) { --ot-accent: #c58b44; }
.ot-card::before { position: absolute; top: -110px; right: -95px; width: 240px; height: 240px; border: 1px solid #dae6e3; border-radius: 50%; box-shadow: 0 0 0 35px #ecf1ee6e; content: ''; pointer-events: none; }
.ot-card.is-running { border-color: #a7c6c2; }
.ot-card.is-finished { border-color: #e7a881; background: #fff9f3; }
.ot-card > * { position: relative; z-index: 1; }
.ot-card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.ot-card-index { color: #b26954; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.ot-card-top > div { display: flex; gap: 5px; }
.ot-card-top button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #dce4e1; border-radius: 9px; color: #526c73; background: #fff; font-size: 20px; line-height: 1; }
.ot-card-top button:hover { border-color: #cc8068; color: #a94d3b; }
.ot-card-top svg { width: 16px; height: 16px; }
.ot-ring { display: grid; place-items: center; width: clamp(160px, 17vw, 190px); aspect-ratio: 1; margin-top: 10px; border-radius: 50%; background: conic-gradient(var(--ot-accent) var(--ot-progress, 0%), #e9eeec var(--ot-progress, 0%)); box-shadow: 0 8px 21px #29464b18; }
.ot-ring-inner { display: flex; width: calc(100% - 15px); height: calc(100% - 15px); flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #fff; }
.ot-card.is-finished .ot-ring-inner { background: #fff9f3; }
.ot-ring strong { color: #183642; font-size: clamp(32px, 4.5vw, 48px); font-variant-numeric: tabular-nums; letter-spacing: -.055em; line-height: 1; }
.ot-card.has-hours .ot-ring strong { font-size: clamp(26px, 3vw, 33px); letter-spacing: -.07em; }
.ot-ring span { margin-top: 7px; color: #9b6b5a; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.ot-card-copy { width: 100%; margin-top: 17px; text-align: center; }
.ot-card-copy h3 { margin: 0; color: #17313e; font: 700 23px/1.17 Georgia, serif; overflow-wrap: anywhere; }
.ot-card-copy p { margin: 6px 0 0; color: #789096; font-size: 11px; }
.ot-card-controls { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; width: 100%; margin-top: 21px; }
.ot-card-controls button { min-height: 43px; border-radius: 9px; font-size: 12px; font-weight: 800; }
.ot-primary { border: 1px solid #1b4350; color: #fff; background: #1b4350; }
.ot-primary:hover { background: #2d6270; }
.ot-secondary { border: 1px solid #d7e0de; color: #34535c; background: #f4f8f6; }
.ot-secondary:hover { border-color: #8eaaa7; }
.ot-card-message { min-height: 18px; margin: 12px 0 0; color: #697d82; font-size: 11px; text-align: center; }
.ot-card.is-finished .ot-card-message { color: #a3492d; font-weight: 800; }
.ot-limit-note { margin: 12px 2px 0; color: #758489; font-size: 11px; line-height: 1.5; }
.ot-card:fullscreen { display: flex; width: 100vw; min-height: 100vh; justify-content: center; padding: clamp(25px, 5vw, 75px); border: 0; border-radius: 0; background: radial-gradient(circle at 75% 10%, #334c61, #172838 66%); }
.ot-card:fullscreen .ot-card-index, .ot-card:fullscreen .ot-card-copy h3, .ot-card:fullscreen .ot-ring strong { color: #fff8ec; }
.ot-card:fullscreen .ot-card-top { position: absolute; top: 25px; left: 0; width: 100%; padding: 0 clamp(25px, 5vw, 75px); }
.ot-card:fullscreen .ot-card-top button[data-ot-action="remove"] { display: none; }
.ot-card:fullscreen .ot-ring { width: min(45vh, 390px, calc(100vw - 60px)); margin-top: 0; }
.ot-card:fullscreen .ot-ring-inner { background: #1c3041; }
.ot-card:fullscreen .ot-ring strong { font-size: clamp(49px, 7vw, 98px); }
.ot-card.has-hours:fullscreen .ot-ring strong { font-size: clamp(36px, 5vw, 64px); }
.ot-card:fullscreen .ot-card-copy { width: auto; }
.ot-card:fullscreen .ot-card-copy h3 { font-size: clamp(27px, 4vw, 51px); }
.ot-card:fullscreen .ot-card-controls { max-width: 400px; }
.ot-card:fullscreen .ot-card-message { color: #d6e0e3; }
.online-timers > .share-panel { margin-top: 19px; }

.ot-editorial { display: grid; grid-template-columns: .75fr 1.25fr; gap: 30px; margin-top: 56px; }
.ot-editorial-lead h2 { max-width: 360px; margin: 10px 0 12px; color: #1c3643; font: 700 clamp(29px, 3.3vw, 40px)/1.08 Georgia, serif; letter-spacing: -.04em; }
.ot-editorial-lead p { max-width: 370px; margin: 0; color: #65767c; font-size: 14px; line-height: 1.65; }
.ot-editorial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ot-editorial-grid > div { min-width: 0; padding: 18px; border: 1px solid #e3ded4; border-radius: 16px; background: #fffefa; }
.ot-editorial-grid span { color: #bd6550; font: 700 30px/1 Georgia, serif; }
.ot-editorial-grid h3 { margin: 18px 0 8px; color: #253b45; font-size: 15px; }
.ot-editorial-grid p { margin: 0; color: #728086; font-size: 12px; line-height: 1.6; }
.ot-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 25px; }
.ot-related a { position: relative; display: grid; gap: 5px; min-width: 0; padding: 19px 48px 19px 20px; border: 1px solid #e3ded4; border-radius: 15px; color: #1b3845; background: #fffefa; transition: transform .16s ease, border-color .16s ease; }
.ot-related a:hover { transform: translateY(-2px); border-color: #b87f6d; }
.ot-related a > span:first-child { color: #b85843; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.ot-related a strong { font-size: 15px; }
.ot-related a > span:last-child { position: absolute; top: 19px; right: 20px; font-size: 20px; }
.online-timers > .cms-content-card { margin-top: 25px; }

@media (max-width: 900px) {
  .ot-hero { grid-template-columns: 1fr 190px; }
  .ot-hero-art { width: 180px; height: 180px; }
  .ot-hero-dial > span { font-size: 65px; }
  .ot-form { grid-template-columns: 1fr 1fr; }
  .ot-form-heading { grid-column: 1 / -1; }
  .ot-editorial { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 650px) {
  .page-online-timers.has-breadcrumb { padding-top: 12px; }
  .ot-hero { display: block; min-height: 250px; padding: 25px 20px; border-radius: 19px; }
  .ot-hero h1 { max-width: 260px; margin-top: 17px; font-size: clamp(33px, 10vw, 43px); }
  .ot-hero-copy > p { max-width: 290px; margin-top: 11px; font-size: 13px; }
  .ot-hero-points { gap: 5px; margin-top: 16px; }
  .ot-hero-points span { padding: 5px 8px; font-size: 10px; }
  .ot-hero-art { position: absolute; top: -120px; right: -110px; width: 230px; height: 230px; opacity: .48; }
  .ot-hero-art .ot-hero-dial > span { display: none; }
  .ot-setup { margin-top: 13px; padding: 20px 16px; border-radius: 18px; }
  .ot-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 18px; }
  .ot-presets button { min-height: 66px; padding: 10px 11px; font-size: 16px; }
  .ot-presets button:last-child { grid-column: 1 / -1; }
  .ot-form { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .ot-form-heading { grid-column: auto; }
  .ot-board { margin-top: 31px; }
  .ot-board-top { align-items: start; }
  .ot-board-top h2 { font-size: 28px; }
  .ot-sound { padding: 9px; }
  .ot-sound span { display: none; }
  .ot-grid { grid-template-columns: 1fr; gap: 11px; }
  .ot-card { padding: 16px; border-radius: 17px; }
  .ot-ring { width: 174px; }
  .ot-editorial { margin-top: 38px; }
  .ot-editorial-lead h2 { font-size: 30px; }
  .ot-editorial-grid { grid-template-columns: 1fr; }
  .ot-editorial-grid > div { padding: 16px; }
  .ot-editorial-grid h3 { margin-top: 9px; }
  .ot-related { grid-template-columns: 1fr; }
}

/* Compact hero, consistent with the other countdown pages. */
.ot-hero { grid-template-columns: minmax(0, 1fr) 160px; min-height: 160px; padding: 22px clamp(22px, 3vw, 34px); border-radius: 20px; }
.ot-hero-label, .ot-hero-points { display: none; }
.ot-hero h1 { margin: 0; font-size: clamp(29px, 3.1vw, 43px); line-height: 1.03; }
.ot-hero-copy > p { margin-top: 9px; font-size: 14px; line-height: 1.5; }
.ot-hero-art { width: 150px; height: 150px; }
.ot-hero-dial > span { font-size: 49px; }
.ot-hero-dial small { font-size: 8px; }
@media (max-width: 900px) { .ot-hero { grid-template-columns: minmax(0, 1fr) 130px; } .ot-hero-art { width: 130px; height: 130px; } }
@media (max-width: 650px) { .ot-hero { display: flex; align-items: center; min-height: 112px; padding: 12px 16px; border-radius: 17px; } .ot-hero h1 { max-width: 245px; margin: 0; font-size: clamp(23px, 7vw, 27px); } .ot-hero-copy > p { display: none; } .ot-hero-art { position: absolute; top: -59px; right: -72px; width: 170px; height: 170px; opacity: .46; } .ot-hero-art .ot-hero-dial > span { display: none; } }

/* One focused timer instead of a card dashboard. */
.ot-grid { grid-template-columns: minmax(0, 1fr); width: min(560px, 100%); margin: 18px auto 0; }
.ot-card { padding: 22px 26px 24px; }
.ot-ring { width: clamp(180px, 20vw, 220px); }
@media (max-width: 650px) { .ot-grid { width: 100%; } .ot-card { padding: 18px; } .ot-ring { width: 190px; } }

/* The timer and its compact controls form one tool, timer first. */
.ot-board { width: min(660px, 100%); margin: 13px auto 0; padding: clamp(16px, 2.5vw, 28px); border: 1px solid #dfe3de; border-radius: 20px; background: #f7f8f6; }
.ot-board-top { align-items: center; }
.ot-board-top h2 { margin: 4px 0 0; font-size: clamp(24px, 2.8vw, 31px); }
.ot-tool-layout { width: min(560px, 100%); margin: 15px auto 0; }
.ot-timer-column { min-width: 0; }
.ot-grid { width: 100%; margin: 0; }
.ot-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 3px; }
.ot-presets button { min-height: 48px; gap: 2px; padding: 7px 9px; border-radius: 9px; font-size: 14px; }
.ot-presets button span { font-size: 9px; }
.ot-timer-column > .ot-form { grid-template-columns: 1fr; gap: 9px; margin: 10px 0 0; padding: 15px; border: 1px solid #e5ded2; border-radius: 16px; background: #fffefa; }
.ot-name-details summary { color: #526b73; cursor: pointer; font-size: 11px; font-weight: 800; }
.ot-name-details summary span { color: #84949a; font-weight: 500; }
.ot-name-details .ot-field { margin-top: 9px; }
.ot-form-heading { grid-column: auto; }
.ot-form-heading strong { font-size: 12px; }
.ot-field input { height: 38px; }
.ot-add { min-height: 41px; }
.ot-limit-note { max-width: 560px; margin: 11px auto 0; }
@media (max-width: 650px) {
  .ot-board { padding: 15px; border-radius: 18px; }
  .ot-board-top { position: relative; display: block; }
  .ot-board-top h2 { font-size: 25px; }
  .ot-sound { position: absolute; top: 0; right: 0; }
  .ot-tool-layout { margin-top: 12px; }
  .ot-card { padding: 14px; }
  .ot-ring { width: 158px; margin-top: 4px; }
  .ot-card-copy { margin-top: 10px; }
  .ot-card-copy h3 { font-size: 20px; }
  .ot-card-controls { margin-top: 13px; }
  .ot-card-controls button { min-height: 39px; }
  .ot-card-message { margin-top: 9px; }
  .ot-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 3px; }
  .ot-presets button { min-height: 42px; padding: 6px 7px; font-size: 13px; }
  .ot-presets button:last-child { grid-column: auto; }
  .ot-presets button span { display: none; }
  .ot-timer-column > .ot-form { margin-top: 9px; padding: 13px; }
}