.playback-menu.sc-card {
  --sc-ink: var(--pp-type, #22242b);
  --sc-graphite: var(--pp-graphite, #3a3f45);
  --sc-pencil: rgba(52, 57, 63, 0.82);
  --sc-faint: rgba(52, 57, 63, 0.62);
  --sc-rule: rgba(43, 58, 85, 0.26);
  --sc-scale: var(--ui-scale, 1);
  --sc-ratio: 1.37;
  --sc-draw: 110ms;                    

  color-scheme: light;
  position: fixed;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
  height: min(38em, calc(100dvh - 26px), calc((100vw - 26px) / var(--sc-ratio)));
  width: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 1.37;
  padding: 0;
  border: 0;
  border-radius: 1px;
  overflow: visible;
  color: var(--sc-ink);
  background-color: var(--pp-card, #ede6d6);
  background-image:
    radial-gradient(118% 92% at 16% 6%, rgba(255, 250, 232, 0.55), rgba(255, 250, 232, 0) 62%),
    var(--plate-index-card, url('../assets/ui/index-card-pinned.png'));
  background-repeat: no-repeat;
  background-size: 100% 100%, auto 250%;
  background-position: 0 0, 50% 50%;
  box-shadow:
    inset 0 0 0 1px rgba(120, 106, 78, 0.34),
    inset 0 0 16px rgba(118, 98, 58, 0.15),
    2px 3px 0 rgba(0, 0, 0, 0.35),
    6px 14px 22px rgba(0, 0, 0, 0.45);
  transform: rotate(-0.6deg);
  font: 400 calc(16px * var(--sc-scale)) / 1.45 var(--font-prose, Georgia, serif);
  pointer-events: auto;
}
.playback-menu.sc-card[open] { display: flex; flex-direction: column; }
.playback-menu.sc-card[hidden] { display: none; }
.playback-menu.sc-card::backdrop { background: rgba(3, 11, 15, 0.72); }
.playback-menu.sc-card::after {
  content: '';
  position: absolute;
  left: calc(14px * var(--sc-scale));
  top: calc(10px * var(--sc-scale));
  width: calc(24px * var(--sc-scale));
  height: calc(24px * var(--sc-scale));
  background: var(--plate-pin-sprites, url('../assets/ui/pin-sprites.png')) no-repeat;
  background-size: calc(195.9px * var(--sc-scale)) calc(98px * var(--sc-scale));
  background-position: calc(-7.35px * var(--sc-scale)) calc(-12.24px * var(--sc-scale));
  filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

.sc-card .sc-head {
  flex: none;
  padding: 1.15em 2.1em 0 3.5em;
}
.sc-card .sc-title {
  margin: 0;
  font: 700 1.42em/1.1 var(--font-type, monospace);
  letter-spacing: 0.04em;
  color: var(--sc-ink);
}
.sc-card .sc-margin-note {
  margin: 0.15em 0 0;
  font-family: var(--font-hand, 'Segoe Script', cursive);
  font-size: 1.16em;
  line-height: 1.2;
  color: var(--sc-pencil);
}

.sc-card .sc-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.5em 2.1em 1.5em;
}
.sc-card .sc-body > [hidden] { display: none; }

.sc-card .sc-tabs {
  --sc-tab-w: calc(114px * var(--sc-scale));
  --sc-tab-h: calc(39px * var(--sc-scale));
  --sc-tab-k: calc(0.7703 * var(--sc-scale));    
  --sc-tab-seam: calc(9px * var(--sc-scale));
  --sc-tab-drop: calc(7px * var(--sc-scale));
  position: absolute;
  left: calc(52px * var(--sc-scale));
  top: calc(var(--sc-tab-seam) - var(--sc-tab-h));
  display: flex;
  align-items: flex-end;
  gap: calc(5px * var(--sc-scale));
  z-index: 0;
}
.sc-card .sc-tabs[hidden] { display: none; }
.sc-card .sc-tab {
  position: relative;
  box-sizing: border-box;
  width: var(--sc-tab-w);
  height: var(--sc-tab-h);
  margin: 0;
  padding: calc(6px * var(--sc-scale)) 2px var(--sc-tab-seam);
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  font: 400 calc(12.5px * var(--sc-scale))/1 var(--font-type, monospace);
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--sc-faint);
  transform: translateY(var(--sc-tab-drop));
  transition: transform var(--pp-t-lift, 140ms) var(--pp-ease-paper, ease),
              color var(--pp-t-lift, 140ms) var(--pp-ease-paper, ease);
}
.sc-card .sc-tab-word {
  display: inline-block;
  padding-bottom: 1px;
}
.sc-card .sc-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--plate-index-tabs, url('../assets/ui/index-tabs-cut.webp'));
  background-repeat: no-repeat;
  background-size: calc(600px * var(--sc-tab-k)) calc(400px * var(--sc-tab-k));
  filter: brightness(0.86) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.42));
  clip-path: inset(0 0 calc(var(--sc-tab-seam) + var(--sc-tab-drop)) 0);
}
.sc-card .sc-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--sc-tab-seam) + var(--sc-tab-drop) + 8px);
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
  clip-path: inset(0 0 calc(var(--sc-tab-seam) + var(--sc-tab-drop)) 0);
  pointer-events: none;
}
.sc-card #sc-tab-sound::before     { background-position: calc(-22px * var(--sc-tab-k)) calc(-24px * var(--sc-tab-k)); }
.sc-card #sc-tab-reading::before   { background-position: calc(-228px * var(--sc-tab-k)) calc(-24px * var(--sc-tab-k)); }
.sc-card #sc-tab-observing::before { background-position: calc(-425px * var(--sc-tab-k)) calc(-24px * var(--sc-tab-k)); }
.sc-card .sc-tab[aria-selected='true'] {
  transform: translateY(0);
  color: var(--sc-ink);
  font-weight: 700;
  z-index: 2;
}
.sc-card .sc-tab[aria-selected='true']::before {
  filter: brightness(1.1) drop-shadow(-1px 0 2px rgba(0, 0, 0, 0.4));
  clip-path: none;
}
.sc-card .sc-tab[aria-selected='true']::after { background: none; clip-path: none; }
.sc-card .sc-tab:hover { color: var(--sc-ink); }

