[data-exhibit] {
  --ex-graphite:#262722;
  --ex-paper:#f8f6ed;
  --ex-rule:#cbc8bc;
  width: 100%;
  min-width: 0;
  padding: 0 7px 7px;
  overflow: hidden;
  border: 1px solid #4a4940;
  border-radius: 9px;
  background: var(--ex-graphite);
  color: #f4f2e7;
  text-align: left;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 9px 25px -16px #332e2380;
}
[data-exhibit], [data-exhibit] * { box-sizing: border-box; }
[data-exhibit] .ex-bar, [data-exhibit] .ex-file, [data-exhibit] .ex-actions,
[data-exhibit] button, [data-exhibit] .ex-result, [data-exhibit] .ex-padfoot {
  display: flex;
  align-items: center;
}
[data-exhibit] .ex-bar {
  min-height: 46px;
  padding: 4px 6px;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #eeede7;
}
[data-exhibit] .ex-file {
  gap: 7px;
  font: 550 12px/1.3 Inter, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.025em;
}
[data-exhibit] svg { flex: none; width: 15px; height: 15px; }
[data-exhibit] .ex-file svg { color: #dda1c5; }
[data-exhibit] .ex-actions { flex-wrap: wrap; gap: 4px; }
[data-exhibit] button {
  justify-content: center;
  gap: 5px;
  padding: 6px 9px;
  min-height: 30px;
  margin: 0;
  color: inherit;
  background: transparent;
  border: 1px solid #77786d;
  border-radius: 5px;
  font: 520 11px/1.25 Inter, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.015em;
  cursor: pointer;
}
[data-exhibit] button[aria-pressed="true"] { color: #25241f; background: #eee9dc; border-color: #eee9dc; }
[data-exhibit] button:not(:disabled):hover { border-color: currentColor; }
[data-exhibit] button:focus-visible, [data-exhibit] input:focus-visible { outline: 2px solid #aa5294; outline-offset: 2px; }
[data-exhibit] button:disabled { opacity: .42; cursor: default; }
[data-exhibit] [hidden] { display:none; }
[data-exhibit] .ex-paper {
  position: relative;
  margin: 0;
  background: var(--ex-paper);
  color: #272822;
  border-radius: 4px;
  padding: clamp(22px,4.1vw,54px);
}
[data-exhibit] .ex-paper h3 {
  padding: 0;
  margin: 0;
  font: 400 clamp(25px,3.1vw,45px)/1.02 Georgia, "Times New Roman", serif;
  letter-spacing: -.06em;
  color: inherit;
  text-wrap: balance;
}
[data-exhibit] .ex-paper h3::first-letter { font: inherit; }
[data-exhibit] .ex-subject { display: block; margin-bottom: 18px; font: 550 11px/1.3 Inter, Arial, sans-serif; }
[data-exhibit] .ex-pdf p {
  color: #37382f;
  margin: 16px 0;
  max-width: 38ch;
  font: 400 clamp(15px,1.6vw,21px)/1.47 Georgia, serif;
  letter-spacing: -.027em;
}
[data-exhibit] mark {
  padding-inline: .03em;
  background: linear-gradient(transparent 12%,#e3a6cf 12%,#e3a6cf 91%,transparent 91%) no-repeat left/0% 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: inherit;
  transition: background-size 280ms ease-out;
}
[data-exhibit].ex-marked mark { background-size: 100% 100%; }
[data-exhibit] .ex-formula {
  margin: 0;
  color: #414d44;
  font: italic 400 clamp(22px,2.3vw,34px)/1.25 Georgia,serif;
  letter-spacing: -.025em;
}
[data-exhibit] .ex-calc .ex-formula { margin: 10px 0 22px; }
[data-exhibit] .ex-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
[data-exhibit] .ex-fields label, [data-exhibit] .ex-result > span {
  min-width: 0;
  font: 550 12px/1.4 Inter, Arial, sans-serif;
  color: #45483e;
}
[data-exhibit] .ex-input {
  display: flex;
  align-items: center;
  margin-top: 6px;
  overflow: hidden;
  border: 1px solid #aaa99d;
  border-radius: 4px;
  background: #fffdf5;
}
[data-exhibit] .ex-input:focus-within { outline: 2px solid #aa5294; outline-offset: 1px; }
[data-exhibit] .ex-input:has(input[aria-invalid="true"]) { border-color: #a43d37; }
[data-exhibit] .ex-input input {
  color: #20211d;
  width: 100%;
  min-width: 0;
  padding: 9px;
  font: 520 17px/1.2 Inter, Arial, sans-serif;
  border: none;
  outline: none;
  background: transparent;
}
[data-exhibit] .ex-input > span { margin-right: 10px; }
[data-exhibit] .ex-result {
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid var(--ex-rule);
  justify-content: space-between;
  gap: 10px;
}
[data-exhibit] output { font: 400 clamp(24px,3vw,39px)/1.05 Georgia,serif; color:#282a21; }
[data-exhibit] .ex-error { margin: 7px 0 0; font: 500 12px/1.4 Inter,Arial,sans-serif; color:#91362d; }
[data-exhibit] .ex-error:empty { display:none; }
[data-exhibit] .ex-pad {
  position: relative;
  height: clamp(205px,25vw,348px);
  border-radius: 4px 4px 0 0;
  background: radial-gradient(circle,#bbb9a7 1px,transparent 1.15px) 0 0 / 15px 15px, var(--ex-paper);
}
[data-exhibit] .ex-pad canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
[data-exhibit].ex-touch-drawing .ex-pad canvas { touch-action: none; }
[data-exhibit] .ex-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: #6d7165;
  font: italic 400 clamp(17px,2.2vw,30px)/1.2 Georgia,serif;
  letter-spacing: -.04em;
  transform: rotate(-3deg);
  pointer-events: none;
}
[data-exhibit] .ex-padfoot {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--ex-paper);
  color: #44453a;
  border-top: 1px solid var(--ex-rule);
  border-radius: 0 0 4px 4px;
  padding: 3px 7px;
}
[data-exhibit] .ex-touch-draw { margin-right: auto; min-height: 44px; }
[data-exhibit] .ex-example { border-color:transparent; }
@media (max-width:480px) {
  [data-exhibit] .ex-bar { gap: 5px; padding: 6px 2px; }
  [data-exhibit] .ex-file { font-size: 11px; }
  [data-exhibit] .ex-actions button { padding-inline: 6px; }
}
@media (prefers-reduced-motion:reduce) {
  [data-exhibit] mark { transition: none; }
}