.cadence-lab[hidden],
.cadence-add-role[hidden],
.cadence-tuning[hidden],
.cadence-character[hidden],
.cadence-personality[hidden],
.cadence-response[hidden],
.cadence-proof[hidden],
[data-cadence-family-panel][hidden] {
  display: none;
}

body.is-cadence-tool-workstation {
  overflow: hidden;
  background: #050505;
}

body.is-cadence-tool-workstation #signal-noise,
body.is-cadence-tool-workstation .scanlines {
  display: none;
}

.tools-screen.is-cadence-tool-open {
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 15%, rgba(255, 72, 188, 0.1), transparent 32rem),
    radial-gradient(circle at 26% 78%, rgba(244, 240, 232, 0.07), transparent 28rem),
    #050505;
}

.tools-screen.is-cadence-tool-open > .collection-backdrop,
.tools-screen.is-cadence-tool-open > .interior-header {
  display: none;
}

.tools-screen.is-cadence-tool-open [data-tools-directory],
.tools-screen.is-cadence-tool-open [data-tools-landing],
.tools-screen.is-cadence-tool-open [data-color-tool] {
  display: none !important;
}

.cadence-lab {
  --cadence-paper: #f4f0e8;
  --cadence-ink: #050505;
  --cadence-signal: #ff48bc;
  --cadence-cyan: #4ef6ff;
  --cadence-line: rgba(244, 240, 232, 0.2);
  --cadence-muted: rgba(244, 240, 232, 0.62);
  position: absolute;
  display: grid;
  min-width: 0;
  min-height: 0;
  color: var(--cadence-paper);
  inset: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.cadence-masthead {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 4.4rem;
  border-bottom: 1px solid var(--cadence-line);
  background: rgba(5, 5, 5, 0.94);
  grid-template-columns: 6.5rem minmax(12rem, 18rem) minmax(18rem, 1fr) minmax(16rem, auto);
}

.cadence-masthead > * {
  min-width: 0;
  border-right: 1px solid var(--cadence-line);
}

.cadence-masthead > *:last-child { border-right: 0; }

.cadence-menu-button,
.cadence-utilities button,
.cadence-role-deck button,
.cadence-catalog button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.cadence-menu-button {
  display: grid;
  color: var(--cadence-cyan);
  font: 1.6rem/1 var(--editorial);
  place-items: center;
}

.cadence-menu-button:hover,
.cadence-menu-button:focus-visible,
.cadence-utilities button:hover,
.cadence-utilities button:focus-visible,
.cadence-role-deck button:hover,
.cadence-role-deck button:focus-visible,
.cadence-catalog button:hover,
.cadence-catalog button:focus-visible {
  outline: 2px solid var(--cadence-paper);
  outline-offset: -3px;
}

.cadence-brand,
.cadence-mode-readout,
.cadence-utilities {
  display: grid;
  padding: 0.75rem 1rem;
  align-content: center;
  gap: 0.28rem;
}

.cadence-brand span,
.cadence-mode-readout span,
.cadence-workspace__intro span,
.cadence-role-deck > header span,
.cadence-catalog__heading span,
.cadence-preview > header span {
  color: var(--cadence-signal);
  font: 0.625rem/1.3 var(--pixel);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cadence-brand h2,
.cadence-mode-readout strong,
.cadence-utilities b {
  margin: 0;
  font: 0.72rem/1.3 var(--pixel);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cadence-brand h2 { color: var(--cadence-paper); }
.cadence-mode-readout strong { font-size: clamp(0.7rem, 1vw, 0.92rem); }
.cadence-utilities { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cadence-utilities b { color: var(--cadence-cyan); font-size: 0.625rem; }
.cadence-utilities button { min-height: 2.5rem; padding: 0.55rem 0.75rem; border-left: 1px solid var(--cadence-line); font: 0.625rem/1.25 var(--pixel); text-transform: uppercase; }

.cadence-dashboard {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 6.5rem minmax(34rem, 1fr) minmax(20rem, 28rem);
}
.cadence-lab:is([data-cadence-active-view="response"], [data-cadence-active-view="proof"]) .cadence-dashboard { grid-template-columns: 6.5rem minmax(0, 1fr); }
.cadence-lab:is([data-cadence-active-view="response"], [data-cadence-active-view="proof"]) .cadence-preview { display: none; }

.cadence-toolrail {
  display: grid;
  min-height: 0;
  border-right: 1px solid var(--cadence-line);
  background: rgba(3, 3, 3, 0.76);
  align-content: start;
}

.cadence-toolrail button {
  display: grid;
  min-height: 5.6rem;
  padding: 0.65rem 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--cadence-line);
  background: transparent;
  color: var(--cadence-muted);
  place-items: center;
  gap: 0.25rem;
}

.cadence-toolrail button[aria-pressed="true"] { background: var(--cadence-signal); color: var(--cadence-ink); }
.cadence-toolrail button:disabled { opacity: 0.28; }
.cadence-toolrail button span { font: 900 1rem/1 var(--editorial); }
.cadence-toolrail button small,
.cadence-toolrail button kbd { font: 0.5rem/1.2 var(--pixel); text-transform: uppercase; }
.cadence-toolrail button kbd { opacity: 0.6; }

.cadence-workspace {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-color: var(--cadence-signal) #050505;
}

.cadence-workspace__intro {
  display: grid;
  padding: clamp(1.1rem, 2vw, 2rem);
  border-bottom: 1px solid var(--cadence-line);
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.7fr);
  gap: 2rem;
  align-items: end;
}

.cadence-workspace__intro h3,
.cadence-role-deck h4,
.cadence-catalog h4,
.cadence-preview h3 {
  margin: 0.25rem 0 0;
  color: var(--cadence-paper);
  font: 900 clamp(1.45rem, 3vw, 2.8rem)/0.96 var(--editorial);
  letter-spacing: -0.045em;
}

.cadence-workspace__intro p,
.cadence-catalog__heading p {
  margin: 0;
  color: var(--cadence-muted);
  font: 700 0.86rem/1.55 var(--editorial);
}

.cadence-role-deck,
.cadence-catalog {
  border-bottom: 1px solid var(--cadence-line);
}

.cadence-role-deck > header,
.cadence-catalog__heading {
  display: flex;
  min-height: 5rem;
  padding: 1rem clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--cadence-line);
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.cadence-catalog__heading {
  position: sticky;
  z-index: 3;
  top: 0;
  background: rgba(5, 5, 5, 0.96);
  backdrop-filter: blur(12px);
}

.cadence-catalog__readout {
  display: grid;
  justify-items: end;
  gap: 0.55rem;
}

.cadence-pager {
  display: grid;
  border: 1px solid var(--cadence-line);
  grid-template-columns: 2.5rem minmax(7rem, auto) 2.5rem 2.5rem;
  align-items: stretch;
}

.cadence-pager button {
  min-height: 2.35rem;
  color: var(--cadence-cyan);
  font: 1rem/1 var(--editorial);
}

.cadence-pager button:first-child { border-right: 1px solid var(--cadence-line); }
.cadence-pager button:nth-of-type(n + 2) { border-left: 1px solid var(--cadence-line); }
.cadence-pager button:disabled { color: var(--cadence-muted); cursor: not-allowed; opacity: 0.3; }
.cadence-pager output { display: grid; padding: 0.5rem 0.7rem; color: var(--cadence-paper); font: 0.56rem/1.3 var(--pixel); text-transform: uppercase; place-items: center; }

.cadence-role-deck h4,
.cadence-catalog h4,
.cadence-preview h3 { font-size: clamp(1.2rem, 2vw, 1.85rem); }

.cadence-role-deck > header button,
.cadence-add-role button,
.cadence-catalog__footer button {
  min-height: 2.8rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--cadence-signal);
  color: var(--cadence-paper);
  font: 0.625rem/1.3 var(--pixel);
  text-transform: uppercase;
}

.cadence-add-role {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cadence-line);
  background: rgba(255, 72, 188, 0.08);
}

.cadence-add-role label,
.cadence-catalog__controls label {
  display: grid;
  color: var(--cadence-muted);
  font: 0.625rem/1.3 var(--pixel);
  text-transform: uppercase;
  gap: 0.45rem;
}

.cadence-add-role > div { display: grid; margin-top: 0.5rem; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5rem; }

.cadence-add-role input,
.cadence-catalog input,
.cadence-catalog select,
.cadence-tuning input[type="number"],
.cadence-tuning select,
.cadence-character input[type="number"],
.cadence-character select,
.cadence-personality select,
.cadence-response input[type="number"],
.cadence-response select,
.cadence-role-name-input {
  width: 100%;
  min-width: 0;
  min-height: 2.8rem;
  padding: 0.62rem 0.72rem;
  border: 1px solid rgba(244, 240, 232, 0.34);
  border-radius: 0;
  background: #08090b;
  color: var(--cadence-paper);
  font: 700 0.8rem/1.35 var(--editorial);
}

.cadence-add-role input:focus,
.cadence-catalog input:focus,
.cadence-catalog select:focus,
.cadence-tuning input:focus,
.cadence-tuning select:focus,
.cadence-character input:focus,
.cadence-character select:focus,
.cadence-personality select:focus,
.cadence-response input:focus,
.cadence-response select:focus,
.cadence-role-name-input:focus { outline: 2px solid var(--cadence-cyan); outline-offset: 1px; }

.cadence-role-list {
  display: grid;
  padding: 1rem clamp(1rem, 2vw, 1.5rem) 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.cadence-role-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 8.5rem;
  border: 1px solid var(--cadence-line);
  background: rgba(10, 11, 14, 0.84);
  grid-template-rows: auto 1fr auto;
}

.cadence-role-card.is-active { border-color: var(--cadence-signal); box-shadow: inset 0 0 0 1px var(--cadence-signal); }
.cadence-role-card__select { display: grid; min-width: 0; padding: 0.8rem; text-align: left; gap: 0.45rem; }
.cadence-role-card__select span { color: var(--cadence-signal); font: 0.55rem/1.2 var(--pixel); text-transform: uppercase; }
.cadence-role-card__select strong { overflow: hidden; font: 800 1.12rem/1.12 var(--editorial); text-overflow: ellipsis; white-space: nowrap; }
.cadence-role-card__select small { color: var(--cadence-muted); font: 0.68rem/1.35 var(--editorial); }
.cadence-role-card__sample { display: block; overflow: hidden; padding: 0 0.8rem 0.65rem; font-size: 1.6rem; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.cadence-role-card__actions { display: flex; border-top: 1px solid var(--cadence-line); }
.cadence-role-card__actions button { min-height: 2.2rem; padding: 0.45rem 0.65rem; color: var(--cadence-muted); font: 0.5rem/1.2 var(--pixel); text-transform: uppercase; }
.cadence-role-name-input { height: 2.2rem; min-height: 0; padding: 0.35rem 0.5rem; border: 0; border-top: 1px solid var(--cadence-line); font-size: 0.72rem; }

.cadence-catalog__controls {
  display: grid;
  padding: 1rem clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--cadence-line);
  grid-template-columns: minmax(13rem, 1.4fr) repeat(3, minmax(9rem, 0.7fr));
  gap: 0.7rem;
}

.cadence-catalog__sample { grid-column: 1 / -1; }
.cadence-catalog select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cadence-signal) 50%), linear-gradient(135deg, var(--cadence-signal) 50%, transparent 50%); background-position: calc(100% - 1rem) 1.15rem, calc(100% - 0.7rem) 1.15rem; background-repeat: no-repeat; background-size: 0.32rem 0.32rem; }

