#poker-help {
  width: min(680px, calc(100vw - 28px));
  max-width: none;
  max-height: min(820px, calc(100dvh - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #141416;
  color: var(--ink);
  font: 14px/1.6 var(--sans);
  user-select: text;
}
#poker-help::backdrop { background: rgba(3, 3, 5, 0.82); }
#poker-help .help-shell { display: flex; flex-direction: column; max-height: min(816px, calc(100dvh - 36px)); }
#poker-help .help-header {
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0; padding: 18px 28px; border-bottom: 1px solid var(--line);
}
#poker-help .help-progress { margin-right: auto; color: var(--gold); font-size: 12px; font-weight: 600; }
#poker-help .help-skip { background: none; border: 0; padding: 8px 0 8px 8px; color: var(--muted); font-size: 12px; }
#poker-help .help-skip:hover { color: var(--ink); }
#poker-help .help-body { overflow: auto; padding: 24px 28px; scrollbar-color: var(--gold-2) #141416; scrollbar-width: thin; }
#poker-help h2 { font: 700 30px/1.2 var(--serif); margin: 0 0 18px; text-wrap: balance; }
#poker-help h2:focus { outline: none; }
#poker-help p { margin: 10px 0; }
#poker-help .help-intro { margin-top: 0; color: var(--ink); }
#poker-help .help-note { color: var(--muted); font-size: 12px; }
#poker-help .help-example { padding: 8px 0; display: flex; flex-wrap: wrap; gap: 18px 30px; }
#poker-help .help-example p { margin: 0 0 9px; color: var(--muted); font-size: 12px; }
#poker-help .help-cards { display: inline-flex; gap: 5px; white-space: nowrap; }
#poker-help .help-card {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 42px; height: 58px; padding: 5px;
  border-radius: 5px; background: #f3efe6; color: #191c22;
  font: 700 19px/1 var(--serif); font-variant-numeric: tabular-nums;
}
#poker-help .help-card.red { color: #b42438; }
#poker-help .compact .help-card { min-width: 29px; height: 34px; font-size: 14px; gap: 1px; padding: 3px; }
#poker-help .help-example-caption { color: var(--gold); font-size: 13px; }
#poker-help .help-streets { padding: 0; margin: 20px 0; list-style: none; }
#poker-help .help-streets li { display: flex; gap: 16px; padding: 10px 0; }
#poker-help .help-count { color: var(--gold); font: 700 26px/1.3 var(--serif); min-width: 22px; text-align: center; }
#poker-help .help-streets p, #poker-help .help-start p { margin: 3px 0 0; color: var(--muted); }
#poker-help .help-actions { margin: 20px 0; }
#poker-help .help-actions > div { display: grid; grid-template-columns: 126px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
#poker-help .help-actions dt { font-weight: 700; color: var(--gold); }
#poker-help .help-actions dd { margin: 0; }
#poker-help .help-hands { margin: 18px 0; padding-left: 26px; font-variant-numeric: tabular-nums; }
#poker-help .help-hands li { padding: 5px 0 5px 5px; }
#poker-help .help-hands li::marker { color: var(--muted); font-size: 12px; }
#poker-help .help-hands b { display: inline-block; width: 190px; font-size: 13px; vertical-align: middle; }
#poker-help .help-hands .help-cards { vertical-align: middle; }
#poker-help .help-start { margin: 22px 0; padding-left: 24px; }
#poker-help .help-start li { padding: 0 0 18px 8px; }
#poker-help .help-start li::marker { color: var(--gold); font-weight: 700; }
#poker-help .help-footer { padding: 16px 28px 20px; flex-shrink: 0; border-top: 1px solid var(--line); }
#poker-help .help-footer p { color: var(--muted); font-size: 11px; margin: 0 0 14px; }
#poker-help .help-nav { display: flex; justify-content: space-between; gap: 12px; }
#poker-help button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#poker-help ::selection { background: var(--gold); color: #1d1406; }
#poker-help.date-invitation {
  color-scheme: light;
  background: #f5efe4;
  color: #392c29;
  border: 0;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
}
#poker-help.date-invitation .help-header { border-bottom-color: #dfd3c0; }
#poker-help .date-brand { margin-right: auto; font: 700 18px/1.3 var(--serif); color: #664b31; }
#poker-help.date-invitation .lang-pick { background: #eee5d5; border-color: #cfbea7; }
#poker-help.date-invitation .lang-pick button { color: #69594a; }
#poker-help.date-invitation .lang-pick button.active { background: #e3d3b8; color: #392c29; }
#poker-help.date-invitation .help-skip { color: #69594a; }
#poker-help.date-invitation .help-skip:hover { color: #392c29; }
#poker-help .date-letter { padding: 30px 44px 24px; }
#poker-help .date-mark { display: block; width: 64px; height: 72px; margin: 0 0 24px; }
#poker-help .date-letter h2 { font-size: clamp(30px, 5vw, 42px); line-height: 1.15; max-width: 18ch; margin-bottom: 22px; }
#poker-help .date-letter p { max-width: 56ch; font-size: 15px; line-height: 1.7; margin: 14px 0; }
#poker-help .date-letter .date-lead { font-weight: 600; }
#poker-help .date-letter .date-when { margin: 20px 0; color: #8d3544; font-weight: 700; font-variant-numeric: tabular-nums; }
#poker-help .date-letter .date-postscript { margin-top: 22px; color: #69594a; font: italic 600 19px/1.5 var(--serif); }
#poker-help.date-invitation .help-footer { border-top-color: #dfd3c0; padding: 20px 44px 28px; }
#poker-help.date-invitation .help-nav { align-items: center; justify-content: flex-end; }
#poker-help.date-invitation .help-nav .ghost { margin-right: auto; color: #69594a; border-color: #cfbea7; }
#poker-help.date-invitation .help-nav .primary { background: #823545; color: #fff9ef; border-color: transparent; min-height: 46px; box-shadow: 0 6px 16px rgba(80, 28, 36, 0.2); }
#poker-help.date-invitation .help-nav .primary:hover { background: #6e2938; }
#poker-help.date-invitation button:focus-visible { outline-color: #823545; }
#poker-help.date-invitation ::selection { background: #823545; color: #fff9ef; }
@media (prefers-reduced-motion: no-preference) {
  #poker-help.date-invitation[open] .date-letter { animation: date-letter-open 380ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes date-letter-open { from { transform: translateY(10px); opacity: 0.7; } to { transform: translateY(0); opacity: 1; } }
}
@media (max-width: 520px) {
  #poker-help { font-size: 13px; }
  #poker-help .help-header { padding: 12px 16px; gap: 9px; }
  #poker-help .help-body { padding: 20px 16px; }
  #poker-help h2 { font-size: 26px; }
  #poker-help .help-footer { padding: 14px 16px 16px; }
  #poker-help .help-hands b { width: 100%; margin-bottom: 5px; }
  #poker-help .help-hands li { padding-top: 7px; padding-bottom: 7px; }
  #poker-help .help-actions > div { grid-template-columns: 1fr; gap: 4px; }
  #poker-help .date-brand { font-size: 16px; }
  #poker-help .date-letter { padding: 24px 22px 20px; }
  #poker-help .date-mark { width: 52px; height: 59px; margin-bottom: 20px; }
  #poker-help .date-letter p { font-size: 14px; }
  #poker-help.date-invitation .help-footer { padding: 16px 22px 22px; }
  #poker-help.date-invitation .help-nav { flex-wrap: wrap; }
}