* {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
  --page-x: max(22px, calc((100% - 1180px) / 2));
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --page-bg: #f6fbff;
  --page-band: #eaf4fb;
  --text: #102331;
  --muted: #4c6574;
  --subtle: #5b7380;
  --surface: rgba(255, 255, 255, 0.76);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --surface-muted: rgba(224, 239, 250, 0.78);
  --border: rgba(66, 114, 150, 0.28);
  --border-strong: rgba(66, 114, 150, 0.48);
  --accent: #075bbd;
  --accent-2: #009d77;
  --accent-3: #d94b67;
  --error: #b42345;
  --accent-text: #ffffff;
  --shadow: 0 24px 70px rgba(22, 69, 98, 0.16);
  --shadow-tight: 0 12px 28px rgba(22, 69, 98, 0.12);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --control-height: 38px;
  --control-border: 1px solid var(--border);
  --control-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
  --texture:
    linear-gradient(90deg, rgba(7, 91, 189, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 157, 119, 0.04) 1px, transparent 1px);
  --texture-size: 34px 34px;
}

html[data-theme="liquid"] {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --page-bg: #f5f5f7;
  --page-band: #fbfbfd;
  --text: #1d1d1f;
  --muted: #60646c;
  --subtle: #6e6e73;
  --surface: rgba(255, 255, 255, 0.62);
  --surface-strong: rgba(255, 255, 255, 0.84);
  --surface-muted: rgba(245, 247, 251, 0.72);
  --border: rgba(29, 29, 31, 0.09);
  --border-strong: rgba(255, 255, 255, 0.78);
  --accent: #0066cc;
  --accent-2: #34c759;
  --accent-3: #ff375f;
  --error: #d70015;
  --shadow: 0 34px 90px rgba(29, 29, 31, 0.12), 0 8px 24px rgba(29, 29, 31, 0.06);
  --shadow-tight: 0 18px 44px rgba(29, 29, 31, 0.09), 0 1px 0 rgba(255, 255, 255, 0.80) inset;
  --radius-lg: 34px;
  --radius-md: 24px;
  --radius-sm: 14px;
  --control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 7px 18px rgba(29, 29, 31, 0.08);
}

html[data-theme="cde"] {
  color-scheme: light;
  --font-ui: Charter, Georgia, "Times New Roman", serif;
  --font-mono: Monaco, "Courier New", monospace;
  --page-bg: #7aaec2;
  --page-band: #c2c4ce;
  --text: #1a1a1a;
  --muted: #33404e;
  --subtle: #344550;
  --surface: #c2c4ce;
  --surface-strong: #e3e4e9;
  --surface-muted: #a8c7d1;
  --border: #5d6673;
  --border-strong: #ffffff;
  --accent: #193c51;
  --accent-2: #285f68;
  --accent-3: #9a3355;
  --error: #80152f;
  --accent-text: #ffffff;
  --shadow: 7px 7px 0 rgba(17, 27, 41, 0.38);
  --shadow-tight: 4px 4px 0 rgba(17, 27, 41, 0.36);
  --radius-lg: 2px;
  --radius-md: 2px;
  --radius-sm: 2px;
  --control-border: 2px solid var(--border);
  --control-shadow: 2px 2px 0 #182d37;
  --texture:
    linear-gradient(90deg, rgba(255, 244, 206, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 244, 206, 0.08) 1px, transparent 1px);
  --texture-size: 18px 18px;
}

html[data-theme="win95"] {
  color-scheme: light;
  --font-ui: Tahoma, "MS Sans Serif", Arial, sans-serif;
  --font-mono: "Courier New", monospace;
  --page-bg: #008080;
  --page-band: #c0c0c0;
  --text: #050505;
  --muted: #1f1f1f;
  --subtle: #333333;
  --surface: #c0c0c0;
  --surface-strong: #dfdfdf;
  --surface-muted: #a8a8a8;
  --border: #000000;
  --border-strong: #000000;
  --accent: #000080;
  --accent-2: #008080;
  --accent-3: #ff0080;
  --error: #800040;
  --accent-text: #ffffff;
  --shadow: 4px 4px 0 rgba(0, 0, 0, 0.38);
  --shadow-tight: 2px 2px 0 rgba(0, 0, 0, 0.35);
  --radius-lg: 0;
  --radius-md: 0;
  --radius-sm: 0;
  --control-border: 2px solid;
  --control-shadow: inset -2px -2px 0 #808080, inset 2px 2px 0 #ffffff;
  --texture:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
  --texture-size: 16px 16px;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--text);
  background-color: var(--page-bg);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background-image: var(--texture);
  background-size: var(--texture-size);
  opacity: 0.72;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 34%),
    linear-gradient(20deg, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 38%),
    var(--page-bg);
}

html[data-theme="liquid"] body::before {
  opacity: 0;
}

html[data-theme="liquid"] body::after {
  background:
    linear-gradient(180deg, #ffffff 0%, rgba(250, 251, 253, 0.96) 32%, rgba(239, 243, 249, 0.92) 100%),
    linear-gradient(90deg, rgba(0, 102, 204, 0.055), transparent 34%, rgba(52, 199, 89, 0.05) 100%);
}

html[data-theme="win95"] body::after {
  background: var(--page-bg);
}

html[data-theme="win95"] body::before {
  opacity: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
a.button {
  font: inherit;
  letter-spacing: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20;
  padding: 8px 12px;
  color: var(--accent-text);
  background: var(--accent);
  border: 2px solid var(--border-strong);
  transform: translateY(-140%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
  backdrop-filter: blur(18px);
}

html[data-theme="liquid"] .site-header {
  border-bottom-color: rgba(29, 29, 31, 0.08);
  background: rgba(251, 251, 253, 0.76);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
}

html[data-theme="cde"] .site-header,
html[data-theme="win95"] .site-header {
  backdrop-filter: none;
}

html[data-theme="win95"] .site-header {
  border-bottom: 2px solid #000000;
  box-shadow: inset 0 -2px 0 #808080;
}

.nav-shell {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
  padding: 0 var(--page-x);
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  text-decoration: none;
}

.brand-icon {
  display: block;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.brand-name {
  font-size: 1.08rem;
}

html[data-theme="liquid"] .brand-name {
  font-weight: 760;
  color: #1d1d1f;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  font-size: 0.94rem;
  color: var(--muted);
}

.nav-links a {
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--text);
}

html[data-theme="liquid"] .nav-links {
  font-size: 0.91rem;
  font-weight: 560;
}

html[data-theme="liquid"] .nav-links a {
  opacity: 0.78;
}

html[data-theme="liquid"] .nav-links a:hover {
  opacity: 1;
}

.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 4px;
  border: var(--control-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--control-shadow);
}

html[data-theme="liquid"] .theme-switcher {
  min-height: 40px;
  padding: 3px;
  border-color: rgba(29, 29, 31, 0.08);
  border-radius: 999px;
  background: rgba(235, 237, 242, 0.64);
  box-shadow: inset 0 1px 2px rgba(29, 29, 31, 0.06), 0 1px 0 rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  backdrop-filter: saturate(170%) blur(20px);
}

.switcher-label {
  padding: 0 9px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--subtle);
  text-transform: uppercase;
}

html[data-theme="liquid"] .switcher-label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 650;
  color: #6e6e73;
  text-transform: none;
}

.theme-switcher button {
  height: 30px;
  padding: 0 12px;
  color: var(--muted);
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) - 2px);
}

.theme-switcher button:focus {
  outline: none;
}

.theme-switcher button:focus-visible,
.button:focus-visible,
.nav-links a:focus-visible,
.brand:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 3px;
}

html[data-theme="liquid"] .theme-switcher button {
  height: 32px;
  padding: 0 14px;
  color: #5f6369;
  border-radius: 999px;
}

.theme-switcher button[aria-pressed="true"] {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--border-strong);
}

html[data-theme="liquid"] .theme-switcher button[aria-pressed="true"] {
  color: #1d1d1f;
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 12px rgba(29, 29, 31, 0.12), inset 0 1px 0 #ffffff;
}

html[data-theme="win95"] .theme-switcher button {
  color: #000000;
  border-radius: 0;
}

html[data-theme="win95"] .theme-switcher button[aria-pressed="true"] {
  color: #ffffff;
  background: #000080;
  box-shadow: inset -1px -1px 0 #ffffff, inset 1px 1px 0 #000000;
}

main {
  overflow: hidden;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 560px);
  align-items: center;
  gap: 56px;
  min-height: calc(86svh - 72px);
  padding: 58px var(--page-x) 44px;
}

html[data-theme="liquid"] .hero {
  position: relative;
  gap: 64px;
  min-height: calc(88svh - 72px);
  padding-top: 66px;
}

html[data-theme="liquid"] .hero::before {
  position: absolute;
  top: 18px;
  right: var(--page-x);
  left: var(--page-x);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(29, 29, 31, 0.08), transparent);
}

.hero-copy {
  min-width: 0;
  max-width: 670px;
}

.eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
}

html[data-theme="liquid"] .eyebrow {
  font-family: var(--font-ui);
  font-size: 0.94rem;
  font-weight: 660;
  color: #0066cc;
  text-transform: none;
}

.hero h1 {
  margin: 0;
  font-size: 5.4rem;
  line-height: 0.96;
  letter-spacing: 0;
}

html[data-theme="liquid"] .hero h1 {
  max-width: 760px;
  font-size: 6.2rem;
  font-weight: 820;
  color: #1d1d1f;
  text-wrap: balance;
}

html[data-theme="liquid"] .lede {
  max-width: 680px;
  color: #4c4f56;
  font-size: 1.33rem;
  line-height: 1.48;
}

.lede {
  max-width: 650px;
  margin: 24px 0 0;
  font-size: 1.28rem;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  border: var(--control-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--control-shadow);
}

html[data-theme="liquid"] .button {
  min-height: 46px;
  padding: 0 21px;
  font-weight: 720;
  border-color: rgba(29, 29, 31, 0.08);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 8px 20px rgba(29, 29, 31, 0.09);
}

.button.primary {
  color: var(--accent-text);
  background: var(--accent);
}

html[data-theme="liquid"] .button.primary {
  background: linear-gradient(180deg, #0071e3 0%, #0066cc 100%);
  border-color: rgba(0, 94, 214, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 13px 26px rgba(0, 102, 204, 0.24);
}

.button.secondary {
  color: var(--text);
  background: var(--surface-strong);
}

html[data-theme="liquid"] .button.secondary {
  background: rgba(255, 255, 255, 0.70);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
}

html[data-theme="win95"] .button,
html[data-theme="win95"] .theme-switcher {
  border-color: #ffffff #000000 #000000 #ffffff;
}

.hero-points {
  display: grid;
  gap: 9px;
  max-width: 700px;
  margin: 26px 0 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
}

.hero-points li {
  position: relative;
  padding-left: 22px;
}

.hero-points li::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 9px;
  height: 9px;
  content: "";
  background: var(--accent-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

html[data-theme="liquid"] .hero-points {
  gap: 10px;
  max-width: 660px;
  color: #5f6369;
}

html[data-theme="liquid"] .hero-points li {
  padding-left: 24px;
}

html[data-theme="liquid"] .hero-points li::before {
  top: 0.58em;
  width: 12px;
  height: 12px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.16) 42%, transparent 43%),
    linear-gradient(180deg, #44d76f, #30b95a);
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 3px 10px rgba(52, 199, 89, 0.22);
}

.product-stage {
  min-width: 0;
}

.desktop-placeholder {
  position: relative;
  min-height: 470px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 78%, transparent), color-mix(in srgb, var(--surface-muted) 84%, transparent)),
    var(--surface);
  box-shadow: var(--shadow);
}

