@font-face { font-family: 'DM Sans'; src: url('/assets/2b9219faf48f5c6b/fonts/dm-sans.ttf?v=8cd08d97e89c') format('truetype'); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Libre Caslon Display'; src: url('/assets/2b9219faf48f5c6b/fonts/libre-caslon-display.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #f4efe5;
  --white: #fffdf8;
  --ink: #203a31;
  --muted: #5e685e;
  --line: #d8d7c9;
  --pine: #123f34;
  --green: #155d48;
  --leaf: #dfeae1;
  --gold: #e4b658;
  --red: #ac413d;
  --surface-soft: #ece6d6;
  --surface-hover: #e6eadf;
  --control-line: #aeb9a9;
  --on-pine: #f4f3e9;
  --on-pine-muted: #bed0c4;
  --pine-raised: #1b4b3e;
  --pine-line: #436959;
  --brass-ink: #302a1c;
  --brass-hover: #d8a447;
  --brass-soft: #f5e9c9;
  --brass-line: #bb924b;
  --brass-muted: #796027;
  --coach: #ebddbe;
  --coach-ink: #37412e;
  --coach-muted: #586047;
  --coach-line: #c6b38a;
  --felt-edge: #093e33;
  --felt-ink: #eff4df;
  --felt-muted: #c3d4bb;
  --felt-brass: #ddd0a1;
  --rail: #cfb577;
  --card-paper: #fffcf2;
  --success: #235e45;
  --success-soft: #e2efe4;
  --success-line: #8cae95;
  --error: #973c34;
  --error-soft: #f8e6df;
  --error-line: #cc9183;
  --radius: 15px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; }
