:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101318; color: #f4f5f7; }
* { box-sizing: border-box; }
body { min-height: 100svh; margin: 0; padding: 24px; display: grid; place-items: center; }
main { width: 100%; max-width: 430px; padding: 36px; background: #191e26; border: 1px solid #343b46; border-radius: 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: #b9c2d0; font: 14px ui-monospace, monospace; }
.indicator { width: 8px; height: 8px; border-radius: 50%; background: #f99b8e; }
.clock-panel { margin-bottom: 24px; text-align: center; }
.clock-caption { color: #bdc5d1; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#clock { display: block; width: 220px; max-width: 100%; margin: 0 auto 12px; }
.clock-face { fill: #101318; stroke: #667080; stroke-width: 2; }
#clock-ticks { stroke: #667080; stroke-width: 1; }
.clock-numbers { fill: #bdc5d1; font: 13px system-ui, sans-serif; text-anchor: middle; }
#clock-hands { stroke-linecap: round; }
#hour-hand { stroke: #f4f5f7; stroke-width: 6; }
#minute-hand { stroke: #f4f5f7; stroke-width: 3; }
#second-hand { stroke: #ff9a8a; stroke-width: 1.5; }
.clock-pin { fill: #ff9a8a; }
.timezone-picker { position: relative; }
#timezone-options { position: absolute; top: calc(100% - 16px); left: 0; right: 0; z-index: 2; max-height: 250px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; border: 1px solid #667080; border-radius: 8px; background: #222d3c; box-shadow: 0 8px 24px #0006; }
#timezone-options li { padding: 12px 10px; cursor: pointer; overflow-wrap: anywhere; font-size: 14px; }
#timezone-options li[aria-selected=true], #timezone-options li:hover { background: #3b4c65; border-radius: 4px; }
h1 { margin: 30px 0 12px; font-size: 30px; letter-spacing: -.7px; }
p { color: #bdc5d1; line-height: 1.6; margin: 0 0 28px; }
label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
input:not([type=hidden]) { width: 100%; min-width: 0; border: 1px solid #667080; border-radius: 8px; padding: 13px; background: #101318; color: inherit; font: inherit; margin-bottom: 18px; }
.help { font-size: 13px; margin-top: -8px; margin-bottom: 24px; }
button { width: 100%; min-height: 48px; border: 0; border-radius: 8px; background: #e6ecf5; color: #141820; cursor: pointer; font: 600 16px system-ui, sans-serif; padding: 14px; }
button:hover { filter: brightness(1.08); }
.alarm { background: #ff9a8a; min-height: 72px; font-size: 20px; }
.secondary { background: transparent; color: #bdc5d1; margin-top: 14px; font-size: 14px; }
.repeat-picker { min-width: 0; border: 0; padding: 0; margin: 4px 0 24px; }
.repeat-picker legend { padding: 0; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.repeat-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.repeat-day { position: relative; margin: 0; cursor: pointer; }
.repeat-day input[type=checkbox] { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; opacity: 0; }
.repeat-day span { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #343b46; color: #bdc5d1; border: 1px solid #667080; font-size: 13px; }
.repeat-day input:checked + span { background: #ff9a8a; border-color: #ff9a8a; color: #141820; }
.repeat-day input:focus-visible + span { outline: 3px solid #a4c8ff; outline-offset: 3px; }
#repeat-all { width: auto; min-height: 40px; padding: 8px 0; margin-top: 6px; background: transparent; color: #a4c8ff; font-size: 13px; }
.repeat-picker .help { margin: 4px 0 0; }
:focus-visible { outline: 3px solid #a4c8ff; outline-offset: 4px; }
.notice { border-left: 3px solid #a4c8ff; padding: 12px 14px; margin-bottom: 24px; background: #222d3c; line-height: 1.5; }
@media (max-width: 440px) { main { padding: 26px; } }