:root {
  color-scheme: light dark;
  --light: #f4f4f4;
  --dark: #0b0b0b;
  --panel-dark: #121212;
  --muted-light: #505050;
  --muted-dark: #b4b4b4;
  --fg: var(--dark);
  --bg: var(--light);
  --muted: var(--muted-light);
  --panel: var(--light);
  --outline-width: 0px;
  --outline-color: var(--bg);
  --text-size: 28px;
  --home-align: right;
  --menu-align: left;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: transparent; color: var(--fg); }
body { overflow: hidden; }
body.dark { --fg: var(--light); --bg: var(--dark); --muted: var(--muted-dark); --panel: var(--panel-dark); }
body.light { --fg: var(--dark); --bg: var(--light); --muted: var(--muted-light); --panel: var(--light); }
button, input, select { font: inherit; color: inherit; }
button { border: 0; background: transparent; }
#app { width: 100%; height: 100%; }
.screen { width: 100%; height: 100%; padding: 28px 28px 24px; overflow: auto; }
.screen.solid { background: var(--bg); }
.home { background: transparent; display: flex; flex-direction: column; text-align: var(--home-align); touch-action: none; }
.outlined { -webkit-text-stroke: var(--outline-width) var(--outline-color); paint-order: stroke fill; }
.default-home { width: 100%; padding: 18px; margin-bottom: 24px; text-align: left; background: var(--panel); border: 1px solid color-mix(in srgb, var(--fg) 27%, transparent); border-radius: 8px; }
.clock { font-weight: 300; padding-top: 10px; line-height: 1.08; align-self: var(--home-flex-align, flex-end); }
.date { font-weight: 300; padding: 2px 0 4px; align-self: var(--home-flex-align, flex-end); }
.home-items { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 8px; }
.home-item { display: block; width: fit-content; max-width: 100%; padding: 10px 0; align-self: var(--home-flex-align, flex-end); font-size: var(--text-size); text-align: inherit; }
.home-item.empty { opacity: .35; }
.drawer { display: flex; flex-direction: column; }
.search { width: 100%; padding: 8px 0; border: 0; outline: 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); background: transparent; font-size: var(--text-size); font-weight: 300; text-align: var(--menu-align); }
.app-list { flex: 1; overflow: auto; margin-top: 8px; }
.app-row { display: block; width: 100%; padding: 12px 0; text-align: var(--menu-align); font-size: var(--text-size); }
.search-options { margin-inline: auto; }
.settings h1, .subscreen h1 { font-size: 35px; font-weight: 400; margin: 0 0 24px; }
.setting-row { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 52px; padding: 9px 0; text-align: left; font-size: 22.5px; }
.setting-row > span:last-child { color: var(--muted); font-size: .84em; text-align: right; }
.setting-row select, .setting-row input { max-width: 11rem; border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); border-radius: 7px; padding: 6px 8px; background: var(--panel); }
.setting-row input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }
.setting-row input[type="range"] { width: 10rem; }
.subtle { color: var(--muted); }
.hidden-row { opacity: .55; }
#web-update { position: fixed; right: 18px; bottom: 18px; z-index: 20; padding: 9px 13px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); backdrop-filter: blur(12px); box-shadow: 0 6px 22px #0002; }
dialog { border: 0; padding: 0; background: transparent; color: var(--fg); }
dialog::backdrop { background: #0003; }
#sheet { width: min(100%, 34rem); max-height: 70vh; margin: auto auto 0; }
#sheet-content, .pattern-panel { background: var(--panel); border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); border-radius: 12px 12px 0 0; padding: 18px 24px 24px; max-height: 70vh; overflow: auto; }
.sheet-title { font-size: 25px; margin: 0 0 10px; font-weight: 400; }
.sheet-action { display: block; width: 100%; padding: 13px 0; text-align: var(--menu-align); font-size: 22.5px; }
.sheet-input { width: 100%; padding: 12px 0; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); outline: 0; font-size: 22.5px; }
#pattern-dialog { width: min(calc(100% - 32px), 360px); }
.pattern-panel { border-radius: 12px; text-align: center; }
.pattern-panel h2 { font-weight: 400; font-size: 28px; margin: 0 0 8px; }
.pattern-panel p { min-height: 2.5em; margin: 0 0 8px; color: var(--muted); }
.pattern-grid { width: min(78vw, 280px); aspect-ratio: 1; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); touch-action: none; }
.pattern-dot { width: 22px; height: 22px; border-radius: 50%; margin: auto; background: var(--muted); transition: transform .08s ease, background .08s ease; }
.pattern-dot.selected { background: var(--fg); transform: scale(1.35); }
.dialog-actions { margin-top: 8px; }
.dialog-actions button { padding: 10px 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Offline fallback for the shared res.eqeqo.pe option-menu component. */
eq-option-menu.search-options[open] { display:grid; gap:2px; width:min(100%,30rem); margin-top:6px; padding:6px; border:1px solid color-mix(in srgb,var(--fg) 16%,transparent); border-radius:13px; background:color-mix(in srgb,var(--panel) 88%,transparent); }
eq-option-menu.search-options:not([open]), eq-option-menu.search-options[hidden] { display:none; }
eq-option-menu.search-options button { width:100%; min-height:42px; padding:10px 13px; border-radius:9px; text-align:left; }