:root{--bg:#fff;--panel:#fff;--ink:#14181f;--mute:#5a6472;--line:#dfe3ea;--accent:#2f4fd8;--card:#f5f6fa;--bar:#f7efe6;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0f1318;--panel:#171c23;--ink:#eef1f5;--mute:#a1abb8;--line:#2b333e;--accent:#8fa6ff;--card:#1a212b;--bar:#222a35}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
a:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.hlu-main{max-width:900px;margin:0 auto;padding:24px 16px 56px}
h1{font-size:clamp(26px,5.4vw,42px);line-height:1.15;margin:0 0 16px;letter-spacing:-.01em}
h2{font-size:22px;margin:0 0 12px;line-height:1.3}
h3{font-size:16px;margin:18px 0 8px;color:var(--mute);font-weight:600}

/* countdown card */
.hlu-card{--s:1;color:var(--dc,var(--ink));background:var(--cb,var(--card));border-radius:24px;padding:clamp(22px,5vw,40px) 16px;text-align:center}
.hlu-label{margin:0 0 4px;font-size:clamp(16px,2.6vw,20px);opacity:.85}
.hlu-digits{font-family:var(--df,inherit);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.05;letter-spacing:-.01em;white-space:nowrap;font-size:calc(var(--s) * clamp(40px,14.5vw,132px))}
.hlu-endline{margin:8px 0 0;font-size:clamp(15px,2.6vw,21px);opacity:.7}
.hlu-state{margin:12px auto 0;max-width:34em;font-weight:600}
.hlu-state:empty{display:none}
.hlu-card:fullscreen{display:flex;flex-direction:column;justify-content:center;border-radius:0;background:var(--cb,var(--card))}
.hlu-card:fullscreen .hlu-digits{font-size:calc(var(--s) * min(19vw,34vh))}
.hlu-card:-webkit-full-screen{display:flex;flex-direction:column;justify-content:center;border-radius:0}

/* toolbar */
.hlu-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px auto 0;padding:10px;background:var(--bar);border:1px solid var(--line);border-radius:18px}
.hlu-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.hlu-btn:hover{border-color:var(--accent)}
.hlu-btn:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.hlu-btn[hidden]{display:none}
.hlu-btn input,.hlu-btn select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.hlu-sw{width:16px;height:16px;border-radius:50%;background:conic-gradient(#e33,#fb0,#3c5,#09f,#a3f,#e33);display:inline-block}
.hlu-sep{width:1px;background:var(--line);margin:4px 2px}
.hlu-tzpanel{margin:10px auto 0;padding:12px;border:1px solid var(--line);border-radius:12px;text-align:center}
.hlu-tzpanel[hidden]{display:none}
.hlu-tzpanel label{margin-right:8px}
select.hlu-tzs{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);max-width:100%}
.hlu-caption{margin:12px 0 0;text-align:center;color:var(--mute);font-size:15px}
.hlu-toast{margin:4px 0 0;min-height:1.4em;text-align:center;color:var(--accent);font-size:14px}

/* content */
.hlu-sec{margin:34px 0 0}
.hlu-units{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0 0}
.hlu-units div{border-top:2px solid var(--accent);padding-top:6px}
.hlu-units dt{color:var(--mute);font-size:14px}
.hlu-units dd{margin:0;font-size:24px;font-variant-numeric:tabular-nums}
.hlu-sentence{margin:0;color:var(--mute)}
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line)}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);font-weight:400}
tbody th{font-weight:600;width:42%}
.hlu-chips{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hlu-chips a{display:block;padding:8px 13px;border:1px solid var(--line);background:var(--panel);border-radius:999px;text-decoration:none;font-size:15px}
.hlu-chips a:hover{border-color:var(--accent)}
details{border-bottom:1px solid var(--line);padding:12px 0}
summary{cursor:pointer;font-weight:600}
details p{margin:8px 0 0;color:var(--mute)}
.hlu-crumbs{font-size:14px;color:var(--mute);margin:0 0 12px}
.hlu-crumbs a{color:var(--mute)}
.hlu-hub h2{margin-top:26px}
.hlu-foot{max-width:900px;margin:0 auto;padding:0 16px 40px;color:var(--mute);font-size:14px}
.hlu-foot a{color:var(--mute)}
@media (max-width:520px){.hlu-bar{gap:6px;padding:8px}.hlu-btn{padding:0 10px}}

/* day progress + formats */
.hlu-fmt{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,4vw,36px);align-items:center;background:var(--card);border-radius:20px;padding:clamp(16px,3vw,26px)}
.hlu-ring{margin:0;text-align:center;width:170px}
.hlu-ring svg{display:block;width:150px;height:150px;margin:0 auto 6px;color:var(--ink)}
.hlu-ring figcaption{font-size:14px;color:var(--mute)}
.hlu-fl{margin:0}
.hlu-fl div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.hlu-fl div:last-child{border-bottom:0}
.hlu-fl dt{color:var(--mute)}
.hlu-fl dd{margin:0;font-weight:600;color:var(--accent);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:620px){.hlu-fmt{grid-template-columns:1fr}.hlu-ring{margin:0 auto}}

/* sound button */
.hlu-soundrow{display:flex;justify-content:center;margin:14px 0 0}
.hlu-sound{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.hlu-sound .ico-on{display:none}
.hlu-sound span{display:inline-flex}
.hlu-sound.is-on{border-color:#d92d20;color:#d92d20}
.hlu-sound.is-on .ico-on{display:inline-flex}
.hlu-sound.is-on .ico-off{display:none}