button, a, input, select { outline-offset: 4px; }
:focus-visible { outline: 2px solid #648345; }
button { touch-action: manipulation; }
svg { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: 224px;
  display: flex;
  flex-direction: column;
  padding: 33px 20px 23px;
  background: #fbfcf8;
  border-right: 1px solid var(--line);
}
.brand { display: flex; gap: 9px; align-items: center; padding: 0 3px; text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 39px;
  height: 43px;
  flex: 0 0 39px;
  border-radius: 10px;
  background: var(--pine);
  color: #e8ecd9;
  font-size: 28px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%);
}
.brand-mark svg { width: 23px; height: 23px; }
.brand-name { display: block; font-size: 20px; font-weight: 650; letter-spacing: -.8px; white-space: nowrap; }
.brand-period { color: #92a56f; }
.brand-caption { display: block; margin-top: 3px; font-size: 7px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: #929a8d; white-space: nowrap; }
.nav-label { margin: 56px 13px 15px; color: #93998e; text-transform: uppercase; letter-spacing: 1.5px; font-size: 9px; font-weight: 650; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 13px 14px;
  margin-bottom: 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #788174;
  text-align: left;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  transition: background .16s ease, color .16s ease;
}
.nav-item svg { width: 17px; height: 17px; }
.nav-item > span { white-space: nowrap; }
.nav-item:hover { background: #eff2e9; color: var(--pine); }
.nav-item.active, .nav-item[aria-current="page"] { color: #2c4934; background: #e9eedf; font-weight: 650; }
.nav-badge { margin-left: auto; border-radius: 4px; background: #d7e1c4; padding: 2px 4px; font-size: 8px; }
.sidebar-bottom { margin-top: auto; padding: 28px 7px 0; }
.rules-summary { padding: 17px 13px; border: 1px solid #e0e5d8; border-radius: 9px; background: #f5f7ef; }
.rules-summary-title { display: flex; gap: 7px; align-items: center; margin-bottom: 13px; color: #4d6147; font-size: 10px; font-weight: 650; }
.rules-summary-title svg { width: 13px; height: 13px; }
.rule-line { display: flex; justify-content: space-between; align-items: center; gap: 7px; margin-top: 10px; font-size: 9px; color: #7d8675; line-height: 1.3; }
.rule-line strong { font-weight: 500; color: #5e7053; white-space: nowrap; }
.rules-summary > .text-button { display: inline-flex; align-items: center; gap: 5px; margin-top: 18px; font-size: 9px; }
.rules-summary > .text-button svg { width: 12px; height: 12px; }
.rule-dot { width: 3px; height: 3px; flex: 0 0 3px; border-radius: 50%; background: #9aa78e; }
.local-note { display: flex; align-items: center; gap: 6px; margin-top: 23px; color: #a0a69a; font-size: 9px; white-space: nowrap; }
.local-note svg { width: 12px; height: 12px; }
.workspace { min-height: 100vh; margin-left: 224px; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 72px;
  gap: 16px;
  padding: 0 39px;
  border-bottom: 1px solid var(--line);
  background: rgb(255 255 255 / 26%);
}
.breadcrumbs { display: flex; align-items: center; gap: 11px; font-size: 10px; color: #94988f; }
.breadcrumbs svg { width: 12px; height: 12px; }
.breadcrumbs strong, .breadcrumbs span:last-child { color: #4e594c; font-weight: 500; }
.topbar-actions { display: flex; align-items: center; gap: 20px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; color: #84916f; font-size: 9px; font-weight: 500; white-space: nowrap; }
.status-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #93a66d; }
.status-pill > .rule-dot { display: none; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #54604d;
  font-size: 11px;
  font-weight: 550;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.button svg { width: 14px; height: 14px; }
.button:hover { background: #f0f3e9; border-color: #b7c4a6; }
.button:active { transform: translateY(1px); }
.button-primary { background: var(--pine); color: #f9faf6; border-color: var(--pine); }
.button-primary:hover { background: #275240; border-color: #275240; }
.button-subtle { background: transparent; }
.button-danger { color: #a55047; border-color: #e7ccc6; }
.button-danger:hover { background: #faf0ed; border-color: #c99b91; }
.text-button { padding: 0; border: 0; color: #5d7150; background: transparent; text-decoration: none; font-size: 11px; font-weight: 600; }
.text-button:hover { color: #213e2e; text-decoration: underline; text-underline-offset: 3px; }
.icon-button, .close-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #7a8475; }
.icon-button:hover, .close-button:hover { background: #edf1e7; color: var(--pine); }
.icon-button svg, .close-button svg { width: 17px; height: 17px; }
.main-content { max-width: 1430px; margin: 0 auto; padding: 30px 39px 0; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 26px; }
.eyebrow { color: #81916d; text-transform: uppercase; font-weight: 650; letter-spacing: 1.7px; font-size: 8px; line-height: 1.5; }
.hero .eyebrow { margin-bottom: 8px; }
h1 { font-family: 'Libre Caslon Display', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(34px, 3.2vw, 46px); letter-spacing: -.95px; line-height: 1.12; }
.subtitle { margin-top: 9px; color: #899080; font-size: 12px; line-height: 1.6; }
.hero-stats { display: flex; align-items: center; gap: 26px; padding-bottom: 3px; }
.stat { position: relative; text-align: center; min-width: 51px; }
.stat + .stat::before { content: ''; position: absolute; width: 1px; height: 30px; left: -14px; top: 4px; background: var(--line); }
.stat-value { display: block; color: #34472f; font-size: 25px; font-weight: 500; letter-spacing: -1px; line-height: 1.25; }
.stat-value svg { width: 18px; height: 18px; color: #b2a579; }
.stat-value small { font-size: 15px; }
.stat-flame { display: inline-block; margin-left: 5px; }
.stat-label { display: block; margin-top: 5px; color: #8d9485; font-size: 8px; white-space: nowrap; }
.practice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 263px; align-items: start; gap: 23px; }
.practice-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #e1e4d9; border-radius: 12px; box-shadow: 0 5px 15px rgb(40 51 32 / 2%); }
.practice-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 17px; min-height: 54px; border-bottom: 1px solid #e4e8dd; }
.filter-tabs { display: flex; align-items: center; gap: 3px; min-width: 0; }
.filter-tab { min-height: 30px; padding: 7px 9px; border: 0; border-radius: 5px; background: transparent; color: #8a9380; font-size: 10px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.filter-count { display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 3px; background: #d6e1c8; color: #577741; font-size: 8px; }
.filter-tab:hover { background: #f3f5ee; color: #3a583d; }
.filter-tab.active { background: #eaf0df; color: #4c6540; font-weight: 650; }
.hand-counter { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #9ca18f; white-space: nowrap; }
.hand-counter strong { color: #647154; font-weight: 500; }
.felt-table {
  position: relative;
  display: flex;
  min-height: 343px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 18px;
  isolation: isolate;
  color: #f2f3df;
  background: radial-gradient(ellipse at 50% 52%, #295541 0%, #1e4939 38%, #163d31 80%, #153a2f 100%);
}
.felt-table::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 21px 30px;
  border: 1px solid rgb(189 207 152 / 9%);
  border-radius: 46% / 49%;
  box-shadow: 0 0 0 7px rgb(187 204 151 / 2%), 0 0 0 8px rgb(189 207 152 / 6%);
  pointer-events: none;
}
.felt-table::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .15;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.table-watermark { position: absolute; left: 28px; bottom: 21px; color: rgb(220 232 199 / 13%); font-family: Georgia, serif; font-size: 11px; letter-spacing: 3px; }
.table-watermark span { display: block; margin-top: 5px; font-family: 'DM Sans', sans-serif; font-size: 5px; letter-spacing: 1.7px; }
.dealer-zone, .player-zone { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.table-label { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 9px; color: #a2b29b; font-size: 8px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.table-label strong { font-weight: 500; color: #d7e2c5; font-size: 10px; }
.cards { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 113px; }
.card {
  position: relative;
  width: 79px;
  height: 111px;
  flex: 0 0 79px;
  border-radius: 7px;
  border: 1px solid #dfe2d7;
  background: #fbfcf4;
  color: #253b32;
  box-shadow: 0 3px 4px rgb(5 25 15 / 13%), 0 10px 17px rgb(5 25 15 / 10%);
  font-family: Georgia, 'Times New Roman', serif;
  user-select: none;
  animation: deal-in .23s ease-out both;
}
.card:nth-child(2) { animation-delay: .04s; }
.card:nth-child(3) { animation-delay: .08s; }
.card-red { color: #bf554b; }
.card-black { color: #253b32; }
.card-corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .94; font-size: 20px; font-weight: 400; }
.card-corner.top { top: 9px; left: 8px; }
.card-corner.bottom { bottom: 9px; right: 8px; transform: rotate(180deg); }
.card-corner span + span, .card-corner .suit, .card-corner small { font-size: 14px; line-height: 1.25; }
.card-suit { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 3px; font-size: 39px; }
.card.card-back { display: grid; place-items: center; border: 4px solid #e3e8d8; background-color: #4c7058; background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgb(220 232 204 / 16%) 4px, rgb(220 232 204 / 16%) 5px), repeating-linear-gradient(-45deg, transparent, transparent 4px, rgb(220 232 204 / 16%) 4px, rgb(220 232 204 / 16%) 5px); box-shadow: 0 3px 4px rgb(5 25 15 / 13%), 0 10px 17px rgb(5 25 15 / 10%), inset 0 0 0 2px #2c5241; }
.back-emblem { display: grid; place-items: center; width: 29px; height: 38px; border: 1px solid #9dab8b; background: #47684f; color: #b5c09f; font-size: 24px; }
.table-center { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 13px 0; }
.table-rule { color: #a1b486; font-size: 6px; letter-spacing: 2px; text-transform: uppercase; opacity: .62; }
.table-divider { width: 37px; height: 1px; position: relative; background: linear-gradient(to right, transparent, #7e9367, transparent); opacity: .45; }
.table-divider::after { content: '◆'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 6px; background: #25513e; color: #83926e; font-size: 5px; }
.player-zone .table-label { margin-top: 10px; margin-bottom: 0; }
.hand-total { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; min-height: 18px; padding: 2px 5px; border-radius: 3px; background: rgb(214 227 178 / 12%); color: #d7e3b8; font-size: 9px; letter-spacing: 0; font-weight: 600; }
.decision-panel { padding: 17px 22px 18px; }
.decision-prompt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 17px; color: #47513e; font-size: 11px; font-weight: 550; }
.keyboard-hint { display: flex; align-items: center; gap: 5px; color: #9ca48f; font-size: 8px; font-weight: 400; }
.keyboard-hint svg { width: 11px; height: 11px; }
.action-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.action-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 68px; padding: 10px 4px; border: 1px solid #dee3d4; border-radius: 7px; background: #fdfefa; color: #46603a; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.action-button:hover:not(:disabled) { border-color: #9db389; background: #eff4e5; transform: translateY(-2px); box-shadow: 0 4px 8px rgb(69 97 44 / 6%); }
.action-button:active:not(:disabled) { transform: translateY(0); }
.action-icon { display: flex; align-items: center; height: 18px; font-size: 19px; line-height: 1; }
.action-icon svg { width: 17px; height: 17px; }
.action-name { font-size: 11px; font-weight: 600; }
kbd { font-family: inherit; font-size: 8px; font-weight: 450; }
.action-button kbd { position: absolute; top: 5px; right: 6px; color: #a6af98; }
.action-button:disabled { opacity: .35; }
.action-button.chosen, .action-button.selected { border-color: #718d55; background: #eaf1dd; }
.action-button.is-correct, .action-button.correct { border-color: #7b995a; background: #eaf2dc; opacity: 1; }
.action-button.is-incorrect, .action-button.incorrect { border-color: #c58479; background: #faf0eb; color: #a46657; opacity: 1; }
.round-feedback { display: flex; align-items: flex-start; gap: 10px; padding: 15px 12px; margin-top: 17px; border: 1px solid #dce7d1; border-radius: 7px; background: #f2f6ea; color: #4b633a; animation: feedback-in .18s ease-out; }
.round-feedback.is-incorrect { background: #fbf1ed; border-color: #efdcd3; color: #a05e4f; }
.round-feedback.is-assisted { background: #f8f5e9; border-color: #e8e1c7; color: #82794c; }
.feedback-symbol { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgb(96 132 67 / 10%); flex: 0 0 20px; font-size: 12px; }
.feedback-symbol svg { width: 13px; height: 13px; }
.feedback-text { flex: 1; min-width: 0; }
.feedback-text strong { display: block; font-size: 10px; line-height: 1.8; }
.feedback-text p { margin-top: 4px; font-size: 10px; line-height: 1.65; color: #76866b; }
.is-incorrect .feedback-text p { color: #9b7d70; }
.is-assisted .feedback-text p { color: #8d876d; }
.next-button { display: flex; align-items: center; gap: 5px; flex-shrink: 0; min-height: 30px; margin-left: auto; padding: 7px 9px; border: 1px solid #c6d5b5; border-radius: 5px; background: #fbfdf7; color: #4a6737; font-size: 9px; font-weight: 600; }
.next-button:hover { background: #e4edd6; }
.next-button svg { width: 12px; height: 12px; }
.coach-column { display: flex; flex-direction: column; gap: 17px; }
.coach-card { overflow: hidden; padding: 24px 22px 0; border: 1px solid #e1e5d8; border-radius: 11px; background: #eef2e5; }
.coach-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: 17px; border: 1px solid #d9e2cc; border-radius: 8px; color: #6e8453; background: #e6edd9; }
.coach-icon svg { width: 18px; height: 18px; }
.coach-card .eyebrow { font-size: 7px; letter-spacing: 1.4px; }
.coach-card h2 { margin-top: 8px; font-family: 'Libre Caslon Display', Georgia, 'Times New Roman', serif; font-size: 27px; line-height: 1.16; font-weight: 400; letter-spacing: -.3px; }
.coach-body { margin-top: 15px; color: #76826a; font-size: 13px; line-height: 1.7; }
.coach-tip { margin-top: 17px; padding: 12px 13px; border-left: 2px solid #a5b78d; border-radius: 0 5px 5px 0; background: #e7eddb; color: #768764; font-size: 11px; line-height: 1.7; }
.coach-tip-label { display: block; margin-bottom: 7px; color: #92a078; font-size: 7px; font-weight: 600; letter-spacing: 1px; }
.coach-tip strong { color: #526a42; font-weight: 600; }
.coach-footer { display: flex; align-items: center; gap: 5px; margin: 23px -22px 0; padding: 14px 22px; border-top: 1px solid #dde4d1; color: #8b967c; font-size: 8px; }
.coach-footer svg { width: 12px; height: 12px; }
.coach-footer .hint-button { min-height: 27px; padding: 1px 0; border: 0; border-radius: 0; color: #708757; font-size: 10px; justify-content: flex-start; }
.coach-footer .hint-button:hover { background: transparent; }
.coach-footer .hint-button kbd { margin-left: auto; }
.coach-footer .text-button { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; }
.session-card { padding: 20px 21px; border: 1px solid #e2e5da; border-radius: 10px; background: #fcfdf8; }
.card-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 19px; font-size: 10px; font-weight: 550; color: #5d694f; }
.card-heading svg { width: 13px; height: 13px; color: #a0ac8d; }
.session-count { display: flex; align-items: baseline; gap: 5px; margin-bottom: 10px; color: #4e6540; font-size: 21px; font-weight: 500; letter-spacing: -.8px; }
.session-count span { color: #a2aa96; font-size: 10px; font-weight: 400; letter-spacing: 0; }
.progress-track { width: 100%; height: 4px; overflow: hidden; border-radius: 3px; background: #e9eedf; }
.progress-fill { height: 100%; max-width: 100%; border-radius: inherit; background: #9fb982; transition: width .3s ease; }
.session-note { margin-top: 9px; color: #969f89; font-size: 8px; line-height: 1.65; }
.recent-label { margin-top: 23px; color: #98a08d; font-size: 7px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
.recent-dots { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.recent-dot { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #edf0e6; border: 1px solid #e4e9da; font-size: 12px; color: #b5bfa8; }
.recent-dot svg { width: 10px; height: 10px; stroke-width: 2; color: #fff; }
.recent-dot.correct { background: #a8c18d; border-color: #a8c18d; }
.recent-dot.incorrect { background: #cf9d85; border-color: #cf9d85; }
.recent-dot.assisted { background: #d2c798; border-color: #d2c798; }
.hint-button { display: flex; justify-content: center; align-items: center; gap: 7px; width: 100%; min-height: 39px; padding: 10px 12px; border: 1px dashed #d5ddc8; border-radius: 7px; background: transparent; color: #91a07d; font-size: 9px; }
.hint-button:hover { background: #edf1e5; border-color: #a7b591; color: #567142; }
.hint-button:disabled { opacity: .45; }
.hint-button svg { width: 13px; height: 13px; }
.hint-button kbd { margin-left: 3px; padding: 1px 4px; border: 1px solid #dfe6d3; border-radius: 3px; }
.tip-strip { display: flex; align-items: center; gap: 14px; margin-top: 23px; padding: 19px 21px; border: 1px solid #e4e6da; border-radius: 9px; background: #f0f2e8; }
.tip-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid #dce3d0; border-radius: 50%; color: #8b9d71; }
.tip-icon svg { width: 15px; height: 15px; }
.tip-copy { min-width: 0; flex: 1; }
.tip-title { color: #657955; font-size: 10px; font-weight: 550; }
.tip-copy p { margin-top: 5px; color: #929b85; font-size: 9px; line-height: 1.6; }
.tip-strip .text-button { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 9px; }
.tip-strip .text-button svg { width: 12px; height: 12px; }
.page-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px; padding: 23px 0 25px; margin-top: 1px; color: #a2a797; font-size: 16px; line-height: 1.6; }
.page-footer a { text-decoration: none; }
.page-footer a, .page-footer .text-button { display: inline-flex; align-items: center; min-height: 44px; font-size: inherit; }
.page-footer a:hover { color: #5f7950; }
.page-footer span { display: inline-flex; align-items: center; gap: 5px; }
.page-footer svg { width: 10px; height: 10px; }

/* Reference chart and training history */
.view-heading { margin-bottom: 27px; }
.view-heading .eyebrow { margin-bottom: 8px; }
.view-heading h1 { font-size: 43px; }
.view-heading p { margin-top: 12px; color: #86907b; font-size: 12px; line-height: 1.7; }
.chart-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin: 18px 0; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #87917b; }
.legend-swatch { width: 19px; height: 19px; display: inline-grid; place-items: center; border-radius: 3px; font-size: 9px; font-weight: 600; }
.chart-rule-label { color: #91a07f; font-size: 10px; }
.move-hit { background: #f1ebd5; color: #8f7e44; }
.move-stand { background: #dce6d0; color: #536e3f; }
.move-double { background: #dce9e6; color: #457566; }
.move-split { background: #e4dff0; color: #78658f; }
.move-surrender { background: #f0ddd4; color: #a1715c; }
.chart-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; scrollbar-color: #c7d3bc transparent; }
.chart-wrap .chart-toolbar { min-width: 530px; }
.strategy-table { width: 100%; min-width: 540px; border-spacing: 3px; border-collapse: separate; padding: 16px; font-size: 10px; }
.strategy-table th { height: 34px; padding: 6px; color: #7d8c70; font-weight: 550; text-align: center; }
.strategy-table caption { padding: 20px 18px 0; color: #7f906e; text-align: left; font-size: 11px; }
.strategy-table th:first-child { min-width: 84px; text-align: left; padding-left: 8px; }
.strategy-table td { height: 30px; min-width: 34px; padding: 4px 6px; border-radius: 3px; text-align: center; font-size: 9px; font-weight: 650; }
.strategy-table td:first-child:not([class*="move-"]) { color: #617552; text-align: left; background: #f3f6ec; font-weight: 550; padding-left: 10px; }
.strategy-table td sup { font-size: 7px; padding-left: 1px; }
.strategy-table td small { font-size: 8px; opacity: .7; }
.chart-note { margin-top: 14px; color: #909984; font-size: 10px; line-height: 1.8; }
.source-link { color: #70875a; text-decoration: underline; text-underline-offset: 3px; }
.source-link:hover { color: #355133; }
.progress-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 21px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.metric-card { padding: 23px 20px; border: 1px solid #e1e6d7; background: #fcfdf8; border-radius: 10px; }
.metric-number { display: block; color: #3e5b34; font-size: 31px; font-weight: 450; letter-spacing: -1px; }
.metric-label { display: block; margin-top: 9px; color: #8c9880; font-size: 10px; }
.metric-card p { margin-top: 8px; color: #a0ab94; font-size: 9px; line-height: 1.6; }
.section-card { padding: 25px; background: #fdfef9; border: 1px solid #e1e6d7; border-radius: 11px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; color: #546d43; font-size: 13px; font-weight: 550; }
.section-heading h2 { font: inherit; }
.section-heading svg { width: 16px; height: 16px; color: #9aab86; }
.section-description { margin: -12px 0 25px; color: #99a58d; font-size: 11px; line-height: 1.7; }
.count-pill { display: inline-grid; place-items: center; min-width: 24px; height: 23px; padding: 0 5px; border-radius: 5px; background: #edf3e3; color: #849c69; font-size: 10px; }
.category-progress { display: flex; flex-direction: column; gap: 23px; }
.category-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.category-row-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; }
.category-row > small { margin-top: -3px; color: #a0ad93; font-size: 9px; }
.category-name { color: #6c7f5b; font-size: 11px; }
.category-score { margin-left: auto; color: #8f9c82; font-size: 10px; }
.category-row .progress-track { flex: 0 0 100%; margin-top: 2px; }
.weak-list { display: flex; flex-direction: column; gap: 2px; }
.weak-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 0; border-bottom: 1px solid #edf0e6; }
.weak-item:last-child { border-bottom: 0; }
.weak-hand { color: #607651; font-size: 11px; font-weight: 500; }
.weak-detail { color: #96a086; font-size: 10px; line-height: 1.6; }
.weak-hand small { margin: 0 7px; color: #a2ac97; font-size: 9px; }
.weak-list + .button { margin-top: 21px; }
.empty-state { display: flex; align-items: center; flex-direction: column; text-align: center; padding: 63px 25px; border: 1px solid #e1e6d7; border-radius: 12px; background: #fdfef9; }
.empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 15px; background: #edf2e4; color: #7e9465; margin-bottom: 20px; }
.empty-icon svg { width: 27px; height: 27px; }
.empty-state h2 { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 31px; font-weight: 400; color: #445d38; }
.empty-state p { max-width: 365px; margin: 13px auto 22px; font-size: 12px; line-height: 1.8; color: #909b83; }
.empty-state .button { min-width: 135px; }
.empty-state.compact { border: 0; padding: 12px 0 10px; background: transparent; }
.empty-state.compact .empty-icon { width: 40px; height: 40px; margin-bottom: 14px; }
.empty-state.compact h3 { color: #6f885b; font-size: 13px; font-weight: 500; }
.empty-state.compact p { font-size: 10px; margin: 8px 0 20px; }
.review-empty { min-height: 490px; border: 0; border-radius: 0; }
.review-empty .eyebrow { margin-bottom: 8px; }
.danger-text { color: #a88977; }
.danger-text:hover { color: #a25b4a; }

/* Settings and keyboard help */
.modal { width: min(520px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid #dee5d3; border-radius: 15px; background: #fafbf6; color: var(--ink); box-shadow: 0 25px 80px rgb(11 30 18 / 20%); }
.modal::backdrop { background: rgb(13 32 23 / 36%); backdrop-filter: blur(3px); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px 17px; border-bottom: 1px solid var(--line); }
.modal-header h2 { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 29px; font-weight: 400; }
.modal-body { padding: 8px 26px 23px; }
.modal-body > p { color: #88967c; font-size: 11px; line-height: 1.8; margin: 15px 0; }
.small-modal { width: min(430px, calc(100% - 32px)); }
.small-modal .modal-body h2 { margin-top: 9px; font-family: 'Libre Caslon Display', Georgia, serif; font-size: 29px; font-weight: 400; }
.small-modal .modal-header .coach-icon { margin: 0; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 26px; border-top: 1px solid var(--line); background: #f3f6ec; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 19px 0; border-bottom: 1px solid #e7ebdf; font-size: 12px; color: #547044; }
.setting-description { display: block; max-width: 240px; margin-top: 5px; color: #939d86; font-size: 10px; line-height: 1.6; }
.setting-description strong { display: block; color: #5f774d; font-size: 11px; font-weight: 550; }
.setting-description p { margin-top: 5px; }
.setting-intro { font-size: 12px; }
.segmented-control { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 3px; border: 1px solid #dfe6d4; border-radius: 6px; background: #eff3e7; }
.segmented-control button { min-width: 42px; min-height: 29px; padding: 6px 9px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #99a38d; font-size: 10px; }
.segmented-control button.selected { border-color: #dbe4cd; background: #fcfdf9; color: #587740; box-shadow: 0 1px 3px rgb(28 56 20 / 4%); }
.rule-details { padding: 15px 17px; margin-top: 18px; border-radius: 7px; background: #eef3e6; color: #7e906d; font-size: 10px; line-height: 1.9; }
.rule-details strong { color: #5c7549; }
.rule-details p { margin-top: 7px; }
.rule-details ul { margin: 7px 0 0; padding-left: 16px; }
.shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; padding-top: 14px; }
.shortcut { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 0; color: #7e8e6e; font-size: 11px; border-bottom: 1px solid #e9ede1; }
.shortcut kbd { min-width: 25px; padding: 4px 6px; border: 1px solid #dce5ce; border-radius: 4px; background: #f1f5e9; color: #81946b; text-align: center; }
.toast { position: fixed; z-index: 60; bottom: 24px; left: calc(50% + 112px); transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 13px 21px; border: 1px solid #476649; border-radius: 9px; background: #234535; color: #edf3e3; font-size: 12px; box-shadow: 0 8px 24px rgb(21 45 27 / 16%); }

@keyframes deal-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes feedback-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1500px) {
  .main-content { padding-top: 47px; }
  .hero { margin-bottom: 36px; }
  .practice-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 27px; }
  .felt-table { min-height: 462px; padding-top: 31px; padding-bottom: 31px; }
  .card { width: 94px; height: 132px; flex-basis: 94px; border-radius: 9px; }
  .cards { min-height: 134px; gap: 11px; }
  .card-corner { font-size: 23px; }
  .card-corner.top { top: 10px; left: 10px; }
  .card-corner.bottom { bottom: 10px; right: 10px; }
  .card-suit { font-size: 47px; }
  .card-corner span + span, .card-corner .suit { font-size: 16px; }
  .coach-body { font-size: 13px; }
  .table-center { margin: 25px 0 22px; }
}
@media (max-width: 1199px) {
  .nav-badge { display: none; }
  .sidebar { width: 200px; padding-left: 15px; padding-right: 15px; }
  .workspace { margin-left: 200px; }
  .main-content { padding: 32px 28px 0; }
  .topbar { padding-right: 28px; padding-left: 28px; }
  .practice-layout { grid-template-columns: minmax(0, 1fr) 226px; gap: 18px; }
  .hero { gap: 15px; }
  .hero-stats { gap: 21px; }
  .stat + .stat::before { left: -11px; }
  .stat-value { font-size: 23px; }
  .coach-card { padding-left: 18px; padding-right: 18px; }
  .coach-footer { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
  .coach-card h2 { font-size: 25px; }
  .coach-tip { padding: 10px; }
  .practice-toolbar { padding-left: 13px; padding-right: 13px; }
  .filter-tab { padding-left: 8px; padding-right: 8px; }
  .decision-panel { padding-left: 16px; padding-right: 16px; }
  .action-buttons { gap: 6px; }
  .toast { left: calc(50% + 100px); }
}
@media (max-width: 1030px) {
  .sidebar { width: 184px; padding-left: 12px; padding-right: 12px; }
  .workspace { margin-left: 184px; }
  .brand { gap: 9px; padding-left: 5px; }
  .brand-name { font-size: 20px; }
  .brand-caption { font-size: 8px; letter-spacing: 1.3px; }
  .brand-mark { width: 35px; flex-basis: 35px; height: 40px; }
  .nav-item { padding-left: 11px; padding-right: 11px; font-size: 11px; gap: 10px; }
  .main-content { padding-left: 23px; padding-right: 23px; }
  .topbar { padding-left: 23px; padding-right: 23px; }
  .practice-layout { grid-template-columns: minmax(0, 1fr) 205px; gap: 16px; }
  .hero { align-items: flex-start; }
  h1 { font-size: 38px; }
  .hero-stats { padding-top: 12px; gap: 17px; }
  .stat { min-width: 40px; }
  .stat-value { font-size: 20px; }
  .stat-label { font-size: 7px; }
  .stat + .stat::before { left: -9px; height: 23px; }
  .subtitle { max-width: 290px; font-size: 10px; }
  .keyboard-hint { display: none; }
  .hand-counter { font-size: 8px; }
  .filter-tab { padding-left: 7px; padding-right: 7px; font-size: 8px; }
  .coach-card { padding-top: 20px; padding-left: 16px; padding-right: 16px; }
  .coach-body { font-size: 11px; }
  .coach-tip { font-size: 10px; }
  .coach-footer { padding-left: 16px; padding-right: 16px; margin-left: -16px; margin-right: -16px; font-size: 7px; }
  .round-feedback { flex-wrap: wrap; }
  .round-feedback .next-button { margin-left: 30px; }
  .session-card { padding-left: 16px; padding-right: 16px; }
  .tip-strip { padding: 16px; }
  .tip-strip .text-button { max-width: 84px; white-space: normal; line-height: 1.5; }
  .toast { left: calc(50% + 92px); }
}
@media (max-width: 870px) {
  .sidebar { width: 170px; }
  .workspace { margin-left: 170px; }
  .brand-name { font-size: 18px; }
  .brand-caption { font-size: 7px; }
  .brand-mark { width: 31px; flex-basis: 31px; height: 36px; }
  .sidebar-bottom { padding-left: 0; padding-right: 0; }
  .rules-summary { padding-left: 10px; padding-right: 10px; }
  .local-note { font-size: 8px; }
  .hero { flex-wrap: wrap; gap: 22px; margin-bottom: 25px; }
  .hero-stats { padding-top: 0; gap: 26px; }
  .stat { text-align: left; min-width: 58px; }
  .stat + .stat::before { left: -14px; }
  .subtitle { max-width: none; }
  .practice-layout { grid-template-columns: minmax(0, 1fr); }
  .coach-column { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .coach-card { grid-row: span 2; }
  .coach-card h2 { font-size: 27px; }
  .coach-body { font-size: 12px; }
  .coach-tip { font-size: 11px; }
  .session-card { min-height: 200px; }
  .hint-button { margin-top: -1px; }
  .felt-table { min-height: 360px; }
  .topbar { min-height: 64px; }
  .topbar-actions { gap: 12px; }
  .status-pill { display: none; }
  .filter-tab { padding-left: 9px; padding-right: 9px; font-size: 9px; }
  .hand-counter { font-size: 9px; }
  .round-feedback { flex-wrap: nowrap; }
  .round-feedback .next-button { margin-left: auto; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .progress-layout { grid-template-columns: 1fr; }
  .toast { left: calc(50% + 85px); }
}
@media (max-width: 630px) {
  .sidebar { position: relative; width: 100%; padding: 19px 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; gap: 9px; }
  .brand-name { font-size: 22px; }
  .brand-mark { width: 35px; flex-basis: 35px; height: 38px; }
  .brand-caption { font-size: 7px; letter-spacing: 1.4px; }
  .sidebar nav { display: flex; gap: 8px; margin-top: 19px; margin-bottom: 0; }
  .nav-label, .sidebar-bottom { display: none; }
  .nav-item { justify-content: center; gap: 6px; padding: 11px 8px; margin: 0; border-radius: 6px 6px 0 0; font-size: 10px; }
  .nav-item svg { width: 14px; height: 14px; }
  .nav-badge { display: none; }
  .workspace { margin-left: 0; }
  .topbar { min-height: 55px; padding: 0 20px; }
  .breadcrumbs { font-size: 9px; gap: 7px; }
  .topbar .button { min-height: 29px; padding: 6px 9px; font-size: 9px; }
  .topbar .button svg { width: 12px; height: 12px; }
  .main-content { padding: 29px 20px 0; }
  .hero { gap: 21px; margin-bottom: 24px; }
  .hero .eyebrow { font-size: 7px; margin-bottom: 9px; }
  h1 { font-size: 40px; letter-spacing: -.9px; }
  .subtitle { margin-top: 9px; font-size: 10px; }
  .hero-stats { width: 100%; justify-content: flex-start; gap: 31px; }
  .stat { min-width: 65px; }
  .stat-value { font-size: 23px; }
  .stat-label { font-size: 8px; }
  .stat + .stat::before { left: -16px; top: 4px; height: 30px; }
  .practice-layout { gap: 17px; }
  .practice-toolbar { min-height: 56px; padding: 12px 11px; gap: 7px; }
  .practice-toolbar .filter-tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .practice-toolbar .filter-tabs::-webkit-scrollbar { display: none; }
  .practice-toolbar .hand-counter { display: none; }
  .filter-tab { min-height: 32px; padding: 7px 10px; font-size: 11px; }
  .hand-counter { font-size: 8px; }
  .felt-table { min-height: 395px; padding: 24px 12px; }
  .felt-table::before { inset: 27px 17px; border-radius: 43% / 49%; }
  .card { width: 80px; height: 113px; flex-basis: 80px; }
  .cards { gap: 9px; }
  .table-label { margin-bottom: 12px; font-size: 7px; }
  .table-center { margin: 18px 0; }
  .table-rule { font-size: 6px; letter-spacing: 1.5px; }
  .table-watermark { left: 20px; bottom: 16px; font-size: 8px; }
  .decision-panel { padding: 18px 13px 19px; }
  .decision-prompt { font-size: 10px; margin-bottom: 14px; }
  .action-buttons { gap: 6px; }
  .action-button { min-height: 73px; gap: 8px; padding-left: 2px; padding-right: 2px; }
  .action-name { font-size: 10px; }
  .action-button kbd { display: none; }
  .action-icon svg { width: 17px; height: 17px; }
  .round-feedback { padding: 12px 10px; gap: 8px; flex-wrap: wrap; }
  .feedback-text strong { font-size: 10px; }
  .feedback-text p { font-size: 9px; }
  .round-feedback .next-button { margin-left: 28px; min-height: 33px; }
  .coach-column { display: flex; flex-direction: column; align-items: stretch; gap: 15px; }
  .coach-card { padding: 23px 21px 0; }
  .coach-icon { width: 29px; height: 29px; margin-bottom: 13px; }
  .coach-card h2 { font-size: 29px; }
  .coach-body { font-size: 13px; line-height: 1.7; margin-top: 13px; }
  .coach-tip { font-size: 12px; padding: 12px; margin-top: 15px; }
  .coach-footer { margin-left: -21px; margin-right: -21px; padding: 13px 21px; margin-top: 20px; line-height: 1.5; }
  .session-card { padding: 22px 21px; min-height: 190px; }
  .card-heading { font-size: 9px; margin-bottom: 18px; }
  .session-count { font-size: 20px; }
  .session-count span { font-size: 8px; }
  .session-note { font-size: 8px; }
  .recent-dots { gap: 4px; }
  .recent-dot { width: 14px; height: 14px; }
  .hint-button { font-size: 8px; gap: 4px; padding-left: 5px; padding-right: 5px; }
  .hint-button kbd { display: none; }
  .tip-strip { align-items: flex-start; flex-wrap: wrap; gap: 11px; margin-top: 18px; padding: 16px; }
  .tip-copy { flex-basis: calc(100% - 46px); }
  .tip-title { font-size: 9px; }
  .tip-copy p { font-size: 9px; }
  .tip-strip .text-button { max-width: none; margin-left: 43px; font-size: 9px; }
  .page-footer { flex-direction: column; align-items: center; gap: 12px; padding-top: 24px; text-align: center; }
  .view-heading h1 { font-size: 38px; }
  .view-heading p { font-size: 10px; }
  .chart-toolbar { padding: 12px 13px; }
  .chart-legend { gap: 9px; }
  .legend-item { font-size: 8px; }
  .legend-swatch { width: 17px; height: 17px; }
  .strategy-table { padding: 9px; }
  .chart-note { font-size: 9px; }
  .metric-card { padding: 20px 16px; }
  .metric-number { font-size: 28px; }
  .metric-label { font-size: 9px; }
  .section-card { padding: 22px 19px; }
  .empty-state { padding: 45px 20px; }
  .empty-state h2 { font-size: 28px; }
  .empty-state p { font-size: 11px; }
  .modal { width: calc(100% - 28px); max-height: calc(100dvh - 36px); }
  .modal-header { padding: 20px 20px 15px; }
  .modal-header h2 { font-size: 27px; }
  .modal-body { padding: 6px 20px 20px; }
  .modal-footer { padding: 16px 20px; }
  .setting-row { gap: 12px; font-size: 11px; }
  .setting-description { font-size: 9px; }
  .segmented-control button { min-width: 37px; padding: 6px; font-size: 9px; }
  .shortcut-grid { gap: 8px 16px; }
  .shortcut { font-size: 10px; }
  .toast { left: 50%; font-size: 11px; text-align: center; }
}
@media (max-width: 370px) {
  .main-content { padding-left: 14px; padding-right: 14px; }
  .topbar { padding-left: 14px; padding-right: 14px; }
  h1 { font-size: 36px; }
  .nav-item { font-size: 9px; padding-left: 5px; padding-right: 5px; }
  .practice-toolbar { padding-left: 8px; padding-right: 8px; }
  .filter-tab { padding-left: 6px; padding-right: 6px; }
  .coach-column { grid-template-columns: 1fr; }
  .coach-card { grid-row: auto; }
  .coach-body { font-size: 13px; }
  .coach-tip { font-size: 12px; }
  .session-card { min-height: 0; }
  .recent-dots { gap: 7px; }
  .recent-dot { width: 10px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Complete rounds: multiple cards, independent split hands, and decision history. */
.full-round-table { padding-top: 24px; padding-bottom: 24px; min-height: 360px; }
.full-round-table .card { animation: none; }
.full-round-table .cards { max-width: 100%; flex-wrap: wrap; gap: 7px; }
.full-round-table .dealer-zone { width: 100%; }
.full-round-table .table-rule { font-size: 8px; letter-spacing: 1.3px; color: #d2ddbe; opacity: .85; }
.player-hands { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.player-hands.split-hands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.round-hand { min-width: 0; padding: 12px 10px 2px; border: 1px solid transparent; border-radius: 9px; }
.split-hands .round-hand { background: rgb(5 22 16 / 12%); border-color: rgb(223 234 199 / 10%); }
.split-hands .active-hand { border-color: #b9cca0; box-shadow: 0 0 0 2px rgb(199 217 171 / 8%); background: rgb(170 197 138 / 7%); }
.hand-heading { display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 6px 18px; color: #bccdb0; font-size: 9px; letter-spacing: .6px; margin-bottom: 12px; }
.hand-heading span:last-child { color: #8faf97; letter-spacing: 0; }
.round-hand .table-label { margin-top: 12px; flex-wrap: wrap; gap: 7px; min-height: 20px; }
.hand-total { font-size: 10px; }
.hand-status { color: #becdb3; font-size: 8px; letter-spacing: 1px; }
.hand-result { font-size: 9px; font-weight: 650; letter-spacing: 0; color: #e0e8d5; }
.hand-result.result-win { color: #d1eab0; }
.hand-result.result-loss { color: #fac4af; }
.hand-result.result-surrender { color: #e5d8ab; }
.split-hands .card { width: 58px; height: 84px; flex-basis: 58px; }
.split-hands .cards { min-height: 84px; }
.split-hands .card-corner { font-size: 17px; }
.split-hands .card-corner.top { top: 6px; left: 5px; }
.split-hands .card-corner.bottom { bottom: 6px; right: 5px; }
.split-hands .card-corner small { font-size: 11px; }
.split-hands .card-suit { font-size: 29px; }
.round-outcome { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.round-outcome h2 { margin-top: 5px; font-family: 'Libre Caslon Display', Georgia, serif; font-size: 30px; font-weight: 400; line-height: 1.15; }
.round-outcome p { margin-top: 7px; font-size: 12px; color: #778371; line-height: 1.6; }
.outcome-win h2 { color: #356342; }
.outcome-loss h2 { color: #965b4f; }
.outcome-push h2, .outcome-surrender h2 { color: #756e48; }
.move-feedback { margin-top: 17px; align-items: center; }
.move-feedback .feedback-text strong { font-size: 12px; }
.move-feedback .feedback-text p { font-size: 11px; line-height: 1.55; }
.dealer-wait { display: flex; gap: 13px; align-items: center; min-height: 65px; color: #416341; }
.dealer-wait strong { font-size: 14px; }
.dealer-wait p { margin-top: 5px; color: #82917b; font-size: 12px; }
.dealer-pulse { width: 11px; height: 11px; border-radius: 50%; background: #749559; box-shadow: 0 0 0 6px #eef3e7; }
.round-log { padding: 21px 22px; border-top: 1px solid var(--line); background: #fbfcf7; }
.round-log-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.round-log-heading h3 { font-size: 12px; font-weight: 600; color: #576a4c; }
.round-log-heading > span { color: #9aab8b; font-size: 10px; }
.round-log ol { list-style: none; margin: 12px 0 0; padding: 0; }
.round-log li { display: flex; gap: 11px; align-items: center; padding: 10px 0; border-top: 1px solid #edf0e6; }
.move-number { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: #eef2e7; display: grid; place-items: center; font-size: 10px; color: #8c9b7b; }
.move-detail { flex: 1; min-width: 0; }
.move-detail strong { display: block; font-size: 12px; font-weight: 550; line-height: 1.6; }
.move-detail strong > span { font-weight: 400; color: #87967c; }
.move-detail strong svg { width: 12px; height: 12px; margin: 0 2px; }
.move-detail small { display: block; margin-top: 3px; font-size: 10px; color: #8b967f; line-height: 1.5; }
.move-detail .move-hand-id { display: inline-block; background: #edf1e6; border-radius: 3px; padding: 0 4px; font-size: 9px; margin-right: 3px; }
.move-grade { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; flex: 0 0 24px; }
.move-grade svg { width: 13px; height: 13px; }
.move-grade.correct { color: #4d7546; background: #e9f1e2; }
.move-grade.incorrect { color: #aa6b5b; background: #faeee8; }
.move-grade.assisted { color: #9b8b4d; background: #f4efd9; }
.round-stats { display: grid; grid-template-columns: repeat(4, 1fr) 1.7fr; gap: 15px; margin: 22px 0; padding: 22px 25px; border: 1px solid var(--line); border-radius: 10px; background: #eff3e7; }
.round-stats > div { display: flex; flex-direction: column; gap: 7px; }
.round-stats strong { font-size: 23px; font-weight: 500; color: #47613b; }
.round-history { margin-top: 22px; }
.past-round { border-top: 1px solid var(--line); }
.past-round summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 0; cursor: pointer; font-size: 13px; color: #4e6244; }
.past-round summary::before { content: '+'; font-size: 20px; color: #8da07b; }
.past-round[open] summary::before { content: '−'; }
.past-round summary > span { flex: 1; }
.past-round summary small { display: block; margin-top: 4px; font-size: 10px; color: #94a184; }
.history-outcome { font-size: 12px; font-weight: 500; }
.history-outcome.result-loss { color: #a56858; }
.past-round-body { padding-bottom: 14px; }
.dealer-summary { font-size: 12px; color: #728368; line-height: 1.6; }
.past-hands { display: flex; flex-direction: column; gap: 6px; margin: 9px 0 15px; font-size: 12px; color: #829177; }
.history-log { border: 1px solid var(--line); border-radius: 7px; padding: 12px 15px; }
.round-history-empty { font-size: 13px; color: #86957a; padding: 10px 0 18px; line-height: 1.7; }
.rules-lock-note { margin: 0 29px 15px; color: #947149; font-size: 12px; }
.button:disabled, .filter-tab:disabled { opacity: .45; cursor: not-allowed; }
.session-note { font-size: 11px; }
.round-history .chart-note { margin-top: 18px; }
@media (max-width: 630px) {
  .full-round-table { min-height: 350px; padding: 22px 12px; }
  .full-round-table .table-label { font-size: 9px; }
  .full-round-table .card { width: 72px; height: 103px; flex-basis: 72px; }
  .player-hands.split-hands { grid-template-columns: minmax(0, 1fr); }
  .split-hands .card { width: 64px; height: 91px; flex-basis: 64px; }
  .round-outcome { align-items: flex-start; flex-direction: column; gap: 14px; }
  .round-outcome .next-button { width: 100%; min-height: 42px; }
  .round-outcome h2 { font-size: 30px; }
  .round-outcome p { font-size: 12px; }
  .round-log { padding: 16px 13px; }
  .move-detail strong { font-size: 11px; }
  .move-feedback .feedback-text strong { font-size: 12px; }
  .move-feedback .feedback-text p { font-size: 11px; }
  .round-stats { grid-template-columns: repeat(3, 1fr); padding: 20px; gap: 20px 12px; }
  .round-stats > div:last-child { grid-column: span 2; }
  .round-stats strong { font-size: 22px; }
  .past-round summary { gap: 9px; font-size: 12px; }
  .history-outcome { font-size: 11px; text-align: right; }
  .session-note { font-size: 11px; }
}

/* Deliberate practice, independent assessment, and learning evidence. */
.hero-evidence { flex: 0 1 340px; min-width: 240px; padding: 3px 0 3px 21px; border-left: 1px solid #dce3d3; }
.hero-evidence strong { display: block; color: #49603d; font-size: 14px; font-weight: 550; line-height: 1.6; }
.hero-evidence > span { display: block; margin-top: 5px; color: #829271; font-size: 11px; line-height: 1.6; }
.hero-evidence > small { display: block; margin-top: 7px; color: #959f89; font-size: 10px; line-height: 1.6; }
.hero-copy { min-width: 0; }
.training-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 12px 0; margin-bottom: 17px; border-top: 1px solid #e1e5d8; border-bottom: 1px solid #e1e5d8; color: #819071; font-size: 11px; line-height: 1.6; }
.training-strip .text-button { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.training-strip .text-button svg { width: 13px; height: 13px; }
.session-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 15px; }
.session-toolbar > strong { color: #567148; font-size: 13px; font-weight: 550; line-height: 1.6; }
.session-toolbar .button { flex-shrink: 0; }
.drill-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(115px, .8fr); align-items: end; gap: 13px 17px; padding: 17px 19px; margin-bottom: 20px; background: #f0f3e9; border: 1px solid #e0e6d6; border-radius: 9px; }
.drill-controls label, .setup-grid label { display: flex; flex-direction: column; gap: 7px; min-width: 0; color: #78896b; font-size: 11px; font-weight: 500; }
.drill-controls select, .setup-grid select { width: 100%; min-width: 0; min-height: 40px; padding: 9px 29px 9px 11px; border: 1px solid #d8e1cd; border-radius: 5px; color: #4c6740; background-color: #fcfdf8; font-size: 12px; line-height: 1.5; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23778b64' stroke-width='1.3'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 15px; background-position: right 9px center; }
.drill-controls select:hover:not(:disabled), .setup-grid select:hover:not(:disabled) { border-color: #aabf94; }
.drill-controls select:disabled, .setup-grid select:disabled { opacity: .56; cursor: not-allowed; }
.drill-count { align-self: center; padding-top: 17px; color: #869776; font-size: 11px; line-height: 1.7; }
.drill-count .text-button { margin-top: 6px; font-size: 10px; }
.drill-lock { grid-column: 1 / -1; color: #9a977e; font-size: 10px; }
.setup-grid { display: grid; gap: 18px; margin: 24px 0; }
.setup-grid label { font-size: 12px; }
.setup-grid select { min-height: 44px; font-size: 13px; }
.notice { margin: 17px 0 21px; padding: 14px 17px; border: 1px solid #dae4cc; border-left: 3px solid #a4ba88; border-radius: 6px; background: #edf3e3; color: #72845d; font-size: 12px; line-height: 1.75; }
.notice strong { color: #4e6d39; font-weight: 550; }
.notice p { margin-top: 6px; }
.modal-body > .notice { color: #72845d; font-size: 12px; }
.session-evidence { margin-top: 15px; padding-top: 13px; border-top: 1px solid #e8eddf; color: #6e815d; font-size: 12px; line-height: 1.65; }
.modal-body > .summary-evidence { padding: 14px 16px; background: #eef3e5; border: 1px solid #e0e7d5; border-radius: 7px; color: #567644; font-size: 15px; font-weight: 550; line-height: 1.7; }
#session-dialog .modal-body > h2 { margin-top: 10px; font-family: 'Libre Caslon Display', Georgia, serif; font-size: 31px; font-weight: 400; line-height: 1.2; }
#session-dialog .modal-body > p, #setup-dialog .modal-body > p, #resume-dialog .modal-body > p, #matchup-dialog .modal-body > p { font-size: 12px; }
.action-reasons { display: grid; gap: 5px; margin-top: 13px; }
.action-reasons:empty { display: none; }
.action-reasons p { color: #939d86; font-size: 10px; line-height: 1.6; }
.action-reasons strong { color: #7a896b; font-weight: 500; }
.replay-context { display: inline-block; margin-bottom: 13px; padding: 6px 9px; border-radius: 4px; background: #f2f4eb; color: #849271; font-size: 11px; line-height: 1.5; }
.inline-hint { display: inline-flex; align-items: center; min-height: 30px; margin: -6px 0 11px; color: #869769; font-size: 11px; }
.coach-column { scroll-margin-top: 16px; }
.coach-card > .chart-note:last-child { margin-bottom: 23px; }
.practice-toolbar .filter-tabs { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #d4dfc6 transparent; }
.practice-toolbar .filter-tab { flex-shrink: 0; }
.mastery-card { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 28px 30px; border: 1px solid #dce5cd; border-radius: 11px; background: #edf2e3; }
.mastery-card > div:first-child { flex: 1; min-width: 0; }
.mastery-card h2 { margin-top: 9px; color: #49633b; font-family: 'Libre Caslon Display', Georgia, serif; font-size: 33px; font-weight: 400; line-height: 1.2; }
.mastery-card p { max-width: 590px; margin-top: 12px; color: #859475; font-size: 12px; line-height: 1.75; }
.coverage-number { flex: 0 0 205px; padding-left: 28px; border-left: 1px solid #d6e0c5; }
.coverage-number > strong { display: block; color: #567843; font-size: 35px; font-weight: 450; letter-spacing: -1px; white-space: nowrap; }
.coverage-number small { color: #95a480; font-size: 19px; letter-spacing: 0; font-weight: 400; }
.coverage-number > span { display: block; margin-top: 7px; color: #91a17e; font-size: 11px; line-height: 1.6; }
.section-card > .category-row { padding: 13px 0; gap: 6px; border-bottom: 1px solid #e9eedf; }
.section-card > .category-row .category-row-header { color: #819271; font-size: 11px; }
.category-row-header > strong { color: #647e51; font-size: 12px; font-weight: 500; }
.section-card > p:not([class]) { color: #768b62; font-size: 13px; line-height: 1.75; }
.review-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 19px; }
.review-actions .button { min-height: 40px; }
.criteria { margin-top: 20px; padding: 13px 15px; border: 1px solid #e0e7d5; border-radius: 6px; background: #f3f6ec; color: #8c9b7d; }
.criteria summary { cursor: pointer; color: #6e8859; font-size: 11px; font-weight: 500; line-height: 1.6; }
.criteria p { margin-top: 9px; font-size: 11px; line-height: 1.75; }
.matchup-history, .session-history { margin-top: 23px; }
.session-history > .section-description:last-child, .matchup-history > .section-description:last-child { margin-bottom: 0; }
.history-table-wrap { overflow-x: auto; max-width: 100%; scrollbar-color: #c8d5ba transparent; }
.matchup-table { width: 100%; min-width: 645px; border-collapse: collapse; text-align: left; font-size: 11px; }
.matchup-table thead { color: #94a184; background: #f3f6ed; }
.matchup-table th { font-weight: 500; }
.matchup-table th, .matchup-table td { padding: 13px 12px; border-bottom: 1px solid #e5ebdc; line-height: 1.7; }
.matchup-table tbody th { color: #607b4b; }
.matchup-table tbody td { color: #8b997d; }
.matchup-table tbody tr:last-child th, .matchup-table tbody tr:last-child td { border-bottom: 0; }
.matchup-table .text-button { min-height: 33px; font-size: 11px; text-align: left; }
.session-history .past-round summary > strong { max-width: 190px; color: #6c8856; font-size: 12px; font-weight: 500; line-height: 1.6; text-align: right; }
.session-history .past-round-body > p:not([class]) { margin-bottom: 14px; color: #859777; font-size: 12px; line-height: 1.75; }
.session-history .history-log { margin-top: 17px; }
.move-detail details { margin-top: 8px; color: #899a79; font-size: 11px; line-height: 1.7; }
.move-detail details summary { cursor: pointer; color: #748e60; font-size: 11px; padding: 2px 0; display: list-item; }
.move-detail details summary::before { content: none; }
.move-detail details p { margin: 6px 0 8px; }
.practice-shortcut { margin-top: 8px; min-height: 27px; font-size: 10px; }
.button:disabled:hover { transform: none; }
.text-button:disabled { opacity: .5; text-decoration: none; cursor: not-allowed; }

/* A navigable chart keeps the dealer and player labels in view. */
.scroll-cue { margin: 0 0 12px; color: #8d9b7d; font-size: 11px; line-height: 1.65; }
.chart-wrap { max-height: min(72vh, 740px); overflow: auto; isolation: isolate; scroll-padding: 50px 110px; }
.strategy-table { min-width: 630px; padding: 0 8px 8px; border-spacing: 3px; }
.strategy-table caption { padding: 17px 13px 14px; color: #819470; background: #fff; font-size: 12px; }
.strategy-table thead th { position: sticky; top: 0; z-index: 3; height: 44px; background: #f1f5e9; color: #688254; font-size: 12px; box-shadow: 0 1px 0 #dfe6d4; }
.strategy-table th:first-child { position: sticky; left: 0; min-width: 103px; background: #f4f7ee; box-shadow: 1px 0 0 #e1e8d7; }
.strategy-table thead th:first-child { z-index: 4; }
.strategy-table tbody th { z-index: 2; padding-left: 11px; font-size: 11px; }
.strategy-table td { height: 44px; min-width: 44px; padding: 0; }
.chart-cell { display: block; width: 100%; min-width: 44px; min-height: 44px; padding: 8px 5px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: inherit; font-size: 12px; font-weight: 600; transition: border-color .12s, box-shadow .12s; }
.chart-cell small { font-size: 10px; }
.chart-cell:hover { border-color: currentColor; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%); }
.chart-cell:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--pine); outline-offset: -3px; }

/* Beginner lessons and guided examples. */
.learning-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); align-items: start; gap: 23px; }
.lesson-nav { display: flex; flex-direction: column; gap: 7px; padding: 12px; border: 1px solid #e0e7d4; border-radius: 10px; background: #f1f5e9; }
.lesson-link { display: flex; align-items: center; gap: 11px; min-height: 49px; padding: 11px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #879c74; font-size: 12px; text-align: left; line-height: 1.6; }
.lesson-link > span { display: inline-grid; place-items: center; flex: 0 0 23px; width: 23px; height: 23px; border: 1px solid #dce5ce; border-radius: 50%; background: #f9fcf3; color: #8ba474; font-size: 10px; }
.lesson-link:hover { background: #e7efd9; color: #587b41; }
.lesson-link.active { border-color: #d7e3c7; background: #fcfef8; color: #567642; box-shadow: 0 2px 5px rgb(34 62 21 / 3%); }
.lesson-link.active > span { background: #607f49; border-color: #607f49; color: #f8fbed; }
.lesson-card { min-height: 385px; padding: 29px; }
.lesson-card h2, .guided-card h2 { margin-top: 10px; color: #49683a; font-family: 'Libre Caslon Display', Georgia, serif; font-size: 34px; font-weight: 400; line-height: 1.2; }
.lesson-summary { margin-top: 15px; color: #859874; font-size: 14px; line-height: 1.8; }
.lesson-card ul { display: grid; gap: 13px; margin: 21px 0 28px; padding-left: 18px; color: #7e926c; font-size: 13px; line-height: 1.8; }
.lesson-card li { padding-left: 5px; }
.lesson-card li::marker { color: #afc299; }
.lesson-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-top: 19px; border-top: 1px solid #e5ecda; }
.lesson-actions .button { min-height: 41px; }
.guided-card { margin-top: 23px; padding: 28px 30px; }
.guided-card > p { max-width: 650px; margin-top: 13px; color: #82966e; font-size: 13px; line-height: 1.8; }
.example-hand { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 550px; padding: 24px 25px; margin-top: 22px; border: 1px solid #325842; border-radius: 9px; background: radial-gradient(ellipse at 35% 50%, #31593f, #214633); color: #f1f4de; font-family: 'Libre Caslon Display', Georgia, serif; font-size: 36px; line-height: 1.2; }
.example-hand > span { font-family: 'DM Sans', sans-serif; color: #b7cba4; font-size: 12px; line-height: 1.6; }
.example-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.example-actions .button { min-width: 88px; min-height: 44px; background: #f5f8ee; }
.example-actions .button:hover { background: #e7efd9; }
.guided-card > .text-button { display: inline-flex; align-items: center; gap: 6px; min-height: 33px; font-size: 12px; }
.guided-card > .text-button svg { width: 14px; height: 14px; }

@media (max-width: 1199px) {
  .hero-evidence { flex-basis: 290px; min-width: 210px; padding-left: 17px; }
  .hero-evidence strong { font-size: 13px; }
  .hero-evidence > small { font-size: 9px; }
  .drill-controls { gap: 12px; padding: 15px; }
  .learning-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 19px; }
  .lesson-link { padding: 10px 8px; gap: 9px; font-size: 11px; }
  .coverage-number { flex-basis: 180px; padding-left: 24px; }
}
@media (max-width: 870px) {
  .hero-evidence { flex: 1 0 100%; min-width: 0; border-left: 0; padding: 14px 16px; border-radius: 7px; background: #f0f3e8; }
  .hero-evidence > small { font-size: 10px; }
  .hero-evidence > span { margin-top: 4px; }
  .training-strip { gap: 9px; }
  .drill-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .drill-count { grid-column: 1 / -1; padding-top: 0; }
  .drill-lock { margin-top: -6px; }
  .mastery-card { align-items: flex-start; flex-direction: column; gap: 22px; padding: 25px; }
  .coverage-number { flex-basis: auto; width: 100%; padding: 20px 0 0; border-left: 0; border-top: 1px solid #d6e0c5; }
  .coverage-number > strong { font-size: 31px; }
  .learning-layout { grid-template-columns: 1fr; }
  .lesson-nav { flex-direction: row; overflow-x: auto; padding: 8px; }
  .lesson-link { flex: 0 0 auto; max-width: 220px; white-space: nowrap; }
  .lesson-card { min-height: 0; padding: 26px; }
  .guided-card { padding: 26px; }
}
@media (max-width: 630px) {
  .sidebar nav { overflow-x: auto; gap: 5px; scrollbar-width: none; }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .sidebar .nav-item { flex: 0 0 auto; width: auto; min-height: 44px; padding: 10px 8px; font-size: 10px; }
  .sidebar .nav-item svg { width: 13px; height: 13px; }
  .hero { gap: 17px; margin-bottom: 19px; }
  .hero-evidence { padding: 13px 15px; }
  .hero-evidence strong { font-size: 12px; }
  .hero-evidence > span { font-size: 11px; }
  .hero-evidence > small { font-size: 10px; }
  .training-strip { margin-bottom: 15px; padding: 11px 0; font-size: 10px; }
  .training-strip .text-button { min-height: 28px; font-size: 11px; }
  .session-toolbar { gap: 11px; margin-bottom: 13px; }
  .session-toolbar > strong { font-size: 12px; }
  .session-toolbar .button { min-height: 40px; padding: 8px 10px; font-size: 10px; }
  .drill-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 12px; padding: 14px; margin-bottom: 17px; }
  .drill-controls label { gap: 6px; font-size: 11px; }
  .drill-controls select { min-height: 44px; padding-left: 10px; font-size: 12px; }
  .drill-count { grid-column: auto; align-self: end; min-height: 44px; display: flex; justify-content: center; flex-direction: column; font-size: 10px; }
  .drill-lock { margin-top: -3px; font-size: 10px; line-height: 1.6; }
  .practice-toolbar .filter-tab { min-height: 40px; }
  .practice-toolbar { padding-top: 8px; padding-bottom: 8px; }
  .full-round-table { min-height: 304px; padding: 15px 10px; }
  .full-round-table .cards { min-height: 94px; gap: 6px; }
  .full-round-table .card { width: 66px; height: 94px; flex-basis: 66px; }
  .full-round-table .card-corner { font-size: 18px; }
  .full-round-table .card-corner.top { top: 7px; left: 6px; }
  .full-round-table .card-corner.bottom { bottom: 7px; right: 6px; }
  .full-round-table .card-corner small { font-size: 12px; }
  .full-round-table .card-suit { font-size: 34px; }
  .full-round-table .table-center { margin: 13px 0 5px; }
  .full-round-table .table-rule { font-size: 7px; letter-spacing: 1px; }
  .full-round-table .hand-heading { margin-bottom: 9px; font-size: 9px; }
  .full-round-table .round-hand { padding: 9px 6px 1px; }
  .full-round-table .round-hand .table-label { margin-top: 10px; }
  .inline-hint { min-height: 36px; margin: -3px 0 12px; font-size: 12px; }
  .decision-prompt { margin-bottom: 8px; font-size: 12px; }
  .action-reasons { margin-top: 12px; gap: 6px; }
  .action-reasons p { font-size: 10px; line-height: 1.6; }
  .notice { padding: 13px 14px; font-size: 11px; }
  .mastery-card { padding: 23px 20px; }
  .mastery-card h2 { font-size: 29px; }
  .mastery-card p { font-size: 12px; }
  .coverage-number > strong { font-size: 30px; }
  .section-description { font-size: 12px; }
  .criteria { padding: 12px; }
  .criteria summary { min-height: 28px; font-size: 12px; }
  .review-actions { gap: 8px; }
  .review-actions .button { flex: 1 1 auto; min-height: 44px; font-size: 11px; }
  .history-table-wrap { margin-left: -4px; margin-right: -4px; }
  .matchup-table .text-button { min-height: 44px; }
  .session-history .past-round summary { align-items: flex-start; flex-wrap: wrap; gap: 8px 10px; }
  .session-history .past-round summary > span { flex-basis: calc(100% - 30px); }
  .session-history .past-round summary > strong { max-width: none; padding-left: 24px; text-align: left; font-size: 11px; }
  .session-history .past-round summary small { font-size: 10px; line-height: 1.7; }
  .session-history .past-round-body > p:not([class]) { font-size: 11px; }
  .practice-shortcut { min-height: 36px; font-size: 11px; }
  .scroll-cue { font-size: 11px; }
  .chart-wrap { max-height: 64vh; }
  .strategy-table { min-width: 617px; padding-left: 3px; padding-right: 3px; }
  .strategy-table caption { font-size: 11px; padding: 15px 10px; }
  .strategy-table th:first-child { min-width: 96px; }
  .chart-cell { min-height: 44px; font-size: 12px; }
  .chart-legend { gap: 11px; }
  .legend-item { font-size: 10px; }
  .legend-swatch { width: 21px; height: 21px; }
  .lesson-nav { gap: 4px; padding: 7px; }
  .lesson-link { min-height: 44px; padding: 8px 10px; font-size: 11px; }
  .lesson-card, .guided-card { padding: 23px 20px; }
  .lesson-card h2, .guided-card h2 { font-size: 30px; }
  .lesson-summary { font-size: 13px; }
  .lesson-card ul { gap: 12px; font-size: 12px; margin-bottom: 24px; }
  .lesson-actions { gap: 10px; }
  .lesson-actions .button { min-height: 44px; font-size: 11px; }
  .guided-card > p { font-size: 12px; }
  .example-hand { padding: 20px 18px; font-size: 31px; }
  .example-hand > span { font-size: 11px; }
  .example-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .example-actions .button { min-width: 0; padding-left: 7px; padding-right: 7px; font-size: 11px; }
  .guided-card > .text-button { min-height: 44px; }
  .setup-grid { gap: 16px; }
  .setup-grid select { font-size: 13px; }
  .modal-footer .button { min-height: 44px; font-size: 11px; }
}

/* Keep play visible; secondary controls expand only when needed. */
.view-practice .topbar { min-height: 48px; }
.view-practice .main-content { padding-top: 18px; }
.practice-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.practice-heading h1 { font-size: 32px; line-height: 1.1; letter-spacing: -.5px; }
.practice-heading p { margin-top: 5px; color: #76816d; font-size: 12px; line-height: 1.4; }
.practice-heading p strong { font-weight: 600; color: #425f39; }
.practice-heading .button { min-height: 40px; }
.practice-context { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 15px; margin: 6px 0; }
.practice-context .text-button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; font-size: 10px; font-weight: 450; }
.practice-context svg { width: 12px; height: 12px; }
.custom-drill { margin: 0 0 12px; border: 1px solid #dde4d3; border-radius: 7px; background: #f1f4eb; }
.custom-drill > summary { padding: 11px 14px; cursor: pointer; color: #476039; font-size: 12px; line-height: 1.5; }
.custom-drill > summary span { margin-left: 12px; color: #77896a; font-size: 11px; }
.custom-drill .drill-controls { margin: 0; border: 0; border-top: 1px solid #dde4d3; border-radius: 0 0 7px 7px; }
.review-mode { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 14px; padding: 9px 12px; margin: 0 0 12px; background: #eaf0e1; border-radius: 6px; font-size: 11px; line-height: 1.5; color: #6d805d; }
.review-mode strong { color: #38552e; font-weight: 600; }
.assessment-note { padding: 8px 0; margin-bottom: 7px; color: #718162; font-size: 11px; }
.view-practice .practice-toolbar { min-height: 44px; padding-top: 5px; padding-bottom: 5px; }
.view-practice .full-round-table { min-height: 0; padding: 14px 15px; }
.view-practice .full-round-table .cards { min-height: 88px; }
.view-practice .full-round-table .card { width: 63px; height: 88px; flex-basis: 63px; }
.view-practice .full-round-table .card-corner { font-size: 18px; }
.view-practice .full-round-table .card-corner.top { top: 5px; left: 5px; }
.view-practice .full-round-table .card-corner.bottom { bottom: 5px; right: 5px; }
.view-practice .full-round-table .card-corner small { font-size: 11px; }
.view-practice .full-round-table .card-suit { font-size: 32px; }
.view-practice .full-round-table .table-center { margin: 11px 0 4px; }
.view-practice .full-round-table .round-hand { padding: 6px 6px 0; }
.view-practice .full-round-table .hand-heading { margin-bottom: 6px; }
.view-practice .full-round-table .table-label { margin-bottom: 6px; }
.view-practice .full-round-table .round-hand .table-label { margin-top: 7px; margin-bottom: 0; }
.view-practice .decision-panel { padding-top: 13px; padding-bottom: 13px; }
.view-practice .decision-prompt { margin-bottom: 7px; }
.view-practice .inline-hint { margin: 0 0 7px; min-height: 26px; }
.view-practice .action-button { min-height: 60px; gap: 6px; }
.learning-summary { margin: 16px 0; border: 1px solid var(--line); border-radius: 7px; background: #f1f4e9; }
.learning-summary > summary { cursor: pointer; padding: 13px 16px; color: #516a43; font-size: 12px; line-height: 1.65; }
.learning-summary > summary span { float: right; color: #7a8b6c; font-size: 11px; }
.learning-summary .hero-evidence { border: 0; padding: 4px 16px 12px; margin: 0; background: transparent; }
.learning-summary > .text-button { margin: 0 16px 16px; }
.next-practice { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.next-practice p { margin-top: 4px; }
.next-practice small { display: block; margin-top: 7px; color: #6e815d; font-size: 11px; }
.next-practice .button { flex-shrink: 0; }
.guided-card .example-actions .button { white-space: normal; }
@media (max-width: 630px) {
  .view-practice .sidebar { padding: 10px 14px 0; }
  .view-practice .brand-mark { width: 28px; height: 30px; flex-basis: 28px; font-size: 22px; }
  .view-practice .brand-name { font-size: 20px; }
  .view-practice .brand-caption { display: none; }
  .view-practice .sidebar nav { margin-top: 6px; }
  .view-practice .sidebar .nav-item { min-height: 40px; padding: 8px 7px; }
  .view-practice .topbar { display: none; }
  .view-practice .main-content { padding: 12px 14px 0; }
  .practice-heading h1 { font-size: 27px; }
  .practice-heading p { font-size: 11px; }
  .practice-heading .button { min-height: 40px; font-size: 11px; padding: 8px 10px; }
  .practice-context { gap: 0 8px; margin: 4px 0; }
  .practice-context .text-button { font-size: 9px; min-height: 30px; }
  .custom-drill { margin-bottom: 10px; }
  .custom-drill > summary { min-height: 44px; padding: 11px 12px; }
  .custom-drill > summary span { margin-left: 5px; font-size: 10px; }
  .view-practice .practice-toolbar { min-height: 42px; padding: 3px 8px; }
  .view-practice .practice-toolbar .filter-tab { min-height: 36px; padding: 7px 8px; font-size: 10px; }
  .view-practice .full-round-table { padding: 11px 10px; }
  .view-practice .full-round-table .cards { min-height: 80px; }
  .view-practice .full-round-table .card { width: 58px; height: 80px; flex-basis: 58px; }
  .view-practice .full-round-table .card-corner { font-size: 16px; }
  .view-practice .full-round-table .card-corner small { font-size: 10px; }
  .view-practice .full-round-table .card-suit { font-size: 29px; }
  .view-practice .full-round-table .table-center { margin: 8px 0 3px; }
  .view-practice .full-round-table .hand-heading { font-size: 8px; }
  .view-practice .full-round-table .table-watermark { display: none; }
  .view-practice .decision-panel { padding: 12px 11px; }
  .view-practice .inline-hint { min-height: 28px; font-size: 11px; }
  .view-practice .action-button { min-height: 58px; }
  .learning-summary > summary { font-size: 11px; }
  .learning-summary > summary span { display: block; float: none; margin-left: 15px; font-size: 10px; }
  .next-practice { flex-direction: column; align-items: stretch; gap: 14px; }
  .guided-card .example-actions { display: flex; flex-wrap: wrap; }
  .guided-card .example-actions .button { flex: 1 1 110px; padding: 10px; }
}

/* Emerald & Brass: shared surface, text, and interaction colours. */
:focus-visible { outline-color: var(--green); }
.sidebar { color: var(--on-pine); background: var(--pine); border-color: var(--pine-line); }
.sidebar :focus-visible { outline-color: var(--gold); }
.brand-name { color: var(--on-pine); }
.brand-mark { background: var(--gold); color: var(--brass-ink); }
.brand-period { color: var(--gold); }
.brand-caption, .nav-label, .nav-item, .rule-line, .local-note { color: var(--on-pine-muted); }
.nav-item:hover { background: var(--pine-raised); color: var(--on-pine); }
.nav-item.active, .nav-item[aria-current="page"] { background: var(--gold); color: var(--brass-ink); }
.nav-badge { background: rgb(48 42 28 / 12%); color: inherit; }
.rules-summary { background: var(--pine-raised); border-color: var(--pine-line); }
.rules-summary-title, .rule-line strong { color: var(--on-pine); }
.rules-summary .rule-dot { background: var(--gold); }
.rules-summary > .text-button { color: var(--gold); }
.rules-summary > .text-button:hover { color: var(--on-pine); }
.topbar { background: rgb(255 253 248 / 45%); }
.breadcrumbs, .status-pill { color: var(--muted); }
.breadcrumbs strong, .breadcrumbs span:last-child { color: var(--ink); }
.status-pill::before { background: var(--gold); }

.button { background: var(--white); border-color: var(--control-line); color: var(--ink); }
.button:hover { background: var(--surface-soft); border-color: var(--green); }
.button-primary, .button-primary:disabled:hover { background: var(--gold); border-color: var(--gold); color: var(--brass-ink); }
.button-primary:hover { background: var(--brass-hover); border-color: var(--brass-hover); }
.button-subtle { background: transparent; }
.button-danger { color: var(--error); border-color: var(--error-line); }
.button-danger:hover { background: var(--error-soft); border-color: var(--error); }
.text-button, .source-link { color: var(--green); }
.text-button:hover, .source-link:hover { color: var(--pine); }
.icon-button, .close-button { color: var(--muted); }
.icon-button:hover, .close-button:hover { background: var(--surface-soft); color: var(--ink); }

.eyebrow, .subtitle, .stat-label, .keyboard-hint, .hand-counter,
.view-heading p, .legend-item, .chart-rule-label, .chart-note, .scroll-cue,
.metric-label, .metric-card p, .section-description, .category-row > small,
.category-score, .weak-detail, .weak-hand small, .empty-state p, .page-footer,
.session-note, .session-count span, .recent-label, .action-reasons p,
.round-outcome p, .dealer-wait p, .round-log-heading > span,
.move-detail strong > span, .move-detail small, .past-round summary small,
.dealer-summary, .past-hands, .round-history-empty,
.hero-evidence > span, .hero-evidence > small, .training-strip,
.drill-controls label, .setup-grid label, .drill-count, .drill-lock,
.assessment-note, .replay-context, .practice-heading p,
.custom-drill > summary span, .learning-summary > summary span,
.mastery-card p, .coverage-number small, .coverage-number > span,
.section-card > .category-row .category-row-header, .section-card > p:not([class]),
.criteria, .matchup-table thead, .matchup-table tbody td,
.session-history .past-round-body > p:not([class]), .move-detail details,
.lesson-summary, .lesson-card ul, .guided-card > p,
.modal-body > p, .setting-description, .shortcut { color: var(--muted); }

.stat-value, .hand-counter strong, .decision-prompt, .card-heading, .session-count,
.metric-number, .section-heading, .category-name, .weak-hand,
.empty-state h2, .empty-state.compact h3, .dealer-wait, .round-log-heading h3,
.round-stats strong, .past-round summary, .hero-evidence strong,
.session-toolbar > strong, .practice-heading p strong, .custom-drill > summary,
.learning-summary > summary, .mastery-card h2, .coverage-number > strong,
.category-row-header > strong, .matchup-table tbody th,
.session-history .past-round summary > strong, .lesson-card h2, .guided-card h2,
.setting-row, .setting-description strong, .rule-details strong { color: var(--ink); }

.stat-value svg, .card-heading svg, .section-heading svg,
.past-round summary::before, .lesson-card li::marker { color: var(--brass-muted); }
.practice-card, .session-card, .metric-card, .section-card, .empty-state,
.chart-wrap, .modal { background: var(--white); border-color: var(--line); }
.practice-card { box-shadow: 0 5px 22px rgb(24 53 41 / 5%); }
.empty-state.compact { background: transparent; }
.practice-toolbar, .setting-row, .weak-item, .round-log li,
.session-evidence, .hero-evidence, .training-strip, .coverage-number,
.section-card > .category-row, .matchup-table th, .matchup-table td,
.lesson-actions { border-color: var(--line); }
.filter-tab { color: var(--muted); }
.filter-tab:hover { background: var(--surface-hover); color: var(--green); }
.filter-tab.active { background: var(--surface-soft); color: var(--ink); }
.filter-count, .count-pill { background: var(--leaf); color: var(--green); }
.practice-toolbar .filter-tabs, .chart-wrap, .history-table-wrap { scrollbar-color: var(--control-line) transparent; }

/* The felt and card faces retain their own high-contrast palette. */
.felt-table { color: var(--felt-ink); background: radial-gradient(ellipse at 50% 42%, var(--green), var(--felt-edge)); }
.felt-table::before { border-color: rgb(207 181 119 / 37%); outline: 1px solid rgb(207 181 119 / 15%); outline-offset: 6px; box-shadow: none; }
.felt-table::after { opacity: .09; }
.table-watermark { color: rgb(239 244 223 / 26%); }
.table-label, .hand-heading, .hand-status, .hand-heading span:last-child { color: var(--felt-muted); }
.table-label strong, .hand-result { color: var(--felt-ink); }
.table-rule, .full-round-table .table-rule { color: var(--felt-brass); opacity: 1; }
.table-divider { background: linear-gradient(to right, transparent, var(--rail), transparent); }
.table-divider::after { background: var(--green); color: var(--rail); }
.card { background: var(--card-paper); border-color: var(--line); color: var(--ink); }
.card-black { color: var(--ink); }
.card-red { color: var(--red); }
.card.card-back { border-color: var(--card-paper); background-color: var(--felt-edge); box-shadow: 0 3px 4px rgb(5 25 15 / 13%), 0 10px 17px rgb(5 25 15 / 10%), inset 0 0 0 2px var(--pine-line); }
.back-emblem { background: var(--felt-edge); border-color: var(--rail); color: var(--rail); }
.hand-total { background: rgb(239 244 223 / 13%); color: var(--felt-ink); }
.split-hands .round-hand { background: rgb(9 62 51 / 35%); border-color: rgb(207 181 119 / 18%); }
.split-hands .active-hand { border-color: var(--gold); background: rgb(228 182 88 / 7%); box-shadow: 0 0 0 2px rgb(228 182 88 / 12%); }
.hand-result.result-win { color: #c5efce; }
.hand-result.result-loss { color: #ffd0bd; }
.hand-result.result-surrender { color: #f2dca8; }

/* All move choices share one resting style; grading keeps its meaning. */
.action-button { background: var(--white); color: var(--ink); border-color: var(--control-line); }
.action-button kbd { color: var(--muted); }
.action-button:hover:not(:disabled) { background: var(--surface-soft); border-color: var(--green); box-shadow: 0 4px 8px rgb(24 53 41 / 6%); }
.action-button.chosen, .action-button.selected { background: var(--gold); color: var(--brass-ink); border-color: var(--gold); }
.action-button.chosen kbd, .action-button.selected kbd { color: inherit; }
.action-button.is-correct, .action-button.correct { background: var(--success-soft); color: var(--success); border-color: var(--success-line); }
.action-button.is-incorrect, .action-button.incorrect { background: var(--error-soft); color: var(--error); border-color: var(--error-line); }
.round-feedback { background: var(--success-soft); color: var(--success); border-color: var(--success-line); }
.round-feedback.is-incorrect { background: var(--error-soft); color: var(--error); border-color: var(--error-line); }
.round-feedback.is-assisted { background: var(--brass-soft); color: var(--brass-muted); border-color: var(--brass-line); }
.feedback-text p { color: var(--success); }
.is-incorrect .feedback-text p { color: var(--error); }
.is-assisted .feedback-text p { color: var(--brass-muted); }
.feedback-symbol { background: rgb(32 58 49 / 8%); }
.next-button { background: var(--gold); color: var(--brass-ink); border-color: var(--gold); }
.next-button:hover { background: var(--brass-hover); border-color: var(--brass-hover); }
.outcome-win h2 { color: var(--success); }
.outcome-loss h2, .history-outcome.result-loss { color: var(--error); }
.outcome-push h2, .outcome-surrender h2 { color: var(--brass-muted); }
.recent-dot { background: var(--surface-soft); color: var(--muted); border-color: var(--line); }
.recent-dot.correct { background: var(--success); border-color: var(--success); }
.recent-dot.incorrect { background: var(--error); border-color: var(--error); }
.recent-dot.assisted { background: var(--gold); border-color: var(--gold); }
.recent-dot svg { color: var(--white); }
.recent-dot.assisted svg { color: var(--brass-ink); }
.move-grade.correct { background: var(--success-soft); color: var(--success); }
.move-grade.incorrect { background: var(--error-soft); color: var(--error); }
.move-grade.assisted { background: var(--brass-soft); color: var(--brass-muted); }
.action-reasons strong { color: var(--muted); }
.dealer-pulse { background: var(--gold); box-shadow: 0 0 0 6px var(--brass-soft); }

/* A warm coaching panel concentrates the brass accent around help. */
.coach-card { background: var(--coach); color: var(--coach-ink); border-color: var(--coach-line); }
.coach-icon { background: var(--brass-soft); color: var(--coach-ink); border-color: var(--coach-line); }
.coach-card .eyebrow, .coach-body, .coach-card .chart-note, .coach-tip-label { color: var(--coach-muted); }
.coach-tip { background: rgb(255 253 248 / 35%); color: var(--coach-ink); border-color: var(--brass-line); }
.coach-tip strong { color: var(--coach-ink); }
.coach-footer { border-color: var(--coach-line); color: var(--coach-muted); }
.coach-footer .hint-button { min-height: 38px; padding: 9px 11px; border-radius: 6px; background: var(--gold); color: var(--brass-ink); }
.coach-footer .hint-button:hover:not(:disabled) { background: var(--brass-hover); }
.coach-footer .text-button { color: var(--coach-ink); }
.hint-button { background: var(--brass-soft); border-color: var(--brass-line); color: var(--brass-ink); }
.hint-button:hover { background: var(--gold); border-color: var(--gold); color: var(--brass-ink); }
.hint-button kbd { border-color: rgb(48 42 28 / 25%); }
.inline-hint { color: var(--green); }
.progress-track { background: var(--surface-soft); }
.progress-fill { background: var(--green); }
.session-evidence, .next-practice small { color: var(--muted); }
.tip-strip { background: var(--brass-soft); border-color: var(--line); }
.tip-icon { color: var(--brass-muted); border-color: var(--coach-line); }
.tip-title { color: var(--ink); }
.tip-copy p { color: var(--muted); }
.page-footer a:hover { color: var(--green); }

/* References retain distinct, labelled action colours. */
.move-hit { background: #f4e6b8; color: #705514; }
.move-stand { background: #d9e8db; color: #285b3c; }
.move-double { background: #d8e9e7; color: #245e56; }
.move-split { background: #e8dff0; color: #65447e; }
.move-surrender { background: #f1dcd2; color: #873f2c; }
.strategy-table th, .strategy-table caption { color: var(--muted); }
.strategy-table caption { background: var(--white); }
.strategy-table thead th { color: var(--ink); background: var(--surface-soft); box-shadow: 0 1px 0 var(--line); }
.strategy-table th:first-child { background: var(--surface-soft); box-shadow: 1px 0 0 var(--line); }
.strategy-table td:first-child:not([class*="move-"]) { background: var(--surface-soft); color: var(--ink); }
.strategy-table td small { opacity: 1; }
.chart-cell:focus-visible { outline-color: var(--pine); }

.round-log { background: var(--white); }
.move-number, .move-detail .move-hand-id, .empty-icon { background: var(--surface-soft); color: var(--green); }
.round-stats, .mastery-card, .criteria, .lesson-nav,
.custom-drill, .drill-controls, .learning-summary, .modal-footer,
.segmented-control, .rule-details { background: var(--surface-soft); border-color: var(--line); }
.learning-summary .hero-evidence { background: transparent; }
.criteria summary, .move-detail details summary { color: var(--green); }
.matchup-table thead { background: var(--surface-soft); }
.rules-lock-note { color: var(--brass-muted); }
.danger-text, .danger-text:hover { color: var(--error); }
.review-mode, .notice, .modal-body > .notice { background: var(--brass-soft); color: var(--brass-muted); border-color: var(--brass-line); }
.review-mode strong, .notice strong { color: var(--brass-ink); }
.replay-context { background: var(--surface-soft); }
.modal-body > .summary-evidence { background: var(--leaf); color: var(--green); border-color: var(--line); }
.custom-drill .drill-controls { border-color: var(--line); }
.drill-controls select, .setup-grid select { color: var(--ink); background-color: var(--white); border-color: var(--control-line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23626d62' stroke-width='1.3'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); }
.drill-controls select:hover:not(:disabled), .setup-grid select:hover:not(:disabled) { border-color: var(--green); }
.segmented-control button { color: var(--muted); }
.segmented-control button.selected { background: var(--gold); color: var(--brass-ink); border-color: var(--gold); }
.rule-details { color: var(--muted); }
.shortcut { border-color: var(--line); }
.shortcut kbd { background: var(--surface-soft); color: var(--ink); border-color: var(--control-line); }
.toast { background: var(--pine); color: var(--on-pine); border-color: var(--pine-line); }
.lesson-link { color: var(--muted); }
.lesson-link > span { background: var(--white); color: var(--green); border-color: var(--control-line); }
.lesson-link:hover { background: var(--leaf); color: var(--green); }
.lesson-link.active { background: var(--white); color: var(--ink); border-color: var(--control-line); }
.lesson-link.active > span { background: var(--gold); color: var(--brass-ink); border-color: var(--gold); }
.example-hand { background: radial-gradient(ellipse at 35% 50%, var(--green), var(--felt-edge)); color: var(--felt-ink); border-color: var(--pine-line); }
.example-hand > span { color: var(--felt-muted); }
.example-actions .button { background: var(--white); }
.example-actions .button:hover { background: var(--surface-soft); }
@media (max-width: 870px) {
  .hero-evidence { background: var(--surface-soft); }
  .learning-summary .hero-evidence { background: transparent; }
}

/* Help, storage status and keyboard navigation. */
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 1000; padding: 12px 18px; background: var(--white); border: 2px solid var(--green); }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }
.access-notice, .help-page { max-width: 760px; margin: 40px auto; padding: 24px; }
.access-notice p, .help-page p, .help-page li { line-height: 1.65; margin: 14px 0; }
.help-page h1 { font: 42px 'Libre Caslon Display', Georgia, serif; margin: 25px 0; }
.help-page h2 { margin: 26px 0 10px; }
.help-page section { margin-bottom: 24px; }
.help-page a { text-decoration: underline; }
.report-field { display: grid; gap: 10px; font-size: 14px; }
.report-field textarea { width: 100%; min-height: 240px; resize: vertical; padding: 12px; font: 14px/1.5 'DM Sans', sans-serif; color: var(--ink); background: var(--white); border: 1px solid var(--control-line); border-radius: 8px; }
.help-footer { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

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