.measure-sequence {
  --sequence-surface: var(--minima-background-color);
  --sequence-border: var(--minima-border-color-01);
  --sequence-text: var(--minima-text-color);
  --sequence-muted: var(--minima-brand-color);
  --sequence-grid: var(--minima-border-color-01);
  --sequence-axis: var(--minima-border-color-03);
  --sequence-top-wash: rgba(255, 255, 255, 0.68);
  --sequence-bottom-wash: rgba(247, 244, 237, 0.92);
  --sequence-panel: rgba(255, 255, 255, 0.8);
  --sequence-panel-strong: rgba(255, 255, 255, 0.75);
  --sequence-panel-border: rgba(214, 208, 192, 0.9);
  --sequence-shadow: rgba(44, 38, 28, 0.04);
  --sequence-button-text: #faf8f3;
  --sequence-accent: #9b6b2f;
  --sequence-fill: rgba(155, 107, 47, 0.18);
  margin: 1.5rem 0 2rem;
  padding: 1rem 1rem 1.1rem;
  border: 1px solid var(--sequence-border);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--sequence-top-wash) 0%, var(--sequence-bottom-wash) 100%);
  color: var(--sequence-text);
  box-shadow: 0 12px 30px var(--sequence-shadow);
}

.measure-sequence[data-sequence="horizontal"] {
  --sequence-accent: #8b5e34;
  --sequence-fill: rgba(139, 94, 52, 0.18);
}

.measure-sequence[data-sequence="width"] {
  --sequence-accent: #667a42;
  --sequence-fill: rgba(102, 122, 66, 0.18);
}

.measure-sequence[data-sequence="height"] {
  --sequence-accent: #9f4d3e;
  --sequence-fill: rgba(159, 77, 62, 0.18);
}

.measure-sequence[data-sequence="typewriter"] {
  --sequence-accent: #4c6b8a;
  --sequence-fill: rgba(76, 107, 138, 0.18);
}

.measure-sequence__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.measure-sequence__eyebrow {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sequence-muted);
}

.measure-sequence__counter {
  margin: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--sequence-panel-strong);
  border: 1px solid var(--sequence-border);
  color: var(--sequence-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

.measure-sequence__formula {
  margin-bottom: 0.9rem;
}

.measure-sequence__formula p,
.measure-sequence__formula .MathJax {
  margin-bottom: 0;
}

.measure-sequence__plot {
  width: 100%;
  margin-bottom: 0.85rem;
}

.measure-sequence__plot svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: var(--sequence-panel);
  border: 1px solid var(--sequence-panel-border);
}

.measure-sequence__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.measure-sequence__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: var(--sequence-panel);
  border: 1px solid var(--sequence-border);
  color: var(--sequence-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
}

.measure-sequence__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.measure-sequence__play {
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--sequence-text);
  border-radius: 999px;
  background: var(--sequence-text);
  color: var(--sequence-button-text);
  font-size: 0.92rem;
  cursor: pointer;
}

.measure-sequence__play:hover,
.measure-sequence__play:focus-visible {
  background: var(--sequence-accent);
  border-color: var(--sequence-accent);
}

.measure-sequence__slider-label {
  font-size: 0.88rem;
  color: var(--sequence-muted);
}

.measure-sequence__slider {
  flex: 1 1 220px;
  accent-color: var(--sequence-accent);
}

.measure-sequence__note {
  margin: 0;
  color: var(--sequence-muted);
  font-size: 0.96rem;
}

.measure-sequence__fallback {
  margin: 0 0 0.85rem;
}

.measure-sequence__fallback img {
  display: block;
  max-width: 100%;
  border-radius: 12px;
}

.measure-sequence__axis,
.measure-sequence__grid {
  stroke-linecap: round;
}

.measure-sequence__grid {
  stroke: var(--sequence-grid);
  stroke-width: 1;
}

.measure-sequence__axis {
  stroke: var(--sequence-axis);
  stroke-width: 1.35;
}

.measure-sequence__tick-label,
.measure-sequence__axis-label {
  fill: var(--sequence-muted);
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.measure-sequence__bar {
  fill: var(--sequence-fill);
  stroke: var(--sequence-accent);
  stroke-width: 2.2;
}

.measure-sequence__bar-top {
  stroke: var(--sequence-accent);
  stroke-width: 2.8;
  stroke-linecap: round;
}

@media (prefers-color-scheme: dark) {
  .measure-sequence {
    --sequence-muted: var(--minima-brand-color-light);
    --sequence-top-wash: rgba(38, 38, 38, 0.92);
    --sequence-bottom-wash: rgba(24, 24, 24, 0.98);
    --sequence-panel: rgba(33, 33, 33, 0.84);
    --sequence-panel-strong: rgba(40, 40, 40, 0.92);
    --sequence-panel-border: rgba(95, 95, 95, 0.55);
    --sequence-shadow: rgba(0, 0, 0, 0.32);
    --sequence-button-text: var(--minima-background-color);
  }

  .measure-sequence[data-sequence="horizontal"] {
    --sequence-accent: #d3a46f;
    --sequence-fill: rgba(211, 164, 111, 0.18);
  }

  .measure-sequence[data-sequence="width"] {
    --sequence-accent: #a6c56b;
    --sequence-fill: rgba(166, 197, 107, 0.18);
  }

  .measure-sequence[data-sequence="height"] {
    --sequence-accent: #de8a7f;
    --sequence-fill: rgba(222, 138, 127, 0.18);
  }

  .measure-sequence[data-sequence="typewriter"] {
    --sequence-accent: #8db6df;
    --sequence-fill: rgba(141, 182, 223, 0.18);
  }
}

@media (max-width: 640px) {
  .measure-sequence {
    padding: 0.85rem 0.8rem 0.95rem;
  }

  .measure-sequence__topline,
  .measure-sequence__controls {
    align-items: flex-start;
    flex-direction: column;
  }

  .measure-sequence__slider {
    width: 100%;
  }
}