@import url("fonts.css");

:root {
  --page-max: var(--layout-marketing-max-width);
  --page-pad: clamp(var(--layout-compact-page-padding), 4vw, var(--layout-marketing-page-padding));
  --gutter: min(var(--layout-marketing-gutter), 2.5vw);
  --rule: var(--stroke-default) solid var(--color-border);
  --rule-strong: var(--stroke-default) solid var(--color-border-strong);
  --chapter-space: clamp(var(--space-16), 9vw, var(--space-32));
  --content: 4;
  --label-font: var(--font-weight-label) 0.75rem/1.35 var(--font-family-website);
}

*, *::before, *::after {box-sizing: border-box}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-height, 4.25rem) + var(--space-4));
}

@media (prefers-reduced-motion: no-preference) {
  html {scroll-behavior: smooth}
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font: var(--marketing-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure {margin: 0}
ul, ol {padding: 0; list-style: none}
img {display: block; max-width: 100%; height: auto}
a {color: inherit}
b, strong {font-weight: var(--font-weight-semibold)}

p, li, dd {overflow-wrap: break-word}
h1, h2, h3 {text-wrap: balance; overflow-wrap: break-word}

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.logo, .brand-word {font-family: var(--font-family-brand); font-weight: var(--font-weight-regular)}

.skip-link {
  position: absolute;
  inset-inline-start: var(--page-pad);
  top: var(--space-2);
  z-index: var(--layer-tooltip);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font: var(--type-label-large);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus {transform: none}

.chapter-label, .hero-place, .settings-label, .slip-head, .service-tag,
.fact-sheet dt, .phase-name, .lab-stats dt, .lab-teaser-kicker, .form-note, .field label {
  font: var(--label-font);
  font-stretch: 112%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.field label, .form-note {text-transform: none; letter-spacing: 0.01em; font-stretch: 100%}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-control-lg);
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font: var(--type-label-large);
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.button:hover {background: var(--color-primary-hover)}
.button:active {background: var(--color-primary-pressed); transform: scale(var(--motion-pressed-scale))}
.button:disabled {background: var(--color-disabled); color: var(--color-disabled-foreground); cursor: progress}

.text-link {
  color: var(--color-foreground);
  font: var(--type-label-large);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--color-border-strong);
}
.text-link::after {content: " →"}
.text-link:hover {text-decoration-color: currentColor}



.masthead {
  position: sticky;
  top: 0;
  z-index: var(--layer-sticky);
  background: var(--color-background);
  border-bottom: var(--rule);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  max-width: var(--page-max);
  min-height: var(--size-navigation-topbar);
  margin: 0 auto;
  padding: var(--space-2) var(--page-pad);
}

.logo {
  margin-inline-end: auto;
  font-size: 1.375rem;
  line-height: 1;
  text-decoration: none;
}

.nav-links {display: flex; flex-wrap: wrap; gap: 0 var(--space-6)}

.nav a:not(.logo) {
  font: var(--font-weight-medium) var(--type-body-size)/var(--type-body-line-height) var(--font-family-website);
  text-decoration: none;
}

.nav-links a {
  padding-block: var(--space-2);
  color: var(--color-muted-foreground);
  border-bottom: var(--stroke-strong) solid transparent;
}
.nav-links a:hover {color: var(--color-foreground)}
.nav-links a[aria-current] {color: var(--color-foreground); border-bottom-color: var(--color-primary)}

.nav-cta {
  padding: var(--space-2) var(--space-4);
  border: var(--rule-strong);
  border-radius: var(--radius-xs);
}
.nav-cta:hover {border-color: var(--color-foreground)}

.nav-menu, .theme-picker {position: relative}
.nav-menu {display: none}

.nav summary {list-style: none; cursor: pointer}
.nav summary::-webkit-details-marker {display: none}

.nav-menu-toggle {
  display: flex;
  align-items: center;
  min-height: var(--size-target-web-touch);
  padding: 0 var(--space-2);
  font: var(--type-label-large);
}
.nav-menu-toggle::after {content: "+"; margin-inline-start: var(--space-2); font-weight: var(--font-weight-regular)}
.nav-menu[open] .nav-menu-toggle::after {content: "–"}

.nav-menu-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-end: 0;
  display: grid;
  min-width: 14rem;
  padding: var(--space-2) 0;
  background: var(--color-surface-elevated);
  border: var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-md);
}
.nav-menu-panel a {padding: var(--space-3) var(--space-5); min-height: var(--size-target-web-touch)}
.nav-menu-panel a:hover {background: var(--color-muted)}

