.oc-wrap { position: relative; width: 100%; height: 100%; min-height: clamp(360px,50vh,480px); }
.oc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#ocClip { transition: width 1.6s cubic-bezier(.2,0,0,1); }
.oc-overlay { position: absolute; inset: 0; }
.oc-node { opacity: 0; transition: opacity .5s ease; }
.oc-wrap.revealed .oc-node { opacity: 1; }
.oc-label { position: absolute; transform: translateY(-50%); display: flex; flex-direction: column; white-space: nowrap; line-height: 1.1; }
.oc-label.oc-right { padding-left: 14px; align-items: flex-start; }
.oc-label.oc-left { transform: translate(-100%,-50%); padding-right: 14px; align-items: flex-end; text-align: right; }
.oc-dis { font-family: var(--display); font-size: var(--fz-label); color: var(--ink); letter-spacing: -0.01em; line-height: 1.1; }
.oc-place { font-family: var(--display); font-size: var(--fz-note); color: var(--mute); letter-spacing: -0.005em; line-height: 1.2; }
.oc-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transform: translate(-50%,-50%); }
.oc-q { position: absolute; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ink); background: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 22px; color: var(--ink); opacity: 0; transition: opacity .5s ease .9s; }
.oc-wrap.revealed .oc-q { opacity: 1; }
.oc-div { position: absolute; width: 1px; height: 40px; background: var(--rule); transform: translateX(-50%); }
.oc-month { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: var(--fz-cap); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.oc-year { position: absolute; transform: translateX(-50%); font-family: var(--display); font-size: var(--fz-label); color: var(--ink); font-variant-numeric: tabular-nums; }
.oc-year.dim { color: var(--mute); }