/* first-paint */
:root {
  color-scheme: light;
  --ink: #243047; --muted: #56637a; --blue: #3969e7; --line: #cbd3e1;
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink); background: #e7eef8;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100svh; }
button, input, textarea, select { color: inherit; font: inherit; }
button, select { cursor: pointer; }
button { padding: 0; background: none; border: 0; }
a { text-decoration: none; color: inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #3d69d5; outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul { margin: 0; }
.symbol-bank, .sr-only { position: absolute; height: 1px; width: 1px; overflow: hidden; clip-path: inset(50%); }
.icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; pointer-events: none; }
.icon.small { width: 13px; height: 13px; }
.backdrop { position: fixed; inset: 0; z-index: -1; background: #eaf1fc var(--initial-wallpaper,none) center/cover no-repeat; }
body { isolation: isolate; }
.backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg,#bed1fc30,transparent 45%,#c7bbfd1a); }
body[data-wallpaper=scenic] .backdrop::after { background: linear-gradient(180deg,#f8faff3d,#f8faff8c 34%,#f8faffc2 67%,#f8faff72); }
.topbar { position: absolute; top: 0; right: 0; padding: clamp(15px,2.6vh,29px) clamp(20px,3.7vw,67px); }
.toolbar { display: flex; gap: 8px; align-items: center; }
.top-control { display: inline-flex; align-items: center; justify-content: center; min-height: 37px; background: #f8faffb8; border: 1px solid #ffffffe6; box-shadow: 0 1px 4px #2c456b11; color: #3e4d66; }
.top-control:hover, .top-control:focus-visible { background: #fff; }
.top-control .icon { width: 17px; height: 17px; }
.top-control .icon.small { width: 11px; height: 11px; }
.region-control { gap: 7px; padding: 6px 11px; border-radius: 24px; font-size: 12px; font-weight: 520; }
.region-control .language-code { padding-left: 6px; border-left: 1px solid #cdd4e0; color: #67748a; font-size: 10px; font-weight: 650; }
#region-short, .top-control.tools-toggle { display: none; }
.round { width: 37px; border-radius: 50%; }
.desktop { width: min(850px,calc(100% - 180px)); margin: auto; padding: clamp(88px,12svh,116px) 0 max(48px,6svh); }
.search-area { position: relative; }
/* Paint the rounded surfaces directly so hover never repaints a rectangle of wallpaper over the shortcuts. */
.search-box { display: flex; align-items: center; gap: 14px; height: 70px; width: 100%; padding: 9px 11px 9px clamp(17px,2vw,27px); border-radius: 36px; border: 1px solid #b7c4d08a; background: linear-gradient(180deg,#fffffffa,#fcfdfff2); box-shadow: inset 0 1px 0 #fff, 0 1px 2px #25394d0c, 0 4px 11px -6px #26394f36; }
.search-box:focus-within { border-color: #7397d2; box-shadow: 0 0 0 2px #81a6df35, inset 0 1px 0 #fff; }
.search-glass { width: 25px; height: 25px; color: #52617b; stroke-width: 1.85; }
#query { flex: 1; min-width: 0; height: 100%; padding: 0; background: transparent; border: 0; outline: 0; font-size: clamp(18px,1.55vw,24px); font-weight: 420; letter-spacing: -.026em; }
#query::placeholder { color: #67768e; opacity: 1; }
kbd { flex: none; padding: 2px 6px; color: #69778e; border: 1px solid #b8c4d878; border-radius: 6px; font: inherit; font-size: 12px; line-height: 1.5; }
.submit-search { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: white; background: linear-gradient(145deg,#6995ff,#4071f0); box-shadow: inset 0 0 0 1px #3468dd38; }
.submit-search:hover { background: #3567e6; }
.submit-search .icon { width: 23px; height: 23px; stroke-width: 2; }
/* end first-paint */
.engines { --engine-icon:28px; --engine-line:16px; position:relative; margin:17px auto 0; display:grid; grid-template-columns:repeat(auto-fit,76px); justify-content:center; gap:6px; }
.engine {
  min-width:0; min-height:62px; padding:6px 3px 5px;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:var(--engine-icon) var(--engine-line);
  align-content:center; place-items:center; row-gap:4px;
  border:1px solid transparent; border-radius:14px; color:#34425b; font-size:11px; font-weight:500;
}
.engine img { display:block; width:var(--engine-icon); height:var(--engine-icon); object-fit:contain; }
.engine-name { display:block; width:100%; line-height:var(--engine-line); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.engine:hover { background: #ffffff70; }
.engine[aria-pressed=true] { background:#fbfdff; border-color:#8ca9d0; box-shadow:0 1px 4px #314c7415; color:#203855; }
.favicon-pending { background:url("assets/marks/google.svg") center / contain no-repeat; }
.search-hint { color: #475875; margin: 6px 0 -24px; font-size: 12px; text-align: center; }
.favorites { width: min(100%,780px); margin: clamp(29px,4.8svh,48px) auto 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.section-heading h2 { font-family: inherit; line-height: 1.3; font-size: 16px; font-weight: 600; letter-spacing: -.025em; }
.add-site { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; color: #4b5b78; border-radius: 8px; font-size: 13px; }
.add-site:hover { background: #ffffffb8; }
.add-site .icon { width: 15px; height: 15px; }
.site-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); list-style: none; padding: 0; gap: 16px 4px; }
.site-grid li { position: relative; min-width: 0; }
.site-grid li > a, .site-grid li > button[data-folder] { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 6px; padding: 4px 1px; border-radius: 12px; }
.tile { display: grid; place-items: center; width: clamp(47px,4.2vw,61px); aspect-ratio: 1; background: linear-gradient(155deg,#fff,#fbfcff); border: 1px solid #fffffff2; border-radius: 27%; box-shadow: 0 3px 9px #38466818,0 1px 2px #2a3e6213; transition: transform .16s, box-shadow .16s; }
.site-grid a:hover .tile, .site-grid button:hover .tile { transform: translateY(-3px); box-shadow: 0 5px 13px #38466829; }
.tile img { width: 62%; height: 62%; object-fit: contain; }
.tile[data-brand=lazada] { background: linear-gradient(145deg,#6645ff,#3823df); border-color: #7f6aff; }
.tile[data-brand=lazada] img { width: 76%; height: 76%; }
.tile[data-brand=grab] img { width: 78%; height: 78%; }
.tile[data-brand=custom] img { width:80%; height:80%; border-radius:15%; }
.site-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.35; font-weight: 480; color: #27364e; }
.tile.social-folder { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 6px; gap: 3px; background: linear-gradient(145deg,#c6d6efe0,#c0c2e4e6); border-color: #ecf0ff; }
.social-folder > span { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 26%; background: #fff; }
.social-folder img { width: 72%; height: 72%; }
.launchpad-tile { border: 0; overflow: hidden; background: #363d54; }
.launchpad-tile img { width: 100%; height: 100%; }
.edit-site { opacity: 0; position: absolute; right: max(2px,calc(50% - 35px)); top: -2px; background: white; box-shadow: 0 1px 4px #30466844; border: 1px solid #d5dce7; display: grid; place-items: center; border-radius: 50%; width: 23px; height: 23px; }
.edit-site .icon { width: 12px; height: 12px; }
.site-grid li:hover .edit-site, .site-grid li:focus-within .edit-site { opacity: 1; }
.dock { position: fixed; z-index: 3; top: 50%; right: clamp(10px,1.4vw,26px); transform: translateY(-50%); display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 71px; padding: 8px 4px; border: 1px solid #ffffffe6; border-radius: 24px; background: linear-gradient(145deg,#f8fafff0,#edf2f9e8); box-shadow: 0 1px 2px #26384b15, 0 3px 8px -5px #26384b3b; }
.dock-app { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 54px; padding: 2px 0; border-radius: 11px; font-size: 9.5px; line-height: 1.2; font-weight: 510; }
.dock-app span { width: 100%; overflow-wrap: anywhere; }
.dock-app img { display: block; width: 33px; height: 33px; transition: transform .16s; }
.dock-app:hover { background: #ffffffa8; }
.dock-app:hover img { transform: scale(1.06); }
.dock-app.running { box-shadow: inset -2px 0 #5379d3; }
dialog { border: 1px solid #fff; border-radius: 20px; padding: 23px; width: min(438px,calc(100% - 28px)); max-height: 88svh; overflow-y: auto; color: var(--ink); background: rgba(249,251,255,.98); box-shadow: 0 20px 90px #27375845,0 1px 5px #4d577d24; }
dialog::backdrop { background: #2631493d; backdrop-filter: blur(4px); }
body:has(dialog[open]) { overflow: hidden; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dialog-heading h2 { letter-spacing: -.04em; font-size: 23px; line-height: 1.2; font-weight: 620; }
.preferences-intro { display:flex; flex-wrap:wrap; align-items:center; gap:2px 14px; min-width:0; }
.preferences-about { display:inline-flex; align-items:center; gap:3px; min-height:32px; color:var(--muted); font-size:13px; font-weight:500; border-radius:4px; }
.preferences-about .icon { width:12px; height:12px; transform:rotate(-90deg); }
.preferences-about:is(:hover,:focus-visible) { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.icon-button { display: grid; place-items: center; width: 31px; height: 31px; flex: none; border-radius: 50%; background: #e7ebf2; color: #536078; }
.icon-button .icon { width: 16px; height: 16px; }
.icon-button:hover, .text-button:hover { background: #dce4f0; }
.dialog-intro, .field-note, .feedback { margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.feedback:empty { display: none; }
.field { display: flex; flex-direction: column; gap: 6px; margin-top: 15px; font-size: 13px; font-weight: 590; }
.field input, .field select, .field textarea, .tool-input { display: block; width: 100%; padding: 9px 10px; border: 1px solid #bbc6d6; background: #fff; border-radius: 8px; font-weight: 400; font-size: 16px; }
.select-button {
  --arrow-gap:9px; --arrow-width:20px; --text-inset:12px;
  position:relative; display:block; min-width:0;
}
.select-button select {
  display:block; width:100%; min-width:0; min-height:39px; margin:0;
  -webkit-appearance:none; appearance:none; border:1px solid #bbc7d5; border-radius:9px;
  padding:8px calc(var(--arrow-gap) + var(--arrow-width) + 8px) 8px var(--text-inset);
  background:linear-gradient(#fff,#f9fbfe); box-shadow:inset 0 1px 0 #fff,0 1px 2px #253c5510;
  font-size:15px; font-weight:480; line-height:1.4; text-overflow:ellipsis;
}
.select-button::after {
  content:""; position:absolute; pointer-events:none; right:var(--arrow-gap); top:0; bottom:0;
  margin-block:auto; width:var(--arrow-width); height:20px; border-radius:5px;
  background:#eaf0f7 url("assets/select-arrows.svg") center / 12px 14px no-repeat;
}
.select-button select:hover { border-color:#98aac0; }
.select-button select:focus-visible { border-color:#5276ad; outline:2px solid #5276ad; outline-offset:-1px; }
.select-button:has(select:focus-visible)::after { background-color:#dfeaf9; }
.branded-select { --text-inset:41px; }
.branded-select select { min-height:42px; }
.select-mark { position:absolute; pointer-events:none; inset-block:0; left:13px; margin-block:auto; width:18px; height:18px; }
.select-mark > * { display:block; width:100%; height:100%; object-fit:contain; }
@media (forced-colors:active) {
  .select-button select { appearance:auto; padding-right:8px; }
  .select-button::after { display:none; }
}
.field textarea { resize: vertical; }
.field-note { font-size: 12px; }
.dialog-actions { margin-top: 20px; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.preference-actions { justify-content:space-between; flex-wrap:wrap; }
#backup-pane section+section { border-top:1px solid var(--line,#d4dce8); padding-top:17px; margin-top:18px; }
#backup-pane h3 { font-size:15px; }
#backup-pane .field-note { margin:5px 0 10px; }
#backup-pane .file-pick { display:inline-flex; position:relative; cursor:pointer; }
.backup-options { display:grid; gap:5px; margin-bottom:8px; }
.backup-options:not(:has(label:not([hidden]))) { display:none; }
.backup-options label { display:flex; align-items:center; gap:8px; font-size:13px; }
.backup-options input { margin:0; accent-color:var(--blue); }
#backup-review { margin-top:12px; padding:12px; border:1px solid var(--line,#d4dce8); border-radius:12px; }
#backup-counts { font-weight:600; font-size:13px; }
.backup-buttons { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
#backup-status:empty { display:none; }
.primary-button, .secondary-button, .text-button, .upload-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 37px; padding: 8px 13px; border-radius: 9px; font-size: 13px; font-weight: 580; }
.primary-button { background: var(--blue); color: #fff; }
.primary-button:hover { background: #2e58c2; }
.primary-button .icon { width: 15px; height: 15px; }
.secondary-button, .upload-button { background: #e8edf6; border: 1px solid #d1dbe9; }
.secondary-button:hover, .upload-button:hover { background: #dce5f4; }
.danger { margin-right: auto; color: #b63545; }
.wallpaper-list { display: grid; gap: 6px; margin: 15px 0; }
.scene-option { display: flex; align-items: center; gap: 12px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 9px; text-align: left; font-size: 13px; }
.scene-option img { width: 84px; height: 40px; object-fit: cover; border-radius: 6px; }
.scene-option .icon { margin-left: auto; width: 17px; }
.scene-option[aria-pressed=true] { background: #e5edfa; border-color: #89a5d7; }
.upload-button { width: 100%; position: relative; overflow: hidden; }
.upload-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-button:focus-within { outline: 3px solid var(--blue); }
.engine-settings { margin: 17px 0 12px; padding: 8px 0 0; border: 0; }
.engine-settings legend { padding: 0; font-size: 13px; font-weight: 650; }
#engine-settings-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px; }
.setting-row { display: flex; align-items: center; min-width: 0; }
.setting-row label { display: flex; flex:1; min-width: 0; align-items: center; gap: 8px; padding:4px; min-height: 33px; border-radius:7px; cursor: pointer; font-size: 13px; overflow-wrap: anywhere; }
.setting-row input { flex:none; margin:0; }
.setting-row label:hover:not(:has(input:disabled)) { background:#eaf0f8; }
.setting-row label:has(input:disabled) { cursor:default; }
.setting-row label:has(input:focus-visible) { outline:2px solid #5276ad; outline-offset:-1px; }
.setting-row input:focus-visible { outline:none; }
.setting-row img { width: 16px; height: 16px; object-fit: contain; }
input[type=checkbox] { accent-color: var(--blue); }
.mini { width: 21px; height: 21px; margin-left: 3px; }
.custom-engine-details { border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; }
summary { cursor: pointer; font-weight: 560; }
.custom-engine-details .secondary-button { margin-top: 8px; }
.notice { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: max-content; max-width: 90%; border-radius: 12px; color: white; background: #34425a; font-size: 13px; z-index: 7; }
.notice:not(:empty) { padding: 10px 14px; }
#library-dialog { width: min(700px,calc(100% - 24px)); }
#library-dialog[data-view=folder] { width: min(440px,calc(100% - 24px)); background: #f0f3fdeF; }
.library-search { display: flex; align-items: center; gap: 7px; margin: 16px 0 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.library-search:focus-within { outline: 2px solid #7495e2; }
.library-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; }
.library-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.library-filters button { padding: 5px 9px; border-radius: 19px; background: #e8edf5; font-size: 12px; }
.library-filters button[aria-pressed=true] { background: #395578; color: white; }
.library-list h3 { margin: 20px 0 8px; font-size: 13px; font-weight: 600; }
.library-list .site-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
#library-dialog[data-view=folder] .site-grid { grid-template-columns: repeat(4,minmax(0,1fr)); margin: 18px 0 2px; }
.library-list .tile { width: 45px; }
.empty { padding: 22px 0; color: var(--muted); text-align: center; font-size: 14px; }
/* first-paint */
@media (max-width: 980px) {
  .desktop { width: min(740px,calc(100% - 46px)); }
  .top-control.tools-toggle { display: inline-flex; }
  .dock { display: none; top: 68px; right: 15px; transform: none; background: #f2f6ffeb; max-height: calc(100svh - 80px); overflow-y: auto; }
  body.tools-open .dock { display: flex; }
}
@media (max-width: 620px) {
  .topbar { padding: 15px; }
  .toolbar { gap: 5px; }
  .round { width: 44px; }
  .top-control { min-height: 44px; }
  .region-control { gap: 4px; padding: 5px 8px; }
  #region-label { display: none; }
  #region-short { display: inline; }
  .desktop { width: calc(100% - 32px); padding-top: 79px; padding-bottom: 50px; }
  .search-box { height: 57px; gap: 9px; padding: 7px 8px 7px 16px; }
  .search-glass { width: 21px; height: 21px; }
  #query { font-size: 17px; }
  .submit-search { width: 39px; height: 39px; }
  #key-hint { display: none; }
  .engines { --row-cols:var(--phone-columns,5); --engine-icon:24px; --engine-line:15px; grid-template-columns:repeat(var(--row-cols),minmax(0,1fr)); gap:4px; margin-top:11px; max-width:calc(var(--row-cols) * 78px); }
  .engine { min-height:52px; padding:4px 2px; row-gap:3px; border-radius:11px; font-size:10px; }
  .favorites { margin-top: 33px; }
  .section-heading { margin-bottom: 8px; }
  .site-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px 4px; }
  .tile { width: 48px; }
  .site-name { font-size: 12px; }
  .edit-site { opacity: 1; }
  .library-list .site-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .section-heading h2 { font-size: 15px; }
  dialog { padding: 18px; }
}
@media (max-width: 345px) {
  .topbar { padding: 12px 9px; }
  .toolbar { gap: 3px; }
  .region-control { gap:2px; padding-inline:4px; }
  .region-control .language-code { padding-left:3px; }
  .region-control .icon.small { display: none; }
  .desktop { width: calc(100% - 24px); }
  .engines { --row-cols:var(--narrow-columns,4); }
  .region-control > .icon:first-child { display:none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
/* end first-paint */

.glance { width:min(100%,780px); margin-inline:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px; }
/* first-paint */
.glance { --card-height:171px; margin-bottom:25px; }
@media (min-width:621px) and (max-width:740px) { .glance { --card-height:146px; } }
@media (max-width:620px) { .glance { --card-height:130px; margin-bottom:18px; } }
html.starting #glance:not([hidden]) { min-height:calc(var(--card-height) + 2px); }
html.starting :is(.glance-widget, #engines, .dock, .favorite-dock) { visibility:hidden; }
/* end first-paint */
.glance:has(> [hidden]) { grid-template-columns:minmax(0,388px); justify-content:center; }
.widget { position:relative; min-width:0; border-radius:23px; scroll-margin-block:20px; }
.widget:focus:not(:focus-visible){outline:0;}
.glance-widget { border:1px solid #fffdf9; box-shadow:0 4px 14px #50658618,0 1px 3px #3e507018,inset 0 0 0 1px #ffffff45; }
.clock-card { background:linear-gradient(120deg,#e9f3ffed,#e4effce8 80%,#e8f3fdec); }
.focus-card { background:linear-gradient(120deg,#fff3eeef,#ffebe4ed 86%,#fff1ecf0); }
.glance-main { display:grid; grid-template-columns:minmax(0,124px) minmax(0,1fr); align-items:center; gap:clamp(12px,1.6vw,23px); padding:20px clamp(16px,1.8vw,26px); min-height:var(--card-height); }
.analog,.timer-face { width:100%; aspect-ratio:1; display:block; }
.analog { filter:drop-shadow(0 2px 4px #51648022); }
.timer-face { position:relative; }
.timer-face > svg { width:100%; height:100%; display:block; }
.timer-face img { position:absolute; inset:28%; width:44%; height:44%; }
.glance-title,.timer-select { color:#465977; font-size:13px; line-height:1.4; font-weight:560; letter-spacing:-.008em; }
.glance-copy { min-width:0; }
.digital { display:flex; align-items:baseline; gap:3px; color:#19273e; font-size:clamp(36px,3.2vw,49px); letter-spacing:-.058em; font-weight:610; line-height:1.12; font-variant-numeric:tabular-nums; }
.digital small { font-size:10px; letter-spacing:0; font-weight:600; }
#clock-date { font-size:12px; color:#485a73; margin:4px 0 9px; }
.world-toggle { display:flex; width:100%; align-items:center; gap:6px; padding:8px 0 0; border-top:1px solid #b5c9e180; color:#354762; font-size:12px; font-weight:510; text-align:start; }
.world-toggle .icon { width:14px; height:14px; }
.world-toggle .world-open-arrow { width:13px; height:13px; margin-left:auto; }
.world-toggle:hover,.timer-select:hover { color:#182e53; }
.timer-select { position:relative; display:inline-flex; align-items:center; max-width:100%; color:#835044; }
.timer-select select { color:inherit; appearance:none; border:0; border-radius:3px; background:transparent; width:auto; field-sizing:content; max-width:100%; font-weight:inherit; font-size:inherit; padding:0 16px 0 0; outline-offset:2px; }
.timer-select select:disabled { opacity:1; cursor:default; }
.timer-select .icon { position:absolute; right:1px; top:50%; transform:translateY(-50%); width:10px; height:10px; }
.countdown { color:#352b30; }
.timer-controls { display:flex; align-items:center; gap:7px; margin-top:10px; }
.timer-controls button { display:inline-flex; align-items:center; justify-content:center; gap:5px; border-radius:20px; height:30px; font-size:12px; font-weight:620; }
#timer-main { padding:0 11px; border:1px solid #ec755e; background:linear-gradient(#ff946f,#f8735d); color:#442217; box-shadow:0 1px 3px #db7e6329; }
#timer-main:hover { filter:saturate(1.2) brightness(.97); }
#timer-main svg { width:12px; height:12px; fill:currentColor; }
#timer-main .pause,#timer-main[data-state=Running] .play { display:none; }
#timer-main[data-state=Running] .pause { display:inline; }
#timer-reset { width:30px; background:#fff6f1bb; border:1px solid #f3cbbd; color:#a55041; }
#timer-reset:hover { background:#fff; }
#timer-reset .icon { width:15px; height:15px; stroke-width:2; }
.widget-hide { z-index:1; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#556982; background:#ffffff7a; }
.glance-widget .widget-hide { position:absolute; top:6px; right:7px; opacity:0; transition:opacity .14s; }
.glance-widget:hover .widget-hide,.glance-widget:focus-within .widget-hide { opacity:1; }
.widget-hide:hover { background:white; }
.widget-hide .icon { width:13px; height:13px; }
.shopping-tile { border:0; overflow:hidden; background:transparent; }
.shopping-tile img { width:100%; height:100%; }
.dock-app { position:relative; }
.dock-app[aria-pressed=true]::after { content:""; position:absolute; width:4px; height:4px; border-radius:50%; top:40%; right:4px; background:#6288da; }
.dock-app.running::after { background:#f0765f; }
.dock-app.running { box-shadow:none; }
#widget-convert .widget-content > .field:first-child { margin-top:0; }
.number-result { margin:13px 0 2px; padding:10px 12px; border-radius:10px; background:#e9eff8; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.number-result span,.calc-answer > span,.calc-display label { font-size:12px; color:var(--muted); }
.number-result output { min-width:0; overflow-wrap:anywhere; text-align:right; font:560 18px/1.3 ui-monospace,Menlo,monospace; }
.calc-toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; }
.segmented { display:inline-flex; align-items:center; padding:3px; gap:1px; border-radius:9px; background:#e4eaf4; border:1px solid #dce3ee; }
.segmented button { border-radius:6px; padding:4px 10px; font-weight:550; font-size:12px; color:#48566e; }
.segmented button[aria-pressed=true] { color:#233451; background:#fff; box-shadow:0 1px 4px #4b608328; }
.angle-picker button { font-size:10px; letter-spacing:.04em; }
.calc-display { padding:9px 13px; border:1px solid #cdd9ea; border-radius:12px; background:linear-gradient(125deg,#fafdff,#eaf1ff); }
.calc-display label,.calc-answer > span { font-size:11px; }
#expr { width:100%; background:transparent; border:0; padding:2px 0; font:500 22px/1.4 ui-monospace,Menlo,monospace; text-align:right; }
.calc-answer { display:flex; align-items:baseline; justify-content:space-between; gap:10px; border-top:1px solid #d4dfed; padding-top:4px; }
#calc-result { overflow-wrap:anywhere; text-align:right; font-variant-numeric:tabular-nums; font-size:17px; font-weight:580; }
#calc-result.error { font-size:12px; color:#a33630; }
.calc-keys { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:11px; }
[data-mode=basic] .calc-keys { grid-template-columns:minmax(0,1fr); }
.science-pad,.basic-pad { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.calc-keys button { min-width:0; min-height:35px; border:1px solid #d3dce9; border-radius:8px; background:#e8edf6; font-size:14px; font-weight:520; line-height:1.2; }
.science-pad button { color:#3a5178; font-size:13px; background:#eef3fb; }
.calc-keys button.digit { background:#fff; }
.calc-keys button.operation { background:#dce8ff; color:#304f89; }
.calc-keys button.equals,.science-pad [aria-pressed=true] { color:#fff; background:#4d76dc; border-color:#4772d4; }
.calc-keys button:hover { filter:brightness(.96); }
.convert-row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 7px; align-items: end; }
.convert-row .field { min-width: 0; }
.convert-row .select-button { --arrow-gap:6px; --arrow-width:17px; --text-inset:8px; }
.convert-row select { font-size:14px; }
.swap { width: 32px; height: 41px; background: #e8edf6; border-radius: 8px; font-size: 19px; }
.md-toolbar,.md-source-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.file-pick { position:relative; overflow:hidden; cursor:pointer; }
.file-pick input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.file-pick:focus-within { outline:3px solid var(--blue); }
.md-source-actions { justify-content:flex-end; }
#md-source .field { margin-top:0; }
#md-input { resize:vertical; font:14px/1.5 ui-monospace,monospace; }
#md-output { overflow:auto; min-height:125px; max-height:min(46svh,430px); padding:16px 18px; border:1px solid #c8d2e1; border-radius:12px; background:#fff; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
#md-output:focus:not(:focus-visible) { outline:none; }
.md-image-label { display:inline-block; padding:1px 6px; border:1px dashed currentColor; border-radius:5px; font-size:.88em; }
#md-status:empty { display:none; }
#md-output h1,#md-output h2,#md-output h3 { line-height: 1.3; margin: .7em 0 .3em; }
#md-output :first-child { margin-top: 0; }
#md-output p,#md-output ul,#md-output ol { margin: 0 0 .8em; }
#md-output img { max-width: 100%; height: auto; }
#md-output a { color: #2e5bc5; text-decoration: underline; }
#md-output pre,#md-output blockquote { padding: 7px 11px; margin: .6em 0; background: #eef2f8; border-radius: 4px; overflow: auto; }
#md-output table { border-collapse: collapse; }
#md-output td,#md-output th { border: 1px solid #c4cee0; padding: 4px 7px; }

@media(min-width:621px) and (max-width:740px) {
  .glance { gap:11px; }
  .glance-main { grid-template-columns:minmax(0,91px) minmax(0,1fr); gap:11px; padding:15px; }
}
@media(max-width:620px) {
  .glance { gap:9px; margin-bottom:18px; }
  .glance:has(> [hidden]) { grid-template-columns:minmax(0,264px); }
  .glance-main { position:relative; display:block; padding:14px 12px 11px; }
  .glance-widget { border-radius:18px; }
  .face-wrap,.timer-face { position:absolute; right:8px; top:9px; width:34px; }
  .glance-title,.timer-select { min-height:22px; font-size:11px; font-weight:600; max-width:calc(100% - 26px); }
  .digital { margin-top:3px; font-size:clamp(30px,7.7vw,41px); gap:2px; }
  .digital small { font-size:8px; }
  #clock-date { font-size:10px; margin:3px 0 8px; }
  .world-toggle { font-size:10px; padding-top:6px; }
  .world-toggle .icon { width:12px; height:12px; }
  .timer-controls { gap:5px; margin-top:10px; }
  .timer-controls button { height:28px; font-size:11px; }
  #timer-main { padding-inline:8px; } #timer-reset { width:28px; }
  .glance-widget .widget-hide { display:none; }
  .science-pad button { font-size:12px; }
  .calc-keys { gap:8px; }
  .segmented button { padding:4px 7px; }
}
@media(max-width:420px) {
  .calc-keys { grid-template-columns:minmax(0,1fr); }
  .science-pad { gap:3px; }
  .science-pad button { min-height:30px; }
  .face-wrap,.timer-face { width:28px; }
}
@media(max-width:345px) {
  .glance-main { padding-inline:9px; }
  .face-wrap,.timer-face { display:none; }
  .glance-title,.timer-select { max-width:100%; }
}
.shop-form { padding:14px; margin:16px 0 6px; border-radius:13px; border:1px solid #ebdacb; background:linear-gradient(125deg,#fff9f1,#fff0e6); }
.shop-store-label { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:8px; color:#654c3e; font-size:12px; font-weight:580; }
.shop-store-label select { border-radius:7px; border:1px solid #e2cfbf; background:#fffdfb; padding:3px 5px; color:#4a3b34; font-size:12px; }
.shop-input { display:flex; gap:7px; align-items:center; border:1px solid #e2cfc1; border-radius:9px; background:#fff; padding:4px; }
.shop-input input { width:100%; min-width:0; padding:4px 7px; border:0; border-radius:4px; font-size:14px; }
.shop-input button { flex:none; display:grid; place-items:center; width:29px; height:29px; border-radius:7px; color:#864522; background:#ffe5cc; }
.shop-input .icon { width:16px; height:16px; }

#utility-dialog { width:min(430px,calc(100% - 26px)); max-height:calc(100svh - 32px); padding:20px; }
#utility-dialog:focus { outline:none; }
#utility-dialog[data-tool=markdown] { width:min(810px,calc(100% - 26px)); }
#utility-dialog[data-tool=calculator]:has([data-mode=scientific].widget-content) { width:min(660px,calc(100% - 26px)); }
#utility-dialog[data-tool=qr] { width:min(385px,calc(100% - 26px)); }
.utility-heading { justify-content:flex-start; margin-bottom:15px; }
.utility-heading h2 { flex:1; font-size:20px; }
#draft-storage { display:flex; gap:6px; align-items:flex-start; margin:-5px 0 14px; }
#draft-storage .icon { width:15px; height:15px; margin-top:1px; }
.utility-pane > .field:first-child { margin-top:0; }
.utility-pane textarea { line-height:1.5; }
.utility-pane textarea:focus-visible { outline:2px solid #779bdf; outline-offset:1px; }
.calc-display:focus-within { outline:2px solid #87a7e4; outline-offset:1px; }
#utility-dialog #expr:focus-visible { outline:none; }
.note-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; color:var(--muted); font-size:12px; }
#note-text { min-height:145px; max-height:45svh; }
#utility-dialog button:disabled { opacity:.48; cursor:default; }
.qr-preview { display:grid; place-items:center; min-height:130px; margin:14px 0; padding:8px; background:#fff; border:1px solid #dce5f0; border-radius:12px; }
.qr-preview p { max-width:230px; text-align:center; color:var(--muted); font-size:13px; }
#qr-image { display:block; max-width:min(100%,41svh,244px); height:auto; image-rendering:pixelated; }
.qr-save { width:100%; }
.date-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.date-fields input { min-width:0; }
#tool-dock [data-tool=calculator] { border-top:1px solid #c1cde185; border-radius:0 0 10px 10px; }
@media (max-width:980px) {
  body.tools-open #tool-dock {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:3px;
    z-index:8; width:min(276px,calc(100vw - 22px)); padding:8px; max-height:calc(100svh - 85px);
  }
  #tool-dock [data-tool=calculator] { border:0; border-radius:10px; }
}
@media (max-width:620px) {
  #utility-dialog { padding:16px 13px; max-height:calc(100svh - 16px); }
  .date-fields { gap:6px; }
}

/* Navigation utilities and the local shopping shelf share the same desktop rhythm. */
.translate-nav[aria-expanded=true] { border-color:#c9d9f5; background:#f1f6ff; box-shadow:0 2px 9px #4a689123; }
#translation-panel { width:min(100%,780px); margin:20px auto 0; padding:17px 19px; border:1px solid #fff; border-radius:20px; background:#f9fbfff2; box-shadow:0 4px 22px #3c54871b; }
.translate-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.translate-header h2 { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; }
.translate-header img { width:23px; height:23px; }
.translation-languages { display:grid; grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr); gap:5px; align-items:center; margin-bottom:8px; }
.translation-languages select { font-size:14px; color:#364d77; }
#tr-swap { display:grid; place-items:center; height:32px; width:32px; border-radius:50%; color:#435c85; }
#tr-swap:not(:disabled):hover { background:#e4ebf6; }
#translation-panel button:disabled { opacity:.46; cursor:default; }
.translation-panes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
#tr-text,.translation-output { min-width:0; min-height:116px; padding:12px 13px; border-radius:11px; font-size:17px; line-height:1.5; }
#tr-text { resize:vertical; background:#fff; border:1px solid #d7dfec; width:100%; }
.translation-output { background:#eaf0f8; color:#243a58; }
#tr-result { white-space:pre-wrap; overflow-wrap:anywhere; }
#tr-empty,#tr-text::placeholder { color:#68778e; }
.translation-actions { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:11px; }
#tr-use-query { margin-bottom:7px; font-size:12px; }
.translation-link { display:inline-flex; align-items:center; gap:5px; margin-left:auto; color:#405c8a; font-size:12px; font-weight:530; }
.translation-link:hover { text-decoration:underline; }
.translation-link .icon { width:12px; height:12px; }
#tr-status:empty { display:none; }
.shopping-section { width:min(100%,780px); margin:29px auto 0; scroll-margin:25px; padding-top:20px; border-top:1px solid #c2cfe470; }
.shopping-section:focus:not(:focus-visible){outline:none;}
.shopping-heading { display:flex; align-items:center; gap:8px; }
#shopping-country { padding:2px 7px; color:#52647b; font-size:10px; font-weight:560; background:#ffffff80; border:1px solid #fff9; border-radius:10px; }
 .shop-categories { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px 7px; }
.shop-categories button { display:flex; width:100%; align-items:center; gap:9px; min-height:44px; padding:4px 5px; border:1px solid transparent; border-radius:11px; font-size:12px; font-weight:540; text-align:start; line-height:1.25; }
.shop-categories button:hover,.shop-categories button[aria-expanded=true] { background:#ffffff9e; border-color:#fff; }
.shop-categories button[aria-expanded=true] { box-shadow:0 1px 5px #526b9422; }
.shop-categories img { flex:none; width:35px; height:35px; transition:transform .15s; }
.shop-categories button:hover img { transform:translateY(-1px); }
.category-detail { margin:12px 0 5px; padding:13px 15px 15px; border:1px solid #fff; border-radius:15px; background:#f8fbfff0; box-shadow:0 3px 15px #48628115; scroll-margin-top:10px; }
.category-detail-head,.category-detail-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.category-detail-head .icon-button { flex:none; }
.category-crumbs { display:flex; align-items:center; flex-wrap:wrap; gap:4px; min-width:0; }
.category-crumbs button { color:#546783; font-size:12px; }
.category-crumbs button:not(:last-child)::after { content:"›"; padding-left:5px; color:#9aa7ba; }
.category-crumbs button:last-child { font-weight:630; font-size:14px; color:#263a59; }
.category-detail-tools { margin-top:7px; }
.catalog-filter { display:flex; gap:5px; align-items:center; width:min(100%,260px); border:1px solid #d3ddec; border-radius:8px; background:#fff; padding:4px 7px; }
.catalog-filter .icon,#visit-collection .icon { width:13px; height:13px; }
.catalog-filter input { width:100%; min-width:0; border:0; padding:2px; background:transparent; font-size:12px; }
#visit-collection { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:#3f5f96; }
.category-children { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; list-style:none; gap:3px 8px; margin-top:9px; }
.category-children li { min-width:0; }
.category-children a,.category-children button { width:100%; min-height:35px; padding:4px; display:flex; align-items:center; gap:6px; font-size:12px; text-align:start; line-height:1.25; border-radius:8px; }
.category-children a:hover,.category-children button:hover { background:#eaf0f9; }
.category-children img,.category-glyph { flex:none; width:25px; height:25px; border-radius:6px; }
.category-glyph { display:grid; place-items:center; background:#e5edf8; color:#58729b; }
.category-detail[data-tone=beauty] .category-glyph,.category-detail[data-tone=womens] .category-glyph { background:#f9e6ed; color:#ae5f80; }
.category-detail[data-tone=groceries] .category-glyph,.category-detail[data-tone=sports] .category-glyph { background:#e0f0e6; color:#4a8770; }
.category-detail[data-tone=kids] .category-glyph,.category-detail[data-tone=home] .category-glyph { background:#faecda; color:#a37243; }
.category-glyph svg { width:17px; height:17px; }
.category-name { flex:1; }
.category-children .icon { width:11px; height:11px; color:#7083a0; }
.category-children .out { opacity:.55; }
.category-children .next { transform:rotate(-90deg); }
.shop-destinations { display:flex; flex-wrap:wrap; gap:8px 15px; justify-content:space-between; align-items:center; margin:16px 0 0; }
#category-search { display:flex; flex:1 1 230px; min-width:0; align-items:center; gap:6px; padding:4px 6px 4px 9px; min-height:35px; border:1px solid #ffffffeb; background:#fbfdffd6; border-radius:11px; box-shadow:0 1px 4px #61739615; }
#category-search img { width:18px; height:18px; border-radius:5px; }
#category-query { background:transparent; border:0; min-width:0; width:100%; padding:3px 1px; font-size:13px; }
#category-search button { flex:none; display:grid; place-items:center; width:26px; height:25px; border-radius:7px; color:#5e708d; }
#category-search button:hover { background:#e4ecf7; }
#category-search .icon { width:16px; height:16px; }
.store-links { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.store-links a { display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:4px 8px; font-size:12px; color:#394961; border-radius:9px; background:#f7faffbd; border:1px solid #ffffffdf; }
.store-links a:hover { background:white; }
.store-links img,.mall-badge { width:16px; height:16px; object-fit:contain; border-radius:4px; }
.mall-badge { display:grid; place-items:center; font:italic 800 12px/1 system-ui,sans-serif; color:white; background:#ba2e4f; }
.tile[data-brand=lazada] { background:none; border:0; overflow:hidden; }
.tile[data-brand=lazada] img { width:100%; height:100%; }
@media(max-width:620px) {
  .shopping-section { margin-top:22px; padding-top:15px; }
  .shop-categories { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 2px; }
  .shop-categories img { width:31px; height:31px; }
  .shop-categories button { font-size:11px; gap:7px; min-height:37px; }
  .category-children { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .category-detail { padding:11px; }
  .category-detail-tools { flex-wrap:wrap; }
  .shop-destinations { gap:8px; margin-top:12px; }
  .store-links { gap:4px; }
  .store-links a { font-size:11px; }
  #translation-panel { padding:13px; }
  .translation-panes { gap:6px; }
  #tr-text,.translation-output { padding:8px; font-size:15px; }
}
@media(max-width:345px) {
  .translation-link { margin-left:0; }
}
.department-text { display:flex; flex-direction:column; min-width:0; gap:3px; }
.department-text strong { font-size:12px; font-weight:590; }
.department-text small { font-size:10px; font-weight:450; color:#54677f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:620px) {
  .department-text strong { font-size:11.5px; }
  .department-text small { font-size:10px; }
}

/* The same country/language links work in the picker and without JavaScript. */
#region-dialog { width:min(560px,calc(100% - 28px)); }
.edition-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 16px; margin-top:15px; }
.edition-country { min-width:0; }
.edition-country > span { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; }
.edition-country img { border-radius:3px; object-fit:cover; }
.edition-country > div { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.edition-links a,.edition-sites a { display:inline-block; border-radius:7px; border:1px solid var(--line); padding:4px 7px; font-size:12px; line-height:1.4; }
.edition-links a:hover,.edition-sites a:hover { text-decoration:underline; }
.edition-links a[aria-current=page] { border-color:#708dbc; box-shadow:inset 0 0 0 1px #708dbc; font-weight:600; }
#region-shortcuts { margin-top:18px; padding-top:9px; border-top:1px solid var(--line); color:var(--ink); font-size:13px; }
#region-shortcuts summary { padding-block:6px; cursor:pointer; font-weight:560; }
#region-shortcuts p { margin:3px 0; color:var(--muted); line-height:1.5; }
.edition-sites { display:flex; flex-wrap:wrap; gap:5px; list-style:none; margin:7px 0 0; padding:0; }
.toolbar:has(.offline-region) #open-region { display:none; }
.topbar:has(.offline-region[open]) { z-index:5; }
.offline-region summary { cursor:pointer; list-style:none; }
.offline-region summary::-webkit-details-marker { display:none; }
#offline-editions { position:absolute; top:100%; right:12px; width:min(510px,calc(100vw - 24px)); max-height:calc(100svh - 78px); overflow:auto; margin:0; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--panel,#f8faff); }
@media(max-width:480px) {
  .edition-links { grid-template-columns:1fr; gap:9px; }
  .edition-country { display:grid; grid-template-columns:minmax(80px,.85fr) minmax(0,1.7fr); align-items:start; gap:6px; }
  .edition-country > div { margin:0; }
}

/* The desktop's only permanent row of websites is its bottom dock. */
/* first-paint */
.desktop { padding-bottom:calc(122px + env(safe-area-inset-bottom,0px)); }
@media (min-height:560px) {
  .desktop:has(#glance[hidden]):has(#translation-panel[hidden]) { padding-top:clamp(115px,calc(43svh - 32px),500px); }
}
/* end first-paint */
.favorite-dock {
  position:fixed; z-index:5; inset-inline:0; margin-inline:auto; bottom:max(13px,env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; gap:9px; width:max-content; max-width:calc(100vw - 34px); padding:5px 12px 6px 8px;
  border:1px solid #ffffffe8; border-radius:23px; background:linear-gradient(155deg,#f7f9fcf2,#e4ebf3ea);
  box-shadow:inset 0 1px 0 #fff9,0 1px 2px #22344826,0 4px 10px -6px #22344845;
}
.dock-sites { --dock-icon:52px; --dock-line:16px; display:flex; flex:0 1 auto; align-items:stretch; gap:3px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#a1b0cd77 transparent; min-width:0; margin:0; padding:5px 2px 2px; }
.dock-sites > li { flex:none; width:var(--dock-slot,68px); min-width:0; border-radius:11px; }
.dock-sites > li > :is(a,button[data-folder]) {
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:var(--dock-icon) var(--dock-line);
  place-items:center; align-content:start; width:100%; padding:2px 1px; gap:4px;
}
.dock-sites .tile { width:var(--dock-icon); height:var(--dock-icon); border-radius:25%; }
.dock-sites .tile[data-brand]:where(:not([data-brand=lazada],[data-brand=grab])) > img { width:72%; height:72%; }
.dock-sites .site-name { font-size:10.5px; font-weight:500; color:#2c3b52; width:100%; text-align:center; line-height:var(--dock-line); }
.dock-sites li:focus-within { background:#ffffff62; }
.dock-sites a:focus-visible,.dock-sites button:focus-visible { outline-offset:-2px; }
.dock-sites > li.dragging,.arrange-list li.dragging { opacity:.48; }
.dock-sites > li.drop-here { box-shadow:inset 2px 0 #4879da; background:#ffffff9e; }
.dock-utilities { display:flex; align-items:center; flex:none; gap:6px; padding:10px 0 10px 11px; border-left:1px solid #a9bad280; }
.dock-utility { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#485976; border:1px solid #fff; background:#f9fbff91; box-shadow:0 1px 4px #4763890d; }
.dock-utility:hover { background:white; }
.dock-utility .icon { width:16px; height:16px; stroke-width:1.9; }
.dock-sites .social-folder,.folder-heading .social-folder,.arrange-list .social-folder { gap:2px; padding:4px; border-color:#fff; background:linear-gradient(145deg,#d9e3fc,#c1c9e7); }
.social-folder > span { overflow:hidden; }
.social-folder.google-folder { background:linear-gradient(145deg,#e0ecfd,#cadbe6); }
.notice { bottom:calc(111px + env(safe-area-inset-bottom,0px)); }
#arrange-dialog { width:min(475px,calc(100% - 24px)); }
.arrange-list { list-style:none; display:grid; padding:0; gap:3px; margin:13px 0; }
.arrange-list li { display:flex; gap:7px; align-items:center; padding:5px 4px; min-height:45px; border-bottom:1px solid #dbe3edb3; }
.arrange-list li.drop-here { box-shadow:inset 0 -2px #497bd7; background:#f0f5ff; }
.arrange-list li > .icon { width:14px; height:14px; color:#8e9fb5; cursor:grab; }
.arrange-list .tile { width:32px; height:32px; flex:none; border-radius:8px; }
.arrange-list .social-folder { padding:3px; gap:1px; }
.arrange-label { flex:1; font-size:13px; min-width:0; overflow-wrap:anywhere; }
.arrange-arrow { display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:8px; color:#465b7a; background:#e9eff7; }
.arrange-arrow:disabled { opacity:.27; cursor:default; }
.arrange-arrow:not(:disabled):hover { background:#dce7f6; }
.arrange-arrow .icon { width:15px; height:15px; }
.pin-choice { display:flex; align-items:center; gap:7px; font-size:13px; margin-top:13px; }
.pin-choice input { accent-color:var(--blue); }
.choice-field { margin:17px 0 0; padding:0; border:0; min-width:0; }
.choice-field legend { margin:0 0 7px; padding:0; font-size:13px; font-weight:620; }
.country-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.language-choices { display:flex; flex-wrap:wrap; gap:6px; }
.choice { position:relative; min-width:0; padding:9px 9px; display:flex; gap:7px; align-items:center; border:1px solid #cfd9e6; background:#fff; border-radius:10px; cursor:pointer; }
.choice input { position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.choice img { width:22px; height:16px; object-fit:cover; border-radius:3px; box-shadow:0 0 0 .5px #67738c50; }
.choice span { flex:1; font-size:13px; font-weight:510; }
.choice .icon { width:13px; height:13px; stroke-width:2.5; opacity:0; color:#395fae; }
.choice:hover { background:#f3f7ff; }
.choice:has(input:checked) { background:#edf3ff; border-color:#839fce; }
.choice:has(input:checked) .icon { opacity:1; }
.choice:has(input:focus-visible) { outline:3px solid #7c9bdc; outline-offset:1px; }
.language-choices .choice { padding:7px 10px; }
#library-dialog { width:min(788px,calc(100% - 28px)); max-height:calc(100svh - 42px); padding:19px 22px 21px; background:linear-gradient(146deg,#fdfdfff9,#f5f8fff7 68%,#f5f8fff9); box-shadow:0 18px 75px #20345243,0 1px 8px #435b7d20; }
#library-dialog[data-view=google] { width:min(555px,calc(100% - 24px)); }
#library-dialog[data-view=social] { width:min(685px,calc(100% - 24px)); }
@media(min-width:621px) {
  #library-dialog[data-view=all] { width:min(900px,calc(100% - 48px)); }
  #library-dialog[data-view=all] .site-grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
}
#library-dialog:focus { outline:0; }
.folder-heading { gap:9px; justify-content:flex-start; }
.folder-heading h2 { font-size:21px; letter-spacing:-.035em; }
.folder-heading > [data-close] { margin-left:auto; }
.folder-heading .tile { width:30px; height:30px; border-radius:8px; box-shadow:0 1px 4px #6377971a; }
.folder-heading .social-folder { padding:2.5px; gap:1px; }
.catalog-back .icon { transform:rotate(90deg); }
#library-context { padding-left:10px; border-left:1px solid #c6d0e0; font-size:13px; color:#596d8a; }
#library-dialog[data-view=social] .library-list h3 { margin:13px 0 4px; padding-top:8px; border-top:1px solid #d8e2ee; color:#405471; font-size:12px; }
#library-dialog[data-view=social] .library-list h3:first-child { border:0; }
.library-list .site-grid { grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px 4px; }
#library-dialog[data-view=google] .site-grid { grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:15px; }
.library-list .site-name { font-size:11.5px; }
.library-list .site-grid li { padding-top:3px; }
.library-pin { position:absolute; z-index:1; top:0; left:max(0px,calc(50% - 34px)); width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:white; color:#4d6485; border:1px solid #d5ddeb; box-shadow:0 1px 3px #314a7019; opacity:0; }
.library-pin .icon { width:11px; height:11px; }
.library-list li:hover .library-pin,.library-list li:focus-within .library-pin,.library-pin[aria-pressed=true] { opacity:1; }
.library-pin[aria-pressed=true] { background:#e7effd; color:#335da5; }
#shopping { padding-top:13px; }
.shop-search-row { margin:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:7px; border:1px solid #dfe7f1; border-radius:14px; background:#fff; }
.store-picker { --arrow-gap:7px; --arrow-width:17px; --text-inset:32px; }
.store-picker select { max-width:140px; min-height:35px; font-size:13px; font-weight:570; }
.store-picker img { position:absolute; inset-block:0; margin-block:auto; left:9px; width:16px; height:16px; border-radius:3px; pointer-events:none; }
.shop-query-wrap { display:flex; gap:8px; min-width:0; align-items:center; padding:6px 3px; }
.shop-query-wrap .icon { width:17px; height:17px; color:#70829c; }
#shop-query { min-width:0; width:100%; border:0; background:transparent; outline:0; font-size:15px; }
.shop-query-wrap:focus-within { outline:2px solid #a0b8e8; outline-offset:0; border-radius:5px; }
.shop-go { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; background:#4e7de8; color:white; }
.shop-go:hover { background:#3567ce; }
.shop-go .icon { width:19px; height:19px; }
.shop-tabs-line { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 10px; margin:10px 0; border-bottom:1px solid #d6e0ed; }
.shop-tabs { display:flex; gap:11px; align-items:center; }
.shop-tabs button { padding:7px 2px 8px; color:#52647d; border-bottom:2px solid transparent; font-size:13px; }
.shop-tabs button[aria-pressed=true] { border-color:#4e77d6; color:#385fa7; font-weight:610; }
.shop-tabs-line .store-links { padding:3px 0; gap:6px; }
.shop-tabs-line .store-links a { background:transparent; border:0; min-height:26px; padding:3px 4px; color:#5e4c61; }
.shop-tabs-line .store-links a:hover { background:#eaf0fa; }
#shopping-catalog .shop-categories { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px 8px; }
#shopping-catalog .shop-categories button { padding:7px 5px; gap:8px; min-height:58px; }
#shopping-catalog .shop-categories img { width:39px; height:39px; }
#shopping-catalog .department-text strong { font-size:13px; }
#shopping-catalog .department-text small { font-size:11px; }
#shopping-catalog .category-detail { margin:0; padding:0; background:transparent; border:0; box-shadow:none; }
.category-detail-head { justify-content:flex-start; gap:7px; }
.catalog-back { display:inline-flex; align-items:center; gap:3px; color:#566b88; font-size:13px; padding:5px 1px; }
.catalog-back .icon { width:14px; height:14px; }
.crumb-slash { color:#a2b0c4; }
.category-detail-tools { margin:4px 0 8px; }
.category-children { gap:5px 10px; margin-top:5px; }
.category-children a,.category-children button { gap:8px; padding:5px 3px; min-height:49px; font-size:13px; border-radius:9px; }
.category-children .item-art { width:39px; height:39px; display:grid; place-items:center; border-radius:11px; flex:none; box-shadow:inset 0 0 0 .5px #ffffff80; }
.category-children .item-art img { width:29px; height:29px; border-radius:0; }
.category-children .category-name { min-width:0; }
.category-children .icon { flex:none; margin-right:2px; }
@media (min-width:981px) and (max-height:540px) {
  .dock { top:67px; transform:none; max-height:calc(100svh - 84px); overflow:auto; }
}
@media(max-width:620px) {
  .desktop { padding-bottom:calc(110px + env(safe-area-inset-bottom,0px)); }
  .favorite-dock { max-width:calc(100vw - 15px); padding:4px 7px 5px 4px; gap:4px; border-radius:19px; bottom:max(8px,env(safe-area-inset-bottom,0px)); }
  .dock-sites { --dock-icon:42px; --dock-line:15px; gap:0; padding:4px 0 1px; }
  .dock-sites .site-name { font-size:10px; }
  .dock-utilities { padding:7px 0 7px 6px; gap:4px; }
  .dock-utility { width:28px; height:28px; }
  .notice { bottom:calc(85px + env(safe-area-inset-bottom,0px)); }
  #library-dialog { max-height:calc(100svh - 22px); padding:15px 12px; }
  .library-list .site-grid,#library-dialog[data-view=google] .site-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px 2px; }
  #shopping-catalog .shop-categories,.category-children { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #shopping-catalog .shop-categories img { width:30px; height:30px; } #shopping-catalog .shop-categories button { gap:6px; min-height:46px; }
  #shopping-catalog .department-text strong,.category-children a,.category-children button { font-size:12px; }
  #shopping-catalog .department-text small { font-size:10px; }
  .category-children { gap:4px; }.category-children .item-art { width:32px; height:32px; border-radius:8px; }.category-children .item-art img { width:25px; height:25px; }
  .category-children a,.category-children button { gap:5px; }
  .shop-search-row { gap:3px; padding:5px; }
  .store-picker { --arrow-gap:5px; --arrow-width:15px; --text-inset:25px; }
  .store-picker select { font-size:12px; }.store-picker img { left:6px; width:14px; height:14px; }
  .shop-query-wrap { gap:4px; }.shop-query-wrap .icon { display:none; }#shop-query { font-size:14px; }
  .shop-go { width:30px; height:30px; }
  .shop-tabs { gap:7px; }.shop-tabs-line .store-links { gap:1px; }.shop-tabs button { font-size:12px; }
  .folder-heading { gap:6px; }.folder-heading h2 { font-size:20px; }#library-context { padding-left:7px; font-size:12px; }
  .choice { gap:5px; padding-inline:7px; }.choice span { font-size:12px; }
}
@media(pointer:coarse) { .library-pin { opacity:.83; } }
@media(prefers-reduced-motion:reduce) { .tile { transition:none; } }

/* Launchpad keeps its search and category bar in view as the directory scrolls. */
#library-dialog[data-view=all][open] {
  display:flex; flex-direction:column; height:min(710px,calc(100svh - 46px)); overflow:hidden;
}
#library-dialog[data-view=all] .folder-heading, #library-controls { flex:none; min-width:0; }
#library-dialog[data-view=all] .library-list {
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
  scrollbar-color:#a9b9cb8c transparent; padding:3px 5px 12px 0;
}
#library-dialog[data-view=all] .library-list h3 {
  font-size:13px; margin:13px 0 6px; padding-top:13px; border-top:1px solid #dce4ed;
}
#library-dialog[data-view=all] .library-list h3:first-child { border:0; padding-top:0; margin-top:7px; }
#library-dialog[data-view=all] .library-list .tile { width:48px; }
#library-dialog[data-view=all] .library-list .site-name { white-space:normal; line-height:1.25; text-align:center; overflow-wrap:anywhere; }
#library-dialog[data-view=all] .library-list .site-grid { row-gap:9px; }
#library-dialog[data-view=all] .library-list > .site-grid:first-child { padding-top:9px; }
#library-dialog[data-view=all] .library-list > .secondary-button { display:flex; margin:auto; }
.library-nav, .field-heading { display:flex; align-items:center; justify-content:space-between; gap:9px; }
.library-nav { border-bottom:1px solid #d7e1ec; padding-bottom:8px; }
.library-filters { min-width:0; flex:1; gap:3px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; padding:3px 1px; }
.library-filters button { flex:none; max-width:24ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:transparent; color:#51617b; }
.library-filters button[aria-pressed=true] { background:#dfebff; color:#2852a1; font-weight:600; }
.library-filters button:hover { background:#e6edf9; }
.category-action { display:inline-flex; flex:none; align-items:center; gap:4px; color:#385f9a; font-size:12px; padding:5px 6px; border-radius:7px; }
.category-action .icon { width:14px; height:14px; }
.category-action:hover { background:#e4edfa; }
.library-nav .category-action { border-left:1px solid #d2ddeb; border-radius:0; padding-left:10px; }
#category-dialog { width:min(350px,calc(100% - 28px)); }
#category-dialog::backdrop { background:#24334a30; backdrop-filter:blur(2px); }
@media (max-width:760px) {
  .library-filters { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; padding:3px 2px; }
  .library-nav .category-action { max-width:100px; line-height:1.2; text-align:left; }
}
@media (max-width:620px) {
  #library-dialog[data-view=all][open] { width:calc(100% - 16px); height:min(670px,calc(100svh - 22px)); }
  #library-dialog[data-view=all] .library-list .tile { width:42px; }
  #library-dialog[data-view=all] .library-list .site-name { font-size:11px; }
  .dock-sites { --dock-slot:59px; }
  .dock-sites .site-name { letter-spacing:-.018em; }
}
@media (max-width:345px) {
  .dock-sites { --dock-slot:54px; }
  .dock-sites > li[data-dock-key="folder:all"] { width:57px; }
}

:root {
  --gallery-panel:#f7f9fc;
  --gallery-control:#e8edf4;
  --gallery-selected:#fff;
  --gallery-accent:#416aba;
  --gallery-edge:#d5dde9;
}

/* Keep appearance and upload accessible while only the contact sheet scrolls. */
#wallpaper-dialog {
  width:min(740px,calc(100% - 28px)); max-height:min(790px,calc(100svh - 36px));
  padding:0; overflow:hidden; background:var(--gallery-panel);
}
#wallpaper-dialog[open] { display:flex; flex-direction:column; }
#wallpaper-dialog .dialog-heading { flex:none; padding:20px 22px 0; }
.appearance-mode { flex:none; min-width:0; margin:17px 22px 14px; padding:0; border:0; }
.appearance-mode legend,.wallpaper-heading h3 { margin:0; padding:0; font-size:13px; font-weight:620; }
.appearance-choices { display:inline-flex; max-width:100%; gap:3px; margin-top:7px; padding:3px; background:var(--gallery-control); border:1px solid var(--gallery-edge); border-radius:12px; }
.appearance-choices label { position:relative; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid transparent; padding:6px 11px; border-radius:8px; font-size:13px; font-weight:530; line-height:1.25; color:var(--muted); cursor:pointer; }
.appearance-choices input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.appearance-choices .icon { width:16px; height:16px; }
.appearance-choices label:has(:checked) { color:var(--ink); background:var(--gallery-selected); border-color:var(--gallery-edge); box-shadow:0 1px 3px #10203819; }
.appearance-choices label:has(:focus-visible) { outline:2px solid var(--gallery-accent); outline-offset:1px; }
.wallpaper-heading { flex:none; display:flex; align-items:center; justify-content:space-between; gap:5px 12px; flex-wrap:wrap; padding:11px 22px 8px; border-top:1px solid var(--gallery-edge); }
#wallpaper-filters { display:flex; flex-wrap:wrap; gap:3px; }
#wallpaper-filters button { border-radius:7px; padding:5px 8px; min-height:28px; font-size:12px; font-weight:540; color:var(--muted); }
#wallpaper-filters button:hover,#wallpaper-filters button[aria-pressed=true] { background:var(--gallery-control); color:var(--ink); }
#wallpaper-filters button[aria-pressed=true] { color:var(--gallery-accent); }
.wallpaper-list { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scroll-padding-block:5px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:start; align-items:start; gap:12px 10px; padding:5px 22px 15px; margin:0; }
.scene-option { position:relative; display:grid; grid-template-columns:minmax(0,1fr); align-content:start; align-items:start; gap:6px; min-width:0; padding:0; margin:0; border:0; border-radius:9px; background:transparent; color:var(--ink); text-align:start; }
.scene-option img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:9px; background:var(--gallery-control); box-shadow:0 0 0 1px #75869b2b; }
.scene-option span { padding-inline:2px; font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
.scene-option:hover img { outline:1px solid var(--gallery-accent); outline-offset:1px; }
.scene-option[aria-pressed=true] { color:var(--gallery-accent); background:transparent; font-weight:630; }
.scene-option[aria-pressed=true] img { outline:2px solid var(--gallery-accent); outline-offset:1px; }
.scene-option .icon { position:absolute; right:6px; top:6px; width:20px; height:20px; padding:3px; border-radius:50%; color:white; background:#3b61a7; border:1px solid #ffffffa6; stroke-width:2.6; }
.wallpaper-footer { flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:5px 12px; padding:11px 22px 14px; border-top:1px solid var(--gallery-edge); }
.wallpaper-footer .upload-button { width:auto; }
.wallpaper-footer .field-note,.wallpaper-footer .feedback { margin:0; }
.wallpaper-footer .feedback:not(:empty) { flex-basis:100%; }
@media(max-width:640px) {
  .wallpaper-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:480px) {
  #wallpaper-dialog { width:calc(100% - 16px); max-height:calc(100svh - 16px); }
  #wallpaper-dialog .dialog-heading { padding:15px 15px 0; }
  #wallpaper-dialog h2 { font-size:20px; }
  .appearance-mode { margin:12px 15px; }
  .appearance-choices label { padding:6px 8px; font-size:12px; }
  .wallpaper-heading { padding:8px 15px; }
  #wallpaper-filters button { font-size:11px; padding:4px 6px; }
  .wallpaper-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 9px; padding:4px 15px 12px; }
  .wallpaper-footer { padding:8px 15px 12px; }
}
@media(max-height:460px) {
  #wallpaper-dialog[open] { display:block; overflow-y:auto; }
  .wallpaper-list { overflow:visible; }
}

/* first-paint */
/* The original pastel scenes retain their wash. Art in the new gallery gets a lighter one. */
body[data-wallpaper=gallery] .backdrop::after { background:linear-gradient(180deg,#f7f9ff24,#f5f7fb30 55%,#ecf1f918); }
body[data-wallpaper=gallery] .engine:not([aria-pressed=true]):not([aria-expanded=true]) { background:#f7f9ffdf; border-color:#ffffff9c; }
body[data-wallpaper=gallery] .engine:not([aria-pressed=true]):hover { background:#fff; }

/* Dark chrome uses solid tinted surfaces; brand artwork and QR codes retain their own colors. */
:root[data-theme=dark] {
  color-scheme:dark; background:#181d27;
  --ink:#edf2f9; --muted:#b4c0d2; --line:#435063; --blue:#416bc5;
  --panel:#202732; --well:#171e28; --raised:#2c3543; --hover:#344154; --accent:#a6c8ff;
  --gallery-panel:var(--panel); --gallery-control:#2b3544; --gallery-selected:#414e62;
  --gallery-accent:var(--accent); --gallery-edge:#3c4859;
}
html[data-theme=dark] .backdrop { background-color:#171e2a; }
html[data-theme=dark] body[data-wallpaper] .backdrop::after { background:linear-gradient(175deg,#101725b0,#0e1625b0 52%,#0c14227d); }
html[data-theme=dark] body[data-wallpaper-tone=night] .backdrop::after { background:linear-gradient(175deg,#07101c4d,#08121e66 52%,#070e1940); }
html[data-theme=dark] :is(.top-control,.dock,.favorite-dock) { color:var(--ink); border-color:#536071; background:linear-gradient(150deg,#2b3442f7,#212936f5); box-shadow:inset 0 1px #ffffff0a,0 2px 5px -3px #0008; }
html[data-theme=dark] :is(.top-control:hover,.top-control:focus-visible,.dock-app:hover) { background:var(--hover); }
html[data-theme=dark] .language-code { color:var(--muted); border-color:var(--line); }
html[data-theme=dark] .search-box { border-color:#576579; background:linear-gradient(#2a3240fa,#202733fa); box-shadow:inset 0 1px #ffffff0c,0 3px 8px -5px #000c; }
html[data-theme=dark] .search-box:focus-within { border-color:#91b6f0; box-shadow:0 0 0 2px #76a5ef34; }
html[data-theme=dark] :is(.search-glass,kbd) { color:#c0ccdd; }
html[data-theme=dark] kbd { border-color:var(--line); }
html[data-theme=dark] :is(input,textarea)::placeholder,
html[data-theme=dark] :is(#query,#tr-text)::placeholder { color:#a5b3c6; opacity:1; }
/* end first-paint */
html[data-theme=dark] .engine { color:#f0f4fc; text-shadow:0 1px 3px #0c131e; }
html[data-theme=dark] body[data-wallpaper=gallery] .engine:not([aria-pressed=true]):not([aria-expanded=true]) { color:var(--ink); background:#192231dc; border-color:#71829a60; }
html[data-theme=dark] .engine:hover,html[data-theme=dark] body[data-wallpaper=gallery] .engine:not([aria-pressed=true]):hover { background:#334154f2; }
html[data-theme=dark] :is(.engine[aria-pressed=true],.translate-nav[aria-expanded=true]) { color:#f7faff; background:#354459f5; border-color:#7a90ad; box-shadow:inset 0 1px #ffffff12; }
html[data-theme=dark] :is(.engine,.setting-row,.select-mark) img:is([src$='#marks-chatgpt'],[src$='/github.svg'],[src$='#marks-wikipedia']) { filter:brightness(0) invert(.92); }
html[data-theme=dark] .search-hint { color:#eef4ff; text-shadow:0 1px 4px #090f16; }
html[data-theme=dark] :is(.dock-sites .site-name,.site-name,.digital,.countdown) { color:var(--ink); }
html[data-theme=dark] .dock-utilities { border-color:var(--line); }
html[data-theme=dark] :is(.dock-utility,.icon-button,.edit-site,.library-pin,.arrange-arrow,.widget-hide) { color:#d4e3f7; background:var(--raised); border-color:var(--line); }
html[data-theme=dark] :is(.dock-utility,.icon-button,.edit-site,.library-pin,.arrange-arrow,.widget-hide):not(:disabled):hover { background:var(--hover); }
html[data-theme=dark] .dock-sites li:focus-within { background:#35506b99; }
html[data-theme=dark] .dock-sites > li.drop-here { background:#294268; }
html[data-theme=dark] .tile:not(.launchpad-tile):not(.social-folder) { box-shadow:0 1px 3px #0004; }
html[data-theme=dark] dialog,html[data-theme=dark] #library-dialog { background:var(--panel); border-color:var(--line); color:var(--ink); }
html[data-theme=dark] dialog::backdrop { background:#04091391; }
html[data-theme=dark] :is(.secondary-button,.upload-button,.text-button:hover,.swap,.number-result,.segmented) { color:var(--ink); background:var(--raised); border-color:var(--line); }
html[data-theme=dark] :is(.secondary-button,.upload-button):hover { background:var(--hover); }
html[data-theme=dark] :is(.field input,.field textarea,.tool-input,.select-button select,.library-search,.shop-search-row,.catalog-filter,.choice),
html[data-theme=dark] :is(#tr-text,#md-input,#md-output) { color:var(--ink); border-color:var(--line); background:var(--well); box-shadow:none; }
html[data-theme=dark] .select-button::after { background-color:#b9cbe3; }
html[data-theme=dark] .select-button select:hover { border-color:#798eaa; }
html[data-theme=dark] .select-button select:focus-visible { outline-color:var(--accent); }
html[data-theme=dark] :is(.choice:hover,.setting-row label:hover:not(:has(input:disabled)),.category-action:hover,.library-filters button:hover) { background:var(--hover); }
html[data-theme=dark] :is(.choice:has(input:checked),.library-pin[aria-pressed=true],.library-filters button[aria-pressed=true]) { color:var(--accent); background:#2b405e; border-color:#6d8eb9; }
html[data-theme=dark] .choice .icon { color:var(--accent); }
html[data-theme=dark] :is(#library-context,.library-filters button,.catalog-back,.shop-tabs button,.department-text small,.category-crumbs button,.glance-title,#clock-date,.world-toggle,.translation-languages select) { color:var(--muted); }
html[data-theme=dark] :is(.category-action,.translation-link,#visit-collection,#md-output a,.catalog-back:hover) { color:var(--accent); }
html[data-theme=dark] .danger { color:#ffada9; }
html[data-theme=dark] :is(.library-nav,.library-nav .category-action,.arrange-list li,.shop-tabs-line,.world-toggle,#library-context) { border-color:var(--line); }
html[data-theme=dark] #library-dialog[data-view=all] .library-list h3,html[data-theme=dark] #library-dialog[data-view=social] .library-list h3 { color:#d3deec; border-color:var(--line); }
html[data-theme=dark] :is(#translation-panel,.clock-card,.focus-card) { border-color:var(--line); box-shadow:inset 0 1px #ffffff08,0 1px 3px #080d181a; }
html[data-theme=dark] #translation-panel { background:#202834fa; }
html[data-theme=dark] .translation-output { color:var(--ink); background:var(--raised); }
html[data-theme=dark] :is(#tr-empty,#tr-swap) { color:var(--muted); }
html[data-theme=dark] #tr-swap:not(:disabled):hover { background:var(--hover); }
html[data-theme=dark] .shop-tabs button[aria-pressed=true] { color:var(--accent); border-color:#8aafea; }
html[data-theme=dark] .shop-tabs-line .store-links a { color:#c5d4e7; }
html[data-theme=dark] :is(.shop-categories button,.category-children a,.category-children button,.store-links a):hover { background:var(--hover); border-color:var(--line); }
html[data-theme=dark] .category-crumbs button:last-child { color:var(--ink); }
html[data-theme=dark] .clock-card { background:linear-gradient(125deg,#22354bf7,#243143f5); }
html[data-theme=dark] .focus-card { background:linear-gradient(125deg,#3e2e32f7,#332a34f7); }
html[data-theme=dark] .timer-select { color:#f3c5bb; }
html[data-theme=dark] #timer-reset { color:#ffd4c8; background:#533e40; border-color:#725357; }
html[data-theme=dark] .timer-face circle:not(#timer-progress) { stroke:#69484b; }
html[data-theme=dark] .analog #ivory stop:first-child { stop-color:#343e4e; }
html[data-theme=dark] .analog #ivory stop:last-child { stop-color:#222a36; }
html[data-theme=dark] .analog > circle:first-of-type { stroke:#68778c; }
html[data-theme=dark] .analog text { fill:#e2eafa; }
html[data-theme=dark] .analog :is(#hours-hand,#minutes-hand) { stroke:#f4f7fd; }
html[data-theme=dark] .analog > path[stroke-width="1.6"] { stroke:#b5c3d8; }
html[data-theme=dark] :is(.segmented button,.science-pad button) { color:var(--muted); }
html[data-theme=dark] .segmented button[aria-pressed=true] { color:#f1f6ff; background:#45536a; }
html[data-theme=dark] .calc-display { background:var(--well); border-color:var(--line); }
html[data-theme=dark] .calc-answer { border-color:var(--line); }
html[data-theme=dark] #calc-result.error { color:#ffaca9; }
html[data-theme=dark] .calc-keys button { background:var(--raised); color:var(--ink); border-color:var(--line); }
html[data-theme=dark] .calc-keys .digit { background:#374250; }
html[data-theme=dark] .calc-keys .operation { background:#2e4564; color:#cde2ff; }
html[data-theme=dark] :is(.calc-keys .equals,.science-pad button[aria-pressed=true]) { background:#466bc1; color:white; }
html[data-theme=dark] :is(#md-output pre,#md-output blockquote,.qr-preview) { background:var(--raised); border-color:var(--line); }
html[data-theme=dark] :is(#md-output td,#md-output th) { border-color:var(--line); }
html[data-theme=dark] #qr-image { background:white; }
html[data-theme=dark] :focus-visible { outline-color:var(--accent); }

#utility-dialog[data-tool=world] {
  --world-surface:#fff;
  --world-edge:#d9e3f0;
  --world-muted:#546782;
  --world-track:#e4ebf5;
  --world-tint:#edf3fc;
  width:min(680px,calc(100% - 24px));
  max-width:calc(100vw - 16px);
  max-height:calc(100svh - 16px);
  padding:24px;
  border-radius:24px;
  background:linear-gradient(150deg,#f3f7fd,#f8fafd 65%,#eff4fb);
}
html[data-theme=dark] #utility-dialog[data-tool=world] {
  --world-surface:#283343;
  --world-edge:#3b4a60;
  --world-muted:#bac9de;
  --world-track:#19222e;
  --world-tint:#344258;
  background:linear-gradient(150deg,#222e3e,#1d2633 70%,#222b39);
}
#utility-dialog[data-tool=world] .utility-heading { gap:12px; margin:0 0 19px; }
#utility-dialog[data-tool=world] .utility-heading h2 { font-size:24px; }
#utility-dialog[data-tool=world] #utility-icon { width:35px; height:35px; }
.world-tabs {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3px;
  padding:4px;
  margin-bottom:14px;
  background:var(--world-track);
  border-radius:12px;
}
.world-tabs button {
  min-width:0;
  min-height:33px;
  padding:5px 7px;
  border-radius:9px;
  font-size:13px;
  font-weight:560;
  line-height:1.3;
  color:var(--world-muted);
  overflow-wrap:anywhere;
}
.world-tabs button[aria-selected=true] {
  color:var(--ink);
  background:var(--world-surface);
  box-shadow:0 1px 4px #0b244323;
}
.world-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0; margin:0; list-style:none; }
.world-city {
  min-width:0;
  padding:15px;
  border:1px solid var(--world-edge);
  border-radius:15px;
  background:var(--world-surface);
}
.world-city-head,.world-footer,.world-meta,.world-reference,.world-hour-choice { display:flex; align-items:center; }
.world-city-head,.world-footer,.world-meta { justify-content:space-between; gap:6px; }
.world-place { min-width:0; }
.world-place h3 { margin:0; color:var(--ink); font-size:15px; font-weight:620; line-height:1.25; overflow-wrap:anywhere; }
.world-place small { display:block; color:var(--world-muted); font-size:11px; line-height:1.4; margin-top:2px; }
.world-reading { display:block; margin:12px 0 5px; color:var(--ink); font-size:clamp(23px,3.7vw,34px); font-weight:570; letter-spacing:-.055em; line-height:1.15; font-variant-numeric:tabular-nums; white-space:nowrap; }
.world-reading small { font-size:.5em; font-weight:580; letter-spacing:0; margin-inline:.12em; }
.world-meta { flex-wrap:wrap; color:var(--world-muted); font-size:10.5px; line-height:1.35; }
.world-offset { padding:2px 6px; border-radius:5px; background:var(--world-tint); font-size:9.5px; font-weight:600; white-space:nowrap; }
.world-face {
  position:relative;
  width:32px;
  height:32px;
  flex:none;
  color:#345171;
  border:1px solid #adbfd6;
  border-radius:50%;
  background:radial-gradient(circle at 50% 11%,currentColor 1px,transparent 1.3px),
             radial-gradient(circle at 89% 50%,currentColor 1px,transparent 1.3px),
             radial-gradient(circle at 50% 89%,currentColor 1px,transparent 1.3px),
             radial-gradient(circle at 11% 50%,currentColor 1px,transparent 1.3px),#f4f8ff;
}
.world-face.night { color:#d8e6ff; border-color:#405879; background-color:#26374f; }
.world-face i { position:absolute; left:calc(50% - 1px); bottom:50%; width:2px; border-radius:2px; background:currentColor; transform-origin:50% 100%; }
.world-hour { height:25%; transform:rotate(var(--hour-angle)); }
.world-minute { height:35%; transform:rotate(var(--minute-angle)); }
.world-face::after { content:""; position:absolute; width:4px; height:4px; top:calc(50% - 2px); left:calc(50% - 2px); background:#e38560; border-radius:50%; }
.world-footer { margin-top:16px; padding-top:13px; border-top:1px solid var(--world-edge); color:var(--world-muted); font-size:12px; }
.world-reference,.world-hour-choice { gap:7px; }
.world-reference time { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.world-hour-choice { cursor:pointer; }
.world-hour-choice input { appearance:none; width:31px; height:19px; margin:0; padding:2px; border:1px solid var(--world-edge); border-radius:20px; background:var(--world-track); cursor:pointer; flex:none; }
.world-hour-choice input::before { content:""; display:block; width:13px; height:13px; border-radius:50%; background:white; box-shadow:0 1px 2px #11243b42; }
.world-hour-choice input:checked { background:#436fc9; border-color:#436fc9; }
.world-hour-choice input:checked::before { transform:translateX(12px); }
@media (max-width:620px) {
  #utility-dialog[data-tool=world] { padding:16px; width:calc(100% - 16px); border-radius:19px; }
  #utility-dialog[data-tool=world] .utility-heading { margin-bottom:12px; }
  .world-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .world-city { padding:10px 12px; }
  .world-meta { flex-wrap:nowrap; column-gap:3px; }
  .world-offset { padding:2px 4px; }
  .world-tabs { margin-bottom:10px; }
  .world-tabs button { padding:4px; font-size:11.5px; }
  .world-reading { font-size:26px; margin:8px 0 4px; }
  .world-face { width:27px; height:27px; }
  .world-footer { margin-top:10px; padding-top:9px; }
}
@media (max-width:350px) {
  #utility-dialog[data-tool=world] { padding:12px; }
  .world-face { display:none; }
  .world-city { padding:8px; }
  .world-place h3 { font-size:13px; }
  .world-reading { font-size:22px; }
  .world-footer { font-size:11px; }
}
@media (max-width:620px) and (max-height:640px) {
  #utility-dialog[data-tool=world] { padding:12px; }
  #utility-dialog[data-tool=world] .utility-heading { gap:8px; margin-bottom:8px; }
  #utility-dialog[data-tool=world] .utility-heading h2 { font-size:19px; }
  #utility-dialog[data-tool=world] #utility-icon { width:28px; height:28px; }
  .world-grid { gap:6px; }
  .world-tabs { margin-bottom:8px; }
  .world-city { padding:7px 9px; }
  .world-reading { margin:4px 0 2px; }
}
@media (max-height:500px) {
  #utility-dialog[data-tool=world] { padding:10px 14px; }
  #utility-dialog[data-tool=world] .utility-heading { margin-bottom:6px; }
  #utility-dialog[data-tool=world] .utility-heading h2 { font-size:18px; }
  #utility-dialog[data-tool=world] #utility-icon { width:25px; height:25px; }
  .world-tabs { padding:2px; margin-bottom:6px; }
  .world-tabs button { min-height:25px; font-size:11px; }
  .world-grid { gap:5px; }
  .world-city { padding:6px 9px; }
  .world-place h3 { font-size:13px; }
  .world-place small { font-size:10px; }
  .world-reading { font-size:21px; margin:2px 0; }
  .world-footer { margin:6px 0 0; padding-top:5px; }
}
@media (min-width:460px) and (max-height:500px) { .world-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:350px) and (max-height:410px) {
  .world-city { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px 5px; }
  .world-city-head { display:block; }
  .world-face { display:none; }
  .world-reading { font-size:20px; margin:0; }
  .world-meta { grid-column:1 / -1; }
}