.sc-card .sc-pause {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2em;
  padding-top: 0.9em;
}
.sc-card .sc-line {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  width: min(27em, 100%);
  min-height: 2.7em;
  margin: 0;
  padding: 0.55em 0.2em;
  box-sizing: border-box;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: 400 1.06em/1.3 var(--font-type, monospace);
  letter-spacing: 0.035em;
  color: var(--sc-ink);
}
.sc-card .sc-line[hidden] { display: none; }
.sc-card .sc-line-text { flex: none; }
.sc-card .sc-line .sc-dots { min-width: 1.5em; }
@media (max-width: 719px) {
  .sc-card .sc-pause .sc-line-text { flex: 0 1 auto; min-width: 0; }
  .sc-card .sc-pause .sc-line .sc-dots { min-width: 0; }
}
.sc-card .sc-arrow {
  position: relative;
  flex: none;
  width: 1.5em;
  height: 0.8em;
  opacity: 0.6;
  transition: transform var(--pp-t-lift, 140ms) var(--pp-ease-paper, ease),
              opacity var(--pp-t-lift, 140ms) var(--pp-ease-paper, ease);
}
.sc-card .sc-arrow::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0.12em;
  top: 50%;
  height: 1.4px;
  background: var(--sc-pencil);
}
.sc-card .sc-arrow::after {
  content: '';
  position: absolute;
  right: 0.1em;
  top: 50%;
  width: 0.46em;
  height: 0.46em;
  border-top: 1.4px solid var(--sc-pencil);
  border-right: 1.4px solid var(--sc-pencil);
  transform: translateY(-50%) rotate(43deg);
}
.sc-card .sc-line:hover .sc-arrow,
.sc-card .sc-line:focus-visible .sc-arrow { opacity: 1; transform: translateX(3px); }
.sc-card .sc-line:hover .sc-line-text,
.sc-card .sc-line:focus-visible .sc-line-text {
  background-image: linear-gradient(var(--sc-graphite), var(--sc-graphite));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.5px;
}
.sc-card .sc-line-value { color: var(--sc-pencil); }
.sc-card .sc-key-hint {
  margin: 1em 0 0;
  font-family: var(--font-hand, 'Segoe Script', cursive);
  font-size: 1.14em;
  color: var(--sc-pencil);
}
@media (hover: none) and (pointer: coarse) {
  .sc-card .sc-key-hint { display: none; }
}

