.fc-stage { --cw: 80px; background: var(--fc-bg); cursor: zoom-in;
  --fc-bg: #0b0b0d; --fc-card: #1d1e22; --fc-card-top: #232429; --fc-ink: #ececec; --fc-dot: #d8d8d8; }
.fc-stage[data-theme="light"] { --fc-bg: #e4e5e8; --fc-card: #fbfbfb; --fc-card-top: #ffffff; --fc-ink: #1b1c20; --fc-dot: #3a3b40; }
.fc-stage[data-theme="retro"] { --fc-bg: #1a120b; --fc-card: #2b1f14; --fc-card-top: #33251a; --fc-ink: #ffb347; --fc-dot: #e59a3a; }
.fc-stage[data-theme="blue"] { --fc-bg: #08101f; --fc-card: #14203a; --fc-card-top: #192844; --fc-ink: #d6e4ff; --fc-dot: #9fb7e6; }
.fc-stage[data-theme="night"] { --fc-bg: #000000; --fc-card: #0e0707; --fc-card-top: #120909; --fc-ink: #b3261e; --fc-dot: #8f1f18; }
.fc-stage.is-full { cursor: default; }
.fc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--fc-ink); }
.fc [hidden] { display: none !important; }
.fc-row { display: flex; align-items: center; }
.fc-grp { display: flex; gap: calc(var(--cw) * .08); }
.fc-card { --w: var(--cw); --r: calc(var(--w) * .1); position: relative; width: var(--w); height: calc(var(--w) * 1.4);
  font-size: calc(var(--w) * 1.1); font-weight: 700; line-height: calc(var(--w) * 1.4); font-variant-numeric: tabular-nums;
  perspective: calc(var(--w) * 5); border-radius: var(--r); box-shadow: 0 calc(var(--w) * .04) calc(var(--w) * .12) rgba(0, 0, 0, .35); }
.fc-h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--fc-card); }
.fc-h span { display: block; height: calc(var(--w) * 1.4); text-align: center; letter-spacing: 0; }
.fc-u { top: 0; border-radius: var(--r) var(--r) 0 0; transform-origin: 50% 100%; background: linear-gradient(var(--fc-card-top), var(--fc-card)); }
.fc-d { top: 50%; border-radius: 0 0 var(--r) var(--r); transform-origin: 50% 0; }
.fc-d span { transform: translateY(-50%); }
.fc-flap { visibility: hidden; z-index: 2; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fc-card::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(1px, calc(var(--w) * .018)); transform: translateY(-50%);
  background: var(--fc-bg); z-index: 3; }
.fc-colon { width: calc(var(--cw) * .45); display: flex; flex-direction: column; align-items: center; gap: calc(var(--cw) * .34); }
.fc-colon::before, .fc-colon::after { content: ""; width: calc(var(--cw) * .12); height: calc(var(--cw) * .12); border-radius: 50%; background: var(--fc-dot); }
.fc-sec { display: flex; align-items: center; margin-left: calc(var(--cw) * .12); align-self: flex-end; }
.fc-sec .fc-colon { width: calc(var(--cw) * .3); gap: calc(var(--cw) * .2); }
.fc-sec .fc-colon::before, .fc-sec .fc-colon::after { width: calc(var(--cw) * .08); height: calc(var(--cw) * .08); }
.fc-sec .fc-card { --w: calc(var(--cw) * .55); }
.fc-sec .fc-grp { gap: calc(var(--cw) * .04); }
.fc-ampm { width: calc(var(--cw) * .54); margin-left: calc(var(--cw) * .12); align-self: flex-start; font-size: calc(var(--cw) * .26); font-weight: 700;
  letter-spacing: .04em; opacity: .8; }
.fc-date { margin-top: calc(var(--cw) * .22); font-size: calc(var(--cw) * .22); font-weight: 600; letter-spacing: .02em; opacity: .72; text-align: center; padding: 0 12px; }
.fc-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 4; }
.ctl label.switch { justify-content: flex-start; }