/* Northwoods Computer Guy: a working 2001-era desktop for a 2026 customer.
   Rolling green hill for a ground, Luna-blue title bars, a green start button, silver-beige chrome,
   white reading surfaces. The chrome is small and authentic; everything you read is large.
   Original artwork throughout: no Microsoft logos, icons or trademarks. */

:root {
  --ui: Tahoma, "Segoe UI", Verdana, "DejaVu Sans", sans-serif;
  --title: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
  --mono: "Lucida Console", Consolas, "DejaVu Sans Mono", monospace;
  --topbar: 52px;
  --taskbar: 46px;
  --luna: #0a4fe0;
  --luna-dark: #0831d9;
  --luna-light: #3d95ff;
  --beige: #ece9d8;
  --beige-dark: #d4d0c0;
  --ink: #111;
  --link: #0033cc;
  --heading: #0a3a9a;
  --green: #3c9a2b;
  --gutter: clamp(12px, 3vw, 28px);
  --read: 1.125rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
html.big { --read: 1.4rem; }

body {
  margin: 0;
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  background: #3a78c8 url("../img/hill.jpg") center bottom / cover no-repeat fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #316ac5; color: #fff; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); }
:focus-visible { outline: 2px dotted #000; outline-offset: 2px; box-shadow: 0 0 0 4px #fff; }
[tabindex="-1"]:focus { outline: 0; box-shadow: none; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -80px; z-index: 2000; background: #fff; color: #000; padding: 10px 16px; border: 2px solid #000; }
.skip:focus { top: 8px; }

/* ================= top navigation bar ================= */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--topbar); z-index: 800;
  display: flex; align-items: center; gap: 8px 18px; padding: 0 var(--gutter);
  background: linear-gradient(180deg, #3d95ff 0%, #0a58ee 6%, #0a4fe0 50%, #0840c4 100%);
  border-bottom: 2px solid #062a8e; color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.topbar a { color: #fff; text-decoration: none; }
.topbar__brand { display: flex; align-items: center; gap: 8px; font: 700 18px/1 var(--title); text-shadow: 1px 1px #0b2b8a; white-space: nowrap; }
.topbar__brand img { background: #fff; border-radius: 50%; }
.topbar__nav { flex: 1; min-width: 0; }
.topbar__nav ul { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.topbar__nav a { display: block; padding: 8px 10px; border-radius: 4px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.topbar__nav a:hover { background: #ffffff33; }
.topbar__nav a[aria-current="page"] { background: #fff; color: #0a3a9a; text-shadow: none; }
.topbar__info { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; white-space: nowrap; }
.topbar__call { background: #3c9a2b; border: 1px solid #1d6a10; border-radius: 4px; padding: 6px 12px; font-weight: 700; font-size: 15px; text-shadow: 1px 1px #124a08; }
.topbar__call:hover { background: #4cb23a; }
.led { width: 11px; height: 11px; border-radius: 50%; flex: none; background: #b9b9b9; border: 1px solid #00000066; }
.led[data-state="open"] { background: #5ee07a; box-shadow: 0 0 4px #5ee07a; }
.led[data-state="appt"] { background: #ffd34d; }
.topbar__info #open-status { display: none; }
@media (min-width: 1640px) { .topbar__info #open-status { display: inline; } }
@media (max-width: 900px) {
  :root { --topbar: auto; }
  .topbar { position: sticky; top: 0; flex-wrap: wrap; padding-block: 6px; }
  .topbar__brand { font-size: 14.5px; gap: 6px; }
  .topbar__brand img { width: 28px; height: 28px; }
  .topbar__call { padding: 5px 9px; font-size: 14px; }
  .topbar__nav { order: 3; flex: 1 1 100%; }
  .topbar__nav a { padding: 6px 8px; font-size: 13.5px; }
  .topbar__info { margin-left: auto; }
}

/* ================= desktop (home) ================= */
.desk { position: relative; padding-top: var(--topbar); }
.xp--desktop .desk { position: fixed; inset: 0 0 var(--taskbar) 0; padding: 0; overflow: hidden; }
.icons {
  position: absolute; z-index: 1; top: calc(var(--topbar) + 12px); left: 10px; bottom: 6px;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 98px); grid-auto-columns: 100px;
  gap: 2px 6px; margin: 0; padding: 0; list-style: none; align-content: start;
}
.icons li { margin: 0; }
.dicon {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100px; padding: 6px 2px 4px;
  color: #fff; text-decoration: none; text-align: center; font-size: 13px; line-height: 1.2;
  text-shadow: 1px 1px 2px #000, 0 0 3px #000; border: 1px solid transparent; border-radius: 2px;
}
.dicon svg { width: 48px; height: 48px; filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.5)); }
.dicon span { padding: 1px 3px; word-break: break-word; }
.dicon:hover, .dicon:focus-visible { background: #316ac566; border-color: #ffffff55; outline: 0; box-shadow: none; }
.dicon:focus-visible span { background: #316ac5; outline: 1px dotted #fff; }
.dicon:active { background: #316ac5aa; }

.windows { position: absolute; inset: var(--topbar) 0 0 0; z-index: 2; pointer-events: none; }
.windows > .win { pointer-events: auto; }

/* ================= windows ================= */
.win {
  display: flex; flex-direction: column; background: #0a4fe0; padding: 0 4px 4px; border-radius: 9px 9px 0 0;
  box-shadow: 0 0 0 1px #00138c, 6px 12px 28px rgba(0, 0, 0, 0.5);
  color: var(--ink);
}
.win:not(.is-active) { background: #6f8fdc; box-shadow: 0 0 0 1px #3b4f95, 4px 8px 20px rgba(0, 0, 0, 0.35); }
.win__title {
  display: flex; align-items: center; gap: 7px; min-height: 34px; margin: 0 -4px; padding: 3px 5px 3px 8px;
  border-radius: 8px 8px 0 0; color: #fff; user-select: none; touch-action: none;
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0063f4 92%, #003dd7 100%);
}
.win:not(.is-active) .win__title { background: linear-gradient(180deg, #7697e7 0%, #7e9ee3 8%, #94afe8 14%, #7c9fe2 40%, #7b99e1 88%, #abbae3 100%); }
.win__icon { width: 20px; height: 20px; flex: none; }
.win__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/1.1 var(--title); text-shadow: 1px 1px #0f1089; }
.win__btns { display: flex; gap: 3px; flex: none; }
.wb {
  width: 28px; height: 28px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid #fff; border-radius: 4px; text-decoration: none; color: #fff;
  background: radial-gradient(circle at 30% 25%, #7fb0ff 0%, #2a68e8 45%, #1a4fc4 100%);
}
.wb:hover { filter: brightness(1.12); }
.wb svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: square; }
.wb--close { background: radial-gradient(circle at 30% 25%, #f7b49a 0%, #e0562c 45%, #b8330f 100%); }
.win__client { flex: 1; min-height: 0; background: #fff; overflow: auto; position: relative; }
.win__client iframe, .win__client > iframe { display: block; width: 100%; height: 100%; margin: 0; border: 0; background: #fff; }
.win__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 5px 8px; background: var(--beige); border-bottom: 1px solid #aca899; }
.win__status { display: flex; justify-content: space-between; gap: 12px; padding: 3px 10px; background: var(--beige); border-top: 1px solid #aca899; font-size: 12px; color: #333; }
.addr { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.addr__label { color: #555; font-size: 13px; }
.addr__box { flex: 1; min-width: 0; padding: 4px 8px; background: #fff; border: 1px solid #7f9db9; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* floating windows on the home desktop */
.win--float { position: absolute; resize: both; overflow: hidden; min-width: 300px; min-height: 180px; }
.win--float.is-min { display: none; }
.win--float.is-max { inset: 0 0 0 0 !important; width: auto !important; height: auto !important; resize: none; border-radius: 0; }
#win-welcome { left: 250px; top: 20px; width: min(700px, calc(100% - 290px)); height: min(640px, calc(100% - 40px)); }
#win-reviews { right: 34px; top: 20px; width: min(430px, calc(100% - 1010px)); min-width: 340px; height: 370px; }
@media (max-width: 1420px) { #win-welcome { width: min(730px, calc(100% - 620px)); } #win-reviews { width: 340px; } }
.win--float .banner { padding: 16px 22px; }
.win--float .banner h1 { font-size: 2.3rem; margin-bottom: 0.3rem; }
.win--float .banner .lede { font-size: 1.1rem; margin-bottom: 0; }
.win--float .readout blockquote { font-size: 1.2rem; }
.win--float.dragging iframe, .win--float.dragging .win__client { pointer-events: none; }

/* a page shown as a window */
.win--page { max-width: 1060px; margin: 20px auto 80px; }
.xp--page .desk { padding: calc(var(--topbar) + 14px) var(--gutter) 70px; }
.win--page .win__client { overflow: visible; }

/* ================= taskbar, start, tray ================= */
.taskbar {
  position: fixed; inset: auto 0 0 0; height: var(--taskbar); z-index: 900; display: flex; align-items: stretch;
  background: linear-gradient(180deg, #245edb 0%, #3f8cf3 6%, #2a6ee8 12%, #245edb 55%, #1c4fc0 92%, #1941a5 100%);
  border-top: 1px solid #0c3ea6; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
}
.start {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 26px 0 10px; border: 0; cursor: pointer; color: #fff;
  font: italic 700 24px/1 var(--title); text-shadow: 1px 2px 2px #0b3d06; letter-spacing: 0.5px;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(180deg, #66c254 0%, #3c9a2b 14%, #2f8a22 55%, #3c9a2b 90%, #2c7a20 100%);
  box-shadow: inset -3px 0 4px rgba(0, 0, 0, 0.35), inset 0 2px 2px rgba(255, 255, 255, 0.4), 2px 0 4px rgba(0, 0, 0, 0.4);
}
.start img { background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.start:hover { filter: brightness(1.1); }
.start[aria-expanded="true"] { filter: brightness(0.9); box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.5); }
.tasks { flex: 1; min-width: 0; display: flex; gap: 3px; align-items: center; padding: 0 8px; overflow: hidden; }
.task {
  flex: 0 1 200px; min-width: 56px; height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 10px;
  color: #fff; font: 13px/1 var(--ui); text-align: left; cursor: pointer;
  border: 1px solid #0b3a9a; border-radius: 4px; background: linear-gradient(180deg, #4f94f7 0%, #2f6ee6 55%, #2860d6 100%);
  box-shadow: inset 0 1px 1px #ffffff55;
}
.task svg { width: 20px; height: 20px; flex: none; }
.task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task:hover { filter: brightness(1.1); }
.task.is-active { background: linear-gradient(180deg, #1a4fc0 0%, #1e5bd6 100%); box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.5); font-weight: 700; }
.tray {
  display: flex; align-items: center; gap: 2px; padding: 0 12px 0 10px; color: #fff;
  background: linear-gradient(180deg, #0c59b9 0%, #139ee9 8%, #18b5f2 12%, #139ee9 18%, #1290e8 55%, #0f7fe0 90%, #0b5dc0 100%);
  border-left: 1px solid #1042af; box-shadow: inset 1px 0 1px #18bbff;
}
.tray__btn { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 3px; background: transparent; cursor: pointer; }
.tray__btn svg { width: 20px; height: 20px; }
.tray__btn:hover { background: #ffffff33; border-color: #ffffff55; }
.clock { height: 32px; padding: 0 8px; margin-left: 4px; color: #fff; font: 14px/1 var(--ui); background: transparent; border: 1px solid transparent; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.clock:hover { background: #ffffff33; border-color: #ffffff55; }
@media (max-width: 640px) { .task span { display: none; } .task { flex: 0 0 44px; justify-content: center; padding: 0; } .start { padding-right: 16px; } .tray { padding: 0 6px; } }

/* start menu */
.start-menu {
  position: fixed; left: 0; bottom: var(--taskbar); z-index: 950; width: min(440px, 100vw);
  border: 2px solid #0a3bb0; border-bottom: 0; border-radius: 10px 10px 0 0; overflow: hidden; background: #fff;
  box-shadow: 4px -4px 16px rgba(0, 0, 0, 0.45);
}
.start-menu[hidden], .clock-pop[hidden], .balloon[hidden] { display: none; }
.start-menu__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: #fff; font: 700 18px/1.1 var(--title); text-shadow: 1px 1px #0b2b8a; background: linear-gradient(180deg, #1c63e8 0%, #0a4fe0 50%, #0a43c6 100%); }
.start-menu__head img { background: #fff; border-radius: 6px; border: 2px solid #ffffffaa; }
.start-menu__cols { display: grid; grid-template-columns: 1.15fr 1fr; }
.start-menu ul { margin: 0; padding: 6px 0; list-style: none; }
.start-menu__left { background: #fff; }
.start-menu__right { background: #d3e5fa; border-left: 1px solid #95bdee; }
.start-menu li { margin: 0; }
.start-menu .start-menu__sep { border-top: 1px solid #d3d3d3; margin-top: 4px; padding-top: 4px; }
.start-menu li > a, .start-menu li > button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; border: 0; background: none; text-align: left;
  font: 14px/1.2 var(--ui); color: #000; text-decoration: none; cursor: pointer;
}
.start-menu li > a:hover, .start-menu li > button:hover, .start-menu li > a:focus-visible, .start-menu li > button:focus-visible { background: #316ac5; color: #fff; outline: 0; box-shadow: none; }
.start-menu svg { width: 32px; height: 32px; flex: none; }
.start-menu b { display: block; font-weight: 700; }
.start-menu small { display: block; font-size: 12px; opacity: 0.75; }
.start-menu__foot { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding: 8px 10px; background: linear-gradient(180deg, #1c63e8, #0a43c6); }
@media (max-width: 520px) { .start-menu__cols { grid-template-columns: 1fr; } .start-menu__right { border-left: 0; border-top: 1px solid #95bdee; } .start-menu small { display: none; } }

/* clock flyout */
.clock-pop {
  position: fixed; right: 8px; bottom: calc(var(--taskbar) + 6px); z-index: 960; width: min(340px, calc(100vw - 16px));
  background: var(--beige); border: 2px solid #0a3bb0; border-radius: 8px 8px 0 0; box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.5);
}
.clock-pop__head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; color: #fff; font: 700 15px/1 var(--title); text-shadow: 1px 1px #0f1089; background: linear-gradient(180deg, #0997ff, #0053ee 10%, #0050ee 50%, #0066ff 90%, #003dd7); border-radius: 6px 6px 0 0; }
.clock-pop__x { width: 26px; height: 26px; padding: 0; font-size: 18px; line-height: 1; color: #fff; cursor: pointer; border: 1px solid #fff; border-radius: 4px; background: radial-gradient(circle at 30% 25%, #f7b49a, #e0562c 45%, #b8330f); }
.clock-pop__body { padding: 10px 12px 12px; font-size: 14px; }
.cal { width: 100%; border-collapse: collapse; text-align: center; margin-bottom: 8px; background: #fff; border: 1px solid #7f9db9; }
.cal th { padding: 3px 0; background: #d7e4f7; font-weight: 700; font-size: 12px; }
.cal td { padding: 3px 0; font-size: 13px; }
.cal td.is-today { background: #316ac5; color: #fff; font-weight: 700; }
.clock-pop__status { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
.clock-pop address { font-style: normal; margin: 6px 0 8px; }
.clock-pop__actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dotted #aca899; }
.hours li:last-child { border-bottom: 0; }
.hours span:last-child { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.hours--small li { padding: 3px 0; }

/* balloon tip */
.balloon {
  position: fixed; right: 54px; bottom: calc(var(--taskbar) + 14px); z-index: 940; max-width: 310px; padding: 10px 28px 10px 12px;
  background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 8px; box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.4); font-size: 14px;
}
.balloon::after { content: ""; position: absolute; right: 22px; bottom: -11px; width: 14px; height: 14px; background: #ffffe1; border: 1px solid #000; border-top: 0; border-left: 0; transform: rotate(45deg); }
.balloon strong { display: block; margin-bottom: 3px; }
.balloon p { margin: 0; }
.balloon__x { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; }

/* run dialog */
.run { padding: 0; border: 3px solid #0a4fe0; border-radius: 9px 9px 2px 2px; width: min(420px, calc(100vw - 24px)); background: var(--beige); color: #000; box-shadow: 6px 10px 26px rgba(0, 0, 0, 0.55); }
.run::backdrop { background: rgba(0, 20, 80, 0.25); }
.run .win__title { margin: 0; }
.run__body { padding: 12px 14px 14px; font-size: 14px; }
.run__row { display: flex; align-items: center; gap: 8px; }
.run__row input { flex: 1; padding: 7px 8px; font: 15px var(--ui); border: 1px solid #7f9db9; background: #fff; }
.run__msg { min-height: 1.4em; color: #a00; }
.run__btns { display: flex; justify-content: flex-end; gap: 8px; margin: 0; }

/* ================= Luna buttons ================= */
.xp-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 36px; padding: 6px 16px;
  font: 14px/1.2 var(--ui); color: #000; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, #fff 0%, #ecebe5 86%, #d6d0c5 100%);
  border: 1px solid #003c74; border-radius: 3px;
}
.xp-btn:hover { box-shadow: inset 0 0 0 2px #fcb73b; color: #000; }
.xp-btn:active { background: #d6d0c5; box-shadow: none; }
.xp-btn[aria-pressed="true"] { background: #e3e0d3; box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.3); }
.xp-btn--tool { min-height: 32px; padding: 4px 11px; font-size: 14px; flex-direction: row; gap: 5px; }
.xp-btn--go {
  color: #fff; font-weight: 700; text-shadow: 1px 1px 1px #124a08; border-color: #1d6a10;
  background: linear-gradient(180deg, #7fd568 0%, #3c9a2b 18%, #2f8a22 60%, #3c9a2b 100%);
}
.xp-btn--go:hover { color: #fff; box-shadow: inset 0 0 0 2px #fcb73b; }
.xp-btn--big { padding: 10px 24px; border-radius: 6px; align-items: flex-start; }
.xp-btn__small { font-size: 14px; font-weight: 700; }
.xp-btn__phone { font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem)/1.1 var(--title); }
.xp-progress { height: 22px; border: 2px solid #686868; border-radius: 4px; background: #fff; padding: 2px; max-width: 420px; }
.xp-progress span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #37d43f 0 10px, #fff 10px 13px); }

/* ================= reading surface ================= */
.win__client { font-size: var(--read); line-height: 1.6; padding: 0; }
.win--float .win__client, .win--page .win__client { padding: 0; }
.win__client > * { margin-inline: clamp(16px, 3vw, 32px); }
.win__client > *:first-child { margin-top: 0; }
.win__client > .banner { margin: 0; }
.win__client > .banner + * { margin-top: 1.4rem; }
.win__client > *:last-child { margin-bottom: clamp(18px, 3vw, 30px); }
.win__client p { margin-block: 0 1rem; max-width: 70ch; }
.win__client h1, .win__client h2, .win__client h3, .win__client h4 { font-family: var(--title); color: var(--heading); line-height: 1.15; }
.win__client h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-block: 1.6rem 0.6rem; }
.win__client h3 { font-size: 1.25rem; margin-block: 1.3rem 0.4rem; }
.win__client ul, .win__client ol { margin-block: 0 1rem; padding-left: 1.4rem; max-width: 70ch; }
.win__client .routes, .win__client .how, .win__client .gallery, .win__client .hours, .win__client .readout ol { padding-left: 0; max-width: none; }
.win__client li { margin-bottom: 0.4rem; }
.win__client a:not(.xp-btn):hover { color: #c01000; }
/* buttons keep their own text color on hover; only the outline changes */
.win__client a.xp-btn:hover { color: #000; }
.win__client a.xp-btn--go:hover { color: #fff; }
.win__client .xp-btn { color: #000; }
.win__client .xp-btn--go { color: #fff; }
.fineprint { font-size: 0.9rem; color: #444; }
.opt { font-weight: 400; color: #555; }

.banner {
  padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 32px); color: #fff;
  background: linear-gradient(180deg, #0a58ee 0%, #0a4fe0 55%, #0840c4 100%); border-bottom: 3px solid #f6a31b;
}
.banner h1 { margin: 0 0 0.5rem; color: #fff; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); text-shadow: 1px 2px 2px #062a8e; text-wrap: balance; }
.banner p { color: #fff; margin: 0 0 0.8rem; max-width: 60ch; }
.banner .lede { font-size: 1.2rem; }
.banner a { color: #ffe27a; }
.banner a:hover { color: #fff; }
.banner .xp-btn { color: #000; }
.banner .xp-btn--go { color: #fff; }
.banner .tools, .tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }

.notice { padding: 14px 18px; background: #ffffe1; border: 1px solid #000; border-radius: 6px; max-width: none; }
.notice h2 { margin: 0 0 0.4rem; font-size: 1.6rem; color: #000; }
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }
.notice--cta { margin-top: 2rem; }
.win__client > .notice { margin-top: 1.4rem; margin-bottom: 1rem; }
.taskpane { background: #d6dff7; border-radius: 6px 6px 0 0; margin: 1.2rem 0; max-width: 560px; }
.taskpane h4 { margin: 0; padding: 7px 12px; font-size: 1rem; color: #215dc6; background: linear-gradient(90deg, #fff 0%, #c6d3f7 100%); border-radius: 6px 6px 0 0; }
.taskpane > div { padding: 10px 14px 6px; border: 1px solid #fff; border-top: 0; }
.taskpane p { margin-bottom: 0.6rem; }
.group { padding: 12px 16px; border: 1px solid #b6b29d; border-radius: 5px; }

.routes { list-style: none; margin-top: 1.4rem; }
.routes li { margin: 0 0 8px; }
.route {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; text-decoration: none; color: #000;
  background: linear-gradient(180deg, #fff, #eef3fb); border: 1px solid #a9c1e8; border-radius: 6px; min-height: 68px;
}
.route svg { width: 46px; height: 46px; flex: none; }
.route__text b { display: block; font-size: 1.15rem; color: var(--heading); }
.route__text span { font-size: 0.95rem; color: #444; }
.route:hover, .route:focus-visible { background: #e3edfd; border-color: #316ac5; box-shadow: inset 0 0 0 1px #316ac5; color: #000; }
.route:hover b { text-decoration: underline; }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 1.2rem; }
.cta p { margin: 0; color: #444; font-size: 0.95rem; max-width: 30ch; }
.meet { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid #d0d0c0; }
.meet img { width: 150px; height: 200px; object-fit: cover; object-position: 40% 25%; border: 4px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
.meet h2 { margin-top: 0; }
@media (max-width: 560px) { .meet { grid-template-columns: 1fr; } .meet img { width: 170px; height: 226px; } }

.split { display: grid; gap: clamp(16px, 3vw, 32px); margin-top: 1.6rem; align-items: start; }
@media (min-width: 820px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .split--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.split h2 { margin-top: 0; }
.photo { margin: 0; }
.photo img { width: 100%; height: auto; border: 6px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.photo figcaption { margin-top: 8px; font-size: 0.95rem; color: #444; font-style: italic; }

.how { display: grid; gap: 0 2rem; list-style: none; margin-block: 0; max-width: none; }
.how li { padding: 0.9rem 0; border-top: 1px solid #c9c5b2; margin: 0; }
.how b { display: block; font: 700 1.2rem var(--title); color: var(--heading); }
.how p { margin: 0.1rem 0 0; }
@media (min-width: 820px) { .how { grid-template-columns: 1fr 1fr; } }
.h-icon, .svc h2 svg { display: inline-block; width: 34px; height: 34px; vertical-align: -9px; margin-right: 10px; }

.jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; margin-bottom: 0.4rem; }
.jump a { padding: 7px 13px; background: linear-gradient(#fff, #ecebe5); border: 1px solid #003c74; border-radius: 3px; color: #000; text-decoration: none; font-size: 15px; }
.jump a:hover { box-shadow: inset 0 0 0 2px #fcb73b; }
.svc { padding-bottom: 1.4rem; border-bottom: 1px solid #d0d0c0; }
.svc h2 { padding-bottom: 6px; border-bottom: 2px solid #f6a31b; }
.svc__cols { display: grid; gap: 0 2.4rem; }
@media (min-width: 880px) { .svc__cols { grid-template-columns: 1fr 1fr; } }
.svc ul, .svc ol { margin-bottom: 0.6rem; }

/* reviews */
.readout { padding: 16px 18px; background: #fff7d6; border: 2px solid #c9a227; border-radius: 8px; }
.win--float .readout { margin: 12px; border-radius: 6px; }
.win__client > .readout { margin-block: 1.4rem; }
.readout__screen { perspective: 900px; min-height: 8.5rem; position: relative; }
.readout ol { list-style: none; margin: 0; padding: 0; max-width: none; }
.readout li { margin: 0; padding: 0.3rem 0; }
.readout li + li { border-top: 1px dashed #c9a227; margin-top: 0.8rem; padding-top: 1rem; }
.readout blockquote { margin: 0; font: 1.35rem/1.35 var(--title); color: #222; max-width: none; }
.readout cite { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 0.7rem; font-style: normal; font-weight: 700; color: #6a4a00; font-size: 1rem; }
.stars { display: inline-flex; gap: 1px; }
.stars svg { width: 18px; height: 18px; }
.src { font-weight: 400; color: #5a4a20; }
.reviews { columns: 2 340px; column-gap: 1.6rem; margin-block: 1.4rem 0; }
.rev { break-inside: avoid; margin: 0 0 1.2rem; padding: 14px 16px; background: #fff7d6; border: 1px solid #c9a227; border-radius: 6px; }
.rev blockquote { margin: 0 0 0.6rem; font: 1.15rem/1.45 var(--title); color: #222; max-width: none; }
.rev blockquote p { margin-block: 0 0.7rem; }
.rev blockquote p:last-child { margin-bottom: 0; }
.rev__who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 0.98rem; color: #4a3a10; }
.sample { display: inline-block; margin-left: 0.5rem; padding: 0 6px; border: 1px solid currentColor; border-radius: 3px; font-size: 0.75rem; }
.readout--live li { display: none; margin: 0; border: 0; padding: 0; }
.readout--live li.is-on { display: block; transform-origin: 50% 0; animation: flip-in 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.readout--live li.is-off { display: block; transform-origin: 50% 0; animation: flip-out 0.35s cubic-bezier(0.7, 0, 0.84, 0) forwards; position: absolute; inset: 0 0 auto 0; }
@keyframes flip-in { from { transform: rotateX(-88deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }
@keyframes flip-out { from { transform: rotateX(0); opacity: 1; } to { transform: rotateX(88deg); opacity: 0; } }
.readout__bar { display: none; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #c9a227; }
.readout--live .readout__bar { display: flex; flex-wrap: wrap; }
.readout__count { font-size: 0.95rem; color: #6a4a00; font-variant-numeric: tabular-nums; }
.readout__btns { display: flex; gap: 6px; }

.map { width: 100%; aspect-ratio: 4 / 3; min-height: 280px; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); background: #dfe7f3; }
address { font-style: normal; }

/* steps */
.step { display: grid; gap: 14px 22px; padding-block: 1.6rem; border-top: 1px solid #c9c5b2; margin-top: 0; }
@media (min-width: 860px) { .step { grid-template-columns: 76px minmax(0, 1fr); } }
.step__num {
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; color: #fff; font: 700 2.2rem/1 var(--title);
  background: radial-gradient(circle at 30% 25%, #7fb0ff 0%, #2a68e8 50%, #0a43c6 100%); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); text-shadow: 1px 1px #062a8e;
}
.step h2 { margin-top: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.shot { display: flex; flex-wrap: wrap; gap: 12px; margin: 1rem 0; }
.shot img { max-width: min(100%, 520px); height: auto; border: 1px solid #7f9db9; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.say { padding: 12px 16px; background: #eef3fb; border: 1px solid #a9c1e8; border-radius: 6px; max-width: 70ch; }
.say p:last-child { margin-bottom: 0; }
.browsers { display: grid; gap: 8px; max-width: 760px; margin: 1rem 0; }
.win__client > .browsers { margin-inline: clamp(16px, 3vw, 32px); }
details.fold { border: 1px solid #7f9db9; border-radius: 6px; background: #fff; overflow: hidden; }
details.fold > summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 52px; list-style: none; cursor: pointer; font-weight: 700; background: linear-gradient(90deg, #fff, #d6dff7); color: #215dc6; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "+"; margin-left: auto; font-size: 1.6rem; line-height: 1; }
details.fold[open] > summary::after { content: "\2013"; }
details.fold > summary img { width: 34px; height: 34px; }
.fold__hint { font-weight: 400; color: #444; font-size: 0.9rem; }
details.fold > div { padding: 10px 16px 6px; }

/* forms */
.form { display: grid; gap: 1.5rem; max-width: 760px; margin-top: 1.4rem; }
fieldset { border: 1px solid #b6b29d; border-radius: 5px; margin: 0; padding: 12px 16px 14px; min-width: 0; }
legend { font-weight: 700; font-size: 1.1rem; color: var(--heading); padding: 0 6px; }
.label { display: block; font-weight: 700; margin-bottom: 4px; }
.hint { color: #444; font-size: 0.95rem; margin: 0 0 0.5rem; }
.field { display: grid; gap: 2px; }
.row2 { display: grid; gap: 1.2rem; }
@media (min-width: 700px) { .row2 { grid-template-columns: 1fr 1fr; } }
input[type="text"], input[type="tel"], input[type="email"], textarea {
  width: 100%; font: 1.1rem var(--ui); color: #000; background: #fff; border: 1px solid #7f9db9; border-radius: 0; padding: 9px 10px; min-height: 46px;
}
textarea { min-height: 9rem; resize: vertical; }
input:focus-visible, textarea:focus-visible { outline: 2px solid #316ac5; outline-offset: 0; box-shadow: none; }
.choices { display: grid; gap: 6px 14px; }
@media (min-width: 700px) { .choices--2 { grid-template-columns: 1fr 1fr; } }
.choice { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px; background: #f6f6f1; border: 1px solid #c9c5b2; border-radius: 4px; cursor: pointer; font-size: 1.05rem; }
.choice:hover { background: #e6eefb; border-color: #7f9db9; }
.choice input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: #2a68e8; }
.terms { padding: 10px 16px; background: #f6f6f1; border: 1px solid #c9c5b2; border-radius: 4px; font-size: 1rem; }
.terms ol { margin: 0; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* pictures */
.gallery { list-style: none; margin-block: 1rem 0; max-width: none; display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery li { margin: 0; text-align: center; }
.thumb { display: block; padding: 6px; background: #fff; border: 1px solid #aca899; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); }
.thumb img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 28%; }
.thumb:hover, .thumb:focus-visible { border-color: #316ac5; box-shadow: 0 0 0 2px #316ac5; }
.gallery span { display: block; margin-top: 6px; font-size: 0.9rem; color: #333; }
.viewer { padding: 0; border: 3px solid #0a4fe0; border-radius: 9px 9px 2px 2px; width: min(960px, calc(100vw - 20px)); background: var(--beige); box-shadow: 6px 10px 30px rgba(0, 0, 0, 0.6); }
.viewer::backdrop { background: rgba(0, 10, 50, 0.55); }
.viewer .win__title { margin: 0; }
.viewer__pic { margin: 0; padding: 10px; background: #fff; text-align: center; }
.viewer__pic img { margin: 0 auto; max-height: calc(100vh - 230px); width: auto; height: auto; max-width: 100%; }
.viewer__pic figcaption { margin-top: 8px; font-size: 1.1rem; }
.viewer__bar { display: flex; justify-content: center; gap: 8px; padding: 8px; }

/* Teddy */
.employee { width: 100%; border-collapse: collapse; margin: 1rem 0; background: #fff; border: 1px solid #7f9db9; font-size: 1rem; }
.employee caption { text-align: left; padding: 6px 10px; font: 700 1rem var(--title); color: #fff; background: linear-gradient(180deg, #3d95ff, #0a4fe0); }
.employee th, .employee td { padding: 6px 12px; text-align: left; border-bottom: 1px solid #dcd9c9; }
.employee th { width: 9rem; background: #eef3fb; }

/* Notepad */
.app__menu { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; margin: 0 !important; background: var(--beige); border-bottom: 1px solid #aca899; }
.win__client > .app { margin: 0; }
.app__menu { margin-inline: 0 !important; }
.notepad__text { display: block; width: 100%; min-height: 52vh; border: 0; border-bottom: 1px solid #aca899; padding: 12px 14px; font: 1.05rem/1.5 var(--mono); resize: vertical; background: #fff; color: #000; }
.notepad__text:focus-visible { outline: 0; box-shadow: none; background: #fffef6; }
.notepad__text.nowrap { white-space: pre; overflow-x: auto; }
.app__status { display: flex; justify-content: space-between; gap: 10px; padding: 3px 10px; font-size: 12px; background: var(--beige); border-bottom: 1px solid #aca899; }
.app .fineprint { margin: 10px clamp(16px, 3vw, 32px) 0; }

/* Recycle bin + monitor */
.monitor { max-width: 640px; margin: 1rem 0; }
.monitor__bezel { padding: 22px 22px 30px; background: linear-gradient(180deg, #e9e6d6, #b9b6a3); border: 2px solid #6d6a5c; border-radius: 16px 16px 8px 8px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
.monitor__bezel img { width: 100%; height: auto; border: 3px solid #1a1a1a; border-radius: 6px; box-shadow: inset 0 0 12px #000; }
.monitor__neck { width: 90px; height: 22px; margin: 0 auto; background: linear-gradient(90deg, #8e8b7c, #d7d4c4, #8e8b7c); }
.monitor__foot { width: 200px; height: 14px; margin: 0 auto; border-radius: 6px 6px 3px 3px; background: linear-gradient(#cfccbb, #8e8b7c); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.35); }

/* NCG Jukebox: stacked, frameless player panels (own design: brushed slate metal, green LCD, ridged title strips) */
.skin .win__client { background: #1b1d26; padding: 14px 0; }
.embed.skin, html.embed .skin { background: #1b1d26; }
.jb { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 420px; margin: 0 auto !important; color: #d8def0; }
.win__client > .jb { margin-inline: auto; }
.jb__panel { padding: 10px; background: linear-gradient(180deg, #3b4053, #262a38); border: 2px solid; border-color: #7a829b #0c0e15 #0c0e15 #7a829b; }
.jb .jb__title { margin: -10px -10px 10px; padding: 3px 8px; text-align: center; font: 700 11px/1.5 var(--ui); letter-spacing: 2px; text-transform: uppercase; color: #eef1ff; background: repeating-linear-gradient(180deg, #98a2c0 0 1px, #4b5372 1px 3px); border: 0; }
.jb__lcd { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 8px 10px; background: #050f0a; border: 2px solid; border-color: #0c0e15 #7a829b #7a829b #0c0e15; color: #7dff9b; font-family: var(--mono); }
.jb__time { font-size: 2.3rem; line-height: 1; letter-spacing: 2px; align-self: center; }
.jb__right canvas { width: 100%; height: 48px; background: #050f0a; }
.jb__meta { display: flex; gap: 10px; justify-content: flex-end; font-size: 11px; color: #4fbf74; }
.jb__marquee { grid-column: 1 / -1; overflow: hidden; white-space: nowrap; font-size: 1rem; border-top: 1px solid #0f3a1f; padding-top: 4px; }
.jb__marquee.is-long span { display: inline-block; padding-left: 100%; animation: jb-marquee 14s linear infinite; }
@keyframes jb-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.jb__progress { height: 8px; margin: 8px 0; background: #0c0e15; border: 1px solid #000; }
.jb__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2fe06a, #d6ff5a); }
.jb__sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.jb__sliders label { display: flex; align-items: center; gap: 8px; }
.jb__sliders input { flex: 1; min-width: 0; accent-color: #e5b94a; }
.jb__buttons, .jb__eqbar { display: flex; flex-wrap: wrap; gap: 5px; }
.jbtn { min-width: 40px; height: 40px; padding: 0 9px; display: grid; place-items: center; cursor: pointer; font: 700 12px var(--ui); letter-spacing: 1px; text-transform: uppercase; color: #eaeefc; background: linear-gradient(180deg, #747c99, #3d4359); border: 1px solid #0c0e15; box-shadow: inset 0 1px 0 #ffffff55; }
.jbtn svg { width: 18px; height: 18px; fill: #eaeefc; stroke: #eaeefc; stroke-width: 1.5; stroke-linejoin: round; }
.jbtn:hover { filter: brightness(1.18); }
.jbtn:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6); }
.jbtn--play { background: linear-gradient(180deg, #54d674, #1f8a3a); }
.jbtn[aria-pressed="true"] { background: linear-gradient(180deg, #f0d072, #c9a02a); color: #111; }
.jb__bands { display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; margin-top: 10px; }
.jb__band { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; color: #aab3d0; }
.jb__band input { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 66px; margin: 0; accent-color: #e5b94a; }
.jb__list { max-height: 150px; overflow-y: auto; margin: 0; padding: 0; list-style: none; max-width: none; background: #050f0a; border: 2px solid; border-color: #0c0e15 #7a829b #7a829b #0c0e15; }
.jb__list li { margin: 0; }
.jb__list button { font-size: 0.9rem; display: grid; grid-template-columns: 2.2em 1fr auto; gap: 6px; width: 100%; padding: 7px 10px; text-align: left; font: 0.95rem var(--mono); color: #7dff9b; background: none; border: 0; border-bottom: 1px solid #0e2c18; cursor: pointer; }
.jb__list button:hover { background: #0f3a1f; }
.jb__list li.is-now button { color: #fff; background: #1d6a3a; }
.win__client .jb__note { margin: 8px 0 0; font-size: 12px; color: #aab3d0; }

/* the Jukebox opens frameless on the desktop: its own thin title strip instead of the XP frame */
.win--skin { padding: 0; background: #14161d; border-radius: 2px; resize: none; box-shadow: 0 0 0 1px #000, 6px 10px 24px rgba(0, 0, 0, 0.6); }
.win--skin:not(.is-active) { background: #14161d; box-shadow: 0 0 0 1px #000, 4px 8px 18px rgba(0, 0, 0, 0.45); }
.win--skin .win__title, .win--skin:not(.is-active) .win__title { min-height: 22px; margin: 0; padding: 1px 4px 1px 8px; border-radius: 0; gap: 6px; background: repeating-linear-gradient(180deg, #98a2c0 0 1px, #4b5372 1px 3px); }
.win--skin:not(.is-active) .win__title { filter: brightness(0.7); }
.win--skin .win__icon, .win--skin .wb--max { display: none; }
.win--skin .win__text { flex: none; padding: 0 8px; font: 700 11px/18px var(--ui); letter-spacing: 2px; text-transform: uppercase; text-shadow: none; color: #eef1ff; background: #2e3346; }
.win--skin .win__title::after { content: ""; flex: 1; order: 1; }
.win--skin .win__btns { order: 2; }
.win--skin .wb { width: 18px; height: 16px; border: 1px solid #0c0e15; border-radius: 0; background: linear-gradient(180deg, #747c99, #3d4359); }
.win--skin .wb svg { width: 9px; height: 9px; }
.win--skin .win__client { background: #1b1d26; }
/* Solitaire */
.win__client > .sol { margin: 0; }
.sol { position: relative; background: #0b6b23; }
.sol__table { position: relative; margin: 0 !important; min-height: 440px; background: radial-gradient(ellipse at 50% 30%, #1a8a35 0%, #0b6b23 70%); touch-action: manipulation; user-select: none; }
.slot { position: absolute; width: var(--cw); height: var(--ch); display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: calc(var(--cw) * 0.08); background: rgba(0, 0, 0, 0.14); color: rgba(255, 255, 255, 0.4); }
.slot__ace { font: 700 calc(var(--cw) * 0.42) Georgia, serif; }
.slot__ring { width: 52%; aspect-ratio: 1; border: 6px solid rgba(255, 255, 255, 0.4); border-radius: 50%; }
.card { position: absolute; width: var(--cw); height: var(--ch); padding: 0; overflow: hidden; border: 1px solid #3a3a3a; border-radius: calc(var(--cw) * 0.08); background: #fff; box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.45); cursor: pointer; font-family: Georgia, "Times New Roman", serif; touch-action: none; }
.card svg { fill: currentColor; }
.card--red { color: #c61a1a; }
.card--black { color: #111; }
.card--back { display: grid; place-items: center; border: calc(var(--cw) * 0.05) solid #fff; background: repeating-linear-gradient(45deg, #2c66da 0 4px, #1a4cb8 4px 8px); }
.card--back img { width: 64%; height: auto; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #0d2f80; }
.card__idx { position: absolute; left: 5%; top: 3%; display: flex; flex-direction: column; align-items: center; line-height: 1; font-size: calc(var(--cw) * 0.23); }
.card__idx--ten b { letter-spacing: -0.12em; margin-right: 0.12em; font-size: 0.92em; }
.card__idx b { font-weight: 700; }
.card__idx svg { width: calc(var(--cw) * 0.17); height: calc(var(--cw) * 0.17); margin-top: 1px; }
.card__idx--r { left: auto; right: 5%; top: auto; bottom: 3%; transform: rotate(180deg); }
.card__body { position: absolute; inset: 12% 15%; }
.pip { position: absolute; width: calc(var(--cw) * 0.22); height: calc(var(--cw) * 0.22); translate: -50% -50%; }
.pip--flip { transform: rotate(180deg); }
.pip--ace { width: calc(var(--cw) * 0.5); height: calc(var(--cw) * 0.5); }
.court { position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid currentColor; background: #fffbe8; }
.card--red .court { color: #c8202a; }
.card--black .court { color: #1d3a8a; }
.corner { position: absolute; width: calc(var(--cw) * 0.17); height: calc(var(--cw) * 0.17); }
.corner--a { left: 3%; top: 3%; }
.corner--b { right: 3%; bottom: 3%; transform: rotate(180deg); }
.card.is-sel { outline: 3px solid #ffd34d; outline-offset: -3px; box-shadow: 0 0 0 2px #0006, 2px 4px 8px rgba(0, 0, 0, 0.5); }
.card.is-drag { pointer-events: none; cursor: grabbing; box-shadow: 5px 9px 16px rgba(0, 0, 0, 0.5); }
.card:focus-visible { outline: 3px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 5px #000; }
.sol__fx { position: absolute; z-index: 900; }
.sol__status { margin: 0 !important; }
.sol__dialog .run__body { color: #000; }
.sol__dialog ul { padding-left: 1.2rem; }
/* ===== page-drawn classic scrollbar (xpscroll.js): arrow buttons, blue grip thumb, beige track ===== */
html.xps-doc { scrollbar-width: none; }
html.xps-doc::-webkit-scrollbar, .xps__view::-webkit-scrollbar { display: none; width: 0; height: 0; }
.xps__view { scrollbar-width: none; }
html.xps-doc.xps-has-bar body { padding-right: 17px; }
.xpbar { display: flex; flex-direction: column; width: 17px; background: #f4f2e8; z-index: 1000; user-select: none; }
.xpbar[hidden] { display: none; }
.xpbar--page { position: fixed; right: 0; top: var(--topbar); bottom: var(--taskbar); }
.embed .xpbar--page { top: 0; bottom: 0; }
.xps__host { position: relative; flex: 1; min-height: 0; display: flex; }
.xps__host > .win__client { flex: 1; min-width: 0; }
.xps__host .xpbar { position: absolute; top: 0; right: 0; bottom: 0; }
.xps__host.has-bar > .win__client { margin-right: 17px; }
.xpbar__btn { position: relative; flex: none; width: 17px; height: 17px; padding: 0; border: 1px solid #4f6fc4; border-radius: 3px; background: linear-gradient(90deg, #d9e5ff 0%, #a9c1f6 60%, #8cadf0 100%); cursor: default; }
.xpbar__btn::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 0; height: 0; border-style: solid; border-color: transparent; }
.xpbar__btn--up::after { border-width: 0 4.5px 5px 4.5px; border-bottom-color: #4d6185; }
.xpbar__btn--down::after { border-width: 5px 4.5px 0 4.5px; border-top-color: #4d6185; }
.xpbar__btn:hover { filter: brightness(1.08); border-color: #fcb73b; }
.xpbar__btn.is-down { background: linear-gradient(90deg, #8cadf0, #a9c1f6); }
.xpbar__track { flex: 1; position: relative; min-height: 20px; background: linear-gradient(90deg, #e9e6d6 0%, #fdfcf6 50%, #e9e6d6 100%); border-inline: 1px solid #e1ddc8; }
.xpbar__thumb { position: absolute; left: 0; right: 0; top: 0; border: 1px solid #4f6fc4; border-radius: 3px; background: linear-gradient(90deg, #d9e5ff 0%, #b2c8f8 35%, #8cadf0 70%, #7195e6 100%); box-sizing: border-box; }
.xpbar__thumb::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 7px; translate: 0 -50%; background: repeating-linear-gradient(180deg, #fff 0 1px, #5b7bc6 1px 2px, transparent 2px 3px); opacity: 0.9; }
.xpbar__thumb:hover { filter: brightness(1.08); border-color: #fcb73b; }
.xpbar__thumb.is-down { filter: brightness(0.95); }
@media (max-width: 899px) { .xpbar--page { top: 0; } }

/* windows opened from the desktop: the page inside scrolls, the frame around it never does */
.win--app .win__client { overflow: hidden; }
.win--app .win__client > iframe { margin: 0 !important; height: 100%; }
html.embed { overflow-x: hidden; }
/* ===== Luna-style scrollbars (blue thumb with grip, arrow buttons, beige track) ===== */
::-webkit-scrollbar { width: 17px; height: 17px; }
::-webkit-scrollbar-track { background: #f4f2e8; border: 1px solid #e1ddc8; }
::-webkit-scrollbar-track:vertical { background: linear-gradient(90deg, #e9e6d6 0%, #fdfcf6 50%, #e9e6d6 100%); }
::-webkit-scrollbar-track:horizontal { background: linear-gradient(180deg, #e9e6d6 0%, #fdfcf6 50%, #e9e6d6 100%); }
::-webkit-scrollbar-thumb { border: 1px solid #4f6fc4; border-radius: 3px; background-color: #a9c1f6; background-repeat: no-repeat; background-position: center; }
::-webkit-scrollbar-thumb:vertical { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17'><path d='M4.500 6.500h8M4.500 8.500h8M4.500 10.500h8' stroke='%23fff' stroke-width='1.200'/><path d='M4.500 7.400h8M4.500 9.400h8M4.500 11.400h8' stroke='%235b7bc6' stroke-width='.8'/></svg>"), linear-gradient(90deg, #d9e5ff 0%, #b2c8f8 35%, #8cadf0 70%, #7195e6 100%); }
::-webkit-scrollbar-thumb:horizontal { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17'><path d='M6.500 4.500v8M8.500 4.500v8M10.500 4.500v8' stroke='%23fff' stroke-width='1.200'/><path d='M7.400 4.500v8M9.400 4.500v8M11.400 4.500v8' stroke='%235b7bc6' stroke-width='.8'/></svg>"), linear-gradient(180deg, #d9e5ff 0%, #b2c8f8 35%, #8cadf0 70%, #7195e6 100%); }
::-webkit-scrollbar-thumb:hover { filter: brightness(1.08); }
::-webkit-scrollbar-button:single-button { display: block; width: 17px; height: 17px; border: 1px solid #4f6fc4; border-radius: 3px; background-color: #a9c1f6; background-repeat: no-repeat; background-position: center; }
::-webkit-scrollbar-button:single-button:hover { filter: brightness(1.1); }
::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17'><path d='M4 10.5l4.500-4.500 4.500 4.500-1.500 1.500-3-3-3 3z' fill='%234d6185'/></svg>"), linear-gradient(90deg, #d9e5ff, #8cadf0); }
::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17'><path d='M4 6.500l1.500-1.500 3 3 3-3 1.500 1.500-4.500 4.500z' fill='%234d6185'/></svg>"), linear-gradient(90deg, #d9e5ff, #8cadf0); }
::-webkit-scrollbar-button:horizontal:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17'><path d='M10.500 4l-4.500 4.500 4.500 4.500 1.500-1.500-3-3 3-3z' fill='%234d6185'/></svg>"), linear-gradient(180deg, #d9e5ff, #8cadf0); }
::-webkit-scrollbar-button:horizontal:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17'><path d='M6.500 4l4.500 4.500-4.500 4.500-1.500-1.500 3-3-3-3z' fill='%234d6185'/></svg>"), linear-gradient(180deg, #d9e5ff, #8cadf0); }
::-webkit-scrollbar-corner { background: #ece9d8; }
@supports (-moz-appearance: none) { * { scrollbar-color: #8cadf0 #f4f2e8; } }
/* ===== sticky notes: five pastel papers ===== */
.sticky, .rev { --note: #fff7a8; --bar: #f0e268; }
.sticky[data-c="2"], .rev.n2 { --note: #cfe8ff; --bar: #9ccaf0; }
.sticky[data-c="3"], .rev.n3 { --note: #d6f5c9; --bar: #a5dc90; }
.sticky[data-c="4"], .rev.n4 { --note: #ffd6e6; --bar: #f3a6c6; }
.sticky[data-c="5"], .rev.n5 { --note: #ffe2bd; --bar: #f5bf7a; }
.sticky { position: absolute; right: 34px; top: 22px; z-index: 3; pointer-events: auto; width: min(350px, calc(100% - 1010px)); min-width: 320px; background: var(--note); box-shadow: 3px 6px 14px rgba(0, 0, 0, 0.45); font-family: "Segoe Print", "Comic Sans MS", var(--title); color: #222; }
.sticky__bar { cursor: move; touch-action: none; user-select: none; display: flex; align-items: center; min-height: 26px; padding: 0 12px; background: var(--bar); font: 700 13px/1 var(--ui); color: #3a3220; letter-spacing: 0.3px; }
.sticky__body { padding: 10px 16px 12px; }
.sticky .readout__screen { min-height: 9.5rem; margin: 0; }
.sticky ol { list-style: none; margin: 0; padding: 0; max-width: none; }
.sticky li { margin: 0; padding: 0; }
.sticky blockquote { margin: 0 0 0.6rem; font-size: 1.12rem; line-height: 1.4; max-width: none; color: #222; }
.sticky cite, .rev__who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: normal 700 0.95rem var(--ui); color: #3a3220; font-style: normal; }
.sticky cite .who { margin-right: 2px; }
.src { font-weight: 400; color: #54482a; }
.srcicon { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.sticky .readout__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(0, 0, 0, 0.25); }
.sticky .readout__count { font: 0.85rem var(--ui); color: #4a3f22; }
.note-btn { min-width: 38px; min-height: 36px; padding: 0 10px; font: 700 14px var(--ui); color: #222; cursor: pointer; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 3px; }
.note-btn:hover { background: #fff; }
.sticky__more { margin: 8px 0 0; font: 0.95rem var(--ui); }
.sticky a { color: #1a3a9a; }
.readout--live li { display: none; animation: none; }
.readout--live li.is-on { display: block; animation: none; transform: none; }
.reviews { columns: 2 340px; column-gap: 1.6rem; }
.reviews .rev { break-inside: avoid; margin: 0 0 1.4rem; padding: 0; background: var(--note); border: 0; border-radius: 0; box-shadow: 2px 4px 9px rgba(0, 0, 0, 0.3); }
.reviews .rev::before { content: ""; display: block; height: 22px; background: var(--bar); }
.reviews .rev blockquote { margin: 0; padding: 14px 18px 8px; font: 1.12rem/1.5 "Segoe Print", "Comic Sans MS", var(--title); color: #222; }
.reviews .rev blockquote p { margin-block: 0 0.7rem; }
.reviews .rev__who { padding: 0 18px 14px; margin: 0; }
.leave { margin-top: 2.4rem; padding-top: 1rem; border-top: 2px solid #f6a31b; }
.starpick { display: flex; flex-wrap: wrap; gap: 8px; }
.starpick label { cursor: pointer; }
.starpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.starpick span { display: block; padding: 10px 16px; min-height: 48px; line-height: 28px; background: #f6f6f1; border: 1px solid #c9c5b2; border-radius: 4px; font-size: 1.05rem; }
.starpick label:hover span { background: #e6eefb; border-color: #7f9db9; }
.starpick input:checked + span { background: #fff1a8; border-color: #c9a227; font-weight: 700; box-shadow: inset 0 0 0 2px #f6a31b; }
.starpick input:focus-visible + span { outline: 2px dotted #000; outline-offset: 2px; }

/* how to find me */
.findme { margin-top: 2rem; }
.findme h2 { margin-top: 0; }
.findme__steps { list-style: none; counter-reset: f; padding: 0; max-width: 70ch; }
.findme__steps li { counter-increment: f; position: relative; margin: 0 0 0.7rem; padding: 6px 0 6px 52px; }
.findme__steps li::before { content: counter(f); position: absolute; left: 0; top: 2px; width: 36px; height: 36px; display: grid; place-items: center; color: #fff; font: 700 1.2rem var(--title); border-radius: 50%; background: radial-gradient(circle at 30% 25%, #7fb0ff, #2a68e8 50%, #0a43c6); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); }
.map { min-height: 340px; }

/* recycle bin secrets */
.bin__found { margin-block: 1.2rem; }
.sauce { display: grid; gap: 18px; align-items: start; }
@media (min-width: 720px) { .sauce { grid-template-columns: 260px 1fr; } }
.sauce .photo img { max-height: 420px; width: auto; max-width: 100%; margin: 0 auto; }
.sauce__list { font-size: 1.15rem; }

/* Solitaire extras */
.sol__backpick { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.sol__backpick select { min-height: 32px; font: 14px var(--ui); border: 1px solid #003c74; border-radius: 3px; background: #fff; padding: 0 6px; }
.card--back { background-size: cover; }
.sol__table[data-back="teddy"] .card--back { background: url("/assets/img/backs/teddy.jpg") center / cover no-repeat; }
.sol__table[data-back="swing"] .card--back { background: url("/assets/img/backs/swing.jpg") center / cover no-repeat; }
.sol__table[data-back="teddy"] .card--back, .sol__table[data-back="swing"] .card--back, .sol__table[data-back="bsod"] .card--back { border: calc(var(--cw) * 0.05) solid #fff; }
.sol__table[data-back="bsod"] .card--back { background: #0a4fc0; display: block; padding: calc(var(--cw) * 0.07) calc(var(--cw) * 0.08); color: #fff; text-align: left; font-family: Consolas, "Lucida Console", monospace; overflow: hidden; }
.sol__table[data-back="bsod"] .card--back::before { content: ":("; display: block; font: 700 calc(var(--cw) * 0.27) / 1.05 Consolas, monospace; }
.sol__table[data-back="bsod"] .card--back::after { content: "Your card ran into a problem and needs to be flipped.\A\A FACE_DOWN"; display: block; margin-top: 6%; white-space: pre-line; overflow-wrap: anywhere; font-size: calc(var(--cw) * 0.088); line-height: 1.22; }
.card .card__body.card__body--court { inset: 5% 29%; display: flex; flex-direction: column; justify-content: space-between; }
.sol__table[data-back="matrix"] .card--back { background: #000 url("/assets/img/backs/matrix.jpg") center / cover no-repeat; border: calc(var(--cw) * 0.05) solid #fff; }
.unlock { max-width: 360px; }
.unlock__title { margin: 0 0 10px; font: 700 1.3rem/1.2 var(--title); color: #0a3a9a; text-align: center; }
.unlock__pic { width: 140px; height: auto; margin: 0 auto 12px; border: 4px solid #fff; border-radius: 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55); }.card__body--court .court--flip { transform: rotate(180deg); }
.card__body--court .court { position: static; display: block; flex: none; width: 100%; height: auto; aspect-ratio: 3 / 4; }
.pip { width: calc(var(--cw) * 0.2); height: calc(var(--cw) * 0.2); }
.pip--md { width: calc(var(--cw) * 0.18); height: calc(var(--cw) * 0.18); }
.pip--sm { width: calc(var(--cw) * 0.15); height: calc(var(--cw) * 0.15); }
.pip--ace { width: calc(var(--cw) * 0.5); height: calc(var(--cw) * 0.5); }
.card__body { inset: 10% 22%; }

@media (max-width: 1420px) { .sticky { width: 340px; right: 14px; } }
@media (max-width: 899px) { .sticky { position: relative; right: auto; top: auto; width: auto; min-width: 0; } }
/* ===== desktop backgrounds (Settings): day is the default in body above ===== */
html[data-bg="night"] body.xp { background-color: #06122e; background-image: url("../img/hill-night.jpg"); }
html[data-bg="fixed"] body.xp { background-color: #0a4fc0; background-image: url("../img/bg-fixed.jpg"); background-position: center center; }
html.embed[data-bg] body.xp { background: #fff; }

/* ===== Settings window ===== */
.setgroup { margin-top: 1.4rem; }
.setgroup h2 { margin-top: 0; }
.setrow { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #d0d0c0; max-width: 780px; }
.setrow p { margin: 2px 0 0; color: #444; font-size: 0.98rem; max-width: 52ch; }
.choice--inline { display: inline-flex; min-width: 190px; }
.bgfield { margin-top: 1.2rem; max-width: 780px; }
.bgpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.bgopt { position: relative; display: block; cursor: pointer; background: #f6f6f1; border: 2px solid #c9c5b2; border-radius: 4px; padding: 6px; }
.bgopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bgopt__pic { display: block; position: relative; aspect-ratio: 8 / 5; overflow: hidden; border: 1px solid #7f9db9; }
.bgopt__pic img { width: 100%; height: 100%; object-fit: cover; }
.bgopt__pic--auto img:last-child { position: absolute; inset: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.bgopt__name { display: block; margin-top: 6px; font-weight: 700; font-size: 1rem; }
.bgopt__name small { font-weight: 400; color: #444; }
.bgopt:hover { border-color: #7f9db9; background: #eef3fb; }
.bgopt:has(input:checked) { border-color: #316ac5; background: #e6eefb; box-shadow: inset 0 0 0 2px #316ac5; }
.bgopt:has(input:focus-visible) { outline: 2px dotted #000; outline-offset: 2px; }
.unlock-note { padding: 10px 14px; background: #ffffe1; border: 1px solid #000; border-radius: 6px; max-width: 60ch; }

/* ===== Teddy the greeter ===== */
.teddy { position: fixed; left: 0; bottom: calc(var(--taskbar) - 8px); z-index: 890; width: 150px; pointer-events: none; will-change: transform; }
.teddy__dog { display: block; width: 150px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.35)); }
.teddy__svg { width: 150px; height: auto; overflow: visible; }
.teddy__dog.is-left .teddy__svg { transform: scaleX(-1); }
.teddy__dog:focus-visible { outline: 2px dotted #000; outline-offset: 4px; box-shadow: none; }
.teddy__bubble { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0; width: max-content; max-width: min(260px, 80vw); padding: 10px 14px; background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 10px; box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.4); font: 15px/1.35 var(--ui); pointer-events: auto; }
.teddy__bubble.is-on { display: block; }
.teddy__bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; margin-left: -7px; background: #ffffe1; border: solid #000; border-width: 0 1px 1px 0; transform: rotate(45deg); }
.t-leg { transform-box: fill-box; transform-origin: 50% 8%; }
.teddy.is-run .t-leg--f1, .teddy.is-run .t-leg--b2 { animation: t-leg 0.26s ease-in-out infinite alternate; }
.teddy.is-run .t-leg--f2, .teddy.is-run .t-leg--b1 { animation: t-leg 0.26s ease-in-out infinite alternate-reverse; }
.t-tail { transform-box: fill-box; transform-origin: 90% 80%; animation: t-wag 0.34s ease-in-out infinite alternate; }
.t-tongue { transform-box: fill-box; transform-origin: 50% 0; animation: t-pant 0.4s ease-in-out infinite alternate; }
@keyframes t-leg { from { transform: rotate(-30deg); } to { transform: rotate(30deg); } }
@keyframes t-wag { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes t-pant { from { transform: scaleY(0.7); } to { transform: scaleY(1.15); } }
html.reduce *, html.reduce *::before, html.reduce *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { .teddy *, .teddy { animation: none !important; } }
.embed dialog .win__title { display: flex !important; }
@media print { .teddy { display: none !important; } }
/* ===== Settings window (dropdown + preview, OK / Cancel / Apply) ===== */
.setform { max-width: 820px; }
.setdisplay { display: grid; gap: 16px 28px; margin-top: 1rem; align-items: start; }
@media (min-width: 640px) { .setdisplay { grid-template-columns: minmax(0, 1fr) 260px; } }
.xp-select { display: block; width: 100%; max-width: 380px; min-height: 44px; padding: 6px 10px; font: 1.05rem var(--ui); color: #000; background: #fff; border: 1px solid #7f9db9; border-radius: 0; cursor: pointer; }
.xp-select:focus-visible { outline: 2px solid #316ac5; outline-offset: 0; box-shadow: none; }
.setdisplay .label { margin-bottom: 6px; }
.prevmon { margin: 0; text-align: center; }
.prevmon__bezel { padding: 12px 12px 16px; background: linear-gradient(180deg, #e9e6d6, #b9b6a3); border: 2px solid #6d6a5c; border-radius: 10px 10px 5px 5px; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4); }
.prevmon__bezel img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border: 2px solid #1a1a1a; background: #000; }
.prevmon__neck { width: 54px; height: 12px; margin: 0 auto; background: linear-gradient(90deg, #8e8b7c, #d7d4c4, #8e8b7c); }
.prevmon__foot { width: 120px; height: 8px; margin: 0 auto; border-radius: 4px 4px 2px 2px; background: linear-gradient(#cfccbb, #8e8b7c); }
.prevmon figcaption { margin-top: 6px; font-size: 0.9rem; color: #444; }
.setbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid #c9c5b2; }
.setbtns .xp-btn { min-width: 96px; }
.xp-btn:disabled { color: #8c8a80; border-color: #a9a79b; background: #f0efe6; cursor: default; box-shadow: none; }
.xp-btn:disabled:hover { box-shadow: none; }

/* ===== tray: Teddy switch, blinking network, volume ===== */
.tray__btn[aria-pressed="true"] { background: #ffffff2e; border-color: #ffffff77; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.45); }
.tray__btn[aria-pressed="false"] svg { opacity: 0.45; }
.tray__net svg { animation: net-blink 1.1s steps(1, end) infinite; }
@keyframes net-blink {
  0%   { --n1: #5fe070; --n2: #0b3a9a; }
  50%  { --n1: #0b3a9a; --n2: #5fe070; }
}
.vol-pop { position: fixed; right: 150px; bottom: calc(var(--taskbar) + 4px); z-index: 960; width: 230px; background: var(--beige); border: 2px solid #0a3bb0; border-radius: 8px 8px 0 0; box-shadow: 4px 6px 16px rgba(0, 0, 0, 0.5); }
.vol-pop[hidden] { display: none; }
.vol-pop__head { padding: 5px 10px; color: #fff; font: 700 14px/1.2 var(--title); text-shadow: 1px 1px #0f1089; background: linear-gradient(180deg, #0997ff, #0053ee 10%, #0050ee 50%, #0066ff 90%, #003dd7); border-radius: 6px 6px 0 0; }
.vol-pop__body { display: grid; gap: 10px; padding: 12px; font-size: 14px; }
.vol-pop input[type="range"] { width: 100%; accent-color: #2a68e8; }
.vol-pop__mute { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.vol-pop__mute input { width: 20px; height: 20px; }
@media (max-width: 640px) { .vol-pop { right: 8px; } }
.embed dialog .win__title { display: flex !important; }
@media print { .vol-pop { display: none !important; } }

/* ===== the home Welcome window: compact so it fits a shorter screen ===== */
#win-welcome { top: 14px; height: min(650px, calc(100% - 24px)); }
#win-welcome .win__client { font-size: 1rem; line-height: 1.45; }
#win-welcome .win__client > *:last-child { margin-bottom: 12px; }
#win-welcome .win__client > * { margin-inline: 20px; }
#win-welcome .win__client > .banner { margin-inline: 0; }
#win-welcome .cta p { max-width: none; flex: 1 1 190px; font-size: 0.92rem; line-height: 1.35; }
#win-welcome .banner { padding: 12px 20px 14px; }
#win-welcome .banner h1 { font-size: 1.75rem; margin: 0 0 0.25rem; }
#win-welcome .banner .lede { font-size: 1rem; margin: 0; }
#win-welcome .cta { margin-top: 0.8rem; gap: 8px 14px; }
#win-welcome .xp-btn--big { padding: 6px 18px; }
#win-welcome .xp-btn__phone { font-size: 1.55rem; }
#win-welcome .win__client > .routes, #win-welcome .routes { margin-top: 0.6rem; }
#win-welcome .routes li { margin-bottom: 5px; }
#win-welcome .route { padding: 5px 12px; min-height: 50px; gap: 10px; }
#win-welcome .route svg { width: 34px; height: 34px; }
#win-welcome .route__text b { font-size: 1.02rem; }
#win-welcome .route__text span { font-size: 0.88rem; }
#win-welcome .meet { grid-template-columns: 92px 1fr; gap: 12px; margin-top: 0.7rem; padding-top: 0.7rem; }
#win-welcome .meet img { width: 92px; height: 122px; }
#win-welcome .meet h2 { font-size: 1.2rem; margin: 0 0 0.2rem; }
#win-welcome .meet p { font-size: 0.95rem; margin-bottom: 0.4rem; }
/* ===== Recycle Bin as a Windows-Explorer-style folder ===== */
.explorer { margin: 0 !important; }
.win__client > .explorer { margin-inline: 0; }
.explorer__addr { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: var(--beige); border-bottom: 1px solid #aca899; font-size: 13px; }
.explorer__label { color: #555; }
.explorer__addr .addr__box { display: flex; align-items: center; gap: 6px; padding: 3px 8px; }
.explorer__addr svg { width: 18px; height: 18px; }
.explorer__body { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 300px; }
.pane { padding: 14px 12px; background: linear-gradient(180deg, #7ba2e7 0%, #6375d6 100%); display: grid; gap: 12px; align-content: start; }
.pane__box { background: #d6dff7; border-radius: 6px 6px 0 0; overflow: hidden; }
.pane__box h2 { margin: 0 !important; padding: 6px 10px; font: 700 13px/1.2 var(--ui) !important; color: #215dc6 !important; background: linear-gradient(90deg, #fff 0%, #c6d3f7 100%); }
.pane__box ul { list-style: none; margin: 0; padding: 8px 10px 10px; max-width: none; }
.pane__box li { margin: 0 0 3px; }
.pane__box button, .pane__box a { display: flex; align-items: center; gap: 7px; width: 100%; padding: 4px 2px; background: none; border: 0; font: 13px/1.25 var(--ui); color: #215dc6; text-align: left; text-decoration: none; cursor: pointer; }
.pane__box button:hover:not(:disabled), .pane__box a:hover { color: #428eff; text-decoration: underline; }
.pane__box button:disabled { color: #8c9ac0; cursor: default; }
.pane__box svg { width: 18px; height: 18px; flex: none; }
.pane__details { padding: 8px 10px 10px; font-size: 13px; color: #1b2a55; line-height: 1.4; }
.pane__details p { margin: 6px 0 0; }
.explorer__main { min-width: 0; background: #fff; padding-bottom: 6px; }
.explorer__scroll { overflow-x: auto; }
.explorer__scroll[hidden] { display: none; }
.bin__list { width: 100%; min-width: 600px; border-collapse: collapse; background: #fff; font-size: 0.95rem; }
.bin__list th { text-align: left; padding: 4px 10px; background: linear-gradient(180deg, #fff 0%, #ebeadb 100%); border: 1px solid #d0d0bf; border-top: 0; font-weight: 400; font-size: 13px; white-space: nowrap; }
.bin__list td { padding: 7px 10px; border-bottom: 1px solid #f0f0e6; font-size: 0.93rem; vertical-align: middle; }
.bin__list td:first-child { min-width: 240px; }
.bin__list svg { display: inline-block; width: 26px; height: 26px; vertical-align: -9px; margin-right: 6px; }
.bin__list tbody tr { cursor: default; }
.bin__list tbody tr:hover { background: #eef3fb; }
.bin__list tr.is-sel, .bin__list tr.is-sel:hover { background: #316ac5; color: #fff; }
.bin__list tr[hidden] { display: none; }
.bin__list tbody tr:focus-visible { outline: 1px dotted #000; outline-offset: -2px; box-shadow: none; }
.bin__msg { margin-top: 1rem; }
.win__client .explorer__main > .bin__msg, .win__client .explorer__main > .bin__progress { margin-inline: 14px; }
.explorer > .bin__found { margin-inline: clamp(16px, 3vw, 32px); }
.bin__fixed h2 { margin-top: 1rem; }
@media (max-width: 760px) { .explorer__body { grid-template-columns: 1fr; } }

/* ===== Matrix Guy overlay (Recycle Bin prank and the screen saver) ===== */
.matrix { position: fixed; inset: 0; z-index: 5000; background: #000; cursor: none; animation: matrix-in 0.25s ease-out; }
.matrix:not(.matrix--saver) { cursor: pointer; }
.matrix--out { opacity: 0; transition: opacity 0.25s; }
.matrix canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.matrix__note { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; max-width: calc(100vw - 32px); padding: 10px 18px; background: rgba(0, 20, 6, 0.88); border: 1px solid #1fdc5a; border-radius: 6px; color: #9dffb9; font: 700 clamp(14px, 2.2vw, 20px)/1.3 Consolas, "Lucida Console", monospace; text-align: center; text-shadow: 0 0 6px #1fdc5a; }
.matrix__note--alert { background: rgba(48, 0, 0, 0.92); border: 2px solid #ff3b3b; color: #ff9a9a; text-shadow: 0 0 8px #ff2020; animation: alert-blink 0.7s steps(1, end) infinite; }
.matrix__note--alert strong { font-size: 1.15em; letter-spacing: 0.04em; }
.matrix__note--alert small { font-weight: 400; opacity: 0.85; }
@keyframes alert-blink { 0%, 100% { box-shadow: 0 0 22px rgba(255, 40, 40, 0.75); } 50% { box-shadow: 0 0 0 rgba(255, 40, 40, 0); border-color: #7a1f1f; } }
html.reduce .matrix__note--alert { animation: none; }
@keyframes matrix-in { from { opacity: 0; } to { opacity: 1; } }
.msgbox { max-width: 460px; }
.msgbox__row { display: flex; gap: 14px; align-items: flex-start; }
.msgbox__icon { width: 44px; height: 44px; flex: none; }
.msgbox__title { margin: 0 0 8px !important; font: 700 1.25rem/1.2 var(--title); color: #0a3a9a; }
.msgbox p { margin: 0 0 0.7rem; font-size: 1rem; line-height: 1.4; }
.msgbox .run__btns { margin-top: 0.4rem; }
.secret-tag { margin-left: 8px; padding: 1px 8px; font: 700 12px var(--ui); color: #fff; background: #3c9a2b; border-radius: 10px; vertical-align: middle; }
.setcol { display: grid; gap: 6px; min-width: 220px; }
.setcol .label { margin: 4px 0 0; }
.embed dialog .win__title { display: flex !important; }
@media print { .matrix { display: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* ================= phones and small screens: the desktop becomes a stack of windows ================= */
@media (max-width: 899px) {
  .xp--desktop .desk { position: static; inset: auto; overflow: visible; padding: 14px var(--gutter) 70px; }
  .icons { position: static; display: grid; grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); grid-auto-columns: auto; margin: 0 0 16px; }
  .dicon { width: auto; }
  .windows { position: static; pointer-events: auto; display: grid; gap: 16px; }
  .win--float { position: relative; inset: auto !important; width: auto !important; height: auto !important; resize: none; overflow: visible; }
  .win--float .win__client { overflow: visible; }
  .win--float .wb--min, .win--float .wb--max { display: none; }
  .win--float.is-min { display: flex; }
  /* a page opened from an icon covers the screen, like a phone app */
  .win--app { position: fixed !important; inset: 0 0 var(--taskbar) 0 !important; width: auto !important; height: auto !important; z-index: 850 !important; border-radius: 0; resize: none; overflow: hidden; }
  .win--app.is-min { display: none; }
  .win--page { margin: 10px auto 70px; }
  .win--page .wb--min, .win--page .wb--max { display: none; }
  .addr { display: none; }
}

/* ================= embedded inside a desktop window ================= */
.embed body, html.embed body { background: #fff; min-height: 0; }
.embed .topbar, .embed .taskbar, .embed .start-menu, .embed .clock-pop, .embed .balloon, .embed .win__title, .embed .win__tools, .embed .win__status, .embed .skip { display: none !important; }
.embed .desk { padding: 0 !important; }
.embed .win--page { margin: 0; max-width: none; padding: 0; background: #fff; box-shadow: none; border-radius: 0; }
.embed .win__client { overflow: visible; }

/* ================= print (remote-access steps and forms must print cleanly) ================= */
.embed dialog .win__title { display: flex !important; }
@media print {
  body { background: #fff; font-size: 12pt; }
  .topbar, .taskbar, .start-menu, .clock-pop, .balloon, .icons, .win__tools, .win__status, .tools, .skip, .win__btns, .xp-btn--tool { display: none !important; }
  .desk { padding: 0 !important; }
  .win, .win--page { box-shadow: none; background: #fff; padding: 0; max-width: none; margin: 0; }
  .win__title { background: #fff; color: #000; text-shadow: none; border-bottom: 2px solid #000; }
  .win__text { color: #000; text-shadow: none; }
  .banner { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .banner h1, .banner p, .banner a { color: #000; text-shadow: none; }
  .step { break-inside: avoid; }
  .step__num { background: #fff; color: #000; border: 2px solid #000; box-shadow: none; text-shadow: none; }
  .xp-btn--go { background: #fff; color: #000; text-shadow: none; border-color: #000; }
  details.fold > div { display: block; }
  details.fold { break-inside: avoid; }
}