:root{color-scheme:dark;--bg:#101722;--surface:rgba(255,255,255,.055);--text:#f3f7fb;--muted:#9aaabc;--accent:#76e1ca;--ring:rgba(118,225,202,.2);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;min-width:320px;background:var(--bg);color:var(--text)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 43%,var(--ring),transparent 34%),linear-gradient(135deg,rgba(255,255,255,.025),transparent 45%)}
.clock{min-height:100vh;min-height:100dvh;padding:clamp(22px,4vw,56px);display:grid;place-items:center;isolation:isolate}

/* Controls: hidden until the pointer moves */
.ui[hidden]{display:none}
.ui{position:fixed;top:clamp(14px,2vw,28px);opacity:0;pointer-events:none;transition:opacity .35s,color .2s,border-color .2s}
body.active .ui,.ui:focus-visible,body.settings-open .gear{opacity:1;pointer-events:auto}
body:not(.active):not(.settings-open){cursor:none}
.fullscreen{left:clamp(14px,2vw,28px);appearance:none;border:1px solid color-mix(in srgb,var(--muted) 28%,transparent);border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:12px;padding:8px 12px;cursor:pointer}
.gear{right:clamp(14px,2vw,28px);appearance:none;border:0;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;background:transparent;color:var(--muted);cursor:pointer}
.fullscreen:hover,.fullscreen:focus-visible,.gear:hover,.gear:focus-visible{color:var(--text);outline:0}
.fullscreen:hover,.fullscreen:focus-visible{border-color:var(--text)}

/* Settings panel */
.settings{position:fixed;top:calc(clamp(14px,2vw,28px) + 48px);right:clamp(14px,2vw,28px);width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 100px);overflow:auto;display:grid;gap:12px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--muted) 19%,transparent);border-radius:16px;background:color-mix(in srgb,var(--bg) 82%,var(--text));backdrop-filter:blur(12px);z-index:2}
.settings[hidden]{display:none}
body[data-style="analog"] .setting[data-for="digital"]{display:none}
.settings{transition:opacity .2s}
.settings.sizing{opacity:.15}
.setting{display:grid;grid-template-columns:72px 1fr;align-items:start;gap:14px}
.setting>p{margin:0;padding-top:9px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.options{display:flex;gap:4px;flex-wrap:wrap}
.option{appearance:none;display:inline-flex;align-items:center;gap:7px;border:0;border-radius:9px;background:transparent;color:var(--muted);padding:8px 9px;font:inherit;font-size:12px;cursor:pointer;transition:background .2s,color .2s}
.option i{display:block;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.option.active,.option:hover,.option:focus-visible{background:color-mix(in srgb,var(--text) 9%,transparent);color:var(--text);outline:0}

.slider{display:flex;align-items:center;gap:12px;padding-top:6px}
.slider input{flex:1;min-width:0;accent-color:var(--accent);cursor:pointer}
.slider output{width:4ch;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}

/* Display */
.display{text-align:center;max-width:100%;transform:scale(var(--size,1));transform-origin:center}
.date{margin:clamp(18px,3.2vh,32px) 0 0;color:var(--text);font-size:clamp(18px,2vw,28px);font-weight:400;letter-spacing:.01em}
body.no-date .date{display:none}
.digital[hidden]{display:none}
#time{display:block;font-size:clamp(72px,18.4vw,330px);font-weight:300;letter-spacing:-.075em;line-height:.9;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Digital designs (default "light" is the base #time rule above) */
body[data-digital="bold"] #time{font-size:clamp(60px,15.5vw,290px);font-weight:850;letter-spacing:-.05em}
body[data-digital="mono"] #time{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;font-size:clamp(56px,14.5vw,270px);font-weight:400;letter-spacing:-.06em;color:var(--accent)}
body[data-digital="mono"] .sep{opacity:.55}
body[data-digital="serif"] #time{font-family:Georgia,"Times New Roman",serif;font-size:clamp(60px,16vw,300px);font-style:italic;font-weight:400;letter-spacing:-.03em}
body[data-digital="outline"] #time{font-size:clamp(60px,15.5vw,290px);font-weight:850;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:max(2px,.022em) var(--text)}
body[data-digital="stacked"] #time{display:flex;flex-direction:column;align-items:center;font-size:min(30vh,34vw);font-weight:700;letter-spacing:-.04em;line-height:.86}
body[data-digital="stacked"] .sep{display:none}
body[data-digital="stacked"] .part-m{color:var(--accent)}
body[data-digital="stacked"] .part-s{color:var(--muted);font-size:.55em;font-weight:400}
body[data-digital="cards"] #time{display:flex;justify-content:center;gap:.1em;font-size:clamp(52px,13.5vw,250px);font-weight:600;letter-spacing:0;line-height:1}
body[data-digital="cards"] .sep{display:none}
body[data-digital="cards"] .part{position:relative;padding:.14em .16em;border:1px solid color-mix(in srgb,var(--muted) 25%,transparent);border-radius:.14em;background:var(--surface)}
body[data-digital="cards"] .part::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(2px,.012em);background:var(--bg)}
body[data-digital="neon"] #time{font-size:clamp(60px,16vw,300px);font-weight:300;letter-spacing:-.05em;color:var(--accent);text-shadow:0 0 .05em var(--accent),0 0 .22em var(--accent),0 0 .6em var(--ring)}
body[data-digital="segments"] #time{display:flex;justify-content:center;align-items:center;gap:.07em;font-size:clamp(50px,14vw,260px);line-height:1}
body[data-digital="segments"] .part{display:flex;gap:.07em}
.seg-digit{width:.46em;height:.76em;display:block}
.seg-sep{width:.13em;height:.76em;display:block}
.seg-digit .on,.seg-sep .on{fill:var(--accent)}
.seg-digit .off{fill:var(--text);opacity:.07}
body[data-digital="airy"] #time{font-size:clamp(40px,9vw,170px);font-weight:200;letter-spacing:.22em;margin-right:-.22em}
body[data-digital="airy"] .sep{opacity:.45}

.ampm{font-size:.24em;font-weight:400;letter-spacing:.08em;margin-left:.5em;color:var(--muted);vertical-align:.9em}
body[data-digital="stacked"] .ampm{margin:.3em 0 0;vertical-align:baseline}
body[data-digital="cards"] .ampm,body[data-digital="segments"] .ampm{align-self:flex-start;margin-left:.2em}
body[data-digital="outline"] .ampm,body[data-digital="neon"] .ampm{-webkit-text-stroke:0;text-shadow:none;color:var(--muted)}

/* Analog: shapes are drawn by faces.js and coloured through these utilities */
.analog{width:min(72vmin,720px);height:min(72vmin,720px);display:block;margin:0 auto}
.analog[hidden]{display:none}
.stage3d{width:min(80vmin,780px);height:min(80vmin,780px);margin:0 auto}
.stage3d[hidden]{display:none}
.stage3d-canvas{display:block;width:100%;height:100%}
.analog :where(line,circle,polygon,text):where(:not(.raw)){fill:none;stroke:none}
.analog .num{font-family:inherit;font-weight:300}
.analog .serif{font-family:Georgia,"Times New Roman",serif;font-weight:400}
.analog .num.bold{font-weight:700}
.s-text{stroke:var(--text)}.s-text2{stroke:var(--text);opacity:.55}.s-mut{stroke:var(--muted)}.s-acc{stroke:var(--accent)}.s-bg{stroke:var(--bg)}.s-track{stroke:var(--muted);opacity:.28}
.f-text{fill:var(--text)}.f-text2{fill:var(--text);opacity:.55}.f-mut{fill:var(--muted)}.f-acc{fill:var(--accent)}.f-bg{fill:var(--bg)}
body.no-seconds .second-hand{display:none}

/* Themes */
body[data-theme="nordic"]{color-scheme:dark;--bg:#0c2029;--surface:rgba(200,242,248,.08);--text:#ecfbfc;--muted:#9dc7cc;--accent:#81d9ed;--ring:rgba(129,217,237,.22)}
body[data-theme="amber"]{color-scheme:dark;--bg:#21170d;--surface:rgba(255,212,142,.075);--text:#fff7e9;--muted:#d5b988;--accent:#ffb64c;--ring:rgba(255,182,76,.21)}
body[data-theme="black"]{color-scheme:dark;--bg:#000;--surface:rgba(255,255,255,.06);--text:#f2f2f2;--muted:#8a8a8a;--accent:#fff;--ring:transparent}
body[data-theme="paper"]{color-scheme:light;--bg:#f2eee6;--surface:rgba(33,42,49,.055);--text:#172129;--muted:#647078;--accent:#d46835;--ring:rgba(212,104,53,.15)}

@media(max-width:600px){
  .clock{padding:20px}
  #time{font-size:clamp(58px,20vw,120px)}
  body[data-digital="bold"] #time,body[data-digital="outline"] #time{font-size:17.5vw}
  body[data-digital="mono"] #time{font-size:17vw}
  body[data-digital="serif"] #time{font-size:18vw}
  body[data-digital="neon"] #time{font-size:18.5vw}
  body[data-digital="cards"] #time{font-size:17vw}
  body[data-digital="segments"] #time{font-size:19vw}
  body[data-digital="airy"] #time{font-size:12vw}
  .settings{left:14px;right:14px;width:auto}
  .setting{grid-template-columns:1fr;gap:2px}
  .setting>p{padding-top:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}