/* Provato 2026 visual system — intentionally loaded after the legacy theme. */
:root {
  --fd: 'Bricolage Grotesque', 'Outfit', sans-serif;
  --fn: 'Outfit', sans-serif;
  --fb: 'Outfit', sans-serif;
  --fm: 'IBM Plex Mono', monospace;
  --bg: #12100e;
  --sf: rgba(244, 239, 230, .055);
  --s2: rgba(244, 239, 230, .08);
  --s3: rgba(244, 239, 230, .12);
  --bd: rgba(244, 239, 230, .14);
  --tx: #f4efe6;
  --td: rgba(244, 239, 230, .66);
  --tm: rgba(244, 239, 230, .50);
  --brand-red: #fb351a;
  --brand-amber: #fcc303;
  --on-brand: #180703;
  --paper: #f4efe6;
  --paper-recessed: #eae2d3;
  --on-paper: #12100e;
  --train: #80b88e;
  --a1: #e08a72;
  --a2: #84c5c0;
  --a3: #ddb53c;
  --a4: #9086c4;
  --a5: #c8788a;
  --a6: #6c90bc;
  --a7: #80b88e;
  --a8: #c88a3a;
  --gn: #80b88e;
  --rd: #e06c58;
  --r: 20px;
  --rs: 14px;
  --rx: 10px;
  --panel-radius: 20px;
  --panel-top: rgba(244, 239, 230, .065);
  --panel-bottom: rgba(244, 239, 230, .045);
  --panel-stroke: rgba(244, 239, 230, .14);
}

.provato-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html {
  min-height: 100%;
  background: #12100e;
  scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

body.provato-reskin {
  min-height: 100dvh;
  font-family: var(--fb);
  color: var(--tx);
  background:
    radial-gradient(ellipse 120% 60% at 78% -8%, rgba(251, 53, 26, .22) 0%, transparent 62%),
    radial-gradient(ellipse 110% 50% at 20% 104%, rgba(252, 195, 3, .13) 0%, transparent 66%),
    linear-gradient(180deg, #2a2521 0%, #1c1917 44%, #12100e 100%);
  background-attachment: fixed;
}

body.provato-reskin::before {
  background: radial-gradient(ellipse at 100% 0%, rgba(244, 239, 230, .045), transparent 58%);
}

body.provato-reskin::after {
  z-index: 1000;
  opacity: .05;
  background-size: 200px 200px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-amber) !important;
  outline-offset: 3px;
}

.shell {
  width: 100%;
  max-width: 720px;
  min-height: 100dvh;
  height: 100dvh;
  margin-inline: auto;
  padding: 0 18px;
}

.hd {
  min-height: 76px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 2px 10px;
}

.c-logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(244, 239, 230, .055) !important;
  border: 1px solid rgba(244, 239, 230, .14) !important;
  box-shadow: inset 0 1px 0 rgba(244, 239, 230, .14) !important;
}

.title-wave-text {
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  font-variation-settings: 'wdth' 84;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.logo-sub {
  font-family: var(--fm) !important;
  font-size: .48rem !important;
  color: var(--tm) !important;
}

.provato-header-controls,
.provato-mode-switch {
  display: flex;
  align-items: center;
}

.provato-header-controls {
  margin-left: auto;
  gap: 9px;
}

.provato-mode-switch {
  min-height: 32px;
  padding: 3px;
  gap: 1px;
  border: 1px solid rgba(244, 239, 230, .18);
  border-radius: 999px;
  background: rgba(18, 16, 14, .18);
}

.title-wave-mode {
  min-height: 24px;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--tm) !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: var(--fm) !important;
  font-size: .5rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.title-wave-mode.active {
  background: var(--paper) !important;
  color: var(--on-paper) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28) !important;
}

.provato-studio-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--brand-amber);
  vertical-align: middle;
}

.ib,
.bb,
.ab,
.sb {
  box-shadow: none !important;
}

.hd .ib {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(244, 239, 230, .16) !important;
  background: rgba(244, 239, 230, .055) !important;
  color: var(--td) !important;
}

#p-home.on {
  flex: 1;
  min-height: 0;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  padding: 2px 0 112px !important;
  gap: 0 !important;
}

#p-home.studio-mode > :not(.studio-placeholder) {
  display: none !important;
}

#p-home.studio-mode > .studio-placeholder {
  display: flex;
  min-height: min(58vh, 440px);
}

#p-home::-webkit-scrollbar,
.provato-rail::-webkit-scrollbar {
  display: none;
}

.provato-home-intro {
  padding: 10px 2px 18px;
}

.provato-home-kicker,
.provato-section-label,
.provato-eyebrow,
.provato-meta,
.provato-status,
.provato-page-tag,
.provato-game-label,
.provato-value-label {
  font-family: var(--fm);
  font-size: .61rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tm);
}

.provato-home-title,
.provato-page-title,
.provato-card-title,
.provato-game-title,
.provato-big-value,
.page-title__name {
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  font-variation-settings: 'wdth' 84;
  letter-spacing: -.025em !important;
  text-transform: uppercase;
}

.provato-home-title {
  max-width: 12ch;
  margin-top: 9px;
  font-size: clamp(2rem, 7vw, 3.45rem);
  line-height: .9;
  color: var(--tx);
}

.provato-home-deck {
  max-width: 42ch;
  margin-top: 11px;
  color: var(--td);
  font-size: .84rem;
  line-height: 1.55;
}

.provato-glass,
#p-home .cadenze-panel,
.provato-panel {
  background: rgba(244, 239, 230, .055) !important;
  border: 1px solid rgba(244, 239, 230, .14) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(244, 239, 230, .14) !important;
}

.provato-resume {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 16px;
  cursor: pointer;
  overflow: hidden;
}

.provato-resume::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--train);
}

.provato-resume-icon,
.provato-row-icon,
.provato-ai-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  color: var(--row-color, var(--train));
  background: color-mix(in srgb, var(--row-color, var(--train)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--row-color, var(--train)) 42%, transparent);
}

.provato-resume-icon svg,
.provato-row-icon svg,
.provato-ai-icon svg {
  width: 20px;
  height: 20px;
}

.provato-resume-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.provato-resume-title {
  margin-top: 5px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--tx);
}

.provato-resume-note {
  margin-top: 5px;
  overflow: hidden;
  color: var(--td);
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provato-chevron {
  color: var(--tm);
  font-size: 1.35rem;
}

.provato-home-section {
  margin-top: 22px;
}

#provatoHomeResume {
  margin-top: 14px;
}

.provato-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 3px 11px;
}

.provato-text-button {
  border: 0;
  background: transparent;
  color: var(--td);
  font-family: var(--fm);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

#p-home .qs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#p-home .qs-btn {
  position: relative;
  display: flex !important;
  min-height: 118px;
  padding: 15px !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: space-between !important;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tile-color, var(--train)) 40%, transparent) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--tile-color, var(--train)) 20%, transparent) !important;
  box-shadow: none !important;
  color: var(--tx) !important;
  text-align: left;
}

#p-home .qs-btn::after {
  content: none;
}

#p-home .qs-btn .qs-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tile-color, var(--train)) 25%, transparent);
  color: color-mix(in srgb, var(--tile-color, var(--train)) 76%, white);
}

#p-home .qs-btn .qs-icon svg {
  color: inherit !important;
}

.provato-quick-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

#p-home .provato-quick-title {
  max-width: 12ch;
  color: var(--tx) !important;
  font-family: var(--fd) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  font-variation-settings: 'wdth' 84;
  line-height: .98;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

#p-home .provato-quick-sub {
  color: var(--td) !important;
  font-family: var(--fm) !important;
  font-size: .57rem !important;
  font-weight: 500 !important;
  line-height: 1.2;
  letter-spacing: .055em;
  text-transform: uppercase;
}

#p-home .provato-quick-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  color: color-mix(in srgb, var(--tile-color, var(--train)) 78%, white) !important;
  font-family: var(--fm) !important;
  font-size: .58rem !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
}

#p-home .provato-quick-status-dot {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tile-color, var(--train)) 82%, white);
  box-shadow: 0 0 10px color-mix(in srgb, var(--tile-color, var(--train)) 42%, transparent);
}

.provato-tools-section {
  padding: 12px;
  overflow: hidden;
}

.provato-tools-section .provato-section-head {
  padding: 0 2px 11px;
}

#p-home .provato-tools-section .rt-row {
  padding: 0 0 2px;
}

#p-home .rt-row {
  display: flex;
  gap: 9px;
  padding: 1px 2px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

#p-home .rt-card {
  display: flex !important;
  flex: 0 0 122px;
  min-height: 90px;
  padding: 13px !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: space-between !important;
  scroll-snap-align: start;
  border: 1px solid color-mix(in srgb, var(--tile-color, var(--a4)) 38%, transparent) !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--tile-color, var(--a4)) 15%, transparent) !important;
  box-shadow: none !important;
}

#p-home .rt-card svg {
  color: var(--tile-color, var(--a4)) !important;
}

#p-home .rt-card span {
  color: var(--tx) !important;
  font-family: var(--fn) !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  text-transform: none !important;
}

.provato-theory {
  margin-top: 22px;
  padding: 18px 18px 20px;
  scroll-margin-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px;
  background: var(--paper);
  color: var(--on-paper);
}

.provato-theory .theory-label {
  color: rgba(18, 16, 14, .5) !important;
  font-family: var(--fm) !important;
  font-size: .58rem !important;
  letter-spacing: .15em;
}

.provato-theory .theory-title {
  margin-top: 14px;
  color: var(--on-paper) !important;
  font-family: var(--fd) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  font-variation-settings: 'wdth' 82;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.provato-theory .theory-body {
  margin-top: 11px;
  color: rgba(18, 16, 14, .68) !important;
  font-size: .78rem !important;
  line-height: 1.55 !important;
}

#homeStatsCard {
  margin-top: 20px;
}

#homeStatsCard .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.bn {
  height: calc(76px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(244, 239, 230, .16);
  background: rgba(18, 16, 14, .66) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: none !important;
}

.bn-cats {
  width: 100%;
  max-width: 720px;
  height: 100%;
  margin: 0 auto;
  padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 10px);
  gap: 0;
}

.bn-cats button {
  gap: 5px;
  padding: 4px;
  border-radius: 0;
  color: rgba(244, 239, 230, .50) !important;
  font-family: var(--fn);
  font-size: .53rem;
  font-weight: 600;
  letter-spacing: .06em;
  transition: none;
}

.bn-cats button svg {
  width: 20px;
  height: 20px;
}

.bn-cats button.on {
  color: var(--tab-color, var(--tx)) !important;
  text-shadow: none !important;
}

