.time-hero{padding:72px 22px 48px;background:radial-gradient(circle at 78% 18%,rgba(255,201,51,.28),transparent 28%),linear-gradient(150deg,var(--cream),var(--paper));border-bottom:1px solid rgba(20,71,107,.12)}
.time-layout{max-width:1180px;margin:auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:34px;align-items:center}.time-hero h1{font-size:clamp(2.9rem,6vw,5.6rem);line-height:.94;color:var(--deep);margin:.3rem 0 1.1rem}.time-hero h1 em{font-family:"Lobster Two",Georgia,serif;color:var(--sunset);font-style:normal}.time-hero .lead{max-width:760px}.clock-panel{background:#0c3048;color:var(--cream);border-radius:32px;padding:30px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.08);container-type:inline-size;overflow:hidden}.clock-label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:900;color:var(--gold)}.clock-row{display:flex;align-items:baseline;white-space:nowrap;margin:.6rem 0 .3rem;font-variant-numeric:tabular-nums;font-size:clamp(3rem,5.1vw,5.25rem)}.clock-time{font-size:1em;font-weight:900;letter-spacing:-.055em;line-height:1;min-width:0}.clock-ms{font-size:.28em;color:#9fd8f5;font-weight:800;flex:0 0 auto;margin-left:.04em}.clock-date{font-weight:800;color:#e9f5fb}.clock-source{font-size:.8rem;color:#a9c7d8;margin:1.1rem 0 0}.time-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.time-card{background:white;border:1px solid rgba(20,71,107,.12);border-radius:24px;padding:25px;box-shadow:0 12px 30px rgba(20,71,107,.07)}.time-card h3{margin:.4rem 0 .65rem;color:var(--deep);font-size:1.35rem}.time-card p{color:#567182}.time-card code,.command{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}.service-host{display:block;font-size:1.15rem;font-weight:900;color:var(--sunset);overflow-wrap:anywhere}.service-meta{display:flex;gap:8px;flex-wrap:wrap;margin:.8rem 0}.chip,.status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:.35rem .62rem;font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.chip{background:var(--cream);color:var(--deep)}.status-pill{background:#edf2f5;color:#506a78}.status-pill[data-state="healthy"]{background:#e3f5e8;color:#155b2c}.status-pill[data-state="warning"]{background:#fff2c7;color:#694d00}.status-pill[data-state="error"]{background:#ffe2df;color:#8e2d25}.status-pill[data-state="pending"]{background:#e9eff8;color:#315c83}.observer-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}.metric{background:var(--paper);border-radius:18px;padding:16px}.metric span{display:block;color:#67808e;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800}.metric strong{display:block;color:var(--deep);font-size:1.15rem;margin-top:.25rem;font-variant-numeric:tabular-nums}.command{display:block;background:#0c3048;color:#f9f6ec;border-radius:14px;padding:14px 16px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:.7rem 0 1rem}.time-note{border-left:4px solid var(--gold);background:#fff8df;padding:17px 19px;border-radius:0 14px 14px 0;color:#5b4d1b}.time-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.5rem}.time-links .btn{font-size:.86rem}.observer-card{margin-top:24px;background:white;border:1px solid rgba(20,71,107,.12);border-radius:26px;padding:28px;box-shadow:0 12px 30px rgba(20,71,107,.06)}.observer-head{display:flex;justify-content:space-between;gap:18px;align-items:center}.observer-head h2{font-size:clamp(1.8rem,4vw,2.7rem);margin:.2rem 0}.observer-detail{color:#567182;margin-bottom:0}.howto-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.howto{border:1px solid rgba(20,71,107,.12);border-radius:22px;padding:24px;background:white}.howto h3{color:var(--deep);margin-top:0}.fineprint{font-size:.88rem;color:#607988;max-width:900px}
@supports(font-size:1cqw){.clock-row{font-size:clamp(2.8rem,17cqw,5.25rem)}}
@media(max-width:900px){.time-layout,.time-grid,.howto-grid{grid-template-columns:1fr}.clock-panel{max-width:680px}.observer-metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.time-hero{padding:48px 14px 36px}.clock-panel{padding:22px;border-radius:24px}.clock-row{font-size:clamp(2.45rem,14vw,4rem);font-size:clamp(2.45rem,16cqw,4rem)}.observer-head{align-items:flex-start;flex-direction:column}.observer-metrics{grid-template-columns:1fr 1fr}.time-card,.observer-card,.howto{padding:20px}}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none}}