@import"https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;600;700&display=swap";:root{font-family:Be Vietnam Pro,system-ui,sans-serif;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{width:100%;min-width:0;min-height:100%;margin:0}body{overscroll-behavior:none}button,select,input{font:inherit}button{cursor:pointer}.app{--bg: #101415;--panel: #141a1b;--primary: #f2f2e8;--accent: #c3a980;--subtle: #899390;--border: #2c3635;min-height:100vh;min-height:100dvh;width:100%;background:var(--bg);color:var(--primary);display:flex;flex-direction:column;position:relative;transition:background .35s,color .35s}.theme-ocean{--bg:#071b22;--panel:#0b242b;--primary:#effaff;--accent:#45c7d4;--subtle:#8aadb5;--border:#214752}.theme-warm{--bg:#201914;--panel:#2c211a;--primary:#fff3d7;--accent:#e6ae73;--subtle:#bd9c7c;--border:#554333}.theme-paper{--bg:#e9e7d9;--panel:#f4f1e7;--primary:#24322c;--accent:#656b4b;--subtle:#667169;--border:#ced0bf;color-scheme:light}.topbar{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:2;pointer-events:none}.actions{display:flex;gap:5px;pointer-events:auto}.icon-button{width:44px;height:44px;border:1px solid transparent;border-radius:12px;background:color-mix(in srgb,var(--bg) 82%,transparent);color:var(--subtle);display:grid;place-items:center;font-size:1.5rem;transition:color .2s,background .2s}.icon-button:hover,.icon-button:focus-visible{background:var(--panel);color:var(--primary);border-color:var(--border)}.stage{flex:1 1 auto;min-height:0;width:100%;max-width:1560px;margin:0 auto;padding:clamp(62px,8vh,92px) clamp(22px,5vw,78px) clamp(20px,4vh,60px);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(18px,4vw,66px)}.clock-panel{flex:1 1 0;min-width:0;width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.5vh,32px)}.greeting{margin:0;font-size:clamp(.72rem,1.2vw,1.05rem);font-weight:600;letter-spacing:.25em;color:var(--accent);text-align:center;line-height:1.6}.greeting-dot{margin-left:.05em}.matrix{container-type:inline-size;width:min(100%,900px);aspect-ratio:10 / 6.4;flex:0 0 auto;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));align-items:center;justify-items:center;-webkit-user-select:none;user-select:none}.letter{font-family:Roboto Mono,DejaVu Sans Mono,monospace;font-weight:700;font-size:clamp(10px,5.8cqw,51px);line-height:1.2;white-space:nowrap;color:color-mix(in srgb,var(--primary) 9%,var(--bg));transition:color .5s ease,text-shadow .5s ease}.letter.lit{color:var(--primary);text-shadow:0 0 16px color-mix(in srgb,var(--primary) 16%,transparent)}.under-clock-time{color:var(--accent);font-family:Roboto Mono,monospace;font-size:clamp(1.12rem,2vw,1.75rem);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.05em;text-align:center;white-space:nowrap;line-height:1.4}.details{flex:0 1 290px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(9px,2vh,18px);padding-left:clamp(18px,3vw,38px);border-left:1px solid var(--border)}.numeric-time{font-family:Roboto Mono,monospace;font-size:clamp(1.5rem,2.5vw,2.8rem);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.06em;white-space:nowrap}.date{color:var(--subtle);font-size:clamp(.72rem,1vw,.91rem);line-height:1.6;text-transform:capitalize}.demo-notice{color:var(--accent);font-size:.68rem;letter-spacing:.1em}.matrix-only .clock-panel{flex-grow:0;width:min(100%,960px)}.settings-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:#0009;display:flex;justify-content:flex-end}.settings{width:min(430px,100%);height:100%;max-height:100dvh;padding:max(22px,env(safe-area-inset-top)) 28px max(24px,env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;background:var(--panel);box-shadow:-24px 0 80px #0004;display:flex;flex-direction:column;gap:21px}.settings-heading{display:flex;justify-content:space-between;align-items:center}.settings h2{font-size:1.38rem;margin:0}.setting-label{font-size:.83rem;font-weight:600;color:var(--subtle)}.settings select,.settings input[type=time],.demo-row button{background:var(--bg);color:var(--primary);border:1px solid var(--border);border-radius:9px;padding:11px;min-width:0}.toggle{display:flex;align-items:center;gap:12px;line-height:1.5;font-size:.9rem}.toggle input{flex-shrink:0;width:17px;height:17px;accent-color:var(--accent)}.demo-row{display:flex;gap:10px}.demo-row input{flex:1}.demo-row button{white-space:nowrap}.settings-help{font-size:.76rem;color:var(--subtle);line-height:1.7;margin:0}.settings-help code{color:var(--primary)}.source-link{color:var(--accent);font-size:.77rem;text-decoration:none;line-height:1.7}.source-link:hover{text-decoration:underline}.app.embed .stage{padding:clamp(12px,3vw,40px)}.app.embed .clock-panel{max-width:840px}@media(orientation:portrait)and (max-width:1100px){.stage{flex-direction:column;gap:clamp(12px,2.5vh,30px)}.clock-panel{flex:0 1 auto;max-width:760px}.matrix{width:min(100%,680px)}.details{flex:0 0 auto;min-width:0;width:min(100%,620px);align-items:center;padding:14px 0 0;border-left:0;border-top:1px solid var(--border);gap:6px}.numeric-time{font-size:clamp(1.35rem,3.5vw,2rem)}.date{text-align:center}}@media(orientation:landscape)and (max-width:1150px){.stage{gap:clamp(12px,2vw,30px);padding-inline:clamp(14px,2.5vw,30px)}.details{flex-basis:230px;padding-left:clamp(12px,2vw,22px)}.numeric-time{font-size:clamp(1.25rem,2.4vw,2rem)}}@media(orientation:portrait)and (max-width:560px){.stage{gap:clamp(16px,3.5vh,32px);padding:max(62px,calc(env(safe-area-inset-top) + 56px)) 12px max(12px,env(safe-area-inset-bottom))}.clock-panel{gap:clamp(13px,3vh,26px)}.matrix{width:100%}.letter{font-size:clamp(10px,5.5cqw,26px)}.greeting{font-size:.73rem;letter-spacing:.17em}.under-clock-time{font-size:1.13rem}.details{width:min(100%,420px)}.numeric-time{font-size:1.45rem}.date{font-size:.78rem}.settings{padding-inline:20px}}@media(orientation:landscape)and (max-height:560px){.app{height:100dvh;min-height:0;overflow:hidden}.topbar{top:max(2px,env(safe-area-inset-top));right:max(5px,env(safe-area-inset-right))}.icon-button{width:36px;height:36px;font-size:1.18rem}.stage{flex-direction:row;min-height:0;overflow-y:auto;gap:clamp(8px,2vw,20px);padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom));padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}.clock-panel{flex:1 1 0;max-width:none;gap:clamp(5px,2vh,10px)}.matrix{width:min(100%,108dvh);aspect-ratio:10 / 6.1}.greeting{font-size:.64rem;line-height:1.25;letter-spacing:.13em}.under-clock-time{font-size:clamp(.9rem,2.8vh,1.2rem)}.details{flex:0 0 clamp(142px,26vw,220px);width:auto;padding:36px 0 0 clamp(9px,2vw,20px);border-top:0;border-left:1px solid var(--border);align-items:flex-start;gap:7px}.numeric-time{font-size:clamp(1.05rem,2.9vw,1.7rem)}.date{font-size:.69rem;text-align:left}.matrix-only .matrix{width:min(100%,112dvh)}.settings{gap:14px;padding:18px max(20px,env(safe-area-inset-right)) 18px}}@media(orientation:landscape)and (max-height:380px){.stage{padding-block:4px}.matrix{width:min(100%,98dvh)}.matrix-only .matrix{width:min(100%,105dvh)}.greeting{font-size:.58rem}.details{padding-top:26px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}