.md-specimen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 460px;
  display: grid;
  place-items: center;
  padding: 64px 44px;
  background: var(--md-ground, #e8e2d4);
  color: var(--md-ink, #242522);
  box-sizing: border-box;
}
.md-specimen[data-dark="true"] {
  --md-ground: #172322;
  --md-paper: #172322;
  --md-ink: #f2eee5;
  --md-line: #6e9290;
  --md-pattern: #78aaa4;
}
.md-specimen[data-kind="veins"] {
  --md-ground: #ddd9d1;
  --md-paper: #f6f3ed;
  --md-ink: #292724;
  --md-line: #928777;
  --md-pattern: #706d65;
}
.md-specimen[data-kind="veins"][data-dark="true"] {
  --md-ground: #262728;
  --md-paper: #262728;
  --md-ink: #f2eee5;
  --md-line: #828382;
  --md-pattern: #c5bfae;
}
.md-specimen[data-kind="rhythm"] {
  --md-ground: #e1e7e5;
  --md-paper: #f7f4e9;
  --md-ink: #153f56;
  --md-line: #6a9298;
  --md-pattern: #1e7582;
}
.md-specimen[data-kind="rhythm"][data-dark="true"] {
  --md-ground: #14272e;
  --md-paper: #14272e;
  --md-ink: #f2eee5;
  --md-line: #6c939c;
  --md-pattern: #83bbc4;
}
.md-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--md-pattern, #53716a);
  z-index: -2;
}
.md-reading {
  width: min(100%, 340px);
  box-sizing: border-box;
  position: relative;
  border: 1px solid var(--md-line, #839489);
  background: var(--md-paper, #f7f3e8);
  padding: 32px;
  box-shadow: 0 20px 48px #00000014;
}
.md-reading::before,
.md-reading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 1px solid var(--md-line, #839489);
}
.md-specimen[data-kind="layers"] .md-reading::before {
  transform: translate(
    calc(var(--md-value) * -1px),
    calc(var(--md-value) * 1px)
  );
  background: color-mix(in srgb, var(--md-paper, #f7f3e8) 70%, transparent);
}
.md-specimen[data-kind="layers"] .md-reading::after {
  transform: translate(
    calc(var(--md-value) * -2px),
    calc(var(--md-value) * 2px)
  );
  background: color-mix(in srgb, var(--md-paper, #f7f3e8) 40%, transparent);
}
.md-specimen:not([data-kind="layers"]) .md-reading::before,
.md-specimen:not([data-kind="layers"]) .md-reading::after {
  display: none;
}
.md-reading small {
  display: block;
  font: 10px/1.6 monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.md-reading h3 {
  font:
    400 clamp(30px, 3.2vw, 46px)/1.13 Georgia,
    serif;
  letter-spacing: -0.035em;
  margin: 22px 0 18px;
  color: inherit;
}
.md-reading p {
  font:
    14px/1.8 Arial,
    sans-serif;
  margin: 0 0 24px;
  color: inherit;
}
.md-reading details {
  border-top: 1px solid var(--md-line, #839489);
  padding-top: 14px;
  font: 12px/1.7 monospace;
}
.md-reading summary {
  cursor: pointer;
  padding: 8px 0;
  min-height: 30px;
}
.md-reading details p {
  font-size: 12px;
  margin-top: 12px;
}
.md-specimen :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
@media (max-width: 600px) {
  .md-specimen[data-kind="layers"] .md-reading::before {
    transform: translate(
      calc(var(--md-value) * -0.3px),
      calc(var(--md-value) * 1px)
    );
  }
  .md-specimen[data-kind="layers"] .md-reading::after {
    transform: translate(
      calc(var(--md-value) * -0.6px),
      calc(var(--md-value) * 2px)
    );
  }
  .md-specimen {
    padding: 45px 30px 80px;
    min-height: 400px;
  }
  .md-reading {
    padding: 24px;
  }
  .md-reading h3 {
    font-size: 34px;
  }
}