html[data-theme="liquid"] .desktop-placeholder {
  overflow: hidden;
  min-height: 494px;
  padding: 68px 18px 104px;
  border-color: rgba(29, 29, 31, 0.10);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 249, 252, 0.78) 48%, rgba(237, 241, 248, 0.76) 100%),
    linear-gradient(120deg, rgba(0, 102, 204, 0.09), transparent 46%),
    rgba(255, 255, 255, 0.68);
  box-shadow: 0 38px 110px rgba(29, 29, 31, 0.16), 0 12px 30px rgba(29, 29, 31, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 0 0 1px rgba(255, 255, 255, 0.52);
  -webkit-backdrop-filter: saturate(185%) blur(34px);
  backdrop-filter: saturate(185%) blur(34px);
}

html[data-theme="liquid"] .desktop-placeholder::before {
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  content: "";
  border-radius: calc(var(--radius-lg) - 1px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, transparent 29%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.40) 0%, transparent 31%, rgba(255, 255, 255, 0.18) 72%, transparent 100%);
}

html[data-theme="liquid"] .desktop-placeholder::after {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  height: 92px;
  pointer-events: none;
  content: "";
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08)),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  filter: blur(18px);
}

html[data-theme="liquid"] .desktop-placeholder > * {
  position: relative;
  z-index: 1;
}

html[data-theme="cde"] .desktop-placeholder {
  border-width: 2px;
  background:
    linear-gradient(180deg, #7aaec2 0 34px, #c2c4ce 34px 100%);
}

html[data-theme="win95"] .desktop-placeholder {
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  background: #008080;
  box-shadow: var(--shadow), inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

.desktop-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 0 12px;
  color: var(--accent-text);
  background: var(--accent);
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius-sm) - 2px);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
}

html[data-theme="liquid"] .desktop-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  min-height: 42px;
  padding: 0 20px 0 74px;
  color: var(--text);
  font-family: var(--font-ui);
  background: rgba(255, 255, 255, 0.54);
  border-width: 0 0 1px;
  border-color: rgba(29, 29, 31, 0.09);
  border-radius: 34px 34px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
}

html[data-theme="liquid"] .desktop-bar::before {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 12px;
  height: 12px;
  content: "";
  background: #ff5f57;
  border-radius: 999px;
  box-shadow: 18px 0 0 #ffbd2e, 36px 0 0 #28c840;
  transform: translateY(-50%);
}

html[data-theme="liquid"] .desktop-bar strong {
  padding: 4px 11px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(29, 29, 31, 0.06);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="liquid"] .desktop-grid {
  margin-bottom: 88px;
}

html[data-theme="win95"] .desktop-bar {
  border-radius: 0;
  border-color: #000080;
}

.desktop-grid {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 14px;
  margin-top: 18px;
}

.preview-panel {
  min-height: 138px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
  box-shadow: var(--shadow-tight);
}

html[data-theme="liquid"] .preview-panel {
  min-height: 122px;
  border-color: rgba(29, 29, 31, 0.08);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.80), rgba(246, 248, 252, 0.58)),
    rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 12px 28px rgba(29, 29, 31, 0.08);
  -webkit-backdrop-filter: saturate(175%) blur(20px);
  backdrop-filter: saturate(175%) blur(20px);
}

html[data-theme="liquid"] .panel-title {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 760;
  color: #0066cc;
  text-transform: none;
}

html[data-theme="cde"] .preview-panel {
  border-width: 2px;
}

html[data-theme="win95"] .preview-panel {
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: none;
}

.launcher-panel {
  grid-row: span 2;
}

.panel-title {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
}

.launcher-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 7px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.launcher-row span {
  width: 24px;
  height: 24px;
  background: var(--accent-2);
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius-sm) - 3px);
}

html[data-theme="liquid"] .launcher-row {
  min-height: 44px;
  border-color: rgba(29, 29, 31, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

html[data-theme="liquid"] .launcher-row span {
  width: 26px;
  height: 26px;
  border-color: rgba(255, 255, 255, 0.74);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), transparent 42%),
    linear-gradient(135deg, #64d46c 0%, #34c759 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 6px 12px rgba(52, 199, 89, 0.18);
}

.meter {
  height: 16px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-muted) 75%, var(--page-bg));
}

.meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

html[data-theme="liquid"] .meter {
  height: 12px;
  border-color: rgba(29, 29, 31, 0.06);
  background: rgba(224, 228, 236, 0.58);
  box-shadow: inset 0 1px 2px rgba(29, 29, 31, 0.10);
}

html[data-theme="liquid"] .meter span {
  background: linear-gradient(90deg, #007aff, #5ac8fa);
  box-shadow: 0 0 12px rgba(0, 122, 255, 0.18);
}

html[data-theme="cde"] .meter span,
html[data-theme="win95"] .meter span {
  background: var(--accent);
}

.media-panel {
  display: flex;
  gap: 12px;
  align-items: center;
}

.album-art {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, var(--accent), var(--accent-3) 48%, var(--accent-2));
}

html[data-theme="liquid"] .album-art {
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.44), transparent 36%),
    linear-gradient(135deg, #007aff, #af52de 48%, #ff375f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 10px 20px rgba(29, 29, 31, 0.12);
}

html[data-theme="liquid"] .media-panel p {
  font-size: 0.92rem;
  line-height: 1.38;
}

.media-panel p {
  margin: 0;
  color: var(--muted);
}

.dock-preview {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
  box-shadow: var(--shadow-tight);
}

html[data-theme="liquid"] .dock-preview {
  right: auto;
  left: 50%;
  width: min(500px, calc(100% - 52px));
  min-height: 76px;
  padding: 12px;
  border-color: rgba(29, 29, 31, 0.08);
  border-radius: 29px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(240, 243, 249, 0.54)),
    rgba(255, 255, 255, 0.50);
  box-shadow: 0 24px 48px rgba(29, 29, 31, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  transform: translateX(-50%);
  -webkit-backdrop-filter: saturate(190%) blur(28px);
  backdrop-filter: saturate(190%) blur(28px);
}

html[data-theme="cde"] .dock-preview {
  border-width: 2px;
  background: #c2c4ce;
}

html[data-theme="win95"] .dock-preview {
  justify-content: flex-start;
  min-height: 48px;
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  border-radius: 0;
  background: #c0c0c0;
  box-shadow: inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

.dock-tile,
.dock-widget {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.dock-tile::before {
  display: block;
  width: 24px;
  height: 24px;
  content: "";
  border-radius: calc(var(--radius-sm) - 4px);
  background: var(--accent);
}

.dock-tile:nth-of-type(3)::before,
.dock-tile.trash::before {
  background: var(--accent-3);
}

.dock-tile:nth-of-type(4)::before {
  background: var(--accent-2);
}

.dock-tile.active {
  box-shadow: 0 0 0 2px var(--accent-2);
}

.dock-tile.start-tile {
  width: 72px;
}

.dock-tile.start-tile::before {
  display: none;
}

.dock-widget {
  width: 64px;
  background: var(--surface-strong);
}

html[data-theme="liquid"] .dock-tile,
html[data-theme="liquid"] .dock-widget {
  position: relative;
  width: 48px;
  height: 48px;
  border-color: rgba(29, 29, 31, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.60);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 8px 16px rgba(29, 29, 31, 0.10);
}

html[data-theme="liquid"] .dock-tile::before {
  width: 29px;
  height: 29px;
  border-radius: 9px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.54), transparent 38%),
    linear-gradient(135deg, #007aff, #5ac8fa);
  box-shadow: 0 6px 12px rgba(0, 122, 255, 0.16);
}

html[data-theme="liquid"] .dock-tile:nth-of-type(3)::before,
html[data-theme="liquid"] .dock-tile.trash::before {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.54), transparent 38%),
    linear-gradient(135deg, #ff375f, #ff9f0a);
  box-shadow: 0 6px 12px rgba(255, 55, 95, 0.16);
}

html[data-theme="liquid"] .dock-tile:nth-of-type(4)::before {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.54), transparent 38%),
    linear-gradient(135deg, #34c759, #30d158);
  box-shadow: 0 6px 12px rgba(52, 199, 89, 0.16);
}

html[data-theme="liquid"] .dock-tile.active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 8px 16px rgba(29, 29, 31, 0.10), 0 0 0 2px rgba(0, 102, 204, 0.16);
}

html[data-theme="liquid"] .dock-tile.active::after {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  content: "";
  background: var(--accent);
  border-radius: 999px;
  transform: translateX(-50%);
}

html[data-theme="liquid"] .dock-widget {
  color: #2f3742;
  font-family: var(--font-ui);
  font-weight: 720;
}

html[data-theme="liquid"] .dock-tile.start-tile {
  width: 52px;
  color: transparent;
  background:
    url("icons/app-icon-128.png") center / 34px 34px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(242, 245, 250, 0.48)),
    rgba(255, 255, 255, 0.58);
}

html[data-theme="liquid"] .dock-tile.start-tile::before {
  display: none;
}

html[data-theme="win95"] .dock-tile,
html[data-theme="win95"] .dock-widget {
  height: 32px;
  width: 44px;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
  background: #c0c0c0;
}

html[data-theme="win95"] .dock-tile.start-tile {
  width: 72px;
}

html[data-theme="win95"] .dock-widget {
  width: 58px;
  border-color: #808080 #ffffff #ffffff #808080;
}

.intro-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 0 var(--page-x) 28px;
}

.intro-band > div {
  min-height: 112px;
  padding: 22px;
  border: 1px solid var(--border);
  background: var(--surface);
}

html[data-theme="liquid"] .intro-band {
  gap: 16px;
}

html[data-theme="liquid"] .intro-band > div {
  border-color: rgba(29, 29, 31, 0.07);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(246, 248, 252, 0.54)),
    rgba(255, 255, 255, 0.44);
  box-shadow: 0 14px 34px rgba(29, 29, 31, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(175%) blur(18px);
  backdrop-filter: saturate(175%) blur(18px);
}

.intro-band strong,
.intro-band span {
  display: block;
}

.intro-band strong {
  margin-bottom: 4px;
  font-size: 1.04rem;
}

.intro-band span {
  color: var(--muted);
}

.section {
  padding: 72px var(--page-x);
}

.section:nth-of-type(2n + 1) {
  background: color-mix(in srgb, var(--page-band) 55%, transparent);
}

html[data-theme="liquid"] .section:nth-of-type(2n + 1) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(245, 247, 251, 0.52));
}

.section-heading {
  max-width: 800px;
  margin-bottom: 30px;
}

.section-heading.compact {
  max-width: 720px;
}

.section-heading h2 {
  margin: 0;
  font-size: 2.65rem;
  line-height: 1.08;
  letter-spacing: 0;
}

.section-heading p:not(.eyebrow) {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
}

.feature-grid,
.workflow-grid,
.theme-card-grid,
.placeholder-grid {
  display: grid;
  gap: 18px;
}

.feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workflow-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 821px) {
  #multi-monitor .workflow-grid,
  #focus-blur .workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.coffee-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 28px;
  margin-bottom: 30px;
}

.macos-tweaks-preview-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.macos-tweaks-preview {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  box-shadow: var(--shadow-tight);
}

.macos-tweaks-preview figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.macos-tweaks-preview figcaption span {
  color: var(--muted);
}

.macos-tweaks-preview-link {
  display: block;
  padding: 12px;
  background: var(--surface-muted);
}

.macos-tweaks-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.macos-tweaks-preview-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -4px;
}

