:root{--color-paper:#fff;--color-ink:#000;--font-sans:system-ui, -apple-system, "Helvetica Neue", sans-serif;--font-mono:ui-monospace, "SF Mono", Menlo, monospace;--text-ui:.75rem;--text-body:1rem;--text-lg:1.5rem;--text-display:clamp(2rem, 11.5vw, 10rem);--tracking-ui:.08em;--space-1:4px;--space-2:8px;--space-3:16px;--space-4:32px;--space-5:64px;--stroke-thin:1px;--stroke-bold:2px;--clock-size:min(80vmin, 36rem);--radius:0}*,:before,:after{box-sizing:border-box;margin:0}html,body{height:100%}body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-sans);font-size:var(--text-body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}:focus-visible{outline:var(--stroke-thin) solid var(--color-ink);outline-offset:var(--space-1)}#app{min-height:100%;padding:var(--space-3);grid-template-rows:auto 1fr auto;display:grid}.switcher{justify-content:center;gap:var(--space-4);display:flex}.switcher__item{appearance:none;border:0;border-bottom:var(--stroke-thin) solid transparent;padding:var(--space-2) 0;color:inherit;cursor:pointer;background:0 0;font-family:inherit}.switcher__item[aria-pressed=true]{border-bottom-color:var(--color-ink)}.controls{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.controls__group{align-items:center;gap:var(--space-3);display:flex}.controls__button{appearance:none;border:0;border-bottom:var(--stroke-thin) solid transparent;padding:var(--space-2) 0;color:inherit;cursor:pointer;background:0 0;font-family:inherit}.controls__button[aria-pressed=true]{border-bottom-color:var(--color-ink)}.color{width:var(--space-4);height:var(--space-4);border:var(--stroke-thin) solid var(--color-ink);border-radius:var(--radius);cursor:pointer;display:block;overflow:hidden}.color:focus-within{outline:var(--stroke-thin) solid var(--color-ink);outline-offset:var(--space-1)}.color__input{appearance:none;cursor:pointer;border:0;width:200%;height:200%;margin:-50%;padding:0;display:block}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.stage{place-items:center;display:grid}.view{justify-items:center;gap:var(--space-3);display:grid}.analog{width:var(--clock-size);height:auto;color:var(--color-ink);display:block}.analog__ring{fill:none;stroke:var(--color-ink);stroke-width:1px}.analog__tick,.analog__hand{stroke:var(--color-ink);stroke-linecap:butt}.analog__tick{stroke-width:1px}.analog__tick--quarter{stroke-width:3px}.analog__hand--hour{stroke-width:4px}.analog__hand--minute{stroke-width:2px}.analog__hand--second{stroke-width:.75px}.analog__pivot{fill:var(--color-paper);stroke:var(--color-ink);stroke-width:1px}.digital{font-family:var(--font-mono);font-size:var(--text-display);letter-spacing:-.02em;white-space:nowrap;font-weight:300;line-height:1}.zones{justify-items:stretch;gap:var(--space-4);width:min(100%,40rem)}.zones__add{gap:var(--space-2);display:grid}.zones__input{appearance:none;width:100%;padding:var(--space-2) 0;border:0;border-bottom:var(--stroke-thin) solid var(--color-ink);border-radius:var(--radius);color:inherit;font:inherit;background:0 0}.zones__input::placeholder{color:inherit;opacity:.4}.zones__input:focus-visible{border-bottom-width:var(--stroke-bold);outline:none}.zones__list{border-top:var(--stroke-thin) solid var(--color-ink);padding:0;list-style:none}.zones__row{grid-template-columns:1fr auto auto var(--space-4);align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:var(--stroke-thin) solid var(--color-ink);display:grid}.zones__place{gap:var(--space-1);min-width:0;display:grid}.zones__city{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.zones__time{font-family:var(--font-mono);font-size:var(--text-lg)}.zones__remove{appearance:none;padding:var(--space-1) var(--space-2);color:inherit;font:inherit;font-size:var(--text-lg);cursor:pointer;background:0 0;border:0;justify-self:end;line-height:1}@media (width<=30rem){.zones__row{grid-template-columns:1fr auto var(--space-4);row-gap:var(--space-1);grid-template-areas:"place time remove""diff diff diff"}.zones__place{grid-area:place}.zones__time{grid-area:time}.zones__remove{grid-area:remove}.zones__diff{grid-area:diff}}.label{font-size:var(--text-ui);letter-spacing:var(--tracking-ui);text-transform:uppercase}