:root { color-scheme: dark; --bg:#080b12; --card:rgba(17,24,39,.82); --line:rgba(148,163,184,.2); --text:#f8fafc; --muted:#94a3b8; --accent:#818cf8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--text); background: radial-gradient(900px 500px at 10% -10%, rgba(99,102,241,.25), transparent 60%), radial-gradient(800px 500px at 100% 100%, rgba(14,165,233,.16), transparent 60%), var(--bg); }
.bodyContainer { min-height:100vh; display:grid; place-items:center; padding:24px; }
.clockCard { width:min(820px,100%); padding:clamp(28px,6vw,64px); text-align:center; border:1px solid var(--line); border-radius:28px; background:var(--card); box-shadow:0 28px 80px rgba(0,0,0,.35); backdrop-filter:blur(18px); }
.eyebrow { margin:0 0 12px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.2em; }
h1 { margin:0; font-size:clamp(2.2rem,6vw,4.5rem); letter-spacing:-.06em; line-height:1; }
.dateDisplay { margin:16px 0 0; color:var(--muted); font-size:clamp(.95rem,2vw,1.1rem); }
.clockContainer { margin:42px 0 28px; display:flex; justify-content:center; align-items:center; gap:clamp(8px,2vw,22px); }
.timeUnit { min-width:clamp(74px,16vw,150px); padding:clamp(14px,3vw,26px) 10px; border:1px solid var(--line); border-radius:18px; background:rgba(2,6,23,.55); }
.timeNumber { font-variant-numeric:tabular-nums; font-size:clamp(2.2rem,8vw,5.4rem); font-weight:800; letter-spacing:-.06em; line-height:1; }
.timeLabel { margin-top:10px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.separator { color:var(--accent); font-size:clamp(2rem,6vw,4rem); font-weight:300; transform:translateY(-8px); }
.timezone { margin:0; color:var(--muted); font-size:12px; }
footer { position:fixed; bottom:18px; color:#64748b; font-size:12px; } footer a { color:#c7d2fe; text-decoration:none; } footer a:hover { text-decoration:underline; }
@media(max-width:520px){ .bodyContainer{padding:14px}.clockCard{border-radius:22px}.clockContainer{gap:4px}.timeUnit{min-width:0;flex:1;padding:16px 5px}.separator{font-size:2rem}.timeLabel{font-size:9px} footer{position:static;margin-top:18px;text-align:center} }
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.timezonePicker { display:inline-flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px; color:var(--muted); font-size:12px; font-weight:700; }
.timezonePicker select { max-width:min(330px, 70vw); padding:8px 30px 8px 10px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:rgba(2,6,23,.72); font-size:12px; }
.timezonePicker select:focus { outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:520px){.timezonePicker{flex-direction:column;gap:6px;width:100%}.timezonePicker select{max-width:100%;width:100%}}

body { padding-top: 72px; }
.siteHeader { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 10px max(18px, calc((100vw - 980px) / 2)); border-bottom: 1px solid var(--line); background: rgba(8,11,18,.88); backdrop-filter: blur(16px); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand img { width: 38px; height: 38px; object-fit: contain; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: rgba(15,23,42,.8); }
.brand span { display: grid; gap: 1px; }
.brand strong { font-size: 15px; }
.brand small { color: var(--muted); font-size: 11px; }
.headerLink { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; color: #cbd5e1; font-size: 13px; font-weight: 700; text-decoration: none; transition: border-color 140ms ease, box-shadow 140ms ease, color 140ms ease; }
.headerLink:hover { border-color: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(99,102,241,.2); }
footer { position: static; width: min(820px,100%); display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 16px 0 0; border-top: 1px solid var(--line); }
footer a { color: #c7d2fe; font-weight: 700; }
.footerLinks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.footerLinks a { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 9px; color: #cbd5e1; font-size: 13px; text-decoration: none; transition: border-color 140ms ease, box-shadow 140ms ease, color 140ms ease; }
.footerLinks a:hover { border-color: var(--accent); color: #fff; box-shadow: 0 8px 18px rgba(99,102,241,.2); text-decoration: none; }
.topBtn { position: fixed; right: 22px; bottom: 22px; z-index: 30; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--accent); color: #fff; opacity: 0; pointer-events: none; box-shadow: 0 12px 28px rgba(0,0,0,.25); cursor: pointer; transition: opacity 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
.topBtn.show { opacity: 1; pointer-events: auto; }
.topBtn:hover { border-color: #c7d2fe; box-shadow: 0 14px 30px rgba(99,102,241,.32); }
@media(max-width:520px){ body{padding-top:64px}.siteHeader{min-height:60px;padding:9px 12px}.brand small,.headerLink span:last-child{display:none}.brand img{width:35px;height:35px}footer{align-items:flex-start;flex-direction:column}.footerLinks{justify-content:flex-start} }