.demo-clock{align-items:center;display:inline-flex;position:relative}.demo-clock-pill{border:1px solid var(--ui-accent-border);background:var(--ui-accent-soft);height:30px;color:var(--ui-accent-deep);font:inherit;cursor:pointer;white-space:nowrap;transition:background .2s var(--ui-ease), border-color .2s var(--ui-ease), color .2s var(--ui-ease);border-radius:999px;align-items:center;gap:7px;padding:0 12px;font-size:12.5px;font-weight:600;display:inline-flex}.demo-clock-pill:hover{background:var(--ui-accent-tint)}.demo-clock-pill b{font-variant-numeric:tabular-nums;letter-spacing:.01em;font-weight:700}.demo-clock-pill i{font-size:13px}.demo-clock-pill.is-warning{color:#8a4b00;animation:demo-clock-pulse 1.6s var(--ui-ease) infinite alternate;background:#fff4e5;border-color:#f3c987}@keyframes demo-clock-pulse{0%{box-shadow:0 0 #f3b44666}to{box-shadow:0 0 0 6px #f3b44600}}.demo-clock-note{z-index:60;background:var(--ui-surface);width:300px;color:var(--ui-text);border:1px solid var(--ui-border);animation:demo-clock-in .22s var(--ui-ease);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.5;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 12px 32px #16181d24}.demo-clock-note p{margin:0}.demo-clock-note small{color:var(--ui-muted);margin-top:6px;font-size:12px;display:block}.demo-clock-note.is-warning{border-color:#f3c987}@keyframes demo-clock-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}@media (max-width:760px){.demo-clock-label{display:none}.demo-clock-note{width:auto;position:fixed;top:56px;left:12px;right:12px}}@media (prefers-reduced-motion:reduce){.demo-clock-pill.is-warning,.demo-clock-note{animation:none}}