.movement { border: 0; margin: 0; }
.movement-base   { background: var(--surface-base);   color: var(--ink); }
.movement-raised { background: var(--surface-raised); color: var(--ink); }
.movement-tint   { background: var(--surface-tint);   color: var(--ink); }
.movement-deepest   { background: var(--surface-deepest);     color: var(--ink-inverse); }
.movement-deep      { background: var(--surface-deep);        color: var(--ink-inverse); }
.movement-deep-step { background: var(--surface-deep-raised);  color: var(--ink-inverse); }
.movement-ink       { background: var(--surface-ink);          color: var(--ink-inverse); }
.band {
  padding-inline: var(--gutter);
  background: none;
  border: 0;
}
.band > .inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-block: var(--seam);
}
.panel-raised,      .band.panel-raised      { background: var(--surface-raised); }
.panel-tint-deep,   .band.panel-tint-deep   { background: var(--surface-tint-deep); }
.panel-deep-raised, .band.panel-deep-raised { background: var(--surface-deep-raised); }
:is(.movement-deepest, .movement-deep, .movement-deep-step, .movement-ink) :is(.t-display, .t-title, .t-subtitle) {
  color: var(--ink-inverse);
}
:is(.movement-deepest, .movement-deep, .movement-deep-step, .movement-ink) :is(.t-small, .t-label) {
  color: var(--ink-inverse-muted);
}
.accent { color: var(--accent-on-light); }
:is(.movement-deepest, .movement-deep, .movement-deep-step, .movement-ink) .accent { color: var(--accent-on-deep); }
.accent-mark { background: var(--accent-on-light); }
:is(.movement-deepest, .movement-deep, .movement-deep-step, .movement-ink) .accent-mark { background: var(--accent-on-deep); }
.movement-deepest .card {
  background: var(--surface-deep);
  border-color: var(--rule-deep);
  box-shadow: none;
}
.movement-deep .card {
  background: var(--surface-deep-raised);
  border-color: var(--rule-deep);
  box-shadow: none;
}
.movement-deep-step .card {
  background: var(--surface-deep);
  border-color: var(--rule-deep);
  box-shadow: none;
}
.movement-ink .card {
  background: var(--surface-deep);
  border-color: var(--rule-deep);
  box-shadow: none;
}
:is(.movement-deepest, .movement-deep, .movement-deep-step, .movement-ink) .btn-primary {
  background: var(--ink-inverse); color: var(--ink-navy);
}
:is(.movement-deepest, .movement-deep, .movement-deep-step, .movement-ink) .btn-primary:hover { background: #E8ECF4; }
:is(.movement-deepest, .movement-deep, .movement-deep-step, .movement-ink) .btn-secondary {
  color: var(--ink-inverse); border-color: var(--rule-deep);
}
:is(.movement-deepest, .movement-deep, .movement-deep-step, .movement-ink) .btn-secondary:hover { border-color: var(--ink-inverse); }
.btn-accent {
  background: var(--accent-on-deep);
  color: var(--ink-navy);
  border-color: transparent;
}
.btn-accent:hover { background: var(--ink-inverse); }