.bn-cats button.on::before {
  content: '';
  position: absolute;
  top: -9px;
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--tab-color, var(--tx));
}

.bn-cats button[data-cat='home'] { --tab-color: var(--brand-amber); }
.bn-cats button[data-cat='train'] { --tab-color: var(--train); }
.bn-cats button[data-cat='ai'] { --tab-color: var(--a4); }
.bn-cats button[data-cat='learn'] { --tab-color: #a78bfa; }
.bn-cats button[data-cat='tools'] { --tab-color: var(--a3); }
.bn-cats button[data-cat='home'].on { color: #fcc303 !important; }
.bn-cats button[data-cat='train'].on { color: #80b88e !important; }
.bn-cats button[data-cat='ai'].on { color: #9086c4 !important; }
.bn-cats button[data-cat='learn'].on { color: #a78bfa !important; }
.bn-cats button[data-cat='tools'].on { color: #ddb53c !important; }

.bn-cats button.on svg {
  filter: none !important;
  transform: none;
}

/* Navigation hierarchy: every destination keeps its identity, while only the
   active route receives the full color, underline, and glow. */
.bn-cats button:not(.on) {
  color: color-mix(in srgb, var(--tab-color, var(--tx)) 38%, transparent) !important;
  text-shadow: none !important;
}

.bn-cats button:not(.on) svg {
  filter: none !important;
  transform: none !important;
}

.bn-cats button.on {
  text-shadow: 0 0 12px color-mix(in srgb, var(--tab-color, var(--tx)) 42%, transparent) !important;
}

.bn-cats button.on svg {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tab-color, var(--tx)) 48%, transparent)) !important;
}

.bn-cats button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tab-color, var(--tx)) 75%, white);
  outline-offset: -3px;
}

/* The legacy component sheet supplied an always-on AI halo. Keep the normal
   purple identity quiet and reserve this small dot for first discovery. */
.bn-cats button[data-cat='ai']:not(.on)::before {
  content: none !important;
}

.bn-cats button[data-cat='ai'][data-ai-discovery='true']:not(.on)::after {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  right: calc(50% - 17px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--a4, #9086c4);
  pointer-events: none;
}

.drawer-scrim {
  z-index: 98;
  background: rgba(9, 8, 7, .42);
  -webkit-backdrop-filter: blur(6px) saturate(.96);
  backdrop-filter: blur(6px) saturate(.96);
}

.tool-drawer {
  z-index: 99;
  width: min(720px, 100%);
  max-width: 720px;
  max-height: calc(78dvh - 76px);
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  padding: 8px 16px 22px;
  border: 1px solid rgba(244, 239, 230, .16) !important;
  border-bottom: 0 !important;
  border-radius: 26px 26px 0 0;
  background: rgba(28, 25, 23, .88) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.2);
  backdrop-filter: blur(32px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(244, 239, 230, .14) !important;
  visibility: hidden;
}

.tool-drawer[data-provato-category='learn'] {
  border-top: 2px solid #a78bfa !important;
  background: linear-gradient(180deg, rgba(56, 42, 74, .98) 0%, rgba(28, 25, 23, .96) 14%, rgba(28, 25, 23, .94) 100%) !important;
}

.tool-drawer[data-provato-category='tools'] {
  border-top: 2px solid #ddb53c !important;
  background: linear-gradient(180deg, rgba(77, 59, 21, .98) 0%, rgba(28, 25, 23, .96) 14%, rgba(28, 25, 23, .94) 100%) !important;
}

.tool-drawer.on {
  visibility: visible;
}

.tool-drawer::before {
  content: '';
  display: block;
  width: 42px;
  height: 4px;
  margin: 0 auto 9px;
  border-radius: 4px;
  background: rgba(244, 239, 230, .22);
}

.tool-drawer-header {
  margin: 0 0 13px;
  padding: 5px 2px 13px;
  border-bottom-color: rgba(244, 239, 230, .14);
}

.tool-drawer-header span {
  color: var(--tx) !important;
  font-family: var(--fd);
  font-size: 1.18rem;
  font-weight: 800;
  font-variation-settings: 'wdth' 84;
  letter-spacing: -.015em;
}

.tool-drawer-close {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(244, 239, 230, .14);
  border-radius: 50%;
  color: var(--td);
  font-size: .78rem;
}

.tool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.tool-btn {
  min-height: 96px;
  gap: 10px;
  padding: 14px 8px 13px;
  border: 1px solid color-mix(in srgb, var(--pc, #9086c4) 35%, transparent) !important;
  border-radius: 15px;
  background: color-mix(in srgb, var(--pc, #9086c4) 14%, transparent) !important;
  box-shadow: none !important;
}

.tool-btn:hover,
.tool-btn:active,
.tool-btn.active {
  border-color: color-mix(in srgb, var(--pc) 58%, transparent) !important;
  background: color-mix(in srgb, var(--pc) 23%, transparent) !important;
  box-shadow: none !important;
}

.tool-btn svg {
  width: 29px;
  height: 29px;
  color: var(--pc) !important;
}

.tool-btn span {
  color: var(--tx) !important;
  font-family: var(--fn);
  font-size: .69rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: .005em;
  text-transform: none;
}

.tool-btn .pro-dot {
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  background: var(--brand-amber);
}

.tool-btn .ai-dot {
  top: 6px;
  left: 8px;
  color: var(--a4);
  font-size: .72rem;
  text-shadow: none;
}

.provato-drawer-continue {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 11px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(123, 180, 137, .32);
  border-radius: 14px;
  background: rgba(123, 180, 137, .11);
  color: var(--tx);
  text-align: left;
  cursor: pointer;
}

.provato-drawer-continue .provato-row-icon {
  width: 40px;
  height: 40px;
}

.provato-drawer-games {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.provato-drawer-game {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--row-color) 32%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--row-color) 11%, transparent);
  color: var(--tx);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.provato-drawer-game .provato-row-icon {
  width: 40px;
  height: 40px;
}

.provato-arcade-shell {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: #0b0a10;
}

.provato-arcade-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: var(--tx);
}

.provato-arcade-close {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--tx);
  font: inherit;
  cursor: pointer;
}

.provato-arcade-title {
  flex: 1;
  font-weight: 600;
}

.provato-arcade-open {
  color: var(--tm);
  font-size: .75rem;
}

.provato-arcade-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #000;
}

.provato-drawer-note {
  padding: 13px 2px 0;
  color: var(--tm);
  font-family: var(--fm);
  font-size: .54rem;
  line-height: 1.5;
  text-align: center;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tool-bar {
  left: 50%;
  width: min(720px, 100%);
  transform: translateX(-50%);
  border-bottom: 1px solid rgba(244, 239, 230, .12);
  background: rgba(18, 16, 14, .82) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

#globalBackBtn {
  border: 1px solid rgba(244, 239, 230, .18) !important;
  background: rgba(18, 16, 14, .80) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

body:has(#p-tuner.on) #globalBackBtn,
body:has(#p-metro.on) #globalBackBtn,
body:has(#p-history.on) #globalBackBtn,
body:has(#p-session.on) #globalBackBtn,
body:has(.provato-page.on) #globalBackBtn {
  display: none !important;
}

.archetype-readout button:not([hidden]),
.archetype-transport button:not([hidden]),
.archetype-drill button:not([hidden]),
.archetype-reference button:not([hidden]),
.archetype-browser button:not([hidden]),
.archetype-ai button:not([hidden]) {
  min-width: 44px;
  min-height: 44px;
}

/* Existing tools inherit one of five visual archetypes without changing their logic. */
.pn:not(#p-home):not(.provato-page) {
  width: min(720px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: 112px !important;
  color: var(--tx);
}

.pn:not(#p-home):not(.provato-page) .cadenze-panel,
.pn:not(#p-home):not(.provato-page) > .cd,
.pn:not(#p-home):not(.provato-page) .cd {
  border: 1px solid rgba(244, 239, 230, .14) !important;
  border-radius: 20px !important;
  background: rgba(244, 239, 230, .055) !important;
  box-shadow: inset 0 1px 0 rgba(244, 239, 230, .12) !important;
}

.pn:not(#p-home):not(.provato-page) .cadenze-panel > .panel-inner > div[style*='background'],
.pn:not(#p-home):not(.provato-page) .cd > div[style*='background'] {
  border-color: color-mix(in srgb, var(--pc) 34%, transparent) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 15%, transparent), color-mix(in srgb, var(--pc) 7%, transparent)) !important;
  box-shadow: none !important;
}

.pn:not(#p-home):not(.provato-page) .page-title__name,
.pn:not(#p-home):not(.provato-page) .cadenze-panel:first-child [style*='font-family:var(--fd)'] {
  color: var(--tx) !important;
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  font-variation-settings: 'wdth' 84;
  letter-spacing: -.015em !important;
  text-transform: uppercase;
}

.pn:not(#p-home):not(.provato-page) .page-title__sub,
.pn:not(#p-home):not(.provato-page) .st,
.pn:not(#p-home):not(.provato-page) p {
  color: var(--td) !important;
  font-family: var(--fn) !important;
}

.pn:not(#p-home):not(.provato-page) .db,
.pn:not(#p-home):not(.provato-page) .tn,
.pn:not(#p-home):not(.provato-page) .cn,
.pn:not(#p-home):not(.provato-page) .tr-big,
.pn:not(#p-home):not(.provato-page) .tr-from {
  color: var(--pc) !important;
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  font-variation-settings: 'wdth' 82;
  text-shadow: none !important;
  filter: none !important;
}

.pn:not(#p-home):not(.provato-page) .ch,
.pn:not(#p-home):not(.provato-page) .pl,
.pn:not(#p-home):not(.provato-page) .tb,
.pn:not(#p-home):not(.provato-page) button:not(.bb):not(.ab):not(.sb) {
  box-shadow: none !important;
}

.pn:not(#p-home):not(.provato-page) .related-tools-tray {
  border: 1px solid rgba(244, 239, 230, .14) !important;
  border-left: 2px solid var(--pc) !important;
  border-radius: 14px !important;
  background: rgba(244, 239, 230, .04) !important;
  box-shadow: none !important;
}

.archetype-readout .cadenze-panel:first-child,
.archetype-readout > .cd:first-child {
  border-color: color-mix(in srgb, var(--pc) 40%, transparent) !important;
  background: color-mix(in srgb, var(--pc) 10%, transparent) !important;
}

.archetype-transport .bb,
.archetype-transport .tb,
.archetype-drill .bb {
  border-color: color-mix(in srgb, var(--pc) 55%, transparent) !important;
  background: color-mix(in srgb, var(--pc) 18%, transparent) !important;
  color: var(--pc) !important;
}

.archetype-reference .sr,
.archetype-reference .cg,
.archetype-browser input,
.archetype-browser select {
  scrollbar-color: var(--pc) transparent;
}

/* Canonical Readout archetype: one dominant measurement surface. */
.tuner-readout-hero {
  margin-top: 14px;
  padding: 22px 18px 19px;
  border: 1px solid rgba(132, 197, 192, .42);
  border-radius: 20px;
  background: linear-gradient(180deg, #164d48 0%, #0d3431 100%) !important;
  box-shadow: inset 0 1px 0 rgba(235, 255, 252, .12);
  text-align: center;
}

#p-tuner .cadenze-panel:first-child > .panel-inner > div {
  padding: 16px !important;
  border-radius: 20px !important;
  background: rgba(132, 197, 192, .055) !important;
}

#p-tuner #tnt {
  margin-top: 0 !important;
  color: var(--tx) !important;
  font-size: clamp(5rem, 24vw, 7.5rem) !important;
  line-height: .78 !important;
  letter-spacing: -.06em;
}

#p-tuner #tnt small {
  margin-left: 4px;
  color: #84c5c0;
  font-size: .38em;
  letter-spacing: 0;
}

#p-tuner #tfr {
  margin-top: 13px !important;
  color: rgba(244, 239, 230, .72) !important;
  font-size: .72rem !important;
}

.tuner-cents {
  margin-top: 5px;
  color: #84c5c0;
  font-family: var(--fm);
  font-size: 1.05rem;
}

.tuner-readout-hero .tm {
  margin-top: 18px !important;
}

.tuner-readout-hero #tst {
  min-height: 1.35em;
  margin-top: 16px !important;
  color: #b9ebe7 !important;
  font-size: .75rem !important;
  text-align: center !important;
}

.tuner-string-card {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(244, 239, 230, .12) !important;
}

#p-tuner #ttb {
  width: 48px;
  height: 48px;
  border-color: rgba(132, 197, 192, .62) !important;
  background: rgba(132, 197, 192, .14) !important;
}

.tool-mode-toggle {
  padding: 4px;
  border-radius: 999px;
  background: rgba(10, 9, 8, .34);
}

.tool-mode-toggle .ch {
  border-radius: 999px !important;
}

/* Canonical Transport archetype: readout, beats, scrubber, transport. */
#p-metro .cadenze-panel:first-child > .panel-inner > div {
  padding: 16px !important;
  border-radius: 20px !important;
  background: rgba(221, 181, 60, .07) !important;
}

.metro-transport-hero {
  margin-top: 14px;
  padding: 21px 16px 18px;
  border: 1px solid rgba(221, 181, 60, .38);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(94, 71, 15, .68), rgba(45, 35, 14, .78)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 245, 198, .14);
}

.metro-bpm-readout {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  justify-content: center;
  column-gap: 8px;
  text-align: center;
}

#p-metro #mbpm {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  grid-row: span 2;
  border-radius: 8px !important;
  color: var(--tx) !important;
  font-family: var(--fd) !important;
  font-size: clamp(5rem, 23vw, 7.4rem) !important;
  font-weight: 800 !important;
  line-height: .78 !important;
  letter-spacing: -.06em;
}

.metro-bpm-readout > span {
  padding-bottom: 8px;
  color: #ddb53c;
  font-family: var(--fm);
  font-size: .67rem;
  letter-spacing: .12em;
}

#p-metro #mtn {
  align-self: start;
  margin: 0 !important;
  padding: 4px 0 0 !important;
  color: rgba(244, 239, 230, .7) !important;
  font-size: .7rem !important;
  text-align: left;
}

#p-metro #mbi {
  display: flex;
  height: 34px;
  margin-top: 20px;
  align-items: end;
  justify-content: center;
  gap: 7px;
}

#p-metro #mbi .bd {
  width: 30px;
  height: 5px;
  border-radius: 4px;
  background: rgba(244, 239, 230, .2);
  transition: height .08s linear, background .08s linear;
}

#p-metro #mbi .bd.on {
  height: 30px;
  background: #ddb53c;
}

#p-metro #mbi .bd.muted {
  background: rgba(244, 239, 230, .1);
}

#p-metro #msl,
#p-metro #ttSlider,
.provato-control-card input[type='range'] {
  width: 100%;
  min-height: 44px;
  margin: 4px 0 0;
  background: transparent !important;
  cursor: pointer;
}

#p-metro #msl::-webkit-slider-runnable-track,
#p-metro #ttSlider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: rgba(244, 239, 230, .24);
}

#p-metro #msl::-moz-range-track,
#p-metro #ttSlider::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: rgba(244, 239, 230, .24);
}

#p-metro #metroBpmStepper {
  display: grid !important;
  grid-template-columns: 48px 74px 48px;
  margin-top: 12px;
  align-items: center;
  justify-content: center;
  gap: 14px !important;
}

#p-metro #metroBpmStepper .ab {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(244, 239, 230, .2);
  border-radius: 50%;
  background: rgba(244, 239, 230, .06);
  color: var(--tx);
  font-size: 1.2rem;
}

#p-metro #mtb {
  width: 74px !important;
  height: 74px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(64deg, var(--brand-red), var(--brand-amber)) !important;
  color: var(--on-brand) !important;
  box-shadow: 0 10px 24px rgba(251, 53, 26, .2) !important;
}

