:root {
  --paper: #f1eee6;
  --dim-paper: rgba(241, 238, 230, .54);
  --faint-paper: rgba(241, 238, 230, .12);
  --background: #050608;
  --accent: #d3b57c;
  --panel: rgba(19, 19, 22, .8);
  --panel-border: rgba(255, 255, 255, .10);
  --ui: "DM Sans", system-ui, sans-serif;
  --display: "Instrument Serif", Georgia, serif;
  --mono: "DM Mono", monospace;
  --theme-font: var(--ui);
  --theme-scale: .94;
  --theme-tracking: -.095em;
  --theme-weight: 500;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: var(--background); color: var(--paper); font-family: var(--ui); overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }

.clock-app {
  position: relative;
  display: grid;
  min-height: 100dvh;
  width: 100%;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background: var(--background);
  transition: filter 900ms cubic-bezier(.2,.7,.2,1), background 1100ms ease;
  -webkit-tap-highlight-color: transparent;
}
.clock-app::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: rgba(0,0,0,var(--night-filter, .05)); transition: background 500ms ease; }
.ambient { position: absolute; z-index: -2; border-radius: 50%; filter: blur(2px); pointer-events: none; opacity: .75; transition: background 1.1s ease, opacity 1.1s ease; }
.ambient-a { width: min(72vw, 950px); aspect-ratio: 1; top: -38%; right: -12%; background: radial-gradient(circle, rgba(110, 80, 163, .18), rgba(30, 15, 50, 0) 68%); }
.ambient-b { width: min(65vw, 850px); aspect-ratio: 1; bottom: -45%; left: -14%; background: radial-gradient(circle, rgba(107, 76, 23, .1), rgba(35, 25, 8, 0) 70%); }
.noise { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }

