:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#000;--fg:#e8e8e8;--fg-dim:#b0b0b0;--card-bg:#1c1c1e;--card-fg:#f2f2f2;--hinge:#0009;--card-shadow:none;--btn-fg:#fff;--status-fg:#b04a4a;--flap-shade:#00000038;--accent:#d8b48a}html[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#eceff1;--fg:#1c1c1e;--fg-dim:#5a5f66;--card-bg:#fff;--card-fg:#1c1c1e;--hinge:#0000001f;--card-shadow:0 2px 8px #0000001f;--btn-fg:#1c1c1e;--status-fg:#b04a4a;--flap-shade:#00000014;--accent:#8a6a45}@media (prefers-color-scheme:light){html:not([data-theme]){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#eceff1;--fg:#1c1c1e;--fg-dim:#5a5f66;--card-bg:#fff;--card-fg:#1c1c1e;--hinge:#0000001f;--card-shadow:0 2px 8px #0000001f;--btn-fg:#1c1c1e;--status-fg:#b04a4a;--flap-shade:#00000014;--accent:#8a6a45}}*{box-sizing:border-box}html,body{background:var(--bg);overscroll-behavior:none;height:100%;margin:0;padding:0;transition:background-color .3s}body{height:100dvh;color:var(--fg);-webkit-user-select:none;user-select:none;touch-action:manipulation;cursor:default;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;transition:background-color .3s,color .3s;display:flex}#app{flex:1;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.clock{flex-direction:column;justify-content:center;align-items:center;transition:transform 1s ease-in-out;display:flex}.time{--card-h:min(32vh, 16vw);align-items:flex-end;gap:calc(var(--card-h) * .12);display:flex}.seconds-group{--card-h:calc(min(32vh, 16vw) * .6);align-items:flex-end;gap:calc(var(--card-h) * .12);display:flex}.seconds-group[hidden]{display:none}.colon{font-variant-numeric:tabular-nums;font-size:calc(var(--card-h) * .5);color:var(--fg-dim);padding-bottom:calc(var(--card-h) * .15);font-weight:600;line-height:1;transition:color .3s}.flip-digit{width:calc(var(--card-h) * .72);height:var(--card-h);font-size:calc(var(--card-h) * .8);font-variant-numeric:tabular-nums;color:var(--card-fg);perspective:calc(var(--card-h) * 2);-webkit-perspective:calc(var(--card-h) * 2);border-radius:calc(var(--card-h) * .08);box-shadow:var(--card-shadow);font-weight:600;transition:color .3s,box-shadow .3s;position:relative}.flip-digit .half,.flip-digit .flap{background:var(--card-bg);box-sizing:border-box;width:100%;height:50%;transition:background-color .3s;position:absolute;left:0;overflow:hidden}.flip-digit .upper,.flip-digit .flap-top{border-radius:calc(var(--card-h) * .08) calc(var(--card-h) * .08) 0 0;top:0}.flip-digit .lower,.flip-digit .flap-bottom{border-radius:0 0 calc(var(--card-h) * .08) calc(var(--card-h) * .08);bottom:0}.flip-digit .upper:after,.flip-digit .lower:after{content:"";background:var(--hinge);height:1px;transition:background-color .3s;position:absolute;left:0;right:0}.flip-digit .upper:after{bottom:0}.flip-digit .lower:after{top:0}.flip-digit .digit{width:100%;height:var(--card-h);line-height:var(--card-h);justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}.flip-digit .lower .digit,.flip-digit .flap-bottom .digit{top:calc(var(--card-h) * -.5)}.flip-digit .flap{opacity:0;backface-visibility:hidden}.flip-digit .flap-top{transform-origin:bottom}.flip-digit .flap-bottom{transform-origin:top}.flip-digit .flap-top:before{content:"";background:var(--flap-shade);opacity:0;pointer-events:none;transition:opacity .3s;position:absolute;inset:0}.flip-digit.flipping .flap-top{opacity:1;animation:.3s ease-in both flip-top-fold}.flip-digit.flipping .flap-top:before{opacity:1}.flip-digit.flipping .flap-bottom{opacity:1;animation:.3s ease-out .3s both flip-bottom-fold}@keyframes flip-top-fold{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes flip-bottom-fold{0%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.date{font-variant-numeric:tabular-nums;color:var(--fg-dim);margin-top:.5em;font-size:min(4vw,6vh);transition:color .3s}.next-event{max-width:min(90vw,40em);color:var(--fg-dim);text-align:center;margin-top:.6em;font-size:min(2.2vw,3.1vh);transition:color .3s}.next-event-card{background:color-mix(in srgb, var(--fg) 7%, transparent);border-radius:999px;align-items:center;gap:.85em;max-width:min(88vw,34em);padding:.5em 1.15em;transition:background-color .3s;animation:.6s both next-event-in;display:inline-flex;position:relative;overflow:hidden}@keyframes next-event-in{0%{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}.next-event-title{text-overflow:ellipsis;white-space:nowrap;max-width:14em;color:var(--fg);transition:color .3s;overflow:hidden}.next-event-time{white-space:nowrap;font-variant-numeric:tabular-nums}.next-event-time-end{opacity:.75;font-size:.85em}.next-event-chip{white-space:nowrap;color:var(--accent);background:color-mix(in srgb, var(--accent) 15%, transparent);border-radius:999px;flex:none;padding:.18em .8em;font-size:.82em;transition:color .3s,background-color .3s}.next-event-progress{background:color-mix(in srgb, var(--accent) 55%, transparent);border-radius:1px;height:2px;transition:width 1s;position:absolute;bottom:0;left:0}.status{bottom:calc(16px + env(safe-area-inset-bottom));text-align:center;color:var(--status-fg);font-size:14px;transition:color .3s;position:absolute;left:0;right:0}.status[hidden]{display:none}.fullscreen-btn,.theme-btn,.settings-btn{background:color-mix(in srgb, var(--btn-fg) 10%, transparent);color:var(--btn-fg);opacity:.35;cursor:default;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:opacity .5s,background-color .3s,color .3s;display:flex;position:absolute}.fullscreen-btn,.theme-btn{width:44px;height:44px}.fullscreen-btn{bottom:max(16px, env(safe-area-inset-bottom));right:max(16px, env(safe-area-inset-right))}.theme-btn{bottom:max(16px, env(safe-area-inset-bottom));left:max(16px, env(safe-area-inset-left))}.settings-btn{width:32px;height:32px;bottom:calc(max(16px, env(safe-area-inset-bottom)) + 6px);left:calc(max(16px, env(safe-area-inset-left)) + 44px + 10px)}.fullscreen-btn:hover,.fullscreen-btn:focus-visible,.theme-btn:hover,.theme-btn:focus-visible,.settings-btn:hover,.settings-btn:focus-visible{opacity:.7}.fullscreen-btn.is-idle,.theme-btn.is-idle,.settings-btn.is-idle{opacity:0;pointer-events:none}