.cadence-font-grid {
  display: grid;
  padding: 1rem clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.cadence-font-card {
  display: grid;
  min-width: 0;
  min-height: 12.5rem;
  border: 1px solid var(--cadence-line);
  background: rgba(8, 9, 11, 0.88);
  grid-template-rows: auto 1fr auto;
}

.cadence-font-card.is-assigned { border-color: var(--cadence-cyan); }
.cadence-font-card > header { display: flex; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--cadence-line); justify-content: space-between; gap: 0.8rem; }
.cadence-font-card > header strong { overflow: hidden; font: 0.7rem/1.3 var(--pixel); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.cadence-font-card > header span { flex: none; color: var(--cadence-signal); font: 0.52rem/1.3 var(--pixel); text-transform: uppercase; }
.cadence-font-card__sample { display: grid; min-height: 6.7rem; padding: 0.9rem 0.8rem; font-size: clamp(1.45rem, 3vw, 2.4rem); line-height: 1.02; letter-spacing: -0.035em; align-content: center; overflow-wrap: anywhere; }
.cadence-font-card footer { display: grid; min-height: 3.2rem; border-top: 1px solid var(--cadence-line); grid-template-columns: 1fr auto; align-items: center; }
.cadence-font-card footer small { padding: 0.55rem 0.8rem; color: var(--cadence-muted); font: 0.58rem/1.35 var(--pixel); }
.cadence-font-card footer button { height: 100%; padding: 0.55rem 0.75rem; border-left: 1px solid var(--cadence-line); color: var(--cadence-paper); font: 0.55rem/1.25 var(--pixel); text-transform: uppercase; }
.cadence-font-card.is-assigned footer button { background: var(--cadence-cyan); color: var(--cadence-ink); }

.cadence-font-grid__empty { grid-column: 1 / -1; padding: 3rem 1rem; border: 1px dashed var(--cadence-line); color: var(--cadence-muted); text-align: center; font: 800 1rem/1.5 var(--editorial); }

.cadence-catalog__footer { position: sticky; z-index: 3; bottom: 0; display: flex; padding: 0.75rem 1.5rem; border-top: 1px solid var(--cadence-line); background: rgba(5, 5, 5, 0.96); backdrop-filter: blur(12px); justify-content: flex-end; align-items: center; gap: 1rem; }
.cadence-catalog__footer button { background: var(--cadence-signal); color: var(--cadence-ink); }
.cadence-catalog__footer button:disabled { cursor: not-allowed; opacity: 0.35; }
.cadence-catalog__footer small { max-width: 28rem; color: var(--cadence-muted); font: 0.68rem/1.45 var(--editorial); text-align: right; }

.cadence-tuning { min-height: 100%; }

.cadence-tuning__roles {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--cadence-line);
  background: rgba(5, 5, 5, 0.96);
  scrollbar-color: var(--cadence-signal) #050505;
}

.cadence-tuning__roles button {
  display: grid;
  min-width: 9.5rem;
  min-height: 4.3rem;
  padding: 0.75rem 0.9rem;
  border: 0;
  border-right: 1px solid var(--cadence-line);
  background: transparent;
  color: var(--cadence-paper);
  text-align: left;
  cursor: pointer;
  align-content: center;
  gap: 0.3rem;
}

.cadence-tuning__roles button[aria-pressed="true"] { background: var(--cadence-signal); color: var(--cadence-ink); }
.cadence-tuning__roles button span { font: 0.62rem/1.2 var(--pixel); text-transform: uppercase; }
.cadence-tuning__roles button small { overflow: hidden; font: 700 0.7rem/1.25 var(--editorial); opacity: 0.72; text-overflow: ellipsis; white-space: nowrap; }

.cadence-tuning__desk { margin: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--cadence-line); background: rgba(8, 9, 11, 0.88); }
.cadence-tuning__desk > header { display: flex; min-height: 5rem; padding: 1rem; border-bottom: 1px solid var(--cadence-line); justify-content: space-between; align-items: center; gap: 1rem; }
.cadence-tuning__desk > header span { color: var(--cadence-signal); font: 0.58rem/1.3 var(--pixel); text-transform: uppercase; }
.cadence-tuning__desk > header h4 { margin: 0.2rem 0 0; font: 900 clamp(1.4rem, 3vw, 2.5rem)/1 var(--editorial); letter-spacing: -0.04em; }
.cadence-tuning__desk > header button { min-height: 2.7rem; padding: 0.6rem 0.8rem; border: 1px solid var(--cadence-line); background: transparent; color: var(--cadence-muted); font: 0.56rem/1.3 var(--pixel); text-transform: uppercase; cursor: pointer; }

.cadence-tuning__specimen {
  display: grid;
  min-height: clamp(13rem, 30vh, 22rem);
  padding: clamp(1.2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--cadence-line);
  background: linear-gradient(rgba(78, 246, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(78, 246, 255, 0.055) 1px, transparent 1px);
  background-size: 2rem 2rem;
  align-content: center;
  overflow-wrap: anywhere;
}

.cadence-tuning__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cadence-tuning__controls > label { display: grid; min-width: 0; padding: 1rem; border-right: 1px solid var(--cadence-line); border-bottom: 1px solid var(--cadence-line); gap: 0.6rem; }
.cadence-tuning__controls > label:nth-child(2n) { border-right: 0; }
.cadence-tuning__controls > label > span:first-child { color: var(--cadence-signal); font: 0.58rem/1.3 var(--pixel); text-transform: uppercase; }
.cadence-tuning__controls label small { color: var(--cadence-muted); font: 0.68rem/1.4 var(--editorial); }
.cadence-tuning select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cadence-signal) 50%), linear-gradient(135deg, var(--cadence-signal) 50%, transparent 50%); background-position: calc(100% - 1rem) 1.15rem, calc(100% - 0.7rem) 1.15rem; background-repeat: no-repeat; background-size: 0.32rem 0.32rem; }

.cadence-tuning__slider { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cadence-tuning__slider > span:first-child { grid-column: 1 / -1; }
.cadence-tuning__slider input[type="range"] { width: 100%; min-height: 2.8rem; margin: 0; accent-color: var(--cadence-signal); cursor: ew-resize; }
.cadence-tuning__number { display: grid; width: 8rem; border: 1px solid rgba(244, 240, 232, 0.34); grid-template-columns: 1fr 2.5rem; }
.cadence-tuning__number input[type="number"] { min-height: 2.8rem; border: 0; }
.cadence-tuning__number b { display: grid; border-left: 1px solid var(--cadence-line); color: var(--cadence-cyan); font: 0.52rem/1 var(--pixel); place-items: center; }

.cadence-character__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cadence-character__controls > label,
.cadence-character__controls > fieldset { min-width: 0; margin: 0; padding: 1rem; border: 0; border-right: 1px solid var(--cadence-line); border-bottom: 1px solid var(--cadence-line); }
.cadence-character__controls > :nth-child(2n) { border-right: 0; }
.cadence-character__controls > label { display: grid; gap: 0.6rem; }
.cadence-character__controls > label > span,
.cadence-character__controls legend,
.cadence-character__controls fieldset label > span:first-child { color: var(--cadence-signal); font: 0.58rem/1.3 var(--pixel); text-transform: uppercase; }
.cadence-character__controls legend { width: 100%; margin-bottom: 0.8rem; }
.cadence-character__controls fieldset { display: grid; gap: 0.8rem; }
.cadence-character__controls fieldset > label { display: grid; gap: 0.45rem; }
.cadence-character__controls select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cadence-signal) 50%), linear-gradient(135deg, var(--cadence-signal) 50%, transparent 50%); background-position: calc(100% - 1rem) 1.15rem, calc(100% - 0.7rem) 1.15rem; background-repeat: no-repeat; background-size: 0.32rem 0.32rem; }

.cadence-character__colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.cadence-character__colors label { display: grid; gap: 0.4rem; }
.cadence-character input[type="color"] { width: 100%; min-height: 2.8rem; padding: 0.25rem; border: 1px solid rgba(244, 240, 232, 0.34); border-radius: 0; background: #08090b; cursor: pointer; }
.cadence-character input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cadence-character input[type="color"]::-webkit-color-swatch { border: 0; }

.cadence-character__switch { display: flex !important; min-height: 2.8rem; padding: 0.65rem 0.75rem; border: 1px solid rgba(244, 240, 232, 0.34); align-items: center; gap: 0.65rem !important; cursor: pointer; }
.cadence-character__switch input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--cadence-signal); }
.cadence-character__switch span { color: var(--cadence-paper) !important; font: 700 0.75rem/1.35 var(--editorial) !important; text-transform: none !important; }

.cadence-character__range { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem !important; }
.cadence-character__range > span { grid-column: 1 / -1; }
.cadence-character__range input[type="range"] { width: 100%; min-height: 2.2rem; accent-color: var(--cadence-signal); cursor: ew-resize; }
.cadence-character__range output { min-width: 4.8rem; padding: 0.55rem; border: 1px solid var(--cadence-line); color: var(--cadence-cyan); font: 0.55rem/1.2 var(--pixel); text-align: center; }
.cadence-character__shadow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cadence-character__shadow legend { grid-column: 1 / -1; }
.cadence-character__shadow .cadence-character__switch { grid-column: 1 / -1; }