.sc-card .sc-prefs {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sc-card .sc-faces { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sc-card .sc-face {
  columns: 2;
  column-gap: 2.1em;
  column-rule: 1px solid var(--sc-rule);
  flex: none;
}
.sc-card .sc-face[hidden] { display: none; }

@media (min-width: 720px) and (min-height: 601px) {
  .sc-card #sc-face-sound:not([hidden]),
  .sc-card #sc-face-reading:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    columns: auto;
    column-rule: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.1em 6% 0 0.2em;
  }
  .sc-card #sc-face-sound .sc-row,
  .sc-card #sc-face-reading .sc-row { margin-bottom: 0; }
  .sc-card #sc-face-sound .sc-row-slider { display: flex; flex-direction: column; }
  .sc-card #sc-face-sound .sc-row-slider .sc-hint { order: 1; margin-top: 0.02em; }
  .sc-card #sc-face-sound .sc-row-slider .sc-gauge { order: 2; }
  .sc-card #sc-face-sound .sc-gauge {
    --sc-track-y: calc(12px * var(--sc-scale));
    --sc-track-h: calc(14px * var(--sc-scale));
    --sc-clip-h: calc(40px * var(--sc-scale));
    height: calc(52px * var(--sc-scale));
  }
  .sc-card #sc-face-sound .sc-range { height: calc(52px * var(--sc-scale)); }
  .sc-card #sc-face-sound .sc-gauge-nums { font-size: calc(12.5px * var(--sc-scale)); }
  .sc-card #sc-face-sound .sc-muted-note { margin-top: 0; }
}
.sc-card .sc-face-in { animation: sc-face-settle 140ms var(--pp-ease-paper, ease) both; }
@keyframes sc-face-settle {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.sc-card .sc-row {
  break-inside: avoid;
  display: block;
  margin: 0 0 0.62em;
  padding: 0;
  border: 0;
  min-width: 0;
}
.sc-card fieldset.sc-row { margin-inline: 0; padding-block: 0; }
.sc-card .sc-label {
  display: inline;
  padding: 0;
  font: 400 max(15px, 0.95em)/1.3 var(--font-type, monospace);
  letter-spacing: 0.05em;
  color: var(--sc-ink);
}
.sc-card legend.sc-label { float: none; width: auto; }
.sc-card .sc-hint {
  display: block;
  margin: 0.12em 0 0;
  font: italic max(13px, 0.85em)/1.36 var(--font-prose, Georgia, serif);
  color: var(--sc-pencil);
}
.sc-card .sc-leader {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  min-height: 1.5em;
}
.sc-card .sc-dots {
  flex: 1 1 auto;
  height: 0.55em;
  background: radial-gradient(circle at 1px 100%, var(--sc-faint) 0.8px, transparent 1px) 0 100% / 5px 5px repeat-x;
  opacity: 0.75;
}

.sc-card .sc-row-toggle { cursor: pointer; }
.sc-card .sc-mark {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.sc-card .sc-box {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 1.38em;
  height: 1.38em;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  box-shadow: none;
}
.sc-card .sc-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--sc-ink), var(--sc-ink)) 4% 6%   / 96% 1.5px no-repeat,
    linear-gradient(var(--sc-ink), var(--sc-ink)) 0   94% / 94% 1.5px no-repeat,
    linear-gradient(var(--sc-ink), var(--sc-ink)) 5%  0   / 1.5px 97% no-repeat,
    linear-gradient(var(--sc-ink), var(--sc-ink)) 95% 3%  / 1.5px 95% no-repeat;
  opacity: 0.82;
}
.sc-card .sc-cross {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.38em;
  height: 1.38em;
  pointer-events: none;
  overflow: visible;
}
.sc-card .sc-cross path {
  fill: none;
  stroke: var(--sc-graphite);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset var(--sc-draw) var(--pp-ease-paper, ease);
}
.sc-card .sc-cross path:last-child { transition-delay: 70ms; }
.sc-card .sc-box:checked ~ .sc-cross path { stroke-dashoffset: 0; }
.sc-card .sc-state {
  min-width: 1.9em;
  font: 400 0.85em/1 var(--font-type, monospace);
  letter-spacing: 0.06em;
  color: var(--sc-pencil);
}