.theme-toggle {
  display: grid;
  place-items: center;
  width: var(--size-target-web-touch);
  height: var(--size-target-web-touch);
  border-radius: var(--radius-xs);
  color: var(--color-muted-foreground);
}
.theme-toggle:hover, .theme-picker[open] .theme-toggle {color: var(--color-foreground); background: var(--color-muted)}
.theme-toggle svg {width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round}

.theme-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-end: 0;
  display: grid;
  gap: var(--space-2);
  width: 13rem;
  padding: var(--space-4);
  background: var(--color-surface-elevated);
  border: var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-md);
}
.settings-label {color: var(--color-muted-foreground)}
.settings-label + * {margin-bottom: var(--space-2)}
#themeOptions {display: grid; gap: var(--space-1)}

.theme-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-row-compact);
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  font: var(--type-body);
  cursor: pointer;
}
.theme-option:hover {background: var(--color-muted)}
.theme-option input {margin: 0; accent-color: var(--color-primary)}

.language-switch {display: flex; gap: var(--space-1)}
.language-switch a {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: var(--size-row-compact);
  border: var(--rule);
  border-radius: var(--radius-xs);
}
.language-switch a[aria-current] {border-color: var(--color-foreground); font-weight: var(--font-weight-semibold)}

@media (max-width: 63.99rem) {
  .nav {gap: var(--space-2)}
  .nav-links {display: none}
  .nav-menu {display: block}
}
@media (max-width: 29.99rem) {
  .nav-cta {display: none}
}



.hero, .chapter, .foot-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--page-pad);
}
.hero > *, .chapter > *, .foot-row > * {grid-column: 1 / -1}



.hero {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24)) 0;
  row-gap: var(--space-8);
}

.hero-place {color: var(--color-muted-foreground)}

.hero-title {
  grid-column: 1 / 12;
  font: var(--marketing-hero-weight) clamp(2.75rem, 8.6vw, 8.25rem)/0.98 var(--font-family-display);
  letter-spacing: -0.02em;
}

.hero-body {
  grid-column: 7 / -1;
  display: grid;
  gap: var(--space-8);
  padding-top: var(--space-4);
}
.hero-text {font: var(--marketing-body-large); max-width: 34rem}
.hero-actions {display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8)}

.fact-sheet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(var(--space-12), 6vw, var(--space-20));
  border-top: var(--rule-strong);
}
.fact-sheet > div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4) var(--space-5) 0;
}
.fact-sheet > div + div {padding-inline-start: var(--space-4); border-inline-start: var(--rule)}
.fact-sheet dt {color: var(--color-muted-foreground)}
.fact-sheet :is(dt, dd) {overflow-wrap: anywhere}
.fact-sheet dd {font: var(--type-body-large); font-weight: var(--font-weight-medium)}
.fact-sheet a {text-decoration-color: var(--color-border-strong); text-underline-offset: 0.2em}



.chapter {
  padding-block: var(--chapter-space);
  border-top: var(--rule-strong);
  row-gap: var(--space-6);
}
.hero + .chapter {border-top: 0}
.chapter-head {display: contents}

.chapter-label {
  grid-column: 1 / var(--content);
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-self: start;
  padding-top: 0.6em;
}
.chapter-no {font-variant-numeric: tabular-nums; color: var(--color-primary)}

.chapter h2 {
  grid-column: var(--content) / -1;
  font: var(--marketing-heading-1-weight) clamp(2rem, 4.4vw, var(--marketing-heading-1-size))/1.08 var(--font-family-display);
  letter-spacing: -0.01em;
}
.chapter-lead {grid-column: var(--content) / 11; max-width: 44rem; color: var(--color-muted-foreground); font: var(--marketing-body-large)}

.chapter h3 {font: var(--type-heading-3)}



