*{box-sizing:border-box} :root{font-family:Segoe UI,system-ui,sans-serif;color:#fff;color-scheme:dark}body{margin:0;min-height:100vh;background:#193b3e}.background,.shade{position:fixed;inset:0;z-index:-2}.background{background:linear-gradient(135deg,#385b59,#122e37);background-position:center;background-size:cover}.shade{z-index:-1;background:linear-gradient(90deg,rgba(9,28,34,.55),rgba(10,28,34,.24)),linear-gradient(0deg,rgba(8,26,31,.75),transparent 70%)}button,input,select{font:inherit}button{cursor:pointer}.layout{max-width:1680px;margin:auto;min-height:100vh;padding:34px 5% 20px;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:0 42px}.top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}.brand{font-size:12px;letter-spacing:.22em;font-weight:700}.brand-icon{font-size:26px;vertical-align:middle;margin-right:8px}.icon-button,.cal-nav button,.text-button,.close{border:0;background:transparent;color:inherit}.icon-button{font-size:22px}.hero{text-align:center;align-self:center;padding:54px 0 45px}.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:700;color:#d5e5de}.clock{font-size:clamp(82px,8vw,125px);font-weight:300;letter-spacing:-.06em;line-height:1.15;text-shadow:0 3px 25px #0004}.date{font-size:16px;color:#edf4ed;text-transform:capitalize}.hero h1{font-size:22px;font-weight:400;margin:25px 0}.search{margin:0 auto;max-width:610px;display:flex;align-items:center;background:rgba(250,255,252,.94);color:#263b3b;border-radius:14px;height:58px;box-shadow:0 10px 35px #0002}.search span{font-size:30px;padding:0 17px}.search input{border:0;background:none;color:#263b3b;outline:none;flex:1;min-width:0}.search input::placeholder{color:#778985}.search button{border:0;background:none;color:#486c64;font-size:23px;padding:0 20px}.sidebar{grid-column:2;grid-row:2 / 4;display:flex;flex-direction:column;gap:16px;margin-top:48px}.glass{background:rgba(23,47,48,.55);border:1px solid rgba(255,255,255,.23);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 12px 45px #081f2530;border-radius:17px}.weather,.calendar{padding:21px}.card-heading{display:flex;justify-content:space-between;align-items:center;letter-spacing:.16em;font-size:10px;color:#dce9e2;font-weight:700}.text-button{font-size:11px;letter-spacing:0;color:#e2ebe5}.weather-main{display:flex;align-items:center;gap:14px;margin:20px 0 4px}.weather-icon{font-size:36px}.temperature{font-size:39px;font-weight:300}.weather p{margin:5px 0;color:#d9e7e0;font-size:13px}.cal-nav button{font-size:22px;line-height:1}.calendar h2{font-size:17px;font-weight:500;text-transform:capitalize;margin:19px 0}.calendar-grid{display:grid;grid-template-columns:repeat(8,1fr);text-align:center;gap:4px;font-size:12px;align-items:center}.calendar-grid span{padding:7px 0;border-radius:50%}.calendar-grid .weekday,.calendar-grid .week{color:#b9cdc2;font-size:10px}.calendar-grid .today{background:#d9e9dc;color:#173a34;font-weight:700}.shortcuts{grid-column:1;padding:0 0 26px}.shortcuts-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:19px}.shortcuts-title h2{font-size:25px;font-weight:500;margin:7px 0 0}.shortcuts-title>span{font-size:12px;color:#d2e0d9}.groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.group{padding:18px;min-width:0}.group-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.group h3{font-size:14px;margin:0;font-weight:600}.group-head button{border:1px solid #ffffff50;background:#ffffff13;color:white;border-radius:8px;width:28px;height:28px;font-size:19px}.link-list{height:190px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ffffff70 transparent}.link-row{display:flex;align-items:center;gap:9px;margin:5px 0;padding:6px;border-radius:9px}.link-row:hover{background:#ffffff16}.link-row a{display:flex;align-items:center;gap:10px;color:white;text-decoration:none;flex:1;min-width:0;font-size:13px}.link-row a span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.link-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;background:#ffffff22;border:1px solid #ffffff20;border-radius:9px;font-weight:700}.link-actions{display:flex}.link-actions button{border:0;background:none;color:#d9e6e0;font-size:14px;padding:4px}.empty{font-size:12px;color:#d5e4dc;line-height:1.5}footer{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#d2e2dc;align-self:end}footer a{color:inherit}dialog{border:1px solid #ffffff55;border-radius:18px;background:#213d3d;color:white;padding:24px;width:min(440px,90vw);box-shadow:0 20px 80px #0008}dialog::backdrop{background:#061816aa;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{font-size:20px}.close{font-size:26px}label{display:block;font-size:13px;margin:16px 0}label input,label select{display:block;width:100%;margin-top:8px;border:1px solid #ffffff44;border-radius:9px;background:#102e2e;color:white;padding:12px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}.dialog-actions button{border:0;border-radius:9px;padding:10px 15px}.primary{background:#e1f0e5;color:#193a30}.cancel{background:#ffffff20;color:white}.hint{font-size:12px;color:#ccddd3}@media(max-width:1100px){.groups{grid-template-columns:repeat(2,minmax(0,1fr))}.layout{gap:0 22px}}@media(max-width:700px){.layout{display:block;padding:24px 5%}.hero{padding:50px 0 30px}.sidebar{margin:0 0 25px;display:grid;grid-template-columns:1fr 1fr}.shortcuts-title>span{display:none}.groups{grid-template-columns:repeat(2,minmax(0,1fr))}footer{margin-top:24px;display:block}footer span{display:block;margin-top:8px}}@media(max-width:430px){.sidebar,.groups{grid-template-columns:1fr}.link-list{height:150px}}
/* The shortcut column leaves the landscape and clock open in the center. */
@media (min-width: 901px) {
  .layout { max-width: none; min-height: 100vh; padding: 28px 3% 18px; grid-template-columns: 245px minmax(0, 1fr) 280px; grid-template-rows: auto 1fr auto; gap: 16px 32px; }
  .top { grid-column: 1 / -1; grid-row: 1; }
  .shortcuts { grid-column: 1; grid-row: 2; padding: 0; align-self: start; }
  .shortcuts-title { margin: 0 0 14px; }
  .shortcuts-title .eyebrow, .shortcuts-title > span { display: none; }
  .shortcuts-title h2 { font-size: 18px; margin: 0; }
  .groups { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .group { padding: 12px 14px; }
  .group-head { margin-bottom: 6px; }
  .group h3 { font-size: 13px; }
  .link-list { height: clamp(74px, 11vh, 125px); }
  .link-row { margin: 2px 0; padding: 4px; }
  .link-icon { width: 27px; height: 27px; }
  .hero { grid-column: 2; grid-row: 2; padding: 0 0 50px; }
  .sidebar { grid-column: 3; grid-row: 2; align-self: start; margin-top: 0; }
  footer { grid-column: 1 / -1; grid-row: 3; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr) 250px; }
  .sidebar { grid-column: 2; grid-row: 2; }
  .shortcuts { grid-column: 1 / -1; grid-row: 3; }
  .groups { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.group-controls { display: flex; align-items: center; gap: 7px; }
.group-head .show-all { width: auto; height: auto; border: 0; padding: 5px; background: transparent; font-size: 10px; color: #e3eee8; white-space: nowrap; }
.link-icon { position: relative; overflow: hidden; }
.link-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #eef5ef; border-radius: inherit; }
.all-list { max-height: 55vh; overflow-y: auto; }
.all-link { display: flex; gap: 12px; align-items: center; color: white; text-decoration: none; padding: 10px; border-radius: 9px; }
.all-link:hover, .all-link:focus-visible { background: #ffffff20; }
.all-link span:nth-child(2) { flex: 1; overflow-wrap: anywhere; }
.weather .weather-credit { font-size: 10px; opacity: .8; margin-top: 10px; }

.photo-info { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.photo-info #photo-credit { overflow-wrap: anywhere; }
.background-button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid #ffffff55; border-radius: 8px; background: #17323088; color: #fff; font-size: 12px; backdrop-filter: blur(14px); }
.background-button:hover, .background-button:focus-visible { background: #315952cc; }
.background-button:disabled { opacity: .6; cursor: wait; }
.photo-status { color: #fff; }
@media (max-width: 700px) { footer .photo-info { display: flex; } footer .photo-info span { display: inline; margin: 0; } }
.manage-groups { flex: none; border: 1px solid #ffffff55; background: #ffffff13; color: #fff; border-radius: 8px; width: 30px; height: 30px; font-size: 16px; }
.manage-groups:hover, .manage-groups:focus-visible { background: #ffffff30; }
.group-list { border-top: 1px solid #ffffff33; margin-top: 20px; padding-top: 8px; max-height: 35vh; overflow-y: auto; }
.group-manager-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; font-size: 14px; }
.group-manager-row span { overflow-wrap: anywhere; }
.group-manager-row button { border: 0; border-radius: 7px; background: #ffffff1c; color: white; padding: 6px 9px; }
.group-manager-row button:disabled { opacity: .45; cursor: not-allowed; }
.group-error { color: #ffccbe; font-size: 13px; margin: 0; }
.group-manager-controls { display: flex; align-items: center; gap: 8px; flex: none; }
.group-manager-controls select { max-width: 120px; padding: 6px 7px; border: 1px solid #ffffff44; border-radius: 7px; background: #102e2e; color: white; font-size: 13px; }
.group-manager-row { padding: 5px 0; }
.quick-shortcuts { max-width: 610px; margin: 17px auto 0; }
.quick-head { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 11px; color: #e3eee8; }
.quick-head button { width: 25px; height: 25px; border: 1px solid #ffffff77; border-radius: 8px; color: #fff; background: #17323088; font-size: 18px; line-height: 1; }
.quick-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-height: 240px; overflow-y: auto; padding: 12px 3px 5px; scrollbar-width: thin; scrollbar-color: #ffffff70 transparent; }
.quick-item { position: relative; width: 82px; min-width: 0; }
.quick-link { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-size: 12px; text-shadow: 0 1px 5px #000; }
.quick-icon { width: 48px; height: 48px; border-radius: 50%; font-size: 19px; box-shadow: 0 3px 12px #0003; }
.quick-icon img { padding: 7px; }
.quick-label { display: block; max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-actions { display: flex; justify-content: center; gap: 4px; opacity: 0; transition: opacity .15s; }
.quick-item:hover .quick-actions, .quick-item:focus-within .quick-actions { opacity: 1; }
.quick-actions button { border: 0; background: #183936b8; color: #fff; border-radius: 5px; width: 26px; height: 23px; }
@media (hover: none) { .quick-actions { opacity: 1; } }
.theme-swatches { display: flex; gap: 6px; margin: -4px 0 8px; }
.theme-swatches span { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #ffffff66; }
.theme-note { max-height: 75px; overflow-y: auto; }
:root[data-palette="custom"] body { background: color-mix(in srgb, var(--palette-dark) 65%, #10141a); }
:root[data-palette="custom"] .background { background-color: var(--palette-dark); }
:root[data-palette="custom"] .shade { background: linear-gradient(90deg, color-mix(in srgb, var(--palette-dark) 48%, transparent), transparent 70%), linear-gradient(0deg, color-mix(in srgb, var(--palette-dark) 65%, transparent), transparent 75%); }
:root[data-palette="custom"] .glass { background: color-mix(in srgb, color-mix(in srgb, var(--palette-dark) 75%, var(--palette-accent)) 78%, transparent); border-color: color-mix(in srgb, var(--palette-light) 35%, transparent); }
:root[data-palette="custom"] dialog { background: color-mix(in srgb, var(--palette-dark) 82%, var(--palette-accent)); }
:root[data-palette="custom"] label input, :root[data-palette="custom"] label select, :root[data-palette="custom"] .group-manager-controls select { background: color-mix(in srgb, var(--palette-dark) 86%, #101018); }
:root[data-palette="custom"] .calendar-grid .today, :root[data-palette="custom"] .primary { background: color-mix(in srgb, var(--palette-light) 70%, white); color: color-mix(in srgb, var(--palette-dark) 75%, black); }
:root[data-palette="custom"] .search { background: color-mix(in srgb, var(--palette-light) 18%, white); color: color-mix(in srgb, var(--palette-dark) 70%, black); }
:root[data-palette="custom"] .search input, :root[data-palette="custom"] .search button { color: color-mix(in srgb, var(--palette-dark) 70%, black); }
:root[data-palette="custom"] .background-button, :root[data-palette="custom"] .quick-head button, :root[data-palette="custom"] .quick-actions button { background: color-mix(in srgb, var(--palette-dark) 75%, var(--palette-accent)); }
.glass { background: color-mix(in srgb, #172f30 var(--glass-opacity, 55%), transparent); }
:root[data-palette="custom"] .glass { background: color-mix(in srgb, color-mix(in srgb, var(--palette-dark) 75%, var(--palette-accent)) var(--glass-opacity, 78%), transparent); }
.transparency-label output { float: right; font-variant-numeric: tabular-nums; }
.transparency-label input[type="range"] { padding: 0; border: 0; accent-color: #c9c2e3; }
.transparency-hint { display: block; margin-top: 7px; font-size: 11px; color: #ccddd3; }
.shortcuts > .quick-head { justify-content: space-between; margin: 0 0 10px; padding: 0 2px; font-size: 12px; }
.quick-shortcuts { margin-top: 12px; }
.quick-links:empty { display: none; }
.top { justify-content: flex-end; }
.shortcut-tools { display: flex; align-items: center; gap: 6px; }
.add-quick-link { width: 30px; height: 30px; border: 1px solid #ffffff55; background: #ffffff13; color: #fff; border-radius: 8px; font-size: 19px; line-height: 1; }
.add-quick-link:hover, .add-quick-link:focus-visible { background: #ffffff30; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-nav #calendar-settings { font-size: 15px; margin-right: 4px; }
.calendar-grid button { font: inherit; color: inherit; border: 1px solid transparent; background: transparent; padding: 6px 0; min-width: 0; border-radius: 50%; line-height: 1; }
.calendar-grid button:hover, .calendar-grid button:focus-visible { background: #ffffff25; }
.calendar-grid button.has-events { border-color: #fff; }
.calendar-grid button.today { background: #d9e9dc; color: #173a34; font-weight: 700; }
:root[data-palette="custom"] .calendar-grid button.today { background: color-mix(in srgb, var(--palette-light) 70%, white); color: color-mix(in srgb, var(--palette-dark) 75%, black); }
.calendar-grid button.selected { box-shadow: 0 0 0 2px #ffffff90; }
.calendar-events { border-top: 1px solid #ffffff30; margin-top: 16px; padding-top: 12px; max-height: 250px; overflow-y: auto; scrollbar-width: thin; }
.calendar-events:empty { display: none; }
.calendar-events h3 { text-transform: capitalize; font-size: 12px; margin: 7px 0 8px; color: #e1ece7; }
.calendar-event { border-left: 3px solid #a7c8dd; padding-left: 9px; margin-bottom: 10px; font-size: 12px; overflow-wrap: anywhere; }
.calendar-event-time, .calendar-empty { display: block; color: #d3dfda; font-size: 11px; margin: 3px 0 8px; }
.calendar-auth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.calendar-auth-actions button { border: 0; border-radius: 9px; padding: 10px 14px; }
.calendar-origin { font-size: 12px; overflow-wrap: anywhere; color: #d3dfda; }
#calendar-choices { max-height: 200px; overflow-y: auto; }
.calendar-choice { display: flex; align-items: center; gap: 9px; margin: 10px 0; }
.calendar-choice input { display: inline-block; width: auto; margin: 0; }
#calendar-dialog a { color: inherit; }
.events-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #e1ece7; font-size: 11px; font-weight: 700; }
.events-header button { border: 0; background: transparent; color: white; font-size: 21px; line-height: 1; padding: 2px 5px; border-radius: 5px; }
.events-header button:hover, .events-header button:focus-visible { background: #ffffff25; }
.calendar-grid button.has-events { position: relative; border-color: transparent; }
.calendar-grid button.has-events::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; left: 50%; bottom: 1px; transform: translateX(-50%); background: var(--event-dot-color, #244e43); box-shadow: 0 0 0 1px #ffffff80; }
:root[data-palette="custom"] { --event-dot-color: color-mix(in srgb, var(--palette-accent) 70%, #101018); }

.sync-open,.sync-button { border: 1px solid #ffffff44; border-radius: 9px; padding: 10px 14px; }
.sync-open { background: #ffffff15; color: white; }
.sync-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin: 15px 0; }
#sync-dialog { max-height: 90vh; overflow-y: auto; }
#calendar-credentials, #sync-credentials { margin: 12px 0; }
#calendar-credentials summary, #sync-credentials summary { cursor: pointer; font-size: 12px; color: #e4eee8; }

#sync-dialog [hidden] { display: none !important; }

@media (min-width: 901px) {
  .top { grid-column: 3; grid-row: 1; height: 30px; align-items: center; }
  .shortcuts { grid-row: 1 / 3; }
  .shortcuts-title { min-height: 30px; align-items: center; }
}
@media (min-width: 901px) { .shortcuts-title { margin-bottom: 16px; } }

.calendar-grid button.has-events::after {
  width: 10px;
  height: 3px;
  bottom: 1px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--event-dot-color, #244e43) 45%, #fff 55%);
  box-shadow: none;
}
.calendar-grid button.today.has-events::after {
  background: var(--event-dot-color, #244e43);
}
.archive-icon { font-size: 15px; line-height: 1; }
#background-dialog { width: min(720px, 92vw); max-height: 88vh; overflow-y: auto; }
.archive-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.archive-upload, .archive-daily { margin: 0; border: 1px solid #ffffff55; border-radius: 9px; padding: 10px 14px; background: #ffffff18; color: white; cursor: pointer; font-size: 13px; }
.archive-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.archive-upload:focus-within { outline: 2px solid white; }
.background-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 12px; }
.archive-card { background: #ffffff12; border: 1px solid #ffffff2b; border-radius: 12px; overflow: hidden; }
.archive-card img { width: 100%; height: 95px; object-fit: cover; display: block; }
.archive-card-body { padding: 10px; }
.archive-card p { font-size: 12px; margin: 0 0 10px; overflow-wrap: anywhere; }
.archive-card button { width: 100%; border: 0; border-radius: 7px; padding: 8px; background: #e1f0e5; color: #193a30; }
.public-ip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ffffff30;
  font-size: 12px;
}

#public-ip {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}