#p-metro #metroCardControls .sr {
  min-height: 44px;
  align-items: center;
}

#p-metro #metroCardControls .pl {
  min-width: 44px;
  min-height: 44px;
}

#p-metro #gapRandom {
  width: 20px;
  height: 20px;
}

#p-metro label:has(#gapRandom),
.provato-disclosure {
  min-height: 44px;
}

#p-metro #gapToggle {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent !important;
}

#p-metro #gapToggle::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 3px;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgba(244, 239, 230, .16);
}

/* Remaining archetypes get distinct hierarchy, not a shared tint alone. */
.archetype-drill .cadenze-panel:first-child > .panel-inner > div,
.archetype-drill > .cd:first-child {
  padding: 20px !important;
  border-color: color-mix(in srgb, var(--pc) 40%, transparent) !important;
  background: color-mix(in srgb, var(--pc) 12%, transparent) !important;
}

.archetype-drill :is(.ia, .sr-options button, .cg button) {
  min-height: 48px !important;
  border-radius: 12px !important;
}

.archetype-reference :is(.cn, .tr-big, .tr-from) {
  margin-block: 14px !important;
  font-size: clamp(3.6rem, 17vw, 6rem) !important;
  line-height: .82 !important;
}

.archetype-reference .cadenze-panel:first-child > .panel-inner > div {
  padding: 20px !important;
  border-color: color-mix(in srgb, var(--pc) 38%, transparent) !important;
}

.archetype-browser :is(input[type='search'], input[type='text'], select) {
  min-height: 48px !important;
  border-radius: 12px !important;
  border-color: color-mix(in srgb, var(--pc) 34%, transparent) !important;
  background: rgba(244, 239, 230, .06) !important;
}

#p-history.history-paper {
  --tx: #12100e;
  --td: rgba(18, 16, 14, .72);
  --tm: rgba(18, 16, 14, .50);
  --bd: rgba(18, 16, 14, .18);
  --s2: rgba(18, 16, 14, .055);
  --sf: #f4efe6;
  width: 100%;
  max-width: none !important;
  min-height: 100dvh;
  padding: 0 0 112px !important;
  background: var(--paper) !important;
  color: var(--on-paper) !important;
}

#p-history.history-paper .cd {
  width: min(720px, 100%);
  margin: 0 auto !important;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#p-history.history-paper #histContent {
  color: var(--on-paper);
}

#p-history.history-paper .hist-hdr {
  display: none !important;
}

body:has(#p-history.on) {
  background: var(--paper) !important;
}

body:has(#p-history.on)::before,
body:has(#p-history.on)::after {
  content: none !important;
}

body:has(#p-history.on) .bn {
  border-top-color: rgba(18, 16, 14, .16) !important;
  background: rgba(244, 239, 230, .94) !important;
}

body:has(#p-history.on) .bn-cats button {
  color: rgba(18, 16, 14, .48) !important;
}

body:has(#p-history.on) .bn-cats button[data-cat='learn'].on {
  color: #7b5611 !important;
}

body:has(#p-history.on) .bn-cats button[data-cat='learn'] {
  --tab-color: #ad7a1a;
}

#p-history.history-paper .hist-hdr > div {
  color: #29231f !important;
}

#p-history.history-paper .hist-hdr > button {
  color: #ad7a1a !important;
}

#p-history.history-paper #histContent p {
  color: #413a34 !important;
  font-size: .97rem !important;
  line-height: 1.72 !important;
}

#p-history.history-paper #histContent > div[onclick*='renderHistEras'],
#p-history.history-paper .hist-card,
#p-history.history-paper .hist-hero {
  box-shadow: 0 12px 28px rgba(36, 29, 23, .18);
}

#p-history.history-paper .hist-card__overlay {
  background: linear-gradient(90deg, rgba(17, 14, 12, .9) 10%, rgba(17, 14, 12, .64) 56%, rgba(17, 14, 12, .16) 100%) !important;
}

#p-history.history-paper .hist-card__name,
#p-history.history-paper .hist-card__years,
#p-history.history-paper .hist-card__badge,
#p-history.history-paper .hist-hero__name,
#p-history.history-paper .hist-hero__years {
  color: #fff !important;
}

#p-history.history-paper .hist-pill {
  border-color: rgba(41, 35, 31, .18);
  background: rgba(41, 35, 31, .07);
  color: #5f564e;
}

