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

.ocd-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 160px; align-items: center; min-height: 160px; overflow: hidden; padding: 22px clamp(22px, 3vw, 34px); border-radius: 20px; color: #fffaf1; background: radial-gradient(circle at 84% 25%, #da786f 0, #995b71 24%, transparent 47%), linear-gradient(125deg, #112e36 12%, #174e54 64%, #2d686b); box-shadow: 0 20px 45px #204b4b23; }
.ocd-hero::after { position: absolute; inset: auto -8% -140px 38%; height: 225px; border: 1px solid #ffffff22; border-radius: 50%; content: ''; pointer-events: none; }
.ocd-hero-copy { position: relative; z-index: 2; }
.ocd-hero-mark { display: none; }
.ocd-hero-mark svg { width: 21px; height: 21px; }
.ocd-hero h1 { max-width: 720px; margin: 0; font: 700 clamp(29px, 3.1vw, 43px)/1.03 Georgia, serif; letter-spacing: -.055em; }
.ocd-hero-copy > p { max-width: 585px; margin: 9px 0 0; color: #e6f2ee; font-size: 14px; line-height: 1.5; }
.ocd-hero-tags { display: none; }
.ocd-hero-tags span { padding: 7px 11px; border: 1px solid #ffffff44; border-radius: 99px; color: #f8f5e8; background: #ffffff13; font-size: 11px; font-weight: 700; }
.ocd-hero-art { position: relative; width: 150px; height: 150px; margin: auto; }
.ocd-orbit { position: absolute; border: 1px solid #fff8e563; border-radius: 50%; }
.ocd-orbit-one { inset: 9px; box-shadow: 0 0 0 23px #ffffff0d, 0 0 0 58px #ffffff09; }
.ocd-orbit-two { inset: 48px; border-color: #fff7e6a6; background: #e5a17622; box-shadow: inset 0 0 30px #fff4d120; }
.ocd-orbit-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff8e7; font: 700 48px/1 Georgia, serif; letter-spacing: -.06em; }
.ocd-orbit-center span { color: #f6c994; }
.ocd-orbit-star { position: absolute; color: #f7c99b; }
.ocd-star-one { top: 17px; left: 25px; font-size: 24px; }
.ocd-star-two { right: 4px; bottom: 26px; font-size: 32px; }

.ocd-workspace { display: grid; grid-template-columns: minmax(315px, .86fr) minmax(0, 1.14fr); align-items: stretch; gap: 16px; margin-top: 20px; }
.ocd-builder, .ocd-display { min-width: 0; border-radius: 24px; }
.ocd-builder { padding: clamp(22px, 3vw, 32px); border: 1px solid #dce4df; background: #fff; box-shadow: 0 12px 26px #1b46451a; }
.ocd-section-heading > span, .ocd-how-heading > span, .ocd-note > div > span { color: #ad5b42; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.ocd-section-heading h2 { margin: 7px 0 8px; color: #123b3d; font: 700 clamp(26px, 3vw, 34px)/1.1 Georgia, serif; letter-spacing: -.04em; }
.ocd-section-heading p { max-width: 410px; margin: 0 0 23px; color: #61757b; font-size: 13px; line-height: 1.6; }
.ocd-field { display: grid; gap: 8px; min-width: 0; margin-bottom: 17px; }
.ocd-field > span { color: #24434a; font-size: 12px; font-weight: 800; }
.ocd-field small { margin-left: 4px; color: #849399; font-weight: 500; }
.ocd-field input { width: 100%; min-width: 0; height: 50px; padding: 0 13px; border: 1px solid #cbdad9; border-radius: 12px; color: #18383f; background: #f8fbfa; font-size: 14px; }
.ocd-field input::placeholder { color: #9aabad; }
.ocd-field input:hover, .ocd-field input:focus { border-color: #397b77; }
.ocd-fields-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); gap: 12px; }
.ocd-zone-note { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 0 0 19px; color: #657b7d; font-size: 11px; }
.ocd-zone-note svg { width: 15px; height: 15px; margin-right: 2px; }
.ocd-zone-note strong { color: #214b50; overflow-wrap: anywhere; }
.ocd-error { margin: -6px 0 13px; padding: 10px 12px; border: 1px solid #eab0a9; border-radius: 10px; color: #8d2d28; background: #fff1ee; font-size: 12px; }
.ocd-error[hidden] { display: none; }
.ocd-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 51px; padding: 0 17px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(105deg, #194d4e, #126c71); font-size: 13px; font-weight: 800; box-shadow: 0 8px 18px #14525734; transition: transform .16s ease, box-shadow .16s ease; }
.ocd-submit:hover { transform: translateY(-2px); box-shadow: 0 11px 22px #14525744; }
.ocd-submit span { font-size: 20px; line-height: 1; }
.ocd-presets { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e3ebe8; }
.ocd-presets > span { display: block; margin-bottom: 12px; color: #758589; font-size: 11px; font-weight: 700; }
.ocd-presets > div { display: flex; flex-wrap: wrap; gap: 7px; }
.ocd-presets button { padding: 8px 11px; border: 1px solid #cbdcd7; border-radius: 99px; color: #25535a; background: #f6faf8; font-size: 11px; font-weight: 800; }
.ocd-presets button:hover { border-color: #177c78; background: #e6f5f0; }

.ocd-display { position: relative; display: flex; flex-direction: column; min-height: 475px; overflow: hidden; padding: clamp(22px, 3vw, 32px); color: #fff9ed; background: radial-gradient(circle at 88% 10%, #427783 0, transparent 38%), linear-gradient(155deg, #142c3b, #09252e 70%, #0d3e42); box-shadow: 0 15px 32px #12333c2d; }
.ocd-display::before { position: absolute; top: -130px; right: -80px; width: 350px; height: 350px; border: 1px solid #ffffff1c; border-radius: 50%; box-shadow: 0 0 0 55px #ffffff07, 0 0 0 108px #ffffff06; content: ''; pointer-events: none; }
.ocd-display::after { position: absolute; right: -130px; bottom: -200px; width: 390px; height: 390px; border: 1px solid #ffffff13; border-radius: 50%; content: ''; pointer-events: none; }
.ocd-display > * { position: relative; z-index: 1; }
.ocd-display-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ocd-live { display: inline-flex; align-items: center; gap: 7px; color: #e8d5bc; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.ocd-live i { width: 8px; height: 8px; border-radius: 50%; background: #90e5b7; box-shadow: 0 0 0 4px #90e5b72a; }
.ocd-fullscreen { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #ffffff37; border-radius: 9px; color: #f5f8f1; background: #ffffff13; font-size: 11px; font-weight: 700; }
.ocd-fullscreen:hover { background: #ffffff27; }
.ocd-fullscreen svg { width: 16px; height: 16px; }
.ocd-display-copy { margin-top: auto; padding-top: 32px; }
.ocd-display-copy > p { margin: 0 0 11px; color: #ffd39d; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.ocd-display-copy h2 { max-width: 550px; margin: 0; font: 700 clamp(28px, 3.3vw, 42px)/1.12 Georgia, serif; letter-spacing: -.035em; overflow-wrap: anywhere; }
.ocd-display-copy time { display: block; min-height: 22px; margin-top: 11px; color: #c8dbd7; font-size: 13px; line-height: 1.5; }
.ocd-count { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 9px; margin-top: 27px; }
.ocd-unit { display: flex; min-width: 0; min-height: 98px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 5px; border: 1px solid #ffffff35; border-radius: 14px; background: #ffffff13; }
.ocd-unit strong { display: block; font-size: clamp(32px, 3.5vw, 49px); font-variant-numeric: tabular-nums; letter-spacing: -.05em; line-height: 1; }
.ocd-unit-days { border-color: #f3cb995c; background: #f5bf8331; }
.ocd-unit-days strong { color: #ffdfae; }
.ocd-unit span { color: #d4e4e0; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.ocd-display-bottom { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 25px; color: #abc8c8; font-size: 11px; line-height: 1.4; }
.ocd-display-bottom span:last-child { flex: 0 0 auto; text-align: right; }
.ocd-display.is-finished .ocd-live i { background: #ffc47e; box-shadow: 0 0 0 4px #ffc47e2a; }
.ocd-display.is-finished .ocd-unit-days { background: #f5bf8331; }
.ocd-display:fullscreen { display: flex; min-height: 100vh; width: 100vw; justify-content: center; padding: clamp(24px, 6vw, 80px); border-radius: 0; }
.ocd-display:fullscreen .ocd-display-copy { align-self: center; width: min(1100px, 100%); margin-top: auto; }
.ocd-display:fullscreen .ocd-count { max-width: 1100px; width: 100%; margin-inline: auto; }
.ocd-display:fullscreen .ocd-unit { min-height: clamp(100px, 18vh, 230px); }
.ocd-display:fullscreen .ocd-unit strong { font-size: clamp(48px, 10vw, 155px); }
.ocd-display:fullscreen .ocd-display-bottom { margin-top: auto; }
.online-countdown > .share-panel { margin-top: 18px; }

.ocd-how { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); gap: 35px; margin-top: 55px; }
.ocd-how-heading h2 { max-width: 380px; margin: 9px 0 13px; color: #173d42; font: 700 clamp(29px, 3.2vw, 39px)/1.08 Georgia, serif; letter-spacing: -.04em; }
.ocd-how-heading p { max-width: 370px; margin: 0; color: #61777c; font-size: 14px; line-height: 1.65; }
.ocd-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ocd-how-grid > div { min-width: 0; padding: 19px; border: 1px solid #dce5e1; border-radius: 17px; background: #fff; }
.ocd-how-grid > div > span { color: #bd7561; font: 700 29px/1 Georgia, serif; }
.ocd-how-grid h3 { margin: 19px 0 8px; color: #173d42; font-size: 15px; }
.ocd-how-grid p { margin: 0; color: #63777c; font-size: 12px; line-height: 1.6; }
.ocd-note { display: grid; grid-template-columns: .7fr 1.3fr; gap: 30px; align-items: center; margin-top: 18px; padding: 23px 28px; border: 1px solid #d9e3de; border-radius: 18px; background: #e8f0ec; }
.ocd-note h2 { margin: 6px 0 0; color: #1d4548; font: 700 24px/1.12 Georgia, serif; }
.ocd-note p { margin: 0; color: #4e686e; font-size: 13px; line-height: 1.65; }
.ocd-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.ocd-next a { position: relative; display: grid; gap: 5px; min-width: 0; padding: 18px 48px 18px 19px; border: 1px solid #d9e3de; border-radius: 15px; color: #153c42; background: #fff; transition: transform .16s ease, border-color .16s ease; }
.ocd-next a:hover { transform: translateY(-2px); border-color: #5e9690; }
.ocd-next a > span:first-child { color: #a75e49; font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.ocd-next a strong { font-size: 14px; }
.ocd-next a > span:last-child { position: absolute; top: 19px; right: 20px; font-size: 19px; }
.online-countdown > .cms-content-card { margin-top: 25px; }

@media (max-width: 900px) {
  .ocd-hero { grid-template-columns: minmax(0, 1fr) 130px; }
  .ocd-hero-art { width: 130px; height: 130px; }
  .ocd-orbit-center { font-size: 37px; }
  .ocd-workspace { grid-template-columns: 1fr; }
  .ocd-display { min-height: 360px; }
  .ocd-how { grid-template-columns: 1fr; gap: 19px; }
}
@media (max-width: 600px) {
  .page-online-countdown.has-breadcrumb { padding-top: 12px; }
  .ocd-hero { display: flex; align-items: center; min-height: 112px; padding: 12px 16px; border-radius: 17px; }
  .ocd-hero h1 { max-width: 245px; font-size: clamp(23px, 7vw, 27px); }
  .ocd-hero-copy > p { display: none; }
  .ocd-hero-art { position: absolute; top: -59px; right: -72px; width: 170px; height: 170px; opacity: .46; }
  .ocd-hero-art .ocd-orbit-center { display: none; }
  .ocd-workspace { gap: 12px; margin-top: 13px; }
  .ocd-builder, .ocd-display { border-radius: 18px; }
  .ocd-builder { padding: 20px 17px; }
  .ocd-section-heading p { margin-bottom: 19px; }
  .ocd-fields-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ocd-field input { padding: 0 9px; font-size: 13px; }
  .ocd-display { min-height: 333px; padding: 20px 17px; }
  .ocd-display-copy { padding-top: 29px; }
  .ocd-display-copy h2 { font-size: 29px; }
  .ocd-count { gap: 5px; margin-top: 23px; }
  .ocd-unit { min-height: 76px; border-radius: 10px; }
  .ocd-unit strong { font-size: clamp(29px, 9vw, 38px); }
  .ocd-unit span { font-size: 8px; letter-spacing: .03em; }
  .ocd-display-bottom { padding-top: 18px; font-size: 10px; }
  .ocd-how { margin-top: 36px; }
  .ocd-how-heading h2 { font-size: 29px; }
  .ocd-how-grid { grid-template-columns: 1fr; }
  .ocd-how-grid > div { padding: 16px; }
  .ocd-how-grid h3 { margin-top: 9px; }
  .ocd-note { grid-template-columns: 1fr; gap: 10px; padding: 19px; }
  .ocd-next { grid-template-columns: 1fr; }
}
@media (max-width: 360px) { .ocd-fullscreen span { display: none; } .ocd-unit strong { font-size: 28px; } }