.service-list {
  grid-column: var(--content) / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(19rem, calc((100% - var(--gutter)) / 2))), 1fr));
  gap: 0 var(--gutter);
  margin-top: var(--space-10);
  counter-reset: service;
}
.service {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-3);
  padding: var(--space-6) 0 var(--space-10);
  border-top: var(--rule);
  counter-increment: service;
}
.service h3::before {
  content: counter(service, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-4);
  font: var(--label-font);
  font-variant-numeric: tabular-nums;
  color: var(--color-muted-foreground);
}
.service p:not(.service-tag) {max-width: 30rem}
.service-tag {align-self: end; color: var(--color-muted-foreground)}



.phase-list {
  margin-top: var(--space-10);
  counter-reset: phase;
}
.phase {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4) var(--gutter);
  padding-block: var(--space-8) var(--space-10);
  border-top: var(--rule);
}
.phase-name {
  grid-column: 1 / var(--content);
  display: grid;
  gap: var(--space-1);
  align-content: start;
  color: var(--color-muted-foreground);
}
.phase-no {
  font: var(--font-weight-medium) clamp(2.5rem, 4vw, 3.5rem)/1 var(--font-family-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--color-foreground);
}
.phase-body {grid-column: var(--content) / 9; display: grid; gap: var(--space-3); align-content: start}
.phase-body p {max-width: 34rem}

.work-slip {
  grid-column: 9 / -1;
  align-self: start;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--color-surface);
  border: var(--rule);
  border-top: var(--stroke-default) dashed var(--color-border-strong);
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  font: var(--type-body-small);
}
.slip-head {color: var(--color-muted-foreground); font-variant-numeric: tabular-nums}

.slip-rows {display: grid; gap: var(--space-2)}
.slip-rows div {display: flex; flex-wrap: wrap; gap: 0 var(--space-3)}
.slip-rows dt {flex: 0 0 5.5rem}
.slip-rows dd {flex: 1 1 10rem}
.slip-rows dt {color: var(--color-muted-foreground)}

.slip-flow {display: grid; gap: var(--space-1); counter-reset: screen}
.slip-flow li {display: flex; gap: var(--space-3); counter-increment: screen}
.slip-flow li::before {content: counter(screen) "."; min-width: 1.25rem; color: var(--color-muted-foreground); font-variant-numeric: tabular-nums}

.slip-wordmark {font: var(--font-weight-strong) 2.5rem/1 var(--font-family-product); letter-spacing: -0.02em}
.slip-claim {color: var(--color-muted-foreground)}

.slip-steps {display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); counter-reset: step}
.slip-steps li {counter-increment: step}
.slip-steps li::before {content: counter(step, decimal-leading-zero) " "; color: var(--color-muted-foreground); font-variant-numeric: tabular-nums}
.slip-steps li:last-child {font-weight: var(--font-weight-semibold)}

.slip-photos {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3)}
.slip-photos img {width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-xs)}
.slip-photos figcaption {margin-top: var(--space-2); font: var(--type-caption)}
.slip-photos figcaption::before {content: "✓ "; color: var(--color-success-foreground)}
[data-theme="dark"] .slip-photos figcaption::before {color: var(--palette-green-300)}

.slip-chips {display: flex; flex-wrap: wrap; gap: var(--space-2)}
.slip-chips li {padding: var(--space-1) var(--space-3); border: var(--rule-strong); border-radius: var(--radius-round)}



.products {
  max-width: none;
  padding-inline: max(var(--page-pad), calc((100% - var(--page-max)) / 2 + var(--page-pad)));
  background: var(--color-surface);
}
.principles {
  grid-column: var(--content) / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--gutter);
  margin-top: var(--space-10);
}
.principles li {display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: var(--rule-strong)}
.principles h3 {font: var(--type-title)}
.principles p {color: var(--color-muted-foreground)}



.lab-bench {
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--space-6);
  margin-top: var(--space-10);
}
.lab-stage {
  grid-column: 1 / 9;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface-inset);
  border: var(--rule);
  border-radius: var(--radius-sm);
  touch-action: pan-y;
}
.lab-canvas {position: absolute; inset: 0; width: 100%; height: 100%}
.lab-stage-note {position: relative; max-width: 26rem; padding: var(--space-6); text-align: center; color: var(--color-muted-foreground); font: var(--type-body-small)}
.lab-stage.is-live .lab-stage-note {display: none}

