*{box-sizing:border-box}
:root{--surface:#fff;--ink:#111;--pill:rgba(255,255,255,.92);--border:#0000001f;--shadow:#00000012;color-scheme:light}
:root[data-theme="dark"]{--surface:#101216;--ink:#f7f8fa;--pill:rgba(30,34,42,.94);--border:#ffffff30;--shadow:#00000050;color-scheme:dark}
html,body{margin:0;background:var(--browser-surface,var(--surface));color:var(--ink);font-family:Arial,Helvetica,sans-serif}
#clock{position:relative;width:100%;height:100svh;height:100dvh;min-width:393px;min-height:0;overflow:hidden;background:var(--surface);outline:none}
canvas{position:absolute;inset:0;width:100%;height:100%}
.time-wrap{position:absolute;top:25%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;white-space:nowrap}
time{display:block;font-size:clamp(68px,12vw,176px);line-height:1;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:0}
.clock-type{display:block}.clock-seconds,.clock-period{color:inherit}.eyebrow,.date{display:none}
.tilt-controls{position:absolute;top:max(20px,env(safe-area-inset-top));right:18px;display:flex;flex-direction:column;align-items:stretch;gap:8px;z-index:2;transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s}
.controls-open .tilt-controls{transform:translateX(0);opacity:1;pointer-events:auto}
.tilt-controls button{border:1px solid var(--border);border-radius:999px;background:var(--pill);color:var(--ink);padding:12px 15px;font:500 13px Arial;cursor:pointer;min-height:44px;white-space:nowrap;box-shadow:0 4px 18px var(--shadow);backdrop-filter:blur(14px)}
.tilt-controls button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.tilt-controls button:disabled{opacity:.6;cursor:default}
#clock:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
#tilt-status{position:absolute;top:max(182px,calc(env(safe-area-inset-top) + 162px));right:20px;left:20px;text-align:right;font-size:12px;color:var(--ink);pointer-events:none;z-index:2}
@media (max-width:600px), (pointer:coarse){#clock{height:100dvh;min-height:100svh}}
@media(prefers-reduced-motion:reduce){.tilt-controls{transition:none}canvas{opacity:.85}}

canvas[hidden],button[hidden],#tilt-status[hidden]{display:none}
#clock:not([data-face="words"]) .time-wrap{padding:10px 14px;border-radius:18px;background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(8px)}

#clock[data-face="bath"]{background-color:#cbd2d7;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23edf1f3%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20fill%3D%22%23cbd2d7%22%2F%3E%3Cg%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%23cbd2d7%22%20stroke-width%3D%221%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%22176%22%20height%3D%2286%22%20rx%3D%223%22%2F%3E%3Crect%20x%3D%22-88%22%20y%3D%2292%22%20width%3D%22176%22%20height%3D%2286%22%20rx%3D%223%22%2F%3E%3Crect%20x%3D%2292%22%20y%3D%2292%22%20width%3D%22176%22%20height%3D%2286%22%20rx%3D%223%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M5%205H175M5%205V84M-85%2095H85M95%2095H265M95%2095V174%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:90px 90px}
:root[data-theme="dark"] #clock[data-face="bath"]{background-color:#10161d;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%232c343d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23192129%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20fill%3D%22%2310161d%22%2F%3E%3Cg%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%2310161d%22%20stroke-width%3D%221%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%22176%22%20height%3D%2286%22%20rx%3D%223%22%2F%3E%3Crect%20x%3D%22-88%22%20y%3D%2292%22%20width%3D%22176%22%20height%3D%2286%22%20rx%3D%223%22%2F%3E%3Crect%20x%3D%2292%22%20y%3D%2292%22%20width%3D%22176%22%20height%3D%2286%22%20rx%3D%223%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2348525e%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M5%205H175M5%205V84M-85%2095H85M95%2095H265M95%2095V174%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}

#clock[data-face="words"]{background:var(--word-surface,#0c1015);--ink:#f7f8fa;--pill:rgba(30,34,42,.94);--border:#ffffff30}
#clock[data-face="words"] .time-wrap{display:none}

#clock[data-face="fireflies"]{background:#030c14;--ink:#f7f8fa;--pill:rgba(14,32,34,.94);--border:#ffffff25}
#clock[data-face="fireflies"] .time-wrap{display:none}

#clock[data-face="paint"]{background:#f7f3eb;--ink:#222;--pill:#fffdf5e8;--border:#00000020}
#clock[data-face="marbles"]{background:#e8eff3;--ink:#24384a;--pill:#fffffff0;--border:#00000020}
#clock[data-face="paint"] .time-wrap{display:none}
#clock[data-face="marbles"] .time-wrap{color:var(--ink);--surface:var(--marble-surface,#f4f7f9)}

:root[data-theme="dark"] #clock[data-face="marbles"]{--ink:#f7f8fa;--pill:rgba(24,32,43,.94);--border:#ffffff30}