#p-history.history-paper .hist-pill.active {
  border-color: var(--era-color, #ad7a1a);
  background: color-mix(in srgb, var(--era-color, #ad7a1a) 16%, transparent);
  color: #29231f;
}

#p-history.history-paper #histContent > div[onclick*='renderHistRegions'] {
  color: #6b5f55 !important;
}

.hist-shell-head {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(41, 35, 31, .14);
}

.hist-shell-head > button,
.hist-text-back {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #6c5f51;
  cursor: pointer;
}

.hist-shell-head svg,
.hist-text-back svg {
  width: 19px;
  height: 19px;
}

.hist-shell-head > span {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.hist-shell-head strong {
  color: #29231f;
  font-family: var(--fd);
  font-size: 1.12rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hist-shell-head small,
.hist-text-back {
  color: #766a60;
  font-family: var(--fm);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hist-index-intro {
  padding: 32px 2px 22px;
}

.hist-index-intro h1,
.hist-region-intro h1,
.hist-editorial-reader h1 {
  margin-top: 10px;
  color: #211c18;
  font-family: var(--fd);
  font-size: clamp(2.5rem, 12vw, 4.8rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 82;
  line-height: .84;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.hist-index-intro p {
  max-width: 38ch;
  margin-top: 16px;
  color: #62584f !important;
  font-size: .92rem !important;
  line-height: 1.55 !important;
}

.hist-continue {
  display: flex;
  width: 100%;
  min-height: 128px;
  padding: 17px;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--region-color) 42%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--region-color) 16%, var(--paper));
  color: #29231f;
  text-align: left;
  cursor: pointer;
}

.hist-continue strong {
  margin-top: 9px;
  color: #29231f;
  font-family: var(--fd);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.hist-continue > span:nth-of-type(2) {
  display: flex;
  margin-top: 9px;
  justify-content: space-between;
  color: #6d6258;
  font-size: .7rem;
}

.hist-continue > span b {
  color: #29231f;
  font-family: var(--fm);
  font-weight: 500;
}

.hist-continue > i {
  height: 4px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(41, 35, 31, .12);
}

.hist-continue > i span {
  display: block;
  height: 100%;
  background: var(--region-color);
}

.hist-region-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.hist-region-band {
  display: flex;
  width: 100%;
  min-height: 132px;
  padding: 17px;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--region-color) 72%, var(--paper));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36);
  color: #211c18;
  text-align: left;
  cursor: pointer;
}

.hist-region-years,
.hist-region-count,
.hist-reading-meta {
  font-family: var(--fm);
  font-size: .57rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.hist-region-name {
  margin-top: 12px;
  font-family: var(--fd);
  font-size: 1.72rem;
  font-weight: 800;
  line-height: .9;
  text-transform: uppercase;
}

.hist-region-copy {
  margin-top: 6px;
  color: rgba(33, 28, 24, .7);
  font-size: .75rem;
}

.hist-region-count {
  display: flex;
  width: 100%;
  margin-top: auto;
  align-items: center;
  justify-content: space-between;
}

.hist-text-back {
  width: auto;
  margin-top: 8px;
}

.hist-region-intro {
  margin-top: 13px;
  padding: 26px 20px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--region-color) 68%, var(--paper));
}

.hist-region-intro > span {
  color: rgba(33, 28, 24, .7);
  font-family: var(--fm);
  font-size: .6rem;
  text-transform: uppercase;
}

.hist-region-intro h1 {
  margin-top: 14px;
}

.hist-region-intro p {
  margin-top: 12px;
  color: rgba(33, 28, 24, .72) !important;
  font-size: .79rem !important;
}

.hist-era-list {
  margin-top: 20px;
  border-top: 1px solid rgba(41, 35, 31, .16);
}

.hist-era-row {
  position: relative;
  border-bottom: 1px solid rgba(41, 35, 31, .16);
}

.hist-era-row > button:first-child {
  display: flex;
  width: 100%;
  min-height: 100px;
  padding: 16px 64px 16px 3px;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  color: #29231f;
  text-align: left;
  cursor: pointer;
}

.hist-era-row span {
  display: flex;
  flex-direction: column;
}

.hist-era-row small,
.hist-era-row em {
  color: #75695f;
  font-family: var(--fm);
  font-size: .57rem;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hist-era-row strong {
  margin: 6px 0;
  color: #29231f;
  font-family: var(--fd);
  font-size: 1.14rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hist-era-row > button:first-child > b {
  color: var(--region-color);
}

.hist-era-quiz {
  position: absolute;
  right: 0;
  bottom: 13px;
  min-width: 50px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--region-color) 62%, transparent);
  border-radius: 999px;
  background: transparent;
  color: #51483f;
  font-size: .58rem;
  cursor: pointer;
}

.hist-editorial-reader {
  position: relative;
  max-width: 620px;
  margin: 14px auto 0;
  padding-top: 52px;
}

.hist-watermark {
  position: absolute;
  top: 0;
  right: 0;
  color: color-mix(in srgb, var(--region-color) 14%, transparent);
  font-family: var(--fd);
  font-size: clamp(4.8rem, 23vw, 9rem);
  font-weight: 800;
  line-height: .75;
  pointer-events: none;
}

.hist-reading-meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #6e6258;
}

.hist-editorial-reader h1 {
  position: relative;
  max-width: 10ch;
  margin-top: 26px;
}

.hist-reading-progress {
  height: 3px;
  margin: 23px 0 28px;
  background: rgba(41, 35, 31, .12);
}

.hist-reading-progress span {
  display: block;
  height: 100%;
  background: var(--region-color);
}

#p-history.history-paper .hist-prose p {
  max-width: 46ch;
  margin: 0 auto 20px;
  padding: 0 !important;
  color: #413a34 !important;
  font-size: .97rem !important;
  line-height: 1.72 !important;
}

.hist-lede::first-letter {
  float: left;
  margin: .07em .12em 0 0;
  color: var(--region-color);
  font-family: var(--fd);
  font-size: 4.6rem;
  font-weight: 800;
  line-height: .72;
}

.hist-prose blockquote {
  margin: 30px -2px;
  padding: 23px 20px;
  border-radius: 16px;
  background: #211c18;
  color: var(--paper);
  font-family: var(--fd);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.06;
  text-transform: uppercase;
}

.hist-key-sites {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(41, 35, 31, .17);
}

.hist-key-sites > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.hist-key-sites > div span {
  padding: 11px;
  border: 1px solid rgba(41, 35, 31, .14);
  border-radius: 10px;
  color: #51483f;
  font-size: .7rem;
}

.hist-quiz-cta {
  display: flex;
  width: 100%;
  min-height: 82px;
  margin-top: 24px;
  padding: 15px 17px;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 16px;
  background: #211c18;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
}

.hist-quiz-cta span {
  display: flex;
  flex-direction: column;
}

.hist-quiz-cta small {
  color: color-mix(in srgb, var(--region-color) 80%, white);
  font-family: var(--fm);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hist-quiz-cta strong {
  margin-top: 7px;
  color: var(--paper);
  font-size: .77rem;
}

.hist-reader-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 18px;
}

.hist-reader-nav button {
  min-height: 48px;
  border: 1px solid rgba(41, 35, 31, .18);
  border-radius: 999px;
  background: transparent;
  color: #51483f;
  cursor: pointer;
}

/* New destination pages and games. */
.pn.provato-page {
  width: min(720px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 112px !important;
}

.provato-page-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.provato-page-head > .provato-page-title {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.provato-page-head > .provato-streak,
.provato-page-head > .provato-state-badge {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  min-width: 0;
}

.provato-page-title {
  color: var(--tx);
  font-size: clamp(1.7rem, 6vw, 2.5rem);
  line-height: .92;
}

.provato-streak {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(128, 184, 142, .42);
  border-radius: 999px;
  color: var(--train);
  font-family: var(--fm);
  font-size: .65rem;
  white-space: nowrap;
}

.provato-brand-card {
  padding: 18px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(64deg, var(--brand-red), var(--brand-amber));
  color: var(--on-brand);
  cursor: pointer;
}

.provato-brand-card .provato-eyebrow,
.provato-brand-card .provato-meta,
.provato-brand-card .provato-card-title {
  color: var(--on-brand);
}

.provato-brand-card .provato-eyebrow {
  opacity: .88;
}

.provato-brand-card .provato-card-title {
  max-width: 13ch;
  margin-top: 15px;
  font-size: 1.55rem;
  line-height: .92;
}

.provato-progress-steps {
  display: flex;
  gap: 6px;
  margin-top: 17px;
}

.provato-progress-steps span {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(24, 7, 3, .25);
}

.provato-progress-steps span.done {
  background: var(--on-brand);
}

.provato-brand-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
  color: rgba(24, 7, 3, .74);
  font-family: var(--fm);
  font-size: .59rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.provato-session-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
  padding: 15px;
  cursor: pointer;
  color: var(--tx);
}

.provato-session-card:hover,
.provato-session-card:active,
.provato-session-card:focus,
.provato-session-card:focus-visible {
  color: var(--tx);
}

.provato-session-card .provato-row-title {
  color: var(--tx);
}

.provato-session-card .provato-row-sub {
  color: var(--td);
}

.provato-session-card .provato-chevron {
  color: var(--train);
}

.provato-session-card > span:nth-child(2),
.provato-list-row > span:nth-child(2),
.provato-ai-scan > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.provato-session-progress {
  grid-column: 1 / -1;
  display: flex;
  gap: 4px;
  margin-top: 1px;
}

.provato-session-progress span {
  flex: 1;
  height: 3px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--tx) 28%, transparent);
}

.provato-session-progress span.done {
  background: var(--train);
}

.provato-rail-wrap,
.provato-list-wrap {
  margin-top: 24px;
}

.provato-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px 12px;
}

.provato-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0 0 4px;
}

.provato-game-card {
  --game-color: var(--a3);
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 148px;
  padding: 15px;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid color-mix(in srgb, var(--game-color) 38%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--game-color) 13%, transparent);
  color: var(--tx);
  text-align: left;
  cursor: pointer;
}

.provato-game-card svg {
  width: 22px;
  height: 22px;
  color: var(--game-color);
}

.provato-game-title {
  display: block;
  font-size: 1.18rem;
  line-height: .96;
}

.provato-game-best {
  display: block;
  margin-top: 9px;
  color: var(--game-color);
  font-family: var(--fm);
  font-size: .57rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.provato-list {
  border-top: 1px solid rgba(244, 239, 230, .14);
}

.provato-list-row,
.provato-ai-row {
  --row-color: var(--a4);
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px 2px;
  border: 0;
  border-bottom: 1px solid rgba(244, 239, 230, .14);
  background: transparent;
  color: var(--tx);
  text-align: left;
  cursor: pointer;
}

.provato-list-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--row-color);
}

.provato-row-title {
  display: block;
  font-size: .84rem;
  font-weight: 600;
}

.provato-row-sub {
  display: block;
  margin-top: 5px;
  color: var(--tm);
  font-size: .7rem;
  line-height: 1.35;
}

.provato-row-value {
  color: var(--td);
  font-family: var(--fm);
  font-size: .61rem;
  text-align: right;
}

.provato-ai-hero {
  position: relative;
  padding: 21px 18px;
  overflow: hidden;
}

.provato-ai-hero::after {
  content: '✦';
  position: absolute;
  right: -12px;
  bottom: -38px;
  color: rgba(144, 134, 196, .12);
  font-family: Georgia, serif;
  font-size: 9rem;
  line-height: 1;
}