.lab-side {grid-column: 9 / -1; display: grid; gap: var(--space-8); align-content: start; min-width: 0}
.lab-note {font: var(--type-body)}

.lab-stats {display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); border-top: var(--rule); padding-top: var(--space-4)}
.lab-stats[hidden], .lab-controls[hidden] {display: none}
.lab-stats dt {color: var(--color-muted-foreground)}
.lab-stats dd {font: var(--type-title); font-variant-numeric: tabular-nums}

.lab-controls {display: grid; gap: var(--space-4)}
.lab-shapes {display: flex; flex-wrap: wrap; gap: var(--space-2)}
.lab-controls button {
  min-height: var(--size-target-web-touch);
  padding: 0 var(--space-4);
  border: var(--rule-strong);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-foreground);
  max-width: 100%;
  font: var(--type-label-large);
  overflow-wrap: anywhere;
  cursor: pointer;
}
.lab-controls button:hover {background: var(--color-muted)}
.lab-shapes button[aria-pressed="true"] {background: var(--color-foreground); border-color: var(--color-foreground); color: var(--color-background)}
.lab-pause {justify-self: start}

.lab-more {display: grid; gap: var(--space-6); margin-top: var(--space-12)}
.lab-more-title {font: var(--type-title)}
.lab-teasers {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--gutter)}
.lab-teaser {display: grid; gap: var(--space-1); text-decoration: none}
.lab-teaser img {width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: var(--space-3); border-radius: var(--radius-xs); background: var(--color-surface-inset)}
.lab-teaser-kicker {color: var(--color-muted-foreground)}
.lab-teaser-title {font: var(--type-title)}
.lab-teaser:hover .lab-teaser-title {text-decoration: underline; text-underline-offset: 0.2em}



.person .portrait {grid-column: var(--content) / span 3; margin-top: var(--space-6)}
.portrait img {width: 100%; aspect-ratio: 640 / 700; object-fit: cover; border-radius: var(--radius-xs); filter: saturate(0.85)}
.portrait figcaption {display: grid; margin-top: var(--space-3); font: var(--type-body-small); color: var(--color-muted-foreground)}
.portrait figcaption strong {color: var(--color-foreground)}
.person-text {grid-column: 8 / -1; display: grid; gap: var(--space-8); align-content: start; margin-top: var(--space-6)}
.person-lead {font: var(--marketing-body-large); max-width: 36rem}
.person-points {display: grid; border-top: var(--rule)}
.person-points li {padding: var(--space-4) 0; border-bottom: var(--rule)}



.contact-mail {grid-column: var(--content) / 11; font: var(--type-body)}
.contact-mail a {font-weight: var(--font-weight-semibold); text-underline-offset: 0.2em}

.enquiry {
  grid-column: var(--content) / 11;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--gutter);
  margin-top: var(--space-8);
}
.enquiry > .form-note:first-of-type {grid-column: 1 / -1; color: var(--color-muted-foreground)}
.field {display: grid; gap: var(--space-2); align-content: start}
.field--wide, .form-end {grid-column: 1 / -1}
.field label {color: var(--color-foreground); font-weight: var(--font-weight-label)}

.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--size-control-lg);
  padding: var(--space-3) var(--space-4);
  border: var(--rule-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-foreground);
  font: var(--type-body);
  
  font-size: 16px;
}
.field textarea {min-height: var(--size-textarea-md); resize: vertical}
.field input:hover, .field select:hover, .field textarea:hover {border-color: var(--color-foreground)}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {outline-offset: 0; border-color: var(--color-focus)}
.field ::placeholder {color: var(--color-muted-foreground); opacity: 1}

.field-hint {font: var(--type-caption); color: var(--color-muted-foreground)}
.field-error {display: none; font: var(--type-body-small); color: var(--color-destructive)}
[data-theme="dark"] .field-error {color: var(--palette-red-300)}
.field :user-invalid:not(:focus) {border-color: var(--color-destructive)}
.field:has(:user-invalid:not(:focus)) .field-error {display: block}