.macos-tweaks-preview-note {
  margin: 14px 0 28px;
  color: var(--muted);
}

.macos-tweaks-workflow {
  margin-top: 28px;
  padding: 22px;
  border: var(--control-border);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  box-shadow: var(--control-shadow);
}

.macos-tweaks-workflow h3 {
  margin: 0 0 16px;
  font-size: 1.18rem;
  line-height: 1.3;
}

.macos-tweaks-workflow ol {
  display: grid;
  gap: 14px;
  margin: 0;
  padding-left: 24px;
}

.macos-tweaks-workflow li {
  padding-left: 4px;
  color: var(--muted);
}

.macos-tweaks-workflow strong {
  color: var(--text);
}

html[data-theme="liquid"] #macos-tweaks .workflow-grid article > * {
  position: relative;
  z-index: 1;
}

html[data-theme="liquid"] .macos-tweaks-preview[data-preview-appearance="dark"] .macos-tweaks-preview-link {
  background: #1f1f24;
}

html[data-theme="cde"] .macos-tweaks-preview {
  border-width: 2px;
  box-shadow: var(--shadow), inset 1px 1px 0 var(--border-strong);
}

html[data-theme="cde"] #macos-tweaks .section-heading p:not(.eyebrow),
html[data-theme="cde"] .macos-tweaks-preview-note {
  color: var(--text);
}

html[data-theme="win95"] .macos-tweaks-preview {
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  box-shadow: var(--shadow-tight), inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

html[data-theme="win95"] .macos-tweaks-preview figcaption,
html[data-theme="win95"] .macos-tweaks-preview figcaption span {
  color: var(--accent-text);
  background: var(--accent);
}

html[data-theme="win95"] #macos-tweaks .section-heading p,
html[data-theme="win95"] .macos-tweaks-preview-note {
  color: #ffffff;
}

html[data-theme="win95"] #macos-tweaks {
  background: var(--page-bg);
}

@media (max-width: 760px) {
  .macos-tweaks-preview-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

.coffee-intro .section-heading {
  margin-bottom: 0;
}

.coffee-icon-illustration {
  margin: 0;
  padding: 16px;
  border: var(--control-border);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  box-shadow: var(--control-shadow);
}

.coffee-icon-illustration img {
  width: 112px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .coffee-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .coffee-icon-illustration {
    justify-self: start;
    grid-row: 1;
  }
}

.clipboard-preview-gallery,
.mixer-preview-gallery,
.multi-monitor-preview-gallery,
.input-sounds-preview-gallery,
.time-spent-preview-gallery,
.remembrance-preview-gallery,
.stats-preview-gallery,
.app-starter-preview-gallery,
.cheat-sheet-preview-gallery,
.island-preview-gallery,
.drop-zone-preview-gallery,
.window-switcher-preview-gallery,
.focus-blur-preview-gallery,
.color-picker-preview-gallery,
.dev-servers-preview-gallery,
.clock-preview-gallery,
.potato-timer-preview-gallery,
.xeyes-preview-gallery,
.display-controls-preview-gallery,
.calendar-preview-gallery,
.desktop-switcher-preview-gallery,
.now-playing-preview-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Wide utility previews stay legible in a full-width gallery. */
.cheat-sheet-preview-gallery,
.window-switcher-preview-gallery {
  grid-template-columns: minmax(0, 1fr);
}

.clipboard-preview,
.mixer-preview,
.multi-monitor-preview,
.input-sounds-preview,
.time-spent-preview,
.remembrance-preview,
.stats-preview,
.app-starter-preview,
.cheat-sheet-preview,
.island-preview,
.drop-zone-preview,
.window-switcher-preview,
.focus-blur-preview,
.color-picker-preview,
.dev-servers-preview,
.clock-preview,
.potato-timer-preview,
.xeyes-preview,
.display-controls-preview,
.calendar-preview,
.desktop-switcher-preview,
.now-playing-preview {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-tight);
}

.clipboard-preview figcaption,
.mixer-preview figcaption,
.multi-monitor-preview figcaption,
.input-sounds-preview figcaption,
.time-spent-preview figcaption,
.remembrance-preview figcaption,
.stats-preview figcaption,
.app-starter-preview figcaption,
.cheat-sheet-preview figcaption,
.island-preview figcaption,
.drop-zone-preview figcaption,
.window-switcher-preview figcaption,
.focus-blur-preview figcaption,
.color-picker-preview figcaption,
.dev-servers-preview figcaption,
.clock-preview figcaption,
.potato-timer-preview figcaption,
.xeyes-preview figcaption,
.display-controls-preview figcaption,
.calendar-preview figcaption,
.desktop-switcher-preview figcaption,
.now-playing-preview figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.clipboard-preview figcaption span,
.mixer-preview figcaption span,
.multi-monitor-preview figcaption span,
.input-sounds-preview figcaption span,
.time-spent-preview figcaption span,
.remembrance-preview figcaption span,
.stats-preview figcaption span,
.app-starter-preview figcaption span,
.cheat-sheet-preview figcaption span,
.island-preview figcaption span,
.drop-zone-preview figcaption span,
.window-switcher-preview figcaption span,
.focus-blur-preview figcaption span,
.color-picker-preview figcaption span,
.dev-servers-preview figcaption span,
.clock-preview figcaption span,
.potato-timer-preview figcaption span,
.xeyes-preview figcaption span,
.display-controls-preview figcaption span,
.calendar-preview figcaption span,
.desktop-switcher-preview figcaption span,
.now-playing-preview figcaption span {
  color: var(--muted);
}

.clipboard-preview-link,
.mixer-preview-link,
.multi-monitor-preview-link,
.input-sounds-preview-link,
.time-spent-preview-link,
.remembrance-preview-link,
.stats-preview-link,
.app-starter-preview-link,
.cheat-sheet-preview-link,
.island-preview-link,
.drop-zone-preview-link,
.window-switcher-preview-link,
.focus-blur-preview-link,
.color-picker-preview-link,
.dev-servers-preview-link,
.clock-preview-link,
.potato-timer-preview-link,
.xeyes-preview-link,
.display-controls-preview-link,
.calendar-preview-link,
.desktop-switcher-preview-link,
.now-playing-preview-link {
  display: block;
  padding: 14px;
  background: var(--surface-muted);
}

.color-picker-preview-link {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.color-picker-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 332px);
  align-items: center;
  gap: 40px;
}

.color-picker-showcase .section-heading {
  max-width: 640px;
  margin-bottom: 0;
}

.color-picker-showcase .section-heading h2 {
  font-size: 2.2rem;
}

.color-picker-preview img {
  max-width: 268px;
}

.color-picker-preview figcaption {
  flex-wrap: wrap;
}

.color-picker-preview figcaption span {
  overflow-wrap: anywhere;
}

#color-picker .color-picker-preview-note {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .color-picker-showcase {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .color-picker-showcase .color-picker-preview {
    width: min(100%, 332px);
    justify-self: center;
  }
}

.desktop-switcher-preview-layouts {
  display: grid;
  gap: 18px;
  padding: 20px;
  background: var(--surface-muted);
}

.desktop-switcher-preview-link {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  color: var(--text);
}

.desktop-switcher-preview-link span {
  font-size: 0.88rem;
}

.desktop-switcher-preview img[data-preview-orientation="horizontal"] {
  max-width: 336px;
}

.desktop-switcher-preview img[data-preview-orientation="vertical"] {
  width: auto;
  max-width: 100%;
  max-height: 127px;
}

html[data-theme="cde"] .desktop-switcher-preview img[data-preview-orientation="horizontal"] {
  max-width: 318px;
}

html[data-theme="cde"] .desktop-switcher-preview img[data-preview-orientation="vertical"] {
  max-height: 117px;
}

html[data-theme="win95"] .desktop-switcher-preview img[data-preview-orientation="horizontal"] {
  max-width: 306px;
}

html[data-theme="win95"] .desktop-switcher-preview img[data-preview-orientation="vertical"] {
  max-height: 110px;
}

html[data-theme="liquid"] .desktop-switcher-preview[data-preview-appearance="dark"] .desktop-switcher-preview-layouts {
  background: #1f1f24;
}

html[data-theme="liquid"] .desktop-switcher-preview[data-preview-appearance="dark"] .desktop-switcher-preview-link {
  color: #e8ebef;
}

#small-stats-previews figcaption {
  flex-wrap: wrap;
}

#small-stats-previews figcaption span {
  overflow-wrap: anywhere;
}

.multi-monitor-preview figcaption,
.input-sounds-preview figcaption,
.focus-blur-preview figcaption,
.dev-servers-preview figcaption,
.clock-preview figcaption,
.potato-timer-preview figcaption,
.xeyes-preview figcaption,
.display-controls-preview figcaption,
.calendar-preview figcaption,
.desktop-switcher-preview figcaption,
.now-playing-preview figcaption {
  flex-wrap: wrap;
}

.multi-monitor-preview figcaption span,
.input-sounds-preview figcaption span,
.focus-blur-preview figcaption span,
.dev-servers-preview figcaption span,
.clock-preview figcaption span,
.potato-timer-preview figcaption span,
.xeyes-preview figcaption span,
.display-controls-preview figcaption span,
.calendar-preview figcaption span,
.desktop-switcher-preview figcaption span,
.now-playing-preview figcaption span {
  overflow-wrap: anywhere;
}

.dev-servers-preview-link,
.clock-preview-link,
.potato-timer-preview-link,
.xeyes-preview-link,
.display-controls-preview-link,
.calendar-preview-link,
.desktop-switcher-preview-link,
.now-playing-preview-link {
  display: flex;
  justify-content: center;
}

.dev-servers-preview img,
.clock-preview img,
.potato-timer-preview img,
.xeyes-preview img,
.display-controls-preview img,
.calendar-preview img,
.desktop-switcher-preview img,
.now-playing-preview img {
  max-width: 540px;
}

html[data-theme="liquid"] .dev-servers-preview[data-preview-appearance="dark"] .dev-servers-preview-link,
html[data-theme="liquid"] .clock-preview[data-preview-appearance="dark"] .clock-preview-link,
html[data-theme="liquid"] .potato-timer-preview[data-preview-appearance="dark"] .potato-timer-preview-link,
html[data-theme="liquid"] .xeyes-preview[data-preview-appearance="dark"] .xeyes-preview-link,
html[data-theme="liquid"] .display-controls-preview[data-preview-appearance="dark"] .display-controls-preview-link,
html[data-theme="liquid"] .calendar-preview[data-preview-appearance="dark"] .calendar-preview-link,
html[data-theme="liquid"] .desktop-switcher-preview[data-preview-appearance="dark"] .desktop-switcher-preview-link,
html[data-theme="liquid"] .now-playing-preview[data-preview-appearance="dark"] .now-playing-preview-link {
  background: #1f1f24;
}

html[data-theme="liquid"] .color-picker-preview[data-preview-appearance="dark"] .color-picker-preview-link {
  background: #1f1f24;
}

html[data-theme="liquid"] .multi-monitor-preview[data-preview-appearance="dark"] .multi-monitor-preview-link,
html[data-theme="liquid"] .input-sounds-preview[data-preview-appearance="dark"] .input-sounds-preview-link {
  background: #1f1f24;
}

html[data-theme="liquid"] .window-switcher-preview[data-preview-appearance="dark"] .window-switcher-preview-link,
html[data-theme="liquid"] .focus-blur-preview[data-preview-appearance="dark"] .focus-blur-preview-link,
html[data-theme="liquid"] .island-preview[data-preview-appearance="dark"] .island-preview-link,
html[data-theme="liquid"] .drop-zone-preview[data-preview-appearance="dark"] .drop-zone-preview-link,
html[data-theme="liquid"] .app-starter-preview[data-preview-appearance="dark"] .app-starter-preview-link {
  background: #1f1f24;
}