.sc-card .sc-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 1.05em;
  margin-top: 0.12em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid var(--sc-rule);
}
.sc-card .sc-choice { cursor: pointer; }
.sc-card .sc-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sc-card .sc-word {
  position: relative;
  display: inline-block;
  padding: 0.28em 0.36em 0.3em;
  min-width: 2em;
  text-align: center;
  font: 400 0.96em/1.25 var(--font-type, monospace);
  letter-spacing: 0.045em;
  color: var(--sc-faint);
  transition: color var(--pp-t-lift, 140ms) var(--pp-ease-paper, ease);
}
.sc-card .sc-ring {
  position: absolute;
  left: -0.06em;
  top: -0.08em;
  width: calc(100% + 0.12em);
  height: calc(100% + 0.16em);
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.sc-card .sc-ring path {
  fill: none;
  stroke: var(--sc-graphite);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.sc-card .sc-vh:checked ~ .sc-word { color: var(--sc-ink); }
.sc-card .sc-vh:checked ~ .sc-word .sc-ring {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--sc-draw) cubic-bezier(0.16, 0.92, 0.3, 1);
}
.sc-card .sc-choice:hover .sc-word { color: var(--sc-ink); }

.sc-card .sc-row-lines .sc-line-choice {
  display: block;
  margin-top: 0.18em;
  cursor: pointer;
}
.sc-card .sc-row-lines .sc-word { display: inline-block; }
.sc-card .sc-hint-line { margin-top: 0; padding-left: 0.36em; }

.sc-card .sc-gauge {
  --sc-track-y: calc(9px * var(--sc-scale));
  --sc-track-h: calc(9px * var(--sc-scale));
  --sc-clip-h: calc(30px * var(--sc-scale));
  position: relative;
  margin: 0.14em 0 0;
  padding: 0;
  height: calc(40px * var(--sc-scale));
}
.sc-card .sc-gauge-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--sc-track-y);
  height: var(--sc-track-h);
  background:
    linear-gradient(var(--sc-faint), var(--sc-faint)) 0 100% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg,
      var(--sc-faint) 0 1px, transparent 1px 10%) 0 0 / calc(100% - 1px) 100% no-repeat,
    linear-gradient(var(--sc-faint), var(--sc-faint)) 100% 0 / 1px 100% no-repeat;
  opacity: 0.7;
}
.sc-card .sc-gauge-nums {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--sc-track-y) + var(--sc-track-h) + 3px);
  display: flex;
  justify-content: space-between;
  font: 400 calc(11.5px * var(--sc-scale))/1 var(--font-type, monospace);
  color: var(--sc-faint);
  pointer-events: none;
}
.sc-card .sc-gauge-nums i { font-style: normal; }
.sc-card .sc-range {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: block;
  width: 100%;
  height: calc(40px * var(--sc-scale));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
}
.sc-card .sc-range::-webkit-slider-runnable-track {
  height: var(--sc-track-h);
  margin-top: var(--sc-track-y);
  border: 0;
  background:
    linear-gradient(rgba(58, 63, 69, 0.9), rgba(58, 63, 69, 0.9))
      0 100% / var(--sc-fill, 0%) 1.5px no-repeat,
    repeating-linear-gradient(48deg,
      rgba(58, 63, 69, 0.2) 0 1px, transparent 1px 6px) 0 100% / var(--sc-fill, 0%) 62% no-repeat;
}
.sc-card .sc-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: calc(13px * var(--sc-scale));
  height: var(--sc-clip-h);
  margin-top: calc((var(--sc-track-h) - var(--sc-clip-h)) / 2);
  border: 0;
  border-radius: 0;
  background: var(--plate-pin-sprites, url('../assets/ui/pin-sprites.png')) no-repeat;
  background-size: calc(151.5px * var(--sc-scale)) calc(75.8px * var(--sc-scale));
  background-position: calc(-42.0px * var(--sc-scale)) calc(-41.3px * var(--sc-scale));
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.45));
}
.sc-card .sc-range::-moz-range-track {
  height: var(--sc-track-h);
  border: 0;
  background: linear-gradient(var(--sc-faint), var(--sc-faint)) 0 100% / 100% 1px no-repeat;
}
.sc-card .sc-range::-moz-range-progress {
  height: var(--sc-track-h);
  background:
    linear-gradient(rgba(58, 63, 69, 0.9), rgba(58, 63, 69, 0.9)) 0 100% / 100% 1.5px no-repeat,
    repeating-linear-gradient(48deg, rgba(58, 63, 69, 0.22) 0 1px, transparent 1px 6px);
}
.sc-card .sc-range::-moz-range-thumb {
  width: calc(13px * var(--sc-scale));
  height: var(--sc-clip-h);
  border: 0;
  border-radius: 0;
  background: var(--plate-pin-sprites, url('../assets/ui/pin-sprites.png')) no-repeat;
  background-size: calc(151.5px * var(--sc-scale)) calc(75.8px * var(--sc-scale));
  background-position: calc(-42.0px * var(--sc-scale)) calc(-41.3px * var(--sc-scale));
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.45));
}
.sc-card .sc-value {
  flex: none;
  min-width: 2.2em;
  text-align: right;
  font: 400 0.88em/1 var(--font-type, monospace);
  color: var(--sc-pencil);
}
.sc-card .sc-muted-note {
  break-inside: avoid;
  margin: 0.2em 0 0;
  padding-left: 0.7em;
  border-left: 2px solid rgba(140, 120, 85, 0.6);
  font: italic 0.85em/1.32 var(--font-prose, Georgia, serif);
  color: var(--sc-pencil);
}
.sc-card .sc-muted-note[hidden] { display: none; }

