:root { color-scheme:dark; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; background:#000; color:#fff; -webkit-tap-highlight-color:transparent; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
button { font:inherit; border:0; padding:0; cursor:pointer; touch-action:manipulation; }
button:focus-visible { outline:2px solid #ff9f40; outline-offset:4px; }
[hidden] { display:none!important; }
.clock { --unit:min(100vw,430px); position:relative; top:var(--screen-offset,0px); width:var(--unit); height:var(--screen-height,100dvh); margin:0 auto; background:#000; overflow:hidden; }
.status { position:absolute; z-index:3; top:calc(var(--unit)*.045); left:13.5%; right:9%; display:flex; align-items:center; justify-content:space-between; font-size:calc(var(--unit)*.042); font-weight:600; line-height:1; pointer-events:none; }
.status-icons { display:flex; align-items:center; gap:7px; }
.battery { background:linear-gradient(90deg,#fff 48%,#888 48%); color:#000; border-radius:5px; font-size:13px; line-height:15px; font-weight:700; width:28px; text-align:center; position:relative; }
.battery:after { content:""; position:absolute; width:2px; height:5px; background:#555; right:-3px; top:5px; border-radius:0 2px 2px 0; }
.stopwatch { position:absolute; inset:0; }
.time-wrap { position:absolute; top:18%; width:100%; display:flex; align-items:center; justify-content:center; }
#time { font-size:calc(var(--unit)*.20465); line-height:1.2; font-weight:100; font-variant-numeric:tabular-nums; letter-spacing:0; white-space:nowrap; }
.controls { position:absolute; top:46.137%; left:3.72%; right:3.72%; display:flex; justify-content:space-between; }
.control { width:calc(var(--unit)*.19535); height:calc(var(--unit)*.19535); border-radius:50%; font-size:calc(var(--unit)*.0403); font-weight:400; display:grid; place-items:center; }
.reset { background:#333; color:#fff; }
.toggle { background:#142c17; color:#65d16b; }
.toggle.running { background:#351211; color:#ff514b; }
.control:active { filter:brightness(1.4); }
.toggle:disabled { cursor:default; }
.separator { position:absolute; top:56.87%; left:3.5%; right:3.5%; height:.5px; background:#303030; }
.picture-page { position:absolute; top:6.33%; left:0; width:100%; height:84.77%; overflow:hidden; pointer-events:none; }
.picture-page img { width:100%; height:100%; object-fit:fill; display:block; }
.tabs { position:absolute; z-index:4; left:4.884%; right:4.651%; bottom:max(2.25%,calc(env(safe-area-inset-bottom) - 13px)); height:calc(var(--unit)*.144186); }
.tabs>img { width:100%; height:100%; display:block; pointer-events:none; }
.tab-buttons { position:absolute; inset:0; display:grid; grid-template-columns:28% 23.5% 23.5% 25%; }
.tab-buttons button { background:transparent; border-radius:100px; }
.clock[data-tab="world"] .tab-buttons { grid-template-columns:35% 19% 23% 23%; }
.clock[data-tab="alarm"] .tab-buttons { grid-template-columns:28% 30% 21% 21%; }
.clock[data-tab="stopwatch"] .tab-buttons { grid-template-columns:31% 19.5% 30.5% 19%; }
.clock[data-tab="timers"] .tab-buttons { grid-template-columns:31% 23% 20% 26%; }
html.ios .status { display:none; }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }