@charset "UTF-8";
/* Floating monochrome timepieces: no cases, no frames, only light in the dark. */
.countdown {
  color: #f6f6f4;
  background: #050505;
}
.countdown::before {
  background:
    radial-gradient(ellipse 38% 38% at 49% 47%, rgba(255,255,255,.046), transparent 76%),
    radial-gradient(ellipse 17% 17% at 13% 18%, rgba(255,255,255,.026), transparent 80%),
    radial-gradient(ellipse 21% 20% at 85% 78%, rgba(255,255,255,.025), transparent 80%);
}
.countdown__topline, .countdown__intro, .countdown__bottomline { z-index: 3; }
.countdown__intro h1 { color: #f6f6f4; font-weight: 400; letter-spacing: .11em; }
.countdown__date, .countdown__footnote, .countdown__eyebrow, .countdown__subtitle { color: #aaa; }
.countdown .text-button { color: #eaeae8; border-color: rgba(255,255,255,.38); text-decoration: none; white-space: nowrap; }
.countdown .text-button:hover { border-color: #fff; }
.countdown .text-button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.countdown__actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px clamp(15px, 2.6vw, 36px); }
.countdown__field { min-height: 620px; isolation: isolate; }
.countdown__interference {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.countdown__interference path {
  fill: none;
  stroke: rgba(245,245,245,.12);
  stroke-width: 1.15;
  stroke-dasharray: 3 15;
  animation: interference-drift 21s linear infinite;
}
.countdown__interference path:nth-child(even) {
  stroke: rgba(245,245,245,.075);
  stroke-dasharray: 1 24;
  animation-duration: 28s;
  animation-direction: reverse;
}
.countdown__interference circle {
  fill: none;
  stroke: rgba(255,255,255,.065);
  stroke-width: 1.2;
  stroke-dasharray: 2 20;
  transform-box: fill-box;
  transform-origin: center;
  animation: echo-pulse 11s ease-in-out infinite;
}
.countdown__interference circle:last-child { animation-delay: -5.5s; }
@keyframes interference-drift { to { stroke-dashoffset: -216; } }
@keyframes echo-pulse { 0%, 100% { opacity: .35; transform: scale(.93); } 50% { opacity: 1; transform: scale(1.08); } }

.clock-card {
  --tilt: 0deg;
  isolation: isolate;
  overflow: visible;
  width: clamp(160px, 16vw, 240px);
  min-height: 146px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #f7f7f5;
  background: none;
  box-shadow: none;
  text-shadow: 0 0 19px rgba(255,255,255,.15);
  animation: time-drift 9s ease-in-out infinite;
  transition: left .85s ease, top .85s ease, width .85s ease, opacity .45s ease;
}
.clock-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -46px -38px;
  pointer-events: none;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.085), rgba(255,255,255,.016) 42%, transparent 73%);
  filter: blur(14px);
  opacity: .65;
  transform: scale(.88);
  animation: field-breathe 10s ease-in-out infinite;
}
.clock-card::after { content: none; }
.clock-card:nth-of-type(3n)::before { animation-delay: -3s; }
.clock-card:nth-of-type(3n + 1)::before { animation-delay: -6s; }
.clock-card:hover::before { opacity: 1; transform: scale(1.14); }
.clock-card > * { position: relative; z-index: 1; }
@keyframes time-drift {
  0%, 100% { transform: translate(-50%, calc(-50% - 5px)) rotate(var(--tilt)); }
  50% { transform: translate(-50%, calc(-50% + 6px)) rotate(var(--tilt)); }
}
@keyframes field-breathe { 0%, 100% { opacity: .48; transform: scale(.87); } 50% { opacity: .84; transform: scale(1.18); } }
.clock-card__top {
  color: #aaa;
  font-size: .56rem;
  line-height: 1.5;
  letter-spacing: .11em;
}
.clock-card__top time { white-space: normal; text-align: right; }
.clock-card h2 {
  margin: 10px 0 8px;
  color: #f5f5f3;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(.83rem, 1.44vw, 1.24rem);
  font-weight: 400;
  line-height: 1.5;
}
.clock-card__readout {
  align-self: flex-start;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: none;
  box-shadow: none;
  text-shadow: 0 0 25px rgba(255,255,255,.37);
}
.clock-card__days, .clock-card__time {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.06rem, 1.65vw, 1.6rem);
  font-weight: 200;
  letter-spacing: -.045em;
}
.clock-card__day-unit, .clock-card__status { color: #b4b4b4; }
.clock-card__status { margin: 8px 0 0; font-size: .61rem; }
.clock-card.is-done:not([data-slot="0"]) { opacity: .72; }

.clock-card[data-slot="0"] {
  --tilt: -1deg;
  z-index: 2;
  width: clamp(380px, 44vw, 660px);
  min-height: 278px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.clock-card[data-slot="0"]::before {
  inset: -72px -75px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.13), rgba(255,255,255,.034) 42%, transparent 73%);
  filter: blur(23px);
}
.clock-card[data-slot="0"] .clock-card__top { font-size: .73rem; }
.clock-card[data-slot="0"] h2 { margin: 15px 0 11px; font-size: clamp(1.75rem, 3.5vw, 3.2rem); }
.clock-card[data-slot="0"] .clock-card__days,
.clock-card[data-slot="0"] .clock-card__time { font-size: clamp(3rem, 7.1vw, 7.4rem); font-weight: 200; }
.clock-card[data-slot="0"] .clock-card__day-unit { font-size: 1.05rem; }
.clock-card[data-slot="0"] .clock-card__status { font-size: .78rem; }
.clock-card[data-slot="1"] { --tilt: -4deg; left: 14%; top: 17%; width: clamp(135px, 13vw, 195px); min-height: 128px; animation-delay: -1.5s; }
.clock-card[data-slot="2"] { --tilt: 3deg; left: 87%; top: 17%; width: clamp(175px, 18vw, 265px); min-height: 170px; animation-delay: -4s; }
.clock-card[data-slot="3"] { --tilt: -3deg; left: 89%; top: 50%; width: clamp(150px, 15vw, 220px); min-height: 144px; animation-delay: -6s; }
.clock-card[data-slot="4"] { --tilt: 2deg; left: 14%; top: 83%; width: clamp(170px, 18vw, 260px); min-height: 162px; animation-delay: -2.5s; }
.clock-card[data-slot="5"] { --tilt: -2deg; left: 86%; top: 83%; width: clamp(160px, 16vw, 230px); min-height: 159px; animation-delay: -7.5s; }
.clock-card[data-slot="1"] h2, .clock-card[data-slot="3"] h2 { font-size: clamp(.72rem, 1.15vw, .97rem); }
.clock-card[data-month="true"] .clock-card__days { color: #efefed; }
/* Retain the earlier meeting-clock low-battery idea in white light, not brass. */
#card-meeting .clock-card__readout { animation: quiet-flicker 8.2s linear infinite; }
@keyframes quiet-flicker {
  0%, 13%, 17%, 38%, 41%, 70%, 74%, 100% { opacity: 1; }
  14%, 39%, 71% { opacity: .72; }
  15%, 40%, 72% { opacity: .88; }
}

@media (max-width: 900px) {
  .countdown { overflow: visible; }
  .countdown__interference { display: none; }
  .countdown__field { min-height: auto; gap: clamp(20px, 4vw, 38px); }
  .clock-card, .clock-card[data-slot] {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-width: 0;
    min-height: 136px;
    padding: 12px 2px;
    transform: none;
    animation: mobile-drift 9s ease-in-out infinite;
    align-self: start;
  }
  .clock-card[data-slot="0"] { min-height: 246px; padding: 20px 8px; }
  .clock-card[data-slot="1"] { min-height: 122px; }
  .clock-card[data-slot="2"] { min-height: 176px; }
  .clock-card[data-slot="3"] { min-height: 128px; }
  .clock-card[data-slot="4"] { min-height: 153px; }
  .clock-card[data-slot="5"] { min-height: 173px; }
  .clock-card h2 { font-size: clamp(.82rem, 2vw, 1.1rem); }
  .clock-card[data-slot="0"] h2 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); }
  .clock-card__days, .clock-card__time { font-size: clamp(.85rem, 2.2vw, 1.28rem); }
  .clock-card[data-slot="0"] .clock-card__days,
  .clock-card[data-slot="0"] .clock-card__time { font-size: clamp(2.1rem, 6.2vw, 3.8rem); }
}
@keyframes mobile-drift { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
@media (max-width: 600px) {
  .countdown__field { gap: 25px 19px; }
  .countdown__bottomline { align-items: flex-end; }
  .countdown__actions { row-gap: 5px; }
  .clock-card, .clock-card[data-slot] { min-height: 133px; padding: 9px 1px; }
  .clock-card[data-slot="0"] { min-height: 219px; padding: 18px 5px; }
  .clock-card[data-slot="1"] { min-height: 116px; }
  .clock-card[data-slot="2"] { min-height: 163px; }
  .clock-card[data-slot="3"] { min-height: 121px; }
  .clock-card[data-slot="4"] { min-height: 143px; }
  .clock-card[data-slot="5"] { min-height: 162px; }
  .clock-card h2, .clock-card[data-slot="1"] h2, .clock-card[data-slot="3"] h2 { font-size: clamp(.7rem, 2.95vw, .94rem); }
  .clock-card[data-slot="0"] h2 { font-size: clamp(1.28rem, 5.6vw, 1.95rem); }
  .clock-card__days, .clock-card__time { font-size: clamp(.72rem, 2.9vw, 1rem); }
  .clock-card[data-slot="0"] .clock-card__days,
  .clock-card[data-slot="0"] .clock-card__time { font-size: clamp(1.6rem, 5.8vw, 2.4rem); }
  .clock-card__top { font-size: .48rem; letter-spacing: .02em; }
  .clock-card__top time { font-size: .45rem; }
  .clock-card[data-month="true"] .clock-card__days { font-size: clamp(.7rem, 2.7vw, .93rem); }
  .clock-card[data-month="true"][data-slot="0"] .clock-card__days { font-size: clamp(1.2rem, 5vw, 1.9rem); }
}
@media (max-width: 340px) {
  .clock-card[data-slot="0"] .clock-card__time { font-size: 1.3rem; }
  .clock-card__readout { gap: 0 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .clock-card, .clock-card::before, .countdown__interference path,
  .countdown__interference circle, #card-meeting .clock-card__readout {
    animation: none !important;
  }
  .clock-card { transform: translate(-50%, -50%) rotate(var(--tilt)); }
  .clock-card::before { opacity: .42; transform: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .clock-card { transform: none; }
}