.sc-card .sc-foot {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1em;
  margin-top: 0.5em;
  padding: 0;
  border: 0;
  background: none;
}
.sc-card .sc-foot-lines {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15em 1.1em;
  min-width: 0;
}
.sc-card .sc-typed-line {
  display: inline-block;
  margin: 0;
  padding: 0.24em 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 400 max(13px, 0.83em)/1.35 var(--font-type, monospace);
  letter-spacing: 0.04em;
  color: var(--sc-pencil);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--sc-rule);
  transition: color var(--pp-t-lift, 140ms) var(--pp-ease-paper, ease),
              text-decoration-color var(--pp-t-lift, 140ms) var(--pp-ease-paper, ease);
}
.sc-card .sc-typed-line:hover,
.sc-card .sc-typed-line:focus-visible {
  color: var(--sc-ink);
  text-decoration-color: var(--sc-graphite);
}
.sc-card .sc-typed-line[hidden] { display: none; }
.sc-card .sc-back { flex-basis: 100%; }
.sc-card .sc-storage-note {
  flex-basis: 100%;
  margin: 0;
  font: italic 0.82em/1.3 var(--font-prose, Georgia, serif);
  color: var(--sc-pencil);
}
.sc-card .sc-storage-note[hidden] { display: none; }

.sc-card .sc-stamp {
  flex: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 6.4em;
  min-height: 2.65em;
  margin: 0 0 0.1em;
  padding: 0.5em 1.1em;
  border: 0;
  background: none;
  cursor: pointer;
  font: 700 max(13px, 0.86em)/1 var(--font-type, monospace);
  letter-spacing: var(--track-stamp, 0.3em);
  text-indent: var(--track-stamp, 0.3em);
  text-transform: uppercase;
  color: var(--pp-stamp-blue, #2b3a55);
  transform: rotate(1.6deg);
  transition: transform var(--pp-t-lift, 140ms) var(--pp-ease-paper, ease);
}
.sc-card .sc-stamp::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--pp-stamp-blue, #2b3a55);
  -webkit-mask: var(--plate-stamp-ring-cut, url('../assets/ui/stamp-ring-cut.webp')) center / 100% 100% no-repeat;
  mask: var(--plate-stamp-ring-cut, url('../assets/ui/stamp-ring-cut.webp')) center / 100% 100% no-repeat;
  opacity: 0.78;
}
.sc-card .sc-stamp::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: max(100%, 44px);
}
.sc-card .sc-stamp:hover { transform: rotate(1.6deg) translateY(-1px); }
.sc-card .sc-stamp-inline { margin-top: 0.8em; justify-self: start; }
.sc-card .sc-picker { display: none; }