.clock-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(78vw, 760px);
  padding: 2.2rem 2.5rem 1.8rem;
  text-align: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 90px rgba(0,0,0,.14);
  backdrop-filter: blur(10px);
  transform: translate(calc(var(--position-x, 0px) + var(--drift-x, 0px)), calc(var(--position-y, 0px) + var(--drift-y, 0px)));
  transition: transform 2400ms cubic-bezier(.42,0,.18,1), opacity 400ms ease, border-color 320ms ease, box-shadow 320ms ease;
}
.clock-stage::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,.04);
  pointer-events: none;
}
.clock-app.alignment-left .clock-stage { justify-self: start; align-items: flex-start; text-align: left; }.clock-app.alignment-right .clock-stage { justify-self: end; align-items: flex-end; text-align: right; }
.eyebrow, .date, .battery { margin: 0; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { color: var(--dim-paper); font-size: clamp(.56rem, .8vw, .68rem); font-weight: 500; }
.time-wrap { display: flex; align-items: flex-start; justify-content: center; margin: clamp(.7rem, 1.6vh, 1.5rem) 0 clamp(.65rem, 1.5vh, 1.25rem); }
.time { display: inline-flex; align-items: flex-end; color: var(--paper); font-family: var(--clock-font, var(--theme-font)); font-size: clamp(6.6rem, calc(27vw * var(--clock-scale, 1) * var(--theme-scale, 1)), 27rem); font-weight: var(--clock-weight, var(--theme-weight)); line-height: .77; letter-spacing: calc(var(--theme-tracking, -.085em) + var(--clock-tracking, 0em)); font-variant-numeric: tabular-nums lining-nums; text-shadow: 0 0 1px rgba(255,255,255,.25); transition: color 900ms ease, text-shadow 900ms ease, font-family 500ms ease, letter-spacing 350ms ease, font-size 350ms ease; white-space: nowrap; }
.time-character { display: inline-block; will-change: transform, opacity, filter; }
.time-character.changed { animation: digit-arrival var(--digit-duration, 430ms) cubic-bezier(.22,.8,.2,1) both; }
.time-separator { display: inline-block; transform: translateY(-.025em); opacity: .82; }
.time-separator.changed { animation: separator-pulse var(--digit-duration, 430ms) cubic-bezier(.22,.8,.2,1) both; }
@keyframes digit-arrival { 0% { opacity: .02; transform: translateY(.12em) scale(.965); filter: blur(2px); } 55% { opacity: 1; transform: translateY(-.012em) scale(1.012); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes separator-pulse { 0% { opacity: .18; transform: translateY(.1em) scale(.85); } 50% { opacity: 1; transform: translateY(-.02em) scale(1.04); } 100% { opacity: .82; transform: translateY(-.025em) scale(1); } }
.seconds { display: inline-flex; align-self: flex-end; margin: 0 0 .14em clamp(.6rem, 1.4vw, 1.5rem); color: var(--dim-paper); font-family: var(--mono); font-size: clamp(.72rem, 1.25vw, 1.05rem); letter-spacing: .05em; font-variant-numeric: tabular-nums; transition: opacity 200ms ease, transform 200ms ease; }
.seconds-character { display: inline-block; will-change: transform, opacity, filter; }
.seconds-character.changed { animation: digit-arrival var(--digit-duration, 430ms) cubic-bezier(.22,.8,.2,1) both; }
.clock-meta { display: flex; min-height: 1rem; align-items: center; justify-content: center; gap: .8rem; color: var(--dim-paper); transition: opacity 350ms ease, transform 350ms ease; }
.date, .battery { font-size: clamp(.56rem, .8vw, .68rem); font-weight: 500; }
.meta-rule { width: .19rem; height: .19rem; border-radius: 99px; background: var(--accent); opacity: .7; }
.battery { display: flex; gap: .38rem; align-items: center; }
.battery-icon { width: .7rem; height: .38rem; border: 1px solid currentColor; border-radius: 1px; position: relative; }.battery-icon::after { content: ""; position: absolute; width: 1px; height: 3px; right: -3px; top: 1px; background: currentColor; }

.quick-control, .close-button { position: relative; z-index: 10; cursor: pointer; border: 0; background: transparent; outline-offset: 5px; }

.quick-controls { position: absolute; z-index: 10; bottom: max(1.35rem, env(safe-area-inset-bottom)); left: 50%; display: flex; gap: .55rem; padding: .35rem; border: 1px solid var(--panel-border); border-radius: 999px; background: rgba(20,20,23,.72); backdrop-filter: blur(18px); transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; transition: opacity 300ms ease, transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease; box-shadow: 0 14px 32px rgba(0,0,0,.16); }
.clock-app.controls-visible .quick-controls { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; box-shadow: 0 18px 38px rgba(0,0,0,.2); }
.quick-control { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 50%; color: var(--paper); opacity: .78; transition: opacity 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease; }.quick-control:hover, .quick-control:focus-visible { background: rgba(255,255,255,.11); opacity: 1; transform: scale(1.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }.quick-control svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.gesture-hint { position: absolute; z-index: 8; bottom: max(1.9rem, env(safe-area-inset-bottom)); left: 50%; margin: 0; color: var(--dim-paper); font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; transform: translateX(-50%); opacity: .4; animation: settle-hint 4s 3s forwards; pointer-events: none; }.clock-app.controls-visible .gesture-hint { opacity: 0; }
@keyframes settle-hint { to { opacity: 0; } }

.settings-sheet { position: absolute; z-index: 20; top: 50%; left: 50%; width: min(27rem, calc(100% - 2rem)); max-height: min(43rem, calc(100dvh - 2rem)); overflow-y: auto; overscroll-behavior: contain; padding: 1.45rem; border: 1px solid var(--panel-border); border-radius: 1.2rem; color: var(--paper); background: rgba(16,16,19,.9); box-shadow: 0 1.5rem 5rem rgba(0,0,0,.35); backdrop-filter: blur(26px); transform: translate(-50%, calc(-50% + 1.5rem)) scale(.98); opacity: 0; pointer-events: none; transition: transform 350ms cubic-bezier(.2,.85,.2,1), opacity 280ms ease; }
.clock-app.settings-open .settings-sheet { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }.clock-app.settings-open .clock-stage { opacity: .28; }.clock-app.settings-open .quick-controls, .clock-app.settings-open .gesture-hint { opacity: 0; pointer-events: none; }
.sheet-header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 1.45rem; }.sheet-kicker { margin: 0 0 .2rem; color: var(--accent); font-family: var(--mono); font-size: .59rem; letter-spacing: .12em; text-transform: uppercase; }.sheet-header h1 { margin: 0; font-family: var(--display); font-size: 2.15rem; font-weight: 400; letter-spacing: -.04em; }.close-button { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: var(--dim-paper); font-size: 1.7rem; font-weight: 200; line-height: 1; transition: background 160ms ease, color 160ms ease; }.close-button:hover,.close-button:focus-visible { color: var(--paper); background: rgba(255,255,255,.1); }
.setting-group { padding: 1.05rem 0; border-top: 1px solid rgba(255,255,255,.09); }.setting-label-row { display: flex; justify-content: space-between; color: var(--paper); font-size: .78rem; }.setting-label, .setting-help { margin: 0; }.setting-label { font-size: .78rem; }.setting-help { margin-top: .23rem; color: var(--dim-paper); font-size: .66rem; }.setting-label-row output { color: var(--accent); font-family: var(--mono); font-size: .7rem; }
input[type="range"] { width: 100%; height: 1.5rem; margin-top: .8rem; appearance: none; background: transparent; cursor: pointer; }input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--range-progress, 33%), rgba(255,255,255,.16) var(--range-progress, 33%)); }input[type="range"]::-webkit-slider-thumb { width: .8rem; height: .8rem; margin-top: -.3rem; appearance: none; border: 2px solid var(--background); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }input[type="range"]::-moz-range-track { height: 2px; background: rgba(255,255,255,.16); }input[type="range"]::-moz-range-progress { height: 2px; background: var(--accent); }input[type="range"]::-moz-range-thumb { width: .62rem; height: .62rem; border: 2px solid var(--background); border-radius: 50%; background: var(--accent); }
.theme-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; margin-top: .78rem; }.theme-choice { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; padding: .45rem; border: 1px solid transparent; border-radius: .55rem; color: var(--dim-paper); background: transparent; cursor: pointer; font-size: .62rem; text-align: left; transition: border-color 180ms ease, background 180ms ease, color 180ms ease; }.theme-choice.selected { border-color: var(--accent); color: var(--paper); background: rgba(255,255,255,.04); }.theme-preview { width: 100%; height: 2.35rem; border-radius: .3rem; }.obsidian-preview { background: linear-gradient(135deg,#06070b,#282142); }.ember-preview { background: linear-gradient(135deg,#120c0a,#6a2615); }.lunar-preview { background: linear-gradient(135deg,#101417,#405860); }
.appearance-group .setting-label-row:not(:first-child) { margin-top: 1rem; }.select-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .78rem; font-size: .72rem; }.select-row select { min-width: 9rem; padding: .42rem 1.65rem .42rem .6rem; border: 1px solid rgba(255,255,255,.13); border-radius: .4rem; color: var(--paper); background: rgba(255,255,255,.06); outline-offset: 3px; }.select-row option { color: #f1eee6; background: #17171a; }.color-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; margin-top: .78rem; }.color-field { display: flex; flex-direction: column; gap: .38rem; color: var(--dim-paper); font-size: .61rem; }.color-field input { width: 100%; height: 2rem; padding: .13rem; border: 1px solid rgba(255,255,255,.13); border-radius: .42rem; background: transparent; cursor: pointer; }.reset-button { padding: 0; border: 0; color: var(--accent); background: transparent; cursor: pointer; font-family: var(--mono); font-size: .65rem; }.reset-button:hover, .reset-button:focus-visible { color: var(--paper); text-decoration: underline; }
.toggle-group { display: flex; align-items: center; justify-content: space-between; }.switch { position: relative; display: inline-block; width: 2.1rem; height: 1.2rem; }.switch input { width: 0; height: 0; opacity: 0; }.switch span { position: absolute; inset: 0; border-radius: 10rem; background: rgba(255,255,255,.13); cursor: pointer; transition: background 180ms ease; }.switch span::before { content: ""; position: absolute; width: .82rem; height: .82rem; top: .19rem; left: .19rem; border-radius: 50%; background: var(--dim-paper); transition: transform 180ms ease, background 180ms ease; }.switch input:checked + span { background: var(--accent); }.switch input:checked + span::before { background: var(--background); transform: translateX(.9rem); }.switch input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 3px; }.sheet-note { margin: .25rem 0 0; color: var(--dim-paper); font-size: .63rem; text-align: center; }
.toast { position: absolute; z-index: 30; top: max(1.5rem, env(safe-area-inset-top)); left: 50%; padding: .58rem .82rem; border: 1px solid var(--panel-border); border-radius: 99px; color: var(--paper); background: var(--panel); box-shadow: 0 7px 22px rgba(0,0,0,.2); font-size: .68rem; letter-spacing: .03em; transform: translate(-50%, -1rem); opacity: 0; pointer-events: none; transition: opacity 240ms ease, transform 240ms ease; }.toast.visible { transform: translate(-50%,0); opacity: 1; }

.theme-obsidian { --theme-font: var(--ui); --theme-scale: .92; --theme-tracking: -.105em; --theme-weight: 500; }.theme-obsidian .time { text-shadow: 0 0 18px rgba(163,201,223,.08); }
.theme-ember { --paper: #f4e5d3; --dim-paper: rgba(244,229,211,.55); --faint-paper: rgba(244,229,211,.12); --background: #100c0a; --accent: #d47c52; --panel: rgba(27,16,13,.82); --panel-border: rgba(244,229,211,.12); --theme-font: var(--display); --theme-scale: 1; --theme-tracking: -.085em; --theme-weight: 400; }.theme-ember .ambient-a { background: radial-gradient(circle,rgba(152,44,18,.20),rgba(68,13,8,0) 67%); }.theme-ember .ambient-b { background: radial-gradient(circle,rgba(206,112,37,.11),rgba(52,20,8,0) 70%); }.theme-ember .time { text-shadow: 0 0 18px rgba(208,96,58,.09); }
.theme-lunar { --paper: #dff4f1; --dim-paper: rgba(223,244,241,.54); --faint-paper: rgba(223,244,241,.12); --background: #0b1012; --accent: #7bcfc5; --panel: rgba(11,21,23,.82); --panel-border: rgba(223,244,241,.12); --theme-font: var(--mono); --theme-scale: .82; --theme-tracking: -.11em; --theme-weight: 400; }.theme-lunar .ambient-a { background: radial-gradient(circle,rgba(51,125,137,.20),rgba(10,35,40,0) 68%); }.theme-lunar .ambient-b { background: radial-gradient(circle,rgba(61,129,114,.10),rgba(11,32,25,0) 70%); }

@media (orientation: landscape) and (max-height: 600px) { .time { font-size: min(calc(31vh * var(--clock-scale, 1) * var(--theme-scale, 1)), calc(23vw * var(--clock-scale, 1) * var(--theme-scale, 1))); }.eyebrow { margin-top: .1rem; }.time-wrap { margin: .35rem 0 .55rem; }.clock-stage { padding: 1rem 2rem; }.settings-sheet { max-height: calc(100dvh - 1rem); } }
@media (max-width: 430px) { .time { font-size: clamp(5.4rem, calc(27vw * var(--clock-scale, 1) * var(--theme-scale, 1)), 10rem); }.seconds { display: none; }.clock-meta { gap: .55rem; }.settings-sheet { padding: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }