/* The bracelet needs a dark surround: the reader finds it as a bright shape enclosed by dark. */
:root { --surround: #1b1714; --accent: #f2c14e; --muted: #a89f90; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--surround); font-family: system-ui, sans-serif; }
.frame { height: 100%; display: flex; flex-direction: column; padding: 10px 14px 12px; gap: 10px; }
.frame__header { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.frame__brand { color: var(--accent); }
.frame__state { color: var(--muted); font-weight: 400; letter-spacing: 0; }
.frame__bracelet { display: block; margin: auto; max-width: 100%; }
.frame__countdown { height: 3px; background: #3a332c; border-radius: 2px; overflow: hidden; }
.frame__countdown-bar { height: 100%; width: 100%; background: var(--accent); transform-origin: left; }
.frame[data-state='waiting'] .frame__bracelet, .frame[data-state='waiting'] .frame__countdown { visibility: hidden; }