.sc-card .sc-notices {
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  columns: 2;
  column-gap: 2.1em;
  column-rule: 1px solid var(--sc-rule);
  padding-top: 0.35em;
}
.sc-card .sc-notice { break-inside: avoid; margin: 0 0 0.66em; }
.sc-card .sc-notice-head {
  margin: 0 0 0.1em;
  font: 400 max(13px, 0.82em)/1.3 var(--font-type, monospace);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sc-pencil);
}
.sc-card .sc-notice-line {
  margin: 0 0 0.2em;
  font: max(13px, 0.86em)/1.38 var(--font-prose, Georgia, serif);
  color: var(--sc-ink);
}

.sc-card .sc-slip {
  position: absolute;
  right: 6%;
  bottom: 7%;
  width: min(23em, 76%);
  box-sizing: border-box;
  padding: 1em 1.15em 0.85em;
  background-color: #efe9d9;
  background-image: var(--plate-note-slip, url('../assets/ui/note-slip-cut.webp'));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.28), 4px 9px 16px rgba(0, 0, 0, 0.4);
  transform: rotate(0.9deg);
  animation: sc-slip-land 180ms var(--pp-ease-paper, ease) both;
}
@keyframes sc-slip-land {
  from { opacity: 0; transform: rotate(0.9deg) translateY(-8px); }
  to   { opacity: 1; transform: rotate(0.9deg) translateY(0); }
}
.sc-card .sc-slip-text {
  margin: 0;
  font: 0.88em/1.4 var(--font-prose, Georgia, serif);
  color: var(--sc-ink);
}
.sc-card .sc-slip-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 1.2em;
  margin-top: 0.5em;
}

.playback-menu.sc-card :is(button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--sc-graphite);
  outline-offset: 4px;
  border-radius: 1px;
}
.playback-menu.sc-card .sc-vh:focus-visible { outline: none; }
.playback-menu.sc-card .sc-vh:focus-visible ~ .sc-word {
  outline: 2px solid var(--sc-graphite);
  outline-offset: 3px;
  color: var(--sc-ink);
}
.playback-menu.sc-card .sc-tabs .sc-tab:focus-visible {
  outline: none;
  color: var(--sc-ink);
}
.playback-menu.sc-card .sc-tabs .sc-tab:focus-visible .sc-tab-word {
  background-image: linear-gradient(var(--sc-graphite), var(--sc-graphite));
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% 2px;
}

