.hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px;align-items:center;padding-block:72px 12px}
.hero h1{margin:0;font-size:clamp(44px,5.6vw,72px);font-weight:800;letter-spacing:-.055em;line-height:1.02}
.hero h1 em{background:linear-gradient(100deg,#e8820c,#ffb340 60%,#f06b3f);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-style:normal}
.hero-lead{max-width:520px;margin:22px 0 0;color:var(--muted);font-size:17px;line-height:1.7}
.clock-panel{position:relative;overflow:hidden;padding:28px 30px 26px;border-radius:32px;background:radial-gradient(circle at 78% 18%,#ffb34033,transparent 48%),linear-gradient(145deg,var(--dark-2),var(--dark));color:var(--dark-text);box-shadow:0 34px 70px #16171d3d}
.clock-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.clock-panel .segmented{background:#ffffff1a}
.clock-panel .segmented button{color:var(--dark-muted)}
.clock-panel .segmented button[aria-pressed="true"]{background:#ffffff26;color:#fff;box-shadow:none}
.zone-name{overflow:hidden;color:var(--dark-muted);font-size:12px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.clock-time{display:flex;align-items:baseline;margin:36px 0 0;font-size:clamp(54px,8.2vw,104px);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1}
.clock-ms{margin-left:4px;color:var(--glow);font-size:.36em;letter-spacing:0}
.clock-date{margin:14px 0 0;color:var(--dark-muted);font-size:16px;font-weight:600}
.clock-status{display:flex;align-items:center;gap:10px;margin:30px 0 0;padding-top:18px;border-top:1px solid #ffffff1f;color:#e7e7ec;font-size:13px;font-weight:650}
.status-dot{width:9px;height:9px;flex:none;border-radius:50%;background:#a1a1aa;box-shadow:0 0 0 4px #a1a1aa33}
.status-dot.is-good{background:#34c759;box-shadow:0 0 0 4px #34c75933}
.status-dot.is-warn{background:#ffb340;box-shadow:0 0 0 4px #ffb34033}
.formats-top{display:flex;justify-content:flex-end;margin-bottom:10px}
.format-list{display:grid}
.format-row{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.4fr) auto;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.format-row:last-child{border-bottom:0}
.format-row span{color:var(--muted);font-size:13px;font-weight:700}
.format-row code{overflow-wrap:anywhere;font:650 15px/1.45 ui-monospace,"SF Mono",Menlo,monospace}
.format-row small{display:block;margin-top:3px;color:var(--muted);font-size:11px;font-weight:600}
.second-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:center}
.second-marker{display:grid;width:168px;height:168px;place-items:center;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff 58%,var(--accent-soft) 59%);box-shadow:inset 0 0 0 3px var(--accent-soft);transition:box-shadow .08s,background .08s}
.second-marker span{font-size:56px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.second-marker.flash{background:radial-gradient(circle,#fff 0,#fff 58%,var(--glow) 59%);box-shadow:0 0 0 10px #ffb3402e,inset 0 0 0 3px var(--accent);transition:none}
.second-copy .check{margin-top:18px}
.second-next{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin:0 0 8px;color:var(--muted);font-size:14px}
.second-next strong{color:var(--ink);font-size:20px;font-variant-numeric:tabular-nums}
.drift-form{display:grid;gap:16px}
.drift-step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start}
.drift-step>span{display:grid;width:32px;height:32px;margin-top:20px;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:800}
.input-with-button{display:flex;gap:8px}
.input-with-button input{flex:1;min-width:0}
.drift-form>.button{justify-self:start;margin-left:46px}
.drift-results{margin-top:22px}
@media(max-width:860px){.hero{grid-template-columns:1fr;gap:30px;padding-top:44px}.clock-panel{padding:24px}}
@media(max-width:520px){.hero h1{font-size:clamp(38px,11vw,52px)}.hero-lead{font-size:15px}.clock-time{margin-top:28px;font-size:clamp(46px,15vw,64px)}.format-row{grid-template-columns:1fr auto;gap:6px 10px}.format-row span{grid-column:1/-1}.second-card{grid-template-columns:1fr;justify-items:center;text-align:center}.second-next{justify-content:center}.second-copy .check{justify-content:center}.second-marker{width:140px;height:140px}.input-with-button{flex-direction:column}.drift-form>.button{justify-self:stretch;margin-left:0}}
html[dir="rtl"] .clock-time,html[dir="rtl"] .format-row code{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .clock-ms{margin-left:0;margin-right:4px}
html[dir="rtl"] .hero h1,html[dir="rtl"] .section-heading h2{letter-spacing:0;line-height:1.25}
html[dir="rtl"] .drift-form>.button{margin-left:0;margin-right:46px}