.cadence-personality__actions { display: flex; gap: 0.5rem; }
.cadence-personality__stage { width: 100%; border: 0; border-bottom: 1px solid var(--cadence-line); color: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.cadence-personality__stage:focus-visible { outline: 2px solid var(--cadence-cyan); outline-offset: -3px; }
.cadence-personality__phrase { display: block; max-width: 100%; overflow-wrap: anywhere; }
.cadence-personality__word { display: inline-block; white-space: nowrap; }
.cadence-personality__unit { display: inline-block; white-space: pre; transform-origin: center; animation-duration: var(--cadence-duration); animation-delay: calc(var(--cadence-i) * var(--cadence-stagger)); animation-timing-function: var(--cadence-ease, ease-out); animation-fill-mode: both; }
.cadence-personality__stage[data-easing="ease-out"] { --cadence-ease: cubic-bezier(0.16, 1, 0.3, 1); }
.cadence-personality__stage[data-easing="ease-in-out"] { --cadence-ease: cubic-bezier(0.65, 0, 0.35, 1); }
.cadence-personality__stage[data-easing="linear"] { --cadence-ease: linear; }
.cadence-personality__stage[data-easing="spring"] { --cadence-ease: cubic-bezier(0.34, 1.56, 0.64, 1); }
.cadence-personality__stage[data-easing="snap"] { --cadence-ease: cubic-bezier(0.7, 0, 0.84, 0); }
.cadence-personality__stage[data-trigger="loop"] .cadence-personality__unit { animation-iteration-count: infinite; animation-direction: alternate; }

.cadence-personality__stage[data-effect="unfold"].is-personality-active .cadence-personality__unit,
.cadence-personality__stage[data-effect="unfold"][data-trigger="hover"]:is(:hover, :focus-visible) .cadence-personality__unit { animation-name: cadence-unfold; }
.cadence-personality__stage[data-effect="breathe"].is-personality-active .cadence-personality__unit,
.cadence-personality__stage[data-effect="breathe"][data-trigger="hover"]:is(:hover, :focus-visible) .cadence-personality__unit { animation-name: cadence-breathe; }
.cadence-personality__stage[data-effect="magnetic"].is-personality-active .cadence-personality__unit,
.cadence-personality__stage[data-effect="magnetic"][data-trigger="hover"]:is(:hover, :focus-visible) .cadence-personality__unit { animation-name: cadence-magnetic; }
.cadence-personality__stage[data-effect="ripple"].is-personality-active .cadence-personality__unit,
.cadence-personality__stage[data-effect="ripple"][data-trigger="hover"]:is(:hover, :focus-visible) .cadence-personality__unit { animation-name: cadence-ripple; }
.cadence-personality__stage[data-effect="echo"].is-personality-active .cadence-personality__unit,
.cadence-personality__stage[data-effect="echo"][data-trigger="hover"]:is(:hover, :focus-visible) .cadence-personality__unit { animation-name: cadence-echo; }
.cadence-personality__stage[data-effect="signal-break"].is-personality-active .cadence-personality__unit,
.cadence-personality__stage[data-effect="signal-break"][data-trigger="hover"]:is(:hover, :focus-visible) .cadence-personality__unit { animation-name: cadence-signal-break; }
.cadence-personality__stage[data-effect="wobble"].is-personality-active .cadence-personality__unit,
.cadence-personality__stage[data-effect="wobble"][data-trigger="hover"]:is(:hover, :focus-visible) .cadence-personality__unit { animation-name: cadence-wobble; }
.cadence-personality__stage[data-effect="typewriter"].is-personality-active .cadence-personality__unit,
.cadence-personality__stage[data-effect="typewriter"][data-trigger="hover"]:is(:hover, :focus-visible) .cadence-personality__unit { animation-name: cadence-typewriter; animation-timing-function: steps(1, end); }
.cadence-personality__stage[data-effect="fade"].is-personality-active .cadence-personality__unit,
.cadence-personality__stage[data-effect="fade"][data-trigger="hover"]:is(:hover, :focus-visible) .cadence-personality__unit { animation-name: cadence-fade; }
.cadence-personality__stage[data-effect="bounce"].is-personality-active .cadence-personality__unit,
.cadence-personality__stage[data-effect="bounce"][data-trigger="hover"]:is(:hover, :focus-visible) .cadence-personality__unit { animation-name: cadence-bounce; }

@keyframes cadence-unfold { from { opacity: 0; clip-path: inset(100% 0 0); transform: translateY(calc(1em * var(--cadence-power))); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes cadence-breathe { from { transform: scale(calc(1 - var(--cadence-power) * 0.035)); } to { transform: scale(calc(1 + var(--cadence-power) * 0.09)); } }
@keyframes cadence-magnetic { from { transform: translate(0, 0) rotate(0); } to { transform: translate(var(--cadence-mx, calc(0.2em * var(--cadence-power))), var(--cadence-my, calc(-0.12em * var(--cadence-power)))) rotate(calc(3deg * var(--cadence-power))); } }
@keyframes cadence-ripple { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(calc(-0.65em * var(--cadence-power))) scaleY(calc(1 + var(--cadence-power) * 0.2)); } }
@keyframes cadence-echo { from { text-shadow: 0 0 transparent; } 60% { text-shadow: calc(-0.12em * var(--cadence-power)) calc(0.08em * var(--cadence-power)) #4ef6ff, calc(0.14em * var(--cadence-power)) calc(-0.06em * var(--cadence-power)) #ff48bc; } to { text-shadow: 0 0 transparent; } }
@keyframes cadence-signal-break { 0%, 100% { transform: none; filter: none; } 22% { transform: translateX(calc(-0.14em * var(--cadence-power))) skewX(-8deg); filter: drop-shadow(0.08em 0 #ff48bc); } 28% { transform: translateX(calc(0.18em * var(--cadence-power))) skewX(10deg); filter: drop-shadow(-0.08em 0 #4ef6ff); } 36% { transform: none; filter: none; } }
@keyframes cadence-wobble { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(calc(-6deg * var(--cadence-power))) translateY(calc(-0.08em * var(--cadence-power))); } 75% { transform: rotate(calc(6deg * var(--cadence-power))) translateY(calc(0.08em * var(--cadence-power))); } }
@keyframes cadence-typewriter { from { opacity: 0; } to { opacity: 1; } }
@keyframes cadence-fade { from { opacity: 0; filter: blur(calc(0.18em * var(--cadence-power))); transform: translateY(calc(0.25em * var(--cadence-power))); } to { opacity: 1; filter: none; transform: none; } }
@keyframes cadence-bounce { 0% { opacity: 0; transform: translateY(calc(-0.9em * var(--cadence-power))) scaleY(0.8); } 55% { opacity: 1; transform: translateY(calc(0.22em * var(--cadence-power))) scaleY(1.15); } 78% { transform: translateY(calc(-0.1em * var(--cadence-power))) scaleY(0.95); } 100% { opacity: 1; transform: none; } }

.cadence-personality__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cadence-personality__controls > label { display: grid; min-width: 0; padding: 1rem; border-right: 1px solid var(--cadence-line); border-bottom: 1px solid var(--cadence-line); gap: 0.6rem; }
.cadence-personality__controls > label:nth-child(2n) { border-right: 0; }
.cadence-personality__controls > label > span { color: var(--cadence-signal); font: 0.58rem/1.3 var(--pixel); text-transform: uppercase; }
.cadence-personality__controls select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cadence-signal) 50%), linear-gradient(135deg, var(--cadence-signal) 50%, transparent 50%); background-position: calc(100% - 1rem) 1.15rem, calc(100% - 0.7rem) 1.15rem; background-repeat: no-repeat; background-size: 0.32rem 0.32rem; }
.cadence-personality__controls :disabled { opacity: 0.34; cursor: not-allowed; }
.cadence-personality__range { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cadence-personality__range > span { grid-column: 1 / -1; }
.cadence-personality__range input { width: 100%; min-height: 2.4rem; accent-color: var(--cadence-signal); }
.cadence-personality__range output { min-width: 5.5rem; padding: 0.55rem; border: 1px solid var(--cadence-line); color: var(--cadence-cyan); font: 0.55rem/1.2 var(--pixel); text-align: center; }

.cadence-response__lab { width: min(calc(100% - 2rem), 112rem); margin: clamp(1rem, 2vw, 1.5rem) auto; border: 1px solid var(--cadence-line); background: rgba(8, 9, 11, 0.88); }
.cadence-response__viewport-bar { display: grid; min-height: 5rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--cadence-line); grid-template-columns: auto minmax(16rem, 1fr); align-items: center; gap: 1rem; }
.cadence-response__devices { display: flex; border: 1px solid var(--cadence-line); }
.cadence-response__devices button { min-height: 2.7rem; padding: 0.55rem 0.75rem; border: 0; border-right: 1px solid var(--cadence-line); background: transparent; color: var(--cadence-paper); font: 0.55rem/1.2 var(--pixel); text-transform: uppercase; cursor: pointer; }
.cadence-response__devices button:last-child { border-right: 0; }
.cadence-response__devices button[aria-pressed="true"] { background: var(--cadence-cyan); color: #08090b; }
.cadence-response__viewport-bar > label { display: grid; grid-template-columns: auto minmax(8rem, 1fr) 6rem; align-items: center; gap: 0.7rem; }
.cadence-response__viewport-bar label span { color: var(--cadence-signal); font: 0.55rem/1.2 var(--pixel); text-transform: uppercase; }
.cadence-response__viewport-bar input { width: 100%; accent-color: var(--cadence-signal); }
.cadence-response__viewport-bar output { padding: 0.6rem; border: 1px solid var(--cadence-line); color: var(--cadence-cyan); font: 0.55rem/1.2 var(--pixel); text-align: center; }
.cadence-response__canvas { display: flex; min-height: clamp(19rem, 42vh, 31rem); padding: 1rem; border-bottom: 1px solid var(--cadence-line); background: repeating-linear-gradient(90deg, rgba(78,246,255,.05) 0 1px, transparent 1px 5%); justify-content: center; align-items: stretch; }
.cadence-response__frame { display: grid; min-width: 0; border: 1px solid var(--cadence-cyan); background: #08090b; transition: width 120ms ease; grid-template-rows: auto 1fr auto; }
.cadence-response__frame > header, .cadence-response__frame > footer { display: flex; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--cadence-line); justify-content: space-between; gap: 0.7rem; }
.cadence-response__frame > footer { border-top: 1px solid var(--cadence-line); border-bottom: 0; }
.cadence-response__frame span, .cadence-response__frame b { font: 0.5rem/1.3 var(--pixel); text-transform: uppercase; }
.cadence-response__frame b { color: var(--cadence-cyan); }
.cadence-response__frame b[data-health="warning"] { color: #ff6b6b; }
.cadence-response__specimen { min-width: 0; padding: clamp(1rem, 4vw, 3rem); align-self: center; overflow-wrap: normal; word-break: normal; }
.cadence-response__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cadence-response__controls > label, .cadence-response__controls fieldset { display: grid; min-width: 0; margin: 0; padding: 1rem; border: 0; border-right: 1px solid var(--cadence-line); border-bottom: 1px solid var(--cadence-line); gap: 0.55rem; }
.cadence-response__controls > label:nth-child(3) { border-right: 0; }
.cadence-response__controls label > span, .cadence-response__controls legend { color: var(--cadence-signal); font: 0.56rem/1.3 var(--pixel); text-transform: uppercase; }
.cadence-response__controls select { appearance: none; }
.cadence-response__controls > label:has(input[type="range"]) { grid-template-columns: 1fr auto; align-items: center; }
.cadence-response__controls > label:has(input[type="range"]) > span { grid-column: 1 / -1; }
.cadence-response__controls input[type="range"] { width: 100%; accent-color: var(--cadence-signal); }
.cadence-response__controls output { min-width: 5rem; color: var(--cadence-cyan); font: 0.55rem/1.2 var(--pixel); }
.cadence-response__controls fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cadence-response__controls fieldset legend { grid-column: 1 / -1; width: 100%; margin-bottom: 0.4rem; }
.cadence-response__controls fieldset label { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.35rem; }
.cadence-response__controls fieldset label span { grid-column: 1 / -1; }
.cadence-response__controls fieldset b { display: grid; min-height: 2.8rem; padding: 0.5rem; border: 1px solid var(--cadence-line); color: var(--cadence-cyan); font: 0.5rem/1 var(--pixel); place-items: center; }

.cadence-proof__lab,
.cadence-export { width: min(calc(100% - 2rem), 112rem); margin: clamp(1rem, 2vw, 1.5rem) auto; border: 1px solid var(--cadence-line); background: rgba(8, 9, 11, 0.9); }
.cadence-proof__toolbar { position: sticky; z-index: 4; top: 0; display: grid; min-height: 4.5rem; padding: 0.75rem; border-bottom: 1px solid var(--cadence-line); background: #08090b; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.75rem; }
.cadence-proof__scenes,
.cadence-proof__devices { display: flex; border: 1px solid var(--cadence-line); }
.cadence-proof__toolbar button,
.cadence-export button { min-height: 2.75rem; padding: 0.65rem 0.8rem; border: 0; border-right: 1px solid var(--cadence-line); background: transparent; color: var(--cadence-paper); font: 0.52rem/1.25 var(--pixel); text-transform: uppercase; cursor: pointer; }
.cadence-proof__toolbar button:last-child { border-right: 0; }
.cadence-proof__toolbar > button { border: 1px solid var(--cadence-line); justify-self: end; }
.cadence-proof__toolbar button[aria-pressed="true"] { background: var(--cadence-cyan); color: #08090b; }
.cadence-proof__canvas { display: flex; min-height: clamp(24rem, 48vh, 36rem); padding: 1rem; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(255,72,188,.055) 0 1px, transparent 1px 5%); justify-content: center; align-items: stretch; }
.cadence-proof__frame { display: grid; min-width: 0; border: 1px solid var(--cadence-cyan); background: #f4f0e8; color: #050505; transition: width 150ms ease; grid-template-rows: auto 1fr; overflow: hidden; }
.cadence-proof__frame > header { display: flex; padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(5,5,5,.22); background: #050505; color: var(--cadence-paper); justify-content: space-between; gap: 0.7rem; }
.cadence-proof__frame > header span,
.cadence-proof__frame > header b { font: 0.48rem/1.3 var(--pixel); text-transform: uppercase; }
.cadence-proof__frame > header b { color: var(--cadence-cyan); }
.cadence-proof__page { min-width: 0; padding: calc(30px * var(--proof-scale, 1)); overflow-x: hidden; overflow-y: auto; scrollbar-color: #ff48bc #09090b; }
.cadence-proof__page[data-scene="editorial"] { background: #11100f; color: #f4f0e8; }
.cadence-proof__page[data-scene="portfolio"] { background: #09090b; color: #f4f0e8; }
.cadence-proof__page[data-scene="interface"] { background: #11131a; color: #f4f0e8; }
.cadence-proof__type { display: block; min-width: 0; max-width: 100%; border: 0; background-color: transparent; overflow: visible; overflow-wrap: normal; word-break: normal; }
.cadence-proof__type--paragraph { max-width: 54ch; }
.cadence-proof__type--role-paragraph .cadence-personality__phrase { width: 100%; }
.cadence-proof__type--role-paragraph .cadence-personality__unit { display: inline; white-space: normal; }
.cadence-proof__type--site-link .cadence-personality__phrase,
.cadence-proof__type--article-meta .cadence-personality__phrase,
.cadence-proof__type--project-meta .cadence-personality__phrase,
.cadence-proof__type--section-link .cadence-personality__phrase,
.cadence-proof__type--app-nav .cadence-personality__phrase,
.cadence-proof__type--metric-label .cadence-personality__phrase,
.cadence-proof__type--row-status .cadence-personality__phrase { font-size: max(calc(9px * var(--proof-scale, 1)), .48rem) !important; }
.cadence-proof__type--site-link .cadence-personality__phrase,
.cadence-proof__type--media-label .cadence-personality__phrase,
.cadence-proof__type--article-meta .cadence-personality__phrase,
.cadence-proof__type--portfolio-cta .cadence-personality__phrase,
.cadence-proof__type--project-meta .cadence-personality__phrase,
.cadence-proof__type--section-link .cadence-personality__phrase,
.cadence-proof__type--app-nav .cadence-personality__phrase,
.cadence-proof__type--metric-label .cadence-personality__phrase,
.cadence-proof__type--row-status .cadence-personality__phrase { max-width: none !important; white-space: nowrap !important; }
.cadence-proof__sitebar { display: flex; min-height: calc(42px * var(--proof-scale, 1)); margin-bottom: calc(28px * var(--proof-scale, 1)); padding-bottom: calc(12px * var(--proof-scale, 1)); border-bottom: 1px solid rgba(244,240,232,.2); align-items: center; justify-content: space-between; gap: 1rem; }
.cadence-proof__site-menu { display: flex; align-items: center; gap: calc(24px * var(--proof-scale, 1)); }
.cadence-proof__media { position: relative; min-width: 0; min-height: calc(150px * var(--proof-scale, 1)); margin: 0; border: 1px solid rgba(244,240,232,.25); overflow: hidden; }
.cadence-proof__media::after { position: absolute; background: linear-gradient(180deg, transparent 56%, rgba(5,5,5,.72)); content: ""; inset: 0; pointer-events: none; }
.cadence-proof__media img { display: block; width: 100%; height: 100%; position: absolute; object-fit: cover; inset: 0; }
.cadence-proof__type--media-label { position: absolute; right: calc(10px * var(--proof-scale, 1)); bottom: calc(8px * var(--proof-scale, 1)); left: calc(10px * var(--proof-scale, 1)); z-index: 2; }
.cadence-proof__media--editorial { min-height: calc(250px * var(--proof-scale, 1)); }
.cadence-proof__media--editorial img { object-position: 50% 38%; }
.cadence-proof__media--portrait { min-height: calc(265px * var(--proof-scale, 1)); }
.cadence-proof__media--portrait img { object-position: 50% 22%; }
.cadence-proof__media--magenta img { object-position: 50% 34%; }
.cadence-proof__media--cyan img { object-position: 50% 46%; }
.cadence-proof__media--violet img { object-position: 72% 50%; }

.cadence-proof__editorial-story { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(13rem, .92fr); align-items: start; gap: calc(18px * var(--proof-scale, 1)) calc(34px * var(--proof-scale, 1)); }
.cadence-proof__editorial-heading { display: grid; gap: calc(12px * var(--proof-scale, 1)); }
.cadence-proof__type--dek { max-width: 44ch; }
.cadence-proof__editorial-story > .cadence-proof__media { grid-column: 2; grid-row: 1 / span 2; }
.cadence-proof__article-meta { display: flex; padding-top: calc(10px * var(--proof-scale, 1)); border-top: 1px solid rgba(244,240,232,.2); justify-content: space-between; gap: 1rem; }
.cadence-proof__article-body { display: grid; grid-column: 1 / -1; grid-template-columns: .8fr 1.2fr; padding-top: calc(18px * var(--proof-scale, 1)); border-top: 1px solid rgba(244,240,232,.2); align-items: start; gap: calc(32px * var(--proof-scale, 1)); }
.cadence-proof__type--article-copy { columns: auto; }

.cadence-proof__portfolio-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(14rem, .85fr); align-items: stretch; gap: calc(38px * var(--proof-scale, 1)); }
.cadence-proof__portfolio-copy { display: grid; align-content: center; gap: calc(14px * var(--proof-scale, 1)); }
.cadence-proof__type--portfolio-cta { margin-top: calc(8px * var(--proof-scale, 1)); }
.cadence-proof__section-heading { display: flex; margin-top: calc(28px * var(--proof-scale, 1)); margin-bottom: calc(12px * var(--proof-scale, 1)); padding-bottom: calc(8px * var(--proof-scale, 1)); border-bottom: 1px solid rgba(244,240,232,.2); align-items: end; justify-content: space-between; gap: 1rem; }
.cadence-proof__project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14px * var(--proof-scale, 1)); }
.cadence-proof__project-card { min-width: 0; }
.cadence-proof__project-card .cadence-proof__media { min-height: calc(120px * var(--proof-scale, 1)); }
.cadence-proof__project-copy { display: flex; padding-top: calc(8px * var(--proof-scale, 1)); align-items: start; justify-content: space-between; gap: .5rem; }

.cadence-proof__app-shell { display: grid; min-height: 100%; grid-template-columns: calc(155px * var(--proof-scale, 1)) minmax(0, 1fr); }
.cadence-proof__app-sidebar { display: grid; padding: calc(18px * var(--proof-scale, 1)); border-right: 1px solid rgba(244,240,232,.16); align-content: start; gap: calc(20px * var(--proof-scale, 1)); }
.cadence-proof__type--app-nav { padding: calc(7px * var(--proof-scale, 1)); opacity: .55; }
.cadence-proof__type--app-nav.is-active { border-left: 2px solid #4ef6ff; background: rgba(78,246,255,.08); opacity: 1; }
.cadence-proof__app-main { min-width: 0; padding: calc(18px * var(--proof-scale, 1)) calc(24px * var(--proof-scale, 1)); }
.cadence-proof__app-topbar { display: flex; padding-bottom: calc(13px * var(--proof-scale, 1)); border-bottom: 1px solid rgba(244,240,232,.16); align-items: center; justify-content: space-between; }
.cadence-proof__avatar { display: grid; width: calc(28px * var(--proof-scale, 1)); height: calc(28px * var(--proof-scale, 1)); border-radius: 50%; background: #ff48bc; color: #050505; font: 700 max(calc(8px * var(--proof-scale, 1)), .45rem)/1 var(--pixel); place-items: center; }
.cadence-proof__app-welcome { display: flex; padding: calc(22px * var(--proof-scale, 1)) 0; align-items: end; justify-content: space-between; gap: 1rem; }
.cadence-proof__app-welcome-copy { display: grid; gap: calc(8px * var(--proof-scale, 1)); }
.cadence-proof__app-button { padding: calc(10px * var(--proof-scale, 1)); border: 1px solid #4ef6ff; background: transparent; }
.cadence-proof__metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10px * var(--proof-scale, 1)); }
.cadence-proof__metric { display: grid; padding: calc(13px * var(--proof-scale, 1)); border: 1px solid rgba(244,240,232,.18); gap: calc(5px * var(--proof-scale, 1)); }
.cadence-proof__project-rows { display: grid; border-top: 1px solid rgba(244,240,232,.16); }
.cadence-proof__project-row { display: grid; padding: calc(9px * var(--proof-scale, 1)) 0; border-bottom: 1px solid rgba(244,240,232,.16); grid-template-columns: calc(62px * var(--proof-scale, 1)) minmax(0, 1fr) auto; align-items: center; gap: calc(12px * var(--proof-scale, 1)); }
.cadence-proof__project-row .cadence-proof__media { min-height: calc(42px * var(--proof-scale, 1)); }
.cadence-proof__project-row .cadence-proof__type--media-label { display: none; }
.cadence-proof__project-row-copy { display: grid; gap: calc(3px * var(--proof-scale, 1)); }
.cadence-proof__type--row-meta .cadence-personality__phrase { font-size: max(calc(10px * var(--proof-scale, 1)), .55rem) !important; opacity: .65; }
.cadence-proof__rule { width: 100%; height: 1px; background: currentColor; opacity: 0.25; }
.cadence-proof__columns { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(8rem, .55fr); align-items: end; gap: calc(28px * var(--proof-scale, 1)); }
.cadence-proof__card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12px * var(--proof-scale, 1)); }
.cadence-proof__card { display: grid; min-width: 0; padding: calc(16px * var(--proof-scale, 1)); border: 1px solid currentColor; gap: calc(8px * var(--proof-scale, 1)); }
.cadence-proof__status { display: flex; padding: 0.7rem 1rem; border-top: 1px solid var(--cadence-line); color: var(--cadence-muted); font: 0.5rem/1.35 var(--pixel); text-transform: uppercase; justify-content: space-between; gap: 1rem; }

.cadence-proof__page[data-viewport="phone"] { padding: 1.1rem; overflow: auto; }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__site-menu { gap: .7rem; }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__site-menu .cadence-proof__type:nth-child(2) { display: none; }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__editorial-story,
.cadence-proof__page[data-viewport="phone"] .cadence-proof__portfolio-hero { grid-template-columns: 1fr; }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__editorial-story > .cadence-proof__media { grid-column: 1; grid-row: auto; min-height: 12rem; }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__article-body { grid-template-columns: 1fr; }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__type--article-copy { columns: 1; }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__portfolio-hero > .cadence-proof__media { min-height: 14rem; }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__project-card:last-child { display: none; }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__app-shell { grid-template-columns: 1fr; }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__app-sidebar { display: none; }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__app-main { padding: 0; }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__app-welcome { align-items: start; flex-direction: column; }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cadence-proof__page[data-viewport="phone"] .cadence-proof__metric { padding: .55rem; }

.cadence-export > header { display: grid; padding: 1.2rem; border-bottom: 1px solid var(--cadence-line); grid-template-columns: minmax(0, 1.25fr) minmax(15rem, .75fr); gap: 1.5rem; }
.cadence-export > header span,
.cadence-export__grid section > span { color: var(--cadence-signal); font: 0.52rem/1.3 var(--pixel); text-transform: uppercase; }
.cadence-export > header h4 { margin: 0.35rem 0 0; font: 700 clamp(1.45rem, 3vw, 2.5rem)/.95 var(--display); letter-spacing: -.04em; }
.cadence-export > header p,
.cadence-export__grid p { margin: 0; color: var(--cadence-muted); font: 700 .78rem/1.5 var(--editorial); }
.cadence-export__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cadence-export__grid section { display: grid; min-width: 0; min-height: 12rem; padding: 1rem; border-right: 1px solid var(--cadence-line); gap: 0.65rem; align-content: start; }
.cadence-export__grid section:last-child { border-right: 0; }
.cadence-export__grid h5 { margin: 0; font: 700 1.15rem/1 var(--display); text-transform: uppercase; }
.cadence-export__grid button { margin-top: auto; border: 1px solid var(--cadence-line); color: var(--cadence-cyan); }
.cadence-export__grid button:hover { background: var(--cadence-cyan); color: #050505; }
.cadence-export__preview { border-top: 1px solid var(--cadence-line); }
.cadence-export__preview summary { padding: 0.9rem 1rem; color: var(--cadence-cyan); font: 0.52rem/1.3 var(--pixel); text-transform: uppercase; cursor: pointer; }
.cadence-export__preview pre { max-height: 28rem; margin: 0; padding: 1rem; border-top: 1px solid var(--cadence-line); color: #c3c0ba; font: 0.72rem/1.55 ui-monospace, monospace; white-space: pre-wrap; overflow: auto; }

.cadence-preview {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-left: 1px solid var(--cadence-line);
  background: rgba(8, 8, 10, 0.9);
}

.cadence-preview > header,
.cadence-preview > footer { padding: 1rem; border-bottom: 1px solid var(--cadence-line); }
.cadence-preview > header b { display: block; margin-top: 0.5rem; color: var(--cadence-cyan); font: 0.55rem/1.3 var(--pixel); text-transform: uppercase; }
.cadence-preview__sheet { display: grid; gap: 0; }
.cadence-preview__role { min-width: 0; padding: 1rem; border-bottom: 1px solid var(--cadence-line); }
.cadence-preview__role > span { display: block; margin-bottom: 0.6rem; color: var(--cadence-signal); font: 0.52rem/1.2 var(--pixel); text-transform: uppercase; }
.cadence-preview__role strong,
.cadence-preview__role p { display: block; margin: 0; overflow-wrap: anywhere; }
.cadence-preview__role[data-role-kind="hero"] strong { font-size: clamp(2.2rem, 4vw, 4.4rem); line-height: 0.88; letter-spacing: -0.06em; }
.cadence-preview__role[data-role-kind="h1"] strong { font-size: 2.3rem; line-height: 0.95; }
.cadence-preview__role[data-role-kind="h2"] strong { font-size: 1.75rem; line-height: 1; }
.cadence-preview__role[data-role-kind="h3"] strong { font-size: 1.3rem; line-height: 1.05; }
.cadence-preview__role[data-role-kind="paragraph"] p { color: rgba(244, 240, 232, 0.8); font-size: 1rem; line-height: 1.58; }
.cadence-preview__role[data-role-kind="accent"] strong { color: var(--cadence-cyan); font-size: 0.78rem; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; }
.cadence-preview__role[data-role-kind="custom"] strong { font-size: 1.4rem; line-height: 1.05; }
.cadence-preview > footer { border-top: 1px solid var(--cadence-line); border-bottom: 0; }
.cadence-preview > footer span { color: var(--cadence-signal); font: 0.55rem/1.3 var(--pixel); text-transform: uppercase; }
.cadence-preview > footer p { margin: 0.55rem 0 0; color: var(--cadence-muted); font: 0.78rem/1.5 var(--editorial); }

.cadence-toast { position: fixed; z-index: 30; right: 1rem; bottom: 1rem; max-width: min(28rem, calc(100vw - 2rem)); padding: 0.8rem 1rem; border: 1px solid var(--cadence-signal); background: #08090b; color: var(--cadence-paper); font: 0.68rem/1.4 var(--pixel); opacity: 0; pointer-events: none; transform: translateY(0.5rem); transition: opacity 150ms ease, transform 150ms ease; }
.cadence-toast.is-visible { opacity: 1; transform: none; }

.tools-landing__instrument--cadence { margin-top: 0; border-color: rgba(255, 72, 188, 0.58); background: linear-gradient(145deg, rgba(255, 72, 188, 0.08), rgba(5, 5, 5, 0.9) 48%, rgba(78, 246, 255, 0.07)); }
.tools-landing__instrument--cadence .tools-landing__instrument-meta b { border-color: #ff48bc; color: #ff48bc; }
.tools-landing__instrument--cadence .tools-landing__launch:hover,
.tools-landing__instrument--cadence .tools-landing__launch:focus-visible { background: #ff48bc; }
.tools-landing__type-specimen { display: grid; min-width: 0; min-height: 8rem; padding: 1rem; border-top: 1px solid rgba(244, 240, 232, 0.28); background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(244, 240, 232, 0.055) 31px 32px), radial-gradient(circle at 50% 25%, rgba(255, 72, 188, 0.2), transparent 62%); grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; align-items: center; gap: 1rem; }
.tools-landing__type-specimen > span { display: grid; min-width: 0; overflow: hidden; color: var(--paper); gap: 0.28rem; }
.tools-landing__type-specimen b { color: #ff48bc; font: 0.52rem/1.2 var(--pixel); text-transform: uppercase; }
.tools-landing__type-specimen strong { font: 900 clamp(1.35rem, 2.4vw, 2.4rem)/0.88 Georgia, serif; letter-spacing: -0.07em; overflow-wrap: anywhere; }
.tools-landing__type-specimen em { font: 800 clamp(1rem, 1.4vw, 1.35rem)/0.95 Arial, sans-serif; overflow-wrap: anywhere; }
.tools-landing__type-specimen i { color: #4ef6ff; font: normal 0.72rem/1.4 "Courier New", monospace; }

/* Cadence introduction page. */
.cadence-landing[hidden],
.tools-screen .color-assistant-landing[hidden] { display: none !important; }
.tools-screen.is-cadence-landing:not(.is-cadence-tool-open) .collection-backdrop--tools { display: none; }
.tools-screen.is-cadence-landing .cadence-landing {
  --cadence-landing-pink: #ff48bc;
  --cadence-landing-cyan: #4ef6ff;
  position: relative;
  display: block;
  width: 100%;
  min-height: 100svh;
  color: var(--paper);
}
.cadence-landing__backdrop { position: fixed; z-index: 0; overflow: hidden; background: radial-gradient(circle at 82% 16%, rgba(255,72,188,.18), transparent 30rem), radial-gradient(circle at 18% 76%, rgba(78,246,255,.12), transparent 32rem), #050505; pointer-events: none; inset: 0; }
.cadence-landing__backdrop::after { position: absolute; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(244,240,232,.025) 4px 5px), linear-gradient(90deg, rgba(5,5,5,.98), rgba(5,5,5,.56) 54%, rgba(5,5,5,.9)); content: ""; inset: 0; }
.cadence-landing__backdrop span { position: absolute; color: transparent; font: 900 clamp(10rem, 24vw, 30rem)/.72 var(--editorial); letter-spacing: -.09em; -webkit-text-stroke: 1px rgba(244,240,232,.1); text-transform: uppercase; white-space: nowrap; }
.cadence-landing__backdrop span:nth-child(1) { top: 7%; left: 44%; transform: rotate(3deg); }
.cadence-landing__backdrop span:nth-child(2) { top: 40%; left: 24%; transform: rotate(-4deg); }
.cadence-landing__backdrop span:nth-child(3) { top: 72%; left: 50%; color: rgba(255,72,188,.035); transform: rotate(2deg); }
.cadence-landing > section { position: relative; z-index: 1; }
.cadence-landing__hero { display: grid; width: min(calc(100% - 2rem), 96rem); min-height: 100svh; margin: 0 auto; padding: clamp(7rem, 13vh, 10rem) 0 clamp(3rem, 8vh, 6rem); align-content: center; grid-template-columns: minmax(0, 1.25fr) minmax(21rem, .75fr); grid-template-rows: auto 1fr; gap: clamp(2rem, 6vw, 6rem); }
.cadence-landing__signal { display: flex; padding-bottom: .8rem; border-bottom: 1px solid rgba(244,240,232,.5); grid-column: 1 / -1; justify-content: space-between; gap: 1rem; font: .625rem/1.45 var(--pixel); text-transform: uppercase; }
.cadence-landing__signal b { color: var(--cadence-landing-cyan); font: inherit; }
.cadence-landing__hero-copy { align-self: center; }
.cadence-landing__hero-copy .section-index { margin: 0 0 1.5rem; color: var(--cadence-landing-cyan); }
.cadence-landing__hero-copy h2 { margin: 0; font: 900 clamp(3.4rem, 6.2vw, 6.6rem)/1.04 var(--editorial); letter-spacing: -.085em; text-transform: uppercase; }
.cadence-landing__hero-copy h2 span,
.cadence-landing__hero-copy h2 em { display: block; }
.cadence-landing__hero-copy h2 em { margin-left: clamp(1rem, 7vw, 7rem); color: var(--cadence-landing-pink); font-style: normal; text-shadow: 6px 0 rgba(78,246,255,.45); }
.cadence-landing__hero-copy > p:not(.section-index) { max-width: 48rem; margin: 2rem 0 0; color: rgba(244,240,232,.9); font: 750 clamp(1.08rem, 1.55vw, 1.45rem)/1.48 var(--editorial); }
.cadence-landing__actions { display: flex; margin-top: 2rem; flex-wrap: wrap; gap: .8rem; }
.cadence-landing__cta { display: flex; min-width: min(100%, 18rem); min-height: 4.3rem; padding: 1rem 1.2rem; border: 1px solid var(--paper); background: rgba(5,5,5,.72); align-items: center; justify-content: space-between; gap: 2rem; color: var(--paper); font: .625rem/1.4 var(--pixel); text-decoration: none; text-transform: uppercase; transition: 150ms ease; }
.cadence-landing__cta b { font: 900 1.6rem/1 var(--editorial); }
.cadence-landing__cta--primary { border-color: var(--cadence-landing-pink); background: var(--cadence-landing-pink); color: #050505; box-shadow: 8px 8px 0 rgba(78,246,255,.5); }
.cadence-landing__cta:hover,
.cadence-landing__cta:focus-visible { background: var(--paper); color: #050505; transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--cadence-landing-cyan); }
.cadence-landing__hero-copy small { display: block; margin-top: 1.1rem; color: rgba(244,240,232,.62); font: .625rem/1.55 var(--pixel); }
.cadence-landing__family-card { display: grid; min-width: 0; padding: 1rem; align-self: center; border: 1px solid rgba(244,240,232,.62); background: rgba(8,9,11,.82); box-shadow: 12px 12px 0 rgba(255,72,188,.2), -7px -7px 0 rgba(78,246,255,.13); transform: rotate(1.6deg); }
.cadence-landing__family-card header,
.cadence-landing__family-card footer { display: flex; padding: .75rem; align-items: center; justify-content: space-between; gap: .75rem; font: .52rem/1.35 var(--pixel); text-transform: uppercase; }
.cadence-landing__family-card header { border-bottom: 1px solid rgba(244,240,232,.28); color: var(--cadence-landing-cyan); }
.cadence-landing__family-card footer { border-top: 1px solid rgba(244,240,232,.28); color: var(--cadence-landing-pink); }
.cadence-landing__family-card > div { display: grid; min-width: 0; padding: 1rem .75rem; border-bottom: 1px solid rgba(244,240,232,.18); gap: .5rem; }
.cadence-landing__family-card > div span { color: var(--cadence-landing-pink); font: .5rem/1.3 var(--pixel); }
.cadence-landing__family-card > div:nth-of-type(1) strong { font: 900 clamp(2.6rem, 4.4vw, 4.8rem)/.8 Georgia, serif; letter-spacing: -.07em; }
.cadence-landing__family-card > div:nth-of-type(2) strong { font: 800 clamp(1.6rem, 2.4vw, 2.6rem)/.95 Arial, sans-serif; }
.cadence-landing__family-card > div p { max-width: 32ch; margin: 0; color: rgba(244,240,232,.78); font: .88rem/1.55 Arial, sans-serif; }
.cadence-landing__proof,
.cadence-landing__story { background: #08090b; }
.cadence-landing__proof { padding: clamp(5rem, 10vw, 10rem) max(1rem, calc((100% - 92rem) / 2)); }
.cadence-landing__section-heading { display: grid; align-items: start; grid-template-columns: minmax(12rem,.45fr) minmax(0,1.1fr) auto; gap: 2rem; }
.cadence-landing__section-heading p,
.cadence-landing__section-heading span { margin: .4rem 0 0; color: var(--cadence-landing-cyan); font: .625rem/1.5 var(--pixel); text-transform: uppercase; }
.cadence-landing__section-heading h3 { max-width: 16ch; margin: 0; font: 900 clamp(2rem, 3.8vw, 3.8rem)/1.12 var(--editorial); letter-spacing: -.065em; text-transform: uppercase; }
.cadence-landing__stats { display: grid; margin-top: clamp(4rem,8vw,7rem); border: 1px solid rgba(244,240,232,.32); grid-template-columns: repeat(4,1fr); }
.cadence-landing__stats article { display: grid; min-height: 13rem; padding: 1.4rem; align-content: space-between; border-right: 1px solid rgba(244,240,232,.32); }
.cadence-landing__stats article:last-child { border-right: 0; }
.cadence-landing__stats strong { color: var(--cadence-landing-pink); font: 900 clamp(2.5rem,4.3vw,5rem)/.8 var(--editorial); letter-spacing: -.06em; }
.cadence-landing__stats span { max-width: 11rem; color: rgba(244,240,232,.68); font: .625rem/1.5 var(--pixel); text-transform: uppercase; }
.cadence-landing__story { padding: 0 max(1rem, calc((100% - 92rem) / 2)) clamp(6rem,12vw,12rem); }
.cadence-landing__feature { display: grid; padding: clamp(4rem,8vw,8rem) 0; border-top: 1px solid rgba(244,240,232,.22); align-items: center; grid-template-columns: minmax(0,1fr) minmax(18rem,.78fr); gap: clamp(2rem,6vw,7rem); }
.cadence-landing__feature:nth-child(even) { grid-template-columns: minmax(18rem,.78fr) minmax(0,1fr); }
.cadence-landing__feature:nth-child(even) figure { grid-column: 2; grid-row: 1; }
.cadence-landing__feature:nth-child(even) > div { grid-column: 1; grid-row: 1; }
.cadence-landing__feature > div > p:first-child { margin: 0 0 .8rem; color: var(--cadence-landing-pink); font: .625rem/1.45 var(--pixel); text-transform: uppercase; }
.cadence-landing__feature h3 { max-width: 15ch; margin: 0; font: 900 clamp(1.8rem,3vw,3rem)/1.14 var(--editorial); letter-spacing: -.055em; text-transform: uppercase; }
.cadence-landing__feature h3 + p { max-width: 42rem; margin: 1.5rem 0 0; color: rgba(244,240,232,.72); font: 700 1rem/1.55 var(--editorial); }
.cadence-landing__feature ul { display: grid; margin: 1.8rem 0 0; padding: 0; border-top: 1px solid rgba(244,240,232,.28); list-style: none; }
.cadence-landing__feature li { padding: .8rem 0; border-bottom: 1px solid rgba(244,240,232,.28); font: .625rem/1.5 var(--pixel); text-transform: uppercase; }
.cadence-landing__feature li::before { margin-right: .8rem; color: var(--cadence-landing-cyan); content: "→"; }
.cadence-landing__mock { display: grid; min-height: 30rem; margin: 0; padding: 1rem; overflow: hidden; border: 1px solid rgba(244,240,232,.55); background: #0d0d10; box-shadow: 10px 10px 0 rgba(255,72,188,.13); align-content: start; }
.cadence-landing__mock header { display: flex; padding: 0 0 .8rem; border-bottom: 1px solid rgba(244,240,232,.25); justify-content: space-between; gap: 1rem; color: var(--cadence-landing-cyan); font: .52rem/1.3 var(--pixel); }
.cadence-landing__mock--family > div { display: grid; padding: 1rem 0; border-bottom: 1px solid rgba(244,240,232,.18); grid-template-columns: 4rem 1fr auto; align-items: center; gap: .7rem; }
.cadence-landing__mock--family > div span { color: var(--cadence-landing-pink); font: .5rem/1.3 var(--pixel); }
.cadence-landing__mock--family > div strong { font: 800 clamp(1.2rem,2.4vw,2.1rem)/1 var(--editorial); }
.cadence-landing__mock--family > div i { font: normal 1rem/1 var(--editorial); }
.cadence-landing__mock--tuning { gap: 1rem; }
.cadence-landing__mock--tuning > strong { padding: 3rem 0 2rem; font: 900 clamp(2.8rem,5vw,5.5rem)/.78 Georgia, serif; letter-spacing: -.08em; }
.cadence-landing__mock--tuning > div { display: grid; grid-template-columns: 5.5rem minmax(0,1fr) auto; align-items: center; gap: .7rem; font: .5rem/1.3 var(--pixel); }
.cadence-landing__mock--tuning i { position: relative; display: block; height: 1px; background: rgba(244,240,232,.3); }
.cadence-landing__mock--tuning i::after { position: absolute; top: -.3rem; left: var(--value); width: .65rem; height: .65rem; background: var(--cadence-landing-pink); content: ""; transform: translateX(-50%); }
.cadence-landing__mock--proof { align-content: start; gap: 1.2rem; }
.cadence-landing__mock--proof nav { display: flex; justify-content: flex-end; gap: 1rem; color: var(--cadence-landing-cyan); font: .48rem/1.3 var(--pixel); }
.cadence-landing__mock--proof > strong { max-width: 10ch; padding-top: 2rem; font: 900 clamp(2.3rem,4.4vw,4.8rem)/.82 Georgia, serif; letter-spacing: -.07em; }
.cadence-landing__mock--proof > p { max-width: 34ch; color: rgba(244,240,232,.68); font: .9rem/1.5 Arial, sans-serif; }
.cadence-landing__mock--proof footer { display: grid; margin-top: auto; border: 1px solid rgba(244,240,232,.24); grid-template-columns: repeat(4,1fr); }
.cadence-landing__mock--proof footer span { padding: .65rem .3rem; border-right: 1px solid rgba(244,240,232,.24); font: .45rem/1.2 var(--pixel); text-align: center; }
.cadence-landing__mock--proof footer span:last-child { border-right: 0; }
.cadence-landing__mock--proof footer .is-active { background: var(--cadence-landing-cyan); color: #050505; }
.cadence-landing__door { display: grid; padding: clamp(5rem,10vw,10rem) max(1rem, calc((100% - 92rem) / 2)); border-top: 2px solid var(--paper); background: radial-gradient(circle at 82% 18%, rgba(78,246,255,.95), transparent 28%), radial-gradient(circle at 18% 82%, rgba(255,72,188,.95), transparent 34%), linear-gradient(125deg,#ffb0dc,#8371ff 58%,#4ef6ff); color: #050505; grid-template-columns: minmax(0,1.1fr) minmax(18rem,.6fr); gap: clamp(2rem,6vw,7rem); }
.cadence-landing__door > div p { margin: 0 0 .8rem; font: .625rem/1.5 var(--pixel); text-transform: uppercase; }
.cadence-landing__door h3 { max-width: 14ch; margin: 0; font: 900 clamp(2.3rem,4.4vw,4.8rem)/1.1 var(--editorial); letter-spacing: -.075em; text-transform: uppercase; }
.cadence-landing__door > p { margin: 0; align-self: end; font: 800 clamp(1.1rem,1.7vw,1.55rem)/1.45 var(--editorial); }
.cadence-landing__door nav { display: grid; border: 2px solid #050505; grid-column: 1 / -1; grid-template-columns: 1.5fr 1fr 1fr; }
.cadence-landing__door nav a { display: flex; min-height: 5rem; padding: 1rem 1.2rem; border-right: 2px solid #050505; align-items: center; justify-content: space-between; gap: 1rem; color: #050505; font: .625rem/1.5 var(--pixel); text-decoration: none; text-transform: uppercase; }
.cadence-landing__door nav a:last-child { border-right: 0; }
.cadence-landing__door nav a:hover,
.cadence-landing__door nav a:focus-visible { background: #050505; color: var(--paper); }
.cadence-landing__final { display: grid; min-height: 82svh; padding: clamp(6rem,12vw,11rem) max(1rem, calc((100% - 92rem) / 2)); overflow: hidden; background: #050505; align-content: center; justify-items: start; }
.cadence-landing__final::before { position: absolute; color: rgba(255,72,188,.08); content: "Aa"; font: 900 min(70vw,52rem)/1 Georgia,serif; inset: 50% auto auto 62%; transform: translate(-50%,-50%) rotate(-7deg); }
.cadence-landing__final > * { position: relative; }
.cadence-landing__final > p { margin: 0 0 1rem; color: var(--cadence-landing-cyan); font: .625rem/1.5 var(--pixel); text-transform: uppercase; }
.cadence-landing__final h3 { max-width: 14ch; margin: 0 0 2.2rem; font: 900 clamp(2.5rem,5vw,5.4rem)/1.08 var(--editorial); letter-spacing: -.075em; text-transform: uppercase; text-shadow: 7px 0 rgba(255,72,188,.65); }

@media (max-width: 980px) {
  .cadence-landing__hero { grid-template-columns: 1fr; }
  .cadence-landing__family-card { min-height: 18rem; transform: none; }
  .cadence-landing__section-heading { grid-template-columns: 1fr auto; }
  .cadence-landing__section-heading h3 { grid-column: 1 / -1; grid-row: 2; }
  .cadence-landing__feature,
  .cadence-landing__feature:nth-child(even) { grid-template-columns: 1fr; }
  .cadence-landing__feature:nth-child(even) figure,
  .cadence-landing__feature:nth-child(even) > div { grid-column: 1; grid-row: auto; }
  .cadence-landing__feature figure { order: 2; }
  .cadence-landing__door { grid-template-columns: 1fr; }
  .cadence-landing__door > p { max-width: 42rem; }
}

@media (max-width: 700px) {
  .cadence-landing__hero { width: min(calc(100% - 1.25rem),96rem); padding-top: 8.5rem; }
  .cadence-landing__signal { align-items: flex-start; flex-direction: column; }
  .cadence-landing__hero-copy h2 { font-size: clamp(2.4rem,12vw,4.4rem); }
  .cadence-landing__hero-copy h2 em { margin-left: 0; }
  .cadence-landing__actions { display: grid; }
  .cadence-landing__cta { width: 100%; min-width: 0; }
  .cadence-landing__stats { grid-template-columns: repeat(2,1fr); }
  .cadence-landing__stats article { min-height: 10rem; border-bottom: 1px solid rgba(244,240,232,.32); }
  .cadence-landing__stats article:nth-child(even) { border-right: 0; }
  .cadence-landing__stats article:nth-child(n + 3) { border-bottom: 0; }
  .cadence-landing__mock { min-height: 24rem; }
  .cadence-landing__mock--family > div { grid-template-columns: 3.4rem 1fr; }
  .cadence-landing__mock--family > div i { display: none; }
  .cadence-landing__door nav { grid-template-columns: 1fr; }
  .cadence-landing__door nav a { border-right: 0; border-bottom: 2px solid #050505; }
  .cadence-landing__door nav a:last-child { border-bottom: 0; }
}

@media (max-width: 1180px) {
  .cadence-masthead { grid-template-columns: 6.5rem minmax(11rem, 16rem) 1fr; }
  .cadence-utilities { grid-column: 1 / -1; min-height: 3rem; border-top: 1px solid var(--cadence-line); }
  .cadence-dashboard { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .cadence-preview { grid-column: 2; border-top: 1px solid var(--cadence-line); border-left: 0; }
  .cadence-preview__sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  body.is-cadence-tool-workstation {
    --pocket-paper: #f4f0e8;
    --pocket-ink: #050505;
    --pocket-pink: #ff48bc;
    --pocket-cyan: #4ef6ff;
    overflow: auto;
  }
  .tools-screen.is-cadence-tool-open { overflow: auto; }
  .cadence-lab { position: relative; min-height: 100dvh; grid-template-rows: auto auto; }
  .cadence-masthead { grid-template-columns: 3.6rem 1fr; }
  .cadence-mode-readout { grid-column: 1 / -1; border-top: 1px solid var(--cadence-line); }
  .cadence-utilities { grid-template-columns: 1fr; }
  .cadence-utilities button { border-top: 1px solid var(--cadence-line); border-left: 0; }
  .cadence-dashboard { display: block; }
  .cadence-toolrail { position: sticky; z-index: 5; top: 0; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--cadence-line); }
  .cadence-toolrail button { flex: 0 0 7rem; min-height: 3.8rem; border-right: 1px solid var(--cadence-line); border-bottom: 0; grid-template-columns: auto auto auto; justify-content: center; }
  .cadence-workspace { overflow: visible; }
  .cadence-workspace__intro { grid-template-columns: 1fr; gap: 0.8rem; }
  .cadence-role-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cadence-catalog__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cadence-catalog__controls label:first-child,
  .cadence-catalog__sample { grid-column: 1 / -1; }
  .cadence-preview { border-left: 0; }
  .cadence-tuning__controls { grid-template-columns: 1fr; }
  .cadence-tuning__controls > label { border-right: 0; }
  .cadence-character__controls { grid-template-columns: 1fr; }
  .cadence-character__controls > label,
  .cadence-character__controls > fieldset { border-right: 0; }
  .cadence-personality__controls { grid-template-columns: 1fr; }
  .cadence-personality__controls > label { border-right: 0; }
  .cadence-response__viewport-bar, .cadence-response__controls { grid-template-columns: 1fr; }
  .cadence-response__viewport-bar > label { grid-template-columns: 1fr; }
  .cadence-response__devices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cadence-response__devices [data-cadence-reset-response] { grid-column: 1 / -1; border-top: 1px solid var(--cadence-line); }
  .cadence-response__controls > label, .cadence-response__controls fieldset { border-right: 0; }
  .cadence-proof__toolbar { grid-template-columns: 1fr; }
  .cadence-proof__toolbar > button { justify-self: stretch; }
  .cadence-export > header { grid-template-columns: 1fr; }
  .cadence-export__grid { grid-template-columns: 1fr; }
  .cadence-export__grid section { border-right: 0; border-bottom: 1px solid var(--cadence-line); }
  .cadence-export__grid section:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  .cadence-toolrail {
    display: grid;
    overflow-x: visible;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cadence-toolrail button {
    min-width: 0;
    min-height: 3.4rem;
    padding: 0.45rem 0.25rem;
    border-bottom: 1px solid var(--cadence-line);
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 0.12rem 0.3rem;
  }
  .cadence-toolrail button:nth-child(n + 4) { border-bottom: 0; }
  .cadence-toolrail button > span { grid-row: 1; grid-column: 1 / -1; }
  .cadence-toolrail button > small { grid-row: 2; grid-column: 1; }
  .cadence-toolrail button > kbd { grid-row: 2; grid-column: 2; }
  .cadence-role-deck > header,
  .cadence-catalog__heading,
  .cadence-catalog__footer { align-items: stretch; flex-direction: column; }
  .cadence-catalog__heading { position: relative; }
  .cadence-catalog__readout { justify-items: stretch; }
  .cadence-pager { grid-template-columns: 2.8rem 1fr 2.8rem 2.8rem; }
  .cadence-add-role > div { grid-template-columns: 1fr 1fr; }
  .cadence-add-role input { grid-column: 1 / -1; }
  .cadence-role-list,
  .cadence-font-grid,
  .cadence-preview__sheet,
  .cadence-catalog__controls { grid-template-columns: 1fr; }
  .cadence-catalog__controls label:first-child,
  .cadence-catalog__sample { grid-column: auto; }
  .cadence-catalog__footer small { text-align: left; }
  .cadence-tuning__desk > header { align-items: stretch; flex-direction: column; }
  .cadence-tuning__slider { grid-template-columns: 1fr; }
  .cadence-tuning__number { width: 100%; }
  .cadence-character__colors,
  .cadence-character__shadow { grid-template-columns: 1fr; }
  .cadence-character__shadow legend,
  .cadence-character__shadow .cadence-character__switch { grid-column: auto; }
  .cadence-proof__scenes { display: grid; grid-template-columns: repeat(3, 1fr); }
  .cadence-proof__devices { display: grid; grid-template-columns: repeat(4, 1fr); }
  .cadence-proof__columns,
  .cadence-proof__card-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cadence-toast { transition: none; }
  .cadence-personality__stage[data-reduced="fade"] .cadence-personality__unit { animation-name: cadence-fade !important; }
  .cadence-personality__stage[data-reduced="freeze"] .cadence-personality__unit,
  .cadence-personality__stage[data-reduced="disable"] .cadence-personality__unit { animation: none !important; }
}

/* Cadence Pocket is a phone-native casting and proofing instrument. */
.cadence-pocket { display: none; }

@media (max-width: 700px), (max-width: 980px) and (max-height: 500px) {
  body.is-cadence-tool-workstation { overflow: auto; }

  body.is-cadence-tool-workstation [class^="cadence-pocket"],
  body.is-cadence-tool-workstation [class*=" cadence-pocket"] {
    display: none !important;
  }

  .tools-screen.is-cadence-tool-open {
    height: auto !important;
    min-height: 100svh;
    overflow: visible !important;
    filter: none !important;
    transform: none !important;
  }

  .tools-screen.is-cadence-tool-open [data-cadence-tool] {
    position: relative;
    display: none !important;
    width: 100%;
    min-height: 100svh;
    height: auto;
    overflow: visible;
    background: #080808;
  }

  .tools-screen.is-cadence-tool-open .cadence-masthead,
  .tools-screen.is-cadence-tool-open .cadence-dashboard,
  .tools-screen.is-cadence-tool-open .cadence-toast,
  .tools-screen.is-cadence-tool-open .cadence-pocket {
    display: none !important;
  }

  .cadence-pocket {
    --pocket-paper: #f4f0e8;
    --pocket-ink: #050505;
    --pocket-pink: #ff48bc;
    --pocket-cyan: #4ef6ff;
    position: relative;
    z-index: 2;
    display: block;
    min-height: 100svh;
    padding-top: 4.35rem;
    padding-bottom: calc(5.3rem + env(safe-area-inset-bottom));
    overflow: visible;
    background:
      linear-gradient(90deg, transparent 49.8%, rgba(244, 240, 232, 0.025) 50%, transparent 50.2%),
      repeating-linear-gradient(0deg, rgba(244, 240, 232, 0.022) 0 1px, transparent 1px 5px),
      radial-gradient(circle at 90% 7%, rgba(255, 72, 188, 0.16), transparent 21rem),
      #080808;
    color: var(--pocket-paper);
  }

  .cadence-pocket button,
  .cadence-pocket input,
  .cadence-pocket select { font: inherit; }
  .cadence-pocket button { touch-action: manipulation; }

  .cadence-pocket__masthead {
    position: fixed;
    z-index: 8;
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    min-height: 4.35rem;
    border-bottom: 1px solid rgba(244, 240, 232, 0.28);
    grid-template-columns: 3.75rem minmax(0, 1fr) 4.75rem;
    background: rgba(5, 5, 5, 0.94);
    backdrop-filter: blur(14px);
  }

  .cadence-pocket__masthead > * { border-right: 1px solid rgba(244, 240, 232, 0.2); }
  .cadence-pocket__masthead > *:last-child { border-right: 0; }
  .cadence-pocket__masthead > div { display: grid; padding: 0.55rem 0.75rem; align-content: center; gap: 0.16rem; }
  .cadence-pocket__masthead span { color: var(--pocket-pink); font: 0.45rem/1.35 var(--pixel); letter-spacing: 0.06em; }
  .cadence-pocket__masthead h2 { margin: 0; font: 900 1.35rem/0.95 var(--editorial); letter-spacing: -0.04em; text-transform: uppercase; }

  .cadence-pocket__back,
  .cadence-pocket__surprise {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--pocket-paper);
  }

  .cadence-pocket__back { color: var(--pocket-cyan); font: 1.45rem/1 var(--editorial); }
  .cadence-pocket__surprise { display: grid; padding: 0.38rem; place-content: center; gap: 0.1rem; }
  .cadence-pocket__surprise span { color: var(--pocket-cyan); font: 1.15rem/1 var(--editorial); }
  .cadence-pocket__surprise b { color: var(--pocket-paper); font: 0.4rem/1.2 var(--pixel); text-transform: uppercase; }

  .cadence-pocket__body { width: min(100%, 36rem); margin: 0 auto; }

  .cadence-pocket__beacon {
    margin: 0.7rem;
    border: 1px solid var(--pocket-paper);
    background: var(--pocket-paper);
    color: var(--pocket-ink);
    box-shadow: 5px 5px 0 var(--pocket-pink);
  }

  .cadence-pocket__beacon > header {
    display: flex;
    min-height: 2.35rem;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--pocket-ink);
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font: 0.43rem/1.35 var(--pixel);
    text-transform: uppercase;
  }

  .cadence-pocket__beacon > header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cadence-pocket__beacon > header b { flex: 0 0 auto; color: #8f1e6b; font: inherit; }

  .cadence-pocket__signal {
    display: grid;
    min-height: 8.4rem;
    padding: 1rem;
    overflow: hidden;
    align-content: center;
    background: var(--pocket-ink);
    color: var(--pocket-paper);
    font-size: clamp(2rem, 11vw, 4.25rem);
    font-weight: 700;
    line-height: 0.86;
    letter-spacing: -0.06em;
    overflow-wrap: anywhere;
  }

  .cadence-pocket__roles {
    display: flex;
    padding: 0.45rem;
    overflow-x: auto;
    border-top: 1px solid var(--pocket-ink);
    gap: 0.35rem;
    scrollbar-width: none;
  }
  .cadence-pocket__roles::-webkit-scrollbar { display: none; }
  .cadence-pocket__roles button {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0.62rem 0.75rem;
    border: 1px solid var(--pocket-ink);
    background: transparent;
    color: var(--pocket-ink);
    font: 0.48rem/1.2 var(--pixel);
    text-transform: uppercase;
  }
  .cadence-pocket__roles button[aria-pressed="true"] { background: var(--pocket-ink); color: var(--pocket-cyan); }

  .cadence-pocket__view { padding: 1.25rem 0.7rem 1.8rem; }
  .cadence-pocket__view[hidden] { display: none; }
  .cadence-pocket__section-heading { display: grid; margin-bottom: 1.2rem; gap: 0.5rem; }
  .cadence-pocket__section-heading > span { color: var(--pocket-pink); font: 0.5rem/1.35 var(--pixel); letter-spacing: 0.08em; }
  .cadence-pocket__section-heading h3 { max-width: 10ch; margin: 0; font: 900 clamp(2.45rem, 12vw, 4rem)/0.86 var(--editorial); letter-spacing: -0.065em; text-transform: uppercase; }
  .cadence-pocket__section-heading p { max-width: 31rem; margin: 0; color: rgba(244, 240, 232, 0.72); font: 700 0.92rem/1.48 var(--editorial); }

  .cadence-pocket__filters { display: grid; margin-bottom: 0.7rem; grid-template-columns: minmax(0, 1.45fr) minmax(8rem, 0.9fr); gap: 0.5rem; }
  .cadence-pocket__filters label,
  .cadence-pocket__controls label { display: grid; gap: 0.42rem; }
  .cadence-pocket__filters label > span,
  .cadence-pocket__controls label > span { color: rgba(244, 240, 232, 0.62); font: 0.45rem/1.3 var(--pixel); text-transform: uppercase; }
  .cadence-pocket__filters input,
  .cadence-pocket__filters select,
  .cadence-pocket__controls select {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem;
    border: 1px solid rgba(244, 240, 232, 0.36);
    border-radius: 0;
    background: #111;
    color: var(--pocket-paper);
    font: 750 0.82rem/1.25 var(--editorial);
  }

  .cadence-pocket__font-list { display: grid; border: 1px solid rgba(244, 240, 232, 0.28); }
  .cadence-pocket__font-list > p { margin: 0; padding: 1rem; color: rgba(244, 240, 232, 0.62); font: 0.5rem/1.5 var(--pixel); text-transform: uppercase; }
  .cadence-pocket__font-card {
    display: grid;
    min-height: 7.25rem;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(244, 240, 232, 0.22);
    grid-template-columns: minmax(0, 1fr) 3.5rem;
    background: #0b0b0b;
    color: var(--pocket-paper);
    text-align: left;
  }
  .cadence-pocket__font-card:last-child { border-bottom: 0; }
  .cadence-pocket__font-card > span { display: grid; min-width: 0; padding: 0.85rem; align-content: space-between; gap: 0.55rem; }
  .cadence-pocket__font-card small { color: var(--pocket-pink); font: 0.42rem/1.35 var(--pixel); text-transform: uppercase; }
  .cadence-pocket__font-card strong { overflow: hidden; font-size: clamp(1.4rem, 7vw, 2rem); font-weight: 500; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
  .cadence-pocket__font-card b { display: grid; border-left: 1px solid rgba(244, 240, 232, 0.22); place-content: center; color: var(--pocket-cyan); font: 1.3rem/1 var(--editorial); }
  .cadence-pocket__font-card.is-assigned { background: var(--pocket-pink); color: var(--pocket-ink); }
  .cadence-pocket__font-card.is-assigned small,
  .cadence-pocket__font-card.is-assigned b { color: var(--pocket-ink); }
  .cadence-pocket__font-card.is-assigned b { border-left-color: rgba(5, 5, 5, 0.35); }

  .cadence-pocket__tune-card { border: 1px solid rgba(244, 240, 232, 0.34); background: #0b0b0b; }
  .cadence-pocket__tune-specimen {
    display: grid;
    min-height: 13rem;
    padding: 1.1rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(244, 240, 232, 0.3);
    align-content: center;
    background: var(--pocket-ink);
    color: var(--pocket-paper);
    font-size: clamp(2rem, 12vw, 4.8rem);
    font-weight: 700;
    line-height: 0.88;
    overflow-wrap: anywhere;
  }

  .cadence-pocket__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cadence-pocket__controls label { min-width: 0; padding: 0.85rem; border-right: 1px solid rgba(244, 240, 232, 0.18); border-bottom: 1px solid rgba(244, 240, 232, 0.18); }
  .cadence-pocket__controls label:nth-child(even) { border-right: 0; }
  .cadence-pocket__controls label:nth-last-child(-n + 2) { border-bottom: 0; }
  .cadence-pocket__controls label > span { display: flex; min-height: 1rem; justify-content: space-between; gap: 0.5rem; }
  .cadence-pocket__controls output { color: var(--pocket-cyan); font: inherit; }
  .cadence-pocket__controls input[type="range"] { width: 100%; min-height: 34px; accent-color: var(--pocket-pink); }

  .cadence-pocket__replay {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-top: 1px solid rgba(244, 240, 232, 0.3);
    background: var(--pocket-cyan);
    color: var(--pocket-ink);
    font: 0.5rem/1.3 var(--pixel);
    text-transform: uppercase;
  }

  .cadence-pocket__contexts { display: grid; margin-bottom: 0.65rem; border: 1px solid rgba(244, 240, 232, 0.32); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cadence-pocket__contexts button { min-height: 48px; padding: 0.65rem 0.35rem; border: 0; border-right: 1px solid rgba(244, 240, 232, 0.25); background: transparent; color: rgba(244, 240, 232, 0.62); font: 0.46rem/1.25 var(--pixel); text-transform: uppercase; }
  .cadence-pocket__contexts button:last-child { border-right: 0; }
  .cadence-pocket__contexts button[aria-pressed="true"] { background: var(--pocket-pink); color: var(--pocket-ink); }

  .cadence-pocket__proof { min-height: 30rem; margin-bottom: 0.65rem; border: 1px solid var(--pocket-paper); background: var(--pocket-ink); color: var(--pocket-paper); }
  .cadence-pocket__proof > div { min-height: 30rem; }
  .cadence-pocket__proof-poster { display: grid; padding: 1rem; grid-template-rows: auto 1fr auto; background: var(--pocket-ink); }
  .cadence-pocket__proof-poster > span,
  .cadence-pocket__proof-story > span,
  .cadence-pocket__proof-interface > header { font-size: 0.56rem !important; line-height: 1.35 !important; letter-spacing: 0.08em !important; }
  .cadence-pocket__proof-poster > h4 { max-width: 8ch; margin: 1.5rem 0; align-self: center; font-size: clamp(3.4rem, 17vw, 5.8rem) !important; line-height: 0.78 !important; }
  .cadence-pocket__proof-poster > footer { display: flex; padding-top: 0.8rem; border-top: 2px solid currentColor; justify-content: space-between; gap: 1rem; }
  .cadence-pocket__proof-story { display: grid; padding: 1rem; align-content: start; background: var(--pocket-ink); }
  .cadence-pocket__proof-story > h4 { max-width: 9ch; margin: 3rem 0 1rem; font-size: clamp(2.7rem, 14vw, 4.5rem) !important; line-height: 0.84 !important; }
  .cadence-pocket__proof-story > p { max-width: 25em; margin: 0; font-size: 1rem !important; }
  .cadence-pocket__proof-story > blockquote { margin: 2.6rem 0 0; padding: 1rem 0 0; border-top: 1px solid currentColor; font-size: 1.45rem; line-height: 1.05; }
  .cadence-pocket__proof-interface { display: grid; padding: 0.75rem; grid-template-rows: auto auto 1fr auto; gap: 0.8rem; background: #0d0d0d; color: var(--pocket-paper); }
  .cadence-pocket__proof-interface > header { display: flex; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(244, 240, 232, 0.3); justify-content: space-between; }
  .cadence-pocket__proof-interface > h4 { max-width: 10ch; margin: 1.2rem 0 0; font-size: clamp(2.4rem, 12vw, 4rem) !important; line-height: 0.86 !important; }
  .cadence-pocket__proof-interface > section { display: grid; align-content: end; gap: 0.5rem; }
  .cadence-pocket__proof-interface article { display: grid; min-height: 4.5rem; padding: 0.7rem; border: 1px solid rgba(244, 240, 232, 0.28); grid-template-columns: 1fr auto; align-items: end; gap: 0.5rem; }
  .cadence-pocket__proof-interface article b { color: var(--pocket-cyan); }
  .cadence-pocket__proof-interface > button { min-height: 48px; border: 0; background: var(--pocket-pink); color: var(--pocket-ink); }

  .cadence-pocket__keep-actions { display: grid; gap: 0.5rem; }
  .cadence-pocket__keep-actions button { display: flex; min-height: 58px; padding: 0.85rem 1rem; border: 1px solid var(--pocket-paper); align-items: center; justify-content: space-between; background: transparent; color: var(--pocket-paper); font: 0.5rem/1.4 var(--pixel); text-transform: uppercase; }
  .cadence-pocket__keep-actions button:first-child { border-color: var(--pocket-cyan); background: var(--pocket-cyan); color: var(--pocket-ink); }
  .cadence-pocket__keep-actions b { font: 1.2rem/1 var(--editorial); }
  .cadence-pocket__keep-note { margin: 0.85rem 0 0; color: rgba(244, 240, 232, 0.58); font: 0.48rem/1.55 var(--pixel); text-transform: uppercase; }

  .cadence-pocket__status {
    position: fixed;
    z-index: 12;
    right: 0.7rem;
    bottom: calc(5.05rem + env(safe-area-inset-bottom));
    max-width: calc(100% - 1.4rem);
    margin: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--pocket-cyan);
    background: #050505;
    color: var(--pocket-cyan);
    font: 0.45rem/1.35 var(--pixel);
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition: opacity 160ms ease, transform 160ms ease;
    text-transform: uppercase;
  }
  .cadence-pocket__status.is-visible { opacity: 1; transform: translateY(0); }

  .cadence-pocket__tabs {
    position: fixed;
    z-index: 11;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid rgba(244, 240, 232, 0.3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: rgba(5, 5, 5, 0.96);
    backdrop-filter: blur(14px);
  }
  .cadence-pocket__tabs button { display: grid; min-height: 4.4rem; padding: 0.65rem; border: 0; border-right: 1px solid rgba(244, 240, 232, 0.16); place-content: center; gap: 0.22rem; background: transparent; color: rgba(244, 240, 232, 0.6); }
  .cadence-pocket__tabs button:last-child { border-right: 0; }
  .cadence-pocket__tabs button[aria-current="step"] { background: var(--pocket-pink); color: var(--pocket-ink); }
  .cadence-pocket__tabs span { font: 0.44rem/1.2 var(--pixel); }
  .cadence-pocket__tabs strong { font: 850 0.86rem/1 var(--editorial); text-transform: uppercase; }

  .cadence-pocket__signal.is-replaying,
  .cadence-pocket__tune-specimen.is-replaying { animation: cadence-pocket-enter 620ms cubic-bezier(.2,.75,.2,1) both; }
  .cadence-pocket__tune-specimen[data-effect="breathe"].is-replaying { animation-name: cadence-pocket-breathe; }
  .cadence-pocket__tune-specimen[data-effect="ripple"].is-replaying { animation-name: cadence-pocket-ripple; }
  .cadence-pocket__tune-specimen[data-effect="echo"].is-replaying { animation-name: cadence-pocket-echo; }
  .cadence-pocket__tune-specimen[data-effect="signal-break"].is-replaying { animation-name: cadence-pocket-break; }
  .cadence-pocket__tune-specimen[data-effect="wobble"].is-replaying { animation-name: cadence-pocket-wobble; }
  .cadence-pocket__tune-specimen[data-effect="typewriter"].is-replaying { animation-name: cadence-pocket-type; overflow: hidden; white-space: nowrap; }
  .cadence-pocket__tune-specimen[data-effect="fade"].is-replaying { animation-name: cadence-pocket-fade; }
  .cadence-pocket__tune-specimen[data-effect="bounce"].is-replaying { animation-name: cadence-pocket-bounce; }
}

@keyframes cadence-pocket-enter { from { opacity: 0; transform: translateY(1.2rem) skewY(2deg); } to { opacity: 1; transform: none; } }
@keyframes cadence-pocket-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes cadence-pocket-ripple { 0% { letter-spacing: 0.24em; opacity: 0; } 100% { opacity: 1; } }
@keyframes cadence-pocket-echo { 0% { text-shadow: 18px 0 #ff48bc, -18px 0 #4ef6ff; opacity: 0; } 100% { text-shadow: none; opacity: 1; } }
@keyframes cadence-pocket-break { 0%,20%,40% { transform: translateX(-6px); clip-path: inset(20% 0 45% 0); } 10%,30%,50% { transform: translateX(6px); clip-path: inset(55% 0 10% 0); } 100% { transform: none; clip-path: inset(0); } }
@keyframes cadence-pocket-wobble { 0% { transform: rotate(-3deg); } 33% { transform: rotate(2deg); } 66% { transform: rotate(-1deg); } 100% { transform: none; } }
@keyframes cadence-pocket-type { from { width: 0; } to { width: 100%; } }
@keyframes cadence-pocket-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cadence-pocket-bounce { 0% { transform: translateY(-1.8rem); opacity: 0; } 55% { transform: translateY(0.35rem); opacity: 1; } 100% { transform: none; } }

@media (min-width: 701px) and (max-width: 980px) and (max-height: 500px) {
  .cadence-pocket__body { width: min(100% - 1rem, 50rem); }
  .cadence-pocket__beacon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.85fr); }
  .cadence-pocket__beacon > header { grid-column: 1 / -1; }
  .cadence-pocket__signal { min-height: 7rem; }
  .cadence-pocket__roles { border-top: 0; border-left: 1px solid var(--pocket-ink); align-items: center; }
  .cadence-pocket__font-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cadence-pocket__font-card:nth-child(odd) { border-right: 1px solid rgba(244, 240, 232, 0.22); }
  .cadence-pocket__tune-card { display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(20rem, 1fr); }
  .cadence-pocket__tune-specimen { min-height: 17rem; border-right: 1px solid rgba(244, 240, 232, 0.3); border-bottom: 0; }
  .cadence-pocket__replay { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .cadence-pocket__signal.is-replaying,
  .cadence-pocket__tune-specimen.is-replaying { animation: none !important; }
  .cadence-pocket__status { transition: none; }
}

/* Keep Cadence's interface on the studio type system while inline specimen
   styles continue to display the font families a visitor is testing. */
.cadence-lab :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--brand-heading);
  font-weight: 400;
  letter-spacing: 0;
}