:root {
  --ink: #14263a;
  --muted: #627184;
  --line: #5c7ca2;
  --dark: #173967;
  --panel: #f8fcff;
  --panel-2: #edf5fb;
  --field: #ffffff;
  --menubar: #e7f0f8;
  --status: #e4ebf1;
  --taskbar-h: 45px;
  --taskbar-1: #2676d0;
  --taskbar-2: #0a4da9;
  --taskbar-3: #1e69c3;
  --title-1: #68aef5;
  --title-2: #0a4cb5;
  --title-3: #1262d1;
  --ir1: #72daf6;
  --ir2: #8b78de;
  --ir3: #e388bd;
  --ir4: #f1a17d;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  font-family: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: #bde7fb;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }

.desktop {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  transition: background .35s ease, filter .2s ease;
}

/* Time based sea skies */
.desktop[data-background="auto"][data-scene="morning"],
.desktop[data-background="morning"] {
  background:
    radial-gradient(circle at 18% 19%, rgba(255,246,206,.95) 0 4.2rem, rgba(255,236,199,.34) 4.3rem, transparent 12rem),
    linear-gradient(180deg,#a8ddf6 0%,#cdeafa 37%,#f4d8df 72%,#efc5cf 100%);
}
.desktop[data-background="auto"][data-scene="afternoon"],
.desktop[data-background="afternoon"] {
  background:
    radial-gradient(circle at 78% 16%, rgba(255,250,214,.82) 0 3.6rem, rgba(255,255,255,.22) 3.8rem, transparent 12rem),
    linear-gradient(180deg,#6ec8f2 0%,#9bdafa 38%,#bdcff7 67%,#e6cce9 100%);
}
.desktop[data-background="auto"][data-scene="night"],
.desktop[data-background="night"] {
  background:
    radial-gradient(circle at 80% 15%, rgba(235,241,255,.92) 0 2.1rem, rgba(198,211,255,.22) 2.3rem, transparent 8rem),
    linear-gradient(180deg,#101b45 0%,#18366f 38%,#364d8f 67%,#6f5f94 100%);
}
.desktop[data-background="cat"] {
  background-color: #b9dbf4;
  background-image: url('cat-wallpaper.svg'), linear-gradient(155deg,#b4e9fb,#c6d9fb 45%,#e5c7e9);
  background-position: center, center;
  background-size: cover, cover;
}
.desktop[data-background="classic"] {
  background-color: #7dccff;
  background-image: url('classic-hills.svg');
  background-size: cover;
  background-position: center bottom;
}

.desktop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: transparent;
  transition: background .2s ease;
}
.desktop.dark-mode {
  --ink: #e7edf7;
  --muted: #aebcd0;
  --line: #64799a;
  --dark: #091323;
  --panel: #162235;
  --panel-2: #111b2c;
  --field: #0d1727;
  --menubar: #1b2940;
  --status: #131f31;
  --taskbar-1: #172e5f;
  --taskbar-2: #071a3d;
  --taskbar-3: #102957;
  --title-1: #416da2;
  --title-2: #173c79;
  --title-3: #255894;
}
.desktop.dark-mode::after { background: rgba(5,11,25,.44); }
.desktop.dark-mode[data-background="night"]::after,
.desktop.dark-mode[data-background="auto"][data-scene="night"]::after { background: rgba(0,4,15,.18); }

.stars {
  position: absolute;
  inset: 0 0 34% 0;
  z-index: -4;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(211,225,255,.8) 0 1px, transparent 1.7px);
  background-size: 73px 67px, 121px 103px;
  background-position: 9px 14px, 41px 37px;
  transition: opacity .25s ease;
}
.desktop[data-background="auto"][data-scene="night"] .stars,
.desktop[data-background="night"] .stars { opacity: .82; }

.sea-layer {
  position: absolute;
  left: -8vw;
  width: 116vw;
  pointer-events: none;
  z-index: -3;
  filter: drop-shadow(0 -5px 14px rgba(255,255,255,.24));
  transition: opacity .25s ease;
}
.desktop[data-background="cat"] .sea-layer,
.desktop[data-background="classic"] .sea-layer { opacity: 0; }
.sea-back {
  bottom: 13vh;
  height: 34vh;
  opacity: .53;
  background: linear-gradient(180deg,transparent 0 17%,rgba(81,183,226,.22) 18%,rgba(61,140,209,.43) 100%);
  clip-path: polygon(0 35%,7% 23%,13% 31%,21% 18%,29% 30%,38% 16%,47% 28%,56% 14%,65% 26%,74% 12%,84% 27%,93% 18%,100% 29%,100% 100%,0 100%);
}
.sea-mid {
  bottom: 5vh;
  height: 31vh;
  opacity: .62;
  background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(77,146,213,.47));
  clip-path: polygon(0 28%,9% 15%,17% 29%,27% 11%,35% 24%,44% 14%,53% 30%,63% 16%,73% 27%,82% 12%,91% 26%,100% 16%,100% 100%,0 100%);
}
.sea-front {
  bottom: 0;
  height: 22vh;
  opacity: .72;
  background: linear-gradient(180deg,rgba(255,255,255,.18),rgba(83,142,214,.42) 44%,rgba(128,107,194,.36) 76%,rgba(219,127,180,.31));
  clip-path: polygon(0 27%,8% 10%,18% 30%,30% 8%,42% 25%,54% 12%,66% 31%,78% 9%,88% 23%,100% 11%,100% 100%,0 100%);
}

.brandmark {
  position: absolute;
  top: 20px;
  left: 26px;
  z-index: 2;
  font-family: "Lucida Console", Consolas, monospace;
  font-size: 29px;
  letter-spacing: 1px;
  color: rgba(20,64,112,.72);
  text-shadow: 0 1px rgba(255,255,255,.86);
  user-select: none;
}
.dark-mode .brandmark { color: rgba(227,238,255,.86); text-shadow: 0 1px #061124; }

.shortcuts {
  position: absolute;
  top: 69px;
  left: 14px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, 72px);
  gap: 11px 5px;
  width: 151px;
}
.shortcuts button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 2px;
  display: grid;
  justify-items: center;
  gap: 4px;
  cursor: pointer;
  color: #17385f;
  font-size: 10px;
  font-weight: 600;
  text-shadow: 0 1px rgba(255,255,255,.9);
  border-radius: 6px;
}
.shortcuts b { font-weight: 600; line-height: 1.15; text-align: center; }
.dark-mode .shortcuts button { color: #eaf1ff; text-shadow: 0 1px #071122; }
.shortcuts button:hover,.shortcuts button:focus-visible { background: rgba(255,255,255,.32); outline: 1px dotted currentColor; }
.shortcuts span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 38px;
  border: 1px solid #5b80ad;
  border-radius: 5px;
  color: #104ea0;
  font-family: "Lucida Console", Consolas, monospace;
  font-size: 27px;
  background: linear-gradient(135deg,rgba(255,255,255,.97),rgba(188,227,255,.92) 50%,rgba(223,194,255,.9));
  box-shadow: inset 1px 1px rgba(255,255,255,.9),1px 2px 4px rgba(29,72,112,.16);
}
.dark-mode .shortcuts span { color:#cfe3ff; border-color:#607ba4; background:linear-gradient(135deg,#263958,#1d2b45 58%,#352d52); }

.window-stack {
  position: absolute;
  z-index: 4;
  top: 57px;
  left: 169px;
  right: 16px;
  bottom: calc(var(--taskbar-h) + 10px);
  overflow: hidden;
}
.window {
  --window-width: 880px;
  --window-height: 610px;
  --content-scale: 1;
  --zoom-scale: 1;
  --resize-scale: 1;
  position: absolute;
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto;
  width: min(var(--window-width),calc(100% - 8px));
  height: min(var(--window-height),calc(100% - 8px));
  min-width: min(420px,100%);
  min-height: min(310px,100%);
  overflow: hidden;
  resize: both;
  background: var(--panel-2);
  border: 2px solid var(--dark);
  border-radius: 7px 7px 4px 4px;
  box-shadow: 8px 12px 28px rgba(20,55,95,.3), inset 0 0 0 1px rgba(255,255,255,.62);
}
.window.maximized { resize:none; width:100% !important; height:100% !important; left:0 !important; top:0 !important; }

/* Isolated window motion: only the affected window moves.
   Transform-only on purpose: no brightness or opacity flash. */
.window.opening {
  transform-origin: center center;
  animation: window-open-soft 150ms cubic-bezier(.18,.78,.22,1) both;
  will-change: transform;
}
.window.closing {
  pointer-events: none;
  transform-origin: center center;
  animation: window-close-soft 120ms cubic-bezier(.4,0,.6,1) both;
  will-change: transform;
}
@keyframes window-open-soft {
  from { transform:translateY(5px) scale(.976); }
  to   { transform:translateY(0) scale(1); }
}
@keyframes window-close-soft {
  from { transform:translateY(0) scale(1); }
  to   { transform:translateY(4px) scale(.982); }
}
@media (prefers-reduced-motion: reduce) {
  .window.opening,
  .window.closing {
    animation:none !important;
    transition:none !important;
  }
}

.titlebar {
  min-height: 35px;
  padding: 5px 5px 5px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-family: "Trebuchet MS", Inter, sans-serif;
  font-weight: 700;
  text-shadow: 1px 1px 0 rgba(0,0,0,.35);
  background: linear-gradient(to bottom,var(--title-1) 0%,#2d77d2 18%,var(--title-2) 52%,var(--title-3) 76%,#79b7f5 100%);
  border-bottom: 1px solid #103d80;
  cursor: grab;
  user-select: none;
}
.dark-mode .titlebar { background:linear-gradient(to bottom,var(--title-1),#295284 20%,var(--title-2) 54%,var(--title-3) 82%,#446b9a); border-bottom-color:#09182c; }
.titlebar.dragging { cursor: grabbing; }
.titlebar-name { pointer-events:none; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.controls { display:flex; gap:3px; align-items:center; }
.zoom-controls { display:flex; gap:2px; align-items:center; margin-right:3px; }
.window-control {
  width:24px; height:23px; padding:0;
  border:1px solid rgba(255,255,255,.82); border-radius:3px;
  display:grid; place-items:center; cursor:pointer;
  color:#fff; line-height:1; font-family:Arial,sans-serif; font-size:12px; font-weight:700;
  background:linear-gradient(#7fb5ea,#3175c5);
  box-shadow:inset 1px 1px rgba(255,255,255,.35);
  text-shadow:1px 1px rgba(0,0,0,.25);
}
.zoom-controls .window-control { width:30px; font-size:10px; }
.window-control:hover:not(:disabled) { filter:brightness(1.12); }
.window-control:disabled { opacity:.42; cursor:default; }
.window-control.close { background:linear-gradient(#f49a73,#d94b2d); }

.menubar {
  min-height:31px;
  display:flex; align-items:center; gap:5px;
  padding:4px 9px; overflow:hidden;
  border-bottom:1px solid #a7b5c4;
  background:linear-gradient(color-mix(in srgb,var(--menubar) 80%,white),var(--menubar));
  font-size:12px;
}
.crumb-home,.crumb { border:0; padding:2px 4px; background:transparent; color:color-mix(in srgb,var(--ink) 72%,#2d6ca8); cursor:pointer; white-space:nowrap; }
.crumb-home:hover,.crumb:hover { text-decoration:underline; }
.breadcrumbs { display:flex; align-items:center; gap:4px; overflow:hidden; min-width:0; }
.sep { color:var(--muted); }

.content {
  container-type: inline-size;
  min-height:0;
  overflow:auto;
  padding:22px 26px 28px;
  background:linear-gradient(rgba(255,255,255,.965),rgba(249,253,255,.965)),linear-gradient(130deg,rgba(125,217,255,.12),rgba(240,167,207,.11));
  color:var(--ink);
  font-size:calc(14px * var(--content-scale));
  scrollbar-color:#7fa1c6 var(--panel-2);
  scrollbar-width:thin;
}
.dark-mode .content { background:linear-gradient(rgba(22,34,53,.975),rgba(17,27,44,.975)),linear-gradient(130deg,rgba(73,139,181,.09),rgba(160,87,145,.08)); }
.statusbar {
  min-height:20px;
  display:flex; justify-content:flex-end; align-items:center;
  padding:2px 5px;
  border-top:1px solid #abb7c4;
  background:linear-gradient(color-mix(in srgb,var(--status) 75%,white),var(--status));
  color:var(--muted);
  font-size:10px;
}
.resize-hint { opacity:.58; }

.kicker { margin:0 0 .55em; color:var(--muted); text-transform:uppercase; letter-spacing:.15em; font-size:.72em; font-weight:700; }
.hero { margin:0; max-width:700px; font-family:"Trebuchet MS",Inter,sans-serif; font-size:clamp(36px,5vw,58px); line-height:.98; letter-spacing:-.04em; color:color-mix(in srgb,var(--ink) 78%,#124c87); }
.irid { background:linear-gradient(90deg,#1879c4,#755cc6 42%,#c85e9c 72%,#d16c58); -webkit-background-clip:text; color:transparent; }
.copy { max-width:700px; margin:0 0 1.5em; color:var(--muted); font-size:1em; line-height:1.6; }
.section-title { margin:0 0 .42em; font-family:"Trebuchet MS",Inter,sans-serif; color:color-mix(in srgb,var(--ink) 82%,#174b83); font-size:1.72em; line-height:1.12; letter-spacing:-.025em; }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(205px,100%),1fr)); gap:.8em; }
.grid.two { grid-template-columns:repeat(auto-fit,minmax(min(245px,100%),1fr)); }
.card {
  min-width:0; min-height:7.8em; padding:.95em; text-align:left;
  border:1px solid #7591af; border-radius:5px; cursor:pointer;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(226,241,252,.96));
  box-shadow:inset 1px 1px rgba(255,255,255,.9),inset -1px -1px rgba(94,118,145,.13),1px 2px 4px rgba(41,72,105,.1);
}
.dark-mode .card { background:linear-gradient(135deg,#203149,#18263b); border-color:#6c83a4; }
.card:hover,.card:focus-visible { transform:translateY(-1px); border-color:#326eb0; outline:0; box-shadow:0 0 0 2px rgba(119,185,246,.2),2px 4px 7px rgba(41,72,105,.14); }
.card strong { display:block; color:color-mix(in srgb,var(--ink) 78%,#14518d); margin-bottom:.48em; font-size:1em; line-height:1.18; overflow-wrap:anywhere; }
.card span { display:block; color:var(--muted); font-size:.86em; line-height:1.42; overflow-wrap:anywhere; }
.tools { display:flex; flex-wrap:wrap; gap:.5em; margin:.8em 0 1.25em; }
.tag { padding:.42em .64em; border:1px solid #b3c2d0; border-radius:3px; color:var(--muted); background:color-mix(in srgb,var(--panel) 92%,white); font-size:.8em; }
.dark-mode .tag { border-color:#526984; background:#162238; }
.audit { margin:1.15em 0; padding:.9em 1em; border:1px solid #8a9eb4; border-left:4px solid #5578b2; background:linear-gradient(100deg,rgba(223,246,255,.82),rgba(239,228,255,.68),rgba(255,232,243,.65)); }
.dark-mode .audit { background:linear-gradient(100deg,rgba(35,73,98,.65),rgba(54,43,91,.55),rgba(83,41,69,.5)); }
.audit small { display:block; color:var(--muted); margin-bottom:.25em; font-size:.78em; }
.audit-price { color:var(--ink); font-size:1.35em; font-weight:700; }
.note,.mini { margin-top:.5em; color:var(--muted); font-size:.78em; line-height:1.45; }
.choice-row { display:flex; flex-wrap:wrap; gap:.58em; margin:.85em 0 1.15em; }
.pill,.action { border:1px solid #547ca8; border-radius:4px; cursor:pointer; color:var(--ink); box-shadow:inset 1px 1px #fff,1px 1px 2px rgba(35,66,99,.12); }
.pill { padding:.58em .8em; font-size:.86em; background:linear-gradient(#fff,#dfeaf4); }
.dark-mode .pill,.dark-mode .action { background:linear-gradient(#2d405c,#1e2d45); color:#edf4ff; border-color:#6583aa; box-shadow:inset 1px 1px rgba(255,255,255,.12); }
.pill:hover,.pill.selected { border-color:#245d9c; background:linear-gradient(#fff,#dcefff 48%,#e9e1ff); }
.dark-mode .pill:hover,.dark-mode .pill.selected { background:linear-gradient(#355783,#37365f); }
.action { padding:.72em 1.12em; font-weight:700; background:linear-gradient(#fdfefe,#dbeeff 48%,#d5e1ff); }
.inline { margin-top:1em; padding-top:1em; border-top:1px dotted #a8b9c8; }
.checkgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(185px,100%),1fr)); gap:.52em; margin-top:.65em; }
.check { display:flex; align-items:center; gap:.52em; min-height:2.5em; padding:.52em .62em; border:1px solid #bdc8d3; border-radius:3px; background:color-mix(in srgb,var(--panel) 94%,white); font-size:.82em; min-width:0; }
.dark-mode .check { border-color:#50647d; background:#142136; }
.check input { width:auto; margin:0; }
.field { display:grid; gap:.36em; min-width:0; }
.field label { color:color-mix(in srgb,var(--ink) 82%,#315a7f); font-size:.8em; font-weight:700; }
input,textarea,select { width:100%; min-width:0; border:1px solid #7c91a8; border-radius:2px; padding:.66em .72em; color:var(--ink); background:var(--field); box-shadow:inset 1px 1px 2px rgba(29,55,83,.12); }
textarea { min-height:7.7em; resize:vertical; }
.about { display:grid; grid-template-columns:minmax(70px,92px) minmax(0,1fr); gap:1.2em; align-items:start; }
.emblem { width:80px; height:80px; border-radius:13px; display:grid; place-items:center; font-family:VT323,monospace; font-size:52px; color:#fff; text-shadow:1px 1px rgba(0,0,0,.25); border:1px solid #587ba4; background:linear-gradient(135deg,var(--ir1),var(--ir2) 50%,var(--ir3) 75%,var(--ir4)); }
.success { margin-top:.85em; padding:.7em .82em; color:#155f3b; border:1px solid #7eb69a; background:#effaf4; font-size:.82em; }
.dark-mode .success { color:#c9ffe2; border-color:#4f8e6a; background:#153225; }
.hidden { display:none !important; }

.lead-layout { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); gap:1em; align-items:start; }
.lead-panel { display:grid; gap:.75em; min-width:0; padding:.95em; border:1px solid #b5c3d1; border-radius:4px; background:color-mix(in srgb,var(--panel) 88%,transparent); }
.dark-mode .lead-panel { border-color:#526983; background:#121f32; }
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(175px,100%),1fr)); gap:.72em; }
.contact-grid .wide { grid-column:1 / -1; }
.request-summary { margin:0 0 .2em; padding:.75em; border:1px solid #c0cbd6; background:linear-gradient(135deg,#f7fcff,#f4efff); font-size:.8em; color:var(--muted); line-height:1.5; }
.dark-mode .request-summary { border-color:#526983; background:linear-gradient(135deg,#182942,#28213e); }
.request-summary strong { color:var(--ink); }

.language-grid,.background-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:.85em; }
.language-card,.background-card { min-width:0; padding:1em; border:1px solid #7591af; border-radius:5px; background:color-mix(in srgb,var(--panel) 94%,white); cursor:pointer; text-align:left; }
.dark-mode .language-card,.dark-mode .background-card { background:#17263c; border-color:#607a9b; }
.language-card strong,.background-card strong { display:block; margin-bottom:.3em; }
.flag { font-size:2em; line-height:1; margin-bottom:.45em; }
.background-preview { height:82px; border-radius:4px; border:1px solid rgba(45,80,115,.35); margin-bottom:.55em; overflow:hidden; background-size:cover; background-position:center; }
.preview-morning { background:linear-gradient(180deg,#a8ddf6,#f3d2d8); }
.preview-afternoon { background:linear-gradient(180deg,#6ec8f2,#bdd2f6 66%,#e1c4e7); }
.preview-night { background:linear-gradient(180deg,#101b45,#364d8f 65%,#6f5f94); }
.preview-cat { background-image:url('cat-wallpaper.svg'); }
.preview-classic { background-image:url('classic-hills.svg'); }

.taskbar {
  position:absolute; z-index:50; left:0; right:0; bottom:0; height:var(--taskbar-h);
  display:flex; align-items:stretch; color:#fff;
  background:linear-gradient(var(--taskbar-1),var(--taskbar-2) 55%,var(--taskbar-3));
  border-top:1px solid rgba(255,255,255,.65); box-shadow:0 -2px 9px rgba(12,55,107,.22);
}
.start { width:122px; flex:0 0 122px; border:0; border-right:1px solid #18598d; color:#fff; font-weight:700; font-style:italic; cursor:pointer; background:linear-gradient(#6fbd6b,#2c8d3e 52%,#227537); text-shadow:1px 1px rgba(0,0,0,.4); }
.dark-mode .start { background:linear-gradient(#456d50,#234a32 55%,#173421); }
.taskbar-windows { flex:1; min-width:0; display:flex; gap:4px; padding:5px 7px; overflow-x:auto; scrollbar-width:none; }
.taskbar-windows::-webkit-scrollbar { display:none; }
.task-button { min-width:110px; max-width:190px; flex:0 1 190px; padding:0 9px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border:1px solid rgba(255,255,255,.26); border-radius:3px; color:#fff; text-align:left; cursor:pointer; background:linear-gradient(rgba(88,151,222,.74),rgba(30,92,168,.78)); font-size:10px; opacity:.82; }
.task-button:hover, .task-button:focus-visible { opacity:.95; }
.task-button.active { opacity:1; background:linear-gradient(rgba(41,109,189,.98),rgba(18,69,139,.98)); box-shadow:inset 1px 1px rgba(255,255,255,.22); }
.task-button.minimized { opacity:.48; }
.task-button.minimized:hover, .task-button.minimized:focus-visible { opacity:.66; }
.taskbar-clock { min-width:126px; display:flex; align-items:center; justify-content:center; padding:0 9px; text-align:center; font-size:10px; font-weight:600; background:rgba(13,79,166,.72); border-left:1px solid rgba(255,255,255,.2); }
.dark-mode .taskbar-clock { background:rgba(5,21,49,.78); }

@container (max-width: 620px) {
  .content { padding:18px 17px 22px; }
  .about { grid-template-columns:1fr; }
  .emblem { width:64px; height:64px; font-size:42px; }
}
@container (max-width: 470px) {
  .section-title { font-size:1.45em; }
  .card { min-height:auto; }
  .lead-panel { padding:.72em; }
}

@media (max-width: 980px) {
  .window-stack { left:120px; right:7px; top:54px; }
  .shortcuts { left:5px; width:108px; grid-template-columns:repeat(2,52px); top:58px; gap:8px 2px; }
  .shortcuts span { width:34px; height:31px; font-size:23px; }
  .shortcuts button { font-size:8px; }
}
@media (max-width: 700px) {
  .brandmark { top:12px; left:12px; }
  .shortcuts { display:none; }
  .window-stack { left:5px; right:5px; top:48px; bottom:calc(var(--taskbar-h) + 5px); }
  .window { min-width:280px; min-height:280px; --window-width:100%; --window-height:100%; }
  .start { width:100px; flex-basis:100px; }
  .taskbar-clock { min-width:106px; font-size:9px; }
  .task-button { min-width:84px; max-width:120px; }
}

/* v0.3 consolidated accessibility + desktop refinements */
.shortcuts-left {
  left: 14px;
  right: auto;
  grid-template-columns: repeat(2, 72px);
  width: 151px;
}
.shortcuts-right {
  left: auto;
  right: 14px;
  grid-template-columns: 72px;
  width: 76px;
}
.window-stack { left: 169px; right: 104px; }

/* Smooth sea. The sun and moon live behind these layers. */
.sea-layer {
  left: -3vw;
  width: 106vw;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: 100% 100% !important;
  clip-path: none !important;
  filter: drop-shadow(0 -4px 14px rgba(255,255,255,.18));
}
.sea-back { bottom: 9vh; height: 32vh; opacity: .74; background-image: url('wave-back.svg') !important; }
.sea-mid { bottom: 3vh; height: 28vh; opacity: .84; background-image: url('wave-mid.svg') !important; }
.sea-front { bottom: 0; height: 23vh; opacity: .92; background-image: url('wave-front.svg') !important; }

.celestial {
  position:absolute;
  z-index:-4;
  pointer-events:none;
  border-radius:50%;
  opacity:0;
  transition: opacity .3s ease, inset .3s ease, transform .3s ease;
}
.sun {
  width:116px;
  height:116px;
  background:radial-gradient(circle at 42% 38%,#fffbd6 0 25%,#ffd98d 48%,rgba(255,188,113,.62) 66%,rgba(255,194,132,0) 72%);
  box-shadow:0 0 48px rgba(255,208,139,.62);
}
.moon {
  width:68px;
  height:68px;
  background:radial-gradient(circle at 37% 33%,#fff 0 20%,#e9efff 54%,#cfdaf5 100%);
  box-shadow:0 0 34px rgba(220,231,255,.45);
}
.desktop[data-background="auto"][data-scene="morning"] .sun,
.desktop[data-background="morning"] .sun {
  opacity:.96;
  left:20vw;
  bottom:23vh;
}
.desktop[data-background="auto"][data-scene="afternoon"] .sun,
.desktop[data-background="afternoon"] .sun {
  opacity:.92;
  right:16vw;
  top:10vh;
}
.desktop[data-background="auto"][data-scene="night"] .moon,
.desktop[data-background="night"] .moon {
  opacity:.92;
  right:14vw;
  top:11vh;
}
.desktop[data-background="morning"],
.desktop[data-background="auto"][data-scene="morning"] {
  background:linear-gradient(180deg,#91d1f2 0%,#cbe9f8 45%,#f6d9d5 74%,#f0c3c9 100%);
}
.desktop[data-background="afternoon"],
.desktop[data-background="auto"][data-scene="afternoon"] {
  background:linear-gradient(180deg,#61c0ee 0%,#92d7f7 46%,#c6d8f4 75%,#e4cde5 100%);
}
.desktop[data-background="night"],
.desktop[data-background="auto"][data-scene="night"] {
  background:linear-gradient(180deg,#0b1539 0%,#193768 44%,#3d4e88 74%,#665d8f 100%);
}

/* Real-photo and public-domain art wallpaper options. */
.desktop[data-background="cat"] {
  background-image:
    linear-gradient(rgba(13,28,49,.06),rgba(13,28,49,.12)),
    url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Gato_%28Dominio_P%C3%BAblico%29.jpg/960px-Gato_%28Dominio_P%C3%BAblico%29.jpg');
  background-size:cover,cover;
  background-position:center,center;
}
.desktop[data-background="greatwave"] {
  background-color:#d9d0b9;
  background-image:url('https://upload.wikimedia.org/wikipedia/commons/1/15/The_Great_Wave_off_Kanagawa.png');
  background-size:cover;
  background-position:center;
}
.desktop[data-background="cat"] .sea-layer,
.desktop[data-background="classic"] .sea-layer,
.desktop[data-background="greatwave"] .sea-layer,
.desktop[data-background="cat"] .celestial,
.desktop[data-background="classic"] .celestial,
.desktop[data-background="greatwave"] .celestial { opacity:0 !important; }
.preview-cat {
  background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Gato_%28Dominio_P%C3%BAblico%29.jpg/960px-Gato_%28Dominio_P%C3%BAblico%29.jpg') !important;
  background-size:cover;
  background-position:center;
}
.preview-greatwave {
  background-image:url('https://upload.wikimedia.org/wikipedia/commons/1/15/The_Great_Wave_off_Kanagawa.png');
  background-size:cover;
  background-position:center;
}
.preview-morning {
  background:
    radial-gradient(circle at 24% 78%,#fffbd8 0 12%,#ffd89e 13% 20%,transparent 21%),
    linear-gradient(180deg,#91d1f2,#cbe9f8 52%,#f3d1d1);
}

/* Window responsive type. Text scales with window size and then with the 3-level accessibility zoom. */
.window {
  --zoom-scale: 1;
  --resize-scale: 1;
  --content-scale: calc(var(--zoom-scale) * var(--resize-scale));
}
.content { font-size: calc(14px * var(--content-scale)); }
.hero { font-size: 4em; }

.zoom-controls .window-control { width:29px; }
.mag-icon {
  position:relative;
  width:13px;
  height:13px;
  border:1.8px solid currentColor;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:9px;
  line-height:1;
}
.mag-icon::after {
  content:"";
  position:absolute;
  width:6px;
  height:2px;
  right:-5px;
  bottom:-2px;
  border-radius:2px;
  background:currentColor;
  transform:rotate(45deg);
  transform-origin:center;
}
.mag-icon i { font:700 9px/1 Arial,sans-serif; font-style:normal; transform:translateY(-.3px); }

/* Container-driven reflow keeps cards readable as the actual window changes size. */
@container (max-width: 700px) {
  .grid, .grid.two, .lead-layout, .language-grid, .background-grid { grid-template-columns:1fr 1fr; }
}
@container (max-width: 520px) {
  .grid, .grid.two, .lead-layout, .language-grid, .background-grid, .checkgrid, .contact-grid { grid-template-columns:1fr; }
  .hero { font-size:3.1em; }
}

@media (max-width: 1180px) {
  .window-stack { right:88px; }
  .shortcuts-right { right:5px; }
}
@media (max-width: 980px) {
  .window-stack { left:120px; right:78px; top:54px; }
  .shortcuts-left { left:5px; width:108px; grid-template-columns:repeat(2,52px); top:58px; gap:8px 2px; }
  .shortcuts-right { right:2px; width:68px; grid-template-columns:1fr; top:58px; gap:8px; }
  .shortcuts-right span { width:34px; height:31px; font-size:23px; }
  .shortcuts-right button { font-size:8px; }
}
@media (max-width: 700px) {
  .shortcuts-left,.shortcuts-right { display:none; }
  .window-stack { left:5px; right:5px; }
}