.clipboard-preview img,
.mixer-preview img,
.multi-monitor-preview img,
.input-sounds-preview img,
.time-spent-preview img,
.remembrance-preview img,
.stats-preview img,
.app-starter-preview img,
.cheat-sheet-preview img,
.island-preview img,
.drop-zone-preview img,
.window-switcher-preview img,
.focus-blur-preview img,
.color-picker-preview img,
.dev-servers-preview img,
.clock-preview img,
.potato-timer-preview img,
.xeyes-preview img,
.display-controls-preview img,
.calendar-preview img,
.desktop-switcher-preview img,
.now-playing-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.display-controls-preview img {
  max-width: 420px;
}

.calendar-preview[data-preview-scene="populated"] img,
.calendar-preview[data-preview-scene="month"] img {
  max-width: 360px;
}

.calendar-preview[data-preview-scene="mini-horizontal"] img,
.calendar-preview[data-preview-scene="mini-vertical"] img {
  width: auto;
  max-width: 100%;
  max-height: 240px;
}

.clipboard-preview-link:focus-visible,
.mixer-preview-link:focus-visible,
.multi-monitor-preview-link:focus-visible,
.input-sounds-preview-link:focus-visible,
.time-spent-preview-link:focus-visible,
.remembrance-preview-link:focus-visible,
.stats-preview-link:focus-visible,
.app-starter-preview-link:focus-visible,
.cheat-sheet-preview-link:focus-visible,
.island-preview-link:focus-visible,
.drop-zone-preview-link:focus-visible,
.window-switcher-preview-link:focus-visible,
.focus-blur-preview-link:focus-visible,
.color-picker-preview-link:focus-visible,
.dev-servers-preview-link:focus-visible,
.clock-preview-link:focus-visible,
.potato-timer-preview-link:focus-visible,
.xeyes-preview-link:focus-visible,
.display-controls-preview-link:focus-visible,
.calendar-preview-link:focus-visible,
.desktop-switcher-preview-link:focus-visible,
.now-playing-preview-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -4px;
}

.clipboard-preview-note,
.mixer-preview-note,
.multi-monitor-preview-note,
.input-sounds-preview-note,
.time-spent-preview-note,
.remembrance-preview-note,
.stats-preview-note,
.app-starter-preview-note,
.cheat-sheet-preview-note,
.island-preview-note,
.drop-zone-preview-note,
.window-switcher-preview-note,
.focus-blur-preview-note,
.color-picker-preview-note,
.dev-servers-preview-note,
.clock-preview-note,
.potato-timer-preview-note,
.xeyes-preview-note,
.display-controls-preview-note,
.calendar-preview-note,
.desktop-switcher-preview-note,
.now-playing-preview-note {
  margin: 14px 0 28px;
  color: var(--muted);
}

html[data-theme="cde"] #multi-monitor .section-heading p:not(.eyebrow),
html[data-theme="cde"] #input-sounds .section-heading p:not(.eyebrow),
html[data-theme="cde"] .multi-monitor-preview-note,
html[data-theme="cde"] .input-sounds-preview-note,
html[data-theme="cde"] #window-switcher .section-heading p:not(.eyebrow),
html[data-theme="cde"] #focus-blur .section-heading p:not(.eyebrow),
html[data-theme="cde"] #color-picker .section-heading p:not(.eyebrow),
html[data-theme="cde"] #dev-servers .section-heading p:not(.eyebrow),
html[data-theme="cde"] #clock .section-heading p:not(.eyebrow),
html[data-theme="cde"] #potato-timer .section-heading p:not(.eyebrow),
html[data-theme="cde"] #xeyes .section-heading p:not(.eyebrow),
html[data-theme="cde"] #display-controls .section-heading p:not(.eyebrow),
html[data-theme="cde"] #calendar .section-heading p:not(.eyebrow),
html[data-theme="cde"] #desktop-switcher .section-heading p:not(.eyebrow),
html[data-theme="cde"] #now-playing .section-heading p:not(.eyebrow),
html[data-theme="cde"] #app-starter .section-heading p:not(.eyebrow),
html[data-theme="cde"] #cheat-sheet .section-heading p:not(.eyebrow),
html[data-theme="cde"] #dynamic-island .section-heading p:not(.eyebrow),
html[data-theme="cde"] #drop-zone .section-heading p:not(.eyebrow),
html[data-theme="cde"] .app-starter-preview-note,
html[data-theme="cde"] .cheat-sheet-preview-note,
html[data-theme="cde"] .island-preview-note,
html[data-theme="cde"] .drop-zone-preview-note,
html[data-theme="cde"] .window-switcher-preview-note,
html[data-theme="cde"] .focus-blur-preview-note,
html[data-theme="cde"] .color-picker-preview-note,
html[data-theme="cde"] .dev-servers-preview-note,
html[data-theme="cde"] .clock-preview-note,
html[data-theme="cde"] .potato-timer-preview-note,
html[data-theme="cde"] .xeyes-preview-note,
html[data-theme="cde"] .display-controls-preview-note,
html[data-theme="cde"] .calendar-preview-note,
html[data-theme="cde"] .desktop-switcher-preview-note,
html[data-theme="cde"] .now-playing-preview-note {
  color: var(--text);
}

html[data-theme="win95"] #multi-monitor .section-heading p,
html[data-theme="win95"] #input-sounds .section-heading p,
html[data-theme="win95"] .multi-monitor-preview-note,
html[data-theme="win95"] .input-sounds-preview-note,
html[data-theme="win95"] #window-switcher .section-heading p,
html[data-theme="win95"] #focus-blur .section-heading p,
html[data-theme="win95"] #color-picker .section-heading p,
html[data-theme="win95"] #dev-servers .section-heading p,
html[data-theme="win95"] #clock .section-heading p,
html[data-theme="win95"] #potato-timer .section-heading p,
html[data-theme="win95"] #xeyes .section-heading p,
html[data-theme="win95"] #display-controls .section-heading p,
html[data-theme="win95"] #calendar .section-heading p,
html[data-theme="win95"] #desktop-switcher .section-heading p,
html[data-theme="win95"] #now-playing .section-heading p,
html[data-theme="win95"] #app-starter .section-heading p,
html[data-theme="win95"] #cheat-sheet .section-heading p,
html[data-theme="win95"] #dynamic-island .section-heading p,
html[data-theme="win95"] #drop-zone .section-heading p,
html[data-theme="win95"] .app-starter-preview-note,
html[data-theme="win95"] .cheat-sheet-preview-note,
html[data-theme="win95"] .island-preview-note,
html[data-theme="win95"] .drop-zone-preview-note,
html[data-theme="win95"] .window-switcher-preview-note,
html[data-theme="win95"] .focus-blur-preview-note,
html[data-theme="win95"] .color-picker-preview-note,
html[data-theme="win95"] .dev-servers-preview-note,
html[data-theme="win95"] .clock-preview-note,
html[data-theme="win95"] .potato-timer-preview-note,
html[data-theme="win95"] .xeyes-preview-note,
html[data-theme="win95"] .display-controls-preview-note,
html[data-theme="win95"] .calendar-preview-note,
html[data-theme="win95"] .desktop-switcher-preview-note,
html[data-theme="win95"] .now-playing-preview-note {
  color: #ffffff;
}

html[data-theme="win95"] #app-starter,
html[data-theme="win95"] #multi-monitor,
html[data-theme="win95"] #input-sounds,
html[data-theme="win95"] #window-switcher,
html[data-theme="win95"] #focus-blur,
html[data-theme="win95"] #color-picker,
html[data-theme="win95"] #dev-servers,
html[data-theme="win95"] #clock,
html[data-theme="win95"] #potato-timer,
html[data-theme="win95"] #xeyes,
html[data-theme="win95"] #display-controls,
html[data-theme="win95"] #calendar,
html[data-theme="win95"] #desktop-switcher,
html[data-theme="win95"] #now-playing,
html[data-theme="win95"] #dynamic-island,
html[data-theme="win95"] #drop-zone,
html[data-theme="win95"] #cheat-sheet {
  background: var(--page-bg);
}

#clipboard kbd,
#time-spend kbd,
#remembrance kbd,
#system-stats kbd,
#coffee kbd,
#app-starter kbd,
#window-switcher kbd,
#focus-blur kbd,
#color-picker kbd,
#dev-servers kbd,
#clock kbd,
#potato-timer kbd,
#display-controls kbd,
#calendar kbd,
#desktop-switcher kbd,
#now-playing kbd,
#dynamic-island kbd,
#drop-zone kbd,
#cheat-sheet kbd {
  display: inline-block;
  padding: 0 4px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  font-family: var(--font-mono);
  font-size: 0.88em;
  white-space: nowrap;
}

#clipboard .clipboard-privacy {
  grid-column: 1 / -1;
  min-height: 0;
}

/* Keep the glass sheen behind the feature descriptions. */
html[data-theme="liquid"] #system-stats .workflow-grid article > *,
html[data-theme="liquid"] #multi-monitor .workflow-grid article > *,
html[data-theme="liquid"] #input-sounds .workflow-grid article > *,
html[data-theme="liquid"] #coffee .workflow-grid article > *,
html[data-theme="liquid"] #app-starter .workflow-grid article > *,
html[data-theme="liquid"] #window-switcher .workflow-grid article > *,
html[data-theme="liquid"] #focus-blur .workflow-grid article > *,
html[data-theme="liquid"] #color-picker .workflow-grid article > *,
html[data-theme="liquid"] #dev-servers .workflow-grid article > *,
html[data-theme="liquid"] #clock .workflow-grid article > *,
html[data-theme="liquid"] #potato-timer .workflow-grid article > *,
html[data-theme="liquid"] #display-controls .workflow-grid article > *,
html[data-theme="liquid"] #calendar .workflow-grid article > *,
html[data-theme="liquid"] #desktop-switcher .workflow-grid article > *,
html[data-theme="liquid"] #now-playing .workflow-grid article > *,
html[data-theme="liquid"] #dynamic-island .workflow-grid article > *,
html[data-theme="liquid"] #drop-zone .workflow-grid article > *,
html[data-theme="liquid"] #cheat-sheet .workflow-grid article > * {
  position: relative;
  z-index: 1;
}

html[data-theme="liquid"] .clipboard-preview,
html[data-theme="liquid"] .mixer-preview,
html[data-theme="liquid"] .multi-monitor-preview,
html[data-theme="liquid"] .input-sounds-preview,
html[data-theme="liquid"] .time-spent-preview,
html[data-theme="liquid"] .remembrance-preview,
html[data-theme="liquid"] .stats-preview,
html[data-theme="liquid"] .app-starter-preview,
html[data-theme="liquid"] .cheat-sheet-preview,
html[data-theme="liquid"] .island-preview,
html[data-theme="liquid"] .drop-zone-preview,
html[data-theme="liquid"] .window-switcher-preview,
html[data-theme="liquid"] .focus-blur-preview,
html[data-theme="liquid"] .color-picker-preview,
html[data-theme="liquid"] .dev-servers-preview,
html[data-theme="liquid"] .clock-preview,
html[data-theme="liquid"] .potato-timer-preview,
html[data-theme="liquid"] .xeyes-preview,
html[data-theme="liquid"] .display-controls-preview,
html[data-theme="liquid"] .calendar-preview,
html[data-theme="liquid"] .desktop-switcher-preview,
html[data-theme="liquid"] .now-playing-preview {
  background: var(--surface-strong);
  -webkit-backdrop-filter: saturate(175%) blur(20px);
  backdrop-filter: saturate(175%) blur(20px);
}

