.oc-stage { --oc-bg: #0c0d10; --oc-ink: #f2f3f5; --oc-sub: color-mix(in srgb, var(--oc-ink) 62%, var(--oc-bg)); --oc-face: color-mix(in srgb, var(--oc-ink) 5%, var(--oc-bg));
  --oc-hand2: #ff5a4e; --oc-tick: color-mix(in srgb, var(--oc-ink) 40%, var(--oc-bg));
  --oc-ff: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --oc-fw: 650;
  background: var(--oc-bg); color: var(--oc-ink); cursor: zoom-in; transition: background-color .25s; }
.oc-stage[data-theme="light"] { --oc-bg: #f6f6f4; --oc-ink: #15161a; --oc-face: #ffffff; --oc-hand2: #d93025; }
.oc-stage[data-theme="blue"] { --oc-bg: #0a1630; --oc-ink: #d9e6ff; --oc-face: #10204a; --oc-hand2: #7cc4ff; }
.oc-stage[data-theme="green"] { --oc-bg: #020a04; --oc-ink: #4dff7a; --oc-face: #06140a; --oc-hand2: #b4ff8a; }
.oc-stage[data-theme="amber"] { --oc-bg: #0d0802; --oc-ink: #ffb000; --oc-face: #1a1005; --oc-hand2: #ffd27a; }
.oc-stage[data-theme="custom"] { --oc-hand2: var(--oc-ink); }
.oc-stage[data-font="thin"] { --oc-fw: 200; }
.oc-stage[data-font="rounded"] { --oc-ff: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Varela Round", system-ui, sans-serif; --oc-fw: 700; }
.oc-stage[data-font="mono"] { --oc-ff: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --oc-fw: 600; }
.oc-stage[data-font="serif"] { --oc-ff: ui-serif, Georgia, Cambria, "Times New Roman", serif; --oc-fw: 500; }
.oc-stage[data-font="narrow"] { --oc-ff: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; --oc-fw: 700; }
.oc-stage.is-full { cursor: default; }
.oc-box { position: absolute; inset: 0; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 12px; text-align: center; font-family: var(--oc-ff); }
.oc-box [hidden] { display: none !important; }
.oc-digital { font-weight: var(--oc-fw); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; letter-spacing: -0.01em; font-size: 20cqh; }
.oc-stage[data-font="narrow"] .oc-digital { font-stretch: condensed; }
.oc-s { opacity: .55; font-size: .5em; margin-left: .04em; }
.oc-ap { font-size: .28em; margin-left: .25em; font-weight: 600; letter-spacing: .04em; color: var(--oc-sub); vertical-align: .2em; }
.oc-analog { display: none; width: min(64cqh, 88cqw); height: min(64cqh, 88cqw); overflow: visible; }
.oc-stage[data-style="analog"] .oc-analog { display: block; }
.oc-stage[data-style="analog"] .oc-digital { display: none; }
.oc-stage[data-style="analog"] .oc-box:not(:has(.oc-date:not([hidden]))):not(:has(.oc-second:not([hidden]))) .oc-analog { width: min(86cqh, 90cqw); height: min(86cqh, 90cqw); }
.oc-face { fill: var(--oc-face); stroke: var(--oc-tick); stroke-width: 1.5; }
.oc-tk { stroke: var(--oc-tick); stroke-width: 1.2; stroke-linecap: round; }
.oc-tk.big { stroke: var(--oc-ink); stroke-width: 3; }
.oc-num { fill: var(--oc-ink); font: var(--oc-fw) 13px/1 var(--oc-ff); text-anchor: middle; dominant-baseline: central; }
.oc-apd { fill: var(--oc-sub); font: 600 9px/1 var(--oc-ff); text-anchor: middle; letter-spacing: .08em; }
.oc-hh, .oc-mh { stroke: var(--oc-ink); stroke-linecap: round; }
.oc-hh { stroke-width: 6; }
.oc-mh { stroke-width: 4; }
.oc-sh { stroke: var(--oc-hand2); stroke-width: 1.6; stroke-linecap: round; }
.oc-shc, .oc-pin { fill: var(--oc-hand2); }
.oc-date { margin: 0; color: var(--oc-sub); font-weight: 500; font-size: max(13px, 6.5cqh); line-height: 1.2; }
.oc-zone { margin: 0; color: var(--oc-sub); font-weight: 600; font-size: max(12px, 4.5cqh); letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.oc-second { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; justify-content: center; font-size: max(13px, 6cqh); line-height: 1.2;
  padding: .3em .9em; border-radius: 999px; border: 1px solid var(--oc-tick); max-width: 94%; }
.oc2-city { color: var(--oc-sub); font-weight: 600; }
.oc2-time { font-weight: var(--oc-fw); font-variant-numeric: tabular-nums; }
.oc2-diff { color: var(--oc-sub); font-size: .75em; }
.oc-sel { width: 100%; margin-top: 6px; max-width: 100%; }
.oc-sws { display: grid; gap: 10px; }
.panel [hidden] { display: none !important; }
.oc-name { margin-top: 10px; display: grid; gap: 6px; }
.oc-name input { width: 100%; box-sizing: border-box; }
.oc-colors { display: grid; grid-template-columns: auto 52px auto 52px; gap: 8px 10px; align-items: center; margin-top: 10px; }
.oc-colors input[type="color"] { width: 52px; height: 40px; padding: 0; border: 1px solid var(--field-border); border-radius: 10px; background: none; cursor: pointer; }
.oc-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.oc-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.oc-check .hint { margin: 0; flex: 1 1 220px; }
@media (max-width: 420px) { .oc-stage .fs-btn span { display: none; } }
@media (prefers-reduced-motion: reduce) { .oc-stage { transition: none; } }