.provato-ai-hero .provato-page-title {
  max-width: 13ch;
  margin-top: 13px;
}

.provato-ai-hero p {
  position: relative;
  z-index: 1;
  max-width: 46ch;
  margin-top: 13px;
  color: var(--td);
  font-size: .8rem;
  line-height: 1.55;
}

.provato-ai-scan {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
  padding: 16px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(64deg, var(--brand-red), var(--brand-amber));
  color: var(--on-brand);
  text-align: left;
  cursor: pointer;
}

.provato-ai-scan .provato-ai-icon {
  --row-color: var(--on-brand);
  border-color: rgba(24, 7, 3, .26);
  background: rgba(24, 7, 3, .12);
  color: var(--on-brand);
}

.provato-ai-scan .provato-row-sub,
.provato-ai-scan .provato-meta {
  color: rgba(24, 7, 3, .72);
}

.provato-ai-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.provato-ai-tile {
  --row-color: var(--a4);
  min-height: 150px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--row-color) 34%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--row-color) 11%, transparent);
  color: var(--tx);
  text-align: left;
  cursor: pointer;
}

.provato-ai-tile .provato-ai-icon {
  width: 40px;
  height: 40px;
}

.provato-ai-tile .provato-row-title {
  margin-top: 17px;
}

.provato-ai-destination {
  display: block;
  margin-top: 10px;
  color: var(--row-color);
  font-size: .58rem;
  line-height: 1.35;
}

.provato-ai-pillars {
  margin-top: 16px;
  border-top: 1px solid rgba(244, 239, 230, .14);
}

.provato-ai-pillar {
  --row-color: var(--a4);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  width: 100%;
  min-height: 94px;
  padding: 15px 2px;
  align-items: start;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid rgba(244, 239, 230, .14);
  background: transparent;
  color: var(--tx);
  text-align: left;
  cursor: pointer;
}

.provato-ai-pillar .provato-row-title {
  color: var(--tx);
  font-size: .96rem;
  text-transform: uppercase;
}

.provato-ai-pillar .provato-row-sub {
  max-width: 46ch;
}

.provato-ai-pillar .provato-chevron {
  align-self: center;
  color: var(--row-color);
}

.provato-ai-pillar.is-roadmap {
  cursor: default;
}

.provato-ai-pillar.is-roadmap .provato-row-title,
.provato-ai-pillar.is-roadmap .provato-chevron {
  color: rgba(244, 239, 230, .58);
}

.provato-ai-number {
  color: var(--row-color);
  font-family: var(--fm);
  font-size: .64rem;
  letter-spacing: .1em;
}

.provato-ai-meter {
  margin-top: 18px;
  padding: 16px;
}

.provato-ai-meter .provato-control-row {
  padding: 0;
}

.provato-meter-track {
  display: block;
  height: 5px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(244, 239, 230, .1);
}

.provato-meter-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #9086c4;
}

.provato-ai-meter p {
  margin-top: 11px;
  color: var(--tm);
  font-size: .66rem;
  line-height: 1.5;
}

.provato-ai-links {
  margin-top: 20px;
}

.provato-ai-links > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.provato-ai-links button {
  display: flex;
  min-height: 48px;
  padding: 9px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 1px solid rgba(144, 134, 196, .28);
  border-radius: 12px;
  background: rgba(144, 134, 196, .08);
  color: var(--tx);
  font-family: var(--fn);
  font-size: .62rem;
  text-align: left;
  cursor: pointer;
}

.provato-ai-links button span {
  color: #9086c4;
}

.provato-ai-roadmap {
  margin-top: 20px;
  padding: 17px;
}

.provato-state-badge {
  display: inline-flex;
  margin-top: 9px;
  padding: 5px 8px;
  border: 1px solid rgba(244, 239, 230, .16);
  border-radius: 999px;
  color: var(--tm);
  font-family: var(--fm);
  font-size: .5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.provato-page-head .provato-state-badge {
  margin-top: 0;
}

.provato-game-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.provato-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tx);
  cursor: pointer;
}

.provato-back svg {
  width: 20px;
  height: 20px;
}

.provato-game-shell {
  --game-color: var(--a3);
  padding: 22px 18px;
  border: 1px solid color-mix(in srgb, var(--game-color) 34%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--game-color) 11%, transparent);
  text-align: center;
}

.provato-game-shell .provato-game-label {
  color: var(--game-color);
}

.provato-game-shell .provato-game-title {
  margin-top: 13px;
  font-size: clamp(1.8rem, 8vw, 3rem);
  line-height: .9;
}

.provato-game-copy {
  max-width: 46ch;
  margin: 13px auto 0;
  color: var(--td);
  font-size: .8rem;
  line-height: 1.6;
}

.provato-game-readout {
  margin-top: 25px;
}

.provato-big-value {
  color: var(--tx);
  font-size: clamp(3.9rem, 18vw, 6.8rem);
  line-height: .82;
}

.provato-big-value small {
  color: var(--game-color);
  font-size: .3em;
}

.provato-value-label {
  margin-top: 11px;
  color: var(--game-color);
}

.provato-wave {
  display: flex;
  height: 52px;
  margin-top: 24px;
  align-items: flex-end;
  gap: 3px;
}

.provato-wave span {
  flex: 1;
  min-height: 5px;
  border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--game-color) 72%, transparent);
}

.provato-primary,
.provato-secondary {
  display: inline-flex;
  min-height: 50px;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: var(--fm);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.provato-primary {
  border: 0;
  background: var(--paper);
  color: var(--on-paper);
}

.provato-primary.brand {
  background: linear-gradient(64deg, var(--brand-red), var(--brand-amber));
  color: var(--on-brand);
}

.provato-secondary {
  border: 1px solid rgba(244, 239, 230, .22);
  background: transparent;
  color: var(--tx);
}

.provato-game-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 20px;
}

.provato-tap-zone {
  width: 100%;
  min-height: 150px;
  margin-top: 18px;
  border: 1px dashed color-mix(in srgb, var(--game-color) 52%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--game-color) 7%, transparent);
  color: var(--game-color);
  font-family: var(--fd);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.015em;
  text-transform: uppercase;
  touch-action: manipulation;
  cursor: pointer;
}

.provato-tap-zone:active,
.provato-tap-zone.pulse {
  background: color-mix(in srgb, var(--game-color) 20%, transparent);
  transform: scale(.99);
}

.provato-control-card,
.provato-result-card {
  margin-top: 14px;
  padding: 16px;
}

.provato-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.provato-control-row + .provato-control-row {
  margin-top: 16px;
}

.provato-control-row label {
  color: var(--td);
  font-size: .76rem;
}

.provato-control-row output {
  color: var(--tx);
  font-family: var(--fm);
  font-size: .78rem;
}

.provato-control-card input[type='range'] {
  width: 100%;
  margin-top: 15px;
  accent-color: var(--game-color);
}

.provato-drift-chart {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  min-height: 94px;
  margin-top: 18px;
  align-items: center;
}

/* Practice Session runner: a focused state built from the real session queue. */
#p-session {
  --pc: var(--train);
}

#p-session.is-session-running > div {
  gap: 0 !important;
}

#p-session.is-session-running #sessBuilder,
#p-session.is-session-running #sessCardTemplates,
#p-session.is-session-running #sessCardSaved,
#p-session.is-session-running #sessCardWeek,
#p-session.is-session-running #sessCardStreak,
#p-session.is-session-running #sessCardTools,
#p-session.is-session-running #sessCardRecent,
#p-session.is-session-running #sessCardSuggestions,
#p-session.is-session-running #sessCardCoach {
  display: none !important;
}

#p-session.is-session-running .provato-session-lead {
  margin: 0 16px !important;
  border: 0 !important;
  background: transparent !important;
}

#p-session.is-session-running .provato-session-lead .panel-inner {
  padding: 0 !important;
}

#p-session.is-session-running .provato-session-lead .panel-inner > div {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#p-session.is-session-running .provato-session-lead .panel-inner > div > :not(#sessRunner) {
  display: none !important;
}

#sessRunner {
  color: var(--tx);
}

.provato-session-run-head {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(244, 239, 230, .13);
}

.provato-session-run-head > button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--td);
  cursor: pointer;
}

.provato-session-run-head svg {
  width: 20px;
  height: 20px;
}

.provato-session-run-head > span {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.provato-session-run-head strong {
  font-family: var(--fd);
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
}

.provato-session-run-head small,
.provato-session-time-meta {
  color: var(--tm);
  font-family: var(--fm);
  font-size: .57rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.provato-session-clock {
  margin-top: 18px;
  padding: 25px 18px 20px;
  border: 1px solid rgba(128, 184, 142, .38);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(40, 87, 56, .82), rgba(23, 52, 35, .9));
  box-shadow: inset 0 1px 0 rgba(229, 255, 235, .1);
  text-align: center;
}

#sessTimer {
  margin-top: 16px;
  color: var(--tx) !important;
  font-family: var(--fd) !important;
  font-size: clamp(5rem, 25vw, 8rem) !important;
  font-weight: 800 !important;
  font-variation-settings: 'wdth' 78;
  line-height: .78 !important;
  letter-spacing: -.055em;
}

#sessSegName {
  display: block;
  margin-top: 17px;
  color: #d9f3df !important;
  font-family: var(--fn) !important;
  font-size: 1rem !important;
  font-weight: 750 !important;
}

#sessProgress {
  display: block;
  margin-top: 7px;
  color: rgba(217, 243, 223, .62) !important;
  font-family: var(--fm) !important;
  font-size: .58rem !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.provato-session-track {
  height: 5px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(217, 243, 223, .16);
}

#sessFill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #a6d7b1 !important;
  transition: width 1s linear;
}

.provato-session-time-meta {
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
  color: rgba(217, 243, 223, .62);
}

.provato-session-actions {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 8px;
  margin-top: 13px;
}

.provato-session-actions > button {
  min-height: 48px;
}

.provato-session-actions > button[hidden] {
  display: none !important;
}

#sessRunner.is-complete .provato-session-actions {
  grid-template-columns: 1fr;
}

.provato-session-actions .danger {
  border-color: rgba(251, 53, 26, .36);
  color: #ff8d7e;
}

.provato-session-tool-action {
  width: 100%;
  min-height: 48px;
  margin-top: 9px;
  border: 1px solid rgba(128, 184, 142, .38);
  border-radius: 999px;
  background: rgba(128, 184, 142, .1);
  color: #a6d7b1;
  font: 700 .72rem var(--fn);
  cursor: pointer;
}

.provato-session-queue {
  margin-top: 26px;
}