body.clear-reading .playback-menu.sc-card :is(.sc-title, .sc-margin-note, .sc-label,
  .sc-hint, .sc-line, .sc-key-hint, .sc-word, .sc-state, .sc-value, .sc-typed-line,
  .sc-tab, .sc-stamp, .sc-notice-head, .sc-notice-line, .sc-slip-text, .sc-muted-note,
  .sc-storage-note, .sc-gauge-nums) {
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
}

.playback-menu.sc-card[open] {
  animation: sc-card-settle 220ms var(--pp-ease-paper, cubic-bezier(.22,.61,.36,1)) both;
}
@keyframes sc-card-settle {
  from { opacity: 0; transform: translateY(-14px) rotate(-2.6deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-0.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .playback-menu.sc-card[open] { animation: sc-card-fade 120ms linear both; }
  .sc-card .sc-face-in { animation: sc-card-fade 100ms linear both; }
  .sc-card .sc-slip { animation: sc-card-fade 100ms linear both; }
  .sc-card .sc-cross path { transition: none; }
  .sc-card .sc-vh:checked ~ .sc-word .sc-ring { transition: none; }
  .sc-card :is(.sc-tab, .sc-line, .sc-line::after, .sc-stamp, .sc-typed-line, .sc-word) { transition: none; }
}
body.reduce-motion .playback-menu.sc-card[open] { animation: sc-card-fade 120ms linear both; }
body.reduce-motion .sc-card .sc-cross path { transition: none; }
body.reduce-motion .sc-card .sc-vh:checked ~ .sc-word .sc-ring { transition: none; }
body.reduce-motion .sc-card .sc-face-in,
body.reduce-motion .sc-card .sc-slip { animation: sc-card-fade 100ms linear both; }
@keyframes sc-card-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 719px) {
  .playback-menu.sc-card {
    height: auto;
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 16px);
    aspect-ratio: auto;
    background-color: var(--pp-card, #ede6d6);
    background-size: auto 200%;
    background-position: 50% 50%;
    box-shadow:
      inset 0 0 0 1px rgba(120, 106, 78, 0.5),
      2px 3px 0 rgba(0, 0, 0, 0.3),
      6px 14px 22px rgba(0, 0, 0, 0.45);
    transform: rotate(-0.4deg);
    font-size: calc(16px * var(--sc-scale));
  }
  .playback-menu.sc-card[open] { animation-name: sc-card-settle-flat; }
  @keyframes sc-card-settle-flat {
    from { opacity: 0; transform: translateY(-12px) rotate(-2deg); }
    to   { opacity: 1; transform: translateY(0) rotate(-0.4deg); }
  }
  .playback-menu.sc-card::after {
    content: '';
    position: absolute;
    left: 0.85em;
    top: 0.6em;
    width: 1.55em;
    height: 1.55em;
    background: var(--plate-pin-sprites, url('../assets/ui/pin-sprites.png')) 0 0 / 500% 200% no-repeat;
    filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.4));
    pointer-events: none;
  }
  .sc-card .sc-head { padding: 0.7em 1em 0 2.9em; }
  .sc-card .sc-body { padding: 0.5em 1em 0.95em; min-height: 0; overflow: hidden; }
  .sc-card .sc-tabs {
    --sc-tab-w: calc(106px * var(--sc-scale));
    --sc-tab-h: calc(34px * var(--sc-scale));
    --sc-tab-k: calc(0.7162 * var(--sc-scale));
    --sc-tab-drop: calc(4px * var(--sc-scale));
    left: calc(34px * var(--sc-scale));
    right: auto;
    top: calc(6px * var(--sc-scale));
    gap: calc(4px * var(--sc-scale));
  }
  .sc-card .sc-tab { padding-bottom: calc(6px * var(--sc-scale)); }
  .sc-card .sc-tab::before { clip-path: none; }
  .sc-card .sc-tab::after {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    clip-path: none;
    background: rgba(46, 39, 24, 0.32);
  }
  .sc-card .sc-tab[aria-selected='true']::after { background: none; }
  .sc-card .sc-tab[aria-selected='true']::before {
    filter: brightness(1.12) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
  }
  .sc-card[data-screen='settings'] .sc-head { padding-top: calc(48px * var(--sc-scale)); }
  .sc-card .sc-faces { display: flex; flex-direction: column; min-height: 0; }
  .sc-card :is(.sc-face, .sc-notices) {
    columns: auto;
    column-rule: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .sc-card .sc-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .sc-card .sc-gauge {
    --sc-track-y: calc(11px * var(--sc-scale));
    --sc-track-h: calc(12px * var(--sc-scale));
    --sc-clip-h: calc(34px * var(--sc-scale));
    height: calc(46px * var(--sc-scale));
  }
  .sc-card .sc-range { height: calc(46px * var(--sc-scale)); }
  .sc-card :is(.sc-face, .sc-notices)::-webkit-scrollbar { width: 0; height: 0; }
  .sc-card :is(.sc-face, .sc-notices).sc-face-more {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 2.4em), rgba(0, 0, 0, 0.08));
    mask-image: linear-gradient(#000 calc(100% - 2.4em), rgba(0, 0, 0, 0.08));
  }
  .sc-card .sc-row { margin-bottom: 0.5em; }
  .sc-card .sc-foot { margin-top: 0.4em; }
  .sc-card .sc-foot-lines { gap: 0.1em 0.9em; }
  .sc-card .sc-slip { right: 4%; left: 4%; width: auto; bottom: 5%; }
}

