/* Theme clocks share the same real HH:MM value; the network dot matrix is untouched. */
body:not([data-theme=network]) .landing-center .clock-time{--clock-size:clamp(54px,5.7vw,78px);gap:10px!important;font-size:var(--clock-size)!important;letter-spacing:0;transform:none;font-variant-numeric:tabular-nums lining-nums;text-shadow:none}
body:not([data-theme=network]) .clock-time :where(span){display:block;opacity:1;animation:none;transform:none;margin:0;color:inherit;line-height:1}
body:not([data-theme=network]) .clock-time svg{display:block;flex:none;overflow:visible}
/* Pet: hand-rounded numerals in four softly lit capsules. */
body[data-theme=pet] .clock-time{color:#f6e8e4}
body[data-theme=pet] .clock-time .pet-clock-digit{display:grid;place-items:center;width:.74em;height:1.16em;flex:0 0 .74em;border:1px solid #ead6e333;border-radius:.31em;background:linear-gradient(150deg,#d8bbd329,#a18e9d10);box-shadow:inset 0 2px 2px #fff1,inset 0 -3px 9px #080b181c,0 8px 18px #0002}
body[data-theme=pet] .clock-time .pet-clock-digit:nth-child(2),body[data-theme=pet] .clock-time .pet-clock-digit:nth-child(5){background:linear-gradient(150deg,#c7c5e52c,#9290ba12)}
body[data-theme=pet] .pet-clock-numeral{width:.44em;height:.74em;filter:drop-shadow(0 2px 1px #100a2533)}
body[data-theme=pet] .pet-clock-divider{font:500 .45em/1 Georgia,serif;color:#d8becf}
/* Art: a large, flowing hour and offset minutes, with no rectangular frame. */
body[data-theme=art] .landing-center .clock-time{align-items:baseline!important;gap:7px!important;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-style:italic}
body[data-theme=art] .clock-time .art-clock-hour{font-size:1.38em;letter-spacing:-.09em;padding-right:.06em;background:linear-gradient(135deg,#f8e8e0,#e4baa9 70%,#c6a0da);background-clip:text;-webkit-background-clip:text;color:transparent}
body[data-theme=art] .clock-time .art-clock-minute{font-size:.92em;letter-spacing:-.04em;padding:0 .025em .13em;border-bottom:1px solid #dbabc25c;color:#d9badc;transform:translateY(.10em)}
body[data-theme=art] .clock-time .art-clock-divider{font-size:.58em;font-style:normal;color:#c3a2b3;align-self:center;transform:rotate(16deg)}
/* Cosmos: two orbital dials. Their arcs reflect the day and minute progress. */
body[data-theme=cosmos] .landing-center .clock-time{gap:12px!important;color:#d8d8ff}
body[data-theme=cosmos] .cosmos-clock-dial{width:1.2em;height:1.2em;filter:drop-shadow(0 0 10px #9695e528)}
.cosmos-clock-dial .orbit-track{fill:none;stroke:#b0b3ef26;stroke-width:.8}
.cosmos-clock-dial .orbit-progress{fill:none;stroke:#bcb9ff;stroke-width:1.8;stroke-linecap:round}
.cosmos-clock-dial .orbit-tick{fill:none;stroke:#bcbdf557;stroke-width:.8}
.cosmos-clock-dial .segment-lit{fill:#dddfff;stroke:none}
.cosmos-clock-dial .segment-off{fill:#b7b9ed0e;stroke:none}
body[data-theme=cosmos] .cosmos-clock-divider{font:300 .42em/1 monospace;color:#b6b4e7}
/* Nature: a quiet open dial with moving hands and readable serif time. */
body[data-theme=nature] .landing-center .clock-time{gap:18px!important;color:#d0eadf}
body[data-theme=nature] .nature-clock-dial{width:1.12em;height:1.12em;color:#9ed2bf}
.nature-clock-dial .nature-clock-rim{fill:none;stroke:#acdcca32;stroke-width:.8}
.nature-clock-dial .nature-clock-tick{fill:none;stroke:#a6d5c48c;stroke-width:1.1}
.nature-clock-dial .nature-clock-hour-hand{fill:none;stroke:#cdebdc;stroke-width:2.6;stroke-linecap:round}
.nature-clock-dial .nature-clock-minute-hand{fill:none;stroke:#9ccdb9;stroke-width:1.5;stroke-linecap:round}
.nature-clock-dial .nature-clock-pivot{fill:#d6eee0;stroke:none}
body[data-theme=nature] .clock-time .nature-clock-digital{font:400 .8em/1.1 Georgia,'Times New Roman',serif;letter-spacing:.02em;padding-bottom:.09em;border-bottom:1px solid #a8d9c426}
/* Architecture: four precise split-flap tiles with a fine horizontal hinge. */
body[data-theme=architecture] .landing-center .clock-time{gap:7px!important;color:#e8e2d0}
body[data-theme=architecture] .clock-time .architecture-clock-tile{display:grid;place-items:center;position:relative;isolation:isolate;width:.71em;height:1.12em;flex:0 0 .71em;border:1px solid #d4d2bf30;border-radius:.035em;background:linear-gradient(#c7c9c20e 49.4%,#0306057a 49.4%,#0306057a 50.6%,#b9b5a303 50.6%),#202527;box-shadow:0 6px 10px #0003,inset 0 1px 0 #f0ead21a}
body[data-theme=architecture] .clock-time .architecture-clock-digit{font:500 .92em/1 'SFMono-Regular',Consolas,'Liberation Mono',monospace}
.architecture-clock-tile:after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#090e0dc9;box-shadow:0 1px 0 #ede7d512;pointer-events:none}
.architecture-clock-tile:before{content:'';position:absolute;left:-2px;right:-2px;top:calc(50% - 3px);height:6px;background:linear-gradient(90deg,#a5ab9b 2px,transparent 2px,transparent calc(100% - 2px),#a5ab9b calc(100% - 2px));opacity:.6;z-index:2}
body[data-theme=architecture] .architecture-clock-divider{font:400 .44em/1 monospace;color:#b8bba8;padding:0 .07em}
@media(max-width:700px){body:not([data-theme=network]) .landing-center .clock-time{--clock-size:54px;gap:7px!important}body[data-theme=nature] .landing-center .clock-time{gap:12px!important}}
@media(max-width:359px){body:not([data-theme=network]) .landing-center .clock-time{--clock-size:48px}}
@media(max-height:730px){body:not([data-theme=network]) .landing-center .clock-time{--clock-size:52px;margin:10px 0!important}}
@media(max-height:580px){body:not([data-theme=network]) .landing-center .clock-time{--clock-size:30px;gap:5px!important;margin:8px 0 0!important}}