html[data-theme="cde"] .clipboard-preview,
html[data-theme="cde"] .mixer-preview,
html[data-theme="cde"] .multi-monitor-preview,
html[data-theme="cde"] .input-sounds-preview,
html[data-theme="cde"] .time-spent-preview,
html[data-theme="cde"] .remembrance-preview,
html[data-theme="cde"] .stats-preview,
html[data-theme="cde"] .app-starter-preview,
html[data-theme="cde"] .cheat-sheet-preview,
html[data-theme="cde"] .island-preview,
html[data-theme="cde"] .drop-zone-preview,
html[data-theme="cde"] .window-switcher-preview,
html[data-theme="cde"] .focus-blur-preview,
html[data-theme="cde"] .color-picker-preview,
html[data-theme="cde"] .dev-servers-preview,
html[data-theme="cde"] .clock-preview,
html[data-theme="cde"] .potato-timer-preview,
html[data-theme="cde"] .xeyes-preview,
html[data-theme="cde"] .display-controls-preview,
html[data-theme="cde"] .calendar-preview,
html[data-theme="cde"] .desktop-switcher-preview,
html[data-theme="cde"] .now-playing-preview {
  border-width: 2px;
  box-shadow: var(--shadow), inset 1px 1px 0 var(--border-strong);
}

html[data-theme="win95"] .clipboard-preview,
html[data-theme="win95"] .mixer-preview,
html[data-theme="win95"] .multi-monitor-preview,
html[data-theme="win95"] .input-sounds-preview,
html[data-theme="win95"] .time-spent-preview,
html[data-theme="win95"] .remembrance-preview,
html[data-theme="win95"] .stats-preview,
html[data-theme="win95"] .app-starter-preview,
html[data-theme="win95"] .cheat-sheet-preview,
html[data-theme="win95"] .island-preview,
html[data-theme="win95"] .drop-zone-preview,
html[data-theme="win95"] .window-switcher-preview,
html[data-theme="win95"] .focus-blur-preview,
html[data-theme="win95"] .color-picker-preview,
html[data-theme="win95"] .dev-servers-preview,
html[data-theme="win95"] .clock-preview,
html[data-theme="win95"] .potato-timer-preview,
html[data-theme="win95"] .xeyes-preview,
html[data-theme="win95"] .display-controls-preview,
html[data-theme="win95"] .calendar-preview,
html[data-theme="win95"] .desktop-switcher-preview,
html[data-theme="win95"] .now-playing-preview {
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  box-shadow: var(--shadow-tight), inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

html[data-theme="win95"] .clipboard-preview figcaption,
html[data-theme="win95"] .mixer-preview figcaption,
html[data-theme="win95"] .multi-monitor-preview figcaption,
html[data-theme="win95"] .input-sounds-preview figcaption,
html[data-theme="win95"] .time-spent-preview figcaption,
html[data-theme="win95"] .remembrance-preview figcaption,
html[data-theme="win95"] .stats-preview figcaption,
html[data-theme="win95"] .app-starter-preview figcaption,
html[data-theme="win95"] .cheat-sheet-preview figcaption,
html[data-theme="win95"] .island-preview figcaption,
html[data-theme="win95"] .drop-zone-preview figcaption,
html[data-theme="win95"] .window-switcher-preview figcaption,
html[data-theme="win95"] .focus-blur-preview figcaption,
html[data-theme="win95"] .color-picker-preview figcaption,
html[data-theme="win95"] .dev-servers-preview figcaption,
html[data-theme="win95"] .clock-preview figcaption,
html[data-theme="win95"] .potato-timer-preview figcaption,
html[data-theme="win95"] .xeyes-preview figcaption,
html[data-theme="win95"] .display-controls-preview figcaption,
html[data-theme="win95"] .calendar-preview figcaption,
html[data-theme="win95"] .desktop-switcher-preview figcaption,
html[data-theme="win95"] .now-playing-preview figcaption {
  color: var(--accent-text);
  background: var(--accent);
}

html[data-theme="win95"] .clipboard-preview figcaption span,
html[data-theme="win95"] .mixer-preview figcaption span,
html[data-theme="win95"] .multi-monitor-preview figcaption span,
html[data-theme="win95"] .input-sounds-preview figcaption span,
html[data-theme="win95"] .time-spent-preview figcaption span,
html[data-theme="win95"] .remembrance-preview figcaption span,
html[data-theme="win95"] .stats-preview figcaption span,
html[data-theme="win95"] .app-starter-preview figcaption span,
html[data-theme="win95"] .cheat-sheet-preview figcaption span,
html[data-theme="win95"] .island-preview figcaption span,
html[data-theme="win95"] .drop-zone-preview figcaption span,
html[data-theme="win95"] .window-switcher-preview figcaption span,
html[data-theme="win95"] .focus-blur-preview figcaption span,
html[data-theme="win95"] .color-picker-preview figcaption span,
html[data-theme="win95"] .dev-servers-preview figcaption span,
html[data-theme="win95"] .clock-preview figcaption span,
html[data-theme="win95"] .potato-timer-preview figcaption span,
html[data-theme="win95"] .xeyes-preview figcaption span,
html[data-theme="win95"] .display-controls-preview figcaption span,
html[data-theme="win95"] .calendar-preview figcaption span,
html[data-theme="win95"] .desktop-switcher-preview figcaption span,
html[data-theme="win95"] .now-playing-preview figcaption span {
  color: var(--accent-text);
}

.island-preview figcaption,
.drop-zone-preview figcaption,
.now-playing-preview figcaption {
  align-items: flex-start;
  flex-wrap: wrap;
}

.island-preview figcaption span,
.drop-zone-preview figcaption span {
  overflow-wrap: anywhere;
}

.island-more-previews,
.drop-zone-more-previews,
.calendar-more-previews {
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-tight);
}

.island-more-previews summary,
.drop-zone-more-previews summary,
.calendar-more-previews summary {
  padding: 16px;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.island-more-previews summary:focus-visible,
.drop-zone-more-previews summary:focus-visible,
.calendar-more-previews summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -4px;
}

.island-more-previews[open] summary,
.drop-zone-more-previews[open] summary,
.calendar-more-previews[open] summary {
  border-bottom: 1px solid var(--border);
}

.island-more-previews .island-preview-gallery,
.drop-zone-more-previews .drop-zone-preview-gallery,
.calendar-more-previews .calendar-preview-gallery {
  padding: 16px;
}

html[data-theme="cde"] .island-more-previews,
html[data-theme="cde"] .drop-zone-more-previews,
html[data-theme="cde"] .calendar-more-previews {
  border-width: 2px;
  box-shadow: var(--shadow), inset 1px 1px 0 var(--border-strong);
}

html[data-theme="win95"] .island-more-previews,
html[data-theme="win95"] .drop-zone-more-previews,
html[data-theme="win95"] .calendar-more-previews {
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  box-shadow: inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

@media (max-width: 760px) {
  .clipboard-preview-gallery,
  .mixer-preview-gallery,
  .multi-monitor-preview-gallery,
  .input-sounds-preview-gallery,
  .time-spent-preview-gallery,
  .remembrance-preview-gallery,
  .stats-preview-gallery,
  .app-starter-preview-gallery,
  .cheat-sheet-preview-gallery,
  .island-preview-gallery,
  .drop-zone-preview-gallery,
  .window-switcher-preview-gallery,
  .focus-blur-preview-gallery,
  .color-picker-preview-gallery,
  .dev-servers-preview-gallery,
  .clock-preview-gallery,
  .potato-timer-preview-gallery,
  .xeyes-preview-gallery,
  .display-controls-preview-gallery,
  .calendar-preview-gallery,
  .desktop-switcher-preview-gallery,
  .now-playing-preview-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

.theme-card-grid,
.placeholder-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card,
.commerce-card,
.support-card,
.catalog-panel,
.wide-panel,
.workflow-grid article,
.theme-card,
.placeholder-shot {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-tight);
}

html[data-theme="liquid"] .feature-card,
html[data-theme="liquid"] .commerce-card,
html[data-theme="liquid"] .support-card,
html[data-theme="liquid"] .catalog-panel,
html[data-theme="liquid"] .wide-panel,
html[data-theme="liquid"] .workflow-grid article,
html[data-theme="liquid"] .theme-card,
html[data-theme="liquid"] .placeholder-shot {
  position: relative;
  overflow: hidden;
  border-color: rgba(29, 29, 31, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 248, 252, 0.54)),
    rgba(255, 255, 255, 0.44);
  box-shadow: 0 18px 44px rgba(29, 29, 31, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(175%) blur(20px);
  backdrop-filter: saturate(175%) blur(20px);
}

html[data-theme="liquid"] .feature-card::before,
html[data-theme="liquid"] .commerce-card::before,
html[data-theme="liquid"] .support-card::before,
html[data-theme="liquid"] .catalog-panel::before,
html[data-theme="liquid"] .wide-panel::before,
html[data-theme="liquid"] .workflow-grid article::before,
html[data-theme="liquid"] .theme-card::before,
html[data-theme="liquid"] .placeholder-shot::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent 34%),
    linear-gradient(110deg, rgba(255, 255, 255, 0.20), transparent 44%);
}

html[data-theme="cde"] .feature-card,
html[data-theme="cde"] .commerce-card,
html[data-theme="cde"] .support-card,
html[data-theme="cde"] .catalog-panel,
html[data-theme="cde"] .wide-panel,
html[data-theme="cde"] .workflow-grid article,
html[data-theme="cde"] .theme-card,
html[data-theme="cde"] .placeholder-shot {
  border-width: 2px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 88%, #000000) 0 34px, var(--surface) 34px 100%);
  box-shadow: var(--shadow), inset 1px 1px 0 rgba(255, 244, 206, 0.18);
}

html[data-theme="win95"] .feature-card,
html[data-theme="win95"] .commerce-card,
html[data-theme="win95"] .support-card,
html[data-theme="win95"] .catalog-panel,
html[data-theme="win95"] .wide-panel,
html[data-theme="win95"] .workflow-grid article,
html[data-theme="win95"] .theme-card,
html[data-theme="win95"] .placeholder-shot {
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  border-radius: 0;
  background: #c0c0c0;
  box-shadow: var(--shadow-tight), inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

.feature-card,
.commerce-card,
.support-card,
.workflow-grid article,
.theme-card {
  min-height: 238px;
  padding: 22px;
}

.feature-card {
  min-height: 390px;
}

.feature-card h3,
.commerce-card h3,
.support-card h3,
.catalog-panel h3,
.wide-panel h3,
.workflow-grid h3,
.theme-card h3 {
  margin: 0 0 10px;
  font-size: 1.18rem;
  line-height: 1.2;
}

.feature-card p,
.commerce-card p,
.support-card p,
.catalog-panel p,
.wide-panel p,
.workflow-grid p,
.theme-card p {
  margin: 0;
  color: var(--muted);
}

.feature-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
}

.feature-list li {
  position: relative;
  padding-left: 20px;
}

.feature-list li::before {
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 7px;
  height: 7px;
  content: "";
  background: var(--accent-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}

html[data-theme="liquid"] .feature-list li::before {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.88), transparent 38%),
    linear-gradient(180deg, #44d76f, #34c759);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 2px 7px rgba(52, 199, 89, 0.18);
}

html[data-theme="cde"] .feature-list {
  color: #f5ead1;
}

