/* Appscode Lab: crisp white surfaces, saturated product colour and optical glass. */
:root {
  --paper: #ffffff;
  --ink: #1d1d1f;
  --muted: #51515a;
  --blue: #0071e3;
  --blue-hover: #0064ca;
  --line: #e6e6eb;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --glass-surface: #ffffff70;
  --glass-line: #ffffffc9;
  --glass-shadow: 0 12px 32px #413b7920;
  --spectrum: linear-gradient(112deg, #006de3 4%, #5834e0 48%, #c71e75 91%);
  --action-fill: linear-gradient(115deg, #0071e3, #2759eb);
}

body { background: var(--paper); }
h1, h2 { letter-spacing: -.04em; }
h3 { letter-spacing: -.03em; }
input, textarea { caret-color: var(--blue); }
* { scrollbar-color: #b7b7d1 #f3f4fb; scrollbar-width: thin; }
::selection { background: #d9d1ff; color: #312062; }

.site-header {
  position: sticky;
  top: 0;
  background: #ffffffed;
  border-bottom-color: #dde0f480;
  box-shadow: 0 5px 22px #35326705;
}
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.brand-symbol { width: 40px; height: 40px; object-fit: contain; }
.brand-dot { color: #7145de; }
.header-contact {
  background: #ffffffb8;
  border-color: #ffffff;
  box-shadow: 0 3px 12px #5550900b;
}
.desktop-nav a { transition: color 160ms ease; }
.mobile-nav { background: #f8f9fff5; }

.hero { position: relative; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 35px 4px 32px 30%;
  border-radius: 46%;
  background:
    radial-gradient(ellipse at 75% 19%, #ffc1dcaf, transparent 54%),
    radial-gradient(ellipse at 37% 30%, #a8d9ffbd, transparent 59%),
    radial-gradient(ellipse at 64% 69%, #c3a7ffb8, transparent 61%),
    radial-gradient(ellipse at 82% 86%, #c1f6e7ad, transparent 48%);
  filter: blur(35px);
  opacity: .5;
  pointer-events: none;
}
.hero-color { background-image: var(--spectrum); }
.hero h1 { letter-spacing: -.04em; }
.hero-copy { animation: none; }
.studio-badge {
  color: #55507e;
  background: #ffffffc9;
  border-color: #ffffff;
  box-shadow: 0 5px 14px #57508d09;
}
.studio-badge > span { background: #7553e4; }
.hero-actions .button-text {
  background: #ffffff8c;
  border-color: #ffffffab;
  padding-inline: 18px;
}
.button-primary {
  background: var(--action-fill);
  box-shadow: inset 0 1px 1px #ffffff45, 0 7px 17px #4d40ca25;
  transition: transform 160ms var(--ease), box-shadow 200ms ease;
}
.button-primary:hover {
  background: var(--action-fill);
  box-shadow: inset 0 1px 1px #ffffff65, 0 10px 24px #4d40ca36;
}
.button:active { transition-duration: 120ms; }

.hero-art { animation: none; }
.art-sculpture { position: absolute; inset: 0; }
.art-orbit { border-color: #afa1dc50; }
.orbit-two { border-color: #9482ce35; }
.tile-blue {
  background: linear-gradient(140deg, #ffffffa3, #ffffff3b 56%, #bfd8ff3b);
  border-color: #ffffffc9;
  box-shadow: inset 0 2px 4px #ffffffeb, inset 0 -3px 12px #787ad21f,
    7px 12px 0 -4px #b2c2ff8c, 16px 29px 36px #3e32a633;
}
.studio-flask { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 9px 10px #2635b533); }
.tile-blue > .icon {
  color: white;
  filter: drop-shadow(1px 3px 0 #465bd1) drop-shadow(0 3px 5px #2d238030);
}
.tile-shine {
  width: 145%;
  height: 58%;
  left: -30%;
  top: -21%;
  background: linear-gradient(180deg, #ffffff80, #ffffff00);
  filter: none;
  border-radius: 50%;
}
.tile-lilac {
  background: linear-gradient(140deg, #d8adffe8, #ab69f5ed 55%, #8b4ce4eb);
  color: #ffffff;
  box-shadow: inset 0 2px 3px #ffffff, 0 14px 26px #9c64c721;
}
.tile-orange {
  background: linear-gradient(142deg, #ffd36eeb, #ff9b24 43%, #ff6049);
  color: #fffaf0;
  box-shadow: inset 0 2px 3px #ffffffd9, 0 16px 28px #c87a4c26;
}
.tile-orange .icon { fill: #fffbef; filter: drop-shadow(2px 3px 0 #d48242); }
.tile-green {
  background: linear-gradient(140deg, #8cffd5e8, #29dca4 48%, #0ca883);
  box-shadow: inset 0 2px 3px #ffffffd9, 0 14px 24px #329e8226;
}
.tile-green .icon { filter: drop-shadow(2px 2px 0 #48a38f); }
.art-label {
  background: #ffffffe0;
  border-color: #ffffff;
  box-shadow: 0 6px 16px #63448312;
}
.label-craft { color: #805034; }
.label-care { color: #6e4b93; }
.dot-orange { background: #ffb56d; }
.dot-purple { background: #ab7fe9; }
.art-shadow { background: #7c63cf30; }
.art-caption { font-size: 8px; letter-spacing: .1em; }
.motion-toggle {
  position: absolute;
  z-index: 6;
  right: 8px;
  bottom: 27px;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #ffffffdb;
  border-radius: 99px;
  background: #ffffffe0;
  color: #60567d;
  font-size: 9px;
}
.motion-toggle svg { width: 13px; height: 13px; }
.motion-play, .motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.motion-toggle[aria-pressed="true"] .motion-play { display: block; }

.platform-line {
  position: relative;
  padding-inline: 28px;
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  background: #ffffffd9;
  box-shadow: 0 9px 27px #5c57a00b;
}
.platform-line > div { color: #545073; }
.platform-line .icon { color: #7167a0; }
.featured-app {
  background:
    radial-gradient(ellipse at 90% 0%, #7158ff85, transparent 54%),
    linear-gradient(120deg, #07367d, #163dba 56%, #4c2dc4);
  color: white;
  border-color: transparent;
  box-shadow: 0 24px 48px #1746a820;
}
.platform-pill, .floating-label { background: #ffffffe3; border-color: white; }
.featured-copy h3, .featured-copy .featured-tagline { color: white; }
.featured-copy > p:not(.featured-tagline), .featured-copy .feature-footnote { color: #e4edff; }
.featured-copy .platform-pill { background: #ffffff1f; border-color: #ffffff45; color: white; }
.featured-copy .button-dark {
  background: #ffffff;
  color: #183c9d;
  box-shadow: 0 7px 18px #001c621f;
}
.visual-blob {
  background: radial-gradient(ellipse at center, #b397f9ad, #99bcff60 47%, transparent 72%);
}
.next-icon { background: #e9e2ff; color: #7750ba; }
.studio-section {
  background: #f5f5f7;
  border-color: #ececef;
}
.studio-intro h2 span { color: #5b37ce; }
.value-icon { box-shadow: inset 0 1px 2px #ffffff85, 0 4px 10px #4e3b7b0d; }
.violet { background: linear-gradient(145deg, #9863f0, #692cce); color: white; }
.peach { background: linear-gradient(145deg, #ffae56, #f27134); color: white; }
.mint { background: linear-gradient(145deg, #29d0a2, #07866e); color: white; }
.pink { background: linear-gradient(145deg, #f56ab5, #bf2a83); color: white; }
.blue { background: linear-gradient(145deg, #39a0ff, #0064d6); color: white; }

.contact-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 48px;
  margin-block: 55px 75px;
  border-radius: 30px;
  background: linear-gradient(115deg, #004bd3, #5132d2 60%, #842bc8);
  color: white;
  box-shadow: 0 20px 35px #5649ae1a;
}
.contact-strip::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 480px;
  height: 480px;
  border: 1px solid #ffffff26;
  border-radius: 50%;
  right: 13%;
  top: -170px;
  box-shadow: 0 0 0 55px #ffffff05, 0 0 0 110px #ffffff05;
}
.contact-strip .eyebrow { color: #efecff; }
.contact-strip h2 { font-size: clamp(32px, 3.5vw, 47px); }
.contact-strip .button-dark { background: #fffffff2; color: #4840a7; }
.site-footer { background: #f5f5f7; border-color: #e5e5ea; }
.footer-links { gap: 48px; }
.footer-links > nav { display: flex; flex-direction: column; gap: 12px; font-size: 12px; }
.footer-links > nav > span { color: #69617e; font-size: 11px; font-weight: 650; margin-bottom: 5px; }
.footer-email { font-size: 11px; color: #62527d; display: inline-block; margin-top: 7px; }
.footer-email:hover { color: var(--blue); }

.app-subnav {
  position: sticky;
  top: 88px;
  z-index: 15;
  background: #fffffff0;
  border-color: #dfe2f580;
}
.app-subnav a[aria-current] { color: #5840bc; font-weight: 650; }
.app-subnav a { min-height: 34px; display: inline-flex; align-items: center; }
html:has(.app-subnav) { scroll-padding-top: 177px; }
.app-hero { position: relative; isolation: isolate; padding-top: 38px; }
.app-hero::before { content: none; }
.app-product-label {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 23px;
  text-align: left;
}
.app-product-label > div { display: flex; flex-direction: column; gap: 5px; }
.app-product-label strong { font-size: 15px; letter-spacing: -.02em; font-weight: 650; }
.app-product-label span { font-size: 11px; color: #626269; }
.app-hero h1 { font-size: clamp(52px, 5.3vw, 76px); letter-spacing: -.04em; line-height: 1.08; margin-bottom: 20px; }
.app-hero > p { font-size: 16px; color: #51515a; margin-bottom: 0; }
.app-hero-actions { margin-top: 24px; }
.app-availability { margin-top: 17px; color: #626269; }
.glass-controls-scene { position: relative; isolation: isolate; width: min(600px, 100%); padding-block: 12px; margin: 24px auto 0; }
.glass-controls-scene::before, .glass-controls-scene::after { content: ""; position: absolute; z-index: -1; width: 165px; height: 100px; border-radius: 32px; pointer-events: none; }
.glass-controls-scene::before { left: 12px; top: 2px; background: linear-gradient(135deg, #20c9ff, #0869f4); transform: rotate(-12deg); }
.glass-controls-scene::after { right: 12px; bottom: 0; background: linear-gradient(135deg, #6654f3, #c34fe6); transform: rotate(12deg); }
.app-hero-controls { position: relative; z-index: 1; padding: 18px 22px; border: 1px solid #ffffffeb; border-radius: 26px; background: #edf2ff; box-shadow: inset 0 1px 1px #ffffff, inset 0 -1px 0 #ffffff85, 0 13px 30px #2b3d8b24; }
.app-hero-controls .app-hero-actions { margin-top: 0; }
.app-hero-controls .app-availability { margin-top: 12px; }
.app-hero-controls .app-availability, .app-hero-controls .release-note { color: #343047; }
.app-hero-controls .button-text { background: #ffffff99; border-color: #ffffff99; color: #252432; padding-inline: 18px; }
.app-hero-stage {
  background: linear-gradient(125deg, #0879f5, #4351ee 45%, #9633e2);
  padding: 26px 36px 0;
  margin-top: 34px;
  max-height: 575px;
  border-radius: 30px 30px 0 0;
  box-shadow: inset 0 1px 2px #ffffff70, 0 16px 35px #1a47b11a;
}
.app-hero-stage .app-window { box-shadow: 0 17px 32px #082f8d47; }
.product-clarity { list-style: none; margin: 0 auto; padding: 24px 0; max-width: 1040px; display: flex; justify-content: center; gap: 48px; border-bottom: 1px solid var(--line); }
.product-clarity li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #51515a; }
.product-clarity .icon { width: 18px; height: 18px; color: #146bd5; }
.feature-card { background: #ffffffd9; border-color: #e5e3f1; }
.feature-card p { font-size: 13px; color: #51515a; }
.feature-wide { background: linear-gradient(125deg, #064ccb, #3f3acb); color: white; border-color: transparent; }
.feature-wide p { color: #edf2ff; }
.feature-wide .value-icon { background: #ffffff24; box-shadow: inset 0 1px 1px #ffffff45; }
.feature-wide .folder-demo > div { background: #ffffff1f; border-color: #ffffff36; color: white; }
.feature-wide .folder-demo .icon, .feature-wide .folder-demo span { color: #e6edff; }
.search-feature { background: #fff0e2; }
.shortcut kbd { color: #63412c; background: #fffaf5; }
.feature-grid > .feature-card:nth-child(3), .feature-grid > .feature-card:nth-child(4), .feature-grid > .feature-card:nth-child(5) { background: #f5f5f7; }
.template-preview { background: #fffffff0; box-shadow: 0 20px 45px #5c4d8612; }
.template-body mark { background: #deebff; color: #2053ac; }
.template-control .copy-done { display: none; }
.template-control button[data-copied="true"] .copy-default { display: none; }
.template-control button[data-copied="true"] .copy-done { display: block; }
.template-copy > .copy-status { min-height: 18px; margin: 8px 0 0; color: #276847; font-size: 11px; }
.screenshots-section { background: #f5f5f7; }
.screenshot-button { background: linear-gradient(130deg, #d5e7ff, #dedcff); }
.lightbox { padding: 14px 16px 10px; background: #f5f5f7f5; }
.lightbox-toolbar p { font-size: 14px; font-weight: 550; }
.lightbox > img { max-height: 75dvh; }
.lightbox-navigation { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 10px; }
.lightbox-navigation button { min-width: 100px; min-height: 44px; display: flex; justify-content: center; align-items: center; gap: 10px; border: 0; border-radius: 99px; background: #e6e8f0; color: #33333d; font-size: 12px; }
.lightbox-navigation button:disabled { cursor: default; opacity: .4; }
.lightbox-navigation .icon { width: 16px; height: 16px; }
#previous-screenshot .icon { transform: rotate(180deg); }
#lightbox-position { color: #51515a; font-size: 12px; font-variant-numeric: tabular-nums; }
.privacy-symbol {
  background: linear-gradient(145deg, #a7f4da, #54bfa7);
  box-shadow: inset 0 2px 3px #ffffffb3, 0 12px 0 -3px #4aab95, 0 27px 40px #3a9a7e26;
}
.plan-pro { background: linear-gradient(125deg, #0b327f, #322490); border-color: transparent; color: white; }
.plan-pro .eyebrow, .plan-pro .plan-price > span, .plan-pro li, .plan-pro li .icon, .plan-pro > p { color: #e9efff; }
.plan-pro > p { border-color: #ffffff2e; }
.plan-pro h3 > span { background: #ffffff24; color: white; }
.collection-app { border-color: #e2ddf2; box-shadow: 0 16px 32px #574a800a; }
.collection-art {
  background:
    radial-gradient(ellipse at 72% 20%, #fac9e9ad, transparent 57%),
    radial-gradient(ellipse at 28% 67%, #94d4ff99, transparent 65%), #e5defc;
}
.filter-bar { background: #ffffffb3; border-color: #ffffff; }
.filter-bar button[aria-pressed="true"] { background: #5e49bd; }
.form-panel { background: #ffffffed; border-color: #e4dff2; box-shadow: 0 20px 45px #6c529c0c; }
.contact-page { position: relative; isolation: isolate; }
.contact-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 15% 35%;
  border-radius: 45%;
  background: radial-gradient(ellipse, #e5d3ff9c, #dbeaff65 45%, transparent 72%);
  pointer-events: none;
}
.owner-avatar { background: linear-gradient(140deg, #e6ddff, #d3defc); color: #7152a1; }
.support-actions > a { background: #ffffffde; }
.support-actions > a:nth-child(1) { background: #f0ebff; }
.support-actions > a:nth-child(2) { background: #fff0e7; }
.support-actions > a:nth-child(3) { background: #eaf7f3; }
.support-actions > a > .icon:first-child { color: #7851b4; }

/* Long-form reading stays opaque and still; glass is reserved for navigation. */
.page-legal { background: #fafbff; }
.page-legal .legal-summary { background: #eeebfa; }
.legal-sidebar { top: 120px; }
.app-subnav ~ .legal-layout .legal-sidebar { top: 180px; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .app-subnav { background: #ffffff66; }
  .site-header, .app-subnav, .mobile-nav {
    -webkit-backdrop-filter: saturate(180%) blur(32px);
    backdrop-filter: saturate(180%) blur(32px);
  }
  .desktop-nav, .app-subnav > .wrap > div { color: #343440; }
  .app-hero-controls { background: var(--glass-surface); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); }
  .tile-blue { -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); }
  .form-panel { background: #ffffffa3; -webkit-backdrop-filter: saturate(160%) blur(24px); backdrop-filter: saturate(160%) blur(24px); }
  .lightbox { background: #ffffffb3; -webkit-backdrop-filter: saturate(160%) blur(36px); backdrop-filter: saturate(160%) blur(36px); }
  .studio-badge, .header-contact, .art-label, .motion-toggle,
  .platform-line, .platform-pill, .floating-label {
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
  }
  .studio-badge, .art-label, .motion-toggle { background-color: #ffffff91; }
  .tile-lilac, .tile-orange, .tile-green {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-art { animation: sculpture-arrive 800ms var(--ease) both; }
  .motion-enabled .tile-blue { animation: blue-drift 7s 800ms var(--ease-in-out) infinite; }
  .motion-enabled .tile-lilac { animation: lilac-drift 7s 700ms var(--ease-in-out) infinite; }
  .motion-enabled .tile-orange { animation: orange-drift 7s 1000ms var(--ease-in-out) infinite; }
  .motion-enabled .tile-green { animation: green-drift 7s 900ms var(--ease-in-out) infinite; }
  .motion-paused .art-tile { animation-play-state: paused; }
  @keyframes sculpture-arrive { from { transform: translateY(14px) scale(.98); } to { transform: translateY(0) scale(1); } }
  @keyframes blue-drift { 0%,100% { transform: translateY(0) rotate(-13deg); } 50% { transform: translateY(-9px) rotate(-11deg); } }
  @keyframes lilac-drift { 0%,100% { transform: translateY(0) rotate(-19deg); } 50% { transform: translateY(7px) rotate(-22deg); } }
  @keyframes orange-drift { 0%,100% { transform: translateY(0) rotate(17deg); } 50% { transform: translateY(-7px) rotate(20deg); } }
  @keyframes green-drift { 0%,100% { transform: translateY(0) rotate(15deg); } 50% { transform: translateY(6px) rotate(11deg); } }
}
@media (hover: hover) and (pointer: fine) {
  .button-primary:hover { transform: translateY(-2px); }
  .button-primary:active { transform: translateY(0) scale(.97); }
  .motion-toggle:hover { background: #fffffff0; }
}
@media (hover: none), (pointer: coarse) {
  .hero-art:hover .art-tile { translate: none; }
  .featured-visual:hover .app-window { transform: rotate(-6deg); }
  .collection-image:hover .app-icon { transform: rotate(-10deg); }
  .screenshot-button:hover > img { transform: none; }
  .support-actions > a:hover { transform: none; }
  .inline-link:hover .icon { transform: none; }
}

@media (max-width: 1100px) {
  .footer-links { gap: 28px; }
  .app-hero h1 > span { display: block; }
}
@media (max-width: 800px) {
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .button-text { padding-inline: 12px; }
  .contact-strip { padding: 36px; }
  .footer-links { justify-content: space-between; }
}
@media (max-width: 640px) {
  .hero::before { inset: 34% 0 15px; filter: blur(24px); border-radius: 35%; }
  .hero-actions { flex-wrap: nowrap; gap: 10px; }
  .hero-actions .button-text { padding-inline: 9px; }
  .hero-art { margin-top: 23px; }
  .motion-toggle { right: 2px; bottom: 20px; min-height: 35px; padding: 7px 9px; font-size: 8px; }
  .art-caption { bottom: 1px; font-size: 7px; }
  .platform-line { padding: 22px 12px; border-radius: 17px; }
  .featured-app { border-radius: 23px; }
  .contact-strip { margin-block: 30px 45px; padding: 30px 24px; border-radius: 24px; gap: 14px; }
  .contact-strip h2 { font-size: 30px; }
  .contact-strip .eyebrow { font-size: 8px; }
  .contact-strip .button { padding-inline: 14px; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .footer-links > nav { font-size: 11px; gap: 12px; }
  .footer-links > nav > span { font-size: 10px; }
  .footer-links > nav:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .footer-links > nav:last-child > span { grid-column: 1 / -1; margin: 0; }
  .app-subnav { top: 73px; }
  .app-subnav > .wrap > div { gap: 12px; }
  html:has(.app-subnav) { scroll-padding-top: 150px; }
  .app-hero { padding-top: 30px; }
  .brand-mark, .brand-symbol { width: 36px; height: 36px; }
  .app-product-label { gap: 10px; margin-bottom: 21px; }
  .app-product-label > .app-icon { width: 42px; height: 42px; }
  .app-product-label strong { font-size: 14px; }
  .app-product-label span { font-size: 10px; }
  .app-hero h1 { font-size: clamp(40px, 11.5vw, 56px); line-height: 1.06; }
  .app-hero > p { font-size: 13px; }
  .glass-controls-scene { margin-top: 20px; padding-block: 10px; }
  .glass-controls-scene::before, .glass-controls-scene::after { width: 100px; height: 95px; border-radius: 26px; }
  .glass-controls-scene::before { left: 6px; }
  .glass-controls-scene::after { right: 6px; }
  .app-hero-controls { padding: 15px 9px; border-radius: 22px; }
  .app-hero-controls .app-hero-actions { gap: 8px; flex-wrap: wrap; }
  .app-hero-controls .button-text { padding-inline: 10px; }
  .app-hero-stage { padding: 16px 14px 0; margin-top: 28px; border-radius: 20px 20px 0 0; }
  .product-clarity { flex-wrap: wrap; gap: 12px 18px; padding-block: 20px; }
  .product-clarity li { font-size: 10px; gap: 6px; }
  .product-clarity .icon { width: 15px; height: 15px; }
  .feature-card p { font-size: 12px; }
  .lightbox { padding: 10px 10px 8px; }
  .lightbox-toolbar p { font-size: 12px; }
  .lightbox-navigation button { min-width: 85px; min-height: 44px; font-size: 11px; gap: 7px; }
  .lightbox-navigation { gap: 12px; }
  .legal-sidebar, .app-subnav ~ .legal-layout .legal-sidebar { position: static; }
  .app-hero::before { inset: 30px 0 30%; }
}
@media (max-width: 370px) {
  .hero-actions { gap: 6px; }
  .hero-actions .button { padding-inline: 13px; gap: 8px; }
  .hero-actions .button-text { padding-inline: 7px; }
  .contact-strip { flex-direction: column; align-items: flex-start; gap: 25px; }
  .contact-strip h2 { font-size: 32px; }
  .app-subnav > .wrap > div { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art, .art-tile { animation: none; }
  .motion-toggle { display: none; }
  .button-primary:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .app-subnav, .app-hero-controls, .form-panel, .lightbox, .tile-blue { background: #f2f5ff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}