: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;--toolbar-bg: rgba(28, 28, 30, .72);--toolbar-border: rgba(255, 255, 255, .08);--toolbar-highlight: rgba(255, 255, 255, .04);--toggle-track-off: #3a3a3c;--toggle-track-on: #636366;--toggle-thumb: #f5f5f5;--toggle-thumb-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(0, 0, 0, .15);--toggle-thumb-shadow-active: 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(0, 0, 0, .2);--toggle-lock-on: #f0c060;--divider-color: rgba(255, 255, 255, .1)}body.fullscreen{--base-size: min(45vw, 70vh);--toolbar-bg: rgba(20, 20, 24, .58);--toolbar-border: rgba(255, 255, 255, .05)}.show-seconds{--base-size: min(22vw, 35vh)}body.fullscreen .clock-container.show-seconds{--base-size: min(25vw, 40vh)}@font-face{font-family:FlipClockFont;src:url(/fonts/flipClockFont.ttf) format("truetype");font-weight:400;font-style:normal}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.fullscreen{background-color:#000}body.locked{overflow:hidden!important;overscroll-behavior:none;-webkit-overflow-scrolling:auto;touch-action:none;-ms-touch-action:none}.clock-section{position:relative;min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center;background-color:var(--bg-screen);transition:background-color .3s ease}body.fullscreen .clock-section{background-color:#000}.clock-container{display:flex;gap:var(--spacing);transform-origin:center center;transition:gap .4s cubic-bezier(.4,0,.2,1),transform .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}.flip-clock{position:relative;width:var(--rectsize);height:var(--rectsize);background-color:var(--bg-card);border-radius:var(--radius);perspective:2000px;box-shadow:0 10px 30px #00000080;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}.flap-bottom.flipping{animation:flipBottomDown .3s ease-out .3s forwards}@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)}.clock-container.show-seconds #clock-seconds{opacity:1;width:var(--rectsize);margin-left:0;overflow:visible}.content-section{background-color:#050505;padding:80px 24px 10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;color:#a0a0a0;min-height:60vh;border-top:1px solid #1a1a1a;transition:background-color .3s ease}body.fullscreen .content-section{background-color:#000}.content-section .content-inner{max-width:860px;margin:0 auto}.content-section h2{color:#fff;font-size:2rem;font-weight:600;margin:0 0 16px;letter-spacing:.05em;text-align:center}.content-section .lead-text{color:#888;font-size:1.05rem;margin:0 auto 50px;line-height:1.8;text-align:center;max-width:680px}.content-section .lead-text strong{color:#d0d0d0;font-weight:500}.content-section h3{color:#e0e0e0;font-size:1.4rem;font-weight:600;margin:50px 0 24px;display:flex;align-items:center;gap:8px}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:40px}.feature-card{background:#111;border-radius:16px;padding:24px;border:1px solid rgba(255,255,255,.05);transition:transform .3s ease,background .3s ease}.feature-card:hover{background:#161616;transform:translateY(-3px);border-color:#ffffff1a}.feature-card h4{color:#fff;font-size:1.1rem;margin:0 0 10px;display:flex;align-items:center;gap:8px}.feature-card p{margin:0;font-size:.95rem;line-height:1.6;color:#888}.scene-box{background:linear-gradient(145deg,#0f0f0f,#0a0a0a);border-radius:16px;padding:30px;border:1px solid rgba(255,255,255,.03);margin-bottom:40px}.scene-list{list-style:none;padding:0;margin:0}.scene-list li{position:relative;padding-left:24px;margin-bottom:16px;font-size:.98rem;line-height:1.6;color:#b0b0b0}.scene-list li:last-child{margin-bottom:0}.scene-list li:before{content:"✓";position:absolute;left:0;top:0;color:#555;font-weight:700}.scene-list li strong{color:#e0e0e0}.faq-container{display:grid;gap:16px}.faq-item{background:#0a0a0a;border-bottom:1px solid #1f1f1f;padding:16px 0}.faq-item:last-child{border-bottom:none}.faq-q{color:#d4d4d4;font-weight:600;font-size:1.05rem;margin:0 0 8px}.faq-a{color:#777;font-size:.95rem;margin:0;line-height:1.7}.footer-note{text-align:center;color:#444;font-size:.85rem;margin-top:80px;letter-spacing:.05em}.footer-note a{color:#666;text-decoration:none;transition:color .2s}.footer-note a:hover{color:#999}.back-home-row{text-align:center;margin-top:60px;margin-bottom:32px}.back-home-link{display:inline-block;color:#aaa;text-decoration:none;font-size:.95rem;padding:10px 28px;border:1px solid rgba(255,255,255,.15);border-radius:8px;transition:all .25s}.back-home-link:hover{color:#fff;border-color:#ffffff59;background:#ffffff0f}.controls{position:absolute;bottom:32px;left:50%;transform:translate(-50%) translateY(0);display:flex;gap:6px;background:#18181ca6;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);padding:8px;border-radius:40px;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px #00000080,inset 0 1px #ffffff0d;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;opacity:1;transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1),background .3s ease;z-index:100;white-space:nowrap}.controls.hidden{opacity:0;pointer-events:none;transform:translate(-50%) translateY(20px)}body.fullscreen .controls{bottom:40px;background:#0f0f1266}.controls input[type=checkbox]{display:none}.controls label{cursor:pointer;display:block;margin:0;-webkit-tap-highlight-color:transparent}.pill-text{display:inline-block;padding:10px 22px;border-radius:30px;font-size:14px;font-weight:500;color:#888;transition:all .3s cubic-bezier(.4,0,.2,1);letter-spacing:.02em;user-select:none;-webkit-user-select:none}@media(hover:hover){.controls label:hover .pill-text{color:#d0d0d0;background:#ffffff14}}.controls input[type=checkbox]:checked+.pill-text{background:#fff;color:#111;font-weight:600;box-shadow:0 4px 12px #00000026}#setting-lock-label.lock-active input[type=checkbox]:not(:checked)+.pill-text{color:#fff}.lock-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:#888;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent}@media(hover:hover){.controls label:hover .lock-icon{color:#d0d0d0;background:#ffffff14}}#setting-lock-label.lock-active .lock-icon{color:#111;background:#fff;box-shadow:0 4px 12px #00000026}#setting-lock-label.lock-disabled{opacity:.35;pointer-events:none;cursor:not-allowed}@media(max-width:600px){.controls{gap:6px;padding:8px;border-radius:24px;bottom:24px;display:grid;grid-template-columns:1fr 1fr;width:90%;max-width:340px}#setting-lock-label{display:flex;justify-content:center;align-items:center}.pill-text{width:100%;box-sizing:border-box;text-align:center;padding:12px 10px;font-size:13px;border-radius:18px}body.fullscreen .controls{bottom:30px}.content-section{padding:40px 16px 100px}.content-section h2{font-size:1.5rem}.content-section .lead-text{font-size:.95rem;margin-bottom:30px}.content-section h3{font-size:1.2rem;margin:40px 0 20px}.feature-grid{grid-template-columns:1fr}.scene-box{padding:20px 16px}}@media(max-width:360px){.controls{grid-template-columns:1fr;width:180px;border-radius:28px}.pill-text{padding:10px;font-size:13px}.content-section{padding:30px 12px 90px}.content-section h2{font-size:1.3rem}}