html[data-theme="cde"] .feature-list li::before {
  width: 8px;
  height: 8px;
  background: #f4d45d;
  border-color: #fff4ce;
  border-radius: 0;
  box-shadow: 2px 2px 0 #182d37;
}

html[data-theme="win95"] .feature-list {
  color: #000000;
}

html[data-theme="win95"] .feature-list li::before {
  top: 0.62em;
  width: 9px;
  height: 9px;
  background: #000080;
  border: 1px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  border-radius: 0;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
}

.feature-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 32px;
  margin-bottom: 18px;
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 900;
  background: var(--accent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

html[data-theme="cde"] .feature-glyph,
html[data-theme="cde"] .commerce-kicker,
html[data-theme="cde"] .support-glyph {
  color: #1b2740;
  background: #f4d45d;
  border-color: #fff4ce;
  box-shadow: 3px 3px 0 #182d37;
}

html[data-theme="win95"] .feature-glyph,
html[data-theme="win95"] .commerce-kicker,
html[data-theme="win95"] .support-glyph {
  color: #ffffff;
  background: #000080;
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  border-radius: 0;
  box-shadow: inset -1px -1px 0 #000000, inset 1px 1px 0 #8080ff;
}

html[data-theme="liquid"] .feature-glyph,
html[data-theme="liquid"] .commerce-kicker,
html[data-theme="liquid"] .support-glyph {
  color: #0066cc;
  font-family: var(--font-ui);
  font-weight: 760;
  border-color: rgba(0, 102, 204, 0.14);
  background: rgba(0, 102, 204, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 18px rgba(29, 29, 31, 0.06);
}

html[data-theme="liquid"] .support-card:nth-child(2) .support-glyph {
  color: #248a3d;
  border-color: rgba(52, 199, 89, 0.18);
  background: rgba(52, 199, 89, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 18px rgba(29, 29, 31, 0.06);
}

html[data-theme="liquid"] .support-card:nth-child(3) .support-glyph {
  color: #d70015;
  border-color: rgba(215, 0, 21, 0.18);
  background: rgba(255, 55, 95, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 18px rgba(29, 29, 31, 0.06);
}

.commerce-section {
  background: color-mix(in srgb, var(--page-band) 62%, transparent);
}

html[data-theme="liquid"] .commerce-section,
html[data-theme="liquid"] .support-section,
html[data-theme="liquid"] .visual-section {
  background:
    linear-gradient(180deg, rgba(245, 247, 251, 0.72), rgba(255, 255, 255, 0.36));
}

.commerce-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.commerce-card {
  min-height: 430px;
  padding: 28px;
}

.commerce-card h3 {
  margin-bottom: 12px;
  font-size: 1.65rem;
}

.commerce-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 9px;
  margin-bottom: 18px;
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  background: var(--accent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.commerce-list {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
}

.commerce-list li {
  position: relative;
  padding-left: 22px;
}

.commerce-list li::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--accent-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.commerce-button {
  margin-top: 26px;
}

.commerce-note {
  min-height: 24px;
  margin-top: 14px;
  font-size: 0.92rem;
}

.price-lockup {
  display: grid;
  gap: 2px;
  margin-top: 20px;
  padding: 18px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

html[data-theme="liquid"] .price-lockup,
html[data-theme="liquid"] .checkout-status:not(:empty),
html[data-theme="liquid"] .support-track-panel,
html[data-theme="liquid"] .module-list div,
html[data-theme="liquid"] .ticket-summary div,
html[data-theme="liquid"] .reply-card {
  border-color: rgba(29, 29, 31, 0.07);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 8px 20px rgba(29, 29, 31, 0.05);
}

.price-lockup strong {
  font-size: 2.1rem;
  line-height: 1;
}

.price-lockup span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
}

.checkout-status:empty {
  display: none;
}

.checkout-status:not(:empty) {
  padding: 10px 12px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.support-section {
  background: color-mix(in srgb, var(--page-band) 46%, transparent);
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.support-card {
  display: flex;
  min-height: 318px;
  flex-direction: column;
}

.support-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 900;
  background: var(--accent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.support-card:nth-child(2) .support-glyph {
  background: var(--accent-2);
}

.support-card:nth-child(3) .support-glyph {
  background: var(--accent-3);
}

.support-button {
  align-self: flex-start;
  margin-top: auto;
}

.support-track-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-tight);
}

html[data-theme="liquid"] .support-track-panel {
  -webkit-backdrop-filter: saturate(175%) blur(18px);
  backdrop-filter: saturate(175%) blur(18px);
}

html[data-theme="cde"] .support-track-panel {
  border-width: 2px;
}

html[data-theme="win95"] .support-track-panel {
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  border-radius: 0;
  box-shadow: var(--shadow-tight), inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

.support-track-panel h3,
.support-track-panel p {
  margin: 0;
}

.support-track-panel p {
  color: var(--muted);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow-y: auto;
  background: rgba(8, 18, 28, 0.42);
}

.support-modal {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  padding: 28px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.compact-modal {
  width: min(560px, 100%);
}

html[data-theme="liquid"] .support-modal {
  border-color: rgba(29, 29, 31, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(247, 248, 252, 0.74)),
    rgba(255, 255, 255, 0.58);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(185%) blur(28px);
  backdrop-filter: saturate(185%) blur(28px);
}

html[data-theme="cde"] .support-modal {
  border-width: 2px;
}

html[data-theme="win95"] .support-modal {
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  border-radius: 0;
  box-shadow: var(--shadow), inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

.support-modal h2 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
}

.support-modal h3 {
  margin: 0 0 10px;
}

.modal-intro {
  margin: 12px 0 0;
  color: var(--muted);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  min-height: 32px;
  padding: 0 10px;
  color: var(--text);
  cursor: pointer;
  background: var(--surface-muted);
  border: var(--control-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--control-shadow);
}

.support-form {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-field {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.form-field span {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  text-transform: uppercase;
}

.form-field small {
  color: var(--muted);
  font-weight: 700;
}

.form-field input,
.form-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 11px;
  color: var(--text);
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

html[data-theme="liquid"] .form-field input,
html[data-theme="liquid"] .form-field textarea,
html[data-theme="liquid"] .modal-close {
  border-color: rgba(29, 29, 31, 0.08);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 6px 16px rgba(29, 29, 31, 0.06);
}

.form-field textarea {
  resize: vertical;
}

.form-field input[type="file"] {
  padding: 9px;
}

.form-field .errorlist,
.form-errors .errorlist {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  color: var(--error);
  font-size: 0.9rem;
  font-weight: 700;
  list-style: none;
}

.form-errors {
  padding: 10px 12px;
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-3) 12%, var(--surface));
}

.captcha-error {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  color: var(--text);
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-3) 13%, var(--surface));
}

.captcha-error strong {
  color: var(--error);
  font-size: 0.92rem;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

.ticket-summary {
  display: grid;
  gap: 10px;
  margin: 22px 0;
}

.ticket-summary div {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.ticket-summary dt {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ticket-summary dd {
  margin: 0;
  color: var(--text);
  font-weight: 800;
}

.reply-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.reply-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.reply-card strong,
.reply-card time {
  display: block;
}

.reply-card time {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.reply-card p {
  margin: 10px 0 0;
  color: var(--text);
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 18px;
}

.catalog-panel {
  padding: 22px;
}

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.chip-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
}

html[data-theme="liquid"] .chip-grid span {
  color: #2f3742;
  font-family: var(--font-ui);
  font-weight: 700;
  border-color: rgba(29, 29, 31, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 5px 14px rgba(29, 29, 31, 0.05);
}

html[data-theme="win95"] .chip-grid span {
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
}

.module-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.module-list div {
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.module-list strong,
.module-list span {
  display: block;
}

.module-list span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.94rem;
}

.wide-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.4fr) minmax(0, 0.6fr);
  gap: 22px;
  align-items: start;
  margin-top: 18px;
  padding: 24px;
}

.compact-chips {
  margin-top: 0;
}

.visual-section {
  background: color-mix(in srgb, var(--page-band) 68%, transparent);
}

.placeholder-shot {
  margin: 0;
  overflow: hidden;
}

.shot-art {
  display: grid;
  gap: 10px;
  min-height: 210px;
  padding: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 80%, transparent), color-mix(in srgb, var(--surface-strong) 72%, transparent));
}

html[data-theme="liquid"] .shot-art {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(239, 243, 249, 0.58)),
    rgba(255, 255, 255, 0.34);
}

html[data-theme="liquid"] .dock-shot span,
html[data-theme="liquid"] .panel-shot span,
html[data-theme="liquid"] .theme-shot span {
  border-color: rgba(29, 29, 31, 0.07);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 10px 20px rgba(29, 29, 31, 0.08);
}

html[data-theme="cde"] .shot-art {
  background:
    linear-gradient(180deg, #7aaec2 0 28px, #c2c4ce 28px 100%),
    var(--surface);
  box-shadow: inset 0 0 0 2px #f4d45d;
}

html[data-theme="win95"] .shot-art {
  background:
    linear-gradient(180deg, #000080 0 28px, #008080 28px 100%);
  box-shadow: inset -2px -2px 0 #808080, inset 2px 2px 0 #ffffff;
}

.dock-shot {
  align-content: end;
  grid-template-columns: repeat(5, 1fr);
}

.dock-shot span {
  height: 54px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--accent);
}

html[data-theme="cde"] .dock-shot span,
html[data-theme="cde"] .panel-shot span,
html[data-theme="cde"] .theme-shot span {
  border-width: 2px;
  border-color: #fff4ce #182d37 #182d37 #fff4ce;
  border-radius: 0;
}

html[data-theme="win95"] .dock-shot span,
html[data-theme="win95"] .panel-shot span,
html[data-theme="win95"] .theme-shot span {
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
}

.dock-shot span:nth-child(2) {
  background: var(--accent-2);
}

.dock-shot span:nth-child(3) {
  background: var(--surface-strong);
}

.dock-shot span:nth-child(4) {
  background: var(--accent-3);
}

.panel-shot {
  grid-template-columns: 0.7fr 1fr;
}

.panel-shot span {
  min-height: 78px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
}

.panel-shot span:first-child {
  grid-row: span 2;
  background: var(--accent);
}

.theme-shot {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

.theme-shot span {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.theme-shot span:nth-child(1) {
  background: var(--accent);
}

.theme-shot span:nth-child(2) {
  background: var(--accent-2);
}

.theme-shot span:nth-child(3) {
  background: var(--accent-3);
}

.placeholder-shot figcaption {
  padding: 14px 16px 16px;
  color: var(--muted);
  font-weight: 700;
}

html[data-theme="cde"] .placeholder-shot figcaption {
  color: #fff4ce;
  font-family: var(--font-mono);
}

html[data-theme="win95"] .placeholder-shot figcaption {
  color: #000000;
  font-family: var(--font-ui);
  font-weight: 800;
}

.theme-card {
  min-height: 276px;
}

.theme-swatch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  min-height: 110px;
  margin-bottom: 18px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

html[data-theme="liquid"] .theme-swatch {
  border-color: rgba(29, 29, 31, 0.07);
  background: rgba(255, 255, 255, 0.50);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

html[data-theme="liquid"] .theme-swatch span {
  border-color: rgba(29, 29, 31, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 8px 18px rgba(29, 29, 31, 0.06);
}

.theme-swatch span {
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius-sm) - 2px);
}

.liquid-swatch .theme-swatch span:nth-child(1) {
  background: rgba(255, 255, 255, 0.72);
}

.liquid-swatch .theme-swatch span:nth-child(2) {
  background: #0066cc;
}

.liquid-swatch .theme-swatch span:nth-child(3) {
  background: #7de5d0;
}

.cde-swatch .theme-swatch span:nth-child(1) { background: #c2c4ce; }
.cde-swatch .theme-swatch span:nth-child(2) { background: #7aaec2; }
.cde-swatch .theme-swatch span:nth-child(3) { background: #f5e84c; }

.win95-swatch .theme-swatch span:nth-child(1) {
  background: #c0c0c0;
}

.win95-swatch .theme-swatch span:nth-child(2) {
  background: #000080;
}

.win95-swatch .theme-swatch span:nth-child(3) {
  background: #008080;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 104px;
  padding: 22px var(--page-x);
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--surface-strong);
}

html[data-theme="liquid"] .site-footer {
  border-top-color: rgba(29, 29, 31, 0.08);
  background: rgba(251, 251, 253, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
}

.site-footer strong,
.site-footer span {
  display: block;
}

.site-footer strong {
  color: var(--text);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.footer-links a {
  color: var(--muted);
  font-weight: 800;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
  text-decoration: underline;
}

.legal-page {
  padding: 72px var(--page-x);
}

.legal-hero {
  max-width: 820px;
  margin-bottom: 30px;
}

.legal-hero h1 {
  margin: 0;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: 0;
}

.legal-hero p:not(.eyebrow) {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.legal-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.legal-card {
  min-height: 220px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-tight);
}

html[data-theme="liquid"] .legal-card {
  border-color: rgba(29, 29, 31, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 248, 252, 0.54)),
    rgba(255, 255, 255, 0.44);
  box-shadow: 0 18px 44px rgba(29, 29, 31, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(175%) blur(20px);
  backdrop-filter: saturate(175%) blur(20px);
}

html[data-theme="cde"] .legal-card {
  border-width: 2px;
}

html[data-theme="win95"] .legal-card {
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  border-radius: 0;
  box-shadow: var(--shadow-tight), inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}

.legal-card h2 {
  margin: 0 0 14px;
  font-size: 1.35rem;
  line-height: 1.2;
}

.legal-card p {
  margin: 0;
  color: var(--muted);
}

.legal-list {
  display: grid;
  gap: 14px;
  margin: 0;
}

.legal-list div {
  display: grid;
  gap: 3px;
}

.legal-list dt {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.legal-list dd {
  margin: 0;
  color: var(--muted);
}

html[data-theme="cde"] .eyebrow,
html[data-theme="cde"] .panel-title,
html[data-theme="cde"] .switcher-label,
html[data-theme="cde"] .chip-grid span,
html[data-theme="cde"] .feature-glyph,
html[data-theme="cde"] .legal-list dt {
  text-transform: uppercase;
}

html[data-theme="win95"] .eyebrow,
html[data-theme="win95"] .panel-title,
html[data-theme="win95"] .switcher-label,
html[data-theme="win95"] .chip-grid span,
html[data-theme="win95"] .legal-list dt {
  text-transform: none;
}

html[data-theme="win95"] .hero-copy .eyebrow,
html[data-theme="win95"] .hero-copy .lede,
html[data-theme="win95"] .hero-points,
html[data-theme="win95"] .legal-hero .eyebrow,
html[data-theme="win95"] .legal-hero p:not(.eyebrow) {
  color: #ffffff;
}

@media (max-width: 1080px) {
  .nav-shell {
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .nav-links {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .theme-switcher {
    margin-left: auto;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 34px;
    min-height: 0;
  }

  .hero h1 {
    font-size: 4.4rem;
  }

  html[data-theme="liquid"] .hero h1 {
    font-size: 4.4rem;
  }

  .feature-grid,
  .support-grid,
  .workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .hero {
    padding-top: 34px;
  }

  .hero h1 {
    font-size: 3.25rem;
  }

  html[data-theme="liquid"] .hero h1 {
    font-size: 3.25rem;
  }

  .lede {
    font-size: 1.08rem;
  }

  html[data-theme="liquid"] .lede {
    font-size: 1.08rem;
  }

  .desktop-placeholder {
    min-height: 410px;
  }

  html[data-theme="liquid"] .desktop-placeholder {
    min-height: 430px;
    padding: 64px 14px 98px;
  }

  .desktop-grid,
  .intro-band,
  .split-layout,
  .wide-panel,
  .commerce-grid,
  .form-grid,
  .legal-layout,
  .theme-card-grid,
  .placeholder-grid {
    grid-template-columns: 1fr;
  }

  .feature-grid,
  .support-grid,
  .workflow-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .section-heading h2 {
    font-size: 2.05rem;
  }
}

@media (max-width: 640px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .site-header {
    position: static;
  }

  .nav-shell {
    align-items: stretch;
  }

  .brand,
  .theme-switcher,
  .nav-links {
    width: 100%;
  }

  .theme-switcher {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .switcher-label {
    grid-column: 1 / -1;
    padding: 4px 8px 0;
  }

  .theme-switcher button {
    width: 100%;
  }

  .nav-links {
    flex-wrap: wrap;
    gap: 12px;
  }

  .hero {
    padding-top: 26px;
  }

  .hero-copy,
  .lede,
  .hero-points {
    max-width: 100%;
  }

  html[data-theme="liquid"] .hero-copy,
  html[data-theme="liquid"] .lede,
  html[data-theme="liquid"] .hero-points {
    width: 100%;
    max-width: 100%;
  }

  .lede,
  .hero-points li {
    overflow-wrap: anywhere;
  }

  .hero h1 {
    font-size: 2.72rem;
  }

  html[data-theme="liquid"] .hero {
    gap: 26px;
    padding-top: 32px;
  }

  html[data-theme="liquid"] .hero h1 {
    font-size: 2.72rem;
  }

  .hero-actions {
    display: grid;
  }

  .button {
    width: 100%;
  }

  .desktop-placeholder {
    min-height: 360px;
    padding: 10px;
  }

  html[data-theme="liquid"] .desktop-placeholder {
    min-height: 372px;
    padding: 58px 10px 82px;
    border-radius: 26px;
  }

  .desktop-bar {
    display: grid;
    gap: 2px;
    align-content: center;
    min-height: 44px;
  }

  html[data-theme="liquid"] .desktop-bar {
    min-height: 48px;
    padding: 0 12px 0 62px;
    border-radius: 26px 26px 0 0;
  }

  html[data-theme="liquid"] .desktop-bar::before {
    left: 14px;
    width: 10px;
    height: 10px;
    box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #28c840;
  }

  .preview-panel {
    min-height: 112px;
  }

  .stats-panel,
  .media-panel {
    display: none;
  }

  .dock-preview {
    right: 14px;
    left: 14px;
    gap: 4px;
    padding: 6px;
    overflow: hidden;
  }

  html[data-theme="liquid"] .dock-preview {
    left: 50%;
    width: calc(100% - 28px);
    min-height: 54px;
    padding: 7px;
    border-radius: 22px;
    transform: translateX(-50%);
  }

  .dock-tile,
  .dock-widget {
    width: 28px;
    height: 32px;
    font-size: 0.58rem;
  }

  html[data-theme="liquid"] .dock-tile,
  html[data-theme="liquid"] .dock-widget {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 0.55rem;
  }

  .dock-tile.start-tile {
    width: 54px;
  }

  html[data-theme="liquid"] .dock-tile.start-tile {
    width: 38px;
    background:
      url("icons/app-icon-128.png") center / 24px 24px no-repeat,
      linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(242, 245, 250, 0.48)),
      rgba(255, 255, 255, 0.58);
  }

  .dock-tile::before {
    width: 18px;
    height: 18px;
  }

  html[data-theme="liquid"] .dock-tile::before {
    width: 20px;
    height: 20px;
    border-radius: 7px;
  }

  .dock-widget {
    width: 38px;
  }

  html[data-theme="liquid"] .dock-widget {
    width: 42px;
  }

  .site-footer {
    display: grid;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .legal-page {
    padding-top: 46px;
    padding-bottom: 46px;
  }

  .legal-hero h1 {
    font-size: 2.72rem;
  }

  .support-track-panel,
  .modal-actions {
    display: grid;
  }

  .modal-actions .button,
  .support-track-panel .button {
    width: 100%;
  }

  .support-modal {
    padding: 22px;
  }
}

@media (max-width: 640px) {
  .dock-preview .dock-tile,
  .dock-preview .dock-widget {
    flex-shrink: 1;
    min-width: 0;
  }

  html[data-theme="win95"] .dock-preview {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)) repeat(2, minmax(0, 1.3fr)) minmax(0, 1fr);
  }

  html[data-theme="win95"] .dock-preview .dock-tile,
  html[data-theme="win95"] .dock-preview .dock-widget {
    width: 100%;
    min-width: 0;
  }
}

.support-modal:focus {
  outline: none;
}

.support-form button:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Homepage product tour. Shared support and legal surfaces retain their layout. */
.homepage {
  --page-x: max(24px, calc((100% - 1180px) / 2));
}
.homepage .nav-shell { gap: 20px; min-height: 76px; }
.homepage .nav-links { gap: 20px; font-size: .86rem; }
.homepage .nav-download { color: var(--accent); font-weight: 750; }
.homepage .theme-switcher { margin-left: 0; }
.homepage .switcher-label { display: none; }
.feature-nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--page-x);
  border-top: 1px solid var(--border);
  font-size: .78rem;
}
.feature-jumps { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.feature-jumps a { padding: 11px 0; color: var(--muted); text-decoration: none; }
.feature-jumps a:hover { color: var(--accent); }
.feature-menu { position: relative; flex: 0 0 auto; }
.feature-menu > summary { padding: 11px 0; cursor: pointer; font-weight: 700; }
.feature-menu-content {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  width: min(870px, calc(100vw - 48px));
  max-height: 70vh;
  overflow: auto;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  backdrop-filter: blur(32px);
  box-shadow: var(--shadow);
}
.feature-menu-content div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.feature-menu-content strong { margin: 3px 0 6px; color: var(--accent); }
.feature-menu-content a { padding: 3px 0; text-decoration: none; }
.feature-menu-content a:hover { text-decoration: underline; }
.homepage :is(a, button, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.homepage [id] { scroll-margin-top: 148px; }
.homepage .homepage-hero,
html[data-theme="liquid"] .homepage .homepage-hero {
  display: flex;
  flex-direction: column;
  gap: 46px;
  min-height: auto;
  padding-top: 72px;
  padding-bottom: 68px;
}
.homepage .homepage-hero::before { display: none; }
.homepage-hero .hero-copy { max-width: 780px; text-align: center; }
.homepage .homepage-hero h1,
html[data-theme="liquid"] .homepage .homepage-hero h1 {
  max-width: none;
  font-size: clamp(3.4rem, 6.4vw, 6.25rem);
  line-height: .99;
  letter-spacing: -.055em;
}
.homepage .homepage-hero .lede { margin: 24px auto 0; max-width: 620px; font-size: 1.2rem; line-height: 1.6; }
.homepage-hero .hero-actions { justify-content: center; margin-top: 28px; }
.hero-caption { margin: 24px 0 0; color: var(--muted); font-size: .82rem; }
.native-dock-stage {
  width: 100%;
  min-width: 0;
  padding: 28px 28px 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: radial-gradient(ellipse at 18% 40%, #b1ddd5 0, transparent 57%), radial-gradient(ellipse at 83% 60%, #a4bfe9 0, transparent 55%), #dae4f4;
  box-shadow: var(--shadow-tight);
}
.stage-heading,
.stage-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #23364a; font-size: .75rem; }
.stage-heading strong { font-weight: 700; }
.stage-caption { font-size: .7rem; }
.native-dock-preview { margin: 0; }
.native-dock-preview a { display: block; cursor: zoom-in; border-radius: var(--radius-sm); }
.native-dock-preview img { width: 100%; height: auto; object-fit: contain; }
.native-dock-stage .native-dock-preview { margin: 30px 0; }
.native-dock-preview figcaption { display: flex; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: .76rem; color: #23364a; }
.secondary-dock-stage { margin: 30px 0; background: radial-gradient(ellipse at 70% 80%, #384660, transparent 65%), #1e293b; }
.secondary-dock-stage .native-dock-preview { margin: 0; }
.secondary-dock-stage figcaption { color: #edf2f9; }
.homepage .section { padding-top: 76px; padding-bottom: 76px; }
.homepage .section-heading { max-width: 780px; margin-bottom: 30px; }
.homepage .section-heading h2 { font-size: clamp(2rem, 3.8vw, 3.15rem); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.homepage .section-heading > p:not(.eyebrow) { max-width: 710px; font-size: 1.05rem; line-height: 1.65; }
.homepage .eyebrow { font-size: .74rem; letter-spacing: .08em; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 32px 0; }
.benefit-grid h3 { margin: 14px 0 8px; font-size: 1.1rem; }
.benefit-grid p { margin: 0; color: var(--muted); font-size: .93rem; }
.homepage .feature-glyph { font-size: 1.2rem; }
.feature-details {
  margin: 22px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.feature-details > summary { padding: 18px 20px; font-size: .92rem; font-weight: 650; cursor: pointer; }
.feature-details[open] > summary { border-bottom: 1px solid var(--border); }
.feature-details > :not(summary) { margin: 20px; }
.feature-details .workflow-grid { gap: 22px; }
.homepage .feature-details .workflow-grid article {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  overflow: visible;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.homepage .feature-details .workflow-grid article::before { content: none; }
.homepage .feature-details .workflow-grid h3 { font-size: .98rem; }
.homepage .feature-details .workflow-grid p { font-size: .9rem; line-height: 1.65; }
.homepage :is([class$="preview-gallery"], .macos-tweaks-preview-gallery) { gap: 20px; }
.homepage [data-preview-link] { cursor: zoom-in; }
.homepage [data-preview-link] img { max-height: 410px; object-fit: contain; }
.homepage .native-dock-preview img { max-height: none; }
.homepage .more-previews [data-preview-link] img { max-height: 480px; }
.homepage :is(.island-more-previews, .drop-zone-more-previews, .calendar-more-previews) { box-shadow: none; margin-top: 22px; }
.homepage .history-section > .section { padding: 30px 0 34px; background: transparent; }
.homepage .history-section > .section + .section { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 48px; }
.homepage .history-section > .section .section-heading h2 { font-size: 2.1rem; }
.widget-category-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 36px; }
.widget-category-nav a { padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: .82rem; text-decoration: none; }
.widget-category-nav a:hover { color: var(--accent); border-color: var(--accent); }
.widget-group + .widget-group { margin-top: 36px; }
.widget-group > h3 { font-size: 1.12rem; margin: 0 0 16px; }
.widget-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.widget-disclosure { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.widget-disclosure > summary { position: relative; display: grid; gap: 4px; padding: 20px 52px 20px 22px; list-style: none; cursor: pointer; }
.widget-disclosure > summary::-webkit-details-marker { display: none; }
.widget-name { font-weight: 720; font-size: .98rem; color: var(--text); }
.widget-description { font-size: .84rem; color: var(--muted); }
.disclosure-mark { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--accent); }
.widget-disclosure[open] { grid-column: 1 / -1; }
.widget-disclosure[open] > summary { border-bottom: 1px solid var(--border); }
.widget-disclosure[open] > summary .disclosure-mark { transform: translateY(-50%) rotate(45deg); }
.homepage .widget-disclosure > .section { padding: 28px; background: var(--surface-strong); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.homepage .widget-disclosure .section-heading h2 { font-size: 1.8rem; }
.homepage .widget-disclosure .section-heading p { font-size: .98rem; }
.homepage .widget-disclosure .eyebrow { display: none; }
.dock-section > .widget-disclosure,
.customization-section > .widget-disclosure { margin-top: 12px; }
.widget-footnote { margin: 30px 0 0; color: var(--muted); font-size: .9rem; }
.homepage .theme-section { margin: 36px 0; }
.theme-choice-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; color: var(--text); font: inherit; cursor: pointer; }
.theme-choice-card .theme-number { color: var(--accent); font: .8rem var(--font-mono); }
.theme-choice-card strong { font-size: 1.2rem; }
.theme-choice-card > span:last-child { color: var(--muted); font-size: .9rem; }
.theme-choice-card[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-choice-card:hover { border-color: var(--accent); }
.homepage button:disabled { cursor: default; opacity: .65; }
html[data-theme="cde"] .native-dock-stage { background: linear-gradient(135deg, #6e9baf, #a0bccb); border: 3px ridge #d2d5df; }
html[data-theme="cde"] .secondary-dock-stage { background: #344656; }
html[data-theme="cde"] :is(.widget-disclosure, .feature-details, .feature-menu-content) { border: 2px outset #d2d5df; }
html[data-theme="win95"] .native-dock-stage { background: #008080; border: 2px solid; border-color: #fff #000 #000 #fff; box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf; }
html[data-theme="win95"] .stage-heading,
html[data-theme="win95"] .stage-caption { color: white; }
html[data-theme="win95"] .secondary-dock-stage { background: #004b4b; }
html[data-theme="win95"] :is(.widget-disclosure, .feature-details, .feature-menu-content) { border: 2px solid; border-color: #fff #000 #000 #fff; box-shadow: inset -1px -1px #808080; }
html[data-theme="win95"] .homepage :is(.hero-caption, .widget-footnote, .widget-group > h3, .benefit-grid h3, .benefit-grid p) { color: #fff; }
html[data-theme="win95"] .homepage .widget-disclosure :is(.section-heading h2, .section-heading h3, .section-heading p, .preview-note),
html[data-theme="win95"] .homepage .feature-details :is(h3, p) { color: var(--text); }
html[data-theme="win95"] .homepage .theme-section > .section-heading { color: white; }
html[data-theme="win95"] .homepage .theme-section > .section-heading p { color: white; }
html[data-theme="win95"] .homepage .theme-choice-card { color: var(--text); }
@media (max-width: 1100px) {
  .homepage .nav-shell { flex-wrap: wrap; gap: 12px 22px; padding-top: 14px; padding-bottom: 14px; }
  .homepage .nav-links { order: 3; width: 100%; justify-content: center; margin: 0; }
  .homepage .theme-switcher { margin-left: auto; }
  .homepage [id] { scroll-margin-top: 196px; }
}
@media (max-width: 760px) {
  .homepage { --page-x: 22px; }
  .homepage .site-header { position: static; }
  .homepage .nav-shell { align-items: center; }
  .homepage .brand { width: auto; }
  .homepage .theme-switcher { width: auto; }
  .homepage .theme-switcher button { padding: 8px; font-size: .73rem; }
  .homepage .nav-links { gap: 12px 20px; flex-wrap: wrap; font-size: .8rem; }
  .feature-nav-shell { align-items: flex-start; padding-top: 4px; padding-bottom: 4px; }
  .feature-jumps { gap: 0 14px; }
  .feature-jumps a { padding: 8px 0; }
  .feature-menu-content { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px; gap: 22px 14px; max-height: 65vh; }
  .homepage [id] { scroll-margin-top: 24px; }
  .homepage .homepage-hero,
  html[data-theme="liquid"] .homepage .homepage-hero { gap: 30px; padding-top: 46px; padding-bottom: 44px; }
  .homepage .homepage-hero .lede { font-size: 1.05rem; }
  .homepage .section { padding-top: 48px; padding-bottom: 48px; }
  .native-dock-stage { padding: 18px 10px; }
  .native-dock-stage .native-dock-preview { margin: 22px 0; }
  .stage-heading,
  .stage-caption { padding: 0 4px; font-size: .65rem; }
  .stage-caption > span:last-child { display: none; }
  .benefit-grid { grid-template-columns: 1fr; gap: 22px; }
  .benefit-grid article { padding-left: 54px; position: relative; }
  .benefit-grid .feature-glyph { position: absolute; left: 0; top: 10px; }
  .widget-list { grid-template-columns: 1fr; }
  .homepage .widget-disclosure > .section { padding: 20px 14px; }
  .homepage [data-preview-link] img { max-height: 320px; }
  .homepage .native-dock-preview img { max-height: none; }
  .feature-details > :not(summary) { margin: 16px; }
  .homepage .history-section > .section .section-heading h2 { font-size: 1.8rem; }
}
@media (max-width: 420px) {
  .homepage { --page-x: 16px; }
  .homepage .nav-shell { justify-content: center; gap: 12px; }
  .homepage .theme-switcher { margin-left: 0; width: 100%; }
  .homepage .nav-links { gap: 10px 14px; }
  .feature-nav-shell { gap: 12px; font-size: .7rem; }
  .feature-menu-content { width: calc(100vw - 32px); }
  .homepage .homepage-hero h1,
  html[data-theme="liquid"] .homepage .homepage-hero h1 { font-size: 3.5rem; }
}
html[data-theme="win95"] .homepage main > .section { background: transparent; }
html[data-theme="win95"] .homepage main > .section > .section-heading,
html[data-theme="win95"] .homepage main > .section > .section-heading p,
html[data-theme="win95"] .homepage #history > .section > .section-heading,
html[data-theme="win95"] .homepage #history > .section > .section-heading p { color: white; }
html[data-theme="win95"] .homepage :is(#widgets, #features, #customization) .widget-disclosure :is(.section-heading p, [class*="preview-note"]) { color: var(--muted); }
.homepage .desktop-switcher-preview-layouts { display: flex; flex-direction: column; align-items: stretch; }
.homepage .desktop-switcher-preview-layouts .side-dock-preview { margin: 12px 0 0; }
html[data-theme="win95"] .homepage :is(#widgets, #features, #customization) .widget-disclosure > section { background: var(--surface-strong); }
.homepage .homepage-hero,
html[data-theme="liquid"] .homepage .homepage-hero { padding-top: 52px; padding-bottom: 48px; gap: 32px; }
.homepage .homepage-hero h1,
html[data-theme="liquid"] .homepage .homepage-hero h1 { font-size: clamp(3.4rem, 6vw, 5.4rem); }
.homepage .homepage-hero .hero-actions { margin-top: 22px; }
.homepage .hero-caption { margin-top: 18px; }
@media (max-width: 760px) {
  .homepage .homepage-hero,
  html[data-theme="liquid"] .homepage .homepage-hero { padding-top: 36px; gap: 28px; }
}
@media (max-width: 600px) {
  .homepage .nav-shell { justify-content: space-between; }
  .homepage .nav-links { order: initial; width: auto; margin-left: auto; }
  .homepage .nav-links a:not(.nav-download) { display: none; }
  .homepage .theme-switcher { order: 3; width: 100%; margin-left: 0; }
  .feature-jumps { min-width: 0; flex-wrap: nowrap; gap: 18px; overflow-x: auto; scrollbar-width: thin; }
  .feature-jumps a { white-space: nowrap; }
  .feature-menu > summary { white-space: nowrap; }
  .homepage .homepage-hero .hero-actions { gap: 10px; }
  .homepage .homepage-hero .hero-actions .button { min-height: 44px; padding: 10px 16px; }
}