.clock-page{--fg-muted:var(--border-subtle);--fg-secondary:var(--border-subtle);justify-content:center;align-items:center;width:100%;min-height:100vh;margin:0 auto;padding:1.5rem 2rem;display:flex}.clock-container{flex-direction:column;align-items:stretch;gap:6.854rem;width:fit-content;max-width:100%;display:flex}.clock-header{border-bottom:1px solid var(--border-subtle);font-variation-settings:"MONO" 1;letter-spacing:.1em;justify-content:space-between;align-items:center;gap:2.5rem;width:100%;padding-bottom:.75rem;font-family:Sono,monospace;font-size:.85rem;display:flex}.clock-header .esc-hint{color:var(--fg-dim)}.clock-footer .footer-actions{flex-direction:column;align-items:flex-start;gap:.5rem;display:flex}.clock-header .close-btn,.clock-footer .theme-toggle,.clock-footer .fullscreen-toggle,.clock-footer .oled-toggle{font-variation-settings:"MONO" 1;letter-spacing:.1em;color:var(--fg-dim);cursor:pointer;background:0 0;border:none;align-items:center;gap:.5em;margin:0;padding:0;font-family:Sono,monospace;font-size:.85rem;text-decoration:none;transition:color 75ms;display:inline-flex}.clock-header .close-btn .label,.clock-footer .theme-toggle .label,.clock-footer .fullscreen-toggle .label,.clock-footer .oled-toggle .label{text-underline-offset:4px;text-decoration:underline}.clock-header .close-btn:hover,.clock-footer .theme-toggle:hover,.clock-footer .fullscreen-toggle:hover,.clock-footer .oled-toggle:hover{color:var(--fg-primary)}.clock-stage{justify-content:center;align-items:center;padding:0 4.236rem;display:flex}.clock-matrix{grid-template-columns:auto auto;align-items:center;gap:1.25rem;font-size:clamp(1.5rem,4vw,3.2rem);display:grid}.clock-matrix .cell-bars,.clock-matrix .cell-dials,.clock-matrix .cell-time-digits{justify-self:start}.clock-matrix .cell-date-bars{justify-self:end;font-size:.618em}.clock-matrix .cell-date-digits{justify-self:start;font-size:1.37rem}.clock-matrix .cell-tz-bars{justify-self:end;font-size:.618em}.clock-matrix .cell-tz-digits{justify-self:start;font-size:1.37rem}.clock-footer{border-top:1px solid var(--border-subtle);justify-content:space-between;align-items:flex-start;gap:2.5rem;width:100%;padding-top:.75rem;display:flex}.clock-footer .url-tag{align-items:flex-end;gap:.75rem;display:flex}.clock-footer .url-text{font-variation-settings:"MONO" 1;height:1em;color:var(--fg-dim);letter-spacing:.05em;align-items:flex-end;font-family:Sono,monospace;font-size:.85rem;line-height:1;display:inline-flex}.clock-footer bvmg-barcode svg{height:1.15em}.clock-footer bvmg-barcode .barcode-bg{fill:var(--fg-dim)}@media (orientation:portrait){html,body{width:100svw;height:100svh;overflow:hidden}.clock-page{transform-origin:50%;box-sizing:border-box;width:100svh;height:100svw;padding:clamp(.75rem,2.5svw,1.5rem) clamp(2rem,8svh,5.5rem);position:fixed;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)rotate(90deg)}.clock-container{gap:clamp(1.25rem,4.5svw,3rem);width:fit-content;max-width:100%;margin:0 auto}.clock-stage{padding:0}.clock-matrix{gap:clamp(.75rem,1.8svh,1.5rem) clamp(.85rem,2svh,1.5rem);font-size:clamp(1.25rem,3.5svh,2.6rem)}.clock-matrix .cell-date-digits,.clock-matrix .cell-tz-digits{font-size:.618em}.clock-header,.clock-footer{font-size:clamp(.8rem,2.2svh,.95rem)}}@media (orientation:landscape) and (height<=520px){.clock-container{gap:clamp(1rem,4vh,2.2rem)}.clock-stage{padding:0}.clock-matrix{gap:.75rem;font-size:clamp(1rem,5vh,1.8rem)}.clock-matrix .cell-date-digits,.clock-matrix .cell-tz-digits{font-size:.618em}}