.honeypot {position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden}

.form-end {display: grid; justify-items: start; gap: var(--space-4)}
.form-end .form-note {max-width: 34rem; color: var(--color-muted-foreground)}
.form-note[data-state="success"] {color: var(--color-success-foreground)}
.form-note[data-state="error"] {color: var(--color-destructive)}
[data-theme="dark"] .form-note[data-state="success"] {color: var(--palette-green-300)}
[data-theme="dark"] .form-note[data-state="error"] {color: var(--palette-red-300)}



.foot {overflow: hidden; border-top: var(--rule-strong)}
.foot-mark {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--page-pad);
  font: var(--font-weight-regular) clamp(4.5rem, 21.5vw, 19.5rem)/0.8 var(--font-family-brand);
  color: var(--color-border);
  white-space: nowrap;
  transform: translateY(0.14em);
  user-select: none;
}
.foot-row {
  position: relative;
  padding-block: var(--space-6);
  border-top: var(--rule);
  background: var(--color-background);
  row-gap: var(--space-3);
  font: var(--type-body-small);
}
.foot-row > p {grid-column: 1 / 7}
.foot-links {grid-column: 7 / -1; display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-2) var(--space-6)}
.foot-links a {text-underline-offset: 0.2em}



@media (max-width: 79.99rem) {
  :root {--content: 3}
  .phase-body {grid-column: var(--content) / 8}
  .work-slip {grid-column: 8 / -1}
}

@media (max-width: 63.99rem) {
  .hero-body {grid-column: 4 / -1}
  .fact-sheet {grid-template-columns: repeat(2, minmax(0, 1fr))}
  .fact-sheet > div:nth-child(3) {padding-inline-start: 0; border-inline-start: 0}
  .fact-sheet > div:nth-child(n+3) {border-top: var(--rule)}
  .chapter-label {grid-column: 1 / -1; grid-row: auto; padding-top: 0}
  .chapter h2, .chapter-lead, .contact-mail, .enquiry, .service-list, .principles {grid-column: 1 / -1}
  .phase-name {grid-column: 1 / 4}
  .phase-body {grid-column: 4 / -1}
  .work-slip {grid-column: 4 / -1}
  .lab-stage, .lab-side {grid-column: 1 / -1}
  .lab-side {grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--gutter)}
  .lab-controls {grid-column: 1 / -1}
  .person .portrait {grid-column: 1 / 6}
  .person-text {grid-column: 7 / -1}
}

@media (max-width: 47.99rem) {
  main :is(h2, h3, p, li, dt, dd) {hyphens: auto; overflow-wrap: anywhere}
  .hero-title {grid-column: 1 / -1}
  .hero-body {grid-column: 1 / -1; padding-top: 0}
  .phase-name {grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--space-3)}
  .phase-body, .work-slip {grid-column: 1 / -1}
  .phase-no {font-size: 2rem}
  .lab-side {grid-template-columns: minmax(0, 1fr)}
  .lab-stage {aspect-ratio: 4 / 5}
  .person .portrait {grid-column: 1 / 9}
  .person-text {grid-column: 1 / -1}
  .enquiry {grid-template-columns: minmax(0, 1fr)}
  .foot-row > p, .foot-links {grid-column: 1 / -1; justify-content: start}
}

@media (max-width: 29.99rem) {
  .fact-sheet {grid-template-columns: minmax(0, 1fr)}
  .fact-sheet > div + div {padding-inline-start: 0; border-inline-start: 0; border-top: var(--rule)}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {transition-duration: 0.01ms !important}
  .button:active {transform: none}
  .lab-pause {display: none}
}


@media (prefers-reduced-motion: no-preference) {
  @view-transition {navigation: auto}
  ::view-transition-group(root) {animation-duration: var(--motion-duration-standard); animation-timing-function: var(--motion-easing-standard)}
  .logo {view-transition-name: site-logo}
}

@media (forced-colors: active) {
  .button, .nav-cta, .lab-controls button, .work-slip {border: 1px solid ButtonText}
  .foot-mark {color: GrayText}
}