/* Neutral frosted surfaces; typography and content remain the focal point. */
html:root { --ink: #25282e; --muted: #686c75; --surface: #f2f3f6; --page-text: #292c32; color: var(--page-text); background: var(--surface); }
html:root[data-appearance="dark"] { --ink: #edeef2; --muted: #b0b3bd; --surface: #181a20; --page-text: #edeef2; }
html .page-shell::before { background: radial-gradient(ellipse at 80% 25%, #d9e0ed90, transparent 55%), radial-gradient(ellipse at 12% 80%, #ece1e980, transparent 50%); }
html:root[data-appearance="dark"] .page-shell::before { opacity: .12; }
html .hero h1 .headline-accent { color: #707784; }
html:root[data-appearance="dark"] .hero h1 .headline-accent { color: #b7bdcb; }
html :is(.eyebrow,.intro,.invitation-note,.site-footer,.footer-tagline,.native-caption,#scene-title,#native-status,.dictionary-state,.carousel-navigation) { color: var(--muted); }
html:root[data-appearance="dark"] :is(.eyebrow,.intro,.invitation-note,.site-footer,.footer-tagline,.native-caption,#scene-title,#native-status,.dictionary-state,.carousel-navigation) { color: var(--muted); }
html .brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; }
html .brand img { width: 36px; height: 36px; border-radius: 10px; flex: none; }
html .brand span { display: block; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; font-size: 24px; font-weight: 650; line-height: 1; letter-spacing: -.65px; transform: translateY(1px); }
html .apply-button, html .dialog-actions .apply-button { justify-content: center; min-height: 54px; padding: 0 30px; gap: 0; font-size: 15px; font-weight: 550; letter-spacing: .02em; color: var(--ink); background: linear-gradient(145deg,#ffffffb8,#ffffff45); border: 1px solid #ffffffd0; box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #ffffff60, 0 8px 26px #232b3c12; backdrop-filter: blur(24px) saturate(1.25); -webkit-backdrop-filter: blur(24px) saturate(1.25); }
html .apply-button:hover { box-shadow: inset 0 1px 1px #fff, 0 10px 30px #232b3c1c; }
html .value-symbol, html #carousel-toggle { color: #626b7a; background: #ffffff50; box-shadow: inset 0 1px 1px #fff, 0 4px 16px #232b3c07; backdrop-filter: blur(16px); }
html dialog { color: var(--ink); background: #f5f6f8c9; border: 1px solid #ffffffd0; box-shadow: inset 0 1px 1px #fff, 0 32px 90px #18213325; backdrop-filter: blur(36px) saturate(1.35); -webkit-backdrop-filter: blur(36px) saturate(1.35); }
html dialog::backdrop { background: #262b3624; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
html dialog :is(.dialog-eyebrow,.copy-status), html dialog p:not(.dialog-eyebrow):not(.copy-status) { color: var(--muted); }
html .dialog-close { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: #ffffff60; }
.dialog-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
html dialog .email-address { display: block; width: fit-content; max-width: 100%; border: 0; background: none; padding: 8px 0; margin-top: 22px; color: var(--ink); cursor: pointer; font: 500 clamp(18px,4.8vw,22px)/1.4 -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing: -.35px; user-select: text; }
html .dialog-actions { gap: 20px; flex-wrap: wrap; }
html .copy-button { color: var(--muted); }
html:root[data-appearance="dark"] :is(.apply-button,.dialog-actions .apply-button,#carousel-toggle) { color: var(--ink); background: linear-gradient(145deg,#ffffff20,#ffffff09); border-color: #ffffff25; box-shadow: inset 0 1px 1px #ffffff30,0 8px 26px #0002; }
html:root[data-appearance="dark"] dialog { background: #292c35d9; border-color: #ffffff24; box-shadow: inset 0 1px 1px #ffffff20,0 32px 90px #0006; }
html:root[data-appearance="dark"] dialog :is(.dialog-eyebrow,.copy-status),html:root[data-appearance="dark"] dialog p:not(.dialog-eyebrow):not(.copy-status) { color: var(--muted); }
html:root[data-appearance="dark"] .dialog-close { background: #ffffff12; }
html :focus-visible { outline-color: #657fa9; }
.letter-page { background: radial-gradient(ellipse at 80% 0,#dbe3ef70,transparent 50%),radial-gradient(ellipse at 0 40%,#e8dfe970,transparent 50%); }
.letter-page header { position: sticky; top: 0; z-index: 10; max-width: none; padding: 16px max(24px,calc((100vw - 996px)/2)); background: #f6f7f9a6; border-bottom: 1px solid #ffffffb0; backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(28px) saturate(1.3); }
.letter-page main { scroll-margin-top: 100px; }
.letter-page .eyebrow { color: var(--muted); }
@media (max-width:480px) { html .brand { gap: 10px; } html .brand img { width: 32px; height: 32px; border-radius: 9px; } html .brand span { font-size: 22px; } .letter-page header { gap: 12px; padding-inline: 20px; } .letter-page nav { gap: 12px; } }
@media (prefers-reduced-transparency: reduce) { html dialog, .letter-page header { background: #f4f5f8; backdrop-filter: none; } html:root[data-appearance="dark"] dialog { background: #292c35; } }
@media (forced-colors:active) { html .apply-button,html dialog,html .dialog-close { border:1px solid ButtonText; } }

/* Clear surfaces only where content passes behind them; no decorative blur tiles. */
html .page-shell::before { background: none; }
html .apply-button,html .dialog-actions .apply-button,
html:root[data-appearance="dark"] :is(.apply-button,.dialog-actions .apply-button) {
  background: transparent; border: 1px solid #868b962e; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: transform 150ms cubic-bezier(0.2,0,0,1), background-color 150ms ease;
  font-weight: 500;
}
html .apply-button:hover { background: #8085900c; box-shadow: none; transform: none; }
html .apply-button:active { transform: scale(.96); }
html .value-symbol,html:root[data-appearance="dark"] .value-symbol {
  width: 28px; height: 28px; border: 0; border-radius: 0; color: var(--muted);
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.value-symbol svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
html .values > div { gap: 12px; }
html .values strong { font: 400 14px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; letter-spacing: 0; }
html #carousel-toggle,html:root[data-appearance="dark"] #carousel-toggle {
  background: none; color: var(--muted); box-shadow: none; border: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html #carousel-toggle:hover { background: #80859012; }
html #carousel-toggle svg { width: 16px; height: 16px; stroke-width: 1.5; }
html #carousel-toggle svg:has(path[d^="m9"]) { transform: translateX(1px); }
html .carousel-dots button span { background: #92969e70; transition: none; }
html .carousel-dots button[aria-current="true"] span,
html:root[data-appearance="dark"] .carousel-dots button[aria-current="true"] span { background: #92969e45; }
html .carousel-dots button[aria-current="true"] span::after { background: var(--muted); }
html dialog { background: #f5f6f85c; border-color: #ffffff70; box-shadow: 0 12px 40px #00000014; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
html dialog::backdrop { background: #30333b36; backdrop-filter: none; -webkit-backdrop-filter: none; }
html:root[data-appearance="dark"] dialog { background: #20232c66; border-color: #ffffff24; box-shadow: 0 12px 40px #0003; }
.letter-page { background: none; }
.letter-page header { background: #f5f6f85c; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: #80859018; }
@media (max-width:480px) { html .values strong { font-size: 12px; } }
@media (prefers-reduced-transparency: reduce) {
  html dialog,.letter-page header { background: #f4f5f8; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html:root[data-appearance="dark"] dialog { background: #292c35; }
}
@supports not (backdrop-filter:blur(1px)) { html dialog,.letter-page header { background: #f4f5f8; } html:root[data-appearance="dark"] dialog { background: #292c35; } }