#sessRunnerSegments {
  margin-top: 11px;
  border-top: 1px solid rgba(244, 239, 230, .14);
}

.provato-session-segment {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  min-height: 73px;
  padding: 12px 2px;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid rgba(244, 239, 230, .12);
  color: var(--td);
}

.provato-session-segment.current {
  margin-inline: -10px;
  padding-inline: 10px;
  border-left: 2px solid var(--train);
  border-radius: 8px;
  background: rgba(128, 184, 142, .09);
  color: var(--tx);
}

.provato-session-segment.done {
  opacity: .66;
}

#homeRecent .rt-card > span:last-child {
  font-size: .6rem !important;
  white-space: nowrap;
}

.provato-session-index {
  color: var(--train);
  font-family: var(--fm);
  font-size: .61rem;
}

.provato-session-segment > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.provato-session-segment strong {
  overflow: hidden;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provato-session-segment small,
.provato-session-segment em {
  margin-top: 4px;
  color: var(--tm);
  font-family: var(--fm);
  font-size: .54rem;
  font-style: normal;
}

.provato-session-segment em {
  margin: 0;
  color: inherit;
  text-align: right;
}

.provato-drift-bar {
  position: relative;
  height: 82px;
  border-bottom: 1px solid rgba(244, 239, 230, .18);
}

.provato-drift-bar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(244, 239, 230, .18);
}

.provato-drift-bar span {
  position: absolute;
  left: 50%;
  width: 10px;
  height: var(--bar-size, 2px);
  border-radius: 2px;
  background: var(--bar-color, var(--game-color));
  transform: translateX(-50%);
}

.provato-drift-bar.early span { bottom: 50%; }
.provato-drift-bar.late span { top: 50%; }

.provato-drift-bar.missed span {
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(244, 239, 230, .35);
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
}

.provato-pitch-meter {
  position: relative;
  height: 8px;
  margin-top: 25px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--rd), var(--a3) 32%, var(--train) 43%, var(--train) 57%, var(--a3) 68%, var(--rd));
}

.provato-pitch-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 28px;
  border-radius: 2px;
  background: var(--paper);
  transform: translate(-50%, -50%);
  transition: left .08s linear;
}

.provato-note-select {
  display: flex;
  gap: 6px;
  margin-top: 15px;
  overflow-x: auto;
}

.provato-note-select button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(244, 239, 230, .16);
  border-radius: 999px;
  background: transparent;
  color: var(--td);
  cursor: pointer;
}

.provato-note-select button.on {
  border-color: var(--game-color);
  background: color-mix(in srgb, var(--game-color) 18%, transparent);
  color: var(--game-color);
}

.provato-tempo-number {
  width: 100%;
  margin: 18px 0 0;
  border: 0;
  background: transparent;
  color: var(--tx);
  font-family: var(--fd);
  font-size: clamp(4rem, 18vw, 7rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 82;
  line-height: .85;
  text-align: center;
  -moz-appearance: textfield;
}

.provato-tempo-number::-webkit-inner-spin-button,
.provato-tempo-number::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.provato-round-dots {
  display: flex;
  gap: 6px;
}

.provato-round-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(244, 239, 230, .18);
}

.provato-round-dots span.done { background: var(--game-color); }
.provato-round-dots span.current { box-shadow: 0 0 0 2px var(--game-color); }

.provato-live-status {
  min-height: 1.4em;
  margin-top: 13px;
  color: var(--td);
  font-family: var(--fm);
  font-size: .61rem;
  line-height: 1.4;
}

@media (max-height: 900px) {
  .provato-home-section {
    margin-top: 16px;
  }

  #p-home .qs-btn {
    min-height: 108px;
    padding: 13px !important;
  }

  #provatoHomeResume {
    min-height: 74px;
    margin-top: 12px;
    padding-block: 11px;
  }

  .provato-tools-section {
    padding: 10px;
  }

  #p-home .provato-tools-section .rt-card {
    min-height: 76px;
  }

  .provato-theory {
    margin-top: 16px;
    padding: 14px 16px 16px;
  }

  .provato-theory .theory-title {
    margin-top: 10px;
    font-size: 1.36rem !important;
  }

  .provato-theory .theory-body {
    margin-top: 8px;
    font-size: .7rem !important;
    line-height: 1.42 !important;
  }
}

/* Backing Tracks v2 — a compact chart-to-band workspace. */
#p-backingtracks {
  --bt-coral: #d0644f;
  --bt-amber: #ddb53c;
  --bt-violet: #9086c4;
  max-width: 820px;
  padding: 18px 20px 120px;
}