@media (max-height: 600px) {
  .playback-menu.sc-card { font-size: calc(13.5px * var(--sc-scale)); }
  .sc-card .sc-tabs {
    --sc-tab-w: calc(100px * var(--sc-scale));
    --sc-tab-h: calc(30px * var(--sc-scale));
    --sc-tab-k: calc(0.6757 * var(--sc-scale));
    --sc-tab-drop: calc(3px * var(--sc-scale));
    left: auto;
    right: calc(10px * var(--sc-scale));
    top: calc(4px * var(--sc-scale));
    gap: calc(4px * var(--sc-scale));
  }
  .sc-card .sc-tab { padding-bottom: calc(5px * var(--sc-scale)); }
  .sc-card .sc-tab::before { clip-path: none; }
  .sc-card .sc-tab::after {
    top: 0; left: 0; right: 0; bottom: 0; height: auto;
    clip-path: none;
    background: rgba(46, 39, 24, 0.32);
  }
  .sc-card .sc-tab[aria-selected='true']::after { background: none; }
  .sc-card .sc-head { padding-right: calc(326px * var(--sc-scale)); }
  .sc-card .sc-label { font-size: max(12.4px, 0.95em); }
  .sc-card .sc-word { font-size: max(12px, 0.96em); padding: 0.2em 0.3em 0.22em; }
  .sc-card .sc-hint { display: none; }
  .sc-card .sc-row { margin-bottom: 0.32em; }
  .sc-card .sc-row-lines .sc-line-choice { margin-top: 0.1em; }
  .sc-card .sc-choices { margin-top: 0.06em; padding-bottom: 0.12em; }
  .sc-card .sc-gauge { height: 2.4em; }
  .sc-card .sc-gauge-rule { top: 1.05em; }
  .sc-card .sc-gauge-nums { top: 1.6em; }
  .sc-card .sc-range { height: 2.4em; }
  .sc-card .sc-range::-webkit-slider-runnable-track { margin-top: 1.05em; }
  .sc-card .sc-range::-webkit-slider-thumb { height: 2.4em; margin-top: -0.95em; }
  .sc-card .sc-key-hint { margin-top: 0.5em; }
  .sc-card .sc-head { padding-top: 2%; }
  .sc-card .sc-notices {
    columns: auto;
    column-rule: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .sc-card .sc-notices::-webkit-scrollbar { width: 0; height: 0; }
  .sc-card .sc-notices.sc-face-more {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 2.4em), rgba(0, 0, 0, 0.08));
    mask-image: linear-gradient(#000 calc(100% - 2.4em), rgba(0, 0, 0, 0.08));
  }
}