:root{color-scheme:dark;--base-size: min(40vw, 60vh);--rectsize: var(--base-size);--radius: calc(var(--rectsize) * .0952);--font-size: calc(var(--rectsize) * .992);--spacing: calc(var(--rectsize) * .08);--div-thick: calc(var(--rectsize) * .0083);--ampm-size: calc(var(--rectsize) * .1);--ampm-offset: calc(var(--rectsize) * .08);--bg-screen: #000000;--bg-card: #0f0f0f;--color-font: #b7b7b7;--color-div-black: #000000;--color-div-gray: #1a1a1a;--color-white: #ffffff;--color-black: #000000;--color-screen-border: #202323;--color-content: #090b0b;--color-content-muted: #a8adab;--color-content-line: #69716f;--color-content-heading: #f4f6f5;--color-content-secondary: #8f9693;--color-content-strong: #d7dcda;--color-content-label: #dfe3e1;--color-content-rule: #262a29;--color-card: #111414;--color-card-border: #242827;--color-card-hover: #151918;--color-card-hover-border: #3a403e;--color-card-number: #555d5a;--color-card-heading: #f0f3f2;--color-link: #ced3d1;--color-link-border: #303534;--color-link-hover-border: #535b58;--color-link-hover: #171b1a;--color-footer: #626966;--color-footer-border: #222625;--color-toolbar: rgba(24, 24, 28, .65);--color-toolbar-border: rgba(255, 255, 255, .08);--color-control-muted: #888888;--color-control-hover: #d0d0d0;--color-control-active: #111111;--color-accent-mint: #6ed7c3;--color-accent-peach: #f0b783;--color-accent-lilac: #aab7f0;--color-accent-yellow: #d5d878;--color-toolbar-fullscreen: rgba(15, 15, 18, .4);--color-hover-surface: rgba(255, 255, 255, .08);--color-toolbar-highlight: rgba(255, 255, 255, .05);--shadow-card: 0 10px 30px rgba(0, 0, 0, .5);--shadow-control: 0 4px 12px rgba(0, 0, 0, .15);--shadow-card-hover: 0 16px 32px rgba(0, 0, 0, .22);--chrome-bg: #0f1115;--chrome-border: #2a2f36;--chrome-border-strong: #40464f;--chrome-text: #e8e8e8;--chrome-text-secondary: rgba(232, 232, 232, .78);--chrome-text-tertiary: rgba(232, 232, 232, .55);--chrome-hover-bg: #171a20;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px)}[data-theme=light]{color-scheme:light;--bg-screen: #ffffff;--bg-card: #eceef1;--color-font: #3d4349;--color-div-black: #c9ced4;--color-div-gray: #ffffff;--color-white: #1d1d1f;--color-black: #ffffff;--color-toolbar: rgba(255, 255, 255, .72);--color-toolbar-border: rgba(0, 0, 0, .08);--color-control-muted: #6b7280;--color-control-hover: #1d1d1f;--color-control-active: #ffffff;--color-toolbar-fullscreen: rgba(255, 255, 255, .6);--color-hover-surface: rgba(0, 0, 0, .06);--color-toolbar-highlight: rgba(255, 255, 255, .7);--shadow-card: 0 10px 30px rgba(0, 0, 0, .12);--shadow-control: 0 4px 12px rgba(0, 0, 0, .08);--chrome-bg: #f5f5f7;--chrome-border: #e4e7ec;--chrome-border-strong: #c3c9d2;--chrome-text: #1d1d1f;--chrome-text-secondary: rgba(29, 29, 31, .76);--chrome-text-tertiary: rgba(29, 29, 31, .58);--chrome-hover-bg: #eceef1}@font-face{font-family:FlipClockFont;src:url(/flip-clock/fonts/flipClockFont.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}html{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}html::-webkit-scrollbar{display:none}body{margin:0;padding:0;background-color:var(--bg-screen);font-family:FlipClockFont,sans-serif;color:var(--color-font);transition:background-color .3s ease;scrollbar-width:none;-ms-overflow-style:none}body::-webkit-scrollbar{display:none}body.cursor-hidden .clock-section,body.cursor-hidden .clock-section *{cursor:none!important}body.fullscreen{background-color:var(--color-black)}body.locked{overflow:hidden!important;overscroll-behavior:none;-webkit-overflow-scrolling:auto;touch-action:none;-ms-touch-action:none}.wco-titlebar{position:fixed;top:0;left:0;right:0;height:env(titlebar-area-height,0px);z-index:105;-webkit-app-region:drag;app-region:drag}.site-brand{position:absolute;top:calc(16px + var(--safe-top));left:20px;z-index:110;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--color-control-muted);text-decoration:none;padding:6px 12px;border-radius:30px;border:1px solid transparent;-webkit-tap-highlight-color:transparent;opacity:1;transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1),color .3s ease,background .3s ease,border-color .3s ease}.site-brand.hidden{opacity:0;pointer-events:none;transform:translateY(-8px)}.site-brand:hover{color:var(--color-control-hover);border-color:var(--color-toolbar-border);background:var(--color-toolbar-highlight)}.clock-section{position:relative;min-height:100vh;min-height:100dvh;box-sizing:border-box;padding:calc(max(var(--safe-top),var(--safe-bottom)) + env(titlebar-area-height,0px)) max(var(--safe-left),var(--safe-right)) max(var(--safe-top),var(--safe-bottom)) max(var(--safe-left),var(--safe-right));display:flex;justify-content:center;align-items:center;background-color:var(--bg-screen);transition:background-color .3s ease}body.fullscreen .clock-section{background-color:var(--color-black)}.clock-container{display:flex;gap:var(--spacing);transition:gap .4s cubic-bezier(.4,0,.2,1);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.clock-container:focus-visible{outline:2px solid color-mix(in srgb,var(--color-white) 75%,transparent);outline-offset:12px}.flip-clock{position:relative;width:var(--rectsize);height:var(--rectsize);background-color:var(--bg-card);border-radius:var(--radius);perspective:2000px;box-shadow:var(--shadow-card);transition:width .4s cubic-bezier(.4,0,.2,1),height .4s cubic-bezier(.4,0,.2,1),border-radius .4s cubic-bezier(.4,0,.2,1),background-color .3s ease,box-shadow .3s ease;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.text-wrapper{position:absolute;width:100%;height:var(--rectsize);font-size:var(--font-size);color:var(--color-font);line-height:var(--rectsize);text-align:center;left:0;transition:font-size .4s cubic-bezier(.4,0,.2,1),height .4s cubic-bezier(.4,0,.2,1),line-height .4s cubic-bezier(.4,0,.2,1);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none}.half{position:absolute;width:100%;height:50%;overflow:hidden;background-color:var(--bg-card);transition:background-color .3s;pointer-events:none}.half.top{top:0;border-radius:var(--radius) var(--radius) 0 0}.half.top .text-wrapper{top:0}.half.bottom{bottom:0;border-radius:0 0 var(--radius) var(--radius)}.half.bottom .text-wrapper{bottom:0}.flap-top,.flap-bottom{position:absolute;left:0;width:100%;height:50%;overflow:hidden;background-color:var(--bg-card);z-index:2;pointer-events:none}.flap-top{top:0;border-radius:var(--radius) var(--radius) 0 0;transform-origin:bottom}.flap-top .text-wrapper{top:0}.flap-bottom{bottom:0;border-radius:0 0 var(--radius) var(--radius);transform-origin:top;transform:rotateX(90deg)}.flap-bottom .text-wrapper{bottom:0}.flap-top.flipping{animation:flipTopDown .3s ease-in forwards;will-change:transform,filter}.flap-bottom.flipping{animation:flipBottomDown .3s ease-out .3s forwards;will-change:transform,filter}@keyframes flipTopDown{0%{transform:rotateX(0);filter:brightness(1)}to{transform:rotateX(-90deg);filter:brightness(.15)}}@keyframes flipBottomDown{0%{transform:rotateX(90deg);filter:brightness(.15)}to{transform:rotateX(0);filter:brightness(1)}}.divider{position:absolute;top:50%;left:0;width:100%;height:var(--div-thick);background-color:var(--color-div-black);transform:translateY(-50%);border-bottom:1px solid var(--color-div-gray);z-index:10;transition:height .4s cubic-bezier(.4,0,.2,1);pointer-events:none}.ampm-indicator{position:absolute;left:calc(var(--radius) * .8);font-size:var(--ampm-size);color:var(--color-font);z-index:15;display:none;line-height:1;transition:font-size .4s cubic-bezier(.4,0,.2,1),top .4s cubic-bezier(.4,0,.2,1),bottom .4s cubic-bezier(.4,0,.2,1);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none}.mode-12h .ampm-indicator{display:block}.ampm-indicator.is-am{top:var(--ampm-offset);bottom:auto}.ampm-indicator.is-pm{bottom:var(--ampm-offset);top:auto}#clock-seconds{opacity:0;width:0;margin-left:calc(-1 * var(--spacing));overflow:hidden;transition:opacity .4s cubic-bezier(.4,0,.2,1),width .4s cubic-bezier(.4,0,.2,1),height .4s cubic-bezier(.4,0,.2,1),border-radius .4s cubic-bezier(.4,0,.2,1),margin-left .4s cubic-bezier(.4,0,.2,1),margin-top .4s cubic-bezier(.4,0,.2,1)}.clock-container.show-seconds #clock-seconds{opacity:1;width:var(--rectsize);margin-left:0;overflow:visible}html[data-orientation=portrait] .clock-container{flex-direction:column}html[data-orientation=portrait] #clock-seconds{width:var(--rectsize);margin-left:0;height:0;margin-top:calc(-1 * var(--spacing))}html[data-orientation=portrait] .clock-container.show-seconds #clock-seconds{height:var(--rectsize);margin-top:0;overflow:visible}.fullscreen-hint{position:absolute;left:50%;bottom:104px;margin:0;transform:translate(-50%);color:color-mix(in srgb,var(--color-white) 48%,transparent);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-size:.8125rem;letter-spacing:.04em;pointer-events:none;transition:opacity .4s ease,transform .4s ease;white-space:nowrap}.fullscreen-hint.is-hidden{opacity:0;transform:translate(-50%) translateY(6px)}.content-section{background:var(--bg-screen);color:var(--chrome-text-secondary);padding:84px 24px 96px;border-top:1px solid var(--chrome-border);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;transition:background-color .3s ease,border-color .3s ease}body.fullscreen .content-section{background:var(--bg-screen);border-top-color:var(--chrome-border)}.content-section .content-inner{max-width:900px;margin:0 auto}.content-intro{padding-bottom:40px}.content-section .content-title{margin:0 0 20px;font-size:clamp(1.8rem,3.2vw,2.2rem);font-weight:700;line-height:1.2;color:var(--chrome-text);text-wrap:balance}.content-section .content-lead{margin:0;font-size:1rem;line-height:1.9;color:var(--chrome-text-secondary);max-width:none}.content-section .content-lead strong{color:var(--chrome-text);font-weight:600}.content-block{border-top:1px solid var(--chrome-border);padding:40px 0;scroll-margin-top:32px}.content-section .content-block-title{margin:0 0 22px;font-size:1.12rem;font-weight:700;color:var(--chrome-text)}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:24px}.feature-item{padding:4px 18px 4px 0}.feature-item+.feature-item{padding-left:24px;border-left:1px solid var(--chrome-border)}.feature-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:14px;border:1px solid var(--chrome-border-strong);border-radius:8px;color:var(--chrome-text)}.feature-icon svg{display:block;width:18px;height:18px}.feature-title{display:block;margin-bottom:10px;font-size:.96rem;font-weight:700;color:var(--chrome-text)}.feature-desc{margin:0;font-size:.92rem;line-height:1.85;color:var(--chrome-text-secondary);max-width:none}.usage-text p{margin:0 0 14px;font-size:.94rem;line-height:1.85;color:var(--chrome-text-secondary);max-width:none}.usage-text p:last-child{margin-bottom:0}.usage-text strong{color:var(--chrome-text);font-weight:600}.shortcuts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.shortcut-item{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;border:1px solid var(--chrome-border);border-radius:8px;transition:border-color .15s ease,background-color .15s ease}.shortcut-item:hover{border-color:var(--chrome-border-strong);background:var(--chrome-hover-bg)}.shortcut-item kbd{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:28px;padding:0 10px;background:color-mix(in srgb,var(--chrome-text) 13%,transparent);color:var(--chrome-text);border:1px solid var(--chrome-border-strong);border-radius:6px;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:12px;font-weight:700;line-height:1;flex-shrink:0}.shortcut-item span{font-size:.9rem;color:var(--chrome-text-secondary)}.share-body{display:flex;flex-direction:column;gap:28px}.share-items{display:flex;justify-content:center;gap:44px;flex-wrap:wrap}.share-item{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;width:180px}.share-item-name{font-size:.95rem;font-weight:600;color:var(--chrome-text)}.share-item-desc{font-size:.8rem;color:var(--chrome-text-secondary)}.share-item-qr{flex-shrink:0;padding:14px;background:#fff;border:1px solid var(--chrome-border);border-radius:12px;line-height:0}.share-item-qr img{display:block;width:150px;height:150px}.share-url{display:flex;align-items:center;gap:14px;width:100%;max-width:560px;margin:0 auto;padding:10px 12px 10px 18px;border:1px solid var(--chrome-border);border-radius:10px}.share-url-text{font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:.88rem;color:var(--chrome-text-secondary);flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.share-copy-btn{border:1px solid var(--chrome-border-strong);background:transparent;color:var(--chrome-text);font-family:inherit;font-size:.88rem;padding:9px 20px;border-radius:6px;cursor:pointer;flex-shrink:0;transition:background-color .15s ease}.share-copy-btn:hover{background:var(--chrome-hover-bg)}.faq-list{display:flex;flex-direction:column}.faq-item{border-bottom:1px solid var(--chrome-border)}.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 2px;cursor:pointer;list-style:none;font-size:.94rem;font-weight:600;color:var(--chrome-text);line-height:1.55;user-select:none;-webkit-user-select:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:1.05rem;font-weight:400;color:var(--chrome-text-tertiary);transition:transform .2s ease;flex-shrink:0}.faq-item[open] summary:after{transform:rotate(45deg)}.faq-answer{padding:0 2px 18px;font-size:.91rem;line-height:1.85;color:var(--chrome-text-secondary);max-width:none}.faq-answer p{margin:0 0 8px}.faq-answer p:last-child{margin-bottom:0}.faq-answer a{color:var(--chrome-text);text-decoration:underline;text-underline-offset:2px}.faq-answer kbd{display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:20px;padding:0 5px;background:color-mix(in srgb,var(--chrome-text) 13%,transparent);color:var(--chrome-text);border:1px solid var(--chrome-border);border-radius:4px;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:11px;font-weight:700;line-height:1}.content-footer{border-top:1px solid var(--chrome-border);margin-top:36px;padding-top:26px;text-align:center;font-size:.85rem;color:var(--chrome-text-tertiary);letter-spacing:.02em}.content-footer p{margin:0 0 6px}.content-footer p:last-child{margin-bottom:0}.content-footer .contact-link{font-weight:600;color:var(--chrome-text);text-decoration:none}html.js .content-section{opacity:0;transition:opacity .5s ease,background-color .3s ease,border-color .3s ease}html.js .content-section.content-revealed{opacity:1}@media(prefers-reduced-motion:reduce){html.js .content-section{transition:none}}.controls{position:absolute;bottom:0;left:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;padding:10px 16px;width:100%;box-sizing:border-box;background:var(--color-toolbar);border-top:1px solid var(--color-toolbar-border);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,Noto Sans SC,sans-serif;opacity:1;transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1),background-color .4s ease,border-color .4s ease;z-index:100;white-space:nowrap}.controls.hidden{opacity:0;pointer-events:none;transform:translateY(100%)}body.fullscreen .controls{background:var(--color-toolbar-fullscreen)}.controls input[type=checkbox]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.controls label{cursor:pointer;display:block;margin:0;-webkit-tap-highlight-color:transparent}.controls .toolbar-btn,.controls .pill-text{font-weight:550;letter-spacing:.02em;line-height:1.35;height:40px;min-width:68px;padding:0 16px;font-size:.925rem;display:inline-flex;align-items:center;justify-content:center;gap:4px;flex-shrink:0;color:var(--color-control-muted);background:transparent;border:1px solid var(--color-toolbar-border);border-radius:6px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .18s ease,border-color .18s ease,color .18s ease}.controls .toolbar-btn[hidden]{display:none}@media(hover:hover){.controls .toolbar-btn:hover:not(:disabled),.controls label:hover .pill-text{background:var(--color-hover-surface);border-color:var(--color-control-hover)}}.controls input[type=checkbox]:checked+.pill-text{background:var(--color-white);color:var(--color-control-active);border-color:var(--color-white);font-weight:600}.controls input[type=checkbox]:focus-visible+.pill-text,.controls .toolbar-btn:focus-visible{outline:2px solid var(--color-white);outline-offset:2px}.controls label.control-disabled{opacity:.5;pointer-events:none;cursor:not-allowed}@media(max-width:600px){.controls{gap:8px 10px;padding:8px 12px;bottom:env(safe-area-inset-bottom)}.controls .toolbar-btn,.controls .pill-text{height:36px;min-width:0;padding:0 12px;font-size:.85rem}.fullscreen-hint{bottom:calc(64px + env(safe-area-inset-bottom));font-size:.75rem}body.fullscreen .controls{bottom:env(safe-area-inset-bottom)}}@media(max-width:640px){.content-section{padding:60px 18px 72px}.feature-grid{grid-template-columns:1fr;gap:0}.feature-item+.feature-item{padding-left:0;border-left:0;border-top:1px solid var(--chrome-border);padding-top:18px;margin-top:18px}.shortcuts-grid{grid-template-columns:1fr 1fr;gap:8px}.share-items{flex-direction:column;align-items:center;gap:32px}.share-item{width:100%}.share-url{justify-content:center}.content-footer{margin-top:28px}}@media(max-width:360px){.controls{gap:6px 8px;padding:6px 10px}.controls .toolbar-btn,.controls .pill-text{padding:0 10px;font-size:.8rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}