.btv2-hero,
.btv2-composer,
.btv2-status,
.btv2-unavailable {
  border: 1px solid rgba(244, 239, 230, .12);
  border-radius: 22px;
  background: rgba(23, 20, 19, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 18px 52px rgba(0, 0, 0, .16);
}

.btv2-hero {
  position: relative;
  overflow: hidden;
  padding: 28px;
  background: radial-gradient(circle at 88% 12%, rgba(208, 100, 79, .25), transparent 38%), linear-gradient(145deg, rgba(56, 30, 28, .94), rgba(24, 20, 25, .96));
}

.btv2-hero::after {
  content: 'Ⅱ  V  Ⅰ';
  position: absolute;
  top: 8px;
  right: 18px;
  color: rgba(244, 239, 230, .055);
  font-family: var(--fd);
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -.08em;
  pointer-events: none;
}

.btv2-eyebrow {
  color: var(--bt-coral);
  font-family: var(--fm);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.btv2-hero h1,
.btv2-unavailable h1 {
  max-width: 570px;
  margin: 8px 0;
  color: var(--tx);
  font-family: var(--fd);
  font-size: clamp(1.75rem, 5.2vw, 2.7rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.btv2-hero > p:last-of-type,
.btv2-unavailable > p {
  max-width: 610px;
  color: var(--td);
  font-size: .78rem;
  line-height: 1.6;
}

.btv2-progress {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(18px, 1fr) auto minmax(18px, 1fr) auto;
  margin-top: 24px;
  align-items: center;
  gap: 8px;
}

.btv2-progress span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--tm);
  font-size: .62rem;
  font-weight: 750;
}

.btv2-progress b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(244, 239, 230, .2);
  border-radius: 50%;
  font-family: var(--fm);
  font-size: .56rem;
}

.btv2-progress i { height: 1px; background: rgba(244, 239, 230, .14); }
.btv2-progress .is-active { color: var(--tx); }
.btv2-progress .is-active b { border-color: var(--bt-amber); color: var(--bt-amber); box-shadow: 0 0 0 5px rgba(221, 181, 60, .08); }
.btv2-progress .is-done { color: #a8d9bb; }
.btv2-progress .is-done b { border-color: #80b88e; background: rgba(128, 184, 142, .16); }

.btv2-composer { margin-top: 14px; padding: 24px; }
.btv2-composer h2 { margin: 6px 0 18px; color: var(--tx); font-family: var(--fd); font-size: 1.25rem; }
.btv2-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.btv2-presets button {
  min-height: 76px;
  padding: 12px;
  border: 1px solid rgba(244, 239, 230, .13);
  border-radius: 14px;
  background: rgba(244, 239, 230, .035);
  color: var(--tx);
  text-align: left;
  cursor: pointer;
}
.btv2-presets button:hover { border-color: rgba(208, 100, 79, .62); transform: translateY(-1px); }
.btv2-presets button.is-selected { border-color: var(--bt-coral); background: rgba(208, 100, 79, .14); box-shadow: inset 0 -3px 0 rgba(208, 100, 79, .45); }
.btv2-presets span { display: block; font-family: var(--fd); font-size: .78rem; font-weight: 750; }
.btv2-presets small { display: block; margin-top: 7px; color: var(--tm); font-family: var(--fm); font-size: .51rem; }

.btv2-composer label { display: grid; gap: 7px; color: var(--tm); font-family: var(--fm); font-size: .56rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.btv2-instructions { margin-top: 18px; }
.btv2-composer input,
.btv2-composer select,
.btv2-composer textarea {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid rgba(244, 239, 230, .15);
  border-radius: 11px;
  background: rgba(5, 4, 4, .34);
  color: var(--tx);
  font: 500 .75rem/1.4 var(--fm);
  letter-spacing: 0;
  text-transform: none;
}
.btv2-composer input,
.btv2-composer select { padding: 0 11px; }
.btv2-composer textarea { min-height: 84px; padding: 11px; resize: vertical; }
.btv2-composer :disabled { cursor: wait; opacity: .58; }
.btv2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; gap: 12px; }
.btv2-errors { margin: 14px 0 0; padding: 12px 12px 12px 30px; border-radius: 12px; background: rgba(193, 85, 85, .12); color: #e7aaa3; font-size: .7rem; line-height: 1.5; }

.btv2-status { margin-top: 14px; padding: 18px 20px; border-left: 3px solid var(--bt-violet); }
.btv2-status.generating_chart,
.btv2-status.generating_comping { border-left-color: var(--bt-amber); }
.btv2-status.ready { border-left-color: #80b88e; }
.btv2-status.error { border-left-color: #c15555; }
.btv2-status strong { color: var(--tx); font-family: var(--fd); font-size: .9rem; }
.btv2-status > p { margin: 5px 0 0; color: var(--td); font-size: .7rem; line-height: 1.5; }
.btv2-result { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; gap: 8px; }
.btv2-result span { padding: 11px; border: 1px solid rgba(244, 239, 230, .1); border-radius: 11px; color: var(--td); font-size: .68rem; }
.btv2-result span.is-ready { border-color: rgba(128, 184, 142, .36); color: #b9dfc3; }
.btv2-result small { display: block; margin-bottom: 5px; color: var(--tm); font-size: .51rem; letter-spacing: .08em; text-transform: uppercase; }

.btv2-actions { display: flex; margin-top: 14px; flex-wrap: wrap; gap: 9px; }
.btv2-actions button,
.btv2-unavailable button { min-height: 46px; padding: 0 18px; border-radius: 999px; font: 750 .7rem var(--fm); cursor: pointer; }
.btv2-primary { border: 0; background: linear-gradient(110deg, var(--bt-coral), #bd493c); color: #fff; box-shadow: 0 9px 22px rgba(208, 100, 79, .2); }
.btv2-secondary { border: 1px solid rgba(244, 239, 230, .2); background: rgba(244, 239, 230, .06); color: var(--tx); }
.btv2-quiet { border: 0; background: transparent; color: var(--td); }
.btv2-footnote { margin: 14px 4px 0; color: var(--tm); font-size: .58rem; line-height: 1.5; }
.btv2-unavailable { margin-top: 28px; padding: 36px 30px; text-align: center; }
.btv2-unavailable > * { margin-right: auto; margin-left: auto; }
.btv2-stage-mark { display: grid; width: 58px; height: 58px; margin-bottom: 18px; place-items: center; border: 1px solid rgba(208, 100, 79, .45); border-radius: 50%; background: rgba(208, 100, 79, .12); color: var(--bt-coral); font-size: 1.5rem; }

.btv2-presets button:focus-visible,
.btv2-composer input:focus-visible,
.btv2-composer select:focus-visible,
.btv2-composer textarea:focus-visible,
.btv2-actions button:focus-visible,
.btv2-unavailable button:focus-visible { outline: 3px solid rgba(221, 181, 60, .82); outline-offset: 3px; }

@media (min-width: 760px) {
  .shell,
  .provato-page,
  .pn:not(#p-home):not(.provato-page) {
    max-width: 760px;
  }

  #p-home .qs-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #p-home .qs-btn {
    min-height: 138px;
  }

  .provato-ai-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}

@media (max-width: 430px) {
  .shell {
    padding-inline: 16px;
  }

  .hd {
    min-height: 70px;
  }

  .logo-sub,
  #wlb {
    display: none !important;
  }

  .provato-home-title {
    font-size: 2.2rem;
  }

  .provato-page {
    padding-inline: 16px;
  }

  #p-backingtracks { padding-inline: 12px; }
  .btv2-hero,
  .btv2-composer { padding: 20px 16px; }
  .btv2-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btv2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btv2-result { grid-template-columns: 1fr; }
  .btv2-progress { grid-template-columns: 1fr; gap: 6px; }
  .btv2-progress i { display: none; }
  .btv2-progress span { min-height: 32px; }
  .btv2-actions { display: grid; }
  .btv2-actions button { width: 100%; }

  #homeStatsCard .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 350px) {
  .title-wave-text {
    font-size: 1rem !important;
  }

  .provato-header-controls {
    gap: 6px;
  }

  .title-wave-mode {
    padding-inline: 7px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Coach 2.0 — one measured take, then interpretation. */
.coach-experience{--coach-accent:#9086c4;max-width:760px;margin:0 auto;padding:20px 18px 118px;color:var(--tx);font-family:var(--fm)}
.coach-experience [hidden]{display:none!important}
.coach-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:4px 0 18px}
.coach-head h1{margin:3px 0 5px;font-family:var(--fd);font-size:clamp(2.35rem,9vw,4.2rem);font-weight:700;line-height:.92;letter-spacing:-.045em;color:#f4efe6}
.coach-head p{max-width:500px;margin:0;color:var(--td);font-size:.78rem;line-height:1.55}
.coach-limit{flex:0 0 auto;border:1px solid color-mix(in srgb,var(--coach-accent) 55%,transparent);border-radius:999px;padding:7px 9px;color:color-mix(in srgb,var(--coach-accent) 80%,#fff);font:700 .58rem/1 var(--fm);letter-spacing:.06em;text-transform:uppercase}
.coach-status{margin:0 0 12px;border-left:2px solid var(--coach-accent);padding:9px 11px;background:color-mix(in srgb,var(--coach-accent) 8%,transparent);color:var(--td);font-size:.68rem;line-height:1.45}
.coach-status[data-tone="live"]{color:#f4efe6}.coach-status[data-tone="error"]{border-color:var(--rd);color:var(--rd)}.coach-status[data-tone="warning"]{border-color:var(--a3)}.coach-status[data-tone="success"]{border-color:var(--gn)}
.coach-setup,.coach-capture,.coach-ribbon-card,.coach-interpretation,.coach-practice{border:1px solid color-mix(in srgb,var(--coach-accent) 24%,var(--bd));border-radius:16px;background:color-mix(in srgb,#181b21 94%,var(--coach-accent));box-shadow:0 16px 32px rgba(0,0,0,.16)}
.coach-setup{padding:16px}.coach-mode{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:9px 0 12px}
.coach-mode button{min-height:64px;border:1px solid var(--bd);border-radius:12px;background:var(--s2);color:var(--tx);font:700 .72rem/1.25 var(--fn);cursor:pointer;text-align:left;padding:11px}
.coach-mode button span{display:block;margin-top:4px;color:var(--tm);font:500 .55rem/1.3 var(--fm)}
.coach-mode button.on{border-color:var(--coach-accent);background:color-mix(in srgb,var(--coach-accent) 13%,var(--s2));box-shadow:inset 0 -2px 0 var(--coach-accent)}
.coach-settings{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.coach-settings[hidden]{display:none}
.coach-settings label,.coach-target{display:flex;align-items:center;gap:8px;border:1px solid var(--bd);border-radius:10px;padding:9px 10px;color:var(--tm);font-size:.6rem;text-transform:uppercase;letter-spacing:.05em}
.coach-settings input,.coach-settings select,.coach-target select{min-width:0;flex:1;border:0;background:transparent;color:var(--tx);font:700 .75rem var(--fm);outline:none}.coach-settings option,.coach-target option{background:#181b21}.coach-settings label span{font-size:.52rem}
.coach-target{margin-top:8px}.coach-context,.coach-reference-copy,.coach-privacy{margin:10px 2px 0;color:var(--tm);font-size:.58rem;line-height:1.5}.coach-reference-copy{color:var(--td)}
.coach-record-button,.coach-capture-actions button:first-child{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;margin-top:14px;border:1px solid var(--coach-accent);border-radius:12px;background:var(--coach-accent);color:#111015;font:800 .76rem var(--fn);cursor:pointer}
.coach-record-button span{width:11px;height:11px;border-radius:50%;background:#111015}
.coach-capture{padding:28px 16px;text-align:center}.coach-capture-disc{width:164px;height:164px;margin:4px auto 22px;border:1px solid color-mix(in srgb,var(--coach-accent) 50%,transparent);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 14px color-mix(in srgb,var(--coach-accent) 5%,transparent)}
.coach-capture-disc span{width:13px;height:13px;border-radius:50%;background:var(--rd);box-shadow:0 0 0 6px color-mix(in srgb,var(--rd) 16%,transparent)}.coach-capture-disc strong{margin-top:15px;font:700 2.2rem/1 var(--fd);color:#f4efe6}.coach-capture-disc small{margin-top:5px;color:var(--tm);font-size:.55rem;text-transform:uppercase;letter-spacing:.12em}
.coach-capture-track{height:4px;border-radius:4px;background:var(--s2);overflow:hidden}.coach-capture-track span{display:block;width:0;height:100%;background:var(--coach-accent);transition:width .12s linear}
.coach-capture-actions{display:grid;grid-template-columns:2fr 1fr;gap:8px;margin-top:16px}.coach-capture-actions button{min-height:44px;border:1px solid var(--bd);border-radius:10px;background:transparent;color:var(--tx);font:700 .67rem var(--fn);cursor:pointer}.coach-capture-actions button:first-child{margin:0}
.coach-scorecard{display:grid;gap:9px}.coach-ribbon-card{padding:12px 14px 8px;border-color:color-mix(in srgb,var(--coach-accent) 38%,var(--bd));overflow:hidden}.coach-section-kicker{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--tm);font-size:.52rem;text-transform:uppercase;letter-spacing:.09em}.coach-section-kicker h2{margin:0;color:var(--tx);font:800 .72rem var(--fn);text-transform:none;letter-spacing:0}.coach-ribbon{display:block;width:100%;height:76px;margin-top:4px;overflow:visible}.coach-ribbon-center{fill:none;stroke:color-mix(in srgb,var(--tm) 35%,transparent);stroke-width:.35;stroke-dasharray:2 2}.coach-ribbon #coachRibbonPath{fill:none;stroke:var(--coach-accent);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.coach-score-row{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:start;padding:13px 4px;border-bottom:1px solid var(--bd)}.coach-score-row>span{color:var(--tm);font:700 .57rem var(--fm);letter-spacing:.08em;text-transform:uppercase}.coach-score-row div{display:grid;gap:4px}.coach-score-row strong{color:#f4efe6;font:700 .84rem/1.25 var(--fn);text-transform:capitalize}.coach-score-row small{color:var(--td);font-size:.6rem;line-height:1.45}
.coach-caveats{margin:0 3px;color:var(--tm);font-size:.58rem;line-height:1.5}.coach-caveats summary{cursor:pointer;color:var(--td)}.coach-caveats p{margin:7px 0}
.coach-interpretation,.coach-practice{padding:15px;margin-top:7px}.coach-interpretation p{min-height:44px;margin:13px 0 0;color:var(--td);font:.7rem/1.65 var(--fm);white-space:pre-wrap}.coach-interpretation button,.coach-secondary{min-height:40px;margin-top:10px;border:1px solid var(--bd);border-radius:9px;background:transparent;color:var(--tx);font:700 .62rem var(--fm);cursor:pointer}
#coachPracticeActions{display:grid;gap:8px;margin-top:12px}.coach-practice-action{display:grid;gap:3px;width:100%;min-height:54px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--coach-accent) 45%,var(--bd));border-radius:10px;background:color-mix(in srgb,var(--coach-accent) 7%,transparent);color:var(--tx);text-align:left;cursor:pointer}.coach-practice-action strong{font:750 .68rem var(--fn)}.coach-practice-action span,.coach-empty-action{color:var(--tm);font:.57rem/1.4 var(--fm)}.coach-empty-action{margin:0}.coach-secondary{width:100%;margin-top:4px}
.coach-experience button:focus-visible,.coach-experience select:focus-visible,.coach-experience input:focus-visible{outline:2px solid #f4efe6;outline-offset:2px}

@media (min-width:760px){.coach-scorecard{grid-template-columns:1fr 1fr}.coach-ribbon-card,.coach-caveats,.coach-interpretation,.coach-practice,.coach-secondary{grid-column:1/-1}.coach-score-row{grid-template-columns:104px 1fr}}
@media (max-width:390px){.coach-experience{padding-inline:14px}.coach-head p{font-size:.7rem}.coach-limit{padding:6px 7px}.coach-mode{grid-template-columns:1fr}.coach-settings{grid-template-columns:1fr}.coach-score-row{grid-template-columns:76px 1fr}}

/* Whole-app audit pass: keep the visual identity while making the shell readable. */
.provato-mode-control{display:flex;flex-direction:column;align-items:center;gap:3px}
.provato-mode-description{color:var(--td);font:500 .65rem/1.15 var(--fm);letter-spacing:.025em;white-space:nowrap}
.provato-mode-switch{min-height:44px;padding:4px}
.title-wave-mode{min-height:34px;padding-inline:12px!important;font-size:.62rem!important}
.hd .ib{width:44px;height:44px}

.provato-home-kicker,
.provato-section-label,
.provato-eyebrow,
.provato-meta,
.provato-status,
.provato-page-tag,
.provato-game-label,
.provato-value-label{font-size:.68rem;line-height:1.35;color:var(--td)}
.provato-row-sub,
.provato-card-copy,
.provato-page-subtitle{color:var(--td)!important;font-size:.7rem!important;line-height:1.45}
#p-home .provato-quick-meta,
#p-home .provato-game-best,
#homeRecent .rt-card>span:last-child{font-size:.66rem!important;line-height:1.35!important}

.bn{border-top:1px solid rgba(244,239,230,.16);background:rgba(15,16,18,.97);box-shadow:0 -12px 30px rgba(0,0,0,.2)}
.bn-cats{gap:3px;padding-top:6px}
.bn-cats button{min-width:0;min-height:62px;padding:7px 3px 6px;font-size:.7rem;line-height:1.1;letter-spacing:.025em;text-shadow:none!important}
.bn-cats button svg{width:25px;height:25px;opacity:.9}
.bn-cats button:not(.on){color:color-mix(in srgb,var(--tab-color,var(--tx)) 68%,#f4efe6 18%)!important}
.bn-cats button.on{background:rgba(244,239,230,.09);color:var(--tab-color,var(--tx))!important}
.bn-cats button.on svg{opacity:1;filter:drop-shadow(0 0 7px currentColor)}
.bn-workspace-context{display:none}
body[data-provato-mode="studio"] .bn-workspace-context{position:absolute;top:-27px;left:max(12px,env(safe-area-inset-left));display:inline-flex;min-height:27px;align-items:center;padding:4px 10px;border:1px solid rgba(244,239,230,.2);border-bottom:0;border-radius:9px 9px 0 0;background:rgba(15,16,18,.97);color:rgba(244,239,230,.78);font:600 .62rem/1 var(--fm);letter-spacing:.08em;text-transform:uppercase}

#p-home .provato-tools-section .rt-row:empty{display:flex;min-height:72px;align-items:center;justify-content:center;border:1px dashed rgba(244,239,230,.2);border-radius:12px}
#p-home .provato-tools-section .rt-row:empty::before{content:'Open a practice tool and it will stay within reach here.';max-width:30ch;color:var(--td);font:.68rem/1.5 var(--fm);text-align:center}
#p-home>.provato-home-section,
#p-home>.provato-weekly-report,
#p-home>.provato-theory,
#p-home>#provatoHomeResume,
#p-home>#homeSetlistCard,
#p-home>#homeStatsCard,
#p-home>#emailCapCard{flex:none}
.provato-rail{width:100%;max-width:100%;min-width:0}
.provato-rail>.provato-game-card{min-width:0;overflow:hidden}

/* Solo weekly report: factual aggregates remain visually subordinate to Home's
   resumable practice and quick-start controls. */
.provato-weekly-report{margin-top:18px;padding:15px 16px;display:grid;gap:11px}
.provato-weekly-report[hidden]{display:none}
.weekly-report-head{display:flex;align-items:start;justify-content:space-between;gap:12px}
.weekly-report-head h2{margin:3px 0 0;font-family:var(--fd);font-size:1.05rem;color:var(--tx)}
.weekly-report-range,.weekly-report-note,.weekly-report-ai{font:500 .64rem/1.45 var(--fm);color:var(--td)}
.weekly-report-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.weekly-report-fact{min-width:0;padding:9px 8px;border:1px solid rgba(244,239,230,.13);border-radius:10px;background:rgba(0,0,0,.12)}
.weekly-report-fact strong{display:block;overflow-wrap:anywhere;font-family:var(--fd);font-size:.88rem;color:var(--tx)}
.weekly-report-fact span{display:block;margin-top:3px;font:500 .57rem/1.3 var(--fm);color:var(--td);text-transform:uppercase;letter-spacing:.05em}
.weekly-report-measurement{padding-top:10px;border-top:1px solid rgba(244,239,230,.13)}
.weekly-report-measurement strong{display:block;font:700 .68rem/1.35 var(--fm);color:var(--tx)}
.weekly-report-measurement span{display:block;margin-top:3px;font:500 .62rem/1.4 var(--fm);color:var(--td)}
.weekly-report-focus{display:grid;gap:8px;padding-top:10px;border-top:1px solid rgba(244,239,230,.13)}
.weekly-report-focus-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.weekly-report-focus-head strong{font:700 .72rem/1.3 var(--fm);color:var(--tx)}
.weekly-report-focus-head span{font:500 .58rem/1.35 var(--fm);color:var(--td);text-align:right}
.weekly-report-focus-list{display:grid;gap:7px}
.weekly-report-focus-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 9px;padding:10px;border:1px solid rgba(128,184,142,.28);border-radius:10px;background:rgba(128,184,142,.07)}
.weekly-report-focus-tool{grid-column:1/-1;font:700 .57rem/1.2 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--train)}
.weekly-report-focus-card strong{min-width:0;overflow-wrap:anywhere;font:700 .68rem/1.35 var(--fm);color:var(--tx)}
.weekly-report-focus-card>span{min-width:0;overflow-wrap:anywhere;font:500 .6rem/1.35 var(--fm);color:var(--td)}
.weekly-report-focus-card button{grid-column:2;grid-row:2 / span 2;align-self:center;min-height:38px;border:1px solid rgba(128,184,142,.7);border-radius:999px;background:transparent;color:var(--tx);padding:7px 10px;font:700 .58rem/1.1 var(--fm);cursor:pointer}
.practice-focus-setup{display:grid;gap:4px;margin:16px 16px 0;padding:11px 13px;border:1px solid rgba(128,184,142,.38);border-radius:11px;background:rgba(128,184,142,.1)}
.practice-focus-setup strong{font:700 .62rem/1.2 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--train)}
.practice-focus-setup span{font:500 .66rem/1.4 var(--fm);color:var(--tx)}
.weekly-report-action{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px;border-radius:10px;background:rgba(128,184,142,.09)}
.weekly-report-action span{font:500 .65rem/1.4 var(--fm);color:var(--td)}
.weekly-report-action button,.weekly-report-ai-button{min-height:40px;flex:none;border:1px solid rgba(128,184,142,.7);border-radius:999px;background:transparent;color:var(--tx);padding:8px 12px;font:700 .61rem/1 var(--fm);cursor:pointer}
.weekly-report-ai-button:disabled{opacity:.6;cursor:wait}
@media (max-width:340px){.weekly-report-facts{grid-template-columns:1fr}.weekly-report-action{align-items:flex-start;flex-direction:column}.weekly-report-action button{width:100%}.weekly-report-focus-card{grid-template-columns:1fr}.weekly-report-focus-card button{grid-column:1;grid-row:auto;width:100%}.weekly-report-focus-head{align-items:flex-start;flex-direction:column}.weekly-report-focus-head span{text-align:left}}

.mo{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.md{max-width:min(100%,560px);max-height:calc(100dvh - 20px);overflow-y:auto;overscroll-behavior:contain}
.tool-drawer{max-height:min(70dvh,calc(100dvh - 94px));padding-bottom:calc(24px + env(safe-area-inset-bottom))}
#setm .account-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
#setm .account-actions .ch{min-width:0;min-height:44px;padding:8px 6px;white-space:normal;line-height:1.25}
#setm>.md>button:first-child{width:44px!important;height:44px!important}

@media (max-width:600px){
  #setm .account-summary,
  #setm .account-detail,
  #setm .account-notice,
  #setm .account-usage{overflow-wrap:anywhere}
}

@media (min-width:1024px){
  .shell{max-width:var(--provato-frame-max,1100px);padding-inline:28px}
  .provato-page,.pn.provato-page,.pn:not(#p-home):not(.provato-page){max-width:var(--provato-frame-max,1100px)}
  #p-home .provato-tools-section .rt-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
  #p-home .rt-card{width:100%;min-width:0;min-height:112px}
  .tool-drawer{max-width:var(--provato-frame-max,1100px)}
}

@media (max-width:430px){
  .provato-mode-description{font-size:.625rem}
  .title-wave-mode{padding-inline:8px!important}
}

@media (max-width:340px){
  .shell{padding-inline:12px}
  .hd{gap:5px}
  .provato-header-controls{gap:4px}
  .title-wave-mode{padding-inline:6px!important}
  .bn-cats{gap:1px;padding-inline:3px}
  .bn-cats button{font-size:.7rem;padding-inline:1px}
  .provato-rail{gap:7px}
  .provato-game-card{padding:12px}
}

/* Desktop containment uses Studio's 900px breakpoint and a 1100px frame so
   the fixed nav, Home shell, and destination pages share one centered stage. */
@media (min-width: 900px) {
  :root {
    --provato-frame-max: 1100px;
  }

  html {
    background: #0d0c0b;
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  body.provato-reskin {
    background:
      radial-gradient(ellipse 70% 90% at 50% 40%, transparent 42%, rgba(0, 0, 0, .34) 100%),
      radial-gradient(ellipse 120% 60% at 78% -8%, rgba(251, 53, 26, .18) 0%, transparent 62%),
      radial-gradient(ellipse 110% 50% at 20% 104%, rgba(252, 195, 3, .10) 0%, transparent 66%),
      linear-gradient(180deg, #221e1b 0%, #161412 48%, #0d0c0b 100%);
    background-attachment: fixed;
  }

  .shell,
  .pn.provato-page,
  .provato-page,
  .pn:not(#p-home):not(.provato-page) {
    width: min(var(--provato-frame-max), 100%);
    max-width: var(--provato-frame-max);
    margin-inline: auto;
    box-shadow:
      0 0 0 1px rgba(244, 239, 230, .08),
      28px 0 64px rgba(0, 0, 0, .28),
      -28px 0 64px rgba(0, 0, 0, .28);
  }

  .shell {
    padding-inline: 28px;
  }

  .bn {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: min(var(--provato-frame-max), 100%) !important;
    max-width: var(--provato-frame-max) !important;
    margin-inline: auto !important;
    border-radius: 16px 16px 0 0;
    border-left: 1px solid rgba(244, 239, 230, .12);
    border-right: 1px solid rgba(244, 239, 230, .12);
  }

  .bn-cats {
    max-width: 800px;
  }

  .tool-drawer {
    width: min(var(--provato-frame-max), 100%);
    max-width: var(--provato-frame-max);
  }

  #globalBackBtn {
    left: max(16px, calc(50% - min(var(--provato-frame-max), 100%) / 2